From 6fb6bc2f76ee0ae73cd9efcc3eb79689533d27da 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 20:00:03 +0800
Subject: [PATCH] Default Changelist

---
 frontend/src/utils/helper/permission.js      |  45 ++++++-
 frontend/src/views/list/ExamDetail.vue       |  77 +++++++-----
 frontend/src/views/list/ExamRecordDetail.vue | 125 +++++++++++--------
 frontend/src/views/list/ExamRecordList.vue   |  83 +++++++-----
 frontend/src/views/list/ExamTableList.vue    | 112 +++++++++++------
 5 files changed, 287 insertions(+), 155 deletions(-)

diff --git a/frontend/src/utils/helper/permission.js b/frontend/src/utils/helper/permission.js
index a964324..ef08344 100644
--- a/frontend/src/utils/helper/permission.js
+++ b/frontend/src/utils/helper/permission.js
@@ -1,46 +1,79 @@
+// 定义一个名为 PERMISSION_ENUM 的常量对象，用于列举各种权限相关的枚举信息。
+// 该对象的每个属性键（如 'add'、'delete' 等）对应一种权限操作，属性值又是一个包含 'key' 和 'label' 的对象，
+// 'key' 与属性键相同，用于在代码逻辑中作为唯一标识来区分不同的权限操作，
+// 'label' 则是对应的权限操作的中文描述，方便在界面显示或者给开发人员查看时更直观地理解该权限的含义。
 const PERMISSION_ENUM = {
+  // 'add' 权限，代表新增操作，其对应的标识 'key' 为 'add'，中文描述 'label' 为 '新增'，在权限管理系统中可用于判断用户是否具有新增数据等相关权限。
   'add': { key: 'add', label: '新增' },
+  // 'delete' 权限，对应删除操作，'key' 为 'delete'，'label' 为 '删除'，用于检查用户是否有权限删除相应资源等场景。
   'delete': { key: 'delete', label: '删除' },
+  // 'edit' 权限，表示修改操作，'key' 为 'edit'，'label' 为 '修改'，可用于判断用户是否能够对数据等进行修改操作的权限验证。
   'edit': { key: 'edit', label: '修改' },
+  // 'query' 权限，意味着查询操作，'key' 为 'query'，'label' 为 '查询'，例如在数据查询功能的权限控制方面会用到这个权限标识。
   'query': { key: 'query', label: '查询' },
+  // 'get' 权限，通常可理解为获取详情操作，'key' 为 'get'，'label' 为 '详情'，用于判断用户是否有权查看具体数据详情等情况。
   'get': { key: 'get', label: '详情' },
+  // 'enable' 权限，代表启用操作，'key' 为 'enable'，'label' 为 '启用'，在涉及功能启用、数据启用等权限控制场景中使用。
   'enable': { key: 'enable', label: '启用' },
+  // 'disable' 权限，对应禁用操作，'key' 为 'disable'，'label' 为 '禁用'，用于验证用户是否具备禁用相关功能或数据的权限。
   'disable': { key: 'disable', label: '禁用' },
+  // 'import' 权限，表示导入操作，'key' 为 'import'，'label' 为 '导入'，比如在数据导入功能的权限管理中依靠这个权限标识来判断权限。
   'import': { key: 'import', label: '导入' },
+  // 'export' 权限，意味着导出操作，'key' 为 'export'，'label' 为 '导出'，用于控制用户是否有权限导出数据等相关操作的权限判断。
   'export': { key: 'export', label: '导出' }
 }
-
 function plugin (Vue) {
+  // 检查插件是否已经被安装过，如果已经安装（通过判断 plugin.installed 属性是否为 true），则直接返回，避免重复安装。
   if (plugin.installed) {
     return
   }
 
+  // 如果 Vue.prototype 上不存在 $auth 属性，就通过 Object.defineProperties 方法来为其定义该属性。
+  // 这里使用 defineProperties 可以更精细地控制属性的描述符（如可枚举性、可配置性、读写特性等）。
   !Vue.prototype.$auth && Object.defineProperties(Vue.prototype, {
     $auth: {
+      // 定义 $auth 属性的读取器（getter）函数，当在 Vue 实例上访问 $auth 属性时，会执行这个函数来获取相应的值。
       get () {
+        // 将当前的 Vue 实例保存到 _this 变量中，方便在后续的内部函数中访问实例上的其他属性和方法，
+        // 例如访问 Vuex 的 store 实例等（通过 _this.$store）。
         const _this = this
+        // 返回一个函数，这个函数接收一个参数 permissions，它应该是一个表示权限的字符串，格式可能类似 'permission.action'。
         return (permissions) => {
+          // 将传入的 permissions 参数按照 '.' 进行分割，得到一个包含两个元素的数组，
+          // 第一个元素 permission 表示权限的类型（如 'add'、'delete' 等），第二个元素 action 表示具体的操作行为（对应权限类型下的具体操作）。
           const [permission, action] = permissions.split('.')
+          // 通过 Vue 实例的 $store.getters 访问 Vuex 中定义的 getters，然后获取 roles.permissions，
+          // 这里的 roles.permissions 应该是存储了用户所拥有的所有权限信息的列表（通常是一个数组，每个元素包含权限相关的详细信息）。
           const permissionList = _this.$store.getters.roles.permissions
+          // 在权限列表中查找与传入的 permission 类型匹配的权限对象，通过比较 permissionId 属性来确定。
           return permissionList.find((val) => {
             return val.permissionId === permission
-          }).actionList.findIndex((val) => {
-            return val === action
-          }) > -1
+          })
+            // 在上一步找到的权限对象中，查找其 actionList（应该是包含该权限下所有具体操作行为的列表）中是否存在传入的 action 操作行为，
+            // 通过 findIndex 方法查找，如果找到则返回该操作行为在列表中的索引，若索引大于 -1，表示找到了该操作行为，即用户具有对应的权限，返回 true；否则返回 false。
+            .actionList.findIndex((val) => {
+              return val === action
+            }) > -1
         }
       }
     }
   })
 
