From 449117fb99f06c51f3cb668679764242abd07d5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=A6=E6=B3=BD=E6=97=BA?= <2413898818@qq.com>
Date: Mon, 16 Dec 2024 18:19:12 +0800
Subject: [PATCH] Default Changelist

---
 .../StandardFormRow/StandardFormRow.vue       |  79 +++--
 .../src/components/StandardFormRow/index.js   |   7 +-
 frontend/src/components/Table/index.js        | 281 +++++++++++-------
 3 files changed, 244 insertions(+), 123 deletions(-)

diff --git a/frontend/src/components/StandardFormRow/StandardFormRow.vue b/frontend/src/components/StandardFormRow/StandardFormRow.vue
index a4e261b..735997c 100644
--- a/frontend/src/components/StandardFormRow/StandardFormRow.vue
+++ b/frontend/src/components/StandardFormRow/StandardFormRow.vue
@@ -1,121 +1,166 @@
 <template>
+  <!-- 创建一个 div 元素，通过动态绑定 class 属性，根据组件的不同属性状态来添加相应的类名。prefixCls、lastCls、blockCls、gridCls 这些类名会根据组件内部的计算属性和传入的属性值来确定是否添加 -->
   <div :class="[prefixCls, lastCls, blockCls, gridCls]">
+    <!-- 通过 v-if 指令判断 title 属性是否有值，如果有值则创建一个带有 antd-pro-components-standard-form-row-index-label 类名的 div 容器，用于展示标题内容 -->
     <div v-if="title" class="antd-pro-components-standard-form-row-index-label">
+      <!-- 在 span 元素内使用双括号插值语法展示 title 属性的值，用于在页面上显示对应的标题文字 -->
       <span>{{ title }}</span>
     </div>
+    <!-- 创建一个带有 antd-pro-components-standard-form-row-index-content 类名的 div 容器，用于放置通过插槽传入的内容 -->
     <div class="antd-pro-components-standard-form-row-index-content">
+      <!-- 使用默认插槽（<slot>），允许外部组件在使用该组件时插入自定义的内容，增强组件的复用性和灵活性 -->
       <slot></slot>
     </div>
   </div>
 </template>
-
 <script>
