diff --git a/frontend/src/components/TagSelect/TagSelectOption.jsx b/frontend/src/components/TagSelect/TagSelectOption.jsx
index b5ae799..ace9314 100644
--- a/frontend/src/components/TagSelect/TagSelectOption.jsx
+++ b/frontend/src/components/TagSelect/TagSelectOption.jsx
@@ -1,17 +1,23 @@
-import { Tag } from 'ant-design-vue'
-const { CheckableTag } = Tag
+// 从 'ant-design-vue' 库中解构导入 Tag 组件（Ant Design Vue 是一个常用的 Vue UI 组件库，Tag 组件通常用于展示标签样式的元素）。
+import { Tag } from 'ant-design-vue';
+// 从导入的 Tag 组件中进一步解构出 CheckableTag 组件，从名称推测它可能是一个支持可勾选功能的标签组件，用于实现类似选项可以被选中或取消选中的交互效果。
+const { CheckableTag } = Tag;
 
 export default {
+  // 定义组件的名称为 'TagSelectOption'，在 Vue 开发中，组件名称有助于在调试、组件注册以及父子组件通信等场景下进行识别和使用。
   name: 'TagSelectOption',
   props: {
+    // 定义 prefixCls 属性，类型为字符串，用于设置组件的类名前缀，默认值是 'ant-pro-tag-select-option'。通过这个前缀可以方便地对组件添加自定义样式，外部传入不同的前缀可以改变样式应用的类名基础，便于样式定制和主题切换等操作，使得该组件在样式方面具有更好的可扩展性和个性化定制能力。
     prefixCls: {
       type: String,
       default: 'ant-pro-tag-select-option'
     },
+    // 定义 value 属性，类型可以是字符串、数字或者对象，用于表示该选项组件对应的唯一值，这个值在整个选项集合中应该是唯一的，方便用于识别、比较以及后续的选中状态关联等操作，默认值为空字符串，表示如果外部没有传入具体值，则使用空字符串作为默认的标识值。
     value: {
       type: [String, Number, Object],
       default: ''
     },
+    // 定义 checked 属性，类型为布尔值，用于接收外部传入的该选项初始选中状态，默认值为 false，即默认情况下该选项是未被选中的，外部可以通过传入 true 来设置该选项初始为选中状态，便于在不同使用场景下控制选项的初始展示情况。
     checked: {
       type: Boolean,
       default: false
@@ -19,27 +25,40 @@ export default {
   },
   data () {
     return {
+      // 定义 localChecked 属性，用于在组件内部记录当前选项的选中状态，初始值通过判断传入的 checked 属性值来确定，如果 checked 有值（为 true 或者 false）则使用该值，否则初始化为 false，这样可以保证组件内部状态与外部传入的初始状态保持一致，同时方便后续在组件内部对选中状态进行管理和更新操作。
       localChecked: this.checked || false
     }
   },
   watch: {
+    // 监听 checked 属性的变化，当 checked 属性的值发生改变时（可能是外部传入新的值来更新选项的选中状态），将组件内部记录选中状态的 localChecked 属性更新为新的 checked 属性值，确保组件内部状态与外部传入的选中状态保持同步，便于后续基于这个状态进行渲染和相关逻辑处理。
     'checked' (val) {
-      this.localChecked = val
+      this.localChecked = val;
     },
+    // 监听 '$parent.items' 的变化，这里 '$parent' 表示当前组件的父组件实例，'items' 可能是父组件中用于存储所有选项相关信息（比如各选项的选中状态等数据）的一个对象。使用 deep: true 表示进行深度监听，即当 '$parent.items' 对象内部的任何属性发生变化时，都会触发这个监听器的 handler 函数。
     '$parent.items': {
       handler: function (val) {
-        this.value && val.hasOwnProperty(this.value) && (this.localChecked = val[this.value])
+        // 当 '$parent.items' 发生变化时，先判断当前组件的 value 属性是否存在（即当前选项有对应的唯一标识值），并且 '$parent.items' 对象中是否包含以当前选项 value 值为键的属性（即判断父组件中是否有记录当前选项的相关信息），如果满足这两个条件，则将组件内部记录选中状态的 localChecked 属性更新为 '$parent.items' 中对应键的值（也就是获取父组件中记录的当前选项的选中状态来更新组件内部状态），保持组件内部状态与父组件中管理的选项选中状态信息一致。
+        this.value && val.hasOwnProperty(this.value) && (this.localChecked = val[this.value]);
       },
       deep: true
     }
   },
   render () {
-    const { $slots, value } = this
+    // 从组件实例中解构出 $slots 和 value 属性，$slots 用于获取组件的插槽内容（例如在使用该组件时，通过默认插槽传入的自定义文本、图标等内容），value 属性则是前面定义的用于标识该选项的唯一值，后续会在渲染等操作中使用到它们。
+    const { $slots, value } = this;
     const onChange = (checked) => {
-      this.$emit('change', { value, checked })
-    }
-    return (<CheckableTag key={value} vModel={this.localChecked} onChange={onChange}>
-      {$slots.default}
-    </CheckableTag>)
+      // 定义一个名为 onChange 的函数，当选项的选中状态发生改变时会调用这个函数。在函数内部，通过 $emit 触发 'change' 事件，并将包含当前选项 value 值和新的选中状态（checked）的对象传递出去，这样父组件可以监听这个 'change' 事件来获取选项选中状态的变化情况，进而进行相应的数据更新、逻辑处理等操作，实现了组件与父组件之间关于选项选中状态变更的通信机制。
+      this.$emit('change', { value, checked });
+    };
+    return (
+      // 使用 CheckableTag 组件进行渲染，这是从 Ant Design Vue 的 Tag 组件中解构出来的可勾选标签组件。
+      // 设置 key 属性为当前选项的 value 值，用于在 Vue 的虚拟 DOM 渲染机制中帮助识别和区分不同的选项组件，提高渲染效率和准确性（尤其在列表渲染等场景下很重要）。
+      // 通过 vModel 指令绑定组件内部记录的选中状态 localChecked，实现数据的双向绑定效果，使得外部传入的选中状态可以控制组件的展示，同时组件内部状态的改变也能反馈到外部。
+      // 绑定 onChange 事件为前面定义的 onChange 函数，当用户点击勾选或取消勾选该标签选项时，会触发这个函数来通知父组件选项选中状态的变化。
+      // 在 CheckableTag 组件内部渲染默认插槽内容（$slots.default），这样在使用该组件时，用户可以通过默认插槽传入自定义的文本、图标等内容来丰富标签选项的展示效果。
+      <CheckableTag key={value} vModel={this.localChecked} onChange={onChange}>
+        {$slots.default}
+      </CheckableTag>
+    )
   }
 }
diff --git a/frontend/src/components/TagSelect/index.jsx b/frontend/src/components/TagSelect/index.jsx
index fc0da53..d1f359e 100644
--- a/frontend/src/components/TagSelect/index.jsx
+++ b/frontend/src/components/TagSelect/index.jsx
@@ -1,31 +1,41 @@
-import PropTypes from 'ant-design-vue/es/_util/vue-types'
-import Option from './TagSelectOption.jsx'
-import { filterEmpty } from '../../components/_util/util'
+// 从 'ant-design-vue/es/_util/vue-types' 模块中导入 PropTypes，它通常用于定义 Vue 组件的属性（props）类型验证相关功能，类似于 React 中的 PropTypes，可帮助确保传入组件的属性符合预期的类型要求。
+import PropTypes from 'ant-design-vue/es/_util/vue-types';
+// 从当前目录下的 'TagSelectOption.jsx' 文件中导入 Option 组件（具体该组件的功能要看其内部定义，但大概率是与 TagSelect 组件相关的一个选项组件，可能用于展示单个可选择的标签选项等）。
+import Option from './TagSelectOption.jsx';
+// 从 '../../components/_util/util' 模块中导入 filterEmpty 函数，从函数名推测它可能用于过滤空值或者无效的元素，也许是对传入的插槽内容等数据进行预处理，去除空元素的操作。
+import { filterEmpty } from '../../components/_util/util';
 
 export default {
+  // 将导入的 Option 组件注册到当前组件中，使得在该组件的模板或其他地方可以直接使用 <Option> 标签来调用这个组件，具体用法和功能取决于 Option 组件本身的定义。
   Option,
   name: 'TagSelect',
+  // 定义组件的 v-model 绑定相关配置，指定了绑定的属性名为 'checked'，触发的事件名为 'change'。这意味着在使用该组件时，如果要进行双向数据绑定（类似 Vue 中常见的 v-model 用法），外部数据的变化会通过 'change' 事件传递进来更新内部的 'checked' 属性，同时内部 'checked' 属性的变化也会通过触发 'change' 事件通知外部进行相应更新。
   model: {
     prop: 'checked',
     event: 'change'
   },
   props: {
+    // 定义 prefixCls 属性，类型为字符串，用于设置组件的类名前缀，默认值是 'ant-pro-tag-select'，通过这个前缀可以方便地对组件添加自定义样式，外部传入不同的前缀可以改变样式应用的类名基础，便于样式定制和主题切换等操作。
     prefixCls: {
       type: String,
       default: 'ant-pro-tag-select'
     },
+    // 定义 defaultValue 属性，类型为通过 PropTypes.array 定义的数组类型（借助导入的 PropTypes 进行类型验证），用于设置组件的默认值（通常是初始状态下选中项等相关数据），默认值为 null，表示如果外部没有传入该属性值，初始状态下对应的值为 null，后续可能根据业务逻辑进行相应处理（比如使用空数组等其他默认情况）。
     defaultValue: {
       type: PropTypes.array,
       default: null
     },
+    // 定义 value 属性，同样类型为通过 PropTypes.array 定义的数组类型，用于接收外部传入的当前值（比如选中项的数组等情况），默认值为 null，与 defaultValue 类似，但它更侧重于外部动态传入的值来控制组件的当前状态，在双向数据绑定等场景中会经常用到。
     value: {
       type: PropTypes.array,
       default: null
     },
+    // 定义 expandable 属性，类型为布尔值，用于控制组件是否可展开（具体展开的功能和表现形式要看组件内部实现，可能是展开更多选项、显示隐藏部分内容等相关操作），默认值为 false，表示默认情况下组件不可展开。
     expandable: {
       type: Boolean,
       default: false
     },
+    // 定义 hideCheckAll 属性，类型为布尔值，用于控制是否隐藏全选按钮（从后续代码中可以看到与全选相关的逻辑，这里通过该属性来决定是否展示全选的操作入口），默认值为 false，即默认不隐藏全选按钮。
     hideCheckAll: {
       type: Boolean,
       default: false
@@ -33,71 +43,108 @@ export default {
   },
   data () {
     return {
+      // 定义 expand 属性，用于记录组件当前是否处于展开状态，初始值为 false，表示默认是未展开的，后续可以通过相关逻辑（比如点击展开按钮等操作）来改变这个值。
       expand: false,
+      // 定义 localCheckAll 属性，用于记录当前是否全选了所有选项，初始值为 false，表示默认没有全选，会根据选项的选中情况动态更新这个值（通过后续的相关方法来改变）。
       localCheckAll: false,
+      // 调用 getItemsKey 方法，传入过滤空值后的默认插槽内容（this.$slots.default 通过 filterEmpty 函数处理后），获取并存储每个选项对应的键值对象，用于记录每个选项的选中状态等相关信息，具体结构和用法要看 getItemsKey 方法的实现细节。
       items: this.getItemsKey(filterEmpty(this.$slots.default)),
+      // 根据组件传入的 value 属性或者 defaultValue 属性（如果 value 不存在则使用 defaultValue）来初始化 val 属性，如果两者都为 null，则初始化为空数组，这个 val 属性可能用于存储组件当前的实际值（比如选中项等相关数据），后续操作会基于这个值进行处理和更新。
       val: this.value || this.defaultValue || []
     }
   },
   methods: {
+    /**
+     * 当选项的选中状态发生改变时调用的方法，接收一个包含选中信息的对象（checked）参数，用于更新组件内部的选中状态相关数据以及全选状态的判断。
+     * @param checked 包含选中信息的对象，可能包含类似 value（选项的值）、checked（是否选中的布尔值）等属性，具体结构取决于调用时传入的参数情况以及相关组件的约定。
+     */
     onChange (checked) {
-      const key = Object.keys(this.items).filter(key => key === checked.value)
-      this.items[key] = checked.checked
-      const bool = Object.values(this.items).lastIndexOf(false)
+      // 通过 Object.keys 获取 items 对象（存储选项键值及选中状态的对象）的所有键（即每个选项对应的键），然后过滤出与传入的 checked.value 相等的键，得到对应的选项键数组（这里的逻辑是找到与当前改变选中状态的选项对应的键）。
+      const key = Object.keys(this.items).filter(key => key === checked.value);
+      // 根据找到的选项键，更新 items 对象中对应选项的选中状态为传入的 checked.checked 值（即更新该选项在组件内部记录的选中状态）。
+      this.items[key] = checked.checked;
+      // 通过 Object.values 获取 items 对象中所有值（即所有选项的选中状态值），然后查找最后一个值为 false 的索引位置（也就是查找是否还有未选中的选项），如果返回 -1，表示所有选项都被选中了，没有值为 false 的情况；否则表示还有未选中的选项。
+      const bool = Object.values(this.items).lastIndexOf(false);
       if (bool === -1) {
-        this.localCheckAll = true
+        // 如果所有选项都被选中，将 localCheckAll 属性设置为 true，表示当前处于全选状态。
+        this.localCheckAll = true;
       } else {
-        this.localCheckAll = false
+        // 如果还有未选中的选项，将 localCheckAll 属性设置为 false，表示当前不是全选状态。
+        this.localCheckAll = false;
       }
     },
+    /**
+     * 当点击全选按钮时调用的方法，接收一个包含全选按钮选中状态信息的对象（checked）参数，用于更新所有选项的选中状态以及组件内部的全选状态记录。
+     * @param checked 包含全选按钮选中状态的对象，通常包含 checked 属性（布尔值，表示全选按钮是否被选中），用于统一设置所有选项的选中状态。
+     */
     onCheckAll (checked) {
+      // 遍历 items 对象的所有键（即每个选项对应的键），将每个选项的选中状态都设置为传入的 checked.checked 值，实现全选或者取消全选所有选项的操作。
       Object.keys(this.items).forEach(v => {
-        this.items[v] = checked.checked
-      })
-      this.localCheckAll = checked.checked
+        this.items[v] = checked.checked;
+      });
+      // 将组件内部记录全选状态的 localCheckAll 属性设置为传入的 checked.checked 值，保持全选状态的记录与实际选项的选中情况一致。
+      this.localCheckAll = checked.checked;
     },
+    /**
+     * 用于获取每个选项对应的键值对象，根据传入的选项数组（items）创建一个新的对象，对象的键为每个选项的特定值（通常是用于唯一标识选项的值，比如选项的 ID 等），值初始化为 false（表示默认未选中状态），方便后续根据选项的键来记录和查询其选中状态等信息。
+     * @param items 选项数组，数组元素可能是包含选项相关信息的虚拟 DOM 节点或者对象（具体取决于组件插槽传入内容的结构和格式）。
+     * @returns {Object} 返回一个对象，对象的键为选项的特定值，值为布尔类型的选中状态（初始化为 false）。
+     */
     getItemsKey (items) {
-      const totalItem = {}
+      const totalItem = {};
       items.forEach(item => {
-        totalItem[item.componentOptions.propsData && item.componentOptions.propsData.value] = false
-      })
-      return totalItem
+        // 从每个选项对象（这里假设 item 是包含选项相关属性的对象，比如从插槽传入的组件选项配置对象）中获取用于唯一标识选项的值（通过 item.componentOptions.propsData.value 获取，具体的属性名 'value' 可能是组件约定的用于标识选项的关键属性），并以此值作为键，在 totalItem 对象中创建对应项，初始值设置为 false，表示默认未选中该选项。
+        totalItem[item.componentOptions.propsData && item.componentOptions.propsData.value] = false;
+      });
+      return totalItem;
     },
     // CheckAll Button
+    /**
+     * 用于渲染全选按钮的方法，根据 hideCheckAll 属性判断是否需要隐藏全选按钮，如果不隐藏（hideCheckAll 为 false），则返回一个 <Option> 组件（之前导入的组件）作为全选按钮，设置其 key 属性为 'total'，选中状态为 localCheckAll 属性的值（即当前组件内部记录的全选状态），并绑定 onChange 事件为 onCheckAll 方法，按钮显示文本为 'All'；如果需要隐藏（hideCheckAll 为 true），则返回 null，表示不渲染全选按钮。
+     */
     renderCheckAll () {
-      return !this.hideCheckAll && (<Option key={'total'} checked={this.localCheckAll} onChange={this.onCheckAll}>All</Option>) || null
+      return!this.hideCheckAll && (<Option key={'total'} checked={this.localCheckAll} onChange={this.onCheckAll}>All</Option>) || null;
     },
     // expandable
+    /**
+     * 用于处理组件可展开相关逻辑的方法，目前函数体为空，可能后续需要在这里添加代码来实现组件展开时的具体行为，比如展开显示更多选项、展开后加载更多数据等相关操作，具体功能取决于组件的设计需求。
+     */
     renderExpandable () {
 
     },
     // render option
+    /**
+     * 用于渲染选项的方法，接收选项数组（items）参数，主要功能是为每个选项添加 change 事件监听器，当选项的选中状态改变时，先触发组件内部的 onChange 方法更新内部状态，再通过 $emit 触发 'change' 事件将选中状态变化通知给外部组件（实现双向数据绑定或者让外部组件能响应选项变化等功能），最后返回处理后的选项数组（包含添加了事件监听器的虚拟 DOM 节点等），用于在组件模板中进行渲染展示。
+     * @param items 选项数组，同前面提到的选项相关数组，包含要渲染的各个选项的信息。
+     */
     renderTags (items) {
       const listeners = {
         change: (checked) => {
-          this.onChange(checked)
-          this.$emit('change', checked)
+          this.onChange(checked);
+          this.$emit('change', checked);
         }
-      }
+      };
 
       return items.map(vnode => {
-        const options = vnode.componentOptions
-        options.listeners = listeners
-        return vnode
-      })
+        const options = vnode.componentOptions;
+        options.listeners = listeners;
+        return vnode;
+      });
     }
   },
   render () {
-    const { $props: { prefixCls } } = this
+    // 从组件实例的 $props 对象中解构出 prefixCls 属性，获取组件当前的类名前缀，用于后续构建类名相关的对象来应用样式。
+    const { $props: { prefixCls } } = this;
     const classString = {
+      // 创建一个对象 classString，以 `${prefixCls}` 作为键，值为 true，用于在模板中通过动态绑定类名（比如使用 :class 指令）来添加组件的基础类名，方便样式应用（后续可以根据这个基础类名添加更多修饰类名等进行样式定制）。
       [`${prefixCls}`]: true
-    }
-    const tagItems = filterEmpty(this.$slots.default)
+    };
+    const tagItems = filterEmpty(this.$slots.default);
     return (
       <div class={classString}>
         {this.renderCheckAll()}
         {this.renderTags(tagItems)}
       </div>
-    )
+    );
   }
 }
