feat(cron): ms-cron-select组件

frontend/src/components/pure/ms-cron-select/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <a-select v-model:model-value="cron" allow-create>
+    <template #label="{ data }">
+      <div class="flex items-center">
+        {{ data.value }}
+        <div class="ml-[4px] text-[var(--color-text-4)]">{{ data.label.split('?')[1] }}</div>
+      </div>
+    </template>
+    <a-option v-for="item of syncFrequencyOptions" :key="item.value" :value="item.value" class="block">
+      <div class="flex w-full items-center justify-between">
+        {{ item.value }}
+        <div class="ml-[4px] text-[var(--color-text-4)]">{{ item.label }}</div>
+      </div>
+    </a-option>
+  </a-select>
+</template>
+
+<script setup lang="ts">
+  import { useI18n } from '@/hooks/useI18n';
+
+  const { t } = useI18n();
+
+  const cron = defineModel<string>('modelValue', {
+    required: true,
+  });
+
+  const syncFrequencyOptions = [
+    { label: t('ms.cron.select.timeTaskHour'), value: '0 0 0/1 * * ?' },
+    { label: t('ms.cron.select.timeTaskSixHour'), value: '0 0 0/6 * * ?' },
+    { label: t('ms.cron.select.timeTaskTwelveHour'), value: '0 0 0/12 * * ?' },
+    { label: t('ms.cron.select.timeTaskDay'), value: '0 0 0 * * ?' },
+  ];
+</script>
+
+<style lang="less" scoped></style>

frontend/src/components/pure/ms-cron-select/locale/en-US.ts

@@ -0,0 +1,6 @@
+export default {
+  'ms.cron.select.timeTaskHour': '(Every hour)',
+  'ms.cron.select.timeTaskSixHour': '(Every 6 hours)',
+  'ms.cron.select.timeTaskTwelveHour': '(Every 12 hours)',
+  'ms.cron.select.timeTaskDay': '(Every day)',
+};

frontend/src/components/pure/ms-cron-select/locale/zh-CN.ts

@@ -0,0 +1,6 @@
+export default {
+  'ms.cron.select.timeTaskHour': '(每小时)',
+  'ms.cron.select.timeTaskSixHour': '(每 6 小时)',
+  'ms.cron.select.timeTaskTwelveHour': '(每 12 小时)',
+  'ms.cron.select.timeTaskDay': '(每天)',
+};

frontend/src/views/api-test/scenario/components/scenarioTable.vue

@@ -212,20 +212,7 @@
     <a-form ref="scheduleConfigRef" class="rounded-[4px]" :model="scheduleConfig" layout="vertical">
       <!--      触发时间-->
       <a-form-item :label="t('apiScenario.schedule.task.schedule')">
-        <a-select v-model:model-value="scheduleConfig.cron">
-          <template #label="{ data }">
-            <div class="flex items-center">
-              {{ data.value }}
-              <div class="ml-[4px] text-[var(--color-text-4)]">{{ data.label.split('?')[1] }}</div>
-            </div>
-          </template>
-          <a-option v-for="item of syncFrequencyOptions" :key="item.value" :value="item.value" class="block">
-            <div class="flex w-full items-center justify-between">
-              {{ item.value }}
-              <div class="ml-[4px] text-[var(--color-text-4)]">{{ item.label }}</div>
-            </div>
-          </a-option>
-        </a-select>
+        <MsCronSelect v-model:model-value="scheduleConfig.cron" />
       </a-form-item>
       <!--      环境选择-->
       <a-form-item :label="t('case.execute.selectEnv')">
@@ -500,6 +487,7 @@
   import dayjs from 'dayjs';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
+  import MsCronSelect from '@/components/pure/ms-cron-select/index.vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import type { BatchActionParams, BatchActionQueryParams, MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
@@ -1033,12 +1021,6 @@
   }
 
   const showScheduleModal = ref(false);