+// 定义一个常量数组 classes，数组中的元素是一些特定的类名字符串，这些类名可能用于在不同条件下为组件添加不同的样式，以实现不同的布局或展示效果
 const classes = [
   'antd-pro-components-standard-form-row-index-standardFormRowBlock',
   'antd-pro-components-standard-form-row-index-standardFormRowGrid',
   'antd-pro-components-standard-form-row-index-standardFormRowLast'
-]
+];
+
 export default {
   name: 'StandardFormRow',
   props: {
+    // 定义 prefixCls 属性，类型为字符串，用于设置组件最外层的基础类名前缀，默认值是 'antd-pro-components-standard-form-row-index-standardFormRow'，外部可以传入不同的值来改变类名前缀，进而影响样式的应用
     prefixCls: {
       type: String,
       default: 'antd-pro-components-standard-form-row-index-standardFormRow'
     },
+    // 定义 title 属性，类型为字符串，用于设置组件展示的标题内容，默认值为 undefined，意味着如果外部没有传入该属性值，组件内相关的标题展示部分可能会有不同的处理逻辑（比如隐藏等，取决于模板中的 v-if 判断）
     title: {
       type: String,
       default: undefined
     },
+    // 定义 last 属性，类型为布尔值，用于标识当前组件是否处于一组表单行的最后一个位置，外部传入 true 或 false 来控制相关样式和逻辑
     last: {
       type: Boolean
     },
+    // 定义 block 属性，类型为布尔值，可能用于控制表单元素是否以块状形式展示等相关样式和布局逻辑，外部传入相应布尔值来决定是否应用对应的样式效果
     block: {
       type: Boolean
     },
+    // 定义 grid 属性，类型为布尔值，也许和表单元素按照网格布局等相关样式和布局逻辑有关，同样依赖外部传入的布尔值来控制对应样式的应用与否
     grid: {
       type: Boolean
     }
   },
   computed: {
+    // 定义一个计算属性 lastCls，通过判断 this.last 的值（即传入的 last 属性值），如果为 true，则返回 classes 数组中的第三个元素（对应的类名用于标识最后一个表单行的样式相关逻辑），否则返回 null，表示不添加该类名
     lastCls () {
-      return this.last ? classes[2] : null
+      return this.last? classes[2] : null;
     },
+    // 定义一个计算属性 blockCls，根据 this.block 的值来决定是否返回 classes 数组中的第一个元素对应的类名，用于控制表单元素块状展示相关的样式添加与否，为 true 则返回相应类名，否则返回 null
     blockCls () {
-      return this.block ? classes[0] : null
+      return this.block? classes[0] : null;
     },
+    // 定义一个计算属性 gridCls，类似前面的逻辑，依据 this.grid 的值来确定是否返回 classes 数组中第二个元素对应的类名，用于控制与网格布局相关的样式应用，为 true 时返回该类名，否则返回 null
     gridCls () {
-      return this.grid ? classes[1] : null
+      return this.grid? classes[1] : null;
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
+// 导入上级目录下的 index.less 文件，可能是为了引入一些基础的样式变量、混入（mixin）或者通用的样式规则等，以便在当前样式中复用或基于其进行扩展
 @import '../index.less';
 
+// 对类名为 antd-pro-components-standard-form-row-index-standardFormRow 的元素设置样式，这是组件的基础类名，以下是相关样式规则的定义
 .antd-pro-components-standard-form-row-index-standardFormRow {
+  // 设置元素为弹性布局（flexbox），方便内部元素进行灵活排列和对齐等操作
   display: flex;
+  // 设置底部外边距为 16px，用于与下方元素隔开一定距离，在视觉上有一定的间隔效果
   margin-bottom: 16px;
+  // 设置底部内边距为 16px，可能用于在内部元素与底部边框等之间留出一定空间
   padding-bottom: 16px;
+  // 设置底部边框样式，为 1px 宽度的虚线，颜色通过 @border-color-split 变量来确定（该变量应该在导入的 index.less 或者其他地方定义好了具体的颜色值）
   border-bottom: 1px dashed @border-color-split;
 
-  /deep/ .ant-form-item {
+  // 使用 /deep/ 选择器（在一些预处理器或者框架中用于穿透组件内部的样式作用域，比如在 Vue 项目中处理组件库样式时可能会用到），对内部的.ant-form-item 类名对应的元素设置样式，这里设置其右边距为 24px，用于调整表单元素之间的水平间距
+  /deep/.ant-form-item {
     margin-right: 24px;
   }
-  /deep/ .ant-form-item-label label {
+  // 同样使用 /deep/ 选择器，对内部的.ant-form-item-label label 元素设置样式，将其右边距设置为 0，改变标签文字与其他元素的间距，并设置文字颜色通过 @text-color 变量来确定（该变量应该已定义好具体颜色值）
+  /deep/.ant-form-item-label label {
     margin-right: 0;
     color: @text-color;
   }
-  /deep/ .ant-form-item-label,
+  // 对内部的.ant-form-item-label 和.ant-form-item-control 类名对应的元素设置样式，将它们的内边距都设置为 0，统一去除默认的内边距，并设置行高为 32px，使内部文字等元素在垂直方向上有合适的对齐和布局效果
+  /deep/.ant-form-item-label,
   .ant-form-item-control {
     padding: 0;
     line-height: 32px;
   }
 
+  // 对类名为 antd-pro-components-standard-form-row-index-label 的元素（用于展示标题部分）设置样式
   .antd-pro-components-standard-form-row-index-label {
+    // 设置弹性伸缩属性，不自动缩放，初始宽度为自动（根据内容确定），用于控制标题部分在弹性布局中的宽度表现
     flex: 0 0 auto;
+    // 设置右边距为 24px，用于与右侧的内容区域隔开一定距离
     margin-right: 24px;
+    // 设置文字颜色通过 @heading-color 变量来确定（通常是一种适合标题展示的颜色）
     color: @heading-color;
+    // 设置字体大小通过 @font-size-base 变量来确定（基础字体大小相关变量）
     font-size: @font-size-base;
+    // 设置文本水平对齐方式为右对齐，符合标题通常在左侧，内容在右侧的布局习惯
     text-align: right;
     & > span {
+      // 设置 span 元素为内联块级元素，使其既可以像内联元素一样在一行内排列，又能像块级元素一样设置宽高、内外边距等样式属性
       display: inline-block;
+      // 设置高度为 32px，与前面设置的行高一致，保证文字垂直居中显示等效果
       height: 32px;
+      // 设置行高为 32px，使文字在垂直方向上居中
       line-height: 32px;
       &::after {
+        // 使用伪元素 ::after 在 span 元素内容后面添加一个中文冒号（：），可能是用于标题与内容之间的一种格式上的分隔标识
         content: '：';
       }
     }
   }
 
+  // 对类名为 antd-pro-components-standard-form-row-index-content 的元素（用于放置通过插槽传入的内容区域）设置样式
   .antd-pro-components-standard-form-row-index-content {
+    // 设置弹性伸缩属性，自动缩放以填充剩余空间，初始宽度为 0，用于让内容区域在弹性布局中能够自适应占据剩余的宽度空间
     flex: 1 1 0;
-    /deep/ .ant-form-item:last-child {
+    // 使用 /deep/ 选择器，对内部的.ant-form-item:last-child 元素（即内容区域内最后一个表单元素）设置样式，将其右边距设置为 0，避免最后一个元素出现多余的间距
+    /deep/.ant-form-item:last-child {
       margin-right: 0;
     }
   }
 
+  // 当元素同时具有 antd-pro-components-standard-form-row-index-standardFormRowLast 类名时（通过前面的计算属性根据 last 属性判断添加该类名），应用以下样式规则，用于处理处于最后一个表单行的特殊样式情况
   &.antd-pro-components-standard-form-row-index-standardFormRowLast {
+    // 清除底部外边距，使该表单行与下方元素之间没有额外的间隔距离
     margin-bottom: 0;
+    // 清除底部内边距，让内容等更贴合底部边界等
     padding-bottom: 0;
+    // 清除底部边框，与其他表单行在样式上进行区分，比如最后一行不需要底部边框等情况
     border: none;
   }
 
+  // 当元素同时具有 antd-pro-components-standard-form-row-index-standardFormRowBlock 类名时（通过 blockCls 计算属性根据 block 属性判断添加该类名），应用以下样式规则，用于控制表单元素以块状形式展示的相关样式效果
   &.antd-pro-components-standard-form-row-index-standardFormRowBlock {
-    /deep/ .ant-form-item,
+    // 使用 /deep/ 选择器，对内部的.ant-form-item 和 div.ant-form-item-control-wrapper 元素设置样式，让它们以块级元素的形式展示，改变默认的布局和显示方式，实现块状展示的效果
+    /deep/.ant-form-item,
     div.ant-form-item-control-wrapper {
       display: block;
     }
   }
 
+  // 当元素同时具有 antd-pro-components-standard-form-row-index-standardFormRowGrid 类名时（通过 gridCls 计算属性根据 grid 属性判断添加该类名），应用以下样式规则，用于与网格布局相关的样式设置
   &.antd-pro-components-standard-form-row-index-standardFormRowGrid {
-      /deep/ .ant-form-item,
-      div.ant-form-item-control-wrapper {
-        display: block;
-      }
-      /deep/ .ant-form-item-label {
-        float: left;
-      }
+    // 类似前面的块状布局样式设置，使用 /deep/ 选择器让内部的.ant-form-item 和 div.ant-form-item-control-wrapper 元素以块级元素形式展示
+    /deep/.ant-form-item,
+    div.ant-form-item-control-wrapper {
+      display: block;
+    }
+    // 使用 /deep/ 选择器，对内部的.ant-form-item-label 元素设置样式，让其向左浮动，可能用于网格布局中标签元素在左侧等特定的布局排列方式
+    /deep/.ant-form-item-label {
+      float: left;
+    }
   }
 }
 
diff --git a/frontend/src/components/StandardFormRow/index.js b/frontend/src/components/StandardFormRow/index.js
index 8155cc7..d87a217 100644
--- a/frontend/src/components/StandardFormRow/index.js
+++ b/frontend/src/components/StandardFormRow/index.js
@@ -1,3 +1,6 @@
-import StandardFormRow from './StandardFormRow'
+// 从当前目录下的“StandardFormRow”文件（在Vue项目等环境里，通常这个文件会定义一个相关的组件、模块，比如是一个.vue文件或者.js文件等）中导入名为“StandardFormRow”的模块。
+// 具体这个模块代表的是一个组件、函数或者类等，取决于“StandardFormRow”文件内部的定义情况。
+import StandardFormRow from './StandardFormRow';
 
-export default StandardFormRow
+// 将导入的“StandardFormRow”模块原样导出，这样在其他的模块或者文件中，就可以通过相应的导入语句引入这个“StandardFormRow”，方便复用其内部所定义的功能、组件等相关内容。
+export default StandardFormRow;
\ No newline at end of file
diff --git a/frontend/src/components/Table/index.js b/frontend/src/components/Table/index.js
index 39c60ae..5cde774 100644
--- a/frontend/src/components/Table/index.js
+++ b/frontend/src/components/Table/index.js
@@ -1,75 +1,81 @@
-import T from 'ant-design-vue/es/table/Table'
-import get from 'lodash.get'
-
+// 从 'ant-design-vue/es/table/Table' 模块中导入名为 'T' 的对象（推测这里的 'T' 很可能是 Ant Design Vue 框架中 Table 组件相关的定义或者配置对象，后续代码中会基于它进行一些扩展和功能整合）
+import T from 'ant-design-vue/es/table/Table';
+// 从 'lodash.get' 模块中导入名为 'get' 的函数（lodash.get 常用于从嵌套的对象结构中安全地获取指定路径的值，在代码中可能用于获取表格行数据中特定字段的值等操作）
+import get from 'lodash.get';
 export default {
-  data () {
+  data() {
     return {
+      // 定义一个数组 needTotalList，用于存储需要进行总计统计的列相关信息（可能后续会根据表格数据来计算每列的合计值等，具体要看相关方法的使用）
       needTotalList: [],
 
+      // 定义一个数组 selectedRows，用于存储当前选中的表格行数据（当表格支持行选择功能时会用到）
       selectedRows: [],
+      // 定义一个数组 selectedRowKeys，用于存储当前选中的表格行对应的唯一标识（通常是每行数据的一个特定字段作为键值，方便进行行的选中状态管理等操作）
       selectedRowKeys: [],
 
+      // 定义一个布尔值 localLoading，用于标记表格数据是否正在加载中，初始化为 false，表示初始状态下没有正在加载数据
       localLoading: false,
+      // 定义一个数组 localDataSource，用于存储表格实际展示的数据，初始为空数组，后续会通过加载数据的方法来填充真实数据
       localDataSource: [],
+      // 定义一个对象 localPagination，通过复制 this.pagination（可能是从父组件传入的分页相关配置对象）来初始化，用于管理表格的分页相关信息（如当前页码、每页显示数量等），在组件内部进行分页相关操作时会基于这个对象进行修改和维护
       localPagination: Object.assign({}, this.pagination)
     }
   },
   props: Object.assign({}, T.props, {
+    // 定义 rowKey 属性，类型可以是字符串或者函数，用于指定表格每行数据的唯一标识字段或生成唯一标识的函数，默认值为 'key'，意味着如果外部没有传入该属性指定的标识方式，默认以每行数据中的 'key' 字段作为唯一标识
     rowKey: {
       type: [String, Function],
       default: 'key'
     },
+    // 定义 data 属性，类型为函数，且是必需属性（required: true），这个函数用于获取表格的数据，外部组件需要传入一个符合要求的函数，该函数接收一些参数（比如分页、筛选、排序等条件参数）并返回相应的数据（通常是包含数据数组以及分页相关信息等的对象）
     data: {
       type: Function,
       required: true
     },
+    // 定义 pageNum 属性，类型为数字，用于指定表格初始的页码，默认值为 1，表示默认显示第一页数据
     pageNum: {
       type: Number,
       default: 1
     },
+    // 定义 pageSize 属性，类型为数字，用于指定每页显示的数据条数，默认值为 10，即每页默认展示 10 条数据
     pageSize: {
       type: Number,
       default: 10
     },
+    // 定义 showSizeChanger 属性，类型为布尔值，用于控制是否显示每页显示数量的切换组件（例如可以切换每页显示 10 条、20 条等不同数量），默认值为 true，表示默认显示该切换组件
     showSizeChanger: {
       type: Boolean,
       default: true
     },
+    // 定义 size 属性，类型为字符串，可能用于控制表格的尺寸大小等样式相关属性，默认值为 'default'，具体的尺寸样式对应关系要看 Ant Design Vue 框架中 Table 组件的实现
     size: {
       type: String,
       default: 'default'
     },
     /**
-     * alert: {
-     *   show: true,
-     *   clear: Function
-     * }
+     * 定义 alert 属性，类型可以是对象或者布尔值，默认值为 null。当为对象时，可能包含一些与表格数据提示相关的配置，比如是否显示提示信息、清除提示相关的回调函数等（从注释中的示例结构来看）；当为布尔值时，可能用于简单地控制提示功能的开启或关闭
      */
     alert: {
       type: [Object, Boolean],
       default: null
     },
+    // 定义 rowSelection 属性，类型为对象，默认值为 null，用于配置表格行的选择功能相关设置，比如可以设置是否支持多选、单选等选择模式以及相关的回调函数等（具体取决于 Ant Design Vue 框架的 Table 组件支持的配置项）
     rowSelection: {
       type: Object,
       default: null
     },
-    /** @Deprecated */
+    /** @Deprecated 表示该属性已被弃用，建议后续不再使用此属性，这里的 showAlertInfo 用于控制是否显示某种提示信息（具体要看之前的业务逻辑，但既然被标记弃用，应该有替代的实现方式或者不再需要此功能了） */
     showAlertInfo: {
       type: Boolean,
       default: false
     },
+    // 定义 showPagination 属性，类型可以是字符串或者布尔值，用于控制是否显示分页组件以及分页相关的显示策略，默认值为 'auto'，可能意味着会根据数据情况自动判断是否显示分页（比如数据条数是否超过每页显示数量等情况来决定）
     showPagination: {
       type: String | Boolean,
       default: 'auto'
     },
     /**
-     * enable page URI mode
-     *
-     * e.g:
-     * /users/1
-     * /users/2
-     * /users/3?queryParam=test
-     * ...
+     * 定义 pageURI 属性，类型为布尔值，用于控制是否启用基于页面 URI（统一资源标识符，比如 URL 中的路径部分）的分页模式，默认值为 false，开启后可能会根据页面 URL 中的参数来确定当前页码等分页信息，例如不同的页码对应不同的 URL 路径，像 /users/1、/users/2 等这种形式来表示不同页码的数据访问
      */
     pageURI: {
       type: Boolean,
@@ -77,7 +83,8 @@ export default {
     }
   }),
   watch: {
-    'localPagination.current' (val) {
+    // 监听 localPagination 对象的 current 属性变化（通常 current 表示当前页码），当页码发生变化时，如果 pageURI 为 true（即启用了基于页面 URI 的分页模式），则通过 $router.push 方法来更新页面路由，将当前页码信息添加到路由参数中，实现页面 URL 与分页页码的同步更新
+    'localPagination.current'(val) {
       this.pageURI && this.$router.push({
         ...this.$route,
         name: this.$route.name,
@@ -86,166 +93,216 @@ export default {
         })
       })
     },
-    pageNum (val) {
+    // 监听 pageNum 属性变化，当 pageNum 改变时，将 localPagination 对象中的 current 属性更新为新的 pageNum 值，保持组件内部的分页相关数据的一致性
+    pageNum(val) {
       Object.assign(this.localPagination, {
         current: val
       })
     },
-    pageSize (val) {
+    // 监听 pageSize 属性变化，当 pageSize 改变时，相应地更新 localPagination 对象中的 pageSize 属性值，以适配每页显示数量的改变
+    pageSize(val) {
       Object.assign(this.localPagination, {
         pageSize: val
       })
     },
-    showSizeChanger (val) {
+    // 监听 showSizeChanger 属性变化，根据其值来更新 localPagination 对象中的 showSizeChanger 属性，用于控制每页显示数量切换组件的显示隐藏状态
+    showSizeChanger(val) {
       Object.assign(this.localPagination, {
         showSizeChanger: val
       })
     }
   },
-  created () {
-    const { pageNo } = this.$route.params
-    const localPageNum = this.pageURI && (pageNo && parseInt(pageNo)) || this.pageNum
+  created() {
+    // 从当前页面路由的参数中获取 pageNo 参数值（前提是基于页面 URI 的分页模式启用且路由参数中有该值），并将其转换为整数（如果存在的话），否则使用传入的 pageNum 属性值作为初始页码
+    const {pageNo} = this.$route.params;
+    const localPageNum = this.pageURI && (pageNo && parseInt(pageNo)) || this.pageNum;
+    // 根据 showPagination 属性的值判断是否需要初始化 localPagination 对象，如果 showPagination 的值在 ['auto', true] 数组中（表示需要显示分页或者自动根据情况判断显示分页），则将 localPagination 对象更新为包含当前页码、每页显示数量以及每页显示数量切换组件显示状态等相关信息的对象
     this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
       current: localPageNum,
       pageSize: this.pageSize,
       showSizeChanger: this.showSizeChanger
-    })
-    this.needTotalList = this.initTotalList(this.columns)
-    this.loadData()
+    });
+    // 调用 initTotalList 方法，传入表格的列信息（this.columns，可能从父组件传入或者在组件内部其他地方定义），初始化需要进行总计统计的列信息列表，并将结果赋值给 needTotalList 属性
+    this.needTotalList = this.initTotalList(this.columns);
+    // 调用 loadData 方法开始加载表格数据，触发数据获取的流程
+    this.loadData();
   },
   methods: {
     /**
      * 表格重新加载方法
-     * 如果参数为 true, 则强制刷新到第一页
-     * @param Boolean bool
+     * 如果参数为 true，则强制刷新到第一页，重新获取数据进行展示。
+     * @param Boolean bool 一个布尔类型的参数，默认值为 false，用于控制是否强制刷新到第一页。
      */
-    refresh (bool = false) {
+    refresh(bool = false) {
+      // 如果传入的 bool 参数为 true，就重置 localPagination 对象中的当前页码（current）为 1，同时保持每页显示数量（pageSize）为组件当前设定的值（this.pageSize）。
+      // 这里使用 Object.assign 进行对象属性的合并赋值，确保只更新需要改变的属性，而不影响 localPagination 中的其他属性。
       bool && (this.localPagination = Object.assign({}, {
-        current: 1, pageSize: this.pageSize
-      }))
-      this.loadData()
+        current: 1,
+        pageSize: this.pageSize
+      }));
+      // 调用 loadData 方法，触发数据加载流程，根据更新后的分页设置（如果有强制刷新到第一页的操作）获取最新的数据并更新表格展示内容。
+      this.loadData();
     },
     /**
      * 加载数据方法
-     * @param {Object} pagination 分页选项器
-     * @param {Object} filters 过滤条件
-     * @param {Object} sorter 排序条件
+     * 此方法用于根据传入的分页、过滤、排序等条件参数，向数据源请求数据，并处理返回的数据，更新组件内部相关的数据状态（如分页信息、表格数据源等）。
+     * @param {Object} pagination 分页选项器，包含分页相关的参数，比如当前页码、每页显示数量等信息，由表格组件的分页交互操作产生。
+     * @param {Object} filters 过滤条件，包含用户设置的筛选条件信息，用于从数据源筛选出符合条件的数据。
+     * @param {Object} sorter 排序条件，包含用户对表格列进行排序操作产生的相关条件，比如排序字段、排序顺序等信息。
      */
-    loadData (pagination, filters, sorter) {
-      this.localLoading = true
+    loadData(pagination, filters, sorter) {
+      // 将 localLoading 属性设置为 true，表示数据开始加载，通常可以在页面上通过显示加载动画等方式提示用户正在获取数据。
+      this.localLoading = true;
+      // 构建一个 parameter 对象，用于整合传递给获取数据的函数（this.data）的参数。
+      // 从 pagination 参数（如果存在）、组件内部的 localPagination 对象或者默认的 pageNum 和 pageSize 属性中获取当前页码和每页显示数量相关信息。
+      // 同时，根据 sorter 参数（如果存在排序相关信息）获取排序字段和排序顺序信息，以及合并 filters 参数中的过滤条件信息。
       const parameter = Object.assign({
-        pageNo: (pagination && pagination.current) ||
+          pageNo: (pagination && pagination.current) ||
             this.localPagination.current || this.pageNum,
-        pageSize: (pagination && pagination.pageSize) ||
+          pageSize: (pagination && pagination.pageSize) ||
             this.localPagination.pageSize || this.pageSize
-      },
-      (sorter && sorter.field && {
-        sortField: sorter.field
-      }) || {},
-      (sorter && sorter.order && {
-        sortOrder: sorter.order
-      }) || {}, {
-        ...filters
-      }
-      )
-      const result = this.data(parameter)
-      // 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data
-      // eslint-disable-next-line
+        },
+        (sorter && sorter.field && {
+          sortField: sorter.field
+        }) || {},
+        (sorter && sorter.order && {
+          sortOrder: sorter.order
+        }) || {}, {
+          ...filters
+        }
+      );
+      // 调用 this.data 函数（外部传入的用于获取表格数据的函数），传入构建好的 parameter 参数，获取数据结果。返回的结果通常是一个包含数据数组以及分页相关信息（如总记录数、当前页码等）的对象（具体结构取决于数据接口的返回约定）。
+      const result = this.data(parameter);
+      // 以下代码用于处理异步数据获取的情况（当返回结果是一个 Promise 对象时，说明是异步获取数据，比如通过网络请求获取后端接口返回的数据），需要对返回的 Promise 进行 then 操作来处理成功获取数据后的逻辑。
+      // eslint-disable-next-line：这行注释是用于告诉 ESLint 代码检查工具忽略下一行代码可能存在的相关规则检查（可能是因为下一行代码的写法不符合某些 ESLint 默认规则，但此处是有意为之）。
       if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
         result.then(r => {
+          // 根据从接口返回的数据（r 对象）更新 localPagination 对象中的相关分页信息，包括当前页码、总记录数、每页显示数量切换组件的显示状态以及每页显示数量等，保持组件内部的分页相关数据与接口返回的数据一致。
           this.localPagination = Object.assign({}, this.localPagination, {
             current: r.pageNo, // 返回结果中的当前分页数
             total: r.totalCount, // 返回结果中的总记录数
             showSizeChanger: this.showSizeChanger,
             pageSize: (pagination && pagination.pageSize) ||
               this.localPagination.pageSize
-          })
-          // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
+          });
+          // 如果返回的数据数组长度为 0（表示没有数据了，可能是因为删除了所有数据等情况）且当前页码大于 1，则自动将当前页码减 1，并再次调用 loadData 方法重新加载数据，避免出现空页面的情况，确保页面始终有数据展示（如果有上一页数据的话）。
           if (r.data.length === 0 && this.localPagination.current > 1) {
-            this.localPagination.current--
-            this.loadData()
-            return
+            this.localPagination.current--;
+            this.loadData();
+            return;
           }
 
-          // 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false
-          // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
-
-          (!this.showPagination || !r.totalCount && this.showPagination === 'auto') && (this.localPagination.hideOnSinglePage = true)
-          this.localDataSource = r.data // 返回结果中的数组数据
-          this.localLoading = false
+          // 这里用于判断接口是否有返回 r.totalCount（总记录数）或 this.showPagination = false 的情况。
+          // 当满足这些情况时，表示数据不满足分页大小（比如总记录数小于每页显示数量或者明确不需要分页显示），则将 localPagination 对象的 hideOnSinglePage 属性设置为 true，关闭 table 分页功能（可能是隐藏分页组件等相关操作，具体要看组件中对该属性的使用方式）。
+          (!this.showPagination || !r.totalCount && this.showPagination === 'auto') && (this.localPagination.hideOnSinglePage = true);
+          // 将返回结果中的数据数组赋值给 localDataSource 属性，用于更新表格实际展示的数据，使得表格展示最新获取到的数据内容。
+          this.localDataSource = r.data; // 返回结果中的数组数据
+          // 将 localLoading 属性设置为 false，表示数据加载完成，通常可以相应地隐藏加载提示（比如停止显示加载动画），告知用户数据已加载完毕。
+          this.localLoading = false;
         })
       }
     },
-    initTotalList (columns) {
-      const totalList = []
+    /**
+     * 初始化用于总计统计的列信息列表方法
+     * 遍历传入的表格列信息（columns），找出需要进行总计统计（通过列对象中的 needTotal 属性判断）的列，为这些列创建新的对象，添加一个初始值为 0 的 total 属性，用于后续统计每列数据的总和，最后返回包含这些需要统计列信息的数组。
+     * @param columns 表格的列信息数组，每个元素是一个列对象，包含列的相关配置和属性。
+     * @returns {Array} 返回一个数组，数组元素为需要进行总计统计的列对象，每个对象包含原列的信息以及新增的 total 属性（初始值为 0）。
+     */
+    initTotalList(columns) {
+      const totalList = [];
+      // 先判断 columns 是否存在且是一个数组类型，然后遍历 columns 数组中的每个列对象。
       columns && columns instanceof Array && columns.forEach(column => {
+        // 如果列对象中有 needTotal 属性为 true，表示该列需要进行总计统计，就将该列信息复制一份，并添加一个 total 属性初始化为 0，放入 totalList 数组中。
         if (column.needTotal) {
           totalList.push({
             ...column,
             total: 0
-          })
+          });
         }
-      })
-      return totalList
+      });
+      return totalList;
     },
     /**
-     * 用于更新已选中的列表数据 total 统计
-     * @param selectedRowKeys
-     * @param selectedRows
+     * 用于更新已选中的列表数据 total 统计方法
+     * 根据传入的已选中的行键值数组（selectedRowKeys）和选中的行数据数组（selectedRows），更新组件内部记录选中信息的属性（selectedRows 和 selectedRowKeys），然后遍历需要总计统计的列信息列表（needTotalList），计算每列在选中行中的数据总和，更新每列对应的 total 属性值。
+     * @param selectedRowKeys 已选中的表格行对应的唯一标识（键值）数组，通常是每行数据的一个特定字段作为键值，方便进行行的选中状态管理等操作。
+     * @param selectedRows 已选中的表格行数据数组，包含每行的详细数据内容。
      */
-    updateSelect (selectedRowKeys, selectedRows) {
-      this.selectedRows = selectedRows
-      this.selectedRowKeys = selectedRowKeys
-      const list = this.needTotalList
+    updateSelect(selectedRowKeys, selectedRows) {
+      // 更新组件内部记录选中行数据的属性 selectedRows，将传入的 selectedRows 参数赋值给它，保持数据的一致性。
+      this.selectedRows = selectedRows;
+      // 同样，更新组件内部记录选中行键值的属性 selectedRowKeys，将传入的 selectedRowKeys 参数赋值给它，用于后续操作能准确获取选中行的相关信息。
+      this.selectedRowKeys = selectedRowKeys;
+      const list = this.needTotalList;
+      // 遍历 needTotalList 数组（之前初始化的需要总计统计的列信息列表），对于每个需要总计统计的列，执行以下操作来更新 total 属性值。
       this.needTotalList = list.map(item => {
         return {
           ...item,
+          // 使用 reduce 方法遍历选中的行数据数组（selectedRows），从每行数据中获取对应列的数据（通过 lodash.get 函数安全获取，防止数据结构异常等情况）并累加起来，计算每列在选中行中的数据总和，作为该列的 total 值。
+          // 如果获取到的值无法转换为数字（通过 parseInt 转换失败，返回 NaN），则将 total 值设置为 0，确保数据的合理性。
           total: selectedRows.reduce((sum, val) => {
-            const total = sum + parseInt(get(val, item.dataIndex))
-            return isNaN(total) ? 0 : total
+            const total = sum + parseInt(get(val, item.dataIndex));
+            return isNaN(total) ? 0 : total;
           }, 0)
-        }
-      })
+        };
+      });
     },
     /**
-     * 清空 table 已选中项
+     * 清空 table 已选中项方法
+     * 如果组件启用了行选择功能（通过判断 rowSelection 属性是否存在），则调用 rowSelection 的 onChange 方法传入空数组，同时调用 updateSelect 方法传入空数组来清空选中的行相关数据以及总计统计信息，实现清空选中项的功能。
      */