+  // 类似地，如果 Vue.prototype 上不存在 $enum 属性，就通过 Object.defineProperties 方法为其定义该属性。
   !Vue.prototype.$enum && Object.defineProperties(Vue.prototype, {
     $enum: {
+      // 定义 $enum 属性的读取器（getter）函数，当在 Vue 实例上访问 $enum 属性时，执行此函数来获取相应的值。
       get () {
-        // const _this = this;
+        // 返回一个函数，这个函数接收一个参数 val，用于根据传入的参数来查找 PERMISSION_ENUM 中对应的枚举值。
         return (val) => {
+          // 先将 PERMISSION_ENUM 赋值给 result，后续会根据传入的 val 参数逐步在这个对象中查找对应的子属性。
           let result = PERMISSION_ENUM
+          // 如果传入的 val 参数存在，就按照 '.' 分割成数组，然后遍历每个元素 v，在 result 对象中查找对应的子属性。
           val && val.split('.').forEach(v => {
+            // 如果当前的 result 对象存在并且包含对应的子属性 v，则更新 result 为该子属性的值，否则将 result 设置为 null，表示未找到对应的枚举值。
             result = result && result[v] || null
           })
+          // 最后返回查找后的结果，即对应的权限枚举值（如果找到的话）或者 null（如果未找到）。
           return result
         }
       }
@@ -48,4 +81,6 @@ function plugin (Vue) {
   })
 }
 
+// 将定义好的 plugin 函数导出，方便在其他模块中引入使用，通常是在 Vue 应用的入口文件或者插件注册相关的代码中，
+// 通过 Vue.use(plugin) 的方式来注册这个插件，使其为 Vue 实例添加 $auth 和 $enum 等便捷的属性和功能。
 export default plugin
diff --git a/frontend/src/views/list/ExamDetail.vue b/frontend/src/views/list/ExamDetail.vue
index 0b6a5be..24055a6 100644
--- a/frontend/src/views/list/ExamDetail.vue
+++ b/frontend/src/views/list/ExamDetail.vue
@@ -1,20 +1,27 @@
 <template>
   <a-layout>
+    <!-- 页面布局的头部区域，设置了样式颜色为白色 -->
     <a-layout-header class="header" style="color: #fff">
-      <!--   v-if="examDetail.exam" 是为了防止 异步请求时页面渲染的时候还没有拿到这个值而报错， 下面多处这个判断都是这个道理 -->
+      <!-- v-if="examDetail.exam" 用于防止异步请求时页面渲染还没拿到 examDetail.exam 值而报错，以下多处类似判断同理 -->
       <span style="font-size:25px;margin-left: 0px;" v-if="examDetail.exam">
+        <!-- 使用 a-avatar 组件展示考试相关头像，通过管道过滤器 imgSrcFilter 处理图片地址，同时展示考试名称和描述 -->
         <a-avatar slot="avatar" size="large" shape="circle" :src="examDetail.exam.examAvatar | imgSrcFilter"/>
         {{ examDetail.exam.examName }}
         <span style="font-size:15px;">{{ examDetail.exam.examDescription }} </span>
       </span>
       <span style="float: right;">
+        <!-- 同样基于 examDetail.exam 存在的情况下，展示考试限时信息，此处为倒计时相关显示 -->
         <span style="margin-right: 60px; font-size: 20px" v-if="examDetail.exam">考试限时：{{ examDetail.exam.examTimeLimit }}分钟 这里是倒计时</span>
+        <!-- 点击“交卷”按钮触发 finishExam 方法 -->
         <a-button type="danger" ghost style="margin-right: 60px;" @click="finishExam()">交卷</a-button>
+        <!-- 展示用户头像 -->
         <a-avatar class="avatar" size="small" :src="avatar()"/>
+        <!-- 展示用户昵称 -->
         <span style="margin-left: 12px">{{ nickname() }}</span>
       </span>
     </a-layout-header>
     <a-layout>
+      <!-- 页面布局的侧边栏区域，设置了宽度、背景、滚动等样式属性 -->
       <a-layout-sider width="190" :style="{background: '#444',overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
         <a-menu
           mode="inline"
@@ -22,13 +29,18 @@
           :defaultOpenKeys="['question_radio', 'question_check', 'question_judge']"
           :style="{ height: '100%', borderRight: 0 }"
         >
+          <!-- 单选题菜单部分 -->
           <a-sub-menu key="question_radio">
+            <!-- 根据 examDetail.exam 存在与否展示菜单标题，包含图标和每题分值信息 -->
             <span slot="title" v-if="examDetail.exam"><a-icon type="check-circle" theme="twoTone"/>单选题(每题{{ examDetail.exam.examScoreRadio }}分)</span>
+            <!-- 循环渲染单选题菜单项，点击菜单项触发 getQuestionDetail 方法 -->
             <a-menu-item v-for="(item, index) in examDetail.radioIds" :key="item" @click="getQuestionDetail(item)">
+              <!-- 如果用户已经做过这道题（通过 answersMap 判断），则显示查看图标 -->
               <a-icon type="eye" theme="twoTone" twoToneColor="#52c41a" v-if="answersMap.get(item)"/>
               题目{{ index + 1 }}
             </a-menu-item>
           </a-sub-menu>
+          <!-- 多选题菜单部分，逻辑与单选题类似 -->
           <a-sub-menu key="question_check">
             <span slot="title" v-if="examDetail.exam"><a-icon type="check-square" theme="twoTone"/>多选题(每题{{ examDetail.exam.examScoreCheck }}分)</span>
             <a-menu-item v-for="(item, index) in examDetail.checkIds" :key="item" @click="getQuestionDetail(item)">
@@ -36,6 +48,7 @@
               题目{{ index + 1 }}
             </a-menu-item>
           </a-sub-menu>
+          <!-- 判断题菜单部分，逻辑与单选题类似 -->
           <a-sub-menu key="question_judge">
             <span slot="title" v-if="examDetail.exam"><a-icon type="like" theme="twoTone"/>判断题(每题{{ examDetail.exam.examScoreJudge }}分)</span>
             <a-menu-item v-for="(item, index) in examDetail.judgeIds" :key="item" @click="getQuestionDetail(item)">
@@ -48,16 +61,18 @@
       <a-layout :style="{ marginLeft: '200px' }">
         <a-layout-content :style="{ margin: '24px 16px 0',height: '84vh', overflow: 'initial' }">
           <div :style="{ padding: '24px', background: '#fff',height: '84vh'}">
+            <!-- 如果当前没有题目（currentQuestion为空），显示欢迎参加考试的提示语 -->
             <span v-show="currentQuestion === ''" style="font-size: 30px;font-family: Consolas">欢迎参加考试，请点击左侧题目编号开始答题</span>
+            <!-- 展示当前题目类型和题目名称（使用 v-html 渲染可能包含 HTML 标签的题目名称） -->
             <strong>{{ currentQuestion.type }} </strong> <p v-html="currentQuestion.name"></p>
-            <!-- 单选题和判断题 --> <!-- key不重复只需要在一个for循环中保证即可 -->
+            <!-- 单选题和判断题的选项组，通过 v-if 判断题目类型进行显示，绑定 change 事件 onRadioChange，使用 v-model 双向绑定单选或判断题的选择值 -->
             <a-radio-group @change="onRadioChange" v-model="radioValue" v-if="currentQuestion.type === '单选题' || currentQuestion.type === '判断题'">
               <a-radio v-for="option in currentQuestion.options" :key="option.questionOptionId" :style="optionStyle" :value="option.questionOptionId">
                 {{ option.questionOptionContent }}
               </a-radio>
             </a-radio-group>
 
-            <!-- 多选题 -->
+            <!-- 多选题的选项组，类似单选/判断题选项组逻辑，绑定 change 事件 onCheckChange，使用 v-model 双向绑定多选题的选择值 -->
             <a-checkbox-group @change="onCheckChange" v-model="checkValues" v-if="currentQuestion.type === '多选题'">
               <a-checkbox v-for="option in currentQuestion.options" :key="option.questionOptionId" :style="optionStyle" :value="option.questionOptionId">
                 {{ option.questionOptionContent }}
@@ -72,10 +87,12 @@
     </a-layout>
   </a-layout>
 </template>
-
 <script>
+// 从指定路径导入获取考试详情、获取题目详情、交卷相关的 API 函数
 import { getExamDetail, getQuestionDetail, finishExam } from '../../api/exam'
+// 导入用户菜单组件
 import UserMenu from '../../components/tools/UserMenu'
+// 导入 Vuex 的 mapGetters 辅助函数，用于获取 Vuex 中的计算属性
 import { mapGetters } from 'vuex'
 
 export default {
@@ -85,15 +102,15 @@ export default {
   },
   data () {
     return {
-      // 考试详情对象
+      // 用于存放考试详情信息的对象，初始为空
       examDetail: {},
-      // 用户做过的问题都放到这个数组中，键为问题id, 值为currentQuestion(其属性answers属性用于存放答案选项地id或ids),，用于存放用户勾选的答案
+      // 以 Map 结构存储用户做过的题目信息，键为题目id，值为包含答案等信息的 currentQuestion 对象（其 answers 属性存放答案选项id或ids）
       answersMap: {},
-      // 当前用户的问题
+      // 当前显示的题目信息对象，初始为空字符串
       currentQuestion: '',
-      // 单选或判断题的绑定值，用于从answersMap中初始化做题状态
+      // 单选或判断题的绑定值，用于从 answersMap 中初始化做题状态，初始为空
       radioValue: '',
-      // 多选题的绑定值，用于从answersMap中初始化做题状态
+      // 多选题的绑定值，用于从 answersMap 中初始化做题状态，初始为空数组
       checkValues: [],
       optionStyle: {
         display: 'block',
@@ -104,16 +121,18 @@ export default {
     }
   },
   mounted () {
+    // 在组件挂载时，初始化 answersMap 为一个新的 Map 对象
     this.answersMap = new Map()
     const that = this
-    // 从后端获取考试的详细信息，渲染到考试详情里
+    // 调用 getExamDetail 函数从后端获取考试详细信息，并根据返回结果进行处理
     getExamDetail(this.$route.params.id)
       .then(res => {
         if (res.code === 0) {
-          // 赋值考试对象
+          // 如果获取成功，将返回的考试详情数据赋值给 examDetail 对象
           that.examDetail = res.data
           return res.data
         } else {
+          // 如果获取失败，通过通知组件显示错误信息
           this.$notification.error({
             message: '获取考试详情失败',
             description: res.msg
@@ -122,31 +141,32 @@ export default {
       })
   },
   methods: {
-    // 从全局变量中获取用户昵称和头像,
+    // 使用 mapGetters 辅助函数从 Vuex 中获取用户昵称和头像相关的计算属性
     ...mapGetters(['nickname', 'avatar']),
     getQuestionDetail (questionId) {
-      // 问题切换时从后端拿到问题详情，渲染到前端content中
       const that = this
-      // 清空问题绑定的值
+      // 问题切换时，先清空单选和多选题的绑定值
       this.radioValue = ''
       this.checkValues = []
+      // 调用 getQuestionDetail 函数从后端获取指定题目id的题目详情信息，并根据返回结果进行处理
       getQuestionDetail(questionId)
         .then(res => {
           if (res.code === 0) {
-            // 赋值当前考试对象
+            // 如果获取成功，将返回的题目详情数据赋值给 currentQuestion 对象
             that.currentQuestion = res.data
-            // 查看用户是不是已经做过这道题又切换回来的，answersMap中查找，能找到这个题目id对应的值数组不为空说明用户做过这道题
+            // 检查用户是否之前做过这道题（通过 answersMap 判断）
             if (that.answersMap.get(that.currentQuestion.id)) {
-              // 说明之前做过这道题了
+              // 如果做过，根据题目类型初始化对应的绑定值（单选/判断题取第一个答案，多选题进行数组拷贝赋值）
               if (that.currentQuestion.type === '单选题' || that.currentQuestion.type === '判断题') {
                 that.radioValue = that.answersMap.get(that.currentQuestion.id)[0]
               } else if (that.currentQuestion.type === '多选题') {
-                // 数组是引用类型，因此需要进行拷贝，千万不要直接赋值
+                // 因为数组是引用类型，这里使用 Object.assign 进行拷贝，避免直接赋值带来的问题
                 Object.assign(that.checkValues, that.answersMap.get(that.currentQuestion.id))
               }
             }
             return res.data
           } else {
+            // 如果获取题目详情失败，通过通知组件显示错误信息
             this.$notification.error({
               message: '获取问题详情失败',
               description: res.msg
@@ -155,21 +175,21 @@ export default {
         })
     },
     /**
-     * 单选题勾选是触发的变化事件
-     * @param e
+     * 单选题勾选时触发的变化事件处理函数
+     * @param e 事件对象，包含选中的选项值等信息
      */
     onRadioChange (e) {
       const userOptions = []
       userOptions.push(e.target.value)
-      // 更新做题者选择的答案
+      // 将用户选择的答案更新到 answersMap 中，键为当前题目id，值为包含答案选项id的数组
       this.answersMap.set(this.currentQuestion.id, userOptions)
     },
     /**
-     * 多选题触发的变化事件
-     * @param checkedValues
+     * 多选题触发的变化事件处理函数
+     * @param checkedValues 选中的选项值数组
      */
     onCheckChange (checkedValues) {
-      // 更新做题者选择的答案
+      // 将用户选择的多选题答案更新到 answersMap 中，键为当前题目id，值为选中的选项值数组
       this.answersMap.set(this.currentQuestion.id, checkedValues)
     },
     _strMapToObj (strMap) {
@@ -180,26 +200,27 @@ export default {
       return obj
     },
     /**
-     *map转换为json
+     * 将 Map 对象转换为 JSON 字符串的函数
      */
     _mapToJson (map) {
       return JSON.stringify(this._strMapToObj(map))
     },
     /**
-     * 结束考试并交卷
+     * 结束考试并交卷的函数
      */
     finishExam () {
-      // Todo:向后端提交作答信息数组answersMap
+      // Todo: 此处应该向后端提交作答信息数组 answersMap（目前只是调用了函数，具体提交逻辑可能还需完善）
       finishExam(this.$route.params.id, this._mapToJson(this.answersMap))
         .then(res => {
           if (res.code === 0) {
-            // 考试交卷，后端判分完成，然后跳转到我的考试界面
+            // 如果交卷成功，通过通知组件显示成功信息，并跳转到我的考试记录列表页面
             this.$notification.success({
               message: '考卷提交成功！'
             })
             this.$router.push('/list/exam-record-list')
             return res.data
           } else {
+            // 如果交卷失败，通过通知组件显示失败信息
             this.$notification.error({
               message: '交卷失败！',
               description: res.msg
diff --git a/frontend/src/views/list/ExamRecordDetail.vue b/frontend/src/views/list/ExamRecordDetail.vue
index 03cc39e..3d51c0e 100644
--- a/frontend/src/views/list/ExamRecordDetail.vue
+++ b/frontend/src/views/list/ExamRecordDetail.vue
@@ -1,22 +1,28 @@
 <template>
   <a-layout>
+    <!-- 页面布局的头部区域，设置文字颜色为白色 -->
     <a-layout-header class="header" style="color: #fff">
-      <!--   v-if="examDetail.exam" 是为了防止 异步请求时页面渲染的时候还没有拿到这个值而报错， 下面多处这个判断都是这个道理 -->
+      <!-- v-if="examDetail.exam" 用于防止异步请求时页面渲染还没拿到 examDetail.exam 值而报错，下面多处类似判断同理 -->
       <span style="font-size:25px;margin-left: 0px;" v-if="examDetail.exam">
+        <!-- 使用 a-avatar 组件展示考试相关头像，通过管道过滤器 imgSrcFilter 处理图片地址，同时展示考试名称和描述 -->
         <a-avatar slot="avatar" size="large" shape="circle" :src="examDetail.exam.examAvatar | imgSrcFilter"/>
         {{ examDetail.exam.examName }}
         <span style="font-size:15px;">{{ examDetail.exam.examDescription }} </span>
       </span>
       <span style="float: right;">
+        <!-- 根据 recordDetail.examRecord 存在与否，展示考试得分和参加考试时间信息 -->
         <span style="margin-right: 40px; font-size: 20px" v-if="recordDetail.examRecord">
           考试得分：<span style="color: red">{{ recordDetail.examRecord.examJoinScore }}</span>&nbsp;分&nbsp;
           <span style="font-size:15px;">参加考试时间：{{ recordDetail.examRecord.examJoinDate }}</span>
         </span>
+        <!-- 展示用户头像 -->
         <a-avatar class="avatar" size="small" :src="avatar()"/>
+        <!-- 展示用户昵称 -->
         <span style="margin-left: 12px">{{ nickname() }}</span>
       </span>
     </a-layout-header>
     <a-layout>
+      <!-- 页面布局的侧边栏区域，设置了宽度、背景、滚动等样式属性 -->
       <a-layout-sider width="190" :style="{background: '#444',overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
         <a-menu
           mode="inline"
@@ -24,14 +30,18 @@
           :defaultOpenKeys="['question_radio', 'question_check', 'question_judge']"
           :style="{ height: '100%', borderRight: 0 }"
         >
+          <!-- 单选题菜单部分 -->
           <a-sub-menu key="question_radio">
+            <!-- 根据 examDetail.exam 存在与否展示菜单标题，包含图标和每题分值信息 -->
             <span slot="title" v-if="examDetail.exam"><a-icon type="check-circle" theme="twoTone"/>单选题(每题{{ examDetail.exam.examScoreRadio }}分)</span>
+            <!-- 循环渲染单选题菜单项，点击菜单项触发 getQuestionDetail 方法，根据 resultsMap 中对应题目结果显示正确或错误图标 -->
             <a-menu-item v-for="(item, index) in examDetail.radioIds" :key="item" @click="getQuestionDetail(item)">
               <a-icon type="check" v-if="resultsMap.get(item)==='True'"/>
               <a-icon type="close" v-if="resultsMap.get(item)==='False'"/>
               题目{{ index + 1 }}
             </a-menu-item>
           </a-sub-menu>
+          <!-- 多选题菜单部分，逻辑与单选题类似 -->
           <a-sub-menu key="question_check">
             <span slot="title" v-if="examDetail.exam"><a-icon type="check-square" theme="twoTone"/>多选题(每题{{ examDetail.exam.examScoreCheck }}分)</span>
             <a-menu-item v-for="(item, index) in examDetail.checkIds" :key="item" @click="getQuestionDetail(item)">
@@ -40,6 +50,7 @@
               题目{{ index + 1 }}
             </a-menu-item>
           </a-sub-menu>
+          <!-- 判断题菜单部分，逻辑与单选题类似 -->
           <a-sub-menu key="question_judge">
             <span slot="title" v-if="examDetail.exam"><a-icon type="like" theme="twoTone"/>判断题(每题{{ examDetail.exam.examScoreJudge }}分)</span>
             <a-menu-item v-for="(item, index) in examDetail.judgeIds" :key="item" @click="getQuestionDetail(item)">
@@ -53,21 +64,24 @@
       <a-layout :style="{ marginLeft: '200px' }">
         <a-layout-content :style="{ margin: '24px 16px 0',height: '84vh', overflow: 'initial' }">
           <div :style="{ padding: '24px', background: '#fff',height: '84vh'}">
+            <!-- 如果当前没有题目（currentQuestion 为空），显示欢迎查看考试情况及操作提示语 -->
             <span v-if="currentQuestion === ''" style="font-size: 30px;font-family: Consolas">欢迎查看本次考试情况，点击左侧题目编号可以查看答题详情</span>
-            <span v-if="currentQuestion !== ''">
+            <span v-if="currentQuestion!== ''">
+              <!-- 展示当前题目类型和题目名称（使用 v-html 渲染可能包含 HTML 标签的题目名称） -->
               <strong>{{ currentQuestion.type }} </strong> <p v-html="currentQuestion.name"></p>
+              <!-- 根据 questionRight 计算属性判断当前题目用户是否答对，显示相应提示信息 -->
               <strong style="color: green;" v-if="questionRight">本题您答对啦！</strong>
               <strong style="color: red;" v-if="!questionRight">本题您答错啦！</strong>
             </span>
             <br><br>
-            <!-- 单选题和判断题 --> <!-- key不重复只需要在一个for循环中保证即可 -->
+            <!-- 单选题和判断题的选项组，通过 v-model 双向绑定选择值，根据题目类型进行显示 -->
             <a-radio-group v-model="radioValue" v-if="currentQuestion.type === '单选题' || currentQuestion.type === '判断题'">
               <a-radio v-for="option in currentQuestion.options" :key="option.questionOptionId" :style="optionStyle" :value="option.questionOptionId">
                 {{ option.questionOptionContent }}
               </a-radio>
             </a-radio-group>
 
-            <!-- 题目出错的时候才显示这块 -->
+            <!-- 当题目答错且当前题目不为空且为单选题或判断题时，显示正确答案的选项组 -->
             <div v-if="!questionRight && currentQuestion!=='' && (currentQuestion.type === '单选题' || currentQuestion.type === '判断题')">
               <span style="color: red;"><br/>正确答案是：<br/></span>
               <a-radio-group v-model="radioRightValue">
@@ -77,14 +91,14 @@
               </a-radio-group>
             </div>
 
-            <!-- 多选题 -->
+            <!-- 多选题的选项组，通过 v-model 双向绑定选择值，根据题目类型进行显示 -->
             <a-checkbox-group v-model="checkValues" v-if="currentQuestion.type === '多选题'">
               <a-checkbox v-for="option in currentQuestion.options" :key="option.questionOptionId" :style="optionStyle" :value="option.questionOptionId">
                 {{ option.questionOptionContent }}
               </a-checkbox>
             </a-checkbox-group>
 
-            <!-- 题目出错的时候才显示这块 -->
+            <!-- 当题目答错且当前题目不为空且为多选题时，显示正确答案的选项组 -->
             <div v-if="!questionRight && currentQuestion!=='' && currentQuestion.type === '多选题'">
               <span style="color: red;"><br/>正确答案是：<br/></span>
               <a-checkbox-group v-model="checkRightValues">
@@ -105,10 +119,12 @@
     </a-layout>
   </a-layout>
 </template>
-
 <script>
+// 从指定路径导入获取考试详情、获取题目详情、获取考试记录详情相关的 API 函数
 import { getExamDetail, getQuestionDetail, getExamRecordDetail } from '../../api/exam'
+// 导入用户菜单组件
 import UserMenu from '../../components/tools/UserMenu'
+// 导入 Vuex 的 mapGetters 辅助函数，用于获取 Vuex 中的计算属性
 import { mapGetters } from 'vuex'
 
 export default {
@@ -118,25 +134,25 @@ export default {
   },
   data () {
     return {
-      // 考试详情对象
+      // 用于存放考试详情信息的对象，初始为空
       examDetail: {},
-      // 考试记录详情对象
+      // 用于存放考试记录详情信息的对象，初始为空
       recordDetail: {},
-      // 用户做过的问题都放到这个数组中，键为问题id, 值为currentQuestion(其属性answers属性用于存放答案选项地id或ids),，用于存放用户勾选的答案
+      // 以 Map 结构存储用户做过的题目信息，键为题目id，值为包含答案等信息的 currentQuestion 对象（其 answers 属性存放答案选项id或ids）
       answersMap: {},
-      // 题目的正确答案
+      // 以 Map 结构存储题目正确答案信息，键为题目id，对应的值为正确答案相关内容
       answersRightMap: {},
-      // 题目的作答结果(正确或错误)
+      // 以 Map 结构存储题目作答结果信息（如 'True' 表示正确，'False' 表示错误），键为题目id，对应的值为作答结果
       resultsMap: {},
-      // 当前用户的问题
+      // 当前显示的题目信息对象，初始为空字符串
       currentQuestion: '',
-      // 单选或判断题的绑定值，用于从answersMap中初始化做题状态
+      // 单选或判断题的绑定值，用于从 answersMap 中初始化做题状态，初始为空
       radioValue: '',
-      // 单选题的正确答案，用于从answersRightMap中初始化做题状态
+      // 单选题的正确答案绑定值，用于从 answersRightMap 中初始化正确答案状态，初始为空
       radioRightValue: '',
-      // 多选题的绑定值，用于从answersMap中初始化做题状态
+      // 多选题的绑定值，用于从 answersMap 中初始化做题状态，初始为空数组
       checkValues: [],
-      // 多选题的绑定值，用于从answersRightMap中初始化做题状态
+      // 多选题的正确答案绑定值，用于从 answersRightMap 中初始化正确答案状态，初始为空数组
       checkRightValues: [],
       optionStyle: {
         display: 'block',
@@ -148,42 +164,44 @@ export default {
   },
   computed: {
     /**
-     * 当前题目用户是否作答正确
-     * */
+     * 计算属性，用于判断当前题目用户是否作答正确，通过对比 resultsMap 中对应题目结果是否为 'True' 来确定
+     */
     questionRight () {
-      return this.resultsMap !== '' && this.resultsMap.get(this.currentQuestion.id) === 'True'
+      return this.resultsMap!== '' && this.resultsMap.get(this.currentQuestion.id) === 'True'
     }
   },
   mounted () {
+    // 在组件挂载时，初始化 answersMap、answersRightMap、resultsMap 为新的 Map 对象
     this.answersMap = new Map()
     this.answersRightMap = new Map()
     this.resultsMap = new Map()
-    const that = this
-    // 从后端获取考试的详细信息，渲染到考试详情里,需要加个延时，要不拿不到参数
+    const that = this;
+    // 调用 getExamDetail 函数从后端获取考试详细信息，并根据返回结果进行处理，此处提到需加延时（可能实际代码中还需补充相关逻辑）
     getExamDetail(this.$route.params.exam_id)
       .then(res => {
         if (res.code === 0) {
-          // 赋值考试对象
+          // 如果获取成功，将返回的考试详情数据赋值给 examDetail 对象
           that.examDetail = res.data
           return res.data
         } else {
+          // 如果获取失败，通过通知组件显示错误信息
           this.$notification.error({
             message: '获取考试详情失败',
             description: res.msg
           })
         }
       })
-    // 查看考试记录详情，渲染到前端界面
+    // 调用 getExamRecordDetail 函数从后端获取考试记录详情信息，并根据返回结果进行处理
     getExamRecordDetail(this.$route.params.record_id)
       .then(res => {
         if (res.code === 0) {
-          console.log(res.data)
-          // 赋值考试对象
-          that.recordDetail = res.data
-          // 赋值用户的作答答案
-          that.objToMap()
-          return res.data
+          console.log(res.data);
+          // 如果获取成功，将返回的考试记录详情数据赋值给 recordDetail 对象，并调用 objToMap 方法处理相关数据
+          that.recordDetail = res.data;
+          that.objToMap();
+          return res.data;
         } else {
+          // 如果获取失败，通过通知组件显示错误信息
           this.$notification.error({
             message: '获取考试记录详情失败',
             description: res.msg
@@ -192,51 +210,52 @@ export default {
       })
   },
   methods: {
-    // 从全局变量中获取用户昵称和头像,
+    // 使用 mapGetters 辅助函数从 Vuex 中获取用户昵称和头像相关的计算属性
     ...mapGetters(['nickname', 'avatar']),
     /**
-     * 把后端传过来的对象Object转换成Map
-     **/
+     * 方法用于将后端传过来的对象数据转换为 Map 结构，分别处理 answersMap、answersRightMap、resultsMap 的赋值
+     */
     objToMap () {
       for (const item in this.recordDetail.answersMap) {
-        this.answersMap.set(item, this.recordDetail.answersMap[item])
+        this.answersMap.set(item, this.recordDetail.answersMap[item]);
       }
 
       for (const item in this.recordDetail.answersRightMap) {
-        this.answersRightMap.set(item, this.recordDetail.answersRightMap[item])
+        this.answersRightMap.set(item, this.recordDetail.answersRightMap[item]);
       }
 
       for (const item in this.recordDetail.resultsMap) {
-        this.resultsMap.set(item, this.recordDetail.resultsMap[item])
+        this.resultsMap.set(item, this.recordDetail.resultsMap[item]);
       }
     },
     getQuestionDetail (questionId) {
-      // 问题切换时从后端拿到问题详情，渲染到前端content中
-      const that = this
-      // 清空问题绑定的值
-      this.radioValue = ''
-      this.radioRightValue = ''
-      this.checkValues = []
-      this.checkRightValues = []
+      const that = this;
+      // 问题切换时，先清空单选、单选题正确答案、多选、多选题正确答案的绑定值
+      this.radioValue = '';
+      this.radioRightValue = '';
+      this.checkValues = [];
+      this.checkRightValues = [];
+      // 调用 getQuestionDetail 函数从后端获取指定题目id的题目详情信息，并根据返回结果进行处理
       getQuestionDetail(questionId)
         .then(res => {
           if (res.code === 0) {
-            // 赋值当前考试对象
-            that.currentQuestion = res.data
-            // 查看用户是不是已经做过这道题又切换回来的，answersMap中查找，能找到这个题目id对应的值数组不为空说明用户做过这道题
+            // 如果获取成功，将返回的题目详情数据赋值给 currentQuestion 对象
+            that.currentQuestion = res.data;
+            // 检查用户是否之前做过这道题（通过 answersMap 判断）
             if (that.answersMap.get(that.currentQuestion.id)) {
-              // 说明之前做过这道题了
+              // 如果做过，根据题目类型初始化对应的绑定值（单选/判断题取对应答案，多选题进行数组拷贝赋值）
               if (that.currentQuestion.type === '单选题' || that.currentQuestion.type === '判断题') {
-                that.radioValue = that.answersMap.get(that.currentQuestion.id)[0]
-                that.radioRightValue = that.answersRightMap.get(that.currentQuestion.id)[0]
+                that.radioValue = that.answersMap.get(that.currentQuestion.id)[0];
+                that.radioRightValue = that.answersRightMap.get(that.currentQuestion.id)[0];
               } else if (that.currentQuestion.type === '多选题') {
-                // 数组是引用类型，因此需要进行拷贝，千万不要直接赋值
-                Object.assign(that.checkValues, that.answersMap.get(that.currentQuestion.id))
-                Object.assign(that.checkRightValues, that.answersRightMap.get(that.currentQuestion.id))
+                // 因为数组是引用类型，这里使用 Object.assign 进行拷贝，避免直接赋值带来的问题
+                Object.assign(that.checkValues, that.answersMap.get(that.currentQuestion.id));
+                Object.assign(that.checkRightValues, that.answersRightMap.get(that.currentQuestion.id));
               }
             }
-            return res.data
+            return res.data;
           } else {
+            // 如果获取题目详情失败，通过通知组件显示错误信息
             this.$notification.error({
               message: '获取问题详情失败',
               description: res.msg
diff --git a/frontend/src/views/list/ExamRecordList.vue b/frontend/src/views/list/ExamRecordList.vue
index ce0bf70..f5b6e39 100644
--- a/frontend/src/views/list/ExamRecordList.vue
+++ b/frontend/src/views/list/ExamRecordList.vue
@@ -1,18 +1,27 @@
 <template>
   <div>
+    <!-- 使用 a-card 组件创建一个卡片式布局，设置了上边距并且无边框，标题为“参加过的考试” -->
     <a-card style="margin-top: 24px" :bordered="false" title="参加过的考试">
+      <!-- 在卡片的额外插槽（通常用于放置一些操作按钮等元素）中添加一个输入搜索框 -->
       <div slot="extra">
         <a-input-search style="margin-left: 16px; width: 272px;"/>
       </div>
+      <!-- 使用 a-list 组件创建一个列表，设置了较大的尺寸 -->
       <a-list size="large">
+        <!-- 循环遍历 data 数组中的每个元素（代表每条考试记录信息）来生成列表项，每个列表项对应一次考试记录 -->
         <a-list-item :key="index" v-for="(item, index) in data">
+          <!-- 使用 a-list-item-meta 组件来展示列表项的元信息，如头像、标题、描述等 -->
           <a-list-item-meta :description="item.exam.examDescription">
+            <!-- 在头像插槽中使用 a-avatar 组件展示考试相关的头像，通过管道过滤器 imgSrcFilter 处理图片地址，设置了较大尺寸和方形形状 -->
             <a-avatar slot="avatar" size="large" shape="square" :src="item.exam.examAvatar | imgSrcFilter"/>
+            <!-- 在标题插槽中展示考试名称 -->
             <a slot="title">{{ item.exam.examName }}</a>
           </a-list-item-meta>
+          <!-- 在操作插槽中添加一个“查看考试详情”的链接，点击时会触发 viewExamRecordDetail 方法并传入对应的考试记录信息 -->
           <div slot="actions">
             <a @click="viewExamRecordDetail(item.examRecord)">查看考试详情</a>
           </div>
+          <!-- 自定义的列表内容区域，用于展示更多考试记录相关详细信息 -->
           <div class="list-content">
             <div class="list-content-item">
               <span>Owner</span>
@@ -29,53 +38,57 @@
           </div>
         </a-list-item>
       </a-list>
-
     </a-card>
   </div>
 </template>
 
 <script>
+// 导入 HeadInfo 组件，可能是用于展示页面头部相关信息的组件（具体功能需看组件内部实现）
 import HeadInfo from '../../components/tools/HeadInfo'
+// 从指定路径导入获取考试记录列表的 API 函数
 import { getExamRecordList } from '../../api/exam'
 
 export default {
-  // 考试记录列表，记录考生参加过地所有考试和考试成绩
+  // 组件名称为 'ExamRecordList'，用于展示考生参加过的所有考试及对应的考试成绩等记录信息
   name: 'ExamRecordList',
   components: {
     HeadInfo
   },
   data () {
     return {
+      // data 属性用于存放从后端获取的考试记录数据，初始为空对象，后续会被赋值为实际的数组数据
       data: {}
     }
   },
   methods: {
     /**
-     * 根据考试记录的id拿到本次考试的详情并查看
-     * @param record 考试详情的记录
+     * 方法用于根据传入的考试记录信息，跳转到对应的考试详情页面查看所有题目的详细情况
+     * @param record 考试详情的记录对象，包含了如考试id、考试记录id等关键信息，用于构建跳转路径
      */
     viewExamRecordDetail (record) {
-      // 直接跳到参加考试的页面，查看所有题目的详细情况
+      // 使用 $router.resolve 方法解析出一个路由对象，指定要跳转到的路径，路径中包含了从考试记录中获取的考试id和考试记录id，用于定位到具体的考试详情页面
       const routeUrl = this.$router.resolve({
         path: `/exam/record/${record.examId}/${record.examRecordId}`
       })
-      // 和点击考试卡片效果一样，跳转到考试页面，里面有所有题目的情况，相当于就是详情了
+      // 通过 window.open 方法在新标签页中打开解析好的路由链接，实现查看考试详情的功能，效果等同于点击考试卡片进行查看
       window.open(routeUrl.href, '_blank')
     }
   },
   mounted () {
-    // 从后端数据获取考试列表，适配前端卡片
+    // 在组件挂载完成后，调用 getExamRecordList 函数从后端获取考试记录列表数据，并根据返回结果进行相应处理
     getExamRecordList().then(res => {
       if (res.code === 0) {
+        // 如果获取数据成功（返回码为 0 表示成功），将获取到的数据赋值给 data 属性，用于在模板中进行渲染展示
         this.data = res.data
       } else {
+        // 如果获取数据失败，通过通知组件显示错误信息，提示“获取考试记录失败”以及具体的失败原因（从返回的 msg 属性获取）
         this.$notification.error({
           message: '获取考试记录失败',
           description: res.msg
         })
       }
     }).catch(err => {
-      // 失败就弹出警告消息
+      // 如果在获取数据过程中出现异常（例如网络错误等），同样通过通知组件显示错误信息，提示“获取考试记录失败”以及异常的具体消息内容
       this.$notification.error({
         message: '获取考试记录失败',
         description: err.message
@@ -86,27 +99,41 @@ export default {
 </script>
 
 <style lang="less" scoped>
-  .ant-avatar-lg {
-    width: 48px;
-    height: 48px;
-    line-height: 48px;
-  }
+/* 针对类名为 ant-avatar-lg 的元素设置样式，通常这个类可能是来自某个 UI 组件库（比如 Ant Design）中定义的大尺寸头像相关的类 */
+.ant-avatar-lg {
+  /* 设置元素的宽度为 48 像素，用于控制头像在页面上显示的横向尺寸大小 */
+  width: 48px;
+  /* 设置元素的高度为 48 像素，配合宽度一起确定头像的整体尺寸外观 */
+  height: 48px;
+  /* 设置元素内部文本的行高为 48 像素，行高与元素高度相等时，文本在垂直方向上能实现居中对齐效果（前提是文本的其他布局相关属性设置合适），常用于让头像中的文字（如果有）垂直居中显示 */
+  line-height: 48px;
+}
 
-  .list-content-item {
-    color: rgba(0, 0, 0, .45);
-    display: inline-block;
-    vertical-align: middle;
-    font-size: 14px;
-    margin-left: 40px;
+/* 针对类名为 list-content-item 的元素设置样式，从命名来看可能是用于自定义的列表内容项相关的样式类 */
+.list-content-item {
+  /* 设置元素的文本颜色为 rgba 格式表示的颜色值，这里是带有 45% 透明度的黑色，使得文本颜色看起来相对淡一些，呈现出一种弱化显示的视觉效果，常用于次要信息的展示等场景 */
+  color: rgba(0, 0, 0,.45);
+  /* 将元素设置为行内块级元素显示方式，行内块级元素兼具了行内元素（可以和其他行内元素在同一行显示）和块级元素（可以设置宽、高、内外边距等盒模型属性）的特点，方便对列表内容项进行布局排版以及尺寸控制等操作 */
+  display: inline-block;
+  /* 设置元素在垂直方向上与同属一行的其他元素进行居中对齐，确保列表内容项在垂直方向上排列整齐，视觉上更加美观协调 */
+  vertical-align: middle;
+  /* 设置元素内文本的字体大小为 14 像素，确定文本的字号大小 */
+  font-size: 14px;
+  /* 设置元素的左边距为 40 像素，让列表内容项与左侧的其他元素或者其他列表内容项之间保持一定的间隔距离，增强视觉层次感和区分度 */
+  margin-left: 40px;
 
-    span {
-      line-height: 20px;
-    }
+  span {
+    /* 针对类名为 list-content-item 的元素内部的 <span> 标签元素设置行高为 20 像素，用于控制 <span> 标签内文本在垂直方向上的间距等显示效果，使其与父元素（.list-content-item）中其他文本的显示风格有所区分或者更符合特定的布局需求 */
+    line-height: 20px;
+  }
 
-    p {
-      margin-top: 4px;
-      margin-bottom: 0;
-      line-height: 22px;
-    }
+  p {
+    /* 设置 <p> 段落元素的顶部外边距为 4 像素，使得段落与上方的元素之间产生一定的空白间隔，避免文本过于紧凑，提升可读性和视觉效果 */
+    margin-top: 4px;
+    /* 清除 <p> 段落元素底部的外边距，防止出现多余的空白间距，保证后续元素（如果有）能按照预期紧密排列或者与其他元素的间距符合设计要求 */
+    margin-bottom: 0;
+    /* 设置 <p> 段落元素内部文本的行高为 22 像素，用于控制段落文本在垂直方向上的排版效果，合适的行高有助于提高文本的阅读舒适度和整体美观度 */
+    line-height: 22px;
   }
-</style>
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/list/ExamTableList.vue b/frontend/src/views/list/ExamTableList.vue
index 5c22919..9dfdea0 100644
--- a/frontend/src/views/list/ExamTableList.vue
+++ b/frontend/src/views/list/ExamTableList.vue
@@ -1,29 +1,39 @@
 <template>
+  <!-- 使用 a-card 组件创建一个卡片式布局，设置无边框样式 -->
   <a-card :bordered="false">
+    <!-- 创建一个具有 id 为 "toolbar" 的 div 容器，用于放置操作按钮，作为工具条区域 -->
     <div id="toolbar">
+      <!-- 创建一个 "新建" 按钮，按钮类型为 "primary"（通常表示主要操作按钮的样式），带有 "plus" 图标，点击按钮时调用 $refs.createExamModal.create() 方法，可能用于触发创建新考试相关的操作 -->
       <a-button type="primary" icon="plus" @click="$refs.createExamModal.create()">新建</a-button>&nbsp;
+      <!-- 创建一个 "刷新" 按钮，按钮类型为 "primary"，带有 "reload" 图标，点击按钮时调用 loadAll() 方法，用于重新加载数据 -->
       <a-button type="primary" icon="reload" @click="loadAll()">刷新</a-button>
     </div>
+    <!-- 使用 BootstrapTable 组件（可能是基于 Bootstrap 样式的表格组件，具体功能依赖其自身实现），通过 ref 属性给组件实例添加引用标识，方便后续在 JavaScript 代码中通过 this.$refs 进行访问，同时传入表头、数据和相关配置选项等属性 -->
     <BootstrapTable
       ref="table"
       :columns="columns"
       :data="tableData"
       :options="options"
     />
-    <!-- ref是为了方便用this.$refs.modal直接引用，下同 -->
+    <!-- 使用 step-by-step-exam-modal 组件（自定义模态框组件，用于逐步创建考试相关操作，具体功能由该组件内部定义），同样通过 ref 属性添加引用标识，并且监听该组件的 @ok 事件，当事件触发时调用 handleOk 方法 -->
     <step-by-step-exam-modal ref="createExamModal" @ok="handleOk" />
-    <!-- 这里的详情需要传进去  -->
+    <!-- 使用 exam-edit-modal 组件（自定义模态框组件，用于编辑考试相关信息，具体功能由组件内部定义），通过 ref 属性添加引用标识，监听 @ok 事件并在触发时调用 handleOk 方法，这里编辑考试详情时可能需要传入相关数据进行处理 -->
     <exam-edit-modal ref="editExamModal" @ok="handleOk" />
-    <!--  更新考试封面图片  -->
+    <!-- 使用 update-avatar-modal 组件（自定义模态框组件，用于更新考试封面图片相关操作，具体功能由组件内部定义），通过 ref 属性添加引用标识，监听 @ok 事件并在触发时调用 handleOk 方法 -->
     <update-avatar-modal ref="updateAvatarModal" @ok="handleOk" />
   </a-card>
 </template>
 
 <script>
+// 导入 bootstrap-table 相关插件，可能用于增强表格功能（具体依赖插件本身实现）
 import '../../plugins/bootstrap-table'
+// 从指定路径导入获取所有考试信息的 API 函数
 import { getExamAll } from '../../api/exam'
+// 导入 StepByStepExamModal 组件，可能用于逐步创建考试的模态框组件（具体功能看组件内部代码）
 import StepByStepExamModal from './modules/StepByStepExamModal'
+// 导入 ExamEditModal 组件，用于编辑考试信息的模态框组件（内部实现编辑相关逻辑）
 import ExamEditModal from './modules/ExamEditModal'
+// 导入 UpdateAvatarModal 组件，用于更新考试封面图片的模态框组件（实现图片更新相关操作逻辑）
 import UpdateAvatarModal from '@views/list/modules/UpdateAvatarModal'
 
 export default {
@@ -34,27 +44,32 @@ export default {
     StepByStepExamModal
   },
   data () {
-    const that = this // 方便在bootstrap-table中引用methods
+    const that = this; // 保存当前组件实例的引用，方便在一些回调函数（如 bootstrap-table 的相关函数）中引用组件的其他方法
     return {
-      // 表头
+      // 定义表格的表头配置数组，每个对象表示一列的相关配置信息
       columns: [
         {
+          // 列标题显示为 "序号"
           title: '序号',
+          // 对应表格数据中的字段名（用于获取数据来填充该列单元格）
           field: 'serial',
+          // 定义单元格内容的格式化函数，这里返回索引加 1，意味着每一页表格都会从 1 开始重新编号显示序号（不是全局连续序号）
           formatter: function (value, row, index) {
-            return index + 1 // 这样的话每翻一页都会重新从1开始，
+            return index + 1;
           }
         },
         {
           title: '封面',
           field: 'avatar',
           width: 50,
+          // 定义单元格内容的格式化函数，将传入的 value 值（对应表格数据中该字段的值）包裹在一个带有 "exam-avatar" 类名的 div 中返回，可能用于后续对封面图片等相关元素进行样式处理或绑定事件
           formatter: (value, row) => {
-            return '<div class="exam-avatar">' + value + '</div>'
+            return '<div class="exam-avatar">' + value + '</div>';
           },
           events: {
-            'click .exam-avatar': function (e, value, row, index) {
-              that.handleAvatarEdit(row)
+            // 给带有 "exam-avatar" 类名的元素绑定点击事件，当点击时调用 that.handleAvatarEdit(row) 方法，可能用于处理更新考试封面图片等相关操作，row 参数表示当前点击行的数据对象
+            'click.exam-avatar': function (e, value, row, index) {
+              that.handleAvatarEdit(row);
             }
           }
         },
@@ -83,33 +98,43 @@ export default {
           title: '操作',
           field: 'action',
           width: '150px',
+          // 定义单元格内容的格式化函数，返回包含 "详情" 和 "编辑" 两个按钮的 HTML 字符串，用于在表格中显示操作按钮，后续通过绑定事件来实现相应的功能
           formatter: (value, row) => {
             return '<button type="button" class="btn btn-success view-exam">详情</button>' +
               '&nbsp;&nbsp;' +
-              '<button type="button" class="btn btn-success edit-exam">编辑</button>'
+              '<button type="button" class="btn btn-success edit-exam">编辑</button>';
           },
           events: {
-            'click .view-exam': function (e, value, row, index) {
-              that.handleSub(row)
+            // 给带有 "view-exam" 类名的按钮绑定点击事件，点击时调用 that.handleSub(row) 方法，可能用于跳转到考试详情页面查看相关信息，row 为当前行数据对象
+            'click.view-exam': function (e, value, row, index) {
+              that.handleSub(row);
             },
-            'click .edit-exam': function (e, value, row, index) {
-              that.handleEdit(row)
+            // 给带有 "edit-exam" 类名的按钮绑定点击事件，点击时调用 that.handleEdit(row) 方法，用于触发编辑考试信息相关操作，row 为当前行数据对象
+            'click.edit-exam': function (e, value, row, index) {
+              that.handleEdit(row);
             }
           }
         }
       ],
-      tableData: [], // bootstrap-table的数据
-      // custom bootstrap-table
+      // 用于存放 bootstrap-table 组件要展示的数据，初始为空数组，后续会从后端获取并赋值
+      tableData: [],
+      // 自定义 bootstrap-table 的配置选项对象
       options: {
+        // 开启搜索功能，允许用户在表格中进行数据搜索
         search: true,
+        // 开启显示/隐藏列功能，用户可以选择性地显示或隐藏表格的某些列
         showColumns: true,
+        // 开启导出功能，可能支持将表格数据导出为其他格式（如 Excel 等，具体依赖组件实现）
         showExport: true,
+        // 开启分页功能，将数据分页展示，提升页面性能和用户查看体验
         pagination: true,
+        // 指定表格工具条对应的 HTML 元素的 id，这里关联到前面定义的 id 为 "toolbar" 的 div，用于将操作按钮等放置在表格上方合适位置
         toolbar: '#toolbar',
-        // 下面两行是支持高级搜索，即按照字段搜索
+        // 开启高级搜索功能，允许按照特定字段进行更精确的搜索操作（具体实现依赖组件对该功能的支持）
         advancedSearch: true,
-        idTable: 'advancedTable'
-        // 下面是常用的事件，更多的点击事件可以参考：http://www.itxst.com/bootstrap-table-events/tutorial.html
+        // 为高级搜索相关功能指定一个表格的唯一标识，可能用于区分不同表格的高级搜索状态等（具体看组件内部对该属性的使用）
+        idTable: 'advancedTable',
+        // 以下是一些常用的事件绑定示例，目前被注释掉了，可以根据实际需求取消注释来使用，更多详细的点击事件可以参考相关文档链接
         // onClickRow: that.clickRow,
         // onClickCell: that.clickCell, // 单元格单击事件
         // onDblClickCell: that.dblClickCell // 单元格双击事件
@@ -117,50 +142,55 @@ export default {
     }
   },
   mounted () {
-    this.loadAll() // 加载所有问题的数据
+    // 在组件挂载完成后，调用 loadAll() 方法，用于从后端获取所有考试数据并加载到表格中进行展示
+    this.loadAll();
   },
   methods: {
     handleEdit (record) {
-      // Todo:修改考试信息和下面的题目，弹出一个可修改的输入框，实际上复用创建题目的模态框即可，还没做完
-      console.log('开始编辑啦')
-      console.log(record)
-      this.$refs.editExamModal.edit(record)
+      // Todo: 此处计划实现修改考试信息以及相关题目的功能，目前只是打印调试信息，实际复用创建题目的模态框来实现编辑功能，但还未完成具体代码编写
+      console.log('开始编辑啦');
+      console.log(record);
+      this.$refs.editExamModal.edit(record);
     },
     handleAvatarEdit (record) {
-      // Todo:修改考试信息和下面的题目，弹出一个可修改的输入框，实际上复用创建题目的模态框即可，还没做完
-      console.log('开始更新封面啦')
-      console.log(record)
-      this.$refs.updateAvatarModal.edit(record)
+      // Todo: 此处计划实现修改考试信息（主要针对封面图片相关）以及相关题目的功能，目前只是打印调试信息，实际复用创建题目的模态框来实现编辑功能，但还未完成具体代码编写
+      console.log('开始更新封面啦');
+      console.log(record);
+      this.$refs.updateAvatarModal.edit(record);
     },
     handleSub (record) {
-      // 查看考试，不在模态框里查啦，太麻烦
-      // console.log(record)
-      // this.$refs.modalView.edit(record)
+      // 查看考试详情的方法，原本可能计划在模态框中查看，但觉得太麻烦，现在改为直接跳转到参加考试的页面查看所有题目的详细情况
+      // console.log(record);
+      // this.$refs.modalView.edit(record);
 
-      // 直接跳到参加考试的页面，查看所有题目的详细情况
+      // 通过 $router.resolve 方法解析出要跳转到的考试详情页面的路由对象，路径中使用 record.id 来定位到具体的考试详情页面
       const routeUrl = this.$router.resolve({
         path: `/exam/${record.id}`
-      })
-      // 和点击考试卡片效果一样，跳转到考试页面，里面有所有题目的情况，相当于就是详情了
-      window.open(routeUrl.href, '_blank')
+      });
+      // 使用 window.open 方法在新标签页中打开解析好的路由链接，实现跳转到考试详情页面查看所有题目情况的功能，效果等同于点击考试卡片进行查看
+      window.open(routeUrl.href, '_blank');
     },
     handleOk () {
-      this.loadAll()
+      // 当相关模态框（如创建、编辑、更新封面等模态框）触发 @ok 事件时调用该方法，用于重新加载所有考试数据，确保数据的实时性和一致性
+      this.loadAll();
     },
     loadAll () {
-      const that = this
+      const that = this;
+      // 调用 getExamAll() 函数从后端获取所有考试信息，根据返回结果进行相应处理
       getExamAll()
         .then(res => {
           if (res.code === 0) {
-            that.tableData = res.data
-            that.$refs.table._initTable()
+            // 如果获取数据成功（返回码为 0），将获取到的数据赋值给 tableData 属性，用于在表格中进行展示，然后调用表格组件的 _initTable() 方法初始化表格（可能用于重新渲染等操作）
+            that.tableData = res.data;
+            that.$refs.table._initTable();
           } else {
+            // 如果获取数据失败，通过通知组件显示错误信息，提示 "获取全部考试的列表失败" 以及具体的失败原因（从返回的 msg 属性获取）
             that.$notification.error({
               message: '获取全部考试的列表失败',
               description: res.msg
-            })
+            });
           }
-        })
+        });
     }
   }
 }