src/views/ums/admin/index.vue

@@ -1,9 +1,14 @@
-<template> 
+<template>
+  <!-- 整体的应用容器 div -->
   <div class="app-container">
+    <!-- 筛选搜索区域的卡片容器，设置了阴影效果为无 -->
     <el-card class="filter-container" shadow="never">
       <div>
+        <!-- 搜索图标 -->
         <i class="el-icon-search"></i>
+        <!-- 筛选搜索的文字提示 -->
         <span>筛选搜索</span>
+        <!-- 查询搜索按钮，设置了样式为右浮动、按钮类型为主要（primary），点击时调用 handleSearchList 方法，按钮大小为 small -->
         <el-button
           style="float:right"
           type="primary"
@@ -11,6 +16,7 @@
           size="small">
           查询搜索
         </el-button>
+        <!-- 重置按钮，设置了样式为右浮动且距离右侧 15px，点击时调用 handleResetSearch 方法，按钮大小为 small -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -19,41 +25,57 @@
         </el-button>
       </div>
       <div style="margin-top: 15px">
+        <!-- 内联表单，绑定了 listQuery 数据对象，表单大小为 small，标签宽度为 140px -->
         <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+          <!-- 表单项目，标签为“输入搜索：” -->
           <el-form-item label="输入搜索：">
+            <!-- 输入框，双向绑定 listQuery.keyword，设置了类名、占位符以及可清空功能 -->
             <el-input v-model="listQuery.keyword" class="input-width" placeholder="帐号/姓名" clearable></el-input>
           </el-form-item>
         </el-form>
       </div>
     </el-card>
+    <!-- 操作区域的卡片容器，设置了阴影效果为无 -->
     <el-card class="operate-container" shadow="never">
+      <!-- 图标 -->
       <i class="el-icon-tickets"></i>
+      <!-- 数据列表的文字提示 -->
       <span>数据列表</span>
+      <!-- 添加按钮，大小为 mini，设置了类名，点击时调用 handleAdd 方法，设置了左侧外边距为 20px -->
       <el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
     </el-card>
+    <!-- 表格容器 div -->
     <div class="table-container">
+      <!-- el-table 组件，绑定了 list 数据用于展示表格内容，设置了加载状态绑定、宽度、边框等属性 -->
       <el-table ref="adminTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