diff --git a/frontend/src/components/tools/Breadcrumb.vue b/frontend/src/components/tools/Breadcrumb.vue
index 9bc141c..21774d8 100644
--- a/frontend/src/components/tools/Breadcrumb.vue
+++ b/frontend/src/components/tools/Breadcrumb.vue
@@ -1,10 +1,14 @@
 <template>
+  <!-- 使用 Ant Design Vue 框架中的 a-breadcrumb 组件创建一个面包屑导航栏，为其添加 "breadcrumb" 类名，方便后续通过 CSS 对其样式进行定制化设置 -->
   <a-breadcrumb class="breadcrumb">
+    <!-- 使用 v-for 指令循环遍历 breadList 数组中的每个元素（item）以及对应的索引（index），为每个元素创建一个 a-breadcrumb-item 组件，并且通过 :key 绑定每个元素的唯一标识（这里使用 item.name 作为唯一标识，用于 Vue 的虚拟 DOM 渲染优化，帮助 Vue 准确识别每个元素的变化情况） -->
     <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
+      <!-- 使用 router-link 组件创建一个路由链接，只有当 item.name 不等于当前组件的 name 属性值并且索引 index 不等于 1 时才显示为路由链接（可能是为了排除特定的某个或某些面包屑项不做成可点击的链接形式）。通过 :to 属性绑定一个对象，根据 item.path 的值来设置链接的目标路径，如果 item.path 为空字符串则设置目标路径为根路径 '/'，否则使用 item.path 本身的值作为目标路径 -->
       <router-link