-    clearSelected () {
+    clearSelected() {
       if (this.rowSelection) {
-        this.rowSelection.onChange([], [])
-        this.updateSelect([], [])
+        // 调用 rowSelection 的 onChange 方法，传入空的选中行键值数组和空的选中行数据数组，通知相关的逻辑（可能是外部监听行选择变化的代码）选中项已被清空，触发相应的处理逻辑（比如更新界面上显示的选中数量等）。
+        this.rowSelection.onChange([], []);
+        // 调用 updateSelect 方法，传入空数组，清空组件内部记录的选中行相关数据以及总计统计信息，使组件状态回到未选中任何行的初始状态。
+        this.updateSelect([], []);
       }
     },
     /**
-     * 处理交给 table 使用者去处理 clear 事件时，内部选中统计同时调用
-     * @param callback
-     * @returns {*}
+     * 处理交给 table 使用者去处理 clear 事件时，内部选中统计同时调用的方法
+     * 根据是否存在选中项以及传入的回调函数（callback），决定是否返回一个带有“清空”按钮的虚拟 DOM 元素（在 Vue 中使用类似 JSX 的语法），点击该按钮会先执行传入的 callback 函数，然后调用 clearSelected 方法清空选中项相关数据。
+     * @param callback 一个回调函数，通常由 table 使用者传入，用于在点击“清空”按钮时执行额外的自定义逻辑（比如可能涉及到外部状态的更新、数据的保存等操作）。
+     * @returns {*} 如果没有选中项（selectedRowKeys 长度小于等于 0），则返回 null，表示不渲染“清空”按钮；否则返回包含“清空”按钮及相应点击事件处理逻辑的虚拟 DOM 元素。
      */
-    renderClear (callback) {
-      if (this.selectedRowKeys.length <= 0) return null
+    renderClear(callback) {
+      if (this.selectedRowKeys.length <= 0) return null;
       return (
         <a style="margin-left: 24px" onClick={() => {
-          callback()
-          this.clearSelected()
+          // 点击“清空”按钮时，先执行传入的 callback 函数，让 table 使用者有机会处理自己的业务逻辑（比如保存当前选中状态等操作）。
+          callback();
+          // 然后调用 clearSelected 方法，清空组件内部选中项相关的数据以及统计信息，更新组件状态。
+          this.clearSelected();
         }}>清空</a>
-      )
+      );
     },
-    renderAlert () {
+    /**
+     * 绘制包含表格相关统计信息、清空按钮等内容的 alert 组件方法
+     * 此方法用于构建一个带有统计信息和操作按钮的提示组件（a-alert），展示已选择的行数、各统计列的总计信息以及“清空”按钮（根据相关条件判断是否显示），方便用户直观了解表格的选中状态和相关统计数据，并提供操作入口来清空选中项。
+     */
+    renderAlert() {
       // 绘制统计列数据
+      // 遍历 needTotalList 数组（包含需要进行总计统计的列信息），为每个列创建一个包含列标题和对应总计数据的 <span> 元素，用于展示每列的总计信息，最后返回一个包含这些 <span> 元素的数组（在 Vue 中使用类似 JSX 的语法构建虚拟 DOM 元素）。
       const needTotalItems = this.needTotalList.map((item) => {
         return (<span style="margin-right: 12px">
-          {item.title}总计 <a style="font-weight: 600">{!item.customRender ? item.total : item.customRender(item.total)}</a>
-        </span>)
-      })
+                {item.title}总计 <a
+          style="font-weight: 600">{!item.customRender ? item.total : item.customRender(item.total)}</a>
+            </span>)
+      });
 
       // 绘制 清空 按钮
