吴雨瞳添加了注释

aurora-vue/aurora-admin/src/components/Crontab/second.vue

@@ -1,25 +1,38 @@
 <template>
+  <!-- 使用Element UI 表单组件，设置尺寸为 small -->
   <el-form size="small">
+    <!-- 第一个单选按钮：通配符模式 -->
     <el-form-item>
       <el-radio v-model="radioValue" :label="1"> 秒，允许的通配符[, - * /] </el-radio>
     </el-form-item>
+
+    <!-- 第二个单选按钮：周期范围模式（从 X 到 Y 秒） -->
     <el-form-item>
       <el-radio v-model="radioValue" :label="2">
         周期从
+        <!-- 开始秒输入框，最小值 0，最大值 58（确保结束秒可+1） -->
         <el-input-number v-model="cycle01" :min="0" :max="58" /> -
+        <!-- 结束秒输入框，最小值为开始秒+1，最大值 59 -->
         <el-input-number v-model="cycle02" :min="cycle01 ? cycle01 + 1 : 1" :max="59" /> 秒
       </el-radio>
     </el-form-item>
+
+    <!-- 第三个单选按钮：间隔执行模式（从 X 秒开始，每 Y 秒执行） -->
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
         从
+        <!-- 开始秒输入框，最小值 0，最大值 58 -->
         <el-input-number v-model="average01" :min="0" :max="58" /> 秒开始，每
+        <!-- 间隔秒输入框，最小值 1，最大值为 59-开始秒 -->
         <el-input-number v-model="average02" :min="1" :max="59 - average01 || 0" /> 秒执行一次
       </el-radio>
     </el-form-item>
+
+    <!-- 第四个单选按钮：指定秒模式（多选具体秒数） -->
     <el-form-item>
       <el-radio v-model="radioValue" :label="4">
         指定
+        <!-- 多选下拉框，可选择 0-59 秒 -->
         <el-select clearable v-model="checkboxList" placeholder="可多选" multiple style="width: 100%">
           <el-option v-for="item in 60" :key="item" :value="item - 1">{{ item - 1 }}</el-option>
         </el-select>
@@ -32,74 +45,96 @@
 export default {
   data() {
     return {
-      radioValue: 1,
-      cycle01: 1,
-      cycle02: 2,
-      average01: 0,
-      average02: 1,
-      checkboxList: [],
-      checkNum: this.$options.propsData.check
+      radioValue: 1, // 单选按钮选中值，默认 1（通配符模式）
+      cycle01: 1, // 周期开始秒
+      cycle02: 2, // 周期结束秒
+      average01: 0, // 间隔开始秒
+      average02: 1, // 间隔时间（秒）
+      checkboxList: [], // 选中的指定秒列表
+      checkNum: this.$options.propsData.check // 引用父组件传入的数值校验方法
     }
   },
-  name: 'crontab-second',
-  props: ['check', 'radioParent'],
+  name: 'crontab-second', // 组件名称：crontab 秒配置组件
+  props: ['check', 'cron'], // 接收父组件参数：校验方法和 cron 表达式对象
+
   methods: {
+    // 单选按钮切换时触发，更新 cron 表达式的秒部分
     radioChange() {
       switch (this.radioValue) {
         case 1:
+          // 通配符模式，向父组件传递 '*'
           this.$emit('update', 'second', '*', 'second')
           break
         case 2:
-          this.$emit('update', 'second', this.cycleTotal)
+          // 周期范围模式，传递拼接后的字符串（如 1-5）
+          this.$emit('update', 'second', this.cycleTotal, 'second')
           break
         case 3:
-          this.$emit('update', 'second', this.averageTotal)
+          // 间隔执行模式，传递拼接后的字符串（如 0/5）
+          this.$emit('update', 'second', this.averageTotal, 'second')
           break
         case 4:
-          this.$emit('update', 'second', this.checkboxString)
+          // 指定秒模式，传递逗号分隔的字符串（如 1,3,5）
+          this.$emit('update', 'second', this.checkboxString, 'second')
           break
       }
     },
+
+    // 周期范围变更时触发（仅在选中周期模式时生效）
     cycleChange() {
       if (this.radioValue == '2') {
-        this.$emit('update', 'second', this.cycleTotal)
+        this.$emit('update', 'second', this.cycleTotal, 'second')
       }
     },
+
+    // 间隔时间变更时触发（仅在选中间隔模式时生效）
     averageChange() {
       if (this.radioValue == '3') {
-        this.$emit('update', 'second', this.averageTotal)
+        this.$emit('update', 'second', this.averageTotal, 'second')
       }
     },
+
+    // 选中秒变更时触发（仅在选中指定模式时生效）
     checkboxChange() {
       if (this.radioValue == '4') {
-        this.$emit('update', 'second', this.checkboxString)
+        this.$emit('update', 'second', this.checkboxString, 'second')
       }
     }
   },
+
+  // 监听数据变化，触发对应更新方法
   watch: {
-    radioValue: 'radioChange',
-    cycleTotal: 'cycleChange',
-    averageTotal: 'averageChange',
-    checkboxString: 'checkboxChange',
-    radioParent() {
-      this.radioValue = this.radioParent
-    }
+    radioValue: 'radioChange', // 单选值变化时触发
+    cycleTotal: 'cycleChange', // 周期范围计算结果变化时触发
+    averageTotal: 'averageChange', // 间隔计算结果变化时触发
+    checkboxString: 'checkboxChange' // 选中秒字符串变化时触发
   },
+
   computed: {
+    // 计算周期范围字符串（如 1-5）
     cycleTotal: function () {
+      // 校验周期开始秒，限制在 0-58
       const cycle01 = this.checkNum(this.cycle01, 0, 58)
+      // 校验周期结束秒，限制在开始秒+1 到 59
       const cycle02 = this.checkNum(this.cycle02, cycle01 ? cycle01 + 1 : 1, 59)
       return cycle01 + '-' + cycle02
     },
+
+    // 计算间隔执行字符串（如 0/5）
     averageTotal: function () {
+      // 校验间隔开始秒，限制在 0-58
       const average01 = this.checkNum(this.average01, 0, 58)
+      // 校验间隔时间，限制在 1 到 59-开始秒
       const average02 = this.checkNum(this.average02, 1, 59 - average01 || 0)
       return average01 + '/' + average02
     },
+
+    // 计算选中秒的逗号分隔字符串（如 1,3,5）
     checkboxString: function () {
       let str = this.checkboxList.join()
+      // 如果未选中任何秒，返回 '*'
       return str == '' ? '*' : str
     }
   }
 }
-</script>
+</script>