-        v-if="item.name != name && index != 1"
-        :to="{ path: item.path === '' ? '/' : item.path }"
+        v-if="item.name!= name && index!= 1"
+        :to="{ path: item.path === ''? '/' : item.path }"
       >{{ item.meta.title }}</router-link>
+      <!-- 当不满足上面 router-link 的显示条件时（即要么 item.name 等于当前组件的 name 属性值，要么索引 index 等于 1），则以普通的 <span> 元素形式显示该项面包屑的标题（item.meta.title），不具备路由跳转功能 -->
       <span v-else>{{ item.meta.title }}</span>
     </a-breadcrumb-item>
   </a-breadcrumb>
@@ -14,28 +18,36 @@
 export default {
   data () {
     return {
+      // 定义一个名为 name 的空字符串属性，用于存储当前组件的名称或者某个用于判断面包屑显示逻辑的标识名称（从模板中的使用来看，和面包屑项是否显示为路由链接等判断相关），初始值为空，后续会在组件的生命周期等相关方法中进行赋值操作。
       name: '',
+      // 定义一个空数组 breadList，用于存储面包屑导航栏中各个项的信息，每个元素应该是一个包含面包屑相关属性（如名称、路径、标题等）的对象，后续通过相关方法获取并填充数据到这个数组中，以展示具体的面包屑内容。
       breadList: []
     }
   },
   created () {
-    this.getBreadcrumb()
+    // 在组件实例被创建完成后，立即调用 getBreadcrumb 方法，这个方法用于获取面包屑导航栏所需的数据，进行初始化面包屑列表的操作，确保面包屑在页面加载时就能正确显示相关内容。
+    this.getBreadcrumb();
   },
   methods: {
     getBreadcrumb () {
-      this.breadList = []
+      // 先清空 breadList 数组，防止之前可能存在的数据残留，确保每次获取面包屑数据都是重新开始填充，避免数据混乱。
+      this.breadList = [];
+      // 以下这行代码被注释掉了，原本的功能可能是手动往 breadList 数组中添加一个固定的面包屑项，表示首页（包含名称为 'index'，路径为 '/dashboard/'，标题为 '首页' 的相关信息），具体是否添加以及添加什么样的固定首页项可能根据项目实际需求来决定。
       // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
 
-      this.name = this.$route.name
+      // 将当前路由的名称赋值给组件内部的 name 属性，可能用于后续在模板中判断面包屑项的显示逻辑（比如某些项是否要根据当前路由名称来决定是否显示为可点击的路由链接等情况）。
+      this.name = this.$route.name;
+      // 遍历当前路由匹配到的所有路由记录（$route.matched 是一个包含当前路由及其所有嵌套路由的路由记录数组），对于每个路由记录，执行以下操作（原本有条件判断 item.name!== 'index' 来决定是否添加，现在是直接添加所有路由记录到 breadList 数组中，意味着会把所有匹配的路由信息都作为面包屑项，不过可以根据实际情况调整这个添加逻辑）。
       this.$route.matched.forEach(item => {
-        // item.name !== 'index' && this.breadList.push(item)
-        this.breadList.push(item)
-      })
+        // item.name!== 'index' && this.breadList.push(item)
+        this.breadList.push(item);
+      });
     }
   },
   watch: {
+    // 监听 $route 对象的变化（只要路由发生改变，比如用户点击链接跳转到其他页面、浏览器前进后退等操作导致路由切换时），就会触发这个监听器对应的回调函数，在这里回调函数就是再次调用 getBreadcrumb 方法，目的是重新获取并更新面包屑导航栏的数据，以保证面包屑能根据新的路由情况实时更新展示正确的内容。
     $route () {
-      this.getBreadcrumb()
+      this.getBreadcrumb();
     }
   }
 }
