From 0769663fe04368f1bfc17ad04ebf4db972ee9524 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E7=82=AB=E5=A5=BD?= <143517814@qq.com>
Date: Tue, 17 Dec 2024 09:00:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B3=A8=E9=87=8A=E4=BA=86=E5=85=A8=E9=83=A8?=
 =?UTF-8?q?=E5=89=8D=E7=AB=AF=E6=96=87=E4=BB=B6=E5=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/.travis.yml                          |  8 ++-
 frontend/babel.config.js                      |  6 ++-
 frontend/src/main.js                          |  9 +++-
 frontend/src/views/404.vue                    |  3 ++
 frontend/src/views/Home.vue                   |  9 +++-
 frontend/src/views/list/ExamCardList.vue      | 19 +++++++
 frontend/src/views/list/QuestionTableList.vue | 50 +++++++++++++------
 .../src/views/list/modules/CreateForm.vue     | 13 +++++
 .../src/views/list/modules/ExamEditModal.vue  | 21 +++++---
 .../views/list/modules/QuestionEditModal.vue  |  2 +
 .../list/modules/StepByStepExamModal.vue      | 21 +++++++-
 .../views/list/modules/StepByStepModal.vue    | 31 +++++++++++-
 .../list/modules/StepByStepQuestionModal.vue  | 14 +++++-
 .../list/modules/SummernoteUpdateModal.vue    | 23 ++++++---
 .../views/list/modules/UpdateAvatarModal.vue  |  7 ++-
 .../src/views/test/BootStrapTableDemo.vue     | 36 +++++++++----
 frontend/src/views/test/SummerNoteDemo.vue    | 18 +++++++
 frontend/src/views/user/Login.vue             | 49 ++++++++++++++----
 frontend/src/views/user/Register.vue          | 32 ++++++++++++
 frontend/src/views/user/RegisterResult.vue    |  9 ++++
 frontend/vue.config.js                        | 22 ++++++--
 21 files changed, 342 insertions(+), 60 deletions(-)

diff --git a/frontend/.travis.yml b/frontend/.travis.yml
index a08bfcb..b4687d8 100644
--- a/frontend/.travis.yml
+++ b/frontend/.travis.yml
@@ -1,7 +1,13 @@
+# 定义语言为node_js
 language: node_js
+# 定义node_js版本为10.15.0
 node_js:
   - 10.15.0
+# 缓存yarn
 cache: yarn
+# 定义脚本
 script:
+  # 运行yarn
   - yarn
