style: 优化Cron生成按钮样式

src/components/GenCron/CronModel/index.vue

@@ -2,7 +2,7 @@
   <a-modal v-model:visible="visible"
            modal-class="modal-form-small"
            title-align="start"
-           title="CRON 生成器"
+           title="Cron表达式生成"
            :top="32"
            :width="780"
            :align-center="false"

src/views/schedule/job/JobAddModal.vue

@@ -49,25 +49,41 @@
             </a-form-item>
           </a-col>
           <a-col v-bind="colProps">
-            <a-form-item :label="form.triggerType === 2 ? '间隔时长' : 'CRON表达式'" field="triggerInterval">
+            <a-form-item
+              v-if="form.triggerType === 2"
+              label="间隔时长"
+              field="triggerInterval"
+              :rules="[{ required: true, message: '请输入间隔时长' }]"
+            >
               <a-input-number
-                v-if="form.triggerType === 2"
-                v-model="triggerIntervalNumber"
+                v-model="form.triggerInterval"
                 placeholder="请输入间隔时长"
                 :min="1"
               >
                 <template #suffix>秒</template>
               </a-input-number>
-              <div v-else style="display: flex;">
+            </a-form-item>
+            <a-form-item
+              v-else
+              label="Cron表达式"
+              field="triggerInterval"
+              :rules="[{ required: true, message: '请输入Cron表达式' }]"
+            >
+              <div style="display: flex;">
                 <a-input
-                    v-model="form.triggerInterval"
-                    placeholder="请输入CRON表达式"
-                />
-                <a-button @click="openGeneratorCron(form.triggerInterval)">
-                  <template #icon>
-                    <icon-history />
+                  v-model="form.triggerInterval"
+                  placeholder="请输入Cron表达式"
+                >
+                  <template #append>
+                    <a-tooltip content="Cron表达式生成">
+                      <a-button class="gi_hover_btn-border" @click="openGeneratorCron(form.triggerInterval)">
+                        <template #icon>
+                          <icon-clock-circle />
+                        </template>
+                      </a-button>
+                    </a-tooltip>
                   </template>
-                </a-button>
+                </a-input>
               </div>
             </a-form-item>
           </a-col>
@@ -189,7 +205,6 @@ const rules: FormInstance['rules'] = {
   groupName: [{ required: true, message: '请选择任务组' }],
   jobName: [{ required: true, message: '请输入任务名称' }],
   triggerType: [{ required: true, message: '请选择触发类型' }],
-  triggerInterval: [{ required: true, message: '请输入间隔时长' }],
   taskType: [{ required: true, message: '请选择任务类型' }],
   executorInfo: [{ required: true, message: '请输入执行器名称' }],
   routeKey: [{ required: true, message: '请选择路由策略' }],
@@ -291,15 +306,6 @@ const triggerTypeChange = () => {
       break
   }
 }
-// 间隔时长
-const triggerIntervalNumber = computed({
-  get() {
-    return Number(form.triggerInterval)
-  },
-  set(newValue) {
-    form.triggerInterval = newValue.toString()
-  }
-})
 
 // 新增切片参数
 const onAddArgs = () => {
@@ -354,4 +360,13 @@ fieldset legend {
   align-self: flex-start;
   width: 100px;
 }
+
+:deep(.arco-input-append) {
+  padding: 0;
+  .arco-btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border: 1px solid transparent;
+  }
+}
 </style>

src/views/schedule/job/JobDetailDrawer.vue

@@ -9,7 +9,7 @@
       <a-descriptions-item label="触发类型">
         <GiCellTag :value="dataDetail?.triggerType" :dict="job_trigger_type_enum" />
       </a-descriptions-item>
-      <a-descriptions-item v-if="dataDetail?.triggerType === 1" label="CRON">{{ dataDetail?.triggerInterval }}</a-descriptions-item>
+      <a-descriptions-item v-if="dataDetail?.triggerType === 1" label="Cron">{{ dataDetail?.triggerInterval }}</a-descriptions-item>
       <a-descriptions-item v-else-if="dataDetail?.triggerType === 2" label="间隔时长">{{ dataDetail?.triggerInterval }} 秒</a-descriptions-item>
       <a-descriptions-item label="任务类型">
         <GiCellTag :value="dataDetail?.taskType" :dict="job_task_type_enum" />