-  const syncFrequencyOptions = [
-    { label: t('apiTestManagement.timeTaskHour'), value: '0 0 0/1 * * ?' },
-    { label: t('apiTestManagement.timeTaskSixHour'), value: '0 0 0/6 * * ?' },
-    { label: t('apiTestManagement.timeTaskTwelveHour'), value: '0 0 0/12 * * ?' },
-    { label: t('apiTestManagement.timeTaskDay'), value: '0 0 0 * * ?' },
-  ];
 
   async function resetScheduleConfig(record: ApiScenarioTableItem) {
     // 初始化资源池

frontend/src/views/test-plan/testPlan/components/scheduledModal.vue

@@ -15,22 +15,7 @@
     </template>
     <a-form ref="formRef" :model="form" layout="vertical">
       <a-form-item :label="t('testPlan.testPlanIndex.triggerTime')" asterisk-position="end">
-        <a-select v-model:model-value="form.cron" :placeholder="t('common.pleaseSelect')">
-          <a-option v-for="item of syncFrequencyOptions" :key="item.value" :value="item.value">
-            <span class="text-[var(--color-text-2)]"> {{ item.value }}</span
-            ><span class="ml-1 text-[var(--color-text-n4)] hover:text-[rgb(var(--primary-5))]">
-              {{ item.label }}
-            </span>
-          </a-option>
-          <!-- TODO :暂时不做 -->
-          <!-- <template #footer>
-            <div class="mb-[6px] mt-[4px] p-[3px_8px]">
-              <MsButton type="text" class="text-[rgb(var(--primary-5))]" @click="createCustomFrequency">
-                {{ t('testPlan.testPlanIndex.customFrequency') }}
-              </MsButton>
-            </div>
-          </template> -->
-        </a-select>
+        <MsCronSelect v-model:model-value="form.cron" />
       </a-form-item>
       <!-- TOTO 环境暂时不上 -->
       <!-- <a-radio-group v-model="form.env" class="mb-4">
@@ -86,17 +71,19 @@
               <div>{{ t('testPlan.testPlanIndex.timingStateClose') }}</div>
             </template>
             <div class="mx-1 flex items-center">
-              <span class="mt-[2px]"
-                ><IconQuestionCircle class="h-[16px] w-[16px] text-[--color-text-4] hover:text-[rgb(var(--primary-5))]"
-              /></span>
+              <span class="mt-[2px]">
+                <IconQuestionCircle
+                  class="h-[16px] w-[16px] text-[--color-text-4] hover:text-[rgb(var(--primary-5))]"
+                />
+              </span>
             </div>
           </a-tooltip>
         </div>
         <div>
           <a-button type="secondary" class="mr-3" @click="handleCancel">{{ t('system.plugin.pluginCancel') }}</a-button>
-          <a-button type="primary" :loading="confirmLoading" @click="handleCreate">{{
-            props.taskConfig ? t('common.update') : t('common.create')
-          }}</a-button>
+          <a-button type="primary" :loading="confirmLoading" @click="handleCreate">
+            {{ props.taskConfig ? t('common.update') : t('common.create') }}
+          </a-button>
         </div>
       </div>
     </template>
@@ -109,6 +96,8 @@
   import { type FormInstance, Message, type ValidatedError } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
 
+  import MsCronSelect from '@/components/pure/ms-cron-select/index.vue';
+
   import { configSchedule } from '@/api/modules/test-plan/testPlan';
   import { useI18n } from '@/hooks/useI18n';
 
@@ -174,13 +163,6 @@
     });
   }
 
-  const syncFrequencyOptions = [
-    { label: t('apiTestManagement.timeTaskHour'), value: '0 0 0/1 * * ?' },
-    { label: t('apiTestManagement.timeTaskSixHour'), value: '0 0 0/6 * * ?' },
-    { label: t('apiTestManagement.timeTaskTwelveHour'), value: '0 0 0/12 * * ?' },
-    { label: t('apiTestManagement.timeTaskDay'), value: '0 0 0 * * ?' },
-  ];
-
   watch(
     () => props.taskConfig,
     (val) => {