-  - yarn run lint --no-fix && yarn run build
+  # 运行yarn run lint --no-fix && yarn run build
+  - yarn run lint --no-fix && yarn run build
\ No newline at end of file
diff --git a/frontend/babel.config.js b/frontend/babel.config.js
index 60d219e..e7fcae9 100644
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@@ -1,6 +1,9 @@
+// 导出一个对象，用于配置Babel
 module.exports = {
+  // 使用@vue/app预设
   presets: [
     '@vue/app',
+    // 使用@babel/preset-env预设，并设置useBuiltIns为entry
     [
       '@babel/preset-env',
       {
@@ -8,9 +11,10 @@ module.exports = {
       }
     ]
   ]
-  // if your use import on Demand, Use this code
+  // 如果你的项目中使用了按需加载，可以使用以下代码
   // ,
   // plugins: [
+  //   // 使用import插件，配置ant-design-vue库的路径和样式
   //   [ 'import', {
   //     'libraryName': 'ant-design-vue',
   //     'libraryDirectory': 'es',
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 4d508bb..3884347 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -11,16 +11,23 @@ import bootstrap from './core/bootstrap'
 import './core/use'
 import './permission' // permission control
 import './utils/filter' // global filter
+import './utils/directive' // 全局指令
+// 设置Vue的生产提示为false
 Vue.config.productionTip = false
 
-// mount axios Vue.$http and this.$http
+// 挂载axios Vue.$http和this.$http
 Vue.use(VueAxios)
 
+// 创建Vue实例
 new Vue({
+  // 路由
   router,
+  // 状态管理
   store,
+  // 创建时调用bootstrap函数
   created () {
     bootstrap()
   },
+  // 渲染App组件
   render: h => h(App)
 }).$mount('#app')
diff --git a/frontend/src/views/404.vue b/frontend/src/views/404.vue
index 8c1d8a1..16a3a69 100644
--- a/frontend/src/views/404.vue
+++ b/frontend/src/views/404.vue
@@ -1,11 +1,14 @@
 <template>
+  <!-- 定义一个div元素，用于显示404页面 -->
   <div>
     404 page
   </div>
 </template>
 
 <script>
+// 导出一个默认的Vue组件
 export default {
+  // 组件的名称
   name: '404'
 }
 </script>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index c7eeac6..079c4ae 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,17 +1,24 @@
 <template>
+  <!-- 定义一个页面视图，不显示标题 -->
   <page-view :title="false">
+    <!-- 引入banner组件 -->
     <banner/>
+    <!-- 引入page1组件 -->
     <page1/>
   </page-view>
 </template>
-
 <script>
+// 导入PageView组件
 import { PageView } from '../layouts'
+// 导入Banner组件
 import Banner from './home/Banner'
+// 导入Page1组件
 import Page1 from './home/Page1'
 
 export default {
+  // 组件名称
   name: 'Home',
+  // 注册组件
   components: {
     PageView,
     Banner,
diff --git a/frontend/src/views/list/ExamCardList.vue b/frontend/src/views/list/ExamCardList.vue
index 6db08ef..6883a71 100644
--- a/frontend/src/views/list/ExamCardList.vue
+++ b/frontend/src/views/list/ExamCardList.vue
@@ -1,17 +1,27 @@
 <template>
+  <!-- 定义一个卡片列表的容器 -->
   <div class="card-list" ref="content">
+    <!-- 使用Ant Design Vue的List组件，设置网格布局 -->
     <a-list
       :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
       :dataSource="dataSource"
     >
+      <!-- 使用List组件的renderItem插槽，自定义列表项的渲染 -->
       <a-list-item slot="renderItem" slot-scope="item">
+        <!-- 使用Ant Design Vue的Card组件，设置可hover效果 -->
         <a-card :hoverable="true" @click="joinExam(item.id)">
+          <!-- 使用Card组件的meta插槽，自定义卡片头部 -->
           <a-card-meta>
+            <!-- 设置卡片标题 -->
             <div style="margin-bottom: 3px" slot="title">{{ item.title }}</div>
+            <!-- 设置卡片头像 -->
             <a-avatar class="card-avatar" slot="avatar" :src="item.avatar | imgSrcFilter" size="large" />
+            <!-- 设置卡片描述 -->
             <div class="meta-content" slot="description">{{ item.content }}</div>
           </a-card-meta>
+          <!-- 使用Card组件的actions插槽，自定义卡片底部 -->
           <template class="ant-card-actions" slot="actions">
+            <!-- 设置卡片底部内容 -->
             <a>满分：{{ item.score }}分</a>
             <a>限时：{{ item.elapse }}分钟</a>
           </template>
@@ -34,6 +44,7 @@ export default {
     }
   },
   methods: {
+    // 点击考试卡片，跳转到对应的考试页面
     joinExam (id) {
       const routeUrl = this.$router.resolve({
         path: `/exam/${id}`
@@ -65,15 +76,18 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  // 定义卡片头像样式
   .card-avatar {
     width: 48px;
     height: 48px;
     border-radius: 48px;
   }
 
+  // 定义卡片操作栏样式
   .ant-card-actions {
     background: #f7f9fa;
 
+    // 定义操作栏列表样式
     li {
       float: left;
       text-align: center;
@@ -81,16 +95,19 @@ export default {
       color: rgba(0, 0, 0, 0.45);
       width: 50%;
 
+      // 定义操作栏列表最后一个元素的样式
       &:not(:last-child) {
         border-right: 1px solid #e8e8e8;
       }
 
+      // 定义操作栏列表链接样式
       a {
         color: rgba(0, 0, 0, .45);
         line-height: 22px;
         display: inline-block;
         width: 100%;
 
+        // 定义操作栏列表链接鼠标悬停样式
         &:hover {
           color: #1890ff;
         }
@@ -98,6 +115,7 @@ export default {
     }
   }
 
+  // 定义新建按钮样式
   .new-btn {
     background-color: #fff;
     border-radius: 2px;
@@ -105,6 +123,7 @@ export default {
     height: 188px;
   }
 
+  // 定义内容样式
   .meta-content {
     position: relative;
     overflow: hidden;
diff --git a/frontend/src/views/list/QuestionTableList.vue b/frontend/src/views/list/QuestionTableList.vue
index 430a683..c7e82ba 100644
--- a/frontend/src/views/list/QuestionTableList.vue
+++ b/frontend/src/views/list/QuestionTableList.vue
@@ -1,9 +1,14 @@
 <template>
+  <!-- 使用a-card组件，设置bordered属性为false，表示无边框 -->
   <a-card :bordered="false">
+    <!-- 定义一个id为toolbar的div，用于放置按钮 -->
     <div id="toolbar">
+      <!-- 新建按钮，点击时调用createQuestionModal的create方法 -->
       <a-button type="primary" icon="plus" @click="$refs.createQuestionModal.create()">新建</a-button>&nbsp;
+      <!-- 全量刷新按钮，点击时调用loadAll方法 -->
       <a-button type="primary" icon="reload" @click="loadAll()">全量刷新</a-button>
     </div>
+    <!-- 使用BootstrapTable组件，设置columns、data、options属性 -->
     <BootstrapTable
       ref="table"
       :columns="columns"
@@ -11,9 +16,13 @@
       :options="options"
     />
     <!-- ref是为了方便用this.$refs.modal直接引用，下同 -->
+    <!-- 创建问题模态框，设置ref为createQuestionModal，监听ok事件 -->
     <step-by-step-question-modal ref="createQuestionModal" @ok="handleOk" />
+    <!-- 更新问题模态框，设置ref为questionUpdateModal，监听ok事件 -->
     <summernote-update-modal ref="questionUpdateModal" @ok="handleOk" />
+    <!-- 查看问题模态框，设置ref为modalView，监听ok事件 -->
     <question-view-modal ref="modalView" @ok="handleOk" />
+    <!-- 编辑问题模态框，设置ref为modalEdit，监听ok事件 -->
     <question-edit-modal ref="modalEdit" @ok="handleOk" />
   </a-card>
 </template>
@@ -36,7 +45,8 @@ export default {
     QuestionEditModal
   },
   data () {
-    const that = this // 方便在bootstrap-table中引用methods
+    const that = this
+    // 方便在bootstrap-table中引用methods
     return {
       // 表头
       columns: [
@@ -44,7 +54,8 @@ export default {
           title: '序号',
           field: 'serial',
           formatter: function (value, row, index) {
-            return index + 1 // 这样的话每翻一页都会重新从1开始，
+            return index + 1
+            // 这样的话每翻一页都会重新从1开始，
           }
         },
         {
@@ -81,7 +92,8 @@ export default {
           },
           events: {
             'click .question-score': function (e, value, row, index) {
-              const $element = $(e.target) // 把元素转换成html对象
+              const $element = $(e.target)
+              // 把元素转换成html对象
               $element.html('<input type="text" value="' + value + '">')
             }
           }
@@ -98,8 +110,10 @@ export default {
           },
           events: {
             'click .question-level': function (e, value, row, index) {
-              const $element = $(e.target) // 把元素转换成html对象
-              if ($element.children().length > 0) return // 防止重复渲染
+              const $element = $(e.target)
+              // 把元素转换成html对象
+              if ($element.children().length > 0) return
+              // 防止重复渲染
               getQuestionSelection().then(res => {
                 console.log(res)
                 if (res.code === 0) {
@@ -134,8 +148,10 @@ export default {
           },
           events: {
             'click .question-type': function (e, value, row, index) {
-              const $element = $(e.target) // 把元素转换成html对象
-              if ($element.children().length > 0) return // 防止重复渲染
+              const $element = $(e.target)
+              // 把元素转换成html对象
+              if ($element.children().length > 0) return
+              // 防止重复渲染
               getQuestionSelection().then(res => {
                 console.log(res)
                 if (res.code === 0) {
@@ -170,8 +186,10 @@ export default {
           },
           events: {
             'click .question-category': function (e, value, row, index) {
-              const $element = $(e.target) // 把元素转换成html对象
-              if ($element.children().length > 0) return // 防止重复渲染
+              const $element = $(e.target)
+              // 把元素转换成html对象
+              if ($element.children().length > 0) return
+              // 防止重复渲染
               getQuestionSelection().then(res => {
                 console.log(res)
                 if (res.code === 0) {
@@ -179,7 +197,8 @@ export default {
                   const categories = res.data.categories
                   let inner = '<select>'
                   for (let i = 0; i < categories.length; i++) {
-                    if (categories[i].name === value) { // 学科还是用名字吧
+                    if (categories[i].name === value) {
+                      // 学科还是用名字吧
                       // 设置默认的选中值为当前的值
                       inner += '<option value ="' + categories[i].id + '" name="' + categories[i].description + '" selected="selected">' + categories[i].name + '</option>'
                     } else {
@@ -221,7 +240,8 @@ export default {
           }
         }
       ],
-      tableData: [], // bootstrap-table的数据
+      tableData: [],
+      // bootstrap-table的数据
       // custom bootstrap-table
       options: {
         search: true,
@@ -234,8 +254,10 @@ export default {
         idTable: 'advancedTable',
         // 下面是常用的事件，更多的点击事件可以参考：http://www.itxst.com/bootstrap-table-events/tutorial.html
         // onClickRow: that.clickRow,
-        // onClickCell: that.clickCell // 单元格单击事件
-        onDblClickCell: that.dblClickCell // 单元格双击事件
+        // onClickCell: that.clickCell
+        // 单元格单击事件
+        onDblClickCell: that.dblClickCell
+        // 单元格双击事件
       }
     }
   },
@@ -353,4 +375,4 @@ export default {
     }
   }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/frontend/src/views/list/modules/CreateForm.vue b/frontend/src/views/list/modules/CreateForm.vue
index c35c455..c3f6b9b 100644
--- a/frontend/src/views/list/modules/CreateForm.vue
+++ b/frontend/src/views/list/modules/CreateForm.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- 新建规则模态框 -->
   <a-modal
     title="新建规则"
     :width="640"
@@ -7,13 +8,17 @@
     @ok="handleSubmit"
     @cancel="handleCancel"
   >
+    <!-- 加载中 -->
     <a-spin :spinning="confirmLoading">
+      <!-- 表单 -->
       <a-form :form="form">
+        <!-- 描述 -->
         <a-form-item
           label="描述"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
         >
+          <!-- 输入框 -->
           <a-input v-decorator="['desc', {rules: [{required: true, min: 5, message: '请输入至少五个字符的规则描述！'}]}]" />
         </a-form-item>
       </a-form>
@@ -25,24 +30,31 @@
 export default {
   data () {
     return {
+      // 表单标签布局
       labelCol: {
         xs: { span: 24 },
         sm: { span: 7 }
       },
+      // 表单控件布局
       wrapperCol: {
         xs: { span: 24 },
         sm: { span: 13 }
       },
+      // 弹窗是否可见
       visible: false,
+      // 确认按钮是否加载中
       confirmLoading: false,
 
+      // 表单实例
       form: this.$form.createForm(this)
     }
   },
   methods: {
+    // 添加按钮点击事件
     add () {
       this.visible = true
     },
+    // 提交表单
     handleSubmit () {
       const { form: { validateFields } } = this
       this.confirmLoading = true
@@ -59,6 +71,7 @@ export default {
         }
       })
     },
+    // 取消按钮点击事件
     handleCancel () {
       this.visible = false
     }
diff --git a/frontend/src/views/list/modules/ExamEditModal.vue b/frontend/src/views/list/modules/ExamEditModal.vue
index 25ecdf1..a9a2957 100644
--- a/frontend/src/views/list/modules/ExamEditModal.vue
+++ b/frontend/src/views/list/modules/ExamEditModal.vue
@@ -181,15 +181,18 @@ export default {
         that.checks = res.data.checks
         that.judges = res.data.judges
         // 从exam里面的radios、checks、judges设置下上面的this里面的三个属性，把checked属性设置为true
-        for (let i = 0; i < exam.radios.length; i++) { // 遍历所有的题目的选项
+        for (let i = 0; i < exam.radios.length; i++) {
+          // 遍历所有的题目的选项
           that.defaultRadios.push(exam.radios[i].name)
         }
         that.handleRadioChange(that.defaultRadios)
-        for (let i = 0; i < exam.checks.length; i++) { // 遍历所有的题目的选项
+        for (let i = 0; i < exam.checks.length; i++) {
+          // 遍历所有的题目的选项
           that.defaultChecks.push(exam.checks[i].name)
         }
         that.handleCheckChange(that.defaultChecks)
-        for (let i = 0; i < exam.judges.length; i++) { // 遍历所有的题目的选项
+        for (let i = 0; i < exam.judges.length; i++) {
+          // 遍历所有的题目的选项
           that.defaultJudges.push(exam.judges[i].name)
         }
         that.handleJudgeChange(that.defaultJudges)
@@ -266,7 +269,8 @@ export default {
     handleRadioChange (values) {
       console.log(values)
       // 更新单选题的信息
-      for (let i = 0; i < this.radios.length; i++) { // 遍历所有的题目的选项
+      for (let i = 0; i < this.radios.length; i++) {
+        // 遍历所有的题目的选项
         // 取出一个选项的id
         const name = this.radios[i].name
         // 当前问题是否被问题创建者选中
@@ -291,7 +295,8 @@ export default {
     handleCheckChange (values) {
       console.log(values)
       // 更新多选题的信息
-      for (let i = 0; i < this.checks.length; i++) { // 遍历所有的题目的选项
+      for (let i = 0; i < this.checks.length; i++) {
+        // 遍历所有的题目的选项
         // 取出一个选项的id
         const name = this.checks[i].name
         // 当前问题是否被问题创建者选中
@@ -316,12 +321,14 @@ export default {
     handleJudgeChange (values) {
       console.log(values)
       // 更新判断题的信息
-      for (let i = 0; i < this.judges.length; i++) { // 遍历所有的题目的选项
+      for (let i = 0; i < this.judges.length; i++) {
+        // 遍历所有的题目的选项
         // 取出一个选项的id
         const name = this.judges[i].name
         // 当前问题是否被问题创建者选中
         let checked = false
-        for (let j = 0; j < values.length; j++) { // 拿着
+        for (let j = 0; j < values.length; j++) {
+          // 拿着
           const value = values[j]
           if (name === value) {
             // 说明这个问题被考试创建者选中
diff --git a/frontend/src/views/list/modules/QuestionEditModal.vue b/frontend/src/views/list/modules/QuestionEditModal.vue
index 3078824..f78d8db 100644
--- a/frontend/src/views/list/modules/QuestionEditModal.vue
+++ b/frontend/src/views/list/modules/QuestionEditModal.vue
@@ -87,8 +87,10 @@ export default {
   },
 
   updated () {
+    // 初始化富文本插件
     this.initSummernote('summernote-question-name-edit')
     this.initSummernote('summernote-question-desc-edit')
+    // 设置富文本内容
     this.setSummernoteContent('summernote-question-name-edit', this.name)
     this.setSummernoteContent('summernote-question-desc-edit', this.desc)
   },
diff --git a/frontend/src/views/list/modules/StepByStepExamModal.vue b/frontend/src/views/list/modules/StepByStepExamModal.vue
index 88769f8..7aaeb18 100644
--- a/frontend/src/views/list/modules/StepByStepExamModal.vue
+++ b/frontend/src/views/list/modules/StepByStepExamModal.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- 创建考试模态框 -->
   <a-modal
     title="创建考试"
     :width="640"
@@ -6,15 +7,19 @@
     :confirmLoading="confirmLoading"
     @cancel="handleCancel"
   >
+    <!-- 加载中 -->
     <a-spin :spinning="confirmLoading">
+      <!-- 步骤条 -->
       <a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small">
         <a-step title="考试描述"/>
         <a-step title="每题分数"/>
         <a-step title="选择题目"/>
       </a-steps>
+      <!-- 表单 -->
       <a-form :form="form">
         <!-- step1 -->
         <div v-show="currentStep === 0">
+          <!-- 考试名称 -->
           <a-form-item
             label="考试名称"
             :labelCol="labelCol"
@@ -22,6 +27,7 @@
           >
             <a-input v-decorator="['name', {rules: [{required: true}]}]"/>
           </a-form-item>
+          <!-- 考试限时 -->
           <a-form-item
             label="考试限时"
             :labelCol="labelCol"
@@ -34,6 +40,7 @@
             />
             分钟
           </a-form-item>
+          <!-- 考试简述 -->
           <a-form-item
             label="考试简述"
             :labelCol="labelCol"
@@ -41,6 +48,7 @@
           >
             <a-textarea :rows="2" v-decorator="['desc', {rules: [{required: true}]}]"></a-textarea>
           </a-form-item>
+          <!-- 考试封面 -->
           <a-form-item
             label="考试封面"
             :labelCol="labelCol"
@@ -50,7 +58,9 @@
             <div id="summernote-exam-avatar-create"></div>
           </a-form-item>
         </div>
+        <!-- step2 -->
         <div v-show="currentStep === 1">
+          <!-- 单选题 -->
           <a-form-item
             label="单选题"
             :labelCol="labelCol"
@@ -64,6 +74,7 @@
             分
           </a-form-item>
 
+          <!-- 多选题 -->
           <a-form-item
             label="多选题"
             :labelCol="labelCol"
@@ -77,6 +88,7 @@
             分
           </a-form-item>
 
+          <!-- 判断题 -->
           <a-form-item
             label="判断题"
             :labelCol="labelCol"
@@ -90,8 +102,9 @@
             分
           </a-form-item>
         </div>
-
+        <!-- step3 -->
         <div v-show="currentStep === 2">
+          <!-- 选择单选题 -->
           <a-form-item
             label="选择单选题"
             :labelCol="labelCol"
@@ -113,6 +126,7 @@
             </a-select>
           </a-form-item>
 
+          <!-- 选择多选题 -->
           <a-form-item
             label="选择多选题"
             :labelCol="labelCol"
@@ -134,6 +148,7 @@
             </a-select>
           </a-form-item>
 
+          <!-- 选择判断题 -->
           <a-form-item
             label="选择判断题"
             :labelCol="labelCol"
@@ -157,9 +172,13 @@
         </div>
       </a-form>
     </a-spin>
+    <!-- 底部按钮 -->
     <template slot="footer">
+      <!-- 上一步 -->
       <a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }">上一步</a-button>
+      <!-- 取消 -->
       <a-button key="cancel" @click="handleCancel">取消</a-button>
+      <!-- 下一步 -->
       <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)">
         {{ currentStep === 2 && '完成' || '下一步' }}
       </a-button>
diff --git a/frontend/src/views/list/modules/StepByStepModal.vue b/frontend/src/views/list/modules/StepByStepModal.vue
index 9200a94..8f8c84c 100644
--- a/frontend/src/views/list/modules/StepByStepModal.vue
+++ b/frontend/src/views/list/modules/StepByStepModal.vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- 分步对话框 -->
   <a-modal
     title="分步对话框"
     :width="640"
@@ -6,15 +7,19 @@
     :confirmLoading="confirmLoading"
     @cancel="handleCancel"
   >
+    <!-- 加载中 -->
     <a-spin :spinning="confirmLoading">
+      <!-- 步骤条 -->
       <a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small">
         <a-step title="基本信息" />
         <a-step title="配置规则属性" />
         <a-step title="设定调度周期" />
       </a-steps>
+      <!-- 表单 -->
       <a-form :form="form">
         <!-- step1 -->
         <div v-show="currentStep === 0">
+          <!-- 规则名称 -->
           <a-form-item
             label="规则名称"
             :labelCol="labelCol"
@@ -22,6 +27,7 @@
           >
             <a-input v-decorator="['name', {rules: [{required: true}]}]" />
           </a-form-item>
+          <!-- 规则描述 -->
           <a-form-item
             label="规则描述"
             :labelCol="labelCol"
@@ -31,6 +37,7 @@
           </a-form-item>
         </div>
         <div v-show="currentStep === 1">
+          <!-- 监控对象 -->
           <a-form-item
             label="监控对象"
             :labelCol="labelCol"
@@ -42,6 +49,7 @@
             </a-select>
           </a-form-item>
 
+          <!-- 规则模板 -->
           <a-form-item
             label="规则模板"
             :labelCol="labelCol"
@@ -53,6 +61,7 @@
             </a-select>
           </a-form-item>
 
+          <!-- 规则类型 -->
           <a-form-item
             label="规则类型"
             :labelCol="labelCol"
@@ -66,6 +75,7 @@
         </div>
 
         <div v-show="currentStep === 2">
+          <!-- 开始时间 -->
           <a-form-item
             label="开始时间"
             :labelCol="labelCol"
@@ -73,6 +83,7 @@
           >
             <a-date-picker v-decorator="['time', {rules: [{ type: 'object', required: true, message: 'Please select time!' }]}]" style="width: 100%" />
           </a-form-item>
+          <!-- 调度周期 -->
           <a-form-item
             label="调度周期"
             :labelCol="labelCol"
@@ -87,9 +98,13 @@
         <!-- step1 end -->
       </a-form>
     </a-spin>
+    <!-- 底部按钮 -->
     <template slot="footer">
+      <!-- 上一步 -->
       <a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }" >上一步</a-button>
+      <!-- 取消 -->
       <a-button key="cancel" @click="handleCancel">取消</a-button>
+      <!-- 下一步 -->
       <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)">{{ currentStep === 2 && '完成' || '下一步' }}</a-button>
     </template>
   </a-modal>
@@ -98,6 +113,7 @@
 <script>
 import pick from 'lodash.pick'
 
+// 定义步骤表单
 const stepForms = [
   ['name', 'desc'],
   ['target', 'template', 'type'],
@@ -108,23 +124,31 @@ export default {
   name: 'StepByStepModal',
   data () {
     return {
+      // 标签列
       labelCol: {
         xs: { span: 24 },
         sm: { span: 7 }
       },
+      // 输入框列
       wrapperCol: {
         xs: { span: 24 },
         sm: { span: 13 }
       },
+      // 弹窗是否可见
       visible: false,
+      // 确认按钮是否加载中
       confirmLoading: false,
+      // 当前步骤
       currentStep: 0,
+      // 模态框数据
       mdl: {},
 
+      // 表单
       form: this.$form.createForm(this)
     }
   },
   methods: {
+    // 编辑
     edit (record) {
       this.visible = true
       const { form: { setFieldsValue } } = this
@@ -132,6 +156,7 @@ export default {
         setFieldsValue(pick(record, []))
       })
     },
+    // 下一步
     handleNext (step) {
       const { form: { validateFields } } = this
       const currentStep = step + 1
@@ -144,7 +169,7 @@ export default {
         })
         return
       }
-      // last step
+      // 最后一步
       this.confirmLoading = true
       validateFields((errors, values) => {
         console.log('errors:', errors, 'val:', values)
@@ -159,11 +184,13 @@ export default {
         }
       })
     },
+    // 上一步
     backward () {
       this.currentStep--
     },
+    // 取消
     handleCancel () {
-      // clear form & currentStep
+      // 清空表单和当前步骤
       this.visible = false
       this.currentStep = 0
     }
diff --git a/frontend/src/views/list/modules/StepByStepQuestionModal.vue b/frontend/src/views/list/modules/StepByStepQuestionModal.vue
index 3a45312..33ba5db 100644
--- a/frontend/src/views/list/modules/StepByStepQuestionModal.vue
+++ b/frontend/src/views/list/modules/StepByStepQuestionModal.vue
@@ -1,22 +1,29 @@
 <template>
+  <!-- 创建问题模态框 -->
   <a-modal title="创建问题" :width="800" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
+    <!-- 加载中 -->
     <a-spin :spinning="confirmLoading">
+      <!-- 步骤条 -->
       <a-steps :current="currentStep" :style="{ marginBottom: '28px' }" size="small">
         <a-step title="问题内容" />
         <a-step title="问题分类" />
         <a-step title="问题选项" />
       </a-steps>
+      <!-- 表单 -->
       <a-form :form="form">
         <!-- step1 -->
         <div v-show="currentStep === 0">
+          <!-- 题干 -->
           <a-form-item label="题干" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <div id="summernote-question-name"></div>
           </a-form-item>
+          <!-- 解析 -->
           <a-form-item label="解析" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <div id="summernote-question-desc"></div>
           </a-form-item>
         </div>
         <div v-show="currentStep === 1">
+          <!-- 题型 -->
           <a-form-item label="题型" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select v-decorator="['type', {rules: [{required: true}]}]" placeholder="请选择题型" style="width: 100%">
               <a-select-option v-for="typeObj in types" :value="typeObj.id" :key="typeObj.id">
@@ -25,6 +32,7 @@
             </a-select>
           </a-form-item>
 
+          <!-- 归类 -->
           <a-form-item label="归类" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select v-decorator="['category', { rules: [{required: true}]}]" placeholder="请选择分类" style="width: 100%">
               <a-select-option v-for="category in categories" :value="category.id" :key="category.id">
@@ -33,6 +41,7 @@
             </a-select>
           </a-form-item>
 
+          <!-- 难度 -->
           <a-form-item label="难度" :labelCol="labelCol" :wrapperCol="wrapperCol">
             <a-select v-decorator="['level', { rules: [{required: true}]}]" placeholder="请选择难度" style="width: 100%">
               <a-select-option v-for="level in levels" :value="level.id" :key="level.id">
@@ -52,6 +61,7 @@
             />
           </a-form-item>
 
+          <!-- 设置答案 -->
           <a-form-item label="设置答案" :labelCol="labelCol" :wrapperCol="wrapperCol" enterButton="Search">
             <!-- 注意这里要按照单选、多选和判断进行区分 -->
             <!-- 单选 -->
@@ -101,15 +111,17 @@
       </a-form>
     </a-spin>
     <template slot="footer">
+      <!-- 上一步 -->
       <a-button key="back" @click="backward" v-if="currentStep > 0" :style="{ float: 'left' }">上一步</a-button>
+      <!-- 取消 -->
       <a-button key="cancel" @click="handleCancel">取消</a-button>
+      <!-- 下一步 -->
       <a-button key="forward" :loading="confirmLoading" type="primary" @click="handleNext(currentStep)">
         {{ currentStep === 2 && '完成' || '下一步' }}
       </a-button>
     </template>
   </a-modal>
 </template>
-
 <script>
 import '../../../plugins/summernote'
 import $ from 'jquery'
diff --git a/frontend/src/views/list/modules/SummernoteUpdateModal.vue b/frontend/src/views/list/modules/SummernoteUpdateModal.vue
index b4fc216..1dffe00 100644
--- a/frontend/src/views/list/modules/SummernoteUpdateModal.vue
+++ b/frontend/src/views/list/modules/SummernoteUpdateModal.vue
@@ -1,8 +1,13 @@
 <template>
+  <!-- 定义一个模态框组件 -->
   <a-modal :title="title" :width="600" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
+    <!-- 定义一个div元素，id为divId -->
     <div :id="divId"></div>
+    <!-- 定义模态框的底部按钮 -->
     <template slot="footer">
+      <!-- 定义一个完成按钮，点击时调用handleUpdate方法 -->
       <a-button key="update" @click="handleUpdate">完成</a-button>
+      <!-- 定义一个关闭按钮，点击时调用handleCancel方法 -->
       <a-button key="cancel" @click="handleCancel">关闭</a-button>
     </template>
   </a-modal>
@@ -19,17 +24,21 @@ export default {
     return {
       confirmLoading: false,
       visible: false,
-      divId: 'summernote-id', // 富文本组件的id
+      divId: 'summernote-id',
+      // 富文本组件的id
       record: {},
-      key: '', // 键
-      content: '', // 键对应的值，即富文本组件的内容
+      key: '',
+      // 键
+      content: '',
+      // 键对应的值，即富文本组件的内容
       title: '',
       fn: Function
     }
   },
   updated () {
     this.initSummernote(this.divId)
-    $('#' + this.divId).summernote('code', this.content) // 把初始数据写入进去
+    $('#' + this.divId).summernote('code', this.content)
+    // 把初始数据写入进去
   },
   methods: {
     initSummernote (divId) {
@@ -61,12 +70,14 @@ export default {
       return $('#' + divId).summernote('code', content)
     },
     edit (divId, record, key, title, fn) {
-      this.divId = divId // 初始化元素的id
+      this.divId = divId
+      // 初始化元素的id
       this.visible = true
       // 把当前的记录赋值到data中的变量
       Object.assign(this.record, record)
       this.key = key
-      this.content = this.record[key] // 拿到键为key对应的属性值
+      this.content = this.record[key]
+      // 拿到键为key对应的属性值
       this.title = title
       this.fn = fn // 自定义更新函数
     },
diff --git a/frontend/src/views/list/modules/UpdateAvatarModal.vue b/frontend/src/views/list/modules/UpdateAvatarModal.vue
index 7df7606..451779a 100644
--- a/frontend/src/views/list/modules/UpdateAvatarModal.vue
+++ b/frontend/src/views/list/modules/UpdateAvatarModal.vue
@@ -1,14 +1,19 @@
 <template>
+  <!-- 编辑封面模态框 -->
   <a-modal title="编辑封面" :width="400" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
+    <!-- 提示信息 -->
     <p>截图直接粘贴到下面即可，建议图片不要大于80*80</p>
+    <!-- summernote编辑器 -->
     <div id="summernote-exam-avatar"></div>
+    <!-- 模态框底部按钮 -->
     <template slot="footer">
+      <!-- 完成按钮 -->
       <a-button key="update" @click="handleUpdate">完成</a-button>
+      <!-- 关闭按钮 -->
       <a-button key="cancel" @click="handleCancel">关闭</a-button>
     </template>
   </a-modal>
 </template>
-
 <script>
 import { examUpdate } from '@api/exam'
 import '../../../plugins/summernote'
diff --git a/frontend/src/views/test/BootStrapTableDemo.vue b/frontend/src/views/test/BootStrapTableDemo.vue
index 10f8811..02ac0d4 100644
--- a/frontend/src/views/test/BootStrapTableDemo.vue
+++ b/frontend/src/views/test/BootStrapTableDemo.vue
@@ -1,5 +1,7 @@
 <template>
+  <!-- 定义一个div容器 -->
   <div>
+    <!-- 引入BootstrapTable组件，并设置ref属性为table，columns属性为columns，data属性为data，options属性为options -->
     <BootstrapTable
       ref="table"
       :columns="columns"
@@ -15,7 +17,8 @@ import $ from 'jquery'
 
 export default {
   data () {
-    const that = this // 方便在bootstrap-table中引用methods
+    const that = this
+    // 方便在bootstrap-table中引用methods
     return {
       columns: [
         {
@@ -42,7 +45,8 @@ export default {
             return '<button type="button" class="btn btn-success mybtn">Success</button>'
           },
           events: {
-            'click .mybtn': function (e, value, row, index) { // 双击是dblclick
+            'click .mybtn': function (e, value, row, index) {
+              // 双击是dblclick
               that.clickRow(row, value, index)
             }
           }
@@ -88,8 +92,10 @@ export default {
         idTable: 'advancedTable',
         // 下面是常用的事件，更多的点击事件可以参考：http://www.itxst.com/bootstrap-table-events/tutorial.html
         // onClickRow: that.clickRow,
-        // onClickCell: that.clickCell, // 单元格单击事件
-        onDblClickCell: that.dblClickCell // 单元格双击事件
+        // onClickCell: that.clickCell,
+        // 单元格单击事件
+        onDblClickCell: that.dblClickCell
+        // 单元格双击事件
       }
     }
   },
@@ -102,23 +108,33 @@ export default {
     },
     /**
      * 单元格双击事件
+     *
      * @param field 字段名，如id、name、price等
+     *
      * @param value 字段值 如Item 1、$1等
+     *
      * @param row 一行的值，如{"id":3,"name":"Item 3","price":"$3"}
+     *
      * @param $element 行所在的dom元素，可以动态往里面加入页面元素，比如双击可编辑或者弹出富文本框等
      */
     dblClickCell (field, value, row, $element) {
-      console.log($element.text()) // 获取元素的值
-      console.log($element.html()) // 获取页面元素的值
+      console.log($element.text())
+      // 获取元素的值
+      console.log($element.html())
+      // 获取页面元素的值
       const p = $('<p>弹框出现前修改内容</p>')
       $element.append(p)
-      console.log($element.text()) // 获取元素的值
-      row[field] = $element.text() // 更新行的值
+      console.log($element.text())
+      // 获取元素的值
+      row[field] = $element.text()
+      // 更新行的值
       alert(field + ':' + row + ', ' + JSON.stringify(row))
-      const index = $element.parent().attr('data-index') // 获取当前行的数据的id，方便更新data中的rows数组
+      const index = $element.parent().attr('data-index')
+      // 获取当前行的数据的id，方便更新data中的rows数组
       row[field] = '弹框出现后修改内容'
       this.data.rows[index] = row
-      this.$refs.table._initTable() // 直接看源码找出这么个重新渲染表格的事件
+      this.$refs.table._initTable()
+      // 直接看源码找出这么个重新渲染表格的事件
     }
   }
 }
diff --git a/frontend/src/views/test/SummerNoteDemo.vue b/frontend/src/views/test/SummerNoteDemo.vue
index dc5c12b..9093dd5 100644
--- a/frontend/src/views/test/SummerNoteDemo.vue
+++ b/frontend/src/views/test/SummerNoteDemo.vue
@@ -1,12 +1,16 @@
 <template>
   <div>
+    <!-- 富文本编辑器 -->
     <div id="summernote"></div>
+    <!-- 查看富文本内容按钮 -->
     <button @click="getContent()">查看富文本内容</button>
+    <!-- 设置富文本内容按钮 -->
     <button @click="setContent()">设置富文本内容</button>
   </div>
 </template>
 
 <script>
+// 引入summernote插件
 import '../../plugins/summernote'
 import $ from 'jquery'
 
@@ -14,24 +18,34 @@ export default {
   name: 'NoteDemo',
   data () {
     return {
+      // 富文本内容
       richContent: ''
     }
   },
   methods: {
+    // 获取富文本内容
     getContent () {
       console.log($('#summernote').summernote('code'))
     },
+    // 设置富文本内容
     setContent () {
       $('#summernote').summernote('code', 'hello world!')
     }
   },
   mounted () {
+    // 初始化summernote插件
     $('#summernote').summernote({
+      // 设置语言为中文
       lang: 'zh-CN',
+      // 设置占位符
       placeholder: '请输入内容',
+      // 设置高度
       height: 300,
+      // 设置宽度
       width: 600,
+      // 设置html模式
       htmlMode: true,
+      // 设置工具栏
       toolbar: [
         ['style', ['bold', 'italic', 'underline', 'clear']],
         ['fontsize', ['fontsize']],
@@ -41,13 +55,17 @@ export default {
         ['insert', ['link', 'picture']],
         ['mybutton', ['myVideo']]
       ],
+      // 设置字体大小
       fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'],
+      // 设置字体名称
       fontNames: [
         'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',
         'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',
         'Tahoma', 'Times New Roman', 'Verdana'
       ],
+      // 设置回调函数
       callbacks: {
+        // 提交时触发
         onSubmit: function () {
           this.richContent = $('#summernote').summernote('code')
         }
diff --git a/frontend/src/views/user/Login.vue b/frontend/src/views/user/Login.vue
index d1018ad..57747f1 100644
--- a/frontend/src/views/user/Login.vue
+++ b/frontend/src/views/user/Login.vue
@@ -84,18 +84,28 @@ export default {
   data () {
     return {
       customActiveKey: 'tab1',
+      // 当前选中的tab
       loginBtn: false,
+      // 登录按钮是否可用
       // login type: 0 email, 1 username, 2 telephone
       loginType: 0,
+      // 登录类型，0 email, 1 username, 2 telephone
       requiredTwoStepCaptcha: false,
+      // 是否需要两步验证
       stepCaptchaVisible: false,
+      // 是否显示两步验证
       form: this.$form.createForm(this),
+      // 表单实例
       state: {
         time: 60,
+        // 倒计时时间
         loginBtn: false,
+        // 登录按钮是否可用
         // login type: 0 email, 1 username, 2 telephone
         loginType: 0,
+        // 登录类型，0 email, 1 username, 2 telephone
         smsSendBtn: false
+        // 短信发送按钮是否可用
       }
     }
   },
@@ -110,7 +120,8 @@ export default {
     // this.requiredTwoStepCaptcha = true
   },
   methods: {
-    ...mapActions(['Login', 'Logout']), // 这个是从Vuex中直接继承过来，从而可以当本地方法用，见store/modules/user.js
+    ...mapActions(['Login', 'Logout']),
+    // 这个是从Vuex中直接继承过来，从而可以当本地方法用，见store/modules/user.js
     // handler
     handleUsernameOrEmail (rule, value, callback) {
       const { state } = this
@@ -140,20 +151,29 @@ export default {
       const validateFieldsKey = customActiveKey === 'tab1' ? ['username', 'password'] : ['mobile', 'captcha']
 
       validateFields(validateFieldsKey, { force: true }, (err, values) => {
-        console.log(values) // 打印用户的登录参数
+        console.log(values)
+        // 打印用户的登录参数
         if (!err) {
-          const loginParams = {} // 声明登录的参数
+          const loginParams = {}
+          // 声明登录的参数
           // delete loginParams.username
           // loginParams[!state.loginType ? 'email' : 'username'] = values.username
-          loginParams.loginType = state.loginType // 登录类型，0 email, 1 username
-          loginParams.userInfo = values.username // 设置用户信息，因为email还是username不确定，所以用userinfo字段来代替
-          loginParams.password = values.password // 用户的密码，无加密
+          loginParams.loginType = state.loginType
+          // 登录类型，0 email, 1 username
+          loginParams.userInfo = values.username
+          // 设置用户信息，因为email还是username不确定，所以用userinfo字段来代替
+          loginParams.password = values.password
+          // 用户的密码，无加密
           console.log(loginParams)
-          Login(loginParams) // 请求登录接口
-            .then((res) => this.loginSuccess(res)) // 成功
-            .catch(err => this.requestFailed(err)) // 失败
+          Login(loginParams)
+            // 请求登录接口
+            .then((res) => this.loginSuccess(res))
+            // 成功
+            .catch(err => this.requestFailed(err))
+            // 失败
             .finally(() => {
-              state.loginBtn = false // 不管登录成功与否，都要把按钮置灰，防止用户重复点击
+              state.loginBtn = false
+              // 不管登录成功与否，都要把按钮置灰，防止用户重复点击
             })
         } else {
           setTimeout(() => {
@@ -228,21 +248,26 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  // 用户登录布局
   .user-layout-login {
+    // 标签字体大小
     label {
       font-size: 14px;
     }
 
+    // 获取验证码按钮
     .getCaptcha {
       display: block;
       width: 100%;
       height: 40px;
     }
 
+    // 重置密码
     .forge-password {
       font-size: 14px;
     }
 
+    // 登录按钮
     button.login-button {
       padding: 0 15px;
       font-size: 16px;
@@ -250,11 +275,13 @@ export default {
       width: 100%;
     }
 
+    // 其他登录方式
     .user-login-other {
       text-align: left;
       margin-top: 24px;
       line-height: 22px;
 
+      // 图标样式
       .item-icon {
         font-size: 24px;
         color: rgba(0, 0, 0, 0.2);
@@ -263,11 +290,13 @@ export default {
         cursor: pointer;
         transition: color 0.3s;
 
+        // 鼠标悬停时改变颜色
         &:hover {
           color: #1890ff;
         }
       }
 
+      // 注册链接
       .register {
         float: right;
       }
diff --git a/frontend/src/views/user/Register.vue b/frontend/src/views/user/Register.vue
index 164c994..dba6dbc 100644
--- a/frontend/src/views/user/Register.vue
+++ b/frontend/src/views/user/Register.vue
@@ -100,18 +100,21 @@ import { mixinDevice } from '../../utils/mixin.js'
 import { getSmsCaptcha } from '../../api/login'
 import { register } from '../../api/user'
 
+// 定义密码强度等级
 const levelNames = {
   0: '低',
   1: '低',
   2: '中',
   3: '强'
 }
+// 定义密码强度等级对应的样式
 const levelClass = {
   0: 'error',
   1: 'error',
   2: 'warning',
   3: 'success'
 }
+// 定义密码强度等级对应的颜色
 const levelColor = {
   0: '#ff0000',
   1: '#ff0000',
@@ -128,28 +131,39 @@ export default {
 
       state: {
         time: 60,
+        // 倒计时时间
         smsSendBtn: false,
+        // 是否可以发送验证码
         passwordLevel: 0,
+        // 密码强度等级
         passwordLevelChecked: false,
+        // 是否显示密码强度
         percent: 10,
+        // 密码强度百分比
         progressColor: '#FF0000'
+        // 密码强度颜色
       },
       registerBtn: false
+      // 是否可以注册
     }
   },
   computed: {
+    // 计算密码强度等级对应的样式
     passwordLevelClass () {
       return levelClass[this.state.passwordLevel]
     },
+    // 计算密码强度等级对应的名称
     passwordLevelName () {
       return levelNames[this.state.passwordLevel]
     },
+    // 计算密码强度等级对应的颜色
     passwordLevelColor () {
       return levelColor[this.state.passwordLevel]
     }
   },
   methods: {
 
+    // 判断密码强度
     handlePasswordLevel (rule, value, callback) {
       let level = 0
 
@@ -180,6 +194,7 @@ export default {
       }
     },
 
+    // 判断两次输入的密码是否一致
     handlePasswordCheck (rule, value, callback) {
       const password = this.form.getFieldValue('password')
       console.log('value', value)
@@ -192,6 +207,7 @@ export default {
       callback()
     },
 
+    // 判断手机号是否合法
     handlePhoneCheck (rule, value, callback) {
       console.log('handlePhoneCheck, rule:', rule)
       console.log('handlePhoneCheck, value', value)
@@ -200,6 +216,7 @@ export default {
       callback()
     },
 
+    // 点击密码输入框时，判断是否是移动端，如果是则不显示密码强度
     handlePasswordInputClick () {
       if (!this.isMobile()) {
         this.state.passwordLevelChecked = true
@@ -208,6 +225,7 @@ export default {
       this.state.passwordLevelChecked = false
     },
 
+    // 提交注册表单
     handleSubmit () {
       const { form: { validateFields }, $router, $message } = this
       validateFields({ force: true }, (err, values) => {
@@ -225,6 +243,7 @@ export default {
       })
     },
 
+    // 获取验证码
     getCaptcha (e) {
       e.preventDefault()
       const { form: { validateFields }, state, $message, $notification } = this
@@ -262,6 +281,7 @@ export default {
         }
       )
     },
+    // 请求失败处理
     requestFailed (err) {
       this.$notification['error']({
         message: '错误',
@@ -272,6 +292,7 @@ export default {
     }
   },
   watch: {
+    // 监听密码强度等级的变化
     'state.passwordLevel' (val) {
       console.log(val)
     }
@@ -279,46 +300,57 @@ export default {
 }
 </script>
 <style lang="less">
+  // 用户注册样式
   .user-register {
 
+    // 错误样式
     &.error {
       color: #ff0000;
     }
 
+    // 警告样式
     &.warning {
       color: #ff7e05;
     }
 
+    // 成功样式
     &.success {
       color: #52c41a;
     }
 
   }
 
+  // 用户布局注册样式
   .user-layout-register {
+    // 输入框组addon第一个元素的背景色
     .ant-input-group-addon:first-child {
       background-color: #fff;
     }
   }
 </style>
 <style lang="less" scoped>
+  // 用户注册布局
   .user-layout-register {
 
+    // 注册标题
     & > h3 {
       font-size: 16px;
       margin-bottom: 20px;
     }
 
+    // 获取验证码按钮
     .getCaptcha {
       display: block;
       width: 100%;
       height: 40px;
     }
 
+    // 注册按钮
     .register-button {
       width: 50%;
     }
 
+    // 登录链接
     .login {
       float: right;
       line-height: 40px;
diff --git a/frontend/src/views/user/RegisterResult.vue b/frontend/src/views/user/RegisterResult.vue
index 040e5bf..a0d04a9 100644
--- a/frontend/src/views/user/RegisterResult.vue
+++ b/frontend/src/views/user/RegisterResult.vue
@@ -1,12 +1,16 @@
 <template>
+  <!-- 定义一个result组件，并传入isSuccess、content、title、description四个属性 -->
   <result
     :isSuccess="true"
     :content="false"
     :title="email"
     :description="description">
 
+    <!-- 定义一个slot，用于放置操作按钮 -->
     <template slot="action">
+      <!-- 定义一个查看邮箱的按钮 -->
       <a-button size="large" type="primary">查看邮箱</a-button>
+      <!-- 定义一个返回首页的按钮，并绑定点击事件 -->
       <a-button size="large" style="margin-left: 8px" @click="goHomeHandle">返回首页</a-button>
     </template>
 
@@ -23,11 +27,14 @@ export default {
   },
   data () {
     return {
+      // 描述信息
       description: '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
+      // 表单数据
       form: {}
     }
   },
   computed: {
+    // 计算属性，根据表单数据中的email字段生成标题
     email () {
       const v = this.form && this.form.email || 'xxx'
       const title = `你的账户：${v} 注册成功`
@@ -35,9 +42,11 @@ export default {
     }
   },
   created () {
+    // 在组件创建时，将路由参数赋值给表单数据
     this.form = this.$route.params
   },
   methods: {
+    // 跳转到登录页面的方法
     goHomeHandle () {
       this.$router.push({ name: 'login' })
     }
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index a9e8b31..3c709e1 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -37,30 +37,44 @@ module.exports = {
 
   // 链式调用webpack配置
   chainWebpack: (config) => {
+    // 设置路径别名
     // 设置路径别名
     config.resolve.alias
+      // 设置@符号指向src目录
       .set('@$', resolve('src'))
+      // 设置@api符号指向src/api目录
       .set('@api', resolve('src/api'))
+      // 设置@assets符号指向src/assets目录
       .set('@assets', resolve('src/assets'))
+      // 设置@comp符号指向src/components目录
       .set('@comp', resolve('src/components'))
+      // 设置@views符号指向src/views目录
       .set('@views', resolve('src/views'))
+      // 设置@layout符号指向src/layout目录
       .set('@layout', resolve('src/layout'))
+      // 设置@static符号指向src/static目录
       .set('@static', resolve('src/static'))
+      // 设置jquery符号指向node_modules/jquery/src/jquery目录
       .set('jquery', resolve('node_modules/jquery/src/jquery'))
 
-    // 配置svg规则
-    const svgRule = config.module.rule('svg')
-    svgRule.uses.clear()
-    svgRule
+      // 配置svg规则
+      // 定义svgRule变量，值为config.module.rule('svg')
+      const svgRule = config.module.rule('svg')
+      // 清空svgRule的uses
+      svgRule.uses.clear()
+      // 定义svgRule的oneOf('inline')，匹配resourceQuery(/inline/)，使用vue-svg-icon-loader
+      svgRule
       .oneOf('inline')
       .resourceQuery(/inline/)
       .use('vue-svg-icon-loader')
       .loader('vue-svg-icon-loader')
       .end()
       .end()
+      // 定义svgRule的oneOf('external')，使用file-loader
       .oneOf('external')
       .use('file-loader')
       .loader('file-loader')
+      // 设置file-loader的options
       .options({
         name: 'assets/[name].[hash:8].[ext]'
       })