flash

src/views/sms/flash/index.vue

@@ -1,9 +1,14 @@
-<template> 
+<template>
+  <!-- 整个页面的外层容器，用于对内部各部分内容进行整体布局 -->
   <div class="app-container">
+    <!-- 筛选搜索区域的卡片容器，设置了无阴影效果 -->
     <el-card class="filter-container" shadow="never">
       <div>
+        <!-- 显示搜索图标，用于提示此处可进行搜索操作 -->
         <i class="el-icon-search"></i>
+        <!-- 显示“筛选搜索”文字，明确此处功能 -->
         <span>筛选搜索</span>
+        <!-- 用于触发查询搜索操作的按钮，设置了按钮样式、类型为主要按钮，绑定了点击事件“handleSearchList” -->
         <el-button
           style="float:right"
           type="primary"
@@ -11,6 +16,7 @@
           size="small">
           查询搜索
         </el-button>
+        <!-- 用于触发重置筛选条件操作的按钮，设置了按钮样式、与右侧有一定间距，绑定了点击事件“handleResetSearch” -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -19,42 +25,75 @@
         </el-button>
       </div>
       <div style="margin-top: 15px">
+        <!-- 行内表单，用于设置筛选条件，绑定了数据模型“listQuery”，设置了表单尺寸和标签宽度 -->
         <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+          <!-- 对应“活动名称”输入框的表单项 -->
           <el-form-item label="活动名称：">
+            <!-- 输入框，双向绑定“listQuery.keyword”数据，设置了类名、占位提示以及可清除内容的属性 -->
             <el-input v-model="listQuery.keyword" class="input-width" placeholder="活动名称" clearable></el-input>
           </el-form-item>
         </el-form>
       </div>
     </el-card>
+
+    <!-- 操作区域的卡片容器，同样设置了无阴影效果 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
+      <!-- 用于触发添加活动操作的按钮，设置了按钮尺寸、类名，绑定了点击事件“handleAdd” -->
       <el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加活动</el-button>
+      <!-- 用于触发查看秒杀时间段列表操作的按钮，设置了按钮尺寸、类名，绑定了点击事件“handleShowSessionList” -->
       <el-button size="mini" class="btn-add" @click="handleShowSessionList()">秒杀时间段列表</el-button>
     </el-card>
+
+    <!-- 放置数据表格的容器 -->
     <div class="table-container">
+      <!-- 数据表格组件，绑定了数据“list”，设置了宽度、加载状态以及边框等属性 -->
       <el-table ref="flashTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
+        <!-- 显示选择框的表格列，用于多选操作，设置了宽度和对齐方式 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
+        <!-- 显示编号的表格列，设置了宽度和对齐方式 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.id}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，显示对应行数据中的“id”字段内容 -->
+            {{scope.row.id}}
+          </template>
         </el-table-column>
+        <!-- 显示活动标题的表格列，内容居中对齐 -->
         <el-table-column label="活动标题" align="center">
