diff --git a/backend/src/main/java/lsgwr/exam/qo/DownloadQo.java b/backend/src/main/java/lsgwr/exam/qo/DownloadQo.java
index cc7ac8c..9c58ff9 100644
--- a/backend/src/main/java/lsgwr/exam/qo/DownloadQo.java
+++ b/backend/src/main/java/lsgwr/exam/qo/DownloadQo.java
@@ -13,5 +13,8 @@ import lombok.NoArgsConstructor;
 @AllArgsConstructor
 @NoArgsConstructor
 public class DownloadQo {
+    /**
+     * 文件路径
+     */
     String path;
 }
diff --git a/backend/src/main/java/lsgwr/exam/repository/PageRepository.java b/backend/src/main/java/lsgwr/exam/repository/PageRepository.java
index 6fe86e3..4f62838 100644
--- a/backend/src/main/java/lsgwr/exam/repository/PageRepository.java
+++ b/backend/src/main/java/lsgwr/exam/repository/PageRepository.java
@@ -8,6 +8,8 @@ package lsgwr.exam.repository;
 
 import lsgwr.exam.entity.Page;
 import org.springframework.data.jpa.repository.JpaRepository;
-
+/**
+ * 页面数据库操作类
+ */
 public interface PageRepository extends JpaRepository<Page, Integer> {
 }
diff --git a/backend/src/main/java/lsgwr/exam/repository/QuestionCategoryRepository.java b/backend/src/main/java/lsgwr/exam/repository/QuestionCategoryRepository.java
index 8182ade..843df45 100644
--- a/backend/src/main/java/lsgwr/exam/repository/QuestionCategoryRepository.java
+++ b/backend/src/main/java/lsgwr/exam/repository/QuestionCategoryRepository.java
@@ -8,6 +8,8 @@ package lsgwr.exam.repository;
 
 import lsgwr.exam.entity.QuestionCategory;
 import org.springframework.data.jpa.repository.JpaRepository;
-
+/**
+ * 题目分类持久层接口
+ */
 public interface QuestionCategoryRepository extends JpaRepository<QuestionCategory, Integer> {
 }
diff --git a/backend/src/main/java/lsgwr/exam/repository/QuestionLevelRepository.java b/backend/src/main/java/lsgwr/exam/repository/QuestionLevelRepository.java
index 69af582..b4f0083 100644
--- a/backend/src/main/java/lsgwr/exam/repository/QuestionLevelRepository.java
+++ b/backend/src/main/java/lsgwr/exam/repository/QuestionLevelRepository.java
@@ -8,6 +8,8 @@ package lsgwr.exam.repository;
 
 import lsgwr.exam.entity.QuestionLevel;
 import org.springframework.data.jpa.repository.JpaRepository;
-
+/**
+ * 题目难度的持久层接口
+ */
 public interface QuestionLevelRepository extends JpaRepository<QuestionLevel, Integer> {
 }
diff --git a/backend/src/main/java/lsgwr/exam/repository/QuestionOptionRepository.java b/backend/src/main/java/lsgwr/exam/repository/QuestionOptionRepository.java
index 7afb1d9..af2f2b3 100644
--- a/backend/src/main/java/lsgwr/exam/repository/QuestionOptionRepository.java
+++ b/backend/src/main/java/lsgwr/exam/repository/QuestionOptionRepository.java
@@ -8,6 +8,8 @@ package lsgwr.exam.repository;
 
 import lsgwr.exam.entity.QuestionOption;
 import org.springframework.data.jpa.repository.JpaRepository;
-
+/**
+ * 题目选项的持久层接口
+ */
 public interface QuestionOptionRepository extends JpaRepository<QuestionOption, String> {
 }
diff --git a/backend/src/main/java/lsgwr/exam/repository/QuestionRepository.java b/backend/src/main/java/lsgwr/exam/repository/QuestionRepository.java
index 97b9260..8234d7d 100644
--- a/backend/src/main/java/lsgwr/exam/repository/QuestionRepository.java
+++ b/backend/src/main/java/lsgwr/exam/repository/QuestionRepository.java
@@ -11,7 +11,9 @@ import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.data.jpa.repository.Query;
 
 import java.util.List;