+      // 根据 alert 属性的不同情况来决定是否显示以及如何显示“清空”按钮。
+      // 如果 alert.clear 是一个布尔值且为 true，表示需要显示“清空”按钮，调用 renderClear 方法传入 clearSelected 函数（用于清空选中项）来获取对应的虚拟 DOM 元素（即带有点击事件处理逻辑的“清空”按钮）。
+      // 如果 alert 属性不为 null 且 alert.clear 是一个函数，表示用户自定义了清除逻辑，同样调用 renderClear 方法传入自定义的清除函数来获取“清空”按钮对应的虚拟 DOM 元素。
+      // 如果不满足以上条件，则将 clearItem 设置为 null，表示不显示“清空”按钮。
       const clearItem = (typeof this.alert.clear === 'boolean' && this.alert.clear) ? (
         this.renderClear(this.clearSelected)
       ) : (this.alert !== null && typeof this.alert.clear === 'function') ? (
         this.renderClear(this.alert.clear)
-      ) : null
+      ) : null;
 
       // 绘制 alert 组件
+      // 使用 a-alert 组件构建一个提示框，设置显示图标（showIcon={true}），并添加底部外边距（style="margin-bottom: 16px"），在提示框的 message 插槽中放入已选择的行数信息、统计列的总计信息以及“清空”按钮（如果存在）的虚拟 DOM 元素，最后返回构建好的 a-alert 组件对应的虚拟 DOM 元素，用于在页面上展示表格相关的统计提示信息和操作按钮。
       return (
         <a-alert showIcon={true} style="margin-bottom: 16px">
           <template slot="message">
@@ -254,52 +311,68 @@ export default {
             {clearItem}
           </template>
         </a-alert>
-      )
+      );
     }
   },
 