-          <template slot-scope="scope">{{scope.row.title}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，显示对应行数据中的“title”字段内容 -->
+            {{scope.row.title}}
+          </template>
         </el-table-column>
+        <!-- 显示活动状态的表格列，设置了宽度和对齐方式，使用了过滤器“formatActiveStatus”来格式化显示内容 -->
         <el-table-column label="活动状态" width="140" align="center">
-          <template slot-scope="scope">{{scope.row |formatActiveStatus}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，使用过滤器对对应行数据进行格式化后显示 -->
+            {{scope.row | formatActiveStatus}}
+          </template>
         </el-table-column>
+        <!-- 显示开始时间的表格列，设置了宽度和对齐方式，使用了日期格式化过滤器“formatDate” -->
         <el-table-column label="开始时间" width="140" align="center">
-          <template slot-scope="scope">{{scope.row.startDate | formatDate}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，使用日期格式化过滤器对对应行数据中的时间进行格式化后显示 -->
+            {{scope.row.startDate | formatDate}}
+          </template>
         </el-table-column>
+        <!-- 显示结束时间的表格列，设置了宽度和对齐方式，同样使用了日期格式化过滤器“formatDate” -->
         <el-table-column label="结束时间" width="140" align="center">
-          <template slot-scope="scope">{{scope.row.endDate | formatDate}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，使用日期格式化过滤器对对应行数据中的时间进行格式化后显示 -->
+            {{scope.row.endDate | formatDate}}
+          </template>
         </el-table-column>
+        <!-- 显示上线/下线操作的表格列，设置了宽度和对齐方式，里面包含一个开关组件 -->
         <el-table-column label="上线/下线" width="200" align="center">
           <template slot-scope="scope">
+            <!-- 开关组件，用于切换上线/下线状态，绑定了状态改变的事件“handleStatusChange”，设置了激活值和未激活值，双向绑定对应行数据中的“status”字段 -->
             <el-switch
               @change="handleStatusChange(scope.$index, scope.row)"
               :active-value="1"
@@ -63,17 +102,21 @@
             </el-switch>
           </template>
         </el-table-column>
+        <!-- 显示操作按钮的表格列，设置了宽度和对齐方式 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
+            <!-- 用于触发设置商品操作的按钮，设置了按钮尺寸、类型为文本按钮，绑定了点击事件“handleSelectSession” -->
             <el-button size="mini"
                        type="text"
                        @click="handleSelectSession(scope.$index, scope.row)">设置商品
             </el-button>
+            <!-- 用于触发编辑操作的按钮，设置了按钮尺寸、类型为文本按钮，绑定了点击事件“handleUpdate” -->
             <el-button size="mini"
                        type="text"
                        @click="handleUpdate(scope.$index, scope.row)">
               编辑
             </el-button>
+            <!-- 用于触发删除操作的按钮，设置了按钮尺寸、类型为文本按钮，绑定了点击事件“handleDelete” -->
             <el-button size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除
@@ -82,7 +125,10 @@
         </el-table-column>
       </el-table>
     </div>
+
+    <!-- 分页组件的容器 -->
     <div class="pagination-container">
+      <!-- 分页组件，设置了背景显示、页面尺寸改变和当前页码改变的事件绑定，以及布局、当前页码、每页显示数量、可选的页面尺寸和数据总条数等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -94,16 +140,22 @@
         :total="total">
       </el-pagination>
     </div>
+
+    <!-- 弹出对话框组件，用于添加活动的相关操作，设置了标题、对话框显示状态的双向绑定以及宽度属性 -->
     <el-dialog
       title="添加活动"
       :visible.sync="dialogVisible"
       width="40%">
+      <!-- 表单组件，用于在对话框内收集添加活动的相关信息，绑定了数据模型“flashPromotion”，设置了表单引用、标签宽度和尺寸等属性 -->
       <el-form :model="flashPromotion"
                ref="flashPromotionForm"
                label-width="150px" size="small">
+        <!-- 对应“活动标题”输入框的表单项 -->
         <el-form-item label="活动标题：">
+          <!-- 输入框，双向绑定“flashPromotion.title”数据，设置了宽度 -->
           <el-input v-model="flashPromotion.title" style="width: 250px"></el-input>
         </el-form-item>
+        <!-- 对应“开始时间”选择框的表单项，使用了日期选择器组件 -->
         <el-form-item label="开始时间：">
           <el-date-picker
             v-model="flashPromotion.startDate"
@@ -111,6 +163,7 @@
             placeholder="请选择时间">
           </el-date-picker>
         </el-form-item>
+        <!-- 对应“结束时间”选择框的表单项，同样使用了日期选择器组件 -->
         <el-form-item label="结束时间：">
           <el-date-picker
             v-model="flashPromotion.endDate"
@@ -118,98 +171,136 @@
             placeholder="请选择时间">
           </el-date-picker>
         </el-form-item>
+        <!-- 对应“上线/下线”选择的表单项，使用了单选按钮组组件 -->
         <el-form-item label="上线/下线">
           <el-radio-group v-model="flashPromotion.status">
+            <!-- 上线单选按钮选项 -->
             <el-radio :label="1">上线</el-radio>
+            <!-- 下线单选按钮选项 -->
             <el-radio :label="0">下线</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-form>
+      <!-- 对话框底部的操作按钮区域，使用了插槽“footer” -->
       <span slot="footer" class="dialog-footer">
+                <!-- 取消按钮，点击可关闭对话框，设置了按钮尺寸 -->
                 <el-button @click="dialogVisible = false" size="small">取 消</el-button>
+        <!-- 确定按钮，点击可触发确认添加活动的相关逻辑，设置了按钮类型为主要按钮、尺寸为小尺寸 -->
                 <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
             </span>
     </el-dialog>
   </div>
 </template>
 <script>
-  import {fetchList, updateStatus, deleteFlash, createFlash, updateFlash} from '@/api/flash';
+// 从'@/api/flash'模块中导入用于获取列表、更新状态、删除、创建以及更新闪购活动相关的函数
-  import {formatDate} from '@/utils/date';
+import {fetchList, updateStatus, deleteFlash, createFlash, updateFlash} from '@/api/flash';
+// 从'@/utils/date'模块中导入用于日期格式化的函数formatDate
+import {formatDate} from '@/utils/date';
 
-  const defaultListQuery = {
+// 默认的列表查询参数对象，包含页码、每页数量以及用于搜索的关键词等初始值，用于初始化列表查询相关设置
+const defaultListQuery = {
   pageNum: 1,
   pageSize: 5,
   keyword: null
-  };
+};
-  const defaultFlashPromotion = {
+// 默认的闪购活动对象，包含活动的编号、标题、开始时间、结束时间以及状态等初始值，用于初始化闪购活动相关数据
+const defaultFlashPromotion = {
   id: null,
   title: null,
   startDate: null,
   endDate: null,
   status: 0
-  };
+};
-  export default {
+
+export default {
   name: 'flashPromotionList',
   data() {
     return {
+      // 当前的列表查询参数，初始化为defaultListQuery的副本，用于在组件中存储和操作实际的查询条件
       listQuery: Object.assign({}, defaultListQuery),
+      // 存储获取到的闪购活动列表数据，初始为null，后续会通过接口获取并赋值
       list: null,
+      // 数据总条数，初始为null，同样会在获取数据后更新具体的值
       total: null,
+      // 列表数据加载状态，初始为false，在获取数据过程中会设置为true表示正在加载
       listLoading: false,
+      // 控制添加/编辑活动对话框的显示与隐藏，初始为false即默认隐藏对话框
       dialogVisible: false,
+      // 当前闪购活动的数据对象，初始化为defaultFlashPromotion的副本，在添加或编辑操作时会更新其值
       flashPromotion: Object.assign({}, defaultFlashPromotion),
+      // 标记当前操作是编辑（true）还是添加（false）状态，初始为false
       isEdit: false
     }
   },
   created() {
+    // 在组件创建完成后，立即调用获取闪购活动列表数据的方法，用于初始化页面数据展示
     this.getList();
   },
   filters: {
+    // 过滤器函数，用于根据活动的开始时间、结束时间和当前时间来格式化并返回活动状态的显示文本
     formatActiveStatus(row) {
+      // 获取当前日期的时间对象
       let nowDate = new Date();
+      // 将传入行数据中的开始时间转换为时间对象
       let startDate = new Date(row.startDate);
+      // 将传入行数据中的结束时间转换为时间对象
       let endDate = new Date(row.endDate);
+      // 判断当前时间是否在活动开始时间和结束时间之间，如果是则表示活动正在进行中
       if (nowDate.getTime() >= startDate.getTime() && nowDate.getTime() <= endDate.getTime()) {
         return '活动进行中';
-        } else if (nowDate.getTime() > endDate.getTime()) {
+      }
+      // 判断当前时间是否大于活动结束时间，如果是则表示活动已结束
+      else if (nowDate.getTime() > endDate.getTime()) {
         return '活动已结束';
-        } else {
+      }
+      // 如果上述条件都不满足，则表示活动还未开始
+      else {
         return '活动未开始';
       }
     },
+    // 过滤器函数，用于对传入的时间数据进行格式化处理，如果时间为空则返回 'N/A'，否则按照指定格式返回格式化后的日期字符串
     formatDate(time) {
       if (time == null || time === '') {
         return 'N/A';
       }
+      // 将传入的时间转换为日期对象
       let date = new Date(time);
+      // 调用导入的formatDate函数（外部定义的日期格式化工具函数）对日期对象进行格式化，格式为 'yyyy-MM-dd'
       return formatDate(date, 'yyyy-MM-dd')
     }
   },
   methods: {
+    // 处理重置搜索条件的方法，将列表查询参数恢复为默认值，以便重新进行查询操作
     handleResetSearch() {
       this.listQuery = Object.assign({}, defaultListQuery);
     },
+    // 处理查询搜索的方法，先将页码重置为1，然后调用获取列表数据的方法，触发根据当前查询条件重新获取数据
     handleSearchList() {
       this.listQuery.pageNum = 1;
       this.getList();
     },
+    // 处理每页显示数量改变的方法，先将页码重置为1，然后更新列表查询参数中的每页显示数量，再调用获取列表数据的方法，以按照新的每页数量获取数据
     handleSizeChange(val) {
       this.listQuery.pageNum = 1;
       this.listQuery.pageSize = val;
       this.getList();
     },
+    // 处理当前页码改变的方法，更新列表查询参数中的当前页码，然后调用获取列表数据的方法，以获取对应页码的数据进行展示
     handleCurrentChange(val) {
       this.listQuery.pageNum = val;
       this.getList();
     },
+    // 处理添加活动的方法，将对话框显示状态设置为true，标记当前操作为添加（非编辑）状态，同时将闪购活动数据对象重置为默认值，准备进行新活动的添加操作
     handleAdd() {
       this.dialogVisible = true;
       this.isEdit = false;
-        this.flashPromotion = Object.assign({},defaultFlashPromotion);
+      this.flashPromotion = Object.assign({}, defaultFlashPromotion);
     },
+    // 处理查看秒杀时间段列表的方法，通过路由跳转到指定的 '/sms/flashSession' 路径对应的页面，通常用于展示相关时间段信息
     handleShowSessionList() {
       this.$router.push({path: '/sms/flashSession'})
     },
+    // 处理活动状态改变的方法，弹出确认框询问是否要修改状态，确认后调用更新状态的接口函数，根据返回结果显示相应提示信息，取消则显示取消修改提示并重新获取列表数据
     handleStatusChange(index, row) {
       this.$confirm('是否要修改该状态?', '提示', {
         confirmButtonText: '确定',
@@ -230,6 +321,7 @@
         this.getList();
       });
     },
+    // 处理删除活动的方法，弹出确认框询问是否要删除活动，确认后调用删除活动的接口函数，成功删除后显示提示信息，并重新获取列表数据以更新页面展示
     handleDelete(index, row) {
       this.$confirm('是否要删除该活动?', '提示', {
         confirmButtonText: '确定',
@@ -245,11 +337,13 @@
         });
       });
     },
+    // 处理编辑活动的方法，将对话框显示状态设置为true，标记当前操作为编辑状态，然后将闪购活动数据对象赋值为传入的要编辑的活动行数据，方便在对话框中展示并修改数据
     handleUpdate(index, row) {
       this.dialogVisible = true;
       this.isEdit = true;
-        this.flashPromotion = Object.assign({},row);
+      this.flashPromotion = Object.assign({}, row);
     },
+    // 处理对话框确认操作的方法，弹出确认框询问是否要确认当前操作（添加或编辑），确认后根据当前是编辑还是添加状态，分别调用对应的接口函数（更新或创建），操作成功后显示相应提示信息，关闭对话框并重新获取列表数据以更新页面展示
     handleDialogConfirm() {
       this.$confirm('是否要确认?', '提示', {
         confirmButtonText: '确定',
@@ -257,12 +351,12 @@
         type: 'warning'
       }).then(() => {
         if (this.isEdit) {
-            updateFlash(this.flashPromotion.id,this.flashPromotion).then(response => {
+          updateFlash(this.flashPromotion.id, this.flashPromotion).then(response => {
             this.$message({
               message: '修改成功！',
               type: 'success'
             });
-              this.dialogVisible =false;
+            this.dialogVisible = false;
             this.getList();
           })
         } else {
@@ -271,15 +365,17 @@
               message: '添加成功！',
               type: 'success'
             });
-              this.dialogVisible =false;
+            this.dialogVisible = false;
             this.getList();
           })
         }
       })
     },
-      handleSelectSession(index,row){
+    // 处理设置商品的方法，通过路由跳转到指定的 '/sms/selectSession' 路径对应的页面，并传递当前闪购活动的id作为查询参数，通常用于后续设置该活动相关商品等操作
-        this.$router.push({path:'/sms/selectSession',query:{flashPromotionId:row.id}})
+    handleSelectSession(index, row) {
+      this.$router.push({path: '/sms/selectSession', query: {flashPromotionId: row.id}})
     },
+    // 获取闪购活动列表数据的方法，先将列表数据加载状态设置为true，表示正在获取数据，然后调用导入的获取列表数据的接口函数，获取成功后更新列表数据和总条数，并将加载状态设置为false
     getList() {
       this.listLoading = true;
       fetchList(this.listQuery).then(response => {
@@ -289,7 +385,7 @@
       });
     }
   }
-  }
+}
 </script>
 <style></style>
 

src/views/sms/flash/productRelationList.vue

@@ -1,52 +1,95 @@
-<template> 
+<template>
+  <!-- 整个页面的外层容器，用于对内部各部分内容进行整体布局 -->
   <div class="app-container">
+    <!-- 操作区域的卡片容器，设置了无阴影效果 -->
     <el-card class="operate-container" shadow="never">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
+      <!-- 用于触发添加操作的按钮，设置了按钮尺寸、类名，绑定了点击事件“handleSelectProduct”，并且与左侧有一定间距 -->
       <el-button size="mini" class="btn-add" @click="handleSelectProduct()" style="margin-left: 20px">添加</el-button>
     </el-card>
+
+    <!-- 放置数据表格的容器，用于展示商品相关数据列表 -->
     <div class="table-container">
+      <!-- 数据表格组件，绑定了数据“list”，设置了表格引用、宽度、加载状态以及边框等属性 -->
       <el-table ref="productRelationTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
+        <!-- 显示编号的表格列，设置了宽度和对齐方式 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.id}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，显示对应行数据中的“id”字段内容 -->
+            {{scope.row.id}}
+          </template>
         </el-table-column>