+        <!-- 表格列，标签为“编号”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 id 属性 -->
         <el-table-column label="编号" width="100" align="center">
           <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“帐号”，内容居中对齐，通过插槽作用域展示对应行数据的 username 属性 -->
         <el-table-column label="帐号" align="center">
           <template slot-scope="scope">{{scope.row.username}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“姓名”，内容居中对齐，通过插槽作用域展示对应行数据的 nickName 属性 -->
         <el-table-column label="姓名" align="center">
           <template slot-scope="scope">{{scope.row.nickName}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“邮箱”，内容居中对齐，通过插槽作用域展示对应行数据的 email 属性 -->
         <el-table-column label="邮箱" align="center">
           <template slot-scope="scope">{{scope.row.email}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“添加时间”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 createTime 属性，并使用了 formatDateTime 过滤器进行格式化 -->
         <el-table-column label="添加时间" width="160" align="center">
           <template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“最后登录”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 loginTime 属性，并使用了 formatDateTime 过滤器进行格式化 -->
         <el-table-column label="最后登录" width="160" align="center">
           <template slot-scope="scope">{{scope.row.loginTime | formatDateTime}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“是否启用”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 status 属性，并使用 el-switch 组件进行切换操作，绑定了相关的事件和值 -->
         <el-table-column label="是否启用" width="140" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -64,6 +86,7 @@
             </el-switch>
           </template>
         </el-table-column>
+        <!-- 表格列，标签为“操作”，设置了宽度和内容居中对齐，通过插槽作用域展示操作按钮，包括分配角色、编辑、删除按钮，分别绑定了对应的点击事件方法 -->
         <el-table-column label="操作" width="180" align="center">
           <template slot-scope="scope">
             <el-button size="mini"
@@ -83,7 +106,9 @@
         </el-table-column>
       </el-table>
     </div>
+    <!-- 分页容器 div -->
     <div class="pagination-container">
+      <!-- el-pagination 分页组件，设置了背景色、相关页面切换事件绑定、布局样式、当前页、每页数量、可选每页数量数组以及总记录数等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -95,31 +120,39 @@
         :total="total">
       </el-pagination>
     </div>
+    <!-- 编辑/添加用户的对话框组件，根据 isEdit 变量来动态设置标题，绑定了显示状态，设置了宽度 -->
     <el-dialog
       :title="isEdit?'编辑用户':'添加用户'"
       :visible.sync="dialogVisible"
       width="40%">
+      <!-- 对话框内的表单，绑定了 admin 数据对象，设置了表单引用、标签宽度和大小 -->
       <el-form :model="admin"
                ref="adminForm"
                label-width="150px" size="small">
+        <!-- 表单项目，标签为“帐号：”，输入框双向绑定 admin.username -->
         <el-form-item label="帐号：">
           <el-input v-model="admin.username" style="width: 250px"></el-input>
         </el-form-item>
+        <!-- 表单项目，标签为“姓名：”，输入框双向绑定 admin.nickName -->
         <el-form-item label="姓名：">
           <el-input v-model="admin.nickName" style="width: 250px"></el-input>
         </el-form-item>
+        <!-- 表单项目，标签为“邮箱：”，输入框双向绑定 admin.email -->
         <el-form-item label="邮箱：">
           <el-input v-model="admin.email" style="width: 250px"></el-input>
         </el-form-item>
+        <!-- 表单项目，标签为“密码：”，输入框双向绑定 admin.password，设置了密码类型 -->
         <el-form-item label="密码：">
           <el-input v-model="admin.password"  type="password" style="width: 250px"></el-input>
         </el-form-item>
+        <!-- 表单项目，标签为“备注：”，输入框双向绑定 admin.note，设置了文本域类型和行数 -->
         <el-form-item label="备注：">
           <el-input v-model="admin.note"
                     type="textarea"
                     :rows="5"
                     style="width: 250px"></el-input>
         </el-form-item>
+        <!-- 表单项目，标签为“是否启用：”，使用单选按钮组绑定 admin.status -->
         <el-form-item label="是否启用：">
           <el-radio-group v-model="admin.status">
             <el-radio :label="1">是</el-radio>
@@ -127,15 +160,18 @@
           </el-radio-group>
         </el-form-item>
       </el-form>
+      <!-- 对话框底部的按钮区域，通过插槽定义了取消和确定按钮，分别绑定了对应的点击事件 -->
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false" size="small">取 消</el-button>
         <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
       </span>
     </el-dialog>
+    <!-- 分配角色的对话框组件，设置了标题、绑定了显示状态和宽度 -->
     <el-dialog
       title="分配角色"
       :visible.sync="allocDialogVisible"
       width="30%">
+      <!-- 多选的下拉选择框，绑定了 allocRoleIds 数据，设置了占位符、大小和宽度，通过循环渲染选项 -->
       <el-select v-model="allocRoleIds" multiple placeholder="请选择" size="small" style="width: 80%">
         <el-option
           v-for="item in allRoleList"
@@ -144,6 +180,7 @@
           :value="item.id">
         </el-option>
       </el-select>
+      <!-- 对话框底部的按钮区域，通过插槽定义了取消和确定按钮，分别绑定了对应的点击事件 -->
       <span slot="footer" class="dialog-footer">
         <el-button @click="allocDialogVisible = false" size="small">取 消</el-button>
         <el-button type="primary" @click="handleAllocDialogConfirm()" size="small">确 定</el-button>
@@ -152,193 +189,250 @@
   </div>
 </template>
 <script>
-  import {fetchList,createAdmin,updateAdmin,updateStatus,deleteAdmin,getRoleByAdmin,allocRole} from '@/api/login';
+// 从 @/api/login 模块中导入多个 API 函数，用于获取列表、创建管理员、更新管理员、更新状态、删除管理员、获取管理员角色、分配角色等操作
-  import {fetchAllRoleList} from '@/api/role';
+import {fetchList,createAdmin,updateAdmin,updateStatus,deleteAdmin,getRoleByAdmin,allocRole} from '@/api/login';
-  import {formatDate} from '@/utils/date';
+// 从 @/api/role 模块中导入获取所有角色列表的 API 函数
+import {fetchAllRoleList} from '@/api/role';
+// 从 @/utils/date 模块中导入日期格式化函数
+import {formatDate} from '@/utils/date';
 
-  const defaultListQuery = {
+// 默认的列表查询参数对象，包含当前页码、每页数量、搜索关键字等初始值
-    pageNum: 1,
+const defaultListQuery = {
-    pageSize: 10,
+  pageNum: 1,
-    keyword: null
+  pageSize: 10,
-  };
+  keyword: null
-  const defaultAdmin = {
+};
-    id: null,
+// 默认的管理员对象，包含各个管理员相关属性的初始值，如 id、用户名、密码、姓名、邮箱、备注、状态等
-    username: null,
+const defaultAdmin = {
-    password: null,
+  id: null,
-    nickName: null,
+  username: null,
-    email: null,
+  password: null,
-    note: null,
+  nickName: null,
-    status: 1
+  email: null,
-  };
+  note: null,
-  export default {
+  status: 1
-    name: 'adminList',
+};
-    data() {
+
-      return {
+export default {
-        listQuery: Object.assign({}, defaultListQuery),
+  name: 'adminList',
-        list: null,
+  data() {
-        total: null,
+    return {
-        listLoading: false,
+      // 列表查询参数对象，初始化为 defaultListQuery 的副本，用于存储当前的查询条件
-        dialogVisible: false,
+      listQuery: Object.assign({}, defaultListQuery),
-        admin: Object.assign({}, defaultAdmin),
+      // 存储列表数据
-        isEdit: false,
+      list: null,
-        allocDialogVisible: false,
+      // 总记录数
-        allocRoleIds:[],
+      total: null,
-        allRoleList:[],
+      // 列表加载状态，用于控制加载动画显示
-        allocAdminId:null
+      listLoading: false,
+      // 编辑/添加用户对话框的显示状态
+      dialogVisible: false,
+      // 当前操作的管理员对象，初始化为 defaultAdmin 的副本，用于存储编辑或添加时的数据
+      admin: Object.assign({}, defaultAdmin),
+      // 是否为编辑状态的标识
+      isEdit: false,
+      // 分配角色对话框的显示状态
+      allocDialogVisible: false,
+      // 已分配的角色 ID 数组，用于存储当前管理员已分配的角色 ID
+      allocRoleIds:[],
+      // 所有角色列表数据
+      allRoleList:[],
+      // 当前要分配角色的管理员 ID
+      allocAdminId:null
+    }
+  },
+  created() {
+    // 在组件创建时，调用获取列表数据的方法和获取所有角色列表的方法
+    this.getList();
+    this.getAllRoleList();
+  },
+  filters: {
+    formatDateTime(time) {
+      // 如果传入的时间为空或 null，则返回 'N/A'
+      if (time == null || time === '') {
+        return 'N/A';
       }
+      // 将传入的时间字符串转换为 Date 对象
+      let date = new Date(time);
+      // 使用 formatDate 函数对日期进行格式化并返回
+      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
+    }
+  },
+  methods: {
+    handleResetSearch() {
+      // 重置列表查询参数为默认值
+      this.listQuery = Object.assign({}, defaultListQuery);
     },
-    created() {
+    handleSearchList() {
+      // 将当前页码重置为 1，然后调用获取列表数据的方法，用于执行筛选搜索操作
+      this.listQuery.pageNum = 1;
       this.getList();
-      this.getAllRoleList();
     },
-    filters: {
+    handleSizeChange(val) {
-      formatDateTime(time) {
+      // 当每页数量改变时，将当前页码重置为 1，更新每页数量为传入的值，然后调用获取列表数据的方法，用于重新加载数据
-        if (time == null || time === '') {
+      this.listQuery.pageNum = 1;
-          return 'N/A';
+      this.listQuery.pageSize = val;
-        }
+      this.getList();
-        let date = new Date(time);
-        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-      }
     },
-    methods: {
+    handleCurrentChange(val) {
-      handleResetSearch() {
+      // 当当前页码改变时，更新当前页码为传入的值，然后调用获取列表数据的方法，用于加载对应页码的数据
-        this.listQuery = Object.assign({}, defaultListQuery);
+      this.listQuery.pageNum = val;
-      },
+      this.getList();
-      handleSearchList() {
+    },
-        this.listQuery.pageNum = 1;
+    handleAdd() {
-        this.getList();
+      // 显示编辑/添加用户对话框，设置为添加状态，将管理员对象重置为默认值
-      },
+      this.dialogVisible = true;
-      handleSizeChange(val) {
+      this.isEdit = false;
-        this.listQuery.pageNum = 1;
+      this.admin = Object.assign({},defaultAdmin);
-        this.listQuery.pageSize = val;
+    },
-        this.getList();
+    handleStatusChange(index, row) {
-      },
+      // 弹出确认框，询问是否要修改状态
-      handleCurrentChange(val) {
+      this.$confirm('是否要修改该状态?', '提示', {
-        this.listQuery.pageNum = val;
+        confirmButtonText: '确定',
-        this.getList();
+        cancelButtonText: '取消',
-      },
+        type: 'warning'
-      handleAdd() {
+      }).then(() => {
-        this.dialogVisible = true;
+        // 如果确认修改，调用更新状态的 API 函数，传入对应行的 ID 和要更新的状态数据，成功后显示成功提示消息
-        this.isEdit = false;
+        updateStatus(row.id, {status: row.status}).then(response => {
-        this.admin = Object.assign({},defaultAdmin);
+          this.$message({
-      },
+            type: 'success',
-      handleStatusChange(index, row) {
+            message: '修改成功!'
-        this.$confirm('是否要修改该状态?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          updateStatus(row.id, {status: row.status}).then(response => {
-            this.$message({
-              type: 'success',
-              message: '修改成功!'
-            });
           });
-        }).catch(() => {
+        });
+      }).catch(() => {
+        // 如果取消修改，显示取消修改的提示消息，并重新获取列表数据
+        this.$message({
+          type: 'info',
+          message: '取消修改'
+        });
+        this.getList();
+      });
+    },
+    handleDelete(index, row) {
+      // 弹出确认框，询问是否要删除用户
+      this.$confirm('是否要删除该用户?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 如果确认删除，调用删除管理员的 API 函数，传入对应行的 ID，成功后显示删除成功提示消息，并重新获取列表数据
+        deleteAdmin(row.id).then(response => {
           this.$message({
-            type: 'info',
+            type: 'success',
-            message: '取消修改'
+            message: '删除成功!'
           });
           this.getList();
         });
-      },
+      });
-      handleDelete(index, row) {
+    },
-        this.$confirm('是否要删除该用户?', '提示', {
+    handleUpdate(index, row) {
-          confirmButtonText: '确定',
+      // 显示编辑/添加用户对话框，设置为编辑状态，将管理员对象赋值为当前要编辑的行数据
-          cancelButtonText: '取消',
+      this.dialogVisible = true;
-          type: 'warning'
+      this.isEdit = true;
-        }).then(() => {
+      this.admin = Object.assign({},row);
-          deleteAdmin(row.id).then(response => {
+    },
+    handleDialogConfirm() {
+      // 弹出确认框，询问是否要确认当前操作（编辑或添加）
+      this.$confirm('是否要确认?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 判断当前是否为编辑状态
+        if (this.isEdit) {
+          // 如果是编辑状态，调用更新管理员信息的 API 函数，传入当前管理员的 ID 和管理员数据对象
+          // 成功后显示修改成功的提示消息，关闭编辑/添加对话框，并重新获取列表数据，以更新界面显示
+          updateAdmin(this.admin.id,this.admin).then(response => {
             this.$message({
-              type: 'success',
+              message: '修改成功！',
-              message: '删除成功!'
+              type: 'success'
             });
+            this.dialogVisible =false;
             this.getList();
-          });
+          })
-        });
+        } else {
-      },
+          // 如果是添加状态，调用创建管理员的 API 函数，传入管理员数据对象
-      handleUpdate(index, row) {
+          // 成功后显示添加成功的提示消息，关闭编辑/添加对话框，并重新获取列表数据，以更新界面显示
-        this.dialogVisible = true;
+          createAdmin(this.admin).then(response => {
-        this.isEdit = true;
-        this.admin = Object.assign({},row);
-      },
-      handleDialogConfirm() {
-        this.$confirm('是否要确认?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          if (this.isEdit) {
-            updateAdmin(this.admin.id,this.admin).then(response => {
-              this.$message({
-                message: '修改成功！',
-                type: 'success'
-              });
-              this.dialogVisible =false;
-              this.getList();
-            })
-          } else {
-            createAdmin(this.admin).then(response => {
-              this.$message({
-                message: '添加成功！',
-                type: 'success'
-              });
-              this.dialogVisible =false;
-              this.getList();
-            })
-          }
-        })
-      },
-      handleAllocDialogConfirm(){
-        this.$confirm('是否要确认?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          let params = new URLSearchParams();
-          params.append("adminId", this.allocAdminId);
-          params.append("roleIds", this.allocRoleIds);
-          allocRole(params).then(response => {
             this.$message({
-              message: '分配成功！',
+              message: '添加成功！',
               type: 'success'
             });
-            this.allocDialogVisible = false;
+            this.dialogVisible =false;
+            this.getList();
           })
+        }
+      })
+    },
+    handleAllocDialogConfirm(){
+      // 弹出确认框，询问是否要确认分配角色操作
+      this.$confirm('是否要确认?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 创建 URLSearchParams 对象，用于构建请求参数
+        let params = new URLSearchParams();
+        // 将当前要分配角色的管理员 ID 添加到请求参数中
+        params.append("adminId", this.allocAdminId);
+        // 将已选择的角色 ID 数组添加到请求参数中
+        params.append("roleIds", this.allocRoleIds);
+        // 调用分配角色的 API 函数，传入构建好的请求参数
+        // 成功后显示分配成功的提示消息，并关闭分配角色对话框
+        allocRole(params).then(response => {
+          this.$message({
+            message: '分配成功！',
+            type: 'success'
+          });
+          this.allocDialogVisible = false;
         })
-      },
+      })
-      handleSelectRole(index,row){
+    },
-        this.allocAdminId = row.id;
+    handleSelectRole(index,row){
-        this.allocDialogVisible = true;
+      // 记录当前要分配角色的管理员 ID
-        this.getRoleListByAdmin(row.id);
+      this.allocAdminId = row.id;
-      },
+      // 显示分配角色对话框
-      getList() {
+      this.allocDialogVisible = true;
-        this.listLoading = true;
+      // 调用获取指定管理员已分配角色列表的方法，传入管理员 ID，用于初始化分配角色对话框中的已选角色数据
-        fetchList(this.listQuery).then(response => {
+      this.getRoleListByAdmin(row.id);
-          this.listLoading = false;
+    },
-          this.list = response.data.list;
+    getList() {
-          this.total = response.data.total;
+      // 设置列表加载状态为正在加载，用于显示加载动画等提示
-        });
+      this.listLoading = true;
-      },
+      // 调用获取列表数据的 API 函数，传入当前的列表查询参数对象
-      getAllRoleList() {
+      fetchList(this.listQuery).then(response => {
-        fetchAllRoleList().then(response => {
+        // 获取数据成功后，将列表加载状态设置为加载完成
-          this.allRoleList = response.data;
+        this.listLoading = false;
-        });
+        // 将获取到的列表数据赋值给 list 属性，用于在界面上展示
-      },
+        this.list = response.data.list;
-      getRoleListByAdmin(adminId) {
+        // 将获取到的总记录数赋值给 total 属性，用于分页等相关功能
-        getRoleByAdmin(adminId).then(response => {
+        this.total = response.data.total;
-          let allocRoleList = response.data;
+      });
-          this.allocRoleIds=[];
+    },
-          if(allocRoleList!=null&&allocRoleList.length>0){
+    getAllRoleList() {
-            for(let i=0;i<allocRoleList.length;i++){
+      // 调用获取所有角色列表的 API 函数
-              this.allocRoleIds.push(allocRoleList[i].id);
+      fetchAllRoleList().then(response => {
-            }
+        // 将获取到的所有角色列表数据赋值给 allRoleList 属性，用于在分配角色等相关功能中使用
+        this.allRoleList = response.data;
+      });
+    },
+    getRoleListByAdmin(adminId) {
+      // 调用获取指定管理员已分配角色列表的 API 函数，传入管理员 ID
+      getRoleByAdmin(adminId).then(response => {
+        // 获取到已分配角色列表数据
+        let allocRoleList = response.data;
+        // 初始化已分配的角色 ID 数组为空
+        this.allocRoleIds=[];
+        // 如果已分配角色列表不为空且有数据
+        if(allocRoleList!=null&&allocRoleList.length>0){
+          // 遍历已分配角色列表，将每个角色的 ID 添加到已分配的角色 ID 数组中
+          for(let i=0;i<allocRoleList.length;i++){
+            this.allocRoleIds.push(allocRoleList[i].id);
           }
-        });
+        }
-      }
+      });
     }
   }
+}
 </script>
 <style></style>
-
-

src/views/ums/menu/components/MenuDetail.vue

@@ -1,15 +1,20 @@
 <template>
+  <!-- 使用 el-card 组件创建一个表单容器卡片，设置阴影效果为无 -->
   <el-card class="form-container" shadow="never">
+    <!-- el-form 表单组件，绑定了 menu 数据对象作为表单数据模型，同时指定了表单验证规则、表单引用以及标签宽度 -->
     <el-form :model="menu"
              :rules="rules"
              ref="menuFrom"
              label-width="150px">
+      <!-- 表单项目，标签为“菜单名称：”，并指定了对应的数据验证属性 prop 为“title”，内部的输入框双向绑定 menu.title -->
       <el-form-item label="菜单名称：" prop="title">
         <el-input v-model="menu.title"></el-input>
       </el-form-item>
+      <!-- 表单项目，标签为“上级菜单：”，内部是一个下拉选择框，双向绑定 menu.parentId，设置了占位符 -->
       <el-form-item label="上级菜单：">
         <el-select v-model="menu.parentId"
                    placeholder="请选择菜单">
+          <!-- 通过 v-for 循环渲染下拉选项，每个选项的 key、label 和 value 分别对应 item 的 id、title 和 id，数据来源于 selectMenuList -->
           <el-option
             v-for="item in selectMenuList"
             :key="item.id"
@@ -18,22 +23,27 @@
           </el-option>
         </el-select>
       </el-form-item>
+      <!-- 表单项目，标签为“前端名称：”，并指定了对应的数据验证属性 prop 为“name”，内部的输入框双向绑定 menu.name -->
       <el-form-item label="前端名称：" prop="name">
         <el-input v-model="menu.name"></el-input>
       </el-form-item>
+      <!-- 表单项目，标签为“前端图标：”，并指定了对应的数据验证属性 prop 为“icon”，内部包含一个输入框双向绑定 menu.icon 以及一个 svg-icon 组件，用于根据输入的图标类名显示图标 -->
       <el-form-item label="前端图标：" prop="icon">
         <el-input v-model="menu.icon" style="width: 80%"></el-input>
         <svg-icon style="margin-left: 8px" :icon-class="menu.icon"></svg-icon>
       </el-form-item>
+      <!-- 表单项目，标签为“是否显示：”，内部是一个单选按钮组，双向绑定 menu.hidden，用于选择是否显示该菜单 -->
       <el-form-item label="是否显示：">
         <el-radio-group v-model="menu.hidden">
           <el-radio :label="0">是</el-radio>
           <el-radio :label="1">否</el-radio>
         </el-radio-group>
       </el-form-item>
+      <!-- 表单项目，标签为“排序：”，内部的输入框双向绑定 menu.sort -->
       <el-form-item label="排序：">
         <el-input v-model="menu.sort"></el-input>
       </el-form-item>
+      <!-- 表单项目，包含两个按钮，提交按钮为主要类型（primary），点击时调用 onSubmit 方法并传入表单引用名；重置按钮在非编辑状态（!isEdit）下显示，点击时调用 resetForm 方法并传入表单引用名 -->
       <el-form-item>
         <el-button type="primary" @click="onSubmit('menuFrom')">提交</el-button>
         <el-button v-if="!isEdit" @click="resetForm('menuFrom')">重置</el-button>
@@ -41,113 +51,136 @@
     </el-form>
   </el-card>
 </template>
-
 <script>
-  import {fetchList, createMenu, updateMenu, getMenu} from '@/api/menu';
+// 从 @/api/menu 模块中导入多个 API 函数，用于获取菜单列表、创建菜单、更新菜单以及获取单个菜单信息等操作
+import {fetchList, createMenu, updateMenu, getMenu} from '@/api/menu';
+
+// 默认的菜单对象，包含各个菜单相关属性的初始值，如标题、上级菜单 ID、前端名称、前端图标、是否隐藏、排序等
+const defaultMenu = {
+  title: '',
+  parentId: 0,
+  name: '',
+  icon: '',
+  hidden: 0,
+  sort: 0
+};
 
-  const defaultMenu = {
+export default {
-    title: '',
+  name: "MenuDetail",
-    parentId: 0,
+  // 定义组件的 props 属性，接收一个名为 isEdit 的布尔类型属性，默认值为 false，用于判断当前是编辑状态还是新建状态
-    name: '',
+  props: {
-    icon: '',
+    isEdit: {
-    hidden: 0,
+      type: Boolean,
-    sort: 0
+      default: false
-  };
+    }
-  export default {
+  },
-    name: "MenuDetail",
+  data() {
-    props: {
+    return {
-      isEdit: {
+      // 菜单数据对象，初始化为 defaultMenu 的副本，用于存储当前操作的菜单相关数据
-        type: Boolean,
+      menu: Object.assign({}, defaultMenu),
-        default: false
+      // 用于存储上级菜单列表数据，供下拉选择框使用
+      selectMenuList: [],
+      // 表单验证规则对象，定义了菜单名称、前端名称、前端图标等字段的验证要求，如必填、长度范围等，以及触发验证的时机（如失去焦点时触发）
+      rules: {
+        title: [
+          {required: true, message: '请输入菜单名称', trigger: 'blur'},
+          {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+        ],
+        name: [
+          {required: true, message: '请输入前端名称', trigger: 'blur'},
+          {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+        ],
+        icon: [
+          {required: true, message: '请输入前端图标', trigger: 'blur'},
+          {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+        ]
       }
+    }
+  },
+  created() {
+    // 判断当前是否为编辑状态（通过 props 传入的 isEdit 属性判断）
+    if (this.isEdit) {
+      // 如果是编辑状态，调用获取单个菜单信息的 API 函数，传入从路由参数中获取的菜单 ID，成功后将获取到的菜单数据赋值给 menu 对象
+      getMenu(this.$route.query.id).then(response => {
+        this.menu = response.data;
+      });
+    } else {
+      // 如果不是编辑状态，将菜单数据对象重置为默认值
+      this.menu = Object.assign({}, defaultMenu);
+    }
+    // 调用获取上级菜单列表的方法，用于初始化上级菜单下拉选择框的数据
+    this.getSelectMenuList();
+  },
+  methods: {
+    getSelectMenuList() {
+      // 调用获取菜单列表的 API 函数，传入分页相关参数（这里固定获取第一页，每页 100 条数据）
+      fetchList(0, {pageSize: 100, pageNum: 1}).then(response => {
+        // 将获取到的菜单列表数据赋值给 selectMenuList 属性，用于在下拉选择框中展示
+        this.selectMenuList = response.data.list;
+        // 在上级菜单列表数据开头插入一个默认选项，表示“无上级菜单”，方便用户选择
+        this.selectMenuList.unshift({id: 0, title: '无上级菜单'});
+      });
     },
-    data() {
+    onSubmit(formName) {
-      return {
+      // 通过表单引用调用表单的验证方法，传入一个回调函数，验证结果作为参数传入该回调函数
-        menu: Object.assign({}, defaultMenu),
+      this.$refs[formName].validate((valid) => {
-        selectMenuList: [],
+        if (valid) {
-        rules: {
+          // 如果表单验证通过，弹出确认框，询问是否提交数据
-          title: [
+          this.$confirm('是否提交数据', '提示', {
-            {required: true, message: '请输入菜单名称', trigger: 'blur'},
+            confirmButtonText: '确定',
-            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+            cancelButtonText: '取消',
-          ],
+            type: 'warning'
-          name: [
+          }).then(() => {
-            {required: true, message: '请输入前端名称', trigger: 'blur'},
+            // 判断当前是否为编辑状态
-            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+            if (this.isEdit) {
-          ],
+              // 如果是编辑状态，调用更新菜单的 API 函数，传入从路由参数中获取的菜单 ID 和当前的菜单数据对象
-          icon: [
+              // 成功后显示修改成功的提示消息，停留 1000 毫秒后返回上一页（路由操作）
-            {required: true, message: '请输入前端图标', trigger: 'blur'},
+              updateMenu(this.$route.query.id, this.menu).then(response => {
-            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+                this.$message({
-          ]
+                  message: '修改成功',
+                  type: 'success',
+                  duration: 1000
+                });
+                this.$router.back();
+              });
+            } else {
+              // 如果不是编辑状态，调用创建菜单的 API 函数，传入当前的菜单数据对象
+              // 成功后先重置表单字段，再调用 resetForm 方法（重置相关数据），显示提交成功的提示消息，停留 1000 毫秒后返回上一页（路由操作）
+              createMenu(this.menu).then(response => {
+                this.$refs[formName].resetFields();
+                this.resetForm(formName);
+                this.$message({
+                  message: '提交成功',
+                  type: 'success',
+                  duration: 1000
+                });
+                this.$router.back();
+              });
+            }
+          });
+
+        } else {
+          // 如果表单验证失败，显示验证失败的提示消息，停留 1000 毫秒，并返回 false 阻止后续操作
+          this.$message({
+            message: '验证失败',
+            type: 'error',
+            duration: 1000
+          });
+          return false;
         }
-      }
+      });
     },
-    created() {
+    resetForm(formName) {
-      if (this.isEdit) {
+      // 通过表单引用调用表单的重置字段方法，重置表单所有字段
-        getMenu(this.$route.query.id).then(response => {
+      this.$refs[formName].resetFields();
-          this.menu = response.data;
+      // 将菜单数据对象重置为默认值
-        });
+      this.menu = Object.assign({}, defaultMenu);
-      } else {
+      // 重新调用获取上级菜单列表的方法，刷新上级菜单下拉选择框的数据
-        this.menu = Object.assign({}, defaultMenu);
-      }
       this.getSelectMenuList();
     },
-    methods: {
-      getSelectMenuList() {
-        fetchList(0, {pageSize: 100, pageNum: 1}).then(response => {
-          this.selectMenuList = response.data.list;
-          this.selectMenuList.unshift({id: 0, title: '无上级菜单'});
-        });
-      },
-      onSubmit(formName) {
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.$confirm('是否提交数据', '提示', {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning'
-            }).then(() => {
-              if (this.isEdit) {
-                updateMenu(this.$route.query.id, this.menu).then(response => {
-                  this.$message({
-                    message: '修改成功',
-                    type: 'success',
-                    duration: 1000
-                  });
-                  this.$router.back();
-                });
-              } else {
-                createMenu(this.menu).then(response => {
-                  this.$refs[formName].resetFields();
-                  this.resetForm(formName);
-                  this.$message({
-                    message: '提交成功',
-                    type: 'success',
-                    duration: 1000
-                  });
-                  this.$router.back();
-                });
-              }
-            });
-
-          } else {
-            this.$message({
-              message: '验证失败',
-              type: 'error',
-              duration: 1000
-            });
-            return false;
-          }
-        });
-      },
-      resetForm(formName) {
-        this.$refs[formName].resetFields();
-        this.menu = Object.assign({}, defaultMenu);
-        this.getSelectMenuList();
-      },
-    }
   }
+}
 </script>
-
 <style scoped>
-
+/* scoped 属性表示样式仅作用于当前组件内的元素，避免样式冲突 */
 </style>