-  render () {
+  render() {
+    // 创建一个空对象来存储将要传递给表格的属性
     const props = {}
+    // 获取当前组件data中的所有键名
     const localKeys = Object.keys(this.$data)
+    // 判断是否显示alert，条件包括alert对象存在且show属性为真，同时rowSelection的selectedRowKeys已定义，或者无条件显示alert
     const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert
 
+    // 遍历T.props中的每个键
     Object.keys(T.props).forEach(k => {
+      // 根据T.props中的键名生成对应的本地键名（首字母大写）
       const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
+      // 如果本地数据中存在这个键名，则将其值赋给props对象中的对应键
       if (localKeys.includes(localKey)) {
         props[k] = this[localKey]
         return props[k]
       }
+      // 如果当前键是'rowSelection'
       if (k === 'rowSelection') {
+        // 如果需要显示alert且rowSelection已定义
         if (showAlert && this.rowSelection) {
-          // 如果需要使用alert，则重新绑定 rowSelection 事件
+          // 重新绑定rowSelection事件，包括selectedRows, selectedRowKeys和onChange事件处理函数
           props[k] = {
             selectedRows: this.selectedRows,
             selectedRowKeys: this.selectedRowKeys,
             onChange: (selectedRowKeys, selectedRows) => {
+              // 更新组件内部状态
               this.updateSelect(selectedRowKeys, selectedRows)
+              // 如果原rowSelection中有onChange方法，则调用它
               typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
             }
           }
           return props[k]
         } else if (!this.rowSelection) {
-          // 如果没打算开启 rowSelection 则清空默认的选择项
+          // 如果没有定义rowSelection，则将其置为null
           props[k] = null
           return props[k]
         }
       }
+      // 如果当前组件中有这个属性，则将其添加到props对象中
       this[k] && (props[k] = this[k])
       return props[k]
     })
+
+    // 使用JSX语法渲染<a-table>组件，并传入props和scopedSlots
     const table = (
-      <a-table {...{ props, scopedSlots: { ...this.$scopedSlots } }} onChange={this.loadData}>
-        { Object.keys(this.$slots).map(name => (<template slot={name}>{this.$slots[name]}</template>)) }
+      <a-table {...{props, scopedSlots: {...this.$scopedSlots}}} onChange={this.loadData}>
+        { // 遍历组件的插槽，并渲染它们
+          Object.keys(this.$slots).map(name => (<template slot={name}>{this.$slots[name]}</template>))
+        }
       </a-table>
     )
 
+    // 返回最终的渲染结果，包括可能显示的alert和表格
     return (
       <div class="table-wrapper">
-        { showAlert ? this.renderAlert() : null }
-        { table }
+        {showAlert ? this.renderAlert() : null} // 如果需要显示alert，则调用renderAlert方法渲染alert
+        {table} // 渲染表格
       </div>
     )
   }