吴雨瞳添加了注释

aurora-vue/aurora-admin/src/views/quartz/Quartz.vue

@@ -1,35 +1,43 @@
 <template>
+  <!-- 主卡片容器，用于包裹整个页面内容 -->
   <el-card class="main-card">
+    <!-- 搜索表单区域 -->
     <el-form ref="queryForm" :inline="true" label-width="68px">
+      <!-- 任务名称搜索项 -->
       <el-form-item label="任务名称" prop="jobName">
         <el-input
-          v-model="searchParams.jobName"
-          placeholder="请输入任务名称"
-          clearable
-          size="small"
-          @keyup.enter.native="listJobs" />
+            v-model="searchParams.jobName"
+            placeholder="请输入任务名称"
+            clearable
+            size="small"
+            @keyup.enter.native="listJobs" />
       </el-form-item>
+      <!-- 任务组名搜索项 -->
       <el-form-item label="任务组名" prop="jobGroup">
         <el-select
-          @change="listJobs"
-          v-model="searchParams.jobGroup"
-          placeholder="请选择任务组名"
-          clearable
-          size="small">
+            @change="listJobs"
+            v-model="searchParams.jobGroup"
+            placeholder="请选择任务组名"
+            clearable
+            size="small">
           <el-option v-for="jobGroup in jobGroups" :key="jobGroup" :label="jobGroup" :value="jobGroup" />
         </el-select>
       </el-form-item>
+      <!-- 任务状态搜索项 -->
       <el-form-item label="任务状态" prop="status">
         <el-select @change="listJobs" v-model="searchParams.status" placeholder="请选择任务状态" clearable size="small">
           <el-option label="正常" :value="1" />
           <el-option label="暂停" :value="0" />
         </el-select>
       </el-form-item>
+      <!-- 搜索和重置按钮 -->
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="small" @click="listJobs">搜索</el-button>
         <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
       </el-form-item>
     </el-form>
+
+    <!-- 操作按钮区域 -->
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
@@ -39,19 +47,24 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="danger"
-          size="small"
-          icon="el-icon-delete"
-          :disabled="jobIds.length == 0"
-          @click="isDelete = true">
+            type="danger"
+            size="small"
+            icon="el-icon-delete"
+            :disabled="jobIds.length == 0"
+            @click="isDelete = true">
           批量删除
         </el-button>
       </el-col>
     </el-row>
+
+    <!-- 任务列表表格 -->
     <div style="margin-top: 5px">
       <el-table border style="width: 100%" :data="jobs" @selection-change="selectionChange" v-loading="loading">
+        <!-- 复选框列 -->
         <el-table-column type="selection" width="55" align="center" />
+        <!-- 任务名称列 -->
         <el-table-column label="任务名称" width="160" align="center" prop="jobName" :show-overflow-tooltip="true" />
+        <!-- 任务组名列 -->
         <el-table-column label="任务组名" align="center" prop="jobGroup">
           <template slot-scope="scope">
             <el-tag>
@@ -59,35 +72,44 @@
             </el-tag>
           </template>
         </el-table-column>
+        <!-- 调用目标字符串列 -->
         <el-table-column label="调用目标字符串" align="center" prop="invokeTarget" :show-overflow-tooltip="true" />
+        <!-- cron执行表达式列 -->
         <el-table-column label="cron执行表达式" align="center" prop="cronExpression" :show-overflow-tooltip="true" />
+        <!-- 状态列（开关控制） -->
         <el-table-column label="状态" align="center">
           <template slot-scope="scope">
             <el-switch
-              v-model="scope.row.status"
-              active-color="#13ce66"
-              inactive-color="#F4F4F5"
-              :active-value="1"
-              :inactive-value="0"
-              @change="changeStatus(scope.row)"></el-switch>
+                v-model="scope.row.status"
+                active-color="#13ce66"
+                inactive-color="#F4F4F5"
+                :active-value="1"
+                :inactive-value="0"
+                @change="changeStatus(scope.row)"></el-switch>
           </template>
         </el-table-column>
+        <!-- 创建时间列 -->
         <el-table-column label="创建时间" align="center" width="160">
           <template slot-scope="scope">
             {{ scope.row.createTime | dateTime }}
           </template>
         </el-table-column>
+        <!-- 备注列 -->
         <el-table-column label="备注" align="center" width="160">
           <template slot-scope="scope">
             {{ scope.row.remark }}
           </template>
         </el-table-column>
+        <!-- 操作列 -->
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template slot-scope="scope">
+            <!-- 编辑按钮 -->
             <el-button size="mini" type="text" @click="handleChange(scope.row.id)">编辑</el-button>
+            <!-- 删除确认弹窗 -->
             <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="deleteJobs(scope.row.id)">
               <el-button size="mini" type="text" slot="reference">删除</el-button>
             </el-popconfirm>
+            <!-- 更多操作下拉菜单 -->
             <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
               <el-button size="mini" type="text" style="margin-left: 9px">更多</el-button>
               <el-dropdown-menu slot="dropdown">
@@ -100,16 +122,20 @@
         </el-table-column>
       </el-table>
     </div>
+
+    <!-- 分页控件 -->
     <el-pagination
-      class="pagination-container"
-      background
-      @size-change="sizeChange"
-      @current-change="currentChange"
-      :current-page="current"
-      :page-size="size"
-      :total="count"
-      :page-sizes="[10, 20]"
-      layout="total, sizes, prev, pager, next, jumper" />
+        class="pagination-container"
+        background
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="current"
+        :page-size="size"
+        :total="count"
+        :page-sizes="[10, 20]"
+        layout="total, sizes, prev, pager, next, jumper" />
+
+    <!-- 批量删除确认弹窗 -->
     <el-dialog :visible.sync="isDelete" width="30%">
       <div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
       <div style="font-size: 1rem">是否删除选中项？</div>
@@ -118,6 +144,8 @@
         <el-button type="primary" @click="deleteJobs(null)"> 确 定 </el-button>
       </div>
     </el-dialog>
+
+    <!-- 新增/编辑任务弹窗 -->
     <el-dialog :title="title" :visible.sync="dialogFormVisible" width="800px" append-to-body>
       <el-form ref="dataForm" :model="job" :rules="rules" label-width="120px">
         <el-row>
@@ -135,6 +163,7 @@
             <el-form-item prop="invokeTarget">
               <span slot="label">
                 调用方法
+                <!-- 调用方法提示 tooltip -->
                 <el-tooltip placement="top">
                   <div slot="content">
                     Bean调用示例：auroraQuartz.blogParams('blog')
@@ -199,9 +228,13 @@
         <el-button type="primary" @click="handleEditOrUpdate">确 定</el-button>
       </div>
     </el-dialog>
+
+    <!-- Cron表达式生成器弹窗 -->
     <el-dialog title="Cron表达式生成器" :visible.sync="openCron" append-to-body destroy-on-close class="scrollbar">
       <crontab @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
     </el-dialog>
+
+    <!-- 任务详情弹窗 -->
     <el-dialog title="任务详细" :visible.sync="openView" @closed="afterClosed" width="700px" append-to-body>
       <el-form ref="form" :model="job" label-width="120px" size="mini">
         <el-row>