From 7e604b1cb6ecb16ec94f5965092663b94e120e5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=8B=87?= <2058152148@qq.com>
Date: Sat, 14 Dec 2024 23:39:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E4=BB=A3=E7=A0=81=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/core/directives/action.js        |  10 ++
 frontend/src/layouts/BlankLayout.vue          |   8 +-
 frontend/src/layouts/PageView.vue             |  17 +++
 frontend/src/layouts/RouteView.vue            |  11 ++
 frontend/src/layouts/UserLayout.vue           |  13 +-
 frontend/src/views/exception/404.vue          |   7 +-
 frontend/src/views/exception/500.vue          |   6 +-
 frontend/src/views/home/Banner.vue            |  14 +-
 frontend/src/views/home/List.vue              |   9 +-
 frontend/src/views/home/ListItem.vue          |   9 ++
 frontend/src/views/home/Page1.vue             |  20 +++
 frontend/src/views/list/QuestionTableList.vue | 142 ++++++++++++++++++
 .../views/list/modules/QuestionEditModal.vue  |  21 ++-
 .../views/list/modules/QuestionViewModal.vue  |  17 ++-
 14 files changed, 286 insertions(+), 18 deletions(-)

diff --git a/frontend/src/core/directives/action.js b/frontend/src/core/directives/action.js
index 7ea921e..57f5dd3 100644
--- a/frontend/src/core/directives/action.js
+++ b/frontend/src/core/directives/action.js
@@ -14,16 +14,26 @@ import store from '../../store'
  *
  *  @see https://github.com/sendya/ant-design-pro-vue/pull/53
  */