diff --git a/frontend/src/components/tools/DetailList.vue b/frontend/src/components/tools/DetailList.vue
index 35e485b..4261023 100644
--- a/frontend/src/components/tools/DetailList.vue
+++ b/frontend/src/components/tools/DetailList.vue
@@ -1,5 +1,10 @@
 <script>
+// 这是一段注释，用于提示代码相关的警告信息，说明当前的导入方式是为了兼容旧的引入方式，告诫后续开发人员不要再继续使用这种引入方式，可能后续会有新的、更合适的引入机制来替代它，避免出现潜在的问题或者不符合新的代码规范要求。
 /* WARNING: 兼容老引入，请勿继续使用 */
-import DescriptionList from '../../components/DescriptionList'
-export default DescriptionList
-</script>
+
+// 从相对路径 '../../components/DescriptionList' 处导入名为 DescriptionList 的模块（通常在 Vue 项目等环境里，这里的 DescriptionList 大概率是一个组件、函数或者类等具体的功能模块，具体取决于其对应文件内部的定义情况）。
+import DescriptionList from '../../components/DescriptionList';
+
+// 将导入的 DescriptionList 模块原样导出，这样在其他的模块或者文件中，就可以通过相应的导入语句引入这个 DescriptionList，方便复用其内部所定义的功能、组件等相关内容。不过要注意前面提到的警告，后续应考虑更换引入的方式。
+export default DescriptionList;
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/tools/HeadInfo.vue b/frontend/src/components/tools/HeadInfo.vue
index 7fbc692..b9d3c56 100644
--- a/frontend/src/components/tools/HeadInfo.vue
+++ b/frontend/src/components/tools/HeadInfo.vue
@@ -1,27 +1,34 @@
 <template>