+        <!-- 显示商品名称的表格列，内容居中对齐，显示的是每行数据中关联商品对象里的“name”字段 -->
         <el-table-column label="商品名称" align="center">
-          <template slot-scope="scope">{{scope.row.product.name}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，显示对应行数据中关联商品对象里的“name”字段内容 -->
+            {{scope.row.product.name}}
+          </template>
         </el-table-column>
+        <!-- 显示货号的表格列，设置了宽度和对齐方式，展示格式为“NO.”加上商品的货号 -->
         <el-table-column label="货号" width="140" align="center">
-          <template slot-scope="scope">NO.{{scope.row.product.productSn}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中关联商品对象里的“productSn”字段内容 -->
+            NO.{{scope.row.product.productSn}}
+          </template>
         </el-table-column>
+        <!-- 显示商品价格的表格列，设置了宽度和对齐方式，展示格式为“￥”加上商品价格 -->
         <el-table-column label="商品价格" width="100" align="center">
-          <template slot-scope="scope">￥{{scope.row.product.price}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中关联商品对象里的“price”字段内容 -->
+            ￥{{scope.row.product.price}}
+          </template>
         </el-table-column>
+        <!-- 显示剩余数量的表格列，设置了宽度和对齐方式，直接显示商品的剩余数量 -->
         <el-table-column label="剩余数量" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.product.stock}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，显示对应行数据中关联商品对象里的“stock”字段内容 -->
+            {{scope.row.product.stock}}
+          </template>
         </el-table-column>
+        <!-- 显示秒杀价格的表格列，设置了宽度和对齐方式，根据秒杀价格是否为空进行不同展示，若不为空则显示“￥”加上秒杀价格 -->
         <el-table-column label="秒杀价格" width="100" align="center">
           <template slot-scope="scope">
+            <!-- 使用v-if指令判断秒杀价格是否不为空，如果是则按照特定格式显示 -->
             <p v-if="scope.row.flashPromotionPrice!==null">
               ￥{{scope.row.flashPromotionPrice}}
             </p>
           </template>
         </el-table-column>
+        <!-- 显示秒杀数量的表格列，设置了宽度和对齐方式，直接显示商品的秒杀数量 -->
         <el-table-column label="秒杀数量" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.flashPromotionCount}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，显示对应行数据中的“flashPromotionCount”字段内容 -->
+            {{scope.row.flashPromotionCount}}
+          </template>
         </el-table-column>
+        <!-- 显示限购数量的表格列，设置了宽度和对齐方式，直接显示商品的限购数量 -->
         <el-table-column label="限购数量" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.flashPromotionLimit}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，显示对应行数据中的“flashPromotionLimit”字段内容 -->
+            {{scope.row.flashPromotionLimit}}
+          </template>
         </el-table-column>
+        <!-- 显示排序的表格列，设置了宽度和对齐方式，直接显示商品的排序值 -->
         <el-table-column label="排序" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.sort}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，显示对应行数据中的“sort”字段内容 -->
+            {{scope.row.sort}}
+          </template>
         </el-table-column>
+        <!-- 显示操作按钮的表格列，设置了宽度和对齐方式 -->
         <el-table-column label="操作" width="100" align="center">
           <template slot-scope="scope">
+            <!-- 用于触发编辑操作的按钮，设置了按钮尺寸、类型为文本按钮，绑定了点击事件“handleUpdate” -->
             <el-button size="mini"
                        type="text"
                        @click="handleUpdate(scope.$index, scope.row)">编辑
             </el-button>
+            <!-- 用于触发删除操作的按钮，设置了按钮尺寸、类型为文本按钮，绑定了点击事件“handleDelete” -->
             <el-button size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除
@@ -55,7 +98,10 @@
         </el-table-column>
       </el-table>
     </div>
+
+    <!-- 分页组件的容器，用于对商品数据列表进行分页操作 -->
     <div class="pagination-container">
+      <!-- 分页组件，设置了背景显示、页面尺寸改变和当前页码改变的事件绑定，以及布局、当前页码、每页显示数量、可选的页面尺寸和数据总条数等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -67,27 +113,47 @@
         :total="total">
       </el-pagination>
     </div>
+
+    <!-- 弹出对话框组件，用于选择商品操作，设置了标题、对话框显示状态的双向绑定以及宽度属性 -->
     <el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
+      <!-- 输入框组件，用于在对话框内输入关键词进行商品搜索，双向绑定了“dialogData.listQuery.keyword”数据，设置了宽度、外边距、尺寸以及占位提示等属性，并且包含一个搜索图标按钮 -->
       <el-input v-model="dialogData.listQuery.keyword"
                 style="width: 250px;margin-bottom: 20px"
                 size="small"
                 placeholder="商品名称搜索">
+        <!-- 搜索图标按钮，放置在输入框的尾部，点击可触发“handleSelectSearch”事件 -->
         <el-button slot="append" icon="el-icon-search" @click="handleSelectSearch()"></el-button>
       </el-input>
+      <!-- 数据表格组件，用于在对话框内展示搜索到的商品列表，绑定了数据“dialogData.list”，并设置了选择改变的事件绑定以及边框属性 -->
       <el-table :data="dialogData.list"
                 @selection-change="handleDialogSelectionChange" border>
+        <!-- 显示选择框的表格列，用于多选操作，设置了宽度和对齐方式 -->
         <el-table-column type="selection" width="60" align="center"></el-table-column>
+        <!-- 显示商品名称的表格列，内容居中对齐，直接显示商品的名称 -->
         <el-table-column label="商品名称" align="center">