+/**
+ * 创建一个 Vue 自定义指令 'action'，用于控制元素基于用户权限的显示
+ */
 const action = Vue.directive('action', {
   inserted: function (el, binding, vnode) {
+    // 获取指令的参数，即动作名称
     const actionName = binding.arg
+    // 从 Vuex store 中获取当前用户的角色信息
     const roles = store.getters.roles
+    // 获取当前路由的权限配置
     const elVal = vnode.context.$route.meta.permission
+    // 确保权限配置为数组形式
     const permissionId = elVal instanceof String && [elVal] || elVal
+    // 遍历用户角色的权限列表
     roles.permissions.forEach(p => {
+      // 如果当前权限ID不在元素的权限配置中，直接返回
       if (!permissionId.includes(p.permissionId)) {
         return
       }
+      // 如果当前权限有动作列表限制，且动作列表中不包含指令的参数，移除或隐藏元素
       if (p.actionList && !p.actionList.includes(actionName)) {
         el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
       }
diff --git a/frontend/src/layouts/BlankLayout.vue b/frontend/src/layouts/BlankLayout.vue
index 1bfbfbf..2032e13 100644
--- a/frontend/src/layouts/BlankLayout.vue
+++ b/frontend/src/layouts/BlankLayout.vue
@@ -1,16 +1,20 @@
 <template>
+  <!-- 主要用于渲染子路由组件 -->
   <div>
     <router-view />
   </div>
 </template>
 
 <script>
-
+/**
+ * 定义一个名为 BlankLayout 的 Vue 组件
+ * 该组件用作空白布局，通常用于需要一个干净的页面来进行特定的功能或展示
+ */
 export default {
   name: 'BlankLayout'
 }
 </script>
 
 <style scoped>
-
+/* 此处添加特定于组件的样式，使用 scoped 属性确保样式仅在本组件内生效 */
 </style>
diff --git a/frontend/src/layouts/PageView.vue b/frontend/src/layouts/PageView.vue
index 32ce5c2..05fbaea 100644
--- a/frontend/src/layouts/PageView.vue
+++ b/frontend/src/layouts/PageView.vue
@@ -1,10 +1,16 @@
 <template>
+  <!-- 根据路由元数据决定是否显示页面头部内容 -->
   <div :style="!$route.meta.hiddenHeaderContent ? 'margin: -24px -24px 0px;' : null">
     <!-- pageHeader , route meta :true on hide -->
+    <!-- 条件渲染页面头部组件 -->
     <page-header v-if="!$route.meta.hiddenHeaderContent" :title="pageTitle" :logo="logo" :avatar="avatar">
+      <!-- 插槽用于自定义操作按钮 -->
       <slot slot="action" name="action"></slot>
+      <!-- 插槽用于自定义头部内容 -->
       <slot slot="content" name="headerContent"></slot>
+      <!-- 默认头部内容，当没有自定义头部内容且存在描述时显示 -->
       <div slot="content" v-if="!this.$slots.headerContent && description">
+        <!-- 显示链接列表 -->
         <p style="font-size: 14px;color: rgba(0,0,0,.65)">{{ description }}</p>
         <div class="link">
           <template v-for="(link, index) in linkList">
@@ -15,12 +21,15 @@
           </template>
         </div>
       </div>
+      <!-- 插槽用于自定义额外内容 -->
       <slot slot="extra" name="extra">
         <div class="extra-img">
           <img v-if="typeof extraImage !== 'undefined'" :src="extraImage"/>
         </div>
       </slot>
+      <!-- 页面菜单区域 -->
       <div slot="pageMenu">
+        <!-- 条件渲染搜索框 -->
         <div class="page-menu-search" v-if="search">
           <a-input-search
             style="width: 80%; max-width: 522px;"
@@ -29,6 +38,7 @@
             enterButton="搜索"
           />
         </div>
+        <!-- 条件渲染标签页 -->
         <div class="page-menu-tabs" v-if="tabs && tabs.items">
           <!-- @change="callback" :activeKey="activeKey" -->
           <a-tabs :tabBarStyle="{margin: 0}" :activeKey="tabs.active()" @change="tabs.callback">
@@ -37,10 +47,13 @@
         </div>
       </div>
     </page-header>
+    <!-- 主要内容区域 -->
     <div class="content">
+      <!-- 插槽用于自定义页面内容 -->
       <div class="page-header-index-wide">
         <slot>
           <!-- keep-alive  -->
+          <!-- 条件渲染路由视图，支持多页签 -->
           <keep-alive v-if="multiTab">
             <router-view ref="content" />
           </keep-alive>
@@ -96,15 +109,19 @@ export default {
     this.getPageMeta()
   },
   methods: {
+    // 获取页面元数据
     getPageMeta () {
       // eslint-disable-next-line
+      // 根据传入的title属性或路由元数据设置页面标题
       this.pageTitle = (typeof(this.title) === 'string' || !this.title) ? this.title : this.$route.meta.title
 
       const content = this.$refs.content
       if (content) {
         if (content.pageMeta) {
+          // 如果内容组件提供了pageMeta属性，则合并到当前组件的数据
           Object.assign(this, content.pageMeta)
         } else {
+          // 否则直接设置相关属性
           this.description = content.description
           this.linkList = content.linkList
           this.extraImage = content.extraImage
diff --git a/frontend/src/layouts/RouteView.vue b/frontend/src/layouts/RouteView.vue
index ca166ec..e168002 100644
--- a/frontend/src/layouts/RouteView.vue
+++ b/frontend/src/layouts/RouteView.vue
@@ -1,22 +1,32 @@
 <script>
+/**
+ * 定义一个名为 RouteView 的 Vue 组件
+ * 该组件根据路由的 meta 信息和 store 中的 multiTab 状态决定是否缓存路由视图
+ */
 export default {
+  // 组件名称
   name: 'RouteView',
   props: {
+    // 是否保持缓存，默认值为 true
     keepAlive: {
       type: Boolean,
       default: true
     }
   },
+  // 组件数据
   data () {
     return {}
   },
+  // 渲染函数
   render () {
+    // 解构获取路由的 meta 信息和 store 中的 getters
     const { $route: { meta }, $store: { getters } } = this
     const inKeep = (
       <keep-alive>
         <router-view />
       </keep-alive>
     )
+    // 定义不缓存路由视图的组件
     const notKeep = (
       <router-view />
     )
@@ -26,6 +36,7 @@ export default {
     if (!getters.multiTab && meta.keepAlive === false) {
       return notKeep
     }
+    // 根据 keepAlive 属性、multiTab 状态和路由的 keepAlive 属性决
     return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep
   }
 }
diff --git a/frontend/src/layouts/UserLayout.vue b/frontend/src/layouts/UserLayout.vue
index 127b3fe..5c2ee26 100644
--- a/frontend/src/layouts/UserLayout.vue
+++ b/frontend/src/layouts/UserLayout.vue
@@ -1,34 +1,39 @@
 <template>
+  <!-- 用户布局模板，根据设备类型调整样式 -->
   <div id="userLayout" :class="['user-layout-wrapper', device]">
     <div class="container">
       <div class="top">
         <div class="header">
+          <!-- 顶部标题和logo -->
           <a href="/">
             <img src="../assets/logo.svg" class="logo" alt="logo">
             <span class="title">Online Exam</span>
           </a>
         </div>
         <div class="desc">
+          <!-- 系统描述 -->
           基于SpringBoot+Vue实现的在线考试系统
         </div>
       </div>
-
+      <!-- 路由视图，用于显示子路由的内容 -->
       <route-view></route-view>
 
       <div class="footer">
         <div class="links">
+          <!-- 底部链接 -->
           <a href="https://github.com/19920625lsg/spring-boot-online-exam" target="_blank">代码仓</a>
           <a href="https://19920625lsg.github.io" target="_blank">关于我</a>
           <a href="mailto:liangshanguang2@gmail.com">联系我</a>
         </div>
         <div class="copyright">
+          <!-- 版权信息 -->
           Copyright &copy; 2020 Liang Shan Guang
         </div>
       </div>
     </div>
   </div>
 </template>
-
+// 导入RouteView组件和设备类型混入
 <script>
 import RouteView from './RouteView'
 import { mixinDevice } from '../utils/mixin'
@@ -41,9 +46,11 @@ export default {
     return {}
   },
   mounted () {
+    // 在组件挂载时，为body添加userLayout类名
     document.body.classList.add('userLayout')
   },
   beforeDestroy () {
+    // 在组件销毁前，移除body上的userLayout类名
     document.body.classList.remove('userLayout')
   }
 }
@@ -52,7 +59,7 @@ export default {
 <style lang="less" scoped>
   #userLayout.user-layout-wrapper {
     height: 100%;
-
+    // 针对移动设备的样式调整
     &.mobile {
       .container {
         .main {
diff --git a/frontend/src/views/exception/404.vue b/frontend/src/views/exception/404.vue
index c71e8dd..1de6da1 100644
--- a/frontend/src/views/exception/404.vue
+++ b/frontend/src/views/exception/404.vue
@@ -1,11 +1,14 @@
 <template>
+  <!-- 使用 ExceptionPage 组件来显示 404 错误页面 -->
   <exception-page type="404" />
 </template>
 
 <script>
+// 从../../components中导入ExceptionPage组件
 import { ExceptionPage } from '../../components'
-
+// 导出一个包含components属性的默认对象
 export default {
+  // 定义组件
   components: {
     ExceptionPage
   }
@@ -13,5 +16,5 @@ export default {
 </script>
 
 <style scoped>
-
+/* 此处写入组件的样式，scoped属性确保样式仅在本组件生效 */
 </style>
diff --git a/frontend/src/views/exception/500.vue b/frontend/src/views/exception/500.vue
index 6af8fd3..057eeb5 100644
--- a/frontend/src/views/exception/500.vue
+++ b/frontend/src/views/exception/500.vue
@@ -1,10 +1,12 @@
 <template>
+  <!-- 使用 ExceptionPage 组件来显示 500 错误页面 -->
   <exception-page type="500" />
 </template>
 
 <script>
+// 导入 ExceptionPage 组件，用于展示异常页面
 import { ExceptionPage } from '../../components'
-
+// 导出一个包含 components 属性的默认对象，注册 ExceptionPage 组件
 export default {
   components: {
     ExceptionPage
@@ -13,5 +15,5 @@ export default {
 </script>
 
 <style scoped>
-
+>/* 此处添加组件的样式，由于没有样式内容，所以留空 */
 </style>
diff --git a/frontend/src/views/home/Banner.vue b/frontend/src/views/home/Banner.vue
index 4013d09..996d39f 100644
--- a/frontend/src/views/home/Banner.vue
+++ b/frontend/src/views/home/Banner.vue
@@ -1,24 +1,35 @@
 <template>
+  <!-- 头部区域 -->
   <div class="banner-wrapper">
+    <!-- 标题区域 -->
     <div class="banner-title-wrapper">
+      <!-- 标题线动画效果 -->
       <div class="title-line-wrapper" style="opacity: 1; transform: translate(0px, 0px);">
         <div class="title-line" style="transform: translateX(-64px);"></div>
       </div>
+      <!-- 主标题 -->
       <h1 class="" style="opacity: 1; transform: translate(0px, 0px);">Online Exam</h1>
+      <!-- 副标题 -->
       <p style="opacity: 1; transform: translate(0px, 0px);">
         <span>基于SpringBoot+Vue技术栈开发的在线考试系统</span>
       </p>
+      <!-- 按钮区域 -->
       <div class="button-wrapper">
+        <!-- 预览按钮，链接到GitHub页面 -->
         <a href="https://github.com/19920625lsg">
           <a-button type="primary">预览</a-button>
         </a>
+        <!-- 开始使用按钮，点击后导航到文档页面 -->
         <a @click="$router.push({ name: 'docs' })">
           <a-button style="margin: 0 16px;">开始使用</a-button>
         </a>
       </div>
     </div>
+    <!-- 图片轮播区域 -->
     <div class="banner-image-wrapper" style="opacity: 1;">
+      <!-- 图片轮播组件，设置自动播放和显示箭头 -->
       <a-carousel arrows autoplay>
+        <!-- 动态生成轮播图片 -->
         <div v-for="i in 5" :key="i">
           <img :src="`/home/cover${i}.jpg`" style="height: 324px"/>
         </div>
@@ -28,11 +39,12 @@
 </template>
 
 <script>
+// 定义一个名为 'Banner' 的组件
 export default {
   name: 'Banner'
 }
 </script>
-
+// 引入外部样式文件
 <style lang="less">
   @import "home";
 </style>
diff --git a/frontend/src/views/home/List.vue b/frontend/src/views/home/List.vue
index 50a7c3d..637c485 100644
--- a/frontend/src/views/home/List.vue
+++ b/frontend/src/views/home/List.vue
@@ -1,6 +1,8 @@
 <template>
+  <!-- 使用 v-for 遍历 dataSource 数组，为每个列表生成一个 ul 元素 -->
   <div>
     <ul class="page1-box-wrapper" v-for="(list, index) in dataSource" :key="index">
+      <!-- 使用 v-for 遍历当前列表，为每个项生成一个 listItem 组件 -->
       <template v-for="item in list">
         <list-item :item="item" :key="item.title"/>
       </template>
@@ -9,14 +11,18 @@
 </template>
 
 <script>
+// 导入 ListItem 组件，用于在列表中显示每个项
 import ListItem from './ListItem'
 
+// 定义一个名为 List 的 Vue 组件
 export default {
   name: 'List',
   components: {
+    // 注册 ListItem 组件
     ListItem
   },
   props: {
+    // 定义 dataSource 属性，它是一个数组，用于传递给组件的数据源
     dataSource: {
       type: Array,
       requited: true,
@@ -26,6 +32,7 @@ export default {
     }
   },
   watch: {
+    // 监听 dataSource 属性的变化，当其值变化时，输出新的值到控制台
     dataSource (val) {
       console.log('dataSource::update', val)
     }
@@ -34,5 +41,5 @@ export default {
 </script>
 
 <style scoped>
-
+/* 此处添加组件的样式，使用 scoped 属性限制样式仅在当前组件生效 */
 </style>
diff --git a/frontend/src/views/home/ListItem.vue b/frontend/src/views/home/ListItem.vue
index 9887cf8..2733c5c 100644
--- a/frontend/src/views/home/ListItem.vue
+++ b/frontend/src/views/home/ListItem.vue
@@ -1,19 +1,28 @@
 <template>
+  <!-- 使用 :key 动态绑定列表项的唯一键值，以优化渲染性能 -->
   <li :key="item.title">
     <div class="page1-box">
+      <!-- 用于装饰或布局的 div，可能包含一些样式或动画效果 -->
       <div class="page1-point-wrapper"></div>
+      <!-- 使用 :style 动态绑定图片框的阴影颜色，增强视觉效果 -->
       <div class="page1-image" :style="{ boxShadow: `${item.shadowColor} 0px 6px 12px` }">
+        <!-- 动态加载图片资源 -->
         <img :src="item.src" />
       </div>
+      <!-- 显示列表项的标题 -->
       <h3>{{ item.title }}</h3>
+      <!-- 显示列表项的内容 -->
       <p>{{ item.content }}</p>
     </div>
   </li>
 </template>
 
 <script>
+// 定义一个 Vue 组件，名为 ListItem
 export default {
+  // 定义组件的属性
   name: 'ListItem',
+  // item 属性是一个对象，包含列表项的相关数据，是必须的属性
   props: {
     item: {
       type: Object,
diff --git a/frontend/src/views/home/Page1.vue b/frontend/src/views/home/Page1.vue
index 94b2fa0..64604a5 100644
--- a/frontend/src/views/home/Page1.vue
+++ b/frontend/src/views/home/Page1.vue
@@ -1,17 +1,26 @@
 <template>
+  <!-- HomePage的主布局 -->
   <div class="home-page page1">
+    <!-- 内容包装器，用于承载页面元素 -->
     <div class="home-page-wrapper" id="page1-wrapper">
+      <!-- 背景文本，通过样式进行位置调整 -->
       <div class="page1-bg" style="transform: translate(0px, 200.953px);">Feature</div>
+      <!-- 主标题，描述页面核心内容 -->
       <h2>What can <span>Online System</span> do for you </h2>
+      <!-- 标题下装饰线 -->
       <div class="title-line-wrapper page1-line"></div>
+      <!-- 使用List组件展示特性列表 -->
       <list :data-source="features" />
     </div>
   </div>
 </template>
 
 <script>
+// 导入List组件，用于展示特性列表
 import List from './List'
+// 定义中文特性数组，包含六个特性对象，每个对象有标题、内容、图片链接、颜色和阴影色
 const featuresCN = [
+  // 特性一：优雅美观
   {
     title: '优雅美观',
     content: '基于 Ant Design 体系精心设计',
@@ -19,6 +28,7 @@ const featuresCN = [
     color: '#13C2C2',
     shadowColor: 'rgba(19,194,194,.12)'
   },
+  // 特性二：常见设计模式
   {
     title: '常见设计模式',
     content: '提炼自中后台应用的典型页面和场景',
@@ -26,6 +36,7 @@ const featuresCN = [
     color: '#2F54EB',
     shadowColor: 'rgba(47,84,235,.12)'
   },
+  // 特性三：最新技术栈
   {
     title: '最新技术栈',
     content: '使用 Vue/vuex/antd 等前端前沿技术开发',
@@ -33,6 +44,7 @@ const featuresCN = [
     color: '#F5222D',
     shadowColor: 'rgba(245,34,45,.12)'
   },
+  // 特性四：响应式
   {
     title: '响应式',
     content: '针对不同屏幕大小设计',
@@ -40,6 +52,7 @@ const featuresCN = [
     color: '#1AC44D',
     shadowColor: 'rgba(26,196,77,.12)'
   },
+  // 特性五：最佳实践
   {
     title: '最佳实践',
     content: '良好的工程实践助你持续产出高质量代码',
@@ -47,6 +60,7 @@ const featuresCN = [
     color: '#FA8C16',
     shadowColor: 'rgba(250,140,22,.12)'
   },
+  // 特性六：UI 测试
   {
     title: 'UI 测试',
     content: '自动化测试保障前端产品质量',
@@ -57,19 +71,25 @@ const featuresCN = [
 ]
 
 export default {
+  // 定义组件名称
   name: 'Page1',
+  // 注册组件
   components: {
     List
   },
+  // 定义数据属性
   data () {
     return {
       features: featuresCN
     }
   },
+  // 在组件创建时调用更新特性列表的方法
   created () {
     this.updateFeatures()
   },
+  // 定义方法
   methods: {
+    // 更新特性列表，将一维数组转换为二维数组，以便在界面上进行特定布局
     updateFeatures () {
       const arr = featuresCN
       const newArr = [[], [], []]
diff --git a/frontend/src/views/list/QuestionTableList.vue b/frontend/src/views/list/QuestionTableList.vue
index 430a683..c051583 100644
--- a/frontend/src/views/list/QuestionTableList.vue
+++ b/frontend/src/views/list/QuestionTableList.vue
@@ -1,7 +1,11 @@
 <template>
+  <!-- 使用Ant Design的a-card组件作为外层容器，设置无边框 -->
   <a-card :bordered="false">
+    <!-- 定义操作按钮的工具栏区域 -->
     <div id="toolbar">
+      <!-- 新建按钮，类型为主要按钮（primary），带有加号图标，点击时调用$refs.createQuestionModal.create()方法来触发新建操作 -->
       <a-button type="primary" icon="plus" @click="$refs.createQuestionModal.create()">新建</a-button>&nbsp;
+      <!-- 全量刷新按钮，类型为主要按钮（primary），带有刷新图标，点击时调用loadAll()方法来重新加载所有题目数据 -->
       <a-button type="primary" icon="reload" @click="loadAll()">全量刷新</a-button>
     </div>
     <BootstrapTable
@@ -12,8 +16,11 @@
     />
     <!-- ref是为了方便用this.$refs.modal直接引用，下同 -->
     <step-by-step-question-modal ref="createQuestionModal" @ok="handleOk" />
+    <!-- 更新题目模态框 -->
     <summernote-update-modal ref="questionUpdateModal" @ok="handleOk" />
+    <!-- 查看题目模态框 -->
     <question-view-modal ref="modalView" @ok="handleOk" />
+    <!-- 编辑题目模态框 -->
     <question-edit-modal ref="modalEdit" @ok="handleOk" />
   </a-card>
 </template>
@@ -28,6 +35,15 @@ import SummernoteUpdateModal from '@views/list/modules/SummernoteUpdateModal'
 import $ from 'jquery'
 
 export default {
+  /**
+   * 名称：QuestionTableList 组件
+   * 描述：此组件用于显示问题表格列表，并提供对问题进行详细操作的功能
+   * 组件包含：
+   *   - SummernoteUpdateModal: 用于更新问题描述的模态框
+   *   - StepByStepQuestionModal: 用于逐步解答问题的模态框
+   *   - QuestionViewModal: 用于查看问题详情的模态框
+   *   - QuestionEditModal: 用于编辑问题的模态框
+   */
   name: 'QuestionTableList',
   components: {
     SummernoteUpdateModal,
@@ -44,69 +60,113 @@ export default {
           title: '序号',
           field: 'serial',
           formatter: function (value, row, index) {
+            // 格式化函数，用于生成序号
+            // 参数:
+            //   value: 当前单元格的值
+            //   row: 当前行的数据
+            //   index: 当前行的索引
             return index + 1 // 这样的话每翻一页都会重新从1开始，
+            // 注释解释了代码的功能和潜在的行为特点
           }
         },
+        // 定义表格列的配置对象
         {
+          // 列标题
           title: '题干',
+          // 对应的数据字段
           field: 'name',
+          // 列宽度
           width: 200,
           formatter: (value, row) => {
+            // 返回格式化后的HTML，包装题干文本到一个div中
             return '<div class="question-name" style="height: 100%;width: 100%">' + value + '</div>'
           },
+          // 定义列相关的事件处理函数
           events: {
             'click .question-name': function (e, value, row, index) {
+              // 调用编辑题干的模态框组件，传递所需参数和回调函数
               that.$refs.questionUpdateModal.edit('summernote-question-name-update', row, 'name', '更新题干', questionUpdate)
             }
           }
         },
         {
+          // 定义表格列的标题
           title: '解析',
+          // 定义表格列对应的数据字段
           field: 'description',
+          // 设置列的宽度
           width: 200,
           formatter: (value, row) => {
+            // 将当前行的描述值包装在名为question-desc的div中
             return '<div class="question-desc">' + value + '</div>'
           },
+          // 定义列相关事件的处理函数
           events: {
+            // 定义点击question-desc类元素的事件处理函数
             'click .question-desc': function (e, value, row, index) {
               that.$refs.questionUpdateModal.edit('summernote-question-desc-update', row, 'description', '更新题目解析', questionUpdate)
             }
           }
         },
         {
+          // 定义表格列的标题
           title: '分数',
+          // 定义表格列的数据字段
           field: 'score',
+          // 定义单元格内容的格式化函数
           formatter: (value, row) => {
+            // 将分数值包裹在div中，以便于后续的事件处理
             return '<div class="question-score">' + value + '</div>'
           },
+          // 定义与列相关的事件处理函数
           events: {
+            // 当点击分数所在的单元格时触发的事件
             'click .question-score': function (e, value, row, index) {
+              // 将事件目标元素转换为jQuery对象，以便使用jQuery方法
               const $element = $(e.target) // 把元素转换成html对象
               $element.html('<input type="text" value="' + value + '">')
             }
           }
         },
         {
+          /**
+           * 配置表格列标题和数据字段
+           *
+           * @param {String} title - 表格列的标题，用于显示在表头
+           * @param {String} field - 表格列的数据字段，用于绑定数据源中的属性
+           */
           title: '创建人',
           field: 'creator'
         },
         {
+          // 列的标题
           title: '难度',
+          // 列的数据字段
           field: 'level',
           formatter: (value, row) => {
+            // 格式化列的显示内容
+            // 参数 value: 当前单元格的值
+            // 参数 row: 当前行的数据
             return '<div class="question-level">' + value + '</div>'
           },
           events: {
             'click .question-level': function (e, value, row, index) {
+              // 点击难度列的事件处理函数
+              // 参数 e: 事件对象
+              // 参数 value: 当前单元格的值
+              // 参数 row: 当前行的数据
+              // 参数 index: 当前行的索引
               const $element = $(e.target) // 把元素转换成html对象
               if ($element.children().length > 0) return // 防止重复渲染
               getQuestionSelection().then(res => {
+                // 获取问题下拉选项的异步处理函数
                 console.log(res)
                 if (res.code === 0) {
                   console.log(res.data)
                   const levels = res.data.levels
                   let inner = '<select>'
                   for (let i = 0; i < levels.length; i++) {
+                    // 生成下拉选项
                     if (levels[i].description === value) {
                       // 设置默认的选中值为当前的值
                       inner += '<option value ="' + levels[i].id + '" name="' + levels[i].name + '" selected="selected">' + levels[i].description + '</option>'
@@ -117,6 +177,7 @@ export default {
                   inner += '</select>'
                   $element.html(inner)
                 } else {
+                  // 显示错误通知
                   that.$notification.error({
                     message: '获取问题下拉选项失败',
                     description: res.msg
@@ -127,16 +188,27 @@ export default {
           }
         },
         {
+          // 列的标题
           title: '题型',
+          // 对应的数据字段
           field: 'type',
           formatter: (value, row) => {
+            // 格式化函数，用于渲染单元格内容
+            // value: 当前单元格的值
+            // row: 当前行的数据
             return '<div class="question-type">' + value + '</div>'
           },
           events: {
             'click .question-type': function (e, value, row, index) {
+              // 点击事件处理函数
+              // e: 事件对象
+              // value: 当前单元格的值
+              // row: 当前行的数据
+              // index: 当前行的索引
               const $element = $(e.target) // 把元素转换成html对象
               if ($element.children().length > 0) return // 防止重复渲染
               getQuestionSelection().then(res => {
+                // 获取问题下拉选项
                 console.log(res)
                 if (res.code === 0) {
                   console.log(res.data)
@@ -163,21 +235,27 @@ export default {
           }
         },
         {
+          // 列的标题
           title: '学科',
+          // 对应的数据字段
           field: 'category',
           formatter: (value, row) => {
+            // 数据格式化函数
+            // 返回学科列的HTML，用于在界面上显示
             return '<div class="question-category">' + value + '</div>'
           },
           events: {
             'click .question-category': function (e, value, row, index) {
               const $element = $(e.target) // 把元素转换成html对象
               if ($element.children().length > 0) return // 防止重复渲染
+              // 异步获取问题选择数据
               getQuestionSelection().then(res => {
                 console.log(res)
                 if (res.code === 0) {
                   console.log(res.data)
                   const categories = res.data.categories
                   let inner = '<select>'
+                  // 遍历学科类别数组，生成<option>元素
                   for (let i = 0; i < categories.length; i++) {
                     if (categories[i].name === value) { // 学科还是用名字吧
                       // 设置默认的选中值为当前的值
@@ -189,6 +267,7 @@ export default {
                   inner += '</select>'
                   $element.html(inner)
                 } else {
+                  // 如果获取数据失败，显示错误通知
                   that.$notification.error({
                     message: '获取问题下拉选项失败',
                     description: res.msg
@@ -199,22 +278,32 @@ export default {
           }
         },
         {
+          // 列标题
           title: '更新时间',
+          // 列数据字段
           field: 'updateTime'
         },
         {
+          // 列标题
           title: '操作',
+          // 列数据字段
           field: 'action',
+          // 列对齐方式
           align: 'center',
+          // 自定义列内容格式化函数
           formatter: (value, row) => {
+            // 返回操作按钮组的HTML字符串
             return '<button type="button" class="btn btn-success view-question">详情</button>' +
               '&nbsp;&nbsp;' +
               '<button type="button" class="btn btn-success edit-question">编辑</button>'
           },
+          // 定义列内元素的事件监听器
           events: {
+            // 点击详情按钮事件处理函数
             'click .view-question': function (e, value, row, index) {
               that.handleSub(row)
             },
+            // 点击编辑按钮事件处理函数
             'click .edit-question': function (e, value, row, index) {
               that.handleEdit(row)
             }
@@ -223,14 +312,20 @@ export default {
       ],
       tableData: [], // bootstrap-table的数据
       // custom bootstrap-table
+      // 自定义bootstrap-table配置选项
       options: {
+        // 启用搜索功能
         search: true,
+        // 显示列选择下拉框
         showColumns: true,
+        // 显示导出按钮
         showExport: true,
+        // 启用分页
         pagination: true,
         toolbar: '#toolbar',
         // 下面两行是支持高级搜索，即按照字段搜索
         advancedSearch: true,
+        // 下面两行是支持高级搜索，即按照字段搜索
         idTable: 'advancedTable',
         // 下面是常用的事件，更多的点击事件可以参考：http://www.itxst.com/bootstrap-table-events/tutorial.html
         // onClickRow: that.clickRow,
@@ -243,17 +338,35 @@ export default {
     this.loadAll() // 加载所有问题的数据
   },
   methods: {
+    /**
+     * 编辑问题
+     * @param {Object} record - 问题记录
+     */
     handleEdit (record) {
       this.$refs.modalEdit.edit(record)
     },
     handleSub (record) {
       // 查看题目
+      /**
+       * 查看问题
+       * @param {Object} record - 问题记录
+       */
       console.log(record)
       this.$refs.modalView.edit(record)
     },
+    /**
+     * 确认操作后重新加载数据
+     */
     handleOk () {
       this.loadAll() // 加载所有问题的数据
     },
+    /**
+     * 双击表格单元格进行编辑
+     * @param {String} field - 字段名
+     * @param {String} value - 字段值
+     * @param {Object} row - 行记录
+     * @param {Object} $element - DOM元素
+     */
     dblClickCell (field, value, row, $element) {
       if (field === 'score') { // 更新分数
         const childrenInput = $element.children('.question-score').children('input') // 获取输入框的值
@@ -274,18 +387,24 @@ export default {
       }
 
       if (field === 'level') { // 更新难度
+        // 获取输入框的值
         const childrenSelect = $element.children('.question-level').children('select') // 获取输入框的值
         if (childrenSelect.length === 0) return
+        // 找到选中的选项
         const optionSelected = $(childrenSelect[0]).find('option:selected')
+        // 更新行数据的难度ID和难度名称
         row.levelId = optionSelected.val()
         console.log(row.levelId)
+        // 调用问题更新API进行异步更新
         row.level = optionSelected.text()
+        // 成功就跳转到结果页面
         console.log(row.level)
         const that = this
         questionUpdate(row).then(res => {
           // 成功就跳转到结果页面
           console.log(res)
           if (res.code === 0) {
+            // 更新成功后，修改页面显示的难度，并显示成功通知
             $element.children('.question-level').text(row.level)
             that.$notification.success({
               message: '更新成功',
@@ -296,17 +415,24 @@ export default {
       }
 
       if (field === 'type') { // 更新题型
+        // 获取输入框的值
         const childrenSelect = $element.children('.question-type').children('select') // 获取输入框的值
         if (childrenSelect.length === 0) return
+        // 找到选中的选项
         const optionSelected = $(childrenSelect[0]).find('option:selected')
+        // 更新row对象的typeId和type属性
         row.typeId = optionSelected.val()
         row.type = optionSelected.text()
+        // 保存this的引用以便在promise中使用
         const that = this
+        // 调用questionUpdate函数更新问题，然后根据结果进行处理
         questionUpdate(row).then(res => {
           // 成功就跳转到结果页面
           console.log(res)
           if (res.code === 0) {
+            // 更新页面上显示的题型
             $element.children('.question-type').text(row.type)
+            // 显示成功通知
             that.$notification.success({
               message: '更新成功',
               description: '更新成功'
@@ -316,18 +442,24 @@ export default {
       }
 
       if (field === 'category') { // 更新学科
+        // 获取输入框的值
         const childrenSelect = $element.children('.question-category').children('select') // 获取输入框的值
         console.log(childrenSelect)
         if (childrenSelect.length === 0) return
+        // 找到选中的选项
         const optionSelected = $(childrenSelect[0]).find('option:selected')
+        // 更新行数据的学科ID和学科名称
         row.categoryId = optionSelected.val()
         row.category = optionSelected.text()
         const that = this
+        // 调用问题更新API
         questionUpdate(row).then(res => {
           // 成功就跳转到结果页面
           console.log(res)
           if (res.code === 0) {
+            // 更新成功后，修改界面上的学科名称
             $element.children('.question-category').text(row.category)
+            // 显示成功的通知
             that.$notification.success({
               message: '更新成功',
               description: '更新成功'
@@ -336,14 +468,24 @@ export default {
         })
       }
     },
+    /**
+     * 加载所有问题数据
+     * 此方法通过调用后端API来获取所有问题的列表，并将其用于更新表格数据
+     */
     loadAll () {
+      // 创建一个指向当前组件实例的引用，以避免在回调函数中直接使用this
       const that = this
+      // 调用获取所有问题的API
       getQuestionAll()
         .then(res => {
+          // 检查返回的响应码
           if (res.code === 0) {
+            // 如果成功，更新表格数据
             that.tableData = res.data
+            // 调用表格组件的初始化方法，以应用新的数据
             that.$refs.table._initTable()
           } else {
+            // 如果失败，显示错误通知
             that.$notification.error({
               message: '获取全部问题的列表失败',
               description: res.msg
diff --git a/frontend/src/views/list/modules/QuestionEditModal.vue b/frontend/src/views/list/modules/QuestionEditModal.vue
index 3078824..adb0752 100644
--- a/frontend/src/views/list/modules/QuestionEditModal.vue
+++ b/frontend/src/views/list/modules/QuestionEditModal.vue
@@ -1,6 +1,9 @@
+<!-- 问题编辑模态框组件 -->
 <template>
+  <!-- 模态框主体 -->
   <a-modal title="编辑题目" :width="640" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
     <a-spin :spinning="confirmLoading">
+      <!-- 问题编辑表单 -->
       <a-form :form="form">
         <h3><b>题干：</b></h3>
         <div id="summernote-question-name-edit" />
@@ -48,6 +51,7 @@
         <div id="summernote-question-desc-edit" />
       </a-form>
     </a-spin>
+    <!-- 模态框底部按钮区域 -->
     <template slot="footer">
       <a-button key="cancel" @click="handleCancel">关闭</a-button>
       <a-button key="update" type="primary" @click="handleUpdate">更新</a-button>
@@ -56,6 +60,7 @@
 </template>
 
 <script>
+// 导入富文本编辑器插件和API
 import '../../../plugins/summernote'
 import $ from 'jquery'
 import { questionUpdate } from '../../../api/exam'
@@ -65,10 +70,13 @@ export default {
   name: 'QuestionEditModal',
   data () {
     return {
+      // 模态框是否可见
       visible: false,
+      // 模态框尺寸
       size: 'default',
+      // 确认按钮加载状态
       confirmLoading: false,
-
+      // 表单实例
       form: this.$form.createForm(this),
       // 每个问题
       question: {},
@@ -85,7 +93,7 @@ export default {
       desc: ''
     }
   },
-
+  // 组件更新时初始化富文本编辑器并设置内容
   updated () {
     this.initSummernote('summernote-question-name-edit')
     this.initSummernote('summernote-question-desc-edit')
@@ -93,6 +101,7 @@ export default {
     this.setSummernoteContent('summernote-question-desc-edit', this.desc)
   },
   methods: {
+    // 初始化富文本编辑器
     initSummernote (divId) {
       console.log('初始化富文本插件：' + divId)
       $('#' + divId).summernote({
@@ -120,9 +129,11 @@ export default {
         }
       })
     },
+    // 获取富文本编辑器内容
     getSummernoteContent (divId) {
       return $('#' + divId).summernote('code')
     },
+    // 设置富文本编辑器内容
     setSummernoteContent (divId, content) {
       return $('#' + divId).summernote('code', content)
     },
@@ -166,7 +177,7 @@ export default {
       }
       console.log(`Selected: ${value}`)
     },
-
+    // 多选题答案变更处理
     handleMultiChange (values) {
       console.log(values)
       // 直接更新选项id的数组
@@ -191,11 +202,11 @@ export default {
         }
       }
     },
-
+    // 弹出框滚动事件处理
     popupScroll () {
       console.log('popupScroll')
     },
-
+    // 更新问题
     handleUpdate () {
       const that = this
       that.question.name = that.getSummernoteContent('summernote-question-name-edit')
diff --git a/frontend/src/views/list/modules/QuestionViewModal.vue b/frontend/src/views/list/modules/QuestionViewModal.vue
index 394d544..147f42d 100644
--- a/frontend/src/views/list/modules/QuestionViewModal.vue
+++ b/frontend/src/views/list/modules/QuestionViewModal.vue
@@ -1,24 +1,32 @@
 <template>
+  <!-- 题目信息模态框 -->
   <a-modal title="题目信息" :width="640" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
+    <!-- 加载状态 -->
     <a-spin :spinning="confirmLoading">
+      <!-- 表单 -->
       <a-form :form="form">
+        <!-- 题干 -->
         <h3><b>题干：</b></h3>
         <div v-html="question.name"></div>
         <br>
+        <!-- 选项 -->
         <h3><b>选项：</b></h3>
         <ul>
           <li v-for="option in question.options" :key="option.id" v-html="option.content"/>
         </ul>
         <br>
+        <!-- 答案 -->
         <h3><b>答案：</b></h3>
         <ul>
           <li v-for="option in question.options" :key="option.id" v-show="option.answer===true" v-html="option.content"/>
         </ul>
         <br>
+        <!-- 解析 -->
         <h3><b>解析：</b></h3>
         <div v-html="question.description"></div>
       </a-form>
     </a-spin>
+    <!-- 模态框底部按钮 -->
     <template slot="footer">
       <a-button key="cancel" @click="handleCancel">关闭</a-button>
     </template>
@@ -32,23 +40,28 @@ export default {
   name: 'QuestionViewModal',
   data () {
     return {
+      // 模态框是否可见
       visible: false,
+      // 确认按钮加载状态
       confirmLoading: false,
-
+      // 表单实例
       form: this.$form.createForm(this),
       // 每个问题
       question: {},
+      // 当前问题
       options: [],
+      // 答案选项
       answerOption: ''
     }
   },
   methods: {
+    // 编辑问题
     edit (record) {
       this.visible = true
       // 把当前的记录赋值到data中的变量
       this.question = record
     },
-
+    // 关闭模态框
     handleCancel () {
       // clear form & currentStep
       this.visible = false