-
+/**
+ * 题目接口
+ */
 public interface QuestionRepository extends JpaRepository<Question, String> {
     List<Question> findByQuestionTypeId(Integer id);
     @Query("select q from Question q order by q.updateTime desc")
diff --git a/backend/src/main/java/lsgwr/exam/repository/QuestionTypeRepository.java b/backend/src/main/java/lsgwr/exam/repository/QuestionTypeRepository.java
index acdee52..218106b 100644
--- a/backend/src/main/java/lsgwr/exam/repository/QuestionTypeRepository.java
+++ b/backend/src/main/java/lsgwr/exam/repository/QuestionTypeRepository.java
@@ -8,6 +8,8 @@ package lsgwr.exam.repository;
 
 import lsgwr.exam.entity.QuestionType;
 import org.springframework.data.jpa.repository.JpaRepository;
-
+/**
+ * 题目类型接口
+ */
 public interface QuestionTypeRepository extends JpaRepository<QuestionType, Integer> {
 }
diff --git a/backend/src/main/java/lsgwr/exam/repository/RoleRepository.java b/backend/src/main/java/lsgwr/exam/repository/RoleRepository.java
index 90e59de..6a07451 100644
--- a/backend/src/main/java/lsgwr/exam/repository/RoleRepository.java
+++ b/backend/src/main/java/lsgwr/exam/repository/RoleRepository.java
@@ -9,5 +9,8 @@ package lsgwr.exam.repository;
 import lsgwr.exam.entity.Role;
 import org.springframework.data.jpa.repository.JpaRepository;
 
+/**
+ * 角色的数据库操作类
+ */
 public interface RoleRepository extends JpaRepository<Role, Integer> {
 }
diff --git a/backend/src/main/java/lsgwr/exam/repository/UserRepository.java b/backend/src/main/java/lsgwr/exam/repository/UserRepository.java
index 27ab9ff..8ac4852 100644
--- a/backend/src/main/java/lsgwr/exam/repository/UserRepository.java
+++ b/backend/src/main/java/lsgwr/exam/repository/UserRepository.java
@@ -8,7 +8,9 @@ package lsgwr.exam.repository;
 
 import lsgwr.exam.entity.User;
 import org.springframework.data.jpa.repository.JpaRepository;
-
+/**
+ * 用户表的操作类
+ */
 public interface UserRepository extends JpaRepository<User, String> {
     /**
      * 根据用户名查找到合适的用户
diff --git a/backend/src/main/java/lsgwr/exam/service/impl/UserServiceImpl.java b/backend/src/main/java/lsgwr/exam/service/impl/UserServiceImpl.java
index 3799580..2dc8e38 100644
--- a/backend/src/main/java/lsgwr/exam/service/impl/UserServiceImpl.java
+++ b/backend/src/main/java/lsgwr/exam/service/impl/UserServiceImpl.java
@@ -47,7 +47,12 @@ public class UserServiceImpl implements UserService {
     @Autowired
     ActionRepository actionRepository;
 
-
+    /**
+     * 注册用户
+     *
+     * @param registerDTO 前端传来的注册信息
+     * @return 注册成功返回用户信息，失败返回null
+     */
     @Override
     public User register(RegisterDTO registerDTO) {
         try {
@@ -106,7 +111,12 @@ public class UserServiceImpl implements UserService {
         }
         return null;
     }
-
+    /**
+     * 获取用户信息
+     *
+     * @param userId 用户id
+     * @return 用户信息
+     */
     @Override
     public UserVo getUserInfo(String userId) {
         User user = userRepository.findById(userId).orElse(null);
@@ -115,7 +125,12 @@ public class UserServiceImpl implements UserService {
         BeanUtils.copyProperties(user, userVo);
         return userVo;
     }
-
+    /**
+     * 获取用户详细信息
+     *
+     * @param userId 用户id
+     * @return 用户详细信息
+     */
     @Override
     public UserInfoVo getInfo(String userId) {
         User user = userRepository.findById(userId).orElse(null);
diff --git a/backend/src/main/java/lsgwr/exam/utils/ResultVOUtil.java b/backend/src/main/java/lsgwr/exam/utils/ResultVOUtil.java
index fbd6df1..0694dde 100644
--- a/backend/src/main/java/lsgwr/exam/utils/ResultVOUtil.java
+++ b/backend/src/main/java/lsgwr/exam/utils/ResultVOUtil.java
@@ -7,22 +7,32 @@
 package lsgwr.exam.utils;
 
 import lsgwr.exam.vo.ResultVO;
-
+/**
+ * 封装返回结果
+ */
 public class ResultVOUtil {
-
+    /**
+     * 成功返回结果
+     */
     public static ResultVO success(Integer code, String msg, Object object) {
         return new ResultVO(code, msg, object);
     }
-
+    /**
+     * 成功返回结果
+     */
     public static ResultVO success(Object object) {
         return new ResultVO(0, "成功", object);
     }
-
+    /**
+     * 成功返回结果
+     */
     public static ResultVO success() {
         return new ResultVO(0, "成功", null);
     }
 
-
+    /**
+     * 失败返回结果
+     */
     public static ResultVO error(Integer code, String msg) {
         return new ResultVO(code, msg, null);
     }
diff --git a/backend/src/main/java/lsgwr/exam/vo/ActionVo.java b/backend/src/main/java/lsgwr/exam/vo/ActionVo.java
index 98b2a63..283ad72 100644
--- a/backend/src/main/java/lsgwr/exam/vo/ActionVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/ActionVo.java
@@ -8,15 +8,24 @@ package lsgwr.exam.vo;
 
 import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Data;
-
+/**
+ * Action前端展示类
+ */
 @Data
 public class ActionVo {
+    /**
+     * 动作名称
+     */
     @JsonProperty("action")
     private String actionName;
-
+    /**
+     * 动作描述
+     */
     @JsonProperty("describe")
     private String actionDescription;
-
+    /**
+     * 是否默认选中
+     */
     @JsonProperty("defaultCheck")
     private Boolean defaultCheck;
 }
diff --git a/backend/src/main/java/lsgwr/exam/vo/JsonData.java b/backend/src/main/java/lsgwr/exam/vo/JsonData.java
index 9fd3ecd..b9823d4 100644
--- a/backend/src/main/java/lsgwr/exam/vo/JsonData.java
+++ b/backend/src/main/java/lsgwr/exam/vo/JsonData.java
@@ -16,7 +16,9 @@ import java.io.Serializable;
 @AllArgsConstructor
 @NoArgsConstructor
 public class JsonData implements Serializable {
-
+    /**
+     * 序列化id
+     */
     private static final long serialVersionUID = 1L;
 
     /**
diff --git a/backend/src/main/java/lsgwr/exam/vo/PageVo.java b/backend/src/main/java/lsgwr/exam/vo/PageVo.java
index 604abc3..45e88d4 100644
--- a/backend/src/main/java/lsgwr/exam/vo/PageVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/PageVo.java
@@ -10,15 +10,24 @@ import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Data;
 
 import java.util.List;
-
+/**
+ * 页面展示类
+ */
 @Data
 public class PageVo {
+    /**
+     * 页面动作集合
+     */
     @JsonProperty("actionEntitySet")
     private List<ActionVo> actionVoList;
-
+    /**
+     * 页面名称，即路由名称
+     */
     @JsonProperty("permissionId")
     private String pageName;
-
+    /**
+     * 页面描述，即路由描述
+     */
     @JsonProperty("permissionName")
     private String pageDescription;
 }
diff --git a/backend/src/main/java/lsgwr/exam/vo/QuestionCreateSimplifyVo.java b/backend/src/main/java/lsgwr/exam/vo/QuestionCreateSimplifyVo.java
index 8eba970..9ddecf3 100644
--- a/backend/src/main/java/lsgwr/exam/vo/QuestionCreateSimplifyVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/QuestionCreateSimplifyVo.java
@@ -10,7 +10,9 @@ import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Data;
 
 import java.util.List;
-
+/**
+ * 问题创建的实体类,简化了下
+ */
 @Data
 public class QuestionCreateSimplifyVo {
     /**
diff --git a/backend/src/main/java/lsgwr/exam/vo/QuestionCreateVo.java b/backend/src/main/java/lsgwr/exam/vo/QuestionCreateVo.java
index b565a2e..04e2f52 100644
--- a/backend/src/main/java/lsgwr/exam/vo/QuestionCreateVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/QuestionCreateVo.java
@@ -10,7 +10,9 @@ import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Data;
 
 import java.util.List;
-
+/**
+ * 创建问题的实体类
+ */
 @Data
 public class QuestionCreateVo {
     /**
diff --git a/backend/src/main/java/lsgwr/exam/vo/QuestionDetailVo.java b/backend/src/main/java/lsgwr/exam/vo/QuestionDetailVo.java
index d6c6fae..85ae017 100644
--- a/backend/src/main/java/lsgwr/exam/vo/QuestionDetailVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/QuestionDetailVo.java
@@ -11,7 +11,9 @@ import lombok.Data;
 
 import java.util.ArrayList;
 import java.util.List;
-
+/**
+ * 问题详情的实体类
+ */
 @Data
 public class QuestionDetailVo {
     /**
diff --git a/backend/src/main/java/lsgwr/exam/vo/QuestionOptionCreateVo.java b/backend/src/main/java/lsgwr/exam/vo/QuestionOptionCreateVo.java
index 470088e..75f608e 100644
--- a/backend/src/main/java/lsgwr/exam/vo/QuestionOptionCreateVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/QuestionOptionCreateVo.java
@@ -8,7 +8,9 @@ package lsgwr.exam.vo;
 
 import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Data;
-
+/**
+ * 问题选项的外层对象
+ */
 @Data
 public class QuestionOptionCreateVo {
 
diff --git a/backend/src/main/java/lsgwr/exam/vo/QuestionOptionVo.java b/backend/src/main/java/lsgwr/exam/vo/QuestionOptionVo.java
index 58cc32a..f7e94f6 100644
--- a/backend/src/main/java/lsgwr/exam/vo/QuestionOptionVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/QuestionOptionVo.java
@@ -8,18 +8,29 @@ package lsgwr.exam.vo;
 
 import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Data;
-
+/**
+ * 问题选项的自定义实体类
+ */
 @Data
 public class QuestionOptionVo {
+    /**
+     * 问题选项的id
+     */
     @JsonProperty("id")
     private String questionOptionId;
-
+    /**
+     * 问题选项的内容
+     */
     @JsonProperty("content")
     private String questionOptionContent;
-
+    /**
+     * 问题选项是否是答案
+     */
     @JsonProperty("answer")
     private Boolean answer = false;
-
+    /**
+     * 问题选项的描述
+     */
     @JsonProperty("description")
     private String questionOptionDescription;
 }
diff --git a/backend/src/main/java/lsgwr/exam/vo/QuestionPageVo.java b/backend/src/main/java/lsgwr/exam/vo/QuestionPageVo.java
index 17ed650..fcc8678 100644
--- a/backend/src/main/java/lsgwr/exam/vo/QuestionPageVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/QuestionPageVo.java
@@ -10,7 +10,9 @@ import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Data;
 
 import java.util.List;
-
+/**
+ * 问题列表反馈给前端的对象
+ */
 @Data
 public class QuestionPageVo {
 
diff --git a/backend/src/main/java/lsgwr/exam/vo/QuestionSelectionVo.java b/backend/src/main/java/lsgwr/exam/vo/QuestionSelectionVo.java
index dfdbf93..423da6f 100644
--- a/backend/src/main/java/lsgwr/exam/vo/QuestionSelectionVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/QuestionSelectionVo.java
@@ -13,15 +13,24 @@ import lsgwr.exam.entity.QuestionType;
 import lombok.Data;
 
 import java.util.List;
-
+/**
+ * 前端创建问题时的下拉列表选择
+ */
 @Data
 public class QuestionSelectionVo {
+    /**
+     * 问题类型
+     */
     @JsonProperty("types")
     private List<QuestionType> questionTypeList;
-
+    /**
+     * 问题分类
+     */
     @JsonProperty("categories")
     private List<QuestionCategory> questionCategoryList;
-
+    /**
+     * 问题难度
+     */
     @JsonProperty("levels")
     private List<QuestionLevel> questionLevelList;
 }
diff --git a/backend/src/main/java/lsgwr/exam/vo/QuestionVo.java b/backend/src/main/java/lsgwr/exam/vo/QuestionVo.java
index 5ce1744..e2e9016 100644
--- a/backend/src/main/java/lsgwr/exam/vo/QuestionVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/QuestionVo.java
@@ -12,15 +12,24 @@ import lombok.Data;
 
 import java.util.Date;
 import java.util.List;
-
+/**
+ * 问题的VO类，用于返回给前端
+ */
 @Data
 public class QuestionVo {
+    /**
+     * 问题id，从数据库表question中获取
+     */
     @JsonProperty("id")
     private String questionId;
-
+    /**
+     * 问题名称，从数据库表question中获取
+     */
     @JsonProperty("name")
     private String questionName;
-
+    /**
+     * 问题分值，从数据库表question中获取
+     */
     @JsonProperty("score")
     private Integer questionScore;
 
diff --git a/backend/src/main/java/lsgwr/exam/vo/RecordDetailVo.java b/backend/src/main/java/lsgwr/exam/vo/RecordDetailVo.java
index 21501dc..0605de7 100644
--- a/backend/src/main/java/lsgwr/exam/vo/RecordDetailVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/RecordDetailVo.java
@@ -11,7 +11,9 @@ import lombok.Data;
 
 import java.util.HashMap;
 import java.util.List;
-
+/**
+ * 考试记录详情的VO
+ */
 @Data
 public class RecordDetailVo {
     /**
diff --git a/backend/src/main/java/lsgwr/exam/vo/ResultVO.java b/backend/src/main/java/lsgwr/exam/vo/ResultVO.java
index 12aa1bb..ec106d8 100644
--- a/backend/src/main/java/lsgwr/exam/vo/ResultVO.java
+++ b/backend/src/main/java/lsgwr/exam/vo/ResultVO.java
@@ -13,7 +13,12 @@ import lombok.Data;
 @JsonInclude(JsonInclude.Include.NON_NULL) // 避免返回NULL的字段
 public class ResultVO<T> {
 
-
+    /**
+     * 构造函数
+     * @param code 错误码
+     * @param msg 提示信息
+     * @param data 具体内容
+     */
     public ResultVO(Integer code, String msg, T data) {
         this.code = code;
         this.msg = msg;
diff --git a/backend/src/main/java/lsgwr/exam/vo/RoleVo.java b/backend/src/main/java/lsgwr/exam/vo/RoleVo.java
index 11ddba1..cec7e63 100644
--- a/backend/src/main/java/lsgwr/exam/vo/RoleVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/RoleVo.java
@@ -10,18 +10,29 @@ import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Data;
 
 import java.util.List;
-
+/**
+ * 角色的VO类
+ */
 @Data
 public class RoleVo {
+    /**
+     * 角色名
+     */
     @JsonProperty("id")
     private String roleName;
-
+    /**
+     * 角色描述
+     */
     @JsonProperty("name")
     private String roleDescription;
-
+    /**
+     * 角色的详细描述
+     */
     @JsonProperty("describe")
     private String roleDetail;
-
+    /**
+     * 角色所拥有的权限
+     */
     @JsonProperty("permissions")
     private List<PageVo> pageVoList;
 }
diff --git a/backend/src/main/java/lsgwr/exam/vo/UserInfoVo.java b/backend/src/main/java/lsgwr/exam/vo/UserInfoVo.java
index 4bb6c6f..ea096ae 100644
--- a/backend/src/main/java/lsgwr/exam/vo/UserInfoVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/UserInfoVo.java
@@ -8,19 +8,29 @@ package lsgwr.exam.vo;
 
 import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Data;
-
+/**
+ * 用户信息展示类
+ */
 @Data
 public class UserInfoVo {
-
+    /**
+     * 用户ID，唯一
+     */
     @JsonProperty("id")
     private String userId;
-
+    /**
+     * 头像URL
+     */
     @JsonProperty("avatar")
     private String userAvatar;
-
+    /**
+     * 用户名，唯一
+     */
     @JsonProperty("name")
     private String userNickname;
-
+    /**
+     * 账号，唯一
+     */
     @JsonProperty("username")
     private String userUsername;
 
diff --git a/backend/src/main/java/lsgwr/exam/vo/UserVo.java b/backend/src/main/java/lsgwr/exam/vo/UserVo.java
index 056b93c..068d78e 100644
--- a/backend/src/main/java/lsgwr/exam/vo/UserVo.java
+++ b/backend/src/main/java/lsgwr/exam/vo/UserVo.java
@@ -8,30 +8,49 @@ package lsgwr.exam.vo;
 
 import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.Data;
-
+/**
+ * 用户信息展示类
+ */
 @Data
 public class UserVo {
+    /**
+     * 用户ID
+     */
     @JsonProperty("id")
     private String userId;
-
+    /**
+     * 用户名
+     */
     @JsonProperty("username")
     private String userUsername;
-
+    /**
+     * 昵称
+     */
     @JsonProperty("nickname")
     private String userNickname;
-
+    /**
+     * 角色ID
+     */
     @JsonProperty("role")
     private Integer userRoleId;
-
+    /**
+     * 头像
+     */
     @JsonProperty("avatar")
     private String userAvatar;
-
+    /**
+     * 个人简介
+     */
     @JsonProperty("description")
     private String userDescription;
-
+    /**
+     * 邮箱
+     */
     @JsonProperty("email")
     private String userEmail;
-
+    /**
+     * 电话
+     */
     @JsonProperty("phone")
     private String userPhone;
 }
diff --git a/frontend/public/index.html b/frontend/public/index.html
index fd87ff4..0a9f41a 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -6,13 +6,91 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>logo.png">
     <title>在线考试系统</title>
-    <style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
+    <!-- 定义加载中的样式   -->
+    <style>#loading-mask{
+      position:fixed;left:0;top:0;height:100%;
+      width:100%;background:#fff;user-select:none;
+      z-index:9999;overflow:hidden}
+    .loading-wrapper{
+      position:absolute;
+      top:50%;
+      left:50%;
+      transform:translate(-50%,-100%)
+    }
+    .loading-dot{
+      animation:antRotate 1.2s infinite linear;
+      transform:rotate(45deg);
+      position:relative;
+      display:inline-block;
+      font-size:64px;
+      width:64px;
+      height:64px;
+      box-sizing:border-box}
+    .loading-dot i{
+      width:22px;
+      height:22px;
+      position:absolute;
+      display:block;
+      background-color:#1890ff;
+      border-radius:100%;
+      transform:scale(.75);
+      transform-origin:50% 50%;
+      opacity:.3;
+      animation:antSpinMove 1s infinite linear alternate
+    }
+    .loading-dot i:nth-child(1){
+      top:0;
+      left:0
+    }
+    .loading-dot i:nth-child(2){
+      top:0;
+      right:0;
+      -webkit-animation-delay:.4s;
+      animation-delay:.4s
+    }
+    .loading-dot i:nth-child(3){
+      right:0;
+      bottom:0;
+      -webkit-animation-delay:.8s;
+      animation-delay:.8s
+    }
+    .loading-dot i:nth-child(4){
+      bottom:0;
+      left:0;
+      -webkit-animation-delay:1.2s;
+      animation-delay:1.2s
+    }
+    @keyframes antRotate{
+      to{
+        -webkit-transform:rotate(405deg);
+        transform:rotate(405deg)
+      }
+    }
+    @-webkit-keyframes antRotate{to{
+      -webkit-transform:rotate(405deg);
+      transform:rotate(405deg)
+    }
+    }
+    @keyframes antSpinMove{
+      to{
+        opacity:1
+      }
+    }
+    @-webkit-keyframes antSpinMove{
+      to{
+        opacity:1
+      }
+    }
+    </style>
   </head>
   <body>
+  <!-- 当JavaScript被禁用时显示提示信息 -->
     <noscript>
       <strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
+  <!-- 应用的主容器 -->
     <div id="app">
+      <!-- 加载中的遮罩层 -->
       <div id="loading-mask">
           <div class="loading-wrapper">
             <span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
diff --git a/frontend/public/loading/loading.css b/frontend/public/loading/loading.css
index a899eac..e06ac36 100644
--- a/frontend/public/loading/loading.css
+++ b/frontend/public/loading/loading.css
@@ -1 +1,52 @@
-#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;}  @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
\ No newline at end of file
+#preloadingAnimation{
+  position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;
+  z-index: 9999;overflow: hidden}
+.lds-roller{
+  display:inline-block;
+  position:relative;
+  left:50%;
+  top:50%;
+  transform:translate(-50%,-50%);
+  width:64px;
+  height:64px;
+}
+.lds-roller div{
+  animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
+  transform-origin:32px 32px;
+}
+.lds-roller div:after{
+  content:" ";
+  display:block;
+  position:absolute;
+  width:6px;
+  height:6px;
+  border-radius:50%;
+  background:#13c2c2;
+  margin:-3px 0 0 -3px;
+}
+.lds-roller div:nth-child(1){animation-delay:-0.036s;}
+.lds-roller div:nth-child(1):after{top:50px;left:50px;}
+.lds-roller div:nth-child(2){animation-delay:-0.072s;}
+.lds-roller div:nth-child(2):after{top:54px;left:45px;}
+.lds-roller div:nth-child(3){animation-delay:-0.108s;}
+.lds-roller div:nth-child(3):after{top:57px;left:39px;}
+.lds-roller div:nth-child(4){animation-delay:-0.144s;}
+.lds-roller div:nth-child(4):after{top:58px;left:32px;}
+.lds-roller div:nth-child(5){animation-delay:-0.18s;}
+.lds-roller div:nth-child(5):after{top:57px;left:25px;}
+.lds-roller div:nth-child(6){animation-delay:-0.216s;}
+.lds-roller div:nth-child(6):after{top:54px;left:19px;}
+.lds-roller div:nth-child(7){animation-delay:-0.252s;}
+.lds-roller div:nth-child(7):after{top:50px;left:14px;}
+.lds-roller div:nth-child(8){animation-delay:-0.288s;}
+.lds-roller div:nth-child(8):after{top:45px;left:10px;}
+#preloadingAnimation .load-tips{
+  color: #13c2c2;
+  font-size:2rem;
+  position:absolute;
+  left:50%;
+  top:50%;
+  transform:translate(-50%,-50%);margin-top:80px;
+  text-align:center;width:400px;height:64px;}
+@keyframes lds-roller{0%{transform:rotate(0deg);}
+  100%{transform:rotate(360deg);}}
\ No newline at end of file
diff --git a/frontend/public/loading/loading.html b/frontend/public/loading/loading.html
index 9b93196..1d51177 100644
--- a/frontend/public/loading/loading.html
+++ b/frontend/public/loading/loading.html
@@ -1 +1,27 @@
-<div id="preloadingAnimation"><div class=lds-roller><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=load-tips>Loading</div></div>
\ No newline at end of file
+<div id="preloadingAnimation"><div class=lds-roller><div>
+
+</div>
+  <div>
+
+  </div>
+  <div>
+
+  </div>
+  <div>
+
+  </div>
+  <div>
+
+  </div>
+  <div>
+
+  </div>
+  <div>
+
+  </div>
+  <div>
+
+  </div>
+</div>
+  <div class=load-tips>Loading</div>
+</div>
\ No newline at end of file
diff --git a/frontend/public/loading/option2/html_code_segment.html b/frontend/public/loading/option2/html_code_segment.html
index df81b26..fc874e3 100644
--- a/frontend/public/loading/option2/html_code_segment.html
+++ b/frontend/public/loading/option2/html_code_segment.html
@@ -1,5 +1,31 @@
+/**
+ * 预加载动画
+ */
 <div class="preloading-animate">
+  <!--预加载的包装容器  -->
   <div class="preloading-wrapper">
-    <svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="67.802" cy="59.907" r="6" fill="#51CACC"><animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77"><animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle></svg>
+    <svg class="preloading-balls"
+         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+      <circle cx="67.802" cy="59.907" r="6" fill="#51CACC">
+        <animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      </circle>
+      <circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      <animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      </circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77">
+      <animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      <animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      <animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+    </circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      <animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      <animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+    </circle>
+      <circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+        <animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/>
+      </circle>
+    </svg>
   </div>
 </div>
\ No newline at end of file
diff --git a/frontend/public/loading/option2/loading.css b/frontend/public/loading/option2/loading.css
index c35cd73..4486a8a 100644
--- a/frontend/public/loading/option2/loading.css
+++ b/frontend/public/loading/option2/loading.css
@@ -1 +1,20 @@
-.preloading-animate{background:#ffffff;width:100%;height:100%;position:fixed;left:0;top:0;z-index:299;}.preloading-animate .preloading-wrapper{position:absolute;width:5rem;height:5rem;left:50%;top:50%;transform:translate(-50%,-50%);}.preloading-animate .preloading-wrapper .preloading-balls{font-size:5rem;}
\ No newline at end of file
+.preloading-animate{
+  background:#ffffff;
+  width:100%;
+  height:100%;
+  position:fixed;
+  left:0;
+  top:0;
+  z-index:299;
+}
+.preloading-animate .preloading-wrapper{
+  position:absolute;
+  width:5rem;
+  height:5rem;
+  left:50%;
+  top:50%;
+  transform:translate(-50%,-50%);
+}
+.preloading-animate .preloading-wrapper .preloading-balls{
+  font-size:5rem;
+}
\ No newline at end of file
diff --git a/frontend/src/components/Exception/ExceptionPage.vue b/frontend/src/components/Exception/ExceptionPage.vue
index 132e346..7e9d584 100644
--- a/frontend/src/components/Exception/ExceptionPage.vue
+++ b/frontend/src/components/Exception/ExceptionPage.vue
@@ -1,24 +1,33 @@
 <template>
+  <!--异常页面-->
   <div class="exception">
+    <!--背景图-->
     <div class="imgBlock">
+      <!-- 图片元素，根据传入的type动态设置背景图片 -->
       <div class="imgEle" :style="{backgroundImage: `url(${config[type].img})`}">
       </div>
     </div>
+    <!-- 内容区块 -->
     <div class="content">
+      <!-- 根据传入的type动态显示标题 -->
       <h1>{{ config[type].title }}</h1>
+      <!-- 根据传入的type动态显示描述 -->
       <div class="desc">{{ config[type].desc }}</div>
+      <!-- 操作按钮区块 -->
       <div class="actions">
+        <!-- 点击按钮返回首页 -->
         <a-button type="primary" @click="handleToHome">返回首页</a-button>
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script>// 引入不同异常类型的配置
 import types from './type'
 
 export default {
   name: 'Exception',
+  // 定义组件属性
   props: {
     type: {
       type: String,
@@ -27,11 +36,14 @@ export default {
   },
   data () {
     return {
+      // 配置数据，包含不同异常类型的图片、标题和描述
       config: types
     }
   },
   methods: {
+    // 点击按钮返回首页
     handleToHome () {
+      // 使用Vue Router导航到dashboard页面
       this.$router.push({ name: 'dashboard' })
     }
   }
diff --git a/frontend/src/components/Exception/type.js b/frontend/src/components/Exception/type.js
index 8158f0f..2e29f1a 100644
--- a/frontend/src/components/Exception/type.js
+++ b/frontend/src/components/Exception/type.js
@@ -1,19 +1,27 @@
+/**
+ * 定义一个常量对象types，用于存储不同HTTP状态码的信息
+ * 每个状态码都包含一个图片URL、状态码标题和描述信息
+ * 这些信息可以用于在界面上展示更友好的错误提示
+ */
 const types = {
+  // 403状态码信息：禁止访问
   403: {
     img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
     title: '403',
     desc: '抱歉，你无权访问该页面'
   },
+  // 404状态码信息：页面未找到
   404: {
     img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
     title: '404',
     desc: '抱歉，你访问的页面不存在或仍在开发中'
   },
+  // 500状态码信息：服务器内部错误
   500: {
     img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
     title: '500',
     desc: '抱歉，服务器出错了'
   }
 }
-
+// 将types对象导出，以便在其他模块中使用
 export default types
diff --git a/frontend/src/components/GlobalFooter/GlobalFooter.vue b/frontend/src/components/GlobalFooter/GlobalFooter.vue
index 10bee3a..26c40b0 100644
--- a/frontend/src/components/GlobalFooter/GlobalFooter.vue
+++ b/frontend/src/components/GlobalFooter/GlobalFooter.vue
@@ -1,18 +1,25 @@
 <template>
+  <!-- 底部信息栏 -->
   <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
+      <!-- 版权图标 -->
       <a-icon type="copyright" /> 2020 <span>Liang Shan Guang</span>
     </div>
   </div>
 </template>
 
-<script>
+<script>// 定义全局底部组件
 export default {
   name: 'GlobalFooter',
   data () {
@@ -21,7 +28,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped>// 底部样式定义
 .footer {
   padding: 0 16px;
   margin: 24px 0 24px;
diff --git a/frontend/src/components/GlobalHeader/GlobalHeader.vue b/frontend/src/components/GlobalHeader/GlobalHeader.vue
index ad26217..02de145 100644
--- a/frontend/src/components/GlobalHeader/GlobalHeader.vue
+++ b/frontend/src/components/GlobalHeader/GlobalHeader.vue
@@ -1,22 +1,31 @@
 <template>
+  <!-- 使用 transition 组件为头部添加动画效果 -->
   <transition name="showHeader">
+    <!-- 根据 visible 属性控制头部的显示与隐藏 -->
     <div v-if="visible" class="header-animat">
+      <!-- 根据 visible 属性、fixedHeader、sidebarOpened 等属性动态设置头部样式 -->
       <a-layout-header
         v-if="visible"
         :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
         :style="{ padding: '0' }">
+        <!-- 根据 mode 属性判断菜单类型，并根据不同设备类型显示不同的折叠/展开图标 -->
         <div v-if="mode === 'sidemenu'" class="header">
           <a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
           <a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
+          <!-- 渲染用户菜单组件 -->
           <user-menu></user-menu>
         </div>
+        <!-- 对于顶部菜单，根据设备类型和折叠状态显示不同布局和图标 -->
         <div v-else :class="['top-nav-header-index', theme]">
           <div class="header-index-wide">
             <div class="header-index-left">
+              <!-- 渲染 logo 组件，根据设备类型决定是否显示标题 -->
               <logo class="top-nav-header" :show-title="device !== 'mobile'"/>
+              <!-- 根据设备类型和折叠状态渲染菜单 -->
               <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
               <a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
             </div>
+            <!-- 渲染用户菜单组件 -->
             <user-menu class="header-index-right"></user-menu>
           </div>
         </div>
@@ -25,10 +34,11 @@
   </transition>
 </template>
 
-<script>
+<script>// 导入用户菜单、菜单和 logo 组件
 import UserMenu from '../tools/UserMenu'
 import SMenu from '../Menu/'
 import Logo from '../tools/Logo'
+// 导入混入以使用通用方法和属性
 import { mixin } from '../../utils/mixin'
 
 export default {
@@ -39,6 +49,7 @@ export default {
     Logo
   },
   mixins: [mixin],
+  // 定义组件属性，包括菜单模式、菜单项、主题、折叠状态和设备类型
   props: {
     mode: {
       type: String,
@@ -67,14 +78,18 @@ export default {
   },
   data () {
     return {
+      // 控制头部的显示与隐藏
       visible: true,
+      // 用于记录上一次滚动位置
       oldScrollTop: 0
     }
   },
+  // 监听滚动事件，以自动隐藏/显示头部
   mounted () {
     document.body.addEventListener('scroll', this.handleScroll, { passive: true })
   },
   methods: {
+    // 处理滚动事件，根据滚动方向和位置控制头部的显示与隐藏
     handleScroll () {
       if (!this.autoHideHeader) {
         return
@@ -96,17 +111,19 @@ export default {
         })
       }
     },
+    // 发送 toggle 事件以控制菜单的折叠与展开
     toggle () {
       this.$emit('toggle')
     }
   },
+  // 在组件销毁前移除滚动事件监听器
   beforeDestroy () {
     document.body.removeEventListener('scroll', this.handleScroll, true)
   }
 }
 </script>
 
-<style lang="less">
+<style lang="less">// 定义头部动画相关样式
 .header-animat{
   position: relative;
   z-index: 2;
diff --git a/frontend/src/components/Menu/SideMenu.vue b/frontend/src/components/Menu/SideMenu.vue
index 569ed85..4f7ed80 100644
--- a/frontend/src/components/Menu/SideMenu.vue
+++ b/frontend/src/components/Menu/SideMenu.vue
@@ -1,11 +1,14 @@
 <template>
+  <!-- 侧边栏组件，包含logo和菜单 -->
   <a-layout-sider
     :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
     width="256px"
     :collapsible="collapsible"
     v-model="collapsed"
     :trigger="null">
+    <!-- Logo组件 -->
     <logo />
+    <!-- 菜单组件 -->
     <s-menu
       :collapsed="collapsed"
       :menu="menus"
@@ -17,7 +20,7 @@
 
 </template>
 
-<script>
+<script>// 导入Logo和SMenu组件以及混入的工具函数
 import Logo from '../../components/tools/Logo'
 import SMenu from './index'
 import { mixin, mixinDevice } from '../../utils/mixin'
diff --git a/frontend/src/components/MultiTab/MultiTab.vue b/frontend/src/components/MultiTab/MultiTab.vue
index c586b84..f221270 100644
--- a/frontend/src/components/MultiTab/MultiTab.vue
+++ b/frontend/src/components/MultiTab/MultiTab.vue
@@ -26,22 +26,35 @@
 -->
 
 <script>
+/**
+ * 多标签页组件
+ */
 export default {
   name: 'MultiTab',
   data () {
     return {
+      // 存储所有标签页的 fullPath
       fullPathList: [],
+      // 存储所有标签页的路由信息
       pages: [],
+      // 当前激活的标签页的 fullPath
       activeKey: '',
+      // 新标签页的索引
       newTabIndex: 0
     }
   },
   created () {
+    // 在组件创建时，将当前路由添加到标签页列表中，并选中它
     this.pages.push(this.$route)
     this.fullPathList.push(this.$route.fullPath)
     this.selectedLastPath()
   },
   methods: {
+    /**
+     * 处理标签页编辑事件
+     * @param {String} targetKey - 目标标签页的 fullPath
+     * @param {String} action - 操作类型（例如：'remove'）
+     */
     onEdit (targetKey, action) {
       this[action](targetKey)
     },
@@ -53,11 +66,14 @@ export default {
         this.selectedLastPath()
       }
     },
+    /**
+     * 选择最后一个标签页
+     */
     selectedLastPath () {
       this.activeKey = this.fullPathList[this.fullPathList.length - 1]
     },
 
-    // content menu
+    // 以下为标签页右键菜单相关方法
     closeThat (e) {
       this.remove(e)
     },
@@ -93,6 +109,10 @@ export default {
         }
       })
     },
+    /**
+     * 处理右键菜单点击事件
+     * @param {Object} { key, item, domEvent } - 菜单项的相关信息
+     */
     closeMenuClick ({ key, item, domEvent }) {
       const vkey = domEvent.target.getAttribute('data-vkey')
       switch (key) {
@@ -111,6 +131,10 @@ export default {
           break
       }
     },
+    /**
+     * 渲染标签页右键菜单
+     * @param {String} e - 标签页的 fullPath
+     */
     renderTabPaneMenu (e) {
       return (
         <a-menu {...{ on: { click: this.closeMenuClick } }}>
@@ -122,6 +146,11 @@ export default {
       )
     },
     // render
+    /**
+     * 渲染标签页
+     * @param {String} title - 标签页的标题
+     * @param {String} keyPath - 标签页的 fullPath
+     */
     renderTabPane (title, keyPath) {
       const menu = this.renderTabPaneMenu(keyPath)
 
@@ -133,6 +162,10 @@ export default {
     }
   },
   watch: {
+    /**
+     * 监听路由变化，更新标签页列表和激活的标签页
+     * @param {Object} newVal - 新的路由信息
+     */
     '$route': function (newVal) {
       this.activeKey = newVal.fullPath
       if (this.fullPathList.indexOf(newVal.fullPath) < 0) {
@@ -140,6 +173,10 @@ export default {
         this.pages.push(newVal)
       }
     },
+    /**
+     * 监听激活的标签页变化，更新路由
+     * @param {String} newPathKey - 新的激活标签页的 fullPath
+     */
     activeKey: function (newPathKey) {
       this.$router.push({ path: newPathKey })
     }
diff --git a/frontend/src/components/PageHeader/PageHeader.vue b/frontend/src/components/PageHeader/PageHeader.vue
index b9df938..40f5c6b 100644
--- a/frontend/src/components/PageHeader/PageHeader.vue
+++ b/frontend/src/components/PageHeader/PageHeader.vue
@@ -1,28 +1,38 @@
 <template>
+  <!-- 页面头部组件 -->
   <div class="page-header">
     <div class="page-header-index-wide">
+      <!-- 面包屑导航 -->
       <s-breadcrumb />
       <div class="detail">
+        <!-- 主要内容区域 -->
         <div class="main" v-if="!$route.meta.hiddenHeaderContent">
           <div class="row">
+            <!-- Logo图片 -->
             <img v-if="logo" :src="logo" class="logo"/>
+            <!-- 页面标题 -->
             <h1 v-if="title" class="title">{{ title }}</h1>
+            <!-- 自定义操作区域 -->
             <div class="action">
               <slot name="action"></slot>
             </div>
           </div>
           <div class="row">
+            <!-- 头像 -->
             <div v-if="avatar" class="avatar">
               <a-avatar :src="avatar" />
             </div>
+            <!-- 自定义内容区域 -->
             <div v-if="this.$slots.content" class="headerContent">
               <slot name="content"></slot>
             </div>
+            <!-- 额外的自定义区域 -->
             <div v-if="this.$slots.extra" class="extra">
               <slot name="extra"></slot>
             </div>
           </div>
           <div>
+            <!-- 页面菜单 -->
             <slot name="pageMenu"></slot>
           </div>
         </div>
@@ -31,25 +41,28 @@
   </div>
 </template>
 
-<script>
+<script>// 导入面包屑组件
 import Breadcrumb from '../../components/tools/Breadcrumb'
-
+// 页面头部组件定义
 export default {
   name: 'PageHeader',
   components: {
     's-breadcrumb': Breadcrumb
   },
   props: {
+    // 页面标题，可接受字符串或布尔值，默认为true
     title: {
       type: [String, Boolean],
       default: true,
       required: false
     },
+    // Logo图片地址
     logo: {
       type: String,
       default: '',
       required: false
     },
+    // 头像地址
     avatar: {
       type: String,
       default: '',
@@ -62,7 +75,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped>// 页面头部样式
 .page-header {
   background: #fff;
   padding: 16px 32px 0;
@@ -152,7 +165,7 @@ export default {
     }
   }
 }
-
+// 移动端页面头部样式
 .mobile .page-header {
   .main {
     .row {
diff --git a/frontend/src/components/Result/Result.vue b/frontend/src/components/Result/Result.vue
index 99f7f19..2bdbd42 100644
--- a/frontend/src/components/Result/Result.vue
+++ b/frontend/src/components/Result/Result.vue
@@ -1,28 +1,34 @@
 <template>
+  <!-- 结果展示组件 -->
   <div class="result">
+    <!-- 根据成功或错误状态动态显示对应图标 -->
     <div>
       <a-icon :class="{ 'icon': true, [`${type}`]: true }" :type="localIsSuccess ? 'check-circle' : 'close-circle'"/>
     </div>
+    <!-- 标题区域，支持自定义插槽内容 -->
     <div class="title">
       <slot name="title">
         {{ title }}
       </slot>
     </div>
+    <!-- 描述区域，支持自定义插槽内容 -->
     <div class="description">
       <slot name="description">
         {{ description }}
       </slot>
     </div>
+    <!-- 额外信息区域，根据插槽内容动态显示 -->
     <div class="extra" v-if="$slots.default">
       <slot></slot>
     </div>
+    <!-- 操作区域，根据插槽内容动态显示 -->
     <div class="action" v-if="$slots.action">
       <slot name="action"></slot>
     </div>
   </div>
 </template>
 
-<script>
+<script>// 定义结果类型枚举
 const resultEnum = ['success', 'error']
 
 export default {
@@ -33,6 +39,7 @@ export default {
       type: Boolean,
       default: false
     },
+    // 结果类型，支持 success 或 error
     type: {
       type: String,
       default: resultEnum[0],
@@ -40,16 +47,19 @@ export default {
         return (val) => resultEnum.includes(val)
       }
     },
+    // 标题文本
     title: {
       type: String,
       default: ''
     },
+    // 描述文本
     description: {
       type: String,
       default: ''
     }
   },
   computed: {
+    // 根据类型动态计算是否成功
     localIsSuccess: function () {
       return this.type === resultEnum[0]
     }
@@ -69,9 +79,11 @@ export default {
       line-height: 72px;
       margin-bottom: 24px;
     }
+    // 成功状态的图标样式
     .success {
       color: #52c41a;
     }
+    // 错误状态的图标样式
     .error {
       color: red;
     }
diff --git a/frontend/src/components/SettingDrawer/SettingItem.vue b/frontend/src/components/SettingDrawer/SettingItem.vue
index 2b3b553..51435eb 100644
--- a/frontend/src/components/SettingDrawer/SettingItem.vue
+++ b/frontend/src/components/SettingDrawer/SettingItem.vue
@@ -1,12 +1,22 @@
 <template>
+  <!-- 设置项容器 -->
   <div class="setting-drawer-index-item">
+    <!-- 设置项标题 -->
     <h3 class="setting-drawer-index-title">{{ title }}</h3>
+    <!-- 插槽内容，用于显示设置项的具体内容 -->
     <slot></slot>
+    <!-- 根据props中的divider决定是否显示分割线 -->
     <a-divider v-if="divider"/>
   </div>
 </template>
 
 <script>
+/**
+ * 设置项组件
+ *
+ * @param {String} title - 设置项的标题，默认为空字符串
+ * @param {Boolean} divider - 是否显示设置项后的分割线，默认不显示
+ */
 export default {
   name: 'SettingItem',
   props: {
@@ -22,11 +32,11 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped>/* 设置项样式 */
 
   .setting-drawer-index-item {
     margin-bottom: 24px;
-
+    /* 设置项标题样式 */
     .setting-drawer-index-title {
       font-size: 14px;
       color: rgba(0, 0, 0, .85);
diff --git a/frontend/src/components/StandardFormRow/StandardFormRow.vue b/frontend/src/components/StandardFormRow/StandardFormRow.vue
index a4e261b..56ce695 100644
--- a/frontend/src/components/StandardFormRow/StandardFormRow.vue
+++ b/frontend/src/components/StandardFormRow/StandardFormRow.vue
@@ -1,15 +1,18 @@
 <template>
+  <!-- 标准表单行组件，根据不同的属性组合有不同的样式表现 -->
   <div :class="[prefixCls, lastCls, blockCls, gridCls]">
+    <!-- 标题部分，只有当title属性存在时才显示 -->
     <div v-if="title" class="antd-pro-components-standard-form-row-index-label">
       <span>{{ title }}</span>
     </div>
+    <!-- 内容部分，使用slot以便于自定义内容 -->
     <div class="antd-pro-components-standard-form-row-index-content">
       <slot></slot>
     </div>
   </div>
 </template>
 
-<script>
+<script>// 定义类名数组，用于根据不同属性动态添加类名
 const classes = [
   'antd-pro-components-standard-form-row-index-standardFormRowBlock',
   'antd-pro-components-standard-form-row-index-standardFormRowGrid',
@@ -17,6 +20,7 @@ const classes = [
 ]
 export default {
   name: 'StandardFormRow',
+  // 定义组件的属性，包括前缀类名、标题、以及三个控制样式的布尔值属性
   props: {
     prefixCls: {
       type: String,
@@ -36,6 +40,7 @@ export default {
       type: Boolean
     }
   },
+  // 计算属性，根据props的值动态返回对应的类名
   computed: {
     lastCls () {
       return this.last ? classes[2] : null
@@ -50,9 +55,9 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped>// 导入全局样式变量
 @import '../index.less';
-
+// 定义标准表单行的基础样式
 .antd-pro-components-standard-form-row-index-standardFormRow {
   display: flex;
   margin-bottom: 16px;
@@ -71,7 +76,7 @@ export default {
     padding: 0;
     line-height: 32px;
   }
-
+  // 标题部分的样式
   .antd-pro-components-standard-form-row-index-label {
     flex: 0 0 auto;
     margin-right: 24px;
@@ -87,27 +92,27 @@ export default {
       }
     }
   }
-
+  // 内容部分的样式
   .antd-pro-components-standard-form-row-index-content {
     flex: 1 1 0;
     /deep/ .ant-form-item:last-child {
       margin-right: 0;
     }
   }
-
+  // 当表单行是最后一个时的样式
   &.antd-pro-components-standard-form-row-index-standardFormRowLast {
     margin-bottom: 0;
     padding-bottom: 0;
     border: none;
   }
-
+  // 当表单行使用block样式时的样式
   &.antd-pro-components-standard-form-row-index-standardFormRowBlock {
     /deep/ .ant-form-item,
     div.ant-form-item-control-wrapper {
       display: block;
     }
   }
-
+  // 当表单行使用grid样式时的样式
   &.antd-pro-components-standard-form-row-index-standardFormRowGrid {
       /deep/ .ant-form-item,
       div.ant-form-item-control-wrapper {
diff --git a/frontend/src/components/tools/Breadcrumb.vue b/frontend/src/components/tools/Breadcrumb.vue
index 9bc141c..be8835a 100644
--- a/frontend/src/components/tools/Breadcrumb.vue
+++ b/frontend/src/components/tools/Breadcrumb.vue
@@ -1,6 +1,9 @@
 <template>
+  <!-- 面包屑组件 -->
   <a-breadcrumb class="breadcrumb">
+    <!-- 遍历面包屑列表，生成每个面包屑项 -->
     <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
+      <!-- 根据条件渲染面包屑项的链接或文本 -->
       <router-link
         v-if="item.name != name && index != 1"
         :to="{ path: item.path === '' ? '/' : item.path }"
@@ -14,26 +17,35 @@
 export default {
   data () {
     return {
+      // 当前路由名称
       name: '',
+      // 面包屑列表
       breadList: []
     }
   },
   created () {
+    // 在组件创建时获取面包屑信息
     this.getBreadcrumb()
   },
   methods: {
+    /**
+     * 获取面包屑信息
+     * 该方法根据当前路由生成面包屑列表
+     */
     getBreadcrumb () {
       this.breadList = []
       // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
-
+      // 设置当前路由名称
       this.name = this.$route.name
       this.$route.matched.forEach(item => {
         // item.name !== 'index' && this.breadList.push(item)
+        // 将匹配项添加到面包屑列表中
         this.breadList.push(item)
       })
     }
   },
   watch: {
+    // 监听路由变化，当路由变化时重新获取面包屑信息
     $route () {
       this.getBreadcrumb()
     }
diff --git a/frontend/src/components/tools/HeadInfo.vue b/frontend/src/components/tools/HeadInfo.vue
index 7fbc692..8ff7d8f 100644
--- a/frontend/src/components/tools/HeadInfo.vue
+++ b/frontend/src/components/tools/HeadInfo.vue
@@ -1,14 +1,19 @@
 <template>
+  <!-- 头部信息组件，根据props调整样式和布局 -->
   <div class="head-info" :class="center && 'center'">
+    <!-- 显示标题 -->
     <span>{{ title }}</span>
+    <!-- 显示内容 -->
     <p>{{ content }}</p>
+    <!-- 根据bordered prop决定是否显示边框 -->
     <em v-if="bordered"/>
   </div>
 </template>
 
-<script>
+<script>// 定义头部信息组件
 export default {
   name: 'HeadInfo',
+  // 组件属性，包括标题、内容、是否显示边框和文本是否居中
   props: {
     title: {
       type: String,
diff --git a/frontend/src/components/tools/Logo.vue b/frontend/src/components/tools/Logo.vue
index 3f4359c..80b061e 100644
--- a/frontend/src/components/tools/Logo.vue
+++ b/frontend/src/components/tools/Logo.vue
@@ -1,26 +1,34 @@
 <template>
+  <!-- Logo组件主体 -->
   <div class="logo">
+    <!-- 使用router-link组件创建到dashboard的链接 -->
     <router-link :to="{name:'dashboard'}">
+      <!-- 渲染LogoSvg组件，带alt属性说明 -->
       <LogoSvg alt="logo" />
+      <!-- 根据showTitle属性决定是否显示标题 -->
       <h1 v-if="showTitle">{{ title }}</h1>
     </router-link>
   </div>
 </template>
 
-<script>
+<script>// 导入并内联logo.svg作为组件
 import LogoSvg from '../../assets/logo.svg?inline'
 
+// 定义并导出一个名为Logo的组件
 export default {
   name: 'Logo',
+  // 注册组件内的组件
   components: {
     LogoSvg
   },
   props: {
+    // 设置title属性，类型为String，默认值为'Online Exam'，非必需
     title: {
       type: String,
       default: 'Online Exam',
       required: false
     },
+    // 设置showTitle属性，类型为Boolean，默认值为true，非必需
     showTitle: {
       type: Boolean,
       default: true,
diff --git a/frontend/src/components/tools/UserMenu.vue b/frontend/src/components/tools/UserMenu.vue
index 998c459..72e72c8 100644
--- a/frontend/src/components/tools/UserMenu.vue
+++ b/frontend/src/components/tools/UserMenu.vue
@@ -1,19 +1,28 @@
 <template>
+  <!-- 用户信息和操作菜单的容器 -->
   <div class="user-wrapper">
     <div class="content-box">
+      <!-- 用户下拉菜单 -->
       <a-dropdown>
+        <!-- 用户信息展示区域 -->
         <span class="action ant-dropdown-link user-dropdown-menu">
+          <!-- 用户头像 -->
           <a-avatar class="avatar" size="small" :src="avatar()"/>
+          <!-- 用户昵称 -->
           <span>{{ nickname() }}</span>
         </span>
+        <!-- 下拉菜单内容 -->
         <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
+          <!-- 账户设置菜单项 -->
           <a-menu-item key="1">
             <router-link :to="{ name: 'settings' }">
               <a-icon type="setting"/>
               <span>账户设置</span>
             </router-link>
           </a-menu-item>
+          <!-- 菜单分割符 -->
           <a-menu-divider/>
+          <!-- 退出登录菜单项 -->
           <a-menu-item key="3">
             <a href="javascript:;" @click="handleLogout">
               <a-icon type="logout"/>
@@ -44,6 +53,7 @@ export default {
           return that.Logout({}).then(() => {
             window.location.reload()
           }).catch(err => {
+            // 注销失败错误处理
             that.$message.error({
               title: '错误',
               description: err.message
@@ -51,6 +61,7 @@ export default {
           })
         },
         onCancel () {
+          // 取消注销操作
         }
       })
     }
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