feat(任务调度): 重构任务调度界面并替换cron组件

refactor(IntervalTab): 优化时间间隔选择组件样式和功能
feat(任务管理): 使用vue3-cron-plus替换原有cron组件
fix(样式): 修复导航栏下拉菜单图标颜色问题
chore(依赖): 更新package.json依赖项和node版本要求
perf(构建): 优化vite配置和代码分割策略

frontend/src/components/IntervalTab/index.vue

@@ -1,37 +1,74 @@
 <template>
-  <el-form :model="crontabValueObj" ref="formRef" label-width="auto" label-suffix=":" :inline="true" class="flex">
-    <el-form-item label="秒" prop="second" style="width: 20%">
-      <el-select v-model:value="crontabValueObj.second" placeholder="秒">
-        <el-option v-for="second in seconds" :key="second" :value="second">{{ second }}</el-option>
+  <el-form :model="crontabValueObj" ref="formRef" label-width="auto" label-suffix=":" :inline="true" class="interval-tab-form">
+    <el-form-item label="秒" prop="second" class="form-item">
+      <el-select v-model="crontabValueObj.second" placeholder="秒" clearable>
+        <el-option label="每秒" value="*">*</el-option>
+        <el-option v-for="second in seconds" :key="second" :label="second" :value="second.toString()">{{ second }}</el-option>
       </el-select>
     </el-form-item>
-    <el-form-item label="分" prop="min" style="width: 20%">
-      <el-select v-model:value="crontabValueObj.min" placeholder="分">
-        <el-option v-for="min in minutes" :key="min" :value="min">{{min}}</el-option>
+    <el-form-item label="分" prop="min" class="form-item">
+      <el-select v-model="crontabValueObj.min" placeholder="分" clearable>
+        <el-option label="每分" value="*">*</el-option>
+        <el-option v-for="min in minutes" :key="min" :label="min" :value="min.toString()">{{min}}</el-option>
       </el-select>
     </el-form-item>
-    <el-form-item label="时" prop="hour" style="width: 20%">
-      <el-select v-model:value="crontabValueObj.hour" placeholder="时">
-        <el-option v-for="hour in hours" :key="hour" :value="hour">{{hour}}</el-option>
+    <el-form-item label="时" prop="hour" class="form-item">
+      <el-select v-model="crontabValueObj.hour" placeholder="时" clearable>
+        <el-option label="每时" value="*">*</el-option>
+        <el-option v-for="hour in hours" :key="hour" :label="hour" :value="hour.toString()">{{hour}}</el-option>
       </el-select>
     </el-form-item>
-    <el-form-item label="天" prop="day" style="width: 20%">
-      <el-select v-model:value="crontabValueObj.day" placeholder="天">
-        <el-option v-for="day in days" :key="day" :value="day">{{day}}</el-option>
+    <el-form-item label="天" prop="day" class="form-item">
+      <el-select v-model="crontabValueObj.day" placeholder="天" clearable>
+        <el-option label="每天" value="*">*</el-option>
+        <el-option v-for="day in days" :key="day" :label="day" :value="day">{{day}}</el-option>
       </el-select>
     </el-form-item>
-    <el-form-item label="周" prop="week" style="width: 20%">
-      <el-select v-model:value="crontabValueObj.week" placeholder="周">
-        <el-option v-for="week in weeks" :key="week" :value="week">{{week}}</el-option>
+    <el-form-item label="周" prop="week" class="form-item">
+      <el-select v-model="crontabValueObj.week" placeholder="周" clearable>
+        <el-option label="每周" value="*">*</el-option>
+        <el-option v-for="week in weekOptions" :key="week.value" :label="week.label" :value="week.value">{{week.label}}</el-option>
       </el-select>
     </el-form-item>
+
+    <div class="form-actions">
+      <el-button @click="emit('cancel')">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确认</el-button>
+    </div>
   </el-form>
 </template>
 
-<script setup>
-import { ref } from "vue";
+<script lang="ts" setup>
 