+  <!-- 创建一个带有 "head-info" 类名的 div 容器，同时通过动态绑定 class 属性，根据组件传入的 center 属性值（布尔类型）来决定是否添加 "center" 类名，以此实现不同的样式布局效果 -->
   <div class="head-info" :class="center && 'center'">
+    <!-- 使用双括号插值语法展示 title 属性的值，将其作为一个文本内容放在 span 元素内展示，该文本通常用于显示标题相关的信息 -->
     <span>{{ title }}</span>
+    <!-- 同样使用双括号插值语法展示 content 属性的值，把它放置在 p 元素中展示，这里的内容大概率是主要的正文信息，字体等样式上会相对突出一些 -->
     <p>{{ content }}</p>
+    <!-- 通过 v-if 指令根据 bordered 属性的值（布尔类型）来决定是否渲染 em 元素，如果 bordered 属性为 true，则渲染该元素，可能用于添加一些装饰性的分割线等样式效果，具体样式由后续的样式部分定义 -->
     <em v-if="bordered"/>
   </div>
 </template>
-
 <script>
 export default {
   name: 'HeadInfo',
   props: {
+    // 定义 title 属性，类型为字符串，意味着外部传入的值应该是字符串类型的数据，用于设置组件展示的标题内容，默认值为空字符串，如果外部没有传入该属性值，那么对应的标题展示部分就为空，不会显示具体文字内容。
     title: {
       type: String,
       default: ''
     },
+    // 定义 content 属性，同样类型为字符串，用于传递组件要展示的正文内容相关信息，其默认值也是空字符串，当外部未传入时，对应位置不会显示具体内容。
     content: {
       type: String,
       default: ''
     },
+    // 定义 bordered 属性，类型为布尔值，用于控制是否显示某个边界相关的样式元素（从模板中看是 em 元素，可能是分割线之类的样式效果），默认值为 false，即默认情况下不显示该边界样式元素，只有外部传入 true 时才会显示。
     bordered: {
       type: Boolean,
       default: false
     },
+    // 定义 center 属性，类型为布尔值，用于决定组件内容是否居中显示，默认值为 true，表示默认情况下内容是居中布局的，若外部传入 false，则会采用默认的非居中样式布局（具体样式差异由样式部分代码决定）。
     center: {
       type: Boolean,
       default: true
@@ -31,37 +38,58 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .head-info {
-    position: relative;
-    text-align: left;
-    padding: 0 32px 0 0;
-    min-width: 125px;
+// 对类名为 "head-info" 的元素设置样式，以下是相关样式规则的定义。
+.head-info {
+  // 设置元素的定位方式为相对定位，方便后续其内部的绝对定位元素（如 em 元素）基于它进行位置定位，常用于实现一些特殊的布局效果。
+  position: relative;
+  // 设置文本水平对齐方式为左对齐，这是默认的文本对齐方式，不过根据是否添加 "center" 类名（由组件传入的 center 属性决定），文本对齐方式会有所改变，后续有相应的样式覆盖规则。
+  text-align: left;
+  // 设置元素的内边距，右侧内边距为 32px，顶部和底部内边距为 0，用于在元素内部留出一定空间，使内部文字等内容不会紧贴边界，同时右侧留出相对更多空间可能有特定的布局或美观考量。
+  padding: 0 32px 0 0;
+  // 设置元素的最小宽度为 125px，确保元素在页面布局中不会因为内容较少等原因变得过窄，维持一定的视觉宽度效果。
+  min-width: 125px;
 
-    &.center {
-      text-align: center;
-      padding: 0 32px;
-    }
+  // 当元素同时具有 "center" 类名时（通过组件传入的 center 属性为 true 时添加该类名），应用以下样式规则，用于改变文本对齐方式以及内边距等样式，实现居中布局效果。
+  &.center {
+    text-align: center;
+    padding: 0 32px;
+  }
 
-    span {
-      color: rgba(0, 0, 0, .45);
-      display: inline-block;
-      font-size: 14px;
-      line-height: 22px;
-      margin-bottom: 4px;
-    }
-    p {
-      color: rgba(0, 0, 0, .85);
-      font-size: 24px;
-      line-height: 32px;
-      margin: 0;
-    }
-    em {
-      background-color: #e8e8e8;
-      position: absolute;
-      height: 56px;
-      width: 1px;
-      top: 0;
-      right: 0;
-    }
+  span {
+    // 设置 span 元素内文字的颜色，使用 rgba 颜色模式，透明度为 0.45 的黑色，使其呈现出相对较淡的颜色效果，通常用于次要信息或者标题等的文字颜色设置，视觉上有一定的区分度。
+    color: rgba(0, 0, 0,.45);
+    // 将 span 元素设置为内联块级元素，使其既可以像内联元素一样在一行内排列，又能像块级元素一样设置宽高、内外边距等样式属性，方便进行布局和样式调整。
+    display: inline-block;
+    // 设置 span 元素内文字的字体大小为 14px，符合一般标题或者较小文字内容的字号大小需求。
+    font-size: 14px;
+    // 设置 span 元素的行高为 22px，用于控制文字在垂直方向上的间距，保证文字有合适的展示效果，避免过于紧凑或稀疏。
+    line-height: 22px;
+    // 设置 span 元素底部的外边距为 4px，用于与下方元素（如 p 元素）隔开一定距离，在视觉上有一定的间隔效果，使布局更清晰。
+    margin-bottom: 4px;
+  }
+  p {
+    // 设置 p 元素内文字的颜色为透明度为 0.85 的黑色，相较于 span 元素内的文字颜色，更加深一些，通常用于突出显示主要内容的文字，视觉上更醒目。
+    color: rgba(0, 0, 0,.85);
+    // 设置 p 元素内文字的字体大小为 24px，相对较大的字号用于强调正文主要内容，使其在视觉上更突出，容易被关注到。
+    font-size: 24px;
+    // 设置 p 元素的行高为 32px，保证正文文字在垂直方向上有合适的间距，展示效果更好。
+    line-height: 32px;
+    // 设置 p 元素的上下外边距为 0，使其与上下方元素紧密贴合，一般正文内容不需要额外的上下间距，保持整体布局的紧凑性和连贯性。
+    margin: 0;
   }
-</style>
+  em {
+    // 设置 em 元素的背景颜色为 #e8e8e8，这是一种较浅的灰色，通常用于作为装饰性的分割线等背景颜色，视觉上比较柔和，起到一定的区分作用。
+    background-color: #e8e8e8;
+    // 设置 em 元素的定位方式为绝对定位，基于前面设置的父元素（.head-info）的相对定位，它可以精确地定位在特定位置，常用于实现一些脱离文档流的装饰性元素布局。
+    position: absolute;
+    // 设置 em 元素的高度为 56px，确定其垂直方向上的长度，符合分割线等装饰元素在视觉上的长度需求。
+    height: 56px;
+    // 设置 em 元素的宽度为 1px，使其呈现出较细的线条效果，用于模拟分割线等样式。
+    width: 1px;
+    // 设置 em 元素的顶部位置为 0，使其顶部与父元素（.head-info）的顶部对齐，保证在垂直方向上处于合适的起始位置。
+    top: 0;
+    // 设置 em 元素的右侧位置为 0，使其靠右对齐在父元素（.head-info）的右侧边界，符合分割线位于右侧的常见布局需求。
+    right: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/tools/Logo.vue b/frontend/src/components/tools/Logo.vue
index 3f4359c..789ccc0 100644
--- a/frontend/src/components/tools/Logo.vue
+++ b/frontend/src/components/tools/Logo.vue
@@ -1,26 +1,62 @@
 <template>
+  <!-- 创建一个带有 "logo" 类名的 div 容器，用于包裹整个 logo 相关的元素，方便后续通过 CSS 对这个区域进行样式设置，统一管理 logo 的布局和外观表现 -->
   <div class="logo">
+    <!-- 使用 router-link 组件创建一个路由链接，通过 :to 属性绑定一个对象，指定链接的目标路由。这里目标路由是名为 'dashboard' 的路由（具体该路由对应的页面和功能需要看路由配置文件中的定义），点击这个链接会跳转到对应的 'dashboard' 页面 -->
     <router-link :to="{name:'dashboard'}">
+      <!-- 引入名为 LogoSvg 的组件，用于展示 logo 的图标部分（具体该组件如何渲染 SVG 图形以及样式表现要看其内部实现，这里它接收一个 alt 属性用于设置图片的替代文本，当图片无法正常显示时或者辅助设备读取时会显示该文本内容） -->
       <LogoSvg alt="logo" />
+      <!-- 通过 v-if 指令根据 showTitle 属性（布尔类型）的值来决定是否渲染 h1 元素。如果 showTitle 为 true，则渲染 h1 元素，并展示 title 属性的值作为标题内容；如果 showTitle 为 false，则不渲染 h1 元素，即不显示标题部分，以此实现根据条件控制标题是否显示的功能 -->
       <h1 v-if="showTitle">{{ title }}</h1>
     </router-link>
   </div>
 </template>
 
 <script>
-import LogoSvg from '../../assets/logo.svg?inline'
+// 从相对路径 '../../assets/logo.svg?inline' 处导入名为 LogoSvg 的组件（这里的 '?inline' 可能是某种构建工具相关的标识，用于指示将 SVG 文件以内联的方式引入，例如在 Vue 项目中，可能是通过相关的插件使得 SVG 图形可以像普通组件一样被方便地使用，而不是作为外部图片资源加载）
+import LogoSvg from '../../assets/logo.svg?inline';
 
 export default {
   name: 'Logo',
   components: {
+    // 在组件的局部组件注册对象中，注册导入的 LogoSvg 组件，使得在当前组件的模板中可以直接使用 <LogoSvg> 标签来调用这个组件进行渲染，实现了 SVG 图形作为组件展示的功能整合
     LogoSvg
   },
   props: {
+    // 定义 title 属性，类型为字符串，用于设置要展示的标题内容，默认值为 'Online Exam'，表示如果外部没有传入该属性值，那么标题部分就会显示 'Online Exam'，它是非必需属性（required: false），外部可根据实际需求传入自定义的标题内容。
     title: {
       type: String,
       default: 'Online Exam',
       required: false
     },
+    // 定义 showTitle 属性，类型为布尔值，用于控制是否显示标题部分（也就是前面模板中 h1 元素及其包含的 title 属性内容是否显示），默认值为 true，意味着默认情况下标题是显示的，只有当外部传入 false 时，才会隐藏标题，同样它也是非必需属性（required: false）。
+    showTitle: {
+      type: Boolean,
+      default: true,
+      required: false
+    }
+  }
+}
+</script>
+
+<script>
+// 从相对路径 '../../assets/logo.svg?inline' 导入名为 LogoSvg 的模块（在 Vue 项目中大概率是一个 SVG 图标组件，这里的 '?inline' 通常是一种构建工具相关的语法，比如在使用 Vue CLI 结合某些插件时，这种写法可以让 SVG 文件以内联的方式被引入，使其能像普通的 Vue 组件一样方便地在模板中使用，而不是作为常规的外部图片资源来加载）
+import LogoSvg from '../../assets/logo.svg?inline';
+
+export default {
+  // 定义组件的名称为 'Logo'，在 Vue 开发中，组件名称具有重要作用，比如在调试时方便识别组件、在父子组件通信以及组件注册等场景下能够准确指代该组件等。
+  name: 'Logo',
+  components: {
+    // 在组件的 `components` 选项中注册导入的 LogoSvg 组件，这使得在当前组件的模板（template）部分可以直接使用 `<LogoSvg>` 标签来调用这个组件进行渲染，实现了将 SVG 图标整合进组件内部使用的功能，让其成为该组件展示逻辑的一部分。
+    LogoSvg
+  },
+  props: {
+    // 定义 `title` 属性，其类型被指定为字符串（`String`）类型，意味着外部在使用该组件时，传入的这个属性的值必须是字符串格式的数据。它用于设置组件中要展示的标题相关内容，默认值为 'Online Exam'，也就是说如果外部没有给这个组件传入 `title` 属性的值，那么组件内部会默认使用 'Online Exam' 作为标题展示出来，并且该属性是非必需的（`required: false`），外部可以根据实际需求来决定是否传入自定义的标题内容。
+    title: {
+      type: String,
+      default: 'Online Exam',
+      required: false
+    },
+    // 定义 `showTitle` 属性，类型设定为布尔值（`Boolean`），主要用于控制是否显示标题部分的逻辑。默认值为 `true`，代表默认情况下组件会显示标题内容，只有当外部传入 `false` 这个值时，才会隐藏标题部分（从模板部分的代码来看，会影响到 `<h1>` 标签包裹的标题内容是否渲染显示），该属性同样是非必需的（`required: false`），给外部使用组件时提供了灵活控制标题显示与否的功能。
     showTitle: {
       type: Boolean,
       default: true,
diff --git a/frontend/src/components/tools/TwoStepCaptcha.vue b/frontend/src/components/tools/TwoStepCaptcha.vue
index 01302b4..e03a473 100644
--- a/frontend/src/components/tools/TwoStepCaptcha.vue
+++ b/frontend/src/components/tools/TwoStepCaptcha.vue
@@ -41,6 +41,7 @@
 <script>
 export default {
   props: {
+    // 定义 visible 属性，类型为布尔值，用于接收外部传入的模态框显示隐藏状态，默认值为 false，表示默认情况下模态框是隐藏的，外部可以通过传入 true 来显示模态框，实现了从外部控制模态框显示与否的功能，通过 v-model 双向绑定与模板中的 a-modal 组件关联起来。
     visible: {
       type: Boolean,
       default: false
@@ -48,42 +49,51 @@ export default {
   },
   data () {
     return {
+      // 定义 stepLoading 属性，用于控制表单提交验证等操作过程中的加载状态显示，初始值为 false，表示初始状态下没有正在进行的加载操作，当执行验证相关操作时会将其设置为 true 来显示加载动画（通过模板中相关组件的绑定来实现视觉效果），验证完成后再根据结果设置回 false。
       stepLoading: false,
-
+      // 定义 form 属性，初始值为 null，通过模板中 a-form 组件的 :auto-form-create 绑定的函数，会将实际的表单实例赋值给这个属性，方便后续在组件内部对表单进行验证等操作，比如调用表单的验证方法来检查用户输入是否符合要求。
       form: null
     }
   },
   methods: {
     handleStepOk () {
-      const vm = this
-      this.stepLoading = true
+      const vm = this;
+      // 当点击 "继续" 按钮（通过模板中按钮绑定的事件触发该方法），先将 stepLoading 属性设置为 true，使得按钮显示加载状态（如显示旋转的加载动画等），同时告知用户正在进行验证操作。
+      this.stepLoading = true;
+      // 调用表单实例（this.form）的 validateFields 方法来验证表单输入内容是否符合之前设置的验证规则（比如输入的是否是 6 位数字等），该方法接收一个回调函数，回调函数有两个参数，err 表示验证是否出错（如果为 null 则表示验证通过，否则表示有验证错误），values 表示表单输入的各个字段的值组成的对象。
       this.form.validateFields((err, values) => {
         if (!err) {
-          console.log('values', values)
+          // 如果验证通过（err 为 null），在控制台打印出 values 对象（包含用户输入的表单数据），方便调试查看输入内容，然后通过 setTimeout 设置一个 2 秒的定时器，模拟一个异步验证操作完成后的后续处理（比如向服务器发送验证请求并等待响应等场景），在定时器回调函数中，将 stepLoading 属性设置回 false，表示验证完成，停止加载动画显示，并且通过 $emit 触发 'success' 事件，将包含验证通过的表单值（values）的对象传递出去，以便父组件可以监听这个事件并进行相应的业务逻辑处理，比如跳转到下一步操作页面等。
+          console.log('values', values);
           setTimeout(() => {
-            vm.stepLoading = false
-            vm.$emit('success', { values })
-          }, 2000)
-          return
+            vm.stepLoading = false;
+            vm.$emit('success', { values });
+          }, 2000);
+          return;
         }
-        this.stepLoading = false
-        this.$emit('error', { err })
-      })
+        // 如果验证出错（err 不为 null），将 stepLoading 属性设置回 false，停止加载动画显示，然后通过 $emit 触发 'error' 事件，将包含验证错误信息（err）的对象传递出去，以便父组件可以监听这个事件并进行相应的提示用户重新输入等业务逻辑处理。
+        this.stepLoading = false;
+        this.$emit('error', { err });
+      });
     },
     handleCancel () {
-      this.visible = false
-      this.$emit('cancel')
+      // 当点击 "返回" 按钮或者模态框的取消操作按钮（通过模板中按钮和模态框事件绑定触发该方法），将 visible 属性设置为 false，隐藏模态框，同时通过 $emit 触发 'cancel' 事件，通知父组件模态框已被取消关闭，父组件可以根据这个事件进行相应的逻辑处理，比如恢复之前的页面状态等。
+      this.visible = false;
+      this.$emit('cancel');
     },
     onForgeStepCode () {
-
+      // 该方法目前函数体为空，从模板中绑定的事件来看，可能后续用于处理用户点击 "遗失手机?" 链接时的相关逻辑，比如显示提示信息引导用户如何找回验证方式、联系客服等操作相关的逻辑，具体功能需要根据业务需求来完善。
     }
   }
 }
 </script>
 <style lang="less" scoped>
-  .step-form-wrapper {
-    margin: 0 auto;
-    width: 80%;
-    max-width: 400px;
-  }
+// 对类名为 "step-form-wrapper" 的元素设置样式规则，以下是具体的样式属性说明。
+.step-form-wrapper {
+  // 设置元素在水平方向上自动居中，通过设置左右外边距为 auto，使得该元素在父元素中能水平居中显示，常用于将内容块在页面中放置在较为居中的位置，视觉上更加美观和平衡。
+  margin: 0 auto;
+  // 设置元素的宽度为父元素宽度的 80%，但同时限制最大宽度不超过 400px，这样既可以保证在较宽的页面中元素能有合适的宽度占比，又能防止在大屏幕等情况下元素过宽影响视觉效果，使表单内容在不同屏幕尺寸下都能保持较好的展示效果。
+  width: 80%;
+  max-width: 400px;
+}
 </style>
diff --git a/frontend/src/components/tools/UserMenu.vue b/frontend/src/components/tools/UserMenu.vue
index 998c459..8137aff 100644
--- a/frontend/src/components/tools/UserMenu.vue
+++ b/frontend/src/components/tools/UserMenu.vue
@@ -1,20 +1,32 @@
 <template>
+  <!-- 创建一个带有 "user-wrapper" 类名的 div 容器，用于包裹整个用户相关菜单的结构，方便后续通过 CSS 对这个区域进行样式设置，统一管理其布局和外观表现 -->
   <div class="user-wrapper">
+    <!-- 在 "user-wrapper" 内部再创建一个带有 "content-box" 类名的 div 容器，进一步细化布局结构，后续相关的用户菜单交互组件等都放置在这个容器内 -->
     <div class="content-box">
+      <!-- 使用 Ant Design Vue 库中的 a-dropdown 组件创建一个下拉菜单组件，用于展示用户相关的操作选项，如账户设置、退出登录等，点击后会弹出相应的菜单选项供用户选择操作 -->
       <a-dropdown>
+        <!-- 创建一个带有 "action ant-dropdown-link user-dropdown-menu" 类名的 span 元素，作为触发下拉菜单显示的操作区域，它内部包含用户头像（通过 a-avatar 组件展示）和用户昵称（通过双括号插值语法展示），用户点击这个区域时会弹出下拉菜单 -->
         <span class="action ant-dropdown-link user-dropdown-menu">
+          <!-- 使用 Ant Design Vue 库中的 a-avatar 组件展示用户头像，设置其 class 属性为 "avatar"，size 属性为 "small" 表示以小尺寸展示头像，通过 :src 属性绑定一个函数（从脚本部分可知是从全局变量获取头像地址的函数）来动态获取并显示用户头像 -->
           <a-avatar class="avatar" size="small" :src="avatar()"/>
+          <!-- 使用双括号插值语法展示用户昵称，昵称的值同样是通过函数（从全局变量获取昵称的函数）动态获取得到，具体函数的实现和数据来源看脚本部分代码 -->
           <span>{{ nickname() }}</span>
         </span>
+        <!-- 使用 slot="overlay" 插槽来定义下拉菜单弹出时显示的具体内容，也就是具体的菜单选项列表，将其包裹在带有 "user-dropdown-menu-wrapper" 类名的 a-menu 组件中，使其呈现为一个菜单的样式结构 -->
         <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
+          <!-- 创建一个 a-menu-item 菜单子项组件，设置 key 属性为 "1"，用于在菜单中唯一标识这个选项，方便 Vue 在进行虚拟 DOM 操作等场景下进行区分和管理 -->
           <a-menu-item key="1">
+            <!-- 使用 router-link 组件创建一个路由链接，通过 :to 属性绑定一个对象，指定链接的目标路由为名为 'settings' 的路由（具体该路由对应的页面和功能需要看路由配置文件中的定义），点击这个选项会跳转到账户设置相关的页面，在这个菜单子项内部还包含了一个 a-icon 组件用于展示设置图标以及一个 span 元素用于显示 "账户设置" 文本内容 -->
             <router-link :to="{ name: 'settings' }">
               <a-icon type="setting"/>
               <span>账户设置</span>
             </router-link>
           </a-menu-item>
+          <!-- 使用 a-menu-divider 组件创建一个菜单分隔线，用于在菜单选项之间进行视觉上的分隔，使不同功能的选项分组更加清晰，这里将账户设置选项和退出登录选项进行了分隔 -->
           <a-menu-divider/>
+          <!-- 再创建一个 a-menu-item 菜单子项组件，设置 key 属性为 "3"，同样用于唯一标识这个选项，用于展示退出登录相关的操作选项 -->
           <a-menu-item key="3">
+            <!-- 使用普通的 <a> 标签创建一个链接（这里使用 "javascript:;" 作为 href 属性值，阻止默认的页面跳转行为，因为实际的退出登录操作是通过绑定的 @click 事件来处理），绑定 @click 事件为 handleLogout 方法，点击这个选项会调用 handleLogout 方法来执行退出登录相关的逻辑，在这个菜单子项内部同样包含了一个 a-icon 组件用于展示退出图标以及一个 span 元素用于显示 "退出登录" 文本内容 -->
             <a href="javascript:;" @click="handleLogout">
               <a-icon type="logout"/>
               <span>退出登录</span>
@@ -27,32 +39,37 @@
 </template>
 
 <script>
-import { mapActions, mapGetters } from 'vuex'
+// 从 Vuex 库中导入 mapActions 和 mapGetters 两个辅助函数，mapActions 用于将 Vuex 中的 action 映射为组件的方法，方便在组件中直接调用这些 action 来触发异步操作（比如修改全局状态、向服务器发送请求等）；mapGetters 用于将 Vuex 中的 getters 映射为组件的计算属性，使得组件可以方便地获取 Vuex 中存储的全局数据状态（比如从 store 中获取用户信息等）。
+import { mapActions, mapGetters } from 'vuex';
 
 export default {
   name: 'UserMenu',
   methods: {
-    ...mapActions(['Logout']), // 清除token和localStorage中的信息
-    ...mapGetters(['nickname', 'avatar']), // 从全局变量中获取用户昵称和头像
+    // 使用扩展运算符将 Vuex 中的 Logout action 映射为组件的方法，这样在组件内部就可以直接通过 this.Logout() 来调用这个 action，从注释可知其功能大概率是清除 token 和 localStorage 中的相关信息，用于实现退出登录时清理用户认证相关数据的操作。
+    ...mapActions(['Logout']),
+    // 使用扩展运算符将 Vuex 中的 nickname 和 avatar 两个 getters 映射为组件的计算属性，组件内部可以像调用普通函数一样通过 this.nickname() 和 this.avatar() 来获取对应的全局数据，分别用于获取用户昵称和用户头像的相关信息，方便在模板中展示。
+    ...mapGetters(['nickname', 'avatar']),
     handleLogout () {
-      const that = this
-
+      const that = this;
+      // 使用 this.$confirm 方法（通常是 Ant Design Vue 库提供的确认框组件相关的方法）弹出一个确认框，用于提示用户是否真的要注销登录，显示的标题为 "提示"，内容为 "真的要注销登录吗?"，并根据用户在确认框上的操作（点击确定或取消按钮）执行不同的逻辑。
       this.$confirm({
         title: '提示',
-        content: '真的要注销登录吗 ?',
+        content: '真的要注销登录吗?',
         onOk () {
+          // 当用户点击确认框的确定按钮时，调用 this.Logout({}) 方法（前面通过 mapActions 映射过来的退出登录相关的 action），这个方法返回一个 Promise 对象（通常用于处理异步操作，比如向服务器发送退出登录请求等），然后通过.then 方法在 Promise 成功 resolve 时执行后续逻辑，这里是调用 window.location.reload() 刷新页面，可能是为了让页面重新加载后展示未登录的状态或者更新相关界面显示；如果 Promise 被 reject（即出现错误情况），则通过.catch 方法捕获错误，并使用 this.$message.error 方法（Ant Design Vue 库提供的显示错误消息的组件相关方法）显示错误提示信息，包含标题为 "错误" 以及具体的错误描述（从 err.message 获取）。
           return that.Logout({}).then(() => {
-            window.location.reload()
+            window.location.reload();
           }).catch(err => {
             that.$message.error({
               title: '错误',
               description: err.message
-            })
-          })
+            });
+          });
         },
         onCancel () {
+          // 当用户点击确认框的取消按钮时，这里暂时没有添加具体的逻辑处理，通常情况下就是不执行任何与退出登录相关的操作，直接关闭确认框即可。
         }
-      })
+      });
     }
   }
 }