-          <template slot-scope="scope">{{scope.row.name}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，显示对应行数据中的“name”字段内容 -->
+            {{scope.row.name}}
+          </template>
         </el-table-column>
+        <!-- 显示货号的表格列，设置了宽度和对齐方式，展示格式为“NO.”加上商品的货号 -->
         <el-table-column label="货号" width="160" align="center">
-          <template slot-scope="scope">NO.{{scope.row.productSn}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中的“productSn”字段内容 -->
+            NO.{{scope.row.productSn}}
+          </template>
         </el-table-column>
+        <!-- 显示价格的表格列，设置了宽度和对齐方式，展示格式为“￥”加上商品价格 -->
         <el-table-column label="价格" width="120" align="center">
-          <template slot-scope="scope">￥{{scope.row.price}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，按照特定格式显示对应行数据中的“price”字段内容 -->
+            ￥{{scope.row.price}}
+          </template>
         </el-table-column>
       </el-table>
+      <!-- 分页组件的容器，用于对对话框内的商品列表进行分页操作 -->
       <div class="pagination-container">
+        <!-- 分页组件，设置了背景显示、页面尺寸改变和当前页码改变的事件绑定，以及布局、当前页码、每页显示数量、可选的页面尺寸和数据总条数等属性 -->
         <el-pagination
           background
           @size-change="handleDialogSizeChange"
@@ -99,213 +165,266 @@
           :total="dialogData.total">
         </el-pagination>
       </div>
+      <!-- 用于清除浮动，确保后续元素布局正常 -->
       <div style="clear: both;"></div>
+      <!-- 对话框底部的操作按钮区域，使用了插槽“footer” -->
       <div slot="footer">
+        <!-- 取消按钮，点击可关闭对话框，设置了按钮尺寸 -->
         <el-button  size="small" @click="selectDialogVisible = false">取 消</el-button>
+        <!-- 确定按钮，点击可触发确认选择商品的相关逻辑，设置了按钮类型为主要按钮、尺寸为小尺寸 -->
         <el-button  size="small" type="primary" @click="handleSelectDialogConfirm()">确 定</el-button>
       </div>
     </el-dialog>
+
+    <!-- 弹出对话框组件，用于编辑秒杀商品信息操作，设置了标题、对话框显示状态的双向绑定以及宽度属性 -->
     <el-dialog title="编辑秒杀商品信息"
                :visible.sync="editDialogVisible"
                width="40%">
+      <!-- 表单组件，用于在对话框内展示和编辑秒杀商品的相关信息，绑定了数据模型“flashProductRelation”，设置了表单引用、标签宽度和尺寸等属性 -->
       <el-form :model="flashProductRelation"
                ref="flashProductRelationForm"
                label-width="150px" size="small">
+        <!-- 对应“商品名称”展示的表单项，此处直接展示商品名称，不可编辑 -->
         <el-form-item label="商品名称：">
           <span>{{flashProductRelation.product.name}}</span>
         </el-form-item>
+        <!-- 对应“货号”展示的表单项，此处直接展示货号，不可编辑 -->
         <el-form-item label="货号：">
           <span>NO.{{flashProductRelation.product.productSn}}</span>
         </el-form-item>
+        <!-- 对应“商品价格”展示的表单项，此处直接展示商品价格，不可编辑 -->
         <el-form-item label="商品价格：">
           <span>￥{{flashProductRelation.product.price}}</span>
         </el-form-item>
+        <!-- 对应“秒杀价格”输入框的表单项，使用输入框组件，双向绑定“flashProductRelation.flashPromotionPrice”数据，设置了类名，并在输入框头部添加“￥”符号 -->
         <el-form-item label="秒杀价格：">
           <el-input v-model="flashProductRelation.flashPromotionPrice" class="input-width">
             <template slot="prepend">￥</template>
           </el-input>
         </el-form-item>
+        <!-- 对应“剩余数量”展示的表单项，此处直接展示剩余数量，不可编辑 -->
         <el-form-item label="剩余数量：">
           <span>{{flashProductRelation.product.stock}}</span>
         </el-form-item>
+        <!-- 对应“秒杀数量”输入框的表单项，使用输入框组件，双向绑定“flashProductRelation.flashPromotionCount”数据，设置了类名 -->
         <el-form-item label="秒杀数量：">
           <el-input v-model="flashProductRelation.flashPromotionCount" class="input-width"></el-input>
         </el-form-item>
+        <!-- 对应“限购数量”输入框的表单项，使用输入框组件，双向绑定“flashProductRelation.flashPromotionLimit”数据，设置了类名 -->
         <el-form-item label="限购数量：">
           <el-input v-model="flashProductRelation.flashPromotionLimit" class="input-width"></el-input>
         </el-form-item>
+        <!-- 对应“排序”输入框的表单项，使用输入框组件，双向绑定“flashProductRelation.sort”数据，设置了类名 -->
         <el-form-item label="排序：">
           <el-input v-model="flashProductRelation.sort" class="input-width"></el-input>
         </el-form-item>
       </el-form>
+      <!-- 对话框底部的操作按钮区域，使用了插槽“footer” -->
       <span slot="footer" class="dialog-footer">
+                <!-- 取消按钮，点击可关闭对话框，设置了按钮尺寸 -->
                 <el-button @click="editDialogVisible = false" size="small">取 消</el-button>
+        <!-- 确定按钮，点击可触发确认编辑秒杀商品信息的相关逻辑，设置了按钮类型为主要按钮、尺寸为小尺寸 -->
                 <el-button type="primary" @click="handleEditDialogConfirm()" size="small">确 定</el-button>
             </span>
     </el-dialog>
   </div>
 </template>
 <script>
-  import {fetchList,createFlashProductRelation,deleteFlashProductRelation,updateFlashProductRelation} from '@/api/flashProductRelation';
+// 从'@/api/flashProductRelation'模块中导入用于获取列表、创建、删除以及更新秒杀商品关联关系相关的函数
-  import {fetchList as fetchProductList} from '@/api/product';
+import {fetchList, createFlashProductRelation, deleteFlashProductRelation, updateFlashProductRelation} from '@/api/flashProductRelation';
-  const defaultListQuery = {
+// 从'@/api/product'模块中导入用于获取商品列表的函数，并将其别名为'fetchProductList'
+import {fetchList as fetchProductList} from '@/api/product';
+
+// 默认的列表查询参数对象，包含页码、每页数量、闪购活动ID以及闪购活动场次ID等初始值，用于初始化列表查询相关设置
+const defaultListQuery = {
   pageNum: 1,
   pageSize: 5,
   flashPromotionId: null,
   flashPromotionSessionId: null
-  };
+};
-  export default {
+
-    name:'flashPromotionProductRelationList',
+export default {
+  name: 'flashPromotionProductRelationList',
   data() {
     return {
+      // 当前的列表查询参数，初始化为defaultListQuery的副本，用于在组件中存储和操作实际的查询条件
       listQuery: Object.assign({}, defaultListQuery),
+      // 存储获取到的秒杀商品关联关系列表数据，初始为null，后续会通过接口获取并赋值
       list: null,
+      // 数据总条数，初始为null，同样会在获取数据后更新具体的值
       total: null,
+      // 列表数据加载状态，初始为false，在获取数据过程中会设置为true表示正在加载
       listLoading: false,
+      // 控制添加/编辑等相关主对话框的显示与隐藏，初始为false即默认隐藏对话框
       dialogVisible: false,
-        selectDialogVisible:false,
+      // 控制选择商品对话框的显示与隐藏，初始为false即默认隐藏该对话框
-        dialogData:{
+      selectDialogVisible: false,
+      // 用于存储选择商品对话框相关的数据，包括商品列表、数据总条数、多选选中的数据以及查询参数等
+      dialogData: {
         list: null,
         total: null,
-          multipleSelection:[],
+        multipleSelection: [],
-          listQuery:{
+        listQuery: {
           keyword: null,
           pageNum: 1,
           pageSize: 5
         }
       },
-        editDialogVisible:false,
+      // 控制编辑秒杀商品信息对话框的显示与隐藏，初始为false即默认隐藏该对话框
-        flashProductRelation:{
+      editDialogVisible: false,
-          product:{}
+      // 用于存储当前正在编辑的秒杀商品关联关系数据，初始包含一个空的商品对象，后续会赋值为实际要编辑的数据
+      flashProductRelation: {
+        product: {}
       }
     }
   },
-    created(){
+  created() {
-      this.listQuery.flashPromotionId=this.$route.query.flashPromotionId;
+    // 从路由查询参数中获取闪购活动ID，并赋值给列表查询参数中的对应字段，用于后续查询与该闪购活动相关的商品关联关系数据
-      this.listQuery.flashPromotionSessionId=this.$route.query.flashPromotionSessionId;
+    this.listQuery.flashPromotionId = this.$route.query.flashPromotionId;
+    // 从路由查询参数中获取闪购活动场次ID，并赋值给列表查询参数中的对应字段，同样用于精准查询相关数据
+    this.listQuery.flashPromotionSessionId = this.$route.query.flashPromotionSessionId;
+    // 在组件创建完成后，立即调用获取秒杀商品关联关系列表数据的方法，用于初始化页面数据展示
     this.getList();
   },
-    methods:{
+  methods: {
+    // 处理每页显示数量改变的方法
     handleSizeChange(val) {
-        this.listQuery.pageNum = 1;
+      this.listQuery.pageNum = 1; //先将页码重置为1，然后更新列表查询参数中的每页显示数量
       this.listQuery.pageSize = val;
-        this.getList();
+      this.getList(); //再调用获取列表数据的方法，以按照新的每页数量获取数据
     },
+    // 处理当前页码改变的方法，更新列表查询参数中的当前页码
     handleCurrentChange(val) {
       this.listQuery.pageNum = val;
-        this.getList();
+      this.getList(); //然后调用获取列表数据的方法，以获取对应页码的数据进行展示
     },
-      handleSelectProduct(){
+    // 处理添加商品操作的方法
-        this.selectDialogVisible=true;
+    handleSelectProduct() {
-        this.getDialogList();
+      this.selectDialogVisible = true; //将选择商品对话框的显示状态设置为true
+      this.getDialogList(); //然后调用获取选择商品对话框列表数据的方法，准备展示商品列表供选择
     },
-      handleUpdate(index,row){
+    // 处理编辑商品操作的方法
-        this.editDialogVisible = true;
+    handleUpdate(index, row) {
-        this.flashProductRelation = Object.assign({},row);
+      this.editDialogVisible = true; //将编辑秒杀商品信息对话框的显示状态设置为true
+      this.flashProductRelation = Object.assign({}, row); //然后将当前要编辑的商品关联关系数据赋值为传入的要编辑的行数据，方便在对话框中展示并修改数据
     },
-      handleDelete(index,row){
+    // 处理删除商品操作的方法，弹出确认框询问是否要删除商品
+    handleDelete(index, row) {
       this.$confirm('是否要删除该商品?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-        }).then(() => {
+      }).then(() => { //确认后调用删除商品关联关系的接口函数
         deleteFlashProductRelation(row.id).then(response => {
           this.$message({
             type: 'success',
             message: '删除成功!'
           });
-            this.getList();
+          this.getList(); //成功删除后显示提示信息，并重新获取列表数据以更新页面展示
         });
       });
     },
-      handleSelectSearch(){
+    // 处理选择商品对话框内搜索操作的方法
-        this.getDialogList();
+    handleSelectSearch() {
+      this.getDialogList(); //调用获取选择商品对话框列表数据的方法，根据输入的关键词重新获取商品列表进行展示
     },
+    // 处理选择商品对话框内每页显示数量改变的方法
     handleDialogSizeChange(val) {
-        this.dialogData.listQuery.pageNum = 1;
+      this.dialogData.listQuery.pageNum = 1; //先将页码重置为1
-        this.dialogData.listQuery.pageSize = val;
+      this.dialogData.listQuery.pageSize = val; //然后更新对话框数据中查询参数的每页显示数量
-        this.getDialogList();
+      this.getDialogList(); //再调用获取选择商品对话框列表数据的方法，以按照新的每页数量获取商品数据
     },
+    // 处理选择商品对话框内当前页码改变的方法
     handleDialogCurrentChange(val) {
-        this.dialogData.listQuery.pageNum = val;
+      this.dialogData.listQuery.pageNum = val; //更新对话框数据中查询参数的当前页码
-        this.getDialogList();
+      this.getDialogList(); //然后调用获取选择商品对话框列表数据的方法，以获取对应页码的商品数据进行展示
     },
-      handleDialogSelectionChange(val){
+    // 处理选择商品对话框内多选选择改变的方法
-        this.dialogData.multipleSelection = val;
+    handleDialogSelectionChange(val) {
+      this.dialogData.multipleSelection = val; //将对话框数据中多选选中的数据更新为传入的选择结果，用于记录用户在对话框内选中的商品
     },
-      handleSelectDialogConfirm(){
+    // 处理选择商品对话框确认操作的方法
-        if (this.dialogData.multipleSelection < 1) {
+    handleSelectDialogConfirm() {
+      if (this.dialogData.multipleSelection.length < 1) { //首先判断是否至少选择了一条记录
         this.$message({
-            message: '请选择一条记录',
+          message: '请选择一条记录', //如果没有则弹出提示信息要求选择；
           type: 'warning',
           duration: 1000
         });
         return;
       }
-        let selectProducts = [];
+      let selectProducts = []; //若有选择，则将选中的商品信息整理成特定格式的数组
       for (let i = 0; i < this.dialogData.multipleSelection.length; i++) {
         selectProducts.push({
-            productId:this.dialogData.multipleSelection[i].id,
+          productId: this.dialogData.multipleSelection[i].id,
-            flashPromotionId:this.listQuery.flashPromotionId,
+          flashPromotionId: this.listQuery.flashPromotionId,
-            flashPromotionSessionId:this.listQuery.flashPromotionSessionId
+          flashPromotionSessionId: this.listQuery.flashPromotionSessionId
         });
       }
-        this.$confirm('使用要进行添加操作?', '提示', {
+      this.$confirm('是否要进行添加操作?', '提示', { //弹出确认框询问是否要进行添加操作
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-        }).then(() => {
+      }).then(() => { //确认后调用创建秒杀商品关联关系的接口函数
-          createFlashProductRelation(selectProducts).then(response=>{
+        createFlashProductRelation(selectProducts).then(response => {
-            this.selectDialogVisible=false;
+          this.selectDialogVisible = false;
-            this.dialogData.multipleSelection=[];
+          this.dialogData.multipleSelection = [];
           this.getList();
           this.$message({
             type: 'success',
-              message: '添加成功!'
+            message: '添加成功!' //成功添加后进行一系列后续操作，如关闭对话框、清空选中记录、重新获取列表数据并显示添加成功提示信息
           });
         });
       });
     },
-      handleEditDialogConfirm(){
+    // 处理编辑秒杀商品信息对话框确认操作的方法
-        this.$confirm('是否要确认?', '提示', {
+    handleEditDialogConfirm() {
+      this.$confirm('是否要确认?', '提示', { //弹出确认框询问是否要确认编辑操作
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-        }).then(() => {
+      }).then(() => { //确认后调用更新秒杀商品关联关系的接口函数，关闭对话框并重新获取列表数据以更新页面展示
-            updateFlashProductRelation(this.flashProductRelation.id,this.flashProductRelation).then(response => {
+        updateFlashProductRelation(this.flashProductRelation.id, this.flashProductRelation).then(response => {
           this.$message({
-                message: '修改成功！',
+            message: '修改成功！', //操作成功后显示相应提示信息
             type: 'success'
           });
-              this.editDialogVisible =false;
+          this.editDialogVisible = false;
           this.getList();
         })
       })
     },
+    // 获取秒杀商品关联关系列表数据的方法
     getList() {
-        this.listLoading = true;
+      this.listLoading = true; //先将列表数据加载状态设置为true，表示正在获取数据
-        fetchList(this.listQuery).then(response => {
+      fetchList(this.listQuery).then(response => { //然后调用导入的获取列表数据的接口函数
-          this.listLoading = false;
+        this.listLoading = false; //并将加载状态设置为false
-          this.list = response.data.list;
+        this.list = response.data.list; //获取成功后更新列表数据和总条数
         this.total = response.data.total;
       });
     },
-      getDialogList(){
+    // 获取选择商品对话框列表数据的方法，用于在对话框内展示商品信息
-        fetchProductList(this.dialogData.listQuery).then(response=>{
+    getDialogList() {
-          this.dialogData.list=response.data.list;
+      fetchProductList(this.dialogData.listQuery).then(response => { //调用导入的获取商品列表的接口函数
-          this.dialogData.total=response.data.total;
+        this.dialogData.list = response.data.list; //获取成功后更新对话框数据中的商品列表和总条数
+        this.dialogData.total = response.data.total;
       })
     }
   }
-  }
+}
 </script>
 <style scoped>
-  .operate-container{
+<!-- 使用带有“scoped”属性的“style”标签，表示这里定义的样式仅作用于当前组件内的元素，避免样式污染其他组件 -->
+<!-- 定义类名为“operate-container”的样式规则 -->
+.operate-container{
+<!-- 设置该类所应用元素的上外边距为0，用于控制其与上方元素的间距 -->
   margin-top: 0;
-  }
+}
-  .input-width{
+<!-- 定义类名为“input-width”的样式规则 -->
+.input-width{
+<!-- 设置该类所应用元素的宽度为200px，通常可用于像输入框等需要统一宽度设置的表单元素 -->
   width: 200px;
-  }
+}
 </style>
 
 

src/views/sms/flash/selectSessionList.vue

@@ -1,31 +1,60 @@
-<template> 
+<template>
+  <!-- 整个页面的外层容器，用于对内部各部分内容进行整体布局 -->
   <div class="app-container">
+    <!-- el-card组件，用于创建一个卡片式的容器，设置了无阴影效果，并添加了"operate-container"类名，通常可用于放置操作相关的元素或内容展示 -->
     <el-card shadow="never" class="operate-container">
+      <!-- 显示一个图标，此处使用的是element-ui提供的"el-icon-tickets"图标，用于对下方数据列表进行某种示意，比如表示和票务、商品列表等相关 -->
       <i class="el-icon-tickets"></i>
+      <!-- 显示文字"数据列表"，用于明确下方表格所展示数据的性质 -->
       <span>数据列表</span>
     </el-card>
+
+    <!-- 放置数据表格的容器，用于包裹下面的el-table组件，使其在页面布局上更加规整 -->
     <div class="table-container">
+      <!-- el-table组件，用于创建一个数据表格，设置了表格引用为"selectSessionTable"，绑定了数据"list"，设置表格宽度为占满父容器（100%），根据"listLoading"的值来显示加载状态（如加载动画等），并添加了边框样式 -->
       <el-table ref="selectSessionTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示编号信息，设置了列的宽度为100像素，内容在单元格中居中对齐 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.id}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"id"字段内容，即展示每一行数据的编号 -->
+            {{scope.row.id}}
+          </template>
         </el-table-column>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示秒杀时间段名称信息，内容在单元格中居中对齐 -->
         <el-table-column label="秒杀时间段名称" align="center">
-          <template slot-scope="scope">{{scope.row.name}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"name"字段内容，即展示每一行数据对应的秒杀时间段的名称 -->
+            {{scope.row.name}}
+          </template>
         </el-table-column>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示每日开始时间信息，内容在单元格中居中对齐，使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
         <el-table-column label="每日开始时间" align="center">
-          <template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"startTime"字段（时间类型数据）进行格式化处理后展示 -->
+            {{scope.row.startTime | formatTime}}
+          </template>
         </el-table-column>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示每日结束时间信息，内容在单元格中居中对齐，同样使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
         <el-table-column label="每日结束时间" align="center">
-          <template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"endTime"字段（时间类型数据）进行格式化处理后展示 -->
+            {{scope.row.endTime | formatTime}}
+          </template>
         </el-table-column>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示商品数量信息，内容在单元格中居中对齐，直接展示对应行数据中的"productCount"字段内容，即显示每个秒杀时间段对应的商品数量 -->
         <el-table-column label="商品数量" align="center">
-          <template slot-scope="scope">{{scope.row.productCount}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"productCount"字段内容，即展示每一行数据对应的商品数量 -->
+            {{scope.row.productCount}}
+          </template>
         </el-table-column>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示操作按钮，内容在单元格中居中对齐 -->
         <el-table-column label="操作" align="center">
           <template slot-scope="scope">
+            <!-- el-button组件，用于创建一个按钮，设置了按钮尺寸为"mini"（小型按钮），按钮类型为"text"，绑定了点击事件"handleShowRelation"，点击按钮可触发相应的操作逻辑，此处按钮显示的文字为"商品列表"，可能点击后会跳转到展示对应秒杀时间段下商品列表的页面 -->
             <el-button size="mini"
                        type="text"
                        @click="handleShowRelation(scope.$index, scope.row)">商品列表
@@ -37,47 +66,67 @@
   </div>
 </template>
 <script>
-  import {fetchSelectList} from '@/api/flashSession';
+// 从'@/api/flashSession'模块中导入用于获取选择列表（可能是与闪购时段相关的列表数据）的函数fetchSelectList
-  import {formatDate} from '@/utils/date';
+import {fetchSelectList} from '@/api/flashSession';
-  export default {
+// 从'@/utils/date'模块中导入用于日期格式化的函数formatDate，可能会用于对时间相关数据进行格式化处理
+import {formatDate} from '@/utils/date';
+
+export default {
   name: 'selectSessionList',
   data() {
     return {
+      // 用于存储获取到的列表数据（可能是闪购时段相关的数据列表），初始值为null，后续会通过接口获取数据并赋值
       list: null,
+      // 表示列表数据的加载状态，初始值为false，当开始获取数据时会设置为true，数据获取完成后再设回false，用于控制页面上加载动画等相关显示
       listLoading: false
     }
   },
   created() {
+    // 在组件创建完成后，立即调用获取列表数据的方法，用于初始化页面展示所需的数据
     this.getList();
   },
-    filters:{
+  filters: {
+    // 定义一个名为formatTime的过滤器函数，用于对传入的时间数据进行格式化处理
     formatTime(time) {
+      // 判断传入的时间数据是否为空（null或者空字符串），如果是则返回 'N/A' 作为默认显示内容
       if (time == null || time === '') {
         return 'N/A';
       }
+      // 将传入的时间数据转换为JavaScript的Date对象，以便后续使用相关方法进行格式化操作
       let date = new Date(time);
+      // 调用导入的formatDate函数，按照 'hh:mm:ss' 的格式对Date对象表示的时间进行格式化，并返回格式化后的结果
       return formatDate(date, 'hh:mm:ss')
     }
   },
   methods: {
-      handleShowRelation(index,row){
+    // 处理展示关联关系的方法，通常用于当用户点击页面上对应的操作按钮（比如查看关联商品列表之类的操作）时触发
-        this.$router.push({path:'/sms/flashProductRelation',query:{
+    handleShowRelation(index, row) {
-          flashPromotionId:this.$route.query.flashPromotionId, flashPromotionSessionId:row.id}})
+      // 使用Vue Router进行页面路由跳转，跳转到 '/sms/flashProductRelation' 路径对应的页面
+      this.$router.push({path: '/sms/flashProductRelation', query: {
+          flashPromotionId: this.$route.query.flashPromotionId, flashPromotionSessionId: row.id}}) //同时传递两个查询参数，一个是从当前路由查询参数中获取的闪购活动ID（flashPromotionId），另一个是当前行数据中对应的闪购时段ID（flashPromotionSessionId），可能用于在目标页面根据这两个ID来展示相关的商品关联关系等信息
     },
+    // 获取列表数据的方法，用于向服务器请求并获取相关的数据列表（比如闪购时段列表等）
     getList() {
+      // 将列表数据加载状态设置为true，表示开始获取数据，此时页面上可以根据这个状态显示加载动画等提示信息
       this.listLoading = true;
-        fetchSelectList({flashPromotionId:this.$route.query.flashPromotionId}).then(response => {
+      // 调用导入的fetchSelectList函数，传递一个包含闪购活动ID的对象作为参数（从当前路由查询参数中获取闪购活动ID），向服务器发起请求获取数据，请求成功后执行then回调函数
+      fetchSelectList({flashPromotionId: this.$route.query.flashPromotionId}).then(response => {
+        // 将列表数据加载状态设置为false，表示数据获取完成，停止页面上的加载动画等相关显示
         this.listLoading = false;
+        // 将获取到的响应数据中的列表数据部分赋值给组件的list属性，以便在页面模板中进行展示等操作
         this.list = response.data;
       });
     }
   }
-  }
+}
 </script>
 <style scoped>
-  .operate-container {
+<!-- “scoped”属性表示该样式作用范围仅限于当前组件内的元素，避免样式影响到其他组件中的同名元素，起到样式隔离的作用 -->
-    margin-top: 0;
+.operate-container {
-  }
+<!-- 这是一个CSS样式规则，针对类名为“operate-container”的元素进行样式设置 -->
+<!-- “margin-top”属性用于设置元素的上外边距，这里将其值设置为“0”，意味着该元素距离上方相邻元素的间距为0，可用于精准控制元素在页面中的垂直布局位置 -->
+margin-top: 0;
+}
 </style>
 
 

src/views/sms/flash/sessionList.vue

@@ -1,29 +1,55 @@
-<template> 
+<template>
+  <!-- 整个页面的外层容器，用于对内部各部分内容进行整体布局 -->
   <div class="app-container">
+    <!-- el-card组件，用于创建一个卡片式的容器，设置了无阴影效果（shadow="never"），并添加了"operate-container"类名，通常可用于放置操作相关的元素，比如这里放置了添加按钮等 -->
     <el-card shadow="never" class="operate-container">
+      <!-- 显示一个图标，此处使用的是element-ui提供的"el-icon-tickets"图标，用于对下方数据列表进行某种示意，比如暗示和票务、商品列表等相关的操作场景 -->
       <i class="el-icon-tickets"></i>
+      <!-- 显示文字"数据列表"，用于明确下方表格所展示数据的性质，让用户知晓表格中呈现的是什么内容 -->
       <span>数据列表</span>
+      <!-- el-button组件，用于创建一个按钮，设置了按钮尺寸为"mini"（小型按钮），添加了"btn-add"类名（可能用于样式设置等），绑定了点击事件"handleAdd"，点击该按钮可触发对应的添加操作逻辑 -->
       <el-button size="mini" class="btn-add" @click="handleAdd()">添加</el-button>
     </el-card>
+
+    <!-- 放置数据表格的容器，用于包裹下面的el-table组件，使其在页面布局上更加规整，将表格与其他元素区分开来 -->
     <div class="table-container">
+      <!-- el-table组件，用于创建一个数据表格，设置了表格引用为"flashSessionTable"，绑定了数据"list"（这个数据应该是从组件的data属性或者通过接口获取等方式得到的，包含了要展示在表格中的具体数据内容），设置表格宽度为占满父容器（100%），根据"listLoading"的值来显示加载状态（如加载动画等，方便用户知晓数据是否正在加载中），并添加了边框样式 -->
       <el-table ref="flashSessionTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示编号信息，设置了列的宽度为100像素，内容在单元格中居中对齐 -->
         <el-table-column label="编号" width="100" align="center">
-          <template slot-scope="scope">{{scope.row.id}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内（通过slot-scope获取到对应行的数据对象），通过插值表达式显示对应行数据中的"id"字段内容，即展示每一行数据的编号 -->
+            {{scope.row.id}}
+          </template>
         </el-table-column>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示秒杀时间段名称信息，内容在单元格中居中对齐，直接展示对应行数据中的"name"字段内容，用于显示每个秒杀时间段对应的名称 -->
         <el-table-column label="秒杀时间段名称" align="center">
-          <template slot-scope="scope">{{scope.row.name}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，通过插值表达式显示对应行数据中的"name"字段内容，即展示每一行数据对应的秒杀时间段的名称 -->
+            {{scope.row.name}}
+          </template>
         </el-table-column>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示每日开始时间信息，内容在单元格中居中对齐，使用了名为"formatTime"的过滤器（应该是在组件的filters选项中定义的，用于对时间数据进行格式化处理）对时间数据进行格式化后再展示 -->
         <el-table-column label="每日开始时间" align="center">
-          <template slot-scope="scope">{{scope.row.startTime | formatTime}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"startTime"字段（时间类型数据）进行格式化处理后展示 -->
+            {{scope.row.startTime | formatTime}}
+          </template>
         </el-table-column>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示每日结束时间信息，内容在单元格中居中对齐，同样使用了名为"formatTime"的过滤器对时间数据进行格式化后再展示 -->
         <el-table-column label="每日结束时间" align="center">
-          <template slot-scope="scope">{{scope.row.endTime | formatTime}}</template>
+          <template slot-scope="scope">
+            <!-- 在表格单元格的作用域内，使用"formatTime"过滤器对对应行数据中的"endTime"字段（时间类型数据）进行格式化处理后展示 -->
+            {{scope.row.endTime | formatTime}}
+          </template>
         </el-table-column>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示启用状态信息，内容在单元格中居中对齐，里面包含了一个el-switch组件（开关组件）用于切换启用/禁用状态 -->
         <el-table-column label="启用" align="center">
           <template slot-scope="scope">
+            <!-- el-switch组件，用于创建一个开关按钮，绑定了状态改变的事件"handleStatusChange"，当开关状态改变时会触发该事件，传递当前行的索引和整行数据作为参数，设置了激活值为1（表示启用状态对应的数值），未激活值为0（表示禁用状态对应的数值），双向绑定对应行数据中的"status"字段，意味着开关状态的改变会直接更新对应行数据里的这个字段值 -->
             <el-switch
               @change="handleStatusChange(scope.$index, scope.row)"
               :active-value="1"
@@ -32,12 +58,15 @@
             </el-switch>
           </template>
         </el-table-column>
+        <!-- el-table-column组件，用于定义表格中的列，此列用于展示操作按钮，设置了列的宽度为180像素，内容在单元格中居中对齐 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
+            <!-- el-button组件，用于创建一个按钮，设置了按钮尺寸为"mini"（小型按钮），按钮类型为"text"（文本样式按钮，通常外观上更简洁，无背景色等），绑定了点击事件"handleUpdate"，点击该按钮可触发编辑操作逻辑，按钮显示的文字为"编辑" -->
             <el-button size="mini"
                        type="text"
                        @click="handleUpdate(scope.$index, scope.row)">编辑
             </el-button>
+            <!-- el-button组件，用于创建一个按钮，设置了按钮尺寸为"mini"（小型按钮），按钮类型为"text"（文本样式按钮，通常外观上更简洁，无背景色等），绑定了点击事件"handleDelete"，点击该按钮可触发删除操作逻辑，按钮显示的文字为"删除" -->
             <el-button size="mini"
                        type="text"
                        @click="handleDelete(scope.$index, scope.row)">删除
@@ -46,82 +75,115 @@
         </el-table-column>
       </el-table>
     </div>
+
+    <!-- el-dialog组件，用于创建一个弹出式对话框，常用于展示表单让用户输入信息或者进行确认等操作，设置了对话框的标题为"添加时间段"，通过":visible.sync"双向绑定了对话框的显示状态（与组件data中的dialogVisible属性相关联，改变该属性值可控制对话框的显示与隐藏），设置了对话框的宽度为40%（相对于屏幕宽度等的占比，用于控制对话框大小） -->
     <el-dialog
       title="添加时间段"
       :visible.sync="dialogVisible"
       width="40%">
+      <!-- el-form组件，用于创建一个表单，绑定了数据模型"flashSession"（这个对象应该在组件的data属性中定义，用于存储表单中输入的数据等），设置了表单引用为"flashSessionForm"（可用于后续对表单进行验证等操作时的标识），设置了标签宽度为150像素，表单整体尺寸为"small"（小型尺寸，用于统一表单元素的外观大小等风格） -->
       <el-form :model="flashSession"
                ref="flashSessionForm"
                label-width="150px" size="small">
+        <!-- el-form-item组件，用于定义表单中的表单项，此表单项对应的标签为"秒杀时间段名称："，用于提示用户此处应输入的内容 -->
         <el-form-item label="秒杀时间段名称：">
+          <!-- el-input组件，用于创建一个输入框，双向绑定了"flashSession.name"数据，意味着用户在输入框中输入的内容会实时更新到"flashSession"对象的"name"属性中，设置了输入框的宽度为250像素 -->
           <el-input v-model="flashSession.name" style="width: 250px"></el-input>
         </el-form-item>
+        <!-- el-form-item组件，用于定义表单中的表单项，此表单项对应的标签为"每日开始时间："，用于提示用户此处应选择时间 -->
         <el-form-item label="每日开始时间：">
+          <!-- el-time-picker组件，用于创建一个时间选择器，用户可以通过它选择具体的时间，双向绑定了"flashSession.startTime"数据，选择的时间会更新到"flashSession"对象的"startTime"属性中，设置了占位提示文字为"请选择时间" -->
           <el-time-picker
             v-model="flashSession.startTime"
             placeholder="请选择时间">
           </el-time-picker>
         </el-form-item>
+        <!-- el-form-item组件，用于定义表单中的表单项，此表单项对应的标签为"每日结束时间："，用于提示用户此处应选择时间 -->
         <el-form-item label="每日结束时间：">
+          <!-- el-time-picker组件，用于创建一个时间选择器，用户可以通过它选择具体的时间，双向绑定了"flashSession.endTime"数据，选择的时间会更新到"flashSession"对象的"endTime"属性中，设置了占位提示文字为"请选择时间" -->
           <el-time-picker
             v-model="flashSession.endTime"
             placeholder="请选择时间">
           </el-time-picker>
         </el-form-item>
+        <!-- el-form-item组件，用于定义表单中的表单项，此表单项对应的标签为"是否启用"，用于让用户选择该时间段是否启用 -->
         <el-form-item label="是否启用">
+          <!-- el-radio-group组件，用于创建一个单选按钮组，绑定了"flashSession.status"数据，意味着用户选择的单选按钮的值会更新到"flashSession"对象的"status"属性中 -->
           <el-radio-group v-model="flashSession.status">
+            <!-- el-radio组件，用于创建一个单选按钮，设置了按钮的标签值为1，对应的显示文字为"启用"，用户选择该按钮后会将"flashSession.status"的值设为1 -->
             <el-radio :label="1">启用</el-radio>
+            <!-- el-radio组件，用于创建一个单选按钮，设置了按钮的标签值为0，对应的显示文字为"不启用"，用户选择该按钮后会将"flashSession.status"的值设为0 -->
             <el-radio :label="0">不启用</el-radio>
           </el-radio-group>
         </el-form-item>
       </el-form>
+      <!-- 对话框底部的操作按钮区域，使用了插槽"footer"来定义，通常用于放置确认、取消等按钮 -->
       <span slot="footer" class="dialog-footer">
+                <!-- el-button组件，用于创建一个按钮，点击事件绑定了将"dialogVisible"属性设为false的操作（即关闭对话框），设置了按钮尺寸为"small"（小型按钮），按钮显示的文字为"取 消" -->
                 <el-button @click="dialogVisible = false" size="small">取 消</el-button>
+        <!-- el-button组件，用于创建一个按钮，设置了按钮类型为"primary"（主要按钮，通常会有突出的样式，比如颜色与其他按钮不同等），点击事件绑定了"handleDialogConfirm"方法（这个方法应该在组件的methods选项中定义，用于处理确认添加等相关逻辑），设置了按钮尺寸为"small"（小型按钮），按钮显示的文字为"确 定" -->
                 <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
             </span>
     </el-dialog>
   </div>
 </template>
 <script>
-  import {fetchList,updateStatus,deleteSession,createSession,updateSession} from '@/api/flashSession';
+// 从'@/api/flashSession'模块中导入多个函数，这些函数分别用于获取列表、更新状态、删除时段、创建时段以及更新时段相关操作，通常是与后端API进行交互来操作秒杀时间段相关的数据
-  import {formatDate} from '@/utils/date';
+import {fetchList, updateStatus, deleteSession, createSession, updateSession} from '@/api/flashSession';
-  const defaultFlashSession={
+// 从'@/utils/date'模块中导入用于日期格式化的函数formatDate，可能会在对时间相关数据进行展示等处理时使用到
-    name:null,
+import {formatDate} from '@/utils/date';
-    startTime:null,
+
-    endTime:null,
+// 定义一个默认的秒杀时间段对象
-    status:0
+const defaultFlashSession = { //包含名称、开始时间、结束时间以及状态等属性
-  };
+  name: null,
-  export default {
+  startTime: null,
+  endTime: null,
+  status: 0 //并赋予初始值，用于初始化相关数据操作
+};
+
+export default {
   name: 'flashPromotionSessionList',
   data() {
     return {
+      // 用于存储获取到的秒杀时间段列表数据，初始值为null，后续会通过调用接口获取数据并赋值给它，以便在页面中展示相关时间段信息
       list: null,
+      // 表示列表数据的加载状态，初始值为false，当开始获取数据时会设置为true，数据获取完成后再设回false，可用于在页面上显示加载动画等提示用户数据正在加载中
       listLoading: false,
-        dialogVisible:false,
+      // 控制弹出对话框（如添加/编辑时间段的对话框）的显示与隐藏，初始值为false，表示对话框默认是隐藏状态
-        isEdit:false,
+      dialogVisible: false,
-        flashSession:Object.assign({},defaultFlashSession)
+      // 标记当前操作是编辑（true）还是添加（false）状态，初始值为false，用于区分不同的操作场景，以便执行相应的逻辑处理
+      isEdit: false,
+      // 当前秒杀时间段的数据对象，初始化为defaultFlashSession的副本，在进行添加或编辑操作时会更新其属性值，用于存储和传递相关时间段的具体信息
+      flashSession: Object.assign({}, defaultFlashSession)
     }
   },
   created() {
+    // 在组件创建完成后，立即调用获取列表数据的方法，用于初始化页面展示所需的秒杀时间段列表数据，使得页面加载完成后能及时显示相关信息
     this.getList();
   },
-    filters:{
+  filters: {
+    // 定义一个名为formatTime的过滤器函数，用于对传入的时间数据进行格式化处理，方便在页面上按照特定格式展示时间信息
     formatTime(time) {
+      // 判断传入的时间数据是否为空（null或者空字符串），如果是则返回 'N/A' 作为默认显示内容，表示时间数据无效或暂无数据
       if (time == null || time === '') {
         return 'N/A';
       }
+      // 将传入的时间数据转换为JavaScript的Date对象，以便后续使用formatDate函数进行格式化操作，Date对象可以方便地提取和处理时间相关的各个部分（如小时、分钟、秒等）
       let date = new Date(time);
+      // 调用导入的formatDate函数，按照 'hh:mm:ss' 的格式对Date对象表示的时间进行格式化，例如将时间格式化为类似 "12:30:00" 的形式，并返回格式化后的结果用于页面展示
       return formatDate(date, 'hh:mm:ss')
     }
   },
   methods: {
+    // 处理添加操作的方法
     handleAdd() {
-        this.dialogVisible = true;
+      this.dialogVisible = true; //将对话框显示状态设置为true，表示弹出添加时间段的对话框，把操作标记为添加（非编辑）状态
       this.isEdit = false;
-        this.flashSession = Object.assign({},defaultFlashSession);
+      this.flashSession = Object.assign({}, defaultFlashSession); //同时将当前秒杀时间段的数据对象重置为默认值，准备让用户输入新的时间段信息进行添加操作
     },
-      handleStatusChange(index,row){
+    // 处理状态改变的方法，当用户在页面上操作（比如通过开关切换时间段的启用/禁用状态）改变了某个时间段的状态时触发。
-        this.$confirm('是否要修改该状态?', '提示', {
+    handleStatusChange(index, row) {
+      this.$confirm('是否要修改该状态?', '提示', { //首先弹出确认框询问用户是否要修改该状态
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
@@ -129,80 +191,87 @@
         updateStatus(row.id, {status: row.status}).then(response => {
           this.$message({
             type: 'success',
-              message: '修改成功!'
+            message: '修改成功!' //确认修改后调用更新状态的接口函数，并根据接口返回结果显示相应的提示信息（成功则提示修改成功）
           });
         });
-        }).catch(() => {
+      }).catch(() => { //如果用户取消修改，则显示取消修改的提示信息
         this.$message({
           type: 'info',
           message: '取消修改'
         });
-          this.getList();
+        this.getList(); //并重新调用获取列表数据的方法刷新页面数据展示
       });
     },
-      handleUpdate(index,row){
+    // 处理编辑操作的方法，当用户点击编辑某个时间段的按钮时触发.
-        this.dialogVisible = true;
+    handleUpdate(index, row) {
-        this.isEdit = true;
+      this.dialogVisible = true; //将对话框显示状态设置为true
-        this.flashSession = Object.assign({},row);
+      this.isEdit = true; //表示弹出编辑时间段的对话框，把操作标记为编辑状态，然后将当前秒杀时间段的数据对象赋值为传入的要编辑的行数据（即当前点击编辑的那个时间段的数据）
-        this.flashSession.startTime=new Date(row.startTime);
+      this.flashSession = Object.assign({}, row);
-        this.flashSession.endTime=new Date(row.endTime);
+      this.flashSession.startTime = new Date(row.startTime); //同时将开始时间和结束时间转换为Date对象（可能是为了后续更方便地进行时间相关的处理或验证等操作），以便在对话框中展示并修改相应的数据
+      this.flashSession.endTime = new Date(row.endTime);
     },
-      handleDelete(index,row){
+    // 处理删除操作的方法，当用户点击删除某个时间段的按钮时触发.
-        this.$confirm('是否要删除该时间段?', '提示', {
+    handleDelete(index, row) {
+      this.$confirm('是否要删除该时间段?', '提示', { //弹出确认框询问用户是否要删除该时间段
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-        }).then(() => {
+      }).then(() => { //确认删除后调用删除时间段的接口函数
         deleteSession(row.id).then(response => {
           this.$message({
             type: 'success',
-              message: '删除成功!'
+            message: '删除成功!' //成功删除后显示提示信息告知用户删除成功
           });
-            this.getList();
+          this.getList(); //并重新调用获取列表数据的方法刷新页面，使页面展示的数据列表更新为最新状态（已删除相应时间段后的列表）
         });
       });
     },
+    // 处理对话框确认操作的方法，当用户在添加或编辑时间段的对话框中点击确定按钮时触发.
     handleDialogConfirm() {
-        this.$confirm('是否要确认?', '提示', {
+      this.$confirm('是否要确认?', '提示', { //首先弹出确认框再次询问用户是否要确认当前操作（添加或编辑），确认后根据当前是编辑还是添加状态
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-        }).then(() => {
+      }).then(() => { //分别调用对应的接口函数（更新或创建）来与后端交互完成相应操作
         if (this.isEdit) {
-            updateSession(this.flashSession.id,this.flashSession).then(response => {
+          updateSession(this.flashSession.id, this.flashSession).then(response => {
             this.$message({
               message: '修改成功！',
               type: 'success'
             });
-              this.dialogVisible =false;
+            this.dialogVisible = false;
             this.getList();
           })
         } else {
           createSession(this.flashSession).then(response => {
             this.$message({
-                message: '添加成功！',
+              message: '添加成功！', //操作成功后显示相应的提示信息告知用户操作成功
               type: 'success'
             });
-              this.dialogVisible =false;
+            this.dialogVisible = false;
-              this.getList();
+            this.getList(); //关闭对话框并重新调用获取列表数据的方法刷新页面展示，以反映最新的数据变化情况
           })
         }
       })
     },
+    // 获取列表数据的方法，用于向服务器请求并获取秒杀时间段的列表数据。
     getList() {
-        this.listLoading = true;
+      this.listLoading = true; //首先将列表数据加载状态设置为true，表示开始获取数据，此时页面上可以根据这个状态显示加载动画等提示信息
-        fetchList({}).then(response => {
+      fetchList({}).then(response => { //然后调用导入的fetchList函数（不传参数，可能是获取全部时间段数据）向服务器发起请求
-          this.listLoading = false;
+        this.listLoading = false; //并将加载状态设置为false，表示数据获取完成，停止页面上的加载动画等相关显示
-          this.list = response.data;
+        this.list = response.data; //请求成功后将获取到的响应数据中的列表数据部分赋值给组件的list属性
       });
     }
   }
-  }
+}
 </script>
 <style scoped>
-  .operate-container {
+<!-- “scoped”属性表示当前这个style标签内定义的样式作用范围仅限于当前组件内部，避免样式影响到其他组件中同名的类或元素，起到样式隔离的作用，使得样式管理更加清晰和模块化 -->
-    margin-top: 0;
+.operate-container {
-  }
+<!-- 这是一个CSS选择器，用于选中页面中所有应用了“operate-container”类名的元素，接下来在花括号内定义的样式规则就会应用到这些被选中的元素上 -->
+<!-- “margin-top”是CSS的一个属性，用于设置元素的上外边距，也就是该元素距离其上方相邻元素的间隔距离。这里将其值设置为“0”，意味着应用了“operate-container”类名的元素，其上外边距为0像素，能精准控制这类元素在页面垂直方向上的布局位置，使其更贴合设计需求 -->
+margin-top: 0;
+}
 </style>