-const crontabValueObj = ref({
+// 定义接口，增强类型安全
+interface CrontabValue {
+  second: string;
+  min: string;
+  hour: string;
+  day: string;
+  week: string;
+}
+
+interface WeekOption {
+  value: string;
+  label: string;
+}
+
+// 定义props
+const props = defineProps<{
+  cronValue?: string;
+}>();
+
+// 定义emits
+const emit = defineEmits<{
+  (e: 'confirm', value: string): void;
+  (e: 'cancel'): void;
+}>();
+
+const formRef = ref();
+
+// 响应式数据
+const crontabValueObj = ref<CrontabValue>({
   second: "*",
   min: "*",
   hour: "*",
@@ -39,20 +76,100 @@ const crontabValueObj = ref({
   week: "*",
 });
 
-const seconds = ref(Array.from({ length: 60 }, (_, i) => i.toString()));
-const minutes = ref(Array.from({ length: 60 }, (_, i) => i.toString()));
-const hours = ref(Array.from({ length: 24 }, (_, i) => i.toString()));
-const days = ref(Array.from({ length: 31 }, (_, i) => (i + 1).toString()));
-const weeks = ref(["*", "1", "2", "3", "4", "5", "6", "7"]);
+// 常量定义，避免魔法数字
+const MAX_SECONDS = 60;
+const MAX_MINUTES = 60;
+const MAX_HOURS = 24;
+const MAX_DAYS = 31;
 
+// 生成选择器选项
+const seconds = ref(Array.from({ length: MAX_SECONDS }, (_, i) => i));
+const minutes = ref(Array.from({ length: MAX_MINUTES }, (_, i) => i));
+const hours = ref(Array.from({ length: MAX_HOURS }, (_, i) => i));
+const days = ref(Array.from({ length: MAX_DAYS }, (_, i) => i + 1));
+const weekOptions: WeekOption[] = [
+  { value: "1", label: "周一" },
+  { value: "2", label: "周二" },
+  { value: "3", label: "周三" },
+  { value: "4", label: "周四" },
+  { value: "5", label: "周五" },
+  { value: "6", label: "周六" },
+  { value: "7", label: "周日" }
+];
+
+// 初始化时设置cron值
+onMounted(() => {
+  if (props.cronValue) {
+    setCron(props.cronValue);
+  }
+});
+
+// 处理确认
 const handleConfirm = () => {
+  // 简单验证
   const obj = crontabValueObj.value;
-  return `${obj.second} ${obj.min} ${obj.hour} ${obj.day} ${obj.week}`;
+  if (!obj.second || !obj.min || !obj.hour || !obj.day || !obj.week) {
+    ElMessage.warning('请完善所有时间选项');
+    return;
+  }
+
+  const cronStr = `${obj.second} ${obj.min} ${obj.hour} ${obj.day} ${obj.week}`;
+  emit('confirm', cronStr);
 };
 
-// 暴露方法和属性给父组件
-defineExpose({ handleConfirm, crontabValueObj });
+// 设置cron表达式的值
+const setCron = (cronStr: string) => {
+  if (!cronStr) return;
+  const parts = cronStr.split(' ');
+  if (parts.length !== 5) {
+    ElMessage.warning('无效的cron表达式格式');
+    return;
+  }
+
+  const [second, min, hour, day, week] = parts;
+  crontabValueObj.value = {
+    second: second || '*',
+    min: min || '*',
+    hour: hour || '*',
+    day: day || '*',
+    week: week || '*'
+  };
+};
+
+// 暴露方法给父组件
+defineExpose({ setCron });
 </script>
 
 <style lang="scss" scoped>
-// 样式可以根据需要调整</style>
+.interval-tab-form {
+  width: 100%;
+  flex-wrap: wrap;
+  gap: 16px 8px;
+}
+
+.form-item {
+  width: calc(20% - 8px);
+  min-width: 120px;
+}
+
+.form-actions {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+  gap: 8px;
+}
+
+// 响应式调整
+@media (max-width: 768px) {
+  .form-item {
+    width: calc(33.33% - 8px);
+  }
+}
+
+@media (max-width: 480px) {
+  .form-item {
+    width: calc(50% - 8px);
+  }
+}
+</style>