From 84288b56f358dfb654bd7e9c1ddb584982093e0e Mon Sep 17 00:00:00 2001
From: 18655803770 <2814537061@qq.com>
Date: Thu, 10 Apr 2025 17:00:42 +0800
Subject: [PATCH] vue

---
 admin/src/components/SvgIcon/index.vue        |  40 +-
 admin/src/components/common/BreadCrumbs.vue   | 110 ++-
 admin/src/components/common/Editor.vue        | 163 ++--
 .../src/components/common/ExcelFileUpload.vue | 152 ++--
 admin/src/components/common/FileUpload.vue    | 149 ++--
 admin/src/components/home/HomeCard.vue        |  56 +-
 admin/src/components/home/HomeComment.vue     |  79 +-
 admin/src/components/home/HomeProgress.vue    |  53 +-
 .../src/components/index/IndexAsideStatic.vue | 777 +++++++++---------
 admin/src/components/index/IndexAsideSub.vue  |  39 +-
 admin/src/components/index/IndexHeader.vue    | 330 ++++----
 11 files changed, 1030 insertions(+), 918 deletions(-)

diff --git a/admin/src/components/SvgIcon/index.vue b/admin/src/components/SvgIcon/index.vue
index 27da76cf..ef6e03b9 100644
--- a/admin/src/components/SvgIcon/index.vue
+++ b/admin/src/components/SvgIcon/index.vue
@@ -1,31 +1,31 @@
 <template>
-  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
-    <use :xlink:href="iconName" />
+  <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <!-- 定义SVG图标组件 -->
+    <use :xlink:href="iconName" /> <!-- 使用图标符号 -->
   </svg>
 </template>
 
 <script>
 export default {
-  name: 'SvgIcon',
+  name: 'SvgIcon', <!-- 组件名称 -->
   props: {
-    iconClass: {
+    iconClass: { <!-- 图标类名 -->
       type: String,
-      required: true
+      required: true <!-- 必须传递 -->
     },
-    className: {
+    className: { <!-- 自定义类名 -->
       type: String,
-      default: ''
+      default: '' <!-- 默认为空 -->
     }
   },
   computed: {
-    iconName() {
-      return `#icon-${this.iconClass}`
+    iconName() { <!-- 计算图标符号名称 -->
+      return `#icon-${this.iconClass}`; <!-- 动态生成图标符号 -->
     },
-    svgClass() {
-      if (this.className) {
-        return 'svg-icon ' + this.className
+    svgClass() { <!-- 计算SVG类名 -->
+      if (this.className) { <!-- 如果有自定义类名 -->
+        return 'svg-icon ' + this.className; <!-- 返回组合类名 -->
       } else {
-        return 'svg-icon'
+        return 'svg-icon'; <!-- 否则返回默认类名 -->
       }
     }
   }
@@ -33,11 +33,11 @@ export default {
 </script>
 
 <style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
+.svg-icon { <!-- SVG图标的基本样式 -->
+  width: 1em; <!-- 宽度 -->
+  height: 1em; <!-- 高度 -->
+  vertical-align: -0.15em; <!-- 垂直对齐 -->
+  fill: currentColor; <!-- 使用当前文本颜色 -->
+  overflow: hidden; <!-- 隐藏溢出内容 -->
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/admin/src/components/common/BreadCrumbs.vue b/admin/src/components/common/BreadCrumbs.vue
index c6edec35..a55d28e1 100644
--- a/admin/src/components/common/BreadCrumbs.vue
+++ b/admin/src/components/common/BreadCrumbs.vue
@@ -1,9 +1,26 @@
 <template>
-  <el-breadcrumb class="app-breadcrumb" separator="/" style="height:43px;backgroundColor:rgba(98, 190, 84, 1);borderRadius:0 160px 0 0 ;padding:0px 20px 0px 20px;boxShadow:0px 0px 0px #f903d4;borderWidth:5px 3px 5px 5px;borderStyle:solid;borderColor:rgba(78, 147, 67, 1);">
-    <transition-group name="breadcrumb" class="box" :style="1==1?'justifyContent:flex-start;':1==2?'justifyContent:center;':'justifyContent:flex-end;'">
+  <!-- 导航面包屑组件 -->
+  <el-breadcrumb class="app-breadcrumb" separator="/" 
+                 style="height:43px; backgroundColor:rgba(98, 190, 84, 1); borderRadius:0 160px 0 0; padding:0px 20px 0px 20px; boxShadow:0px 0px 0px #f903d4; borderWidth:5px 3px 5px 5px; borderStyle:solid; borderColor:rgba(78, 147, 67, 1);">
+    
+    <!-- 动态调整面包屑布局 -->
+    <transition-group name="breadcrumb" class="box" 
+                      :style="1==1 ? 'justifyContent:flex-start;' : 1==2 ? 'justifyContent:center;' : 'justifyContent:flex-end;'">
+      
+      <!-- 遍历路由路径，生成面包屑项 -->
       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect" style="color:rgba(255, 255, 255, 1)">{{ item.name }}</span>
-        <a v-else @click.prevent="handleLink(item)">{{ item.name }}</a>
+        
+        <!-- 如果当前项不可点击或为最后一项，则显示文本 -->
+        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" 
+              class="no-redirect" 
+              style="color:rgba(255, 255, 255, 1)">
+          {{ item.name }}
+        </span>
+
+        <!-- 否则显示链接 -->
+        <a v-else @click.prevent="handleLink(item)">
+          {{ item.name }}
+        </a>
       </el-breadcrumb-item>
     </transition-group>
   </el-breadcrumb>
@@ -12,81 +29,99 @@
 <script>
 import pathToRegexp from 'path-to-regexp'
 import { generateTitle } from '@/utils/i18n'
+
 export default {
   data() {
     return {
-      levelList: null
+      levelList: null // 保存当前路由的面包屑路径
     }
   },
+  
+  // 监听路由变化，更新面包屑
   watch: {
     $route() {
       this.getBreadcrumb()
     }
   },
+  
+  // 初始化时获取面包屑路径
   created() {
     this.getBreadcrumb()
     this.breadcrumbStyleChange()
   },
+  
   methods: {
+    // 从 utils/i18n 中引入的国际化标题生成函数
     generateTitle,
+    
+    // 获取当前路由的面包屑路径
     getBreadcrumb() {
-      // only show routes with meta.title
       let route = this.$route
-      let matched = route.matched.filter(item => item.meta)
+      let matched = route.matched.filter(item => item.meta) // 只保留有 meta 的路由
       const first = matched[0]
-      matched = [{ path: '/index' }].concat(matched)
+      matched = [{ path: '/index' }].concat(matched) // 添加根路径
 
-      this.levelList = matched.filter(item => item.meta)
+      this.levelList = matched.filter(item => item.meta) // 更新面包屑路径
     },
+    
+    // 判断是否为仪表盘页面
     isDashboard(route) {
       const name = route && route.name
-      if (!name) {
-        return false
-      }
+      if (!name) return false
       return name.trim().toLocaleLowerCase() === 'Index'.toLocaleLowerCase()
     },
+    
+    // 路径参数编译
     pathCompile(path) {
-      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
       const { params } = this.$route
-      var toPath = pathToRegexp.compile(path)
-      return toPath(params)
+      const toPath = pathToRegexp.compile(path) // 将路径转换为正则表达式
+      return toPath(params) // 替换路径中的动态参数
     },
+    
+    // 处理面包屑点击事件
     handleLink(item) {
       const { redirect, path } = item
       if (redirect) {
-        this.$router.push(redirect)
+        this.$router.push(redirect) // 跳转到重定向地址
         return
       }
-      this.$router.push(path)
+      this.$router.push(path) // 跳转到指定路径
     },
+    
+    // 动态调整面包屑样式
     breadcrumbStyleChange(val) {
-      this.$nextTick(()=>{
-        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el=>{
-          el.innerText = "/"
-          el.style.color = "rgba(217, 217, 217, 1)"
+      this.$nextTick(() => {
+        // 修改分隔符样式
+        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__separator').forEach(el => {
+          el.innerText = "/" // 设置分隔符为 "/"
+          el.style.color = "rgba(217, 217, 217, 1)" // 设置颜色
         })
-        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el=>{
-          el.style.color = "rgba(255, 255, 255, 1)"
+        
+        // 修改链接样式
+        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner a').forEach(el => {
+          el.style.color = "rgba(255, 255, 255, 1)" // 设置链接颜色
         })
-        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el=>{
-          el.style.color = "rgba(255, 255, 255, 1)"
+        
+        // 修改不可点击项样式
+        document.querySelectorAll('.app-breadcrumb .el-breadcrumb__inner .no-redirect').forEach(el => {
+          el.style.color = "rgba(255, 255, 255, 1)" // 设置不可点击项颜色
         })
-
+        
+        // 动态调整头部高度
         let str = "2"
-        if(2 == str) {
+        if (2 == str) {
           let headHeight = "80px"
-          headHeight = parseInt(headHeight) + 10 + 'px'
-          document.querySelectorAll('.app-breadcrumb').forEach(el=>{
-            el.style.marginTop = headHeight
+          headHeight = parseInt(headHeight) + 10 + 'px' // 增加头部高度
+          document.querySelectorAll('.app-breadcrumb').forEach(el => {
+            el.style.marginTop = headHeight // 设置顶部外边距
           })
         }
-
       })
-    },
+    }
   }
 }
-</script>
 
+// 样式部分
 <style lang="scss" scoped>
 .app-breadcrumb {
   display: block;
@@ -97,13 +132,12 @@ export default {
     display: flex;
     width: 100%;
     height: 100%;
-    justify-content: flex-start;
+    justify-content: flex-start; /* 默认左对齐 */
     align-items: center;
   }
 
   .no-redirect {
-    color: #97a8be;
-    cursor: text;
+    color: #97a8be; /* 不可点击项的颜色 */
+    cursor: text; /* 设置鼠标悬停时为文本光标 */
   }
-}
-</style>
+</style>
\ No newline at end of file
diff --git a/admin/src/components/common/Editor.vue b/admin/src/components/common/Editor.vue
index a3da45dd..e9df5df5 100644
--- a/admin/src/components/common/Editor.vue
+++ b/admin/src/components/common/Editor.vue
@@ -1,41 +1,47 @@
+以下是为您的代码添加详细注释后的版本：
+
 <template>
   <div>
-    <!-- 图片上传组件辅助-->
+    <!-- 图片上传组件辅助 -->
     <el-upload
       class="avatar-uploader"
-      :action="getActionUrl"
-      name="file"
-      :headers="header"
-      :show-file-list="false"
-      :on-success="uploadSuccess"
-      :on-error="uploadError"
-      :before-upload="beforeUpload"
-    ></el-upload>
+      :action="getActionUrl" <!-- 图片上传接口 -->
+      name="file" <!-- 文件字段名 -->
+      :headers="header" <!-- 请求头 -->
+      :show-file-list="false" <!-- 不显示已上传文件列表 -->
+      :on-success="uploadSuccess" <!-- 上传成功回调 -->
+      :on-error="uploadError" <!-- 上传失败回调 -->
+      :before-upload="beforeUpload" <!-- 上传前回调 -->
+    >
+      <!-- 隐藏的文件输入框 -->
+      <input type="file" style="display:none;">
+    </el-upload>
 
+    <!-- 富文本编辑器 -->
     <quill-editor
       class="editor"
-      v-model="value"
-      ref="myQuillEditor"
-      :options="editorOption"
-      @blur="onEditorBlur($event)"
-      @focus="onEditorFocus($event)"
-      @change="onEditorChange($event)"
+      v-model="value" <!-- 绑定编辑器内容 -->
+      ref="myQuillEditor" <!-- 引用编辑器实例 -->
+      :options="editorOption" <!-- 编辑器配置 -->
+      @blur="onEditorBlur($event)" <!-- 失去焦点事件 -->
+      @focus="onEditorFocus($event)" <!-- 获得焦点事件 -->
+      @change="onEditorChange($event)" <!-- 内容改变事件 -->
     ></quill-editor>
   </div>
 </template>
-<script>
-// 工具栏配置
+
+<!-- 工具栏配置 -->
 const toolbarOptions = [
-  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
-  ["blockquote", "code-block"], // 引用  代码块
-  [{ header: 1 }, { header: 2 }], // 1、2 级标题
+  ["bold", "italic", "underline", "strike"], // 加粗、斜体、下划线、删除线
+  ["blockquote", "code-block"], // 引用、代码块
+  [{ header: 1 }, { header: 2 }], // 一级、二级标题
   [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
-  [{ script: "sub" }, { script: "super" }], // 上标/下标
+  [{ script: "sub" }, { script: "super" }], // 上标、下标
   [{ indent: "-1" }, { indent: "+1" }], // 缩进
   // [{'direction': 'rtl'}],                         // 文本方向
   [{ size: ["small", false, "large", "huge"] }], // 字体大小
   [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
-  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+  [{ color: [] }, { background: [] }], // 字体颜色、背景颜色
   [{ font: [] }], // 字体种类
   [{ align: [] }], // 对齐方式
   ["clean"], // 清除文本格式
@@ -43,23 +49,23 @@ const toolbarOptions = [
 ];
 
 import { quillEditor } from "vue-quill-editor";
-import "quill/dist/quill.core.css";
-import "quill/dist/quill.snow.css";
-import "quill/dist/quill.bubble.css";
+import "quill/dist/quill.core.css"; // 富文本核心样式
+import "quill/dist/quill.snow.css"; // 富文本雪地主题样式
+import "quill/dist/quill.bubble.css"; // 富文本气泡主题样式
 
 export default {
   props: {
-    /*编辑器的内容*/
+    /* 编辑器的内容 */
     value: {
       type: String
     },
     action: {
       type: String
     },
-    /*图片大小*/
+    /* 图片大小限制 */
     maxSize: {
       type: Number,
-      default: 4000 //kb
+      default: 4000 // kb
     }
   },
 
@@ -69,19 +75,18 @@ export default {
 
   data() {
     return {
-      content: this.value,
-      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
+      content: this.value, // 当前编辑器内容
+      quillUpdateImg: false, // 是否显示加载动画
       editorOption: {
-        placeholder: "",
-        theme: "snow", // or 'bubble'
+        placeholder: "", // 占位符
+        theme: "snow", // 主题
         modules: {
           toolbar: {
-            container: toolbarOptions,
-            // container: "#toolbar",
+            container: toolbarOptions, // 工具栏配置
             handlers: {
               image: function(value) {
                 if (value) {
-                  // 触发input框选择图片文件
+                  // 触发图片上传
                   document.querySelector(".avatar-uploader input").click();
                 } else {
                   this.quill.format("image", false);
@@ -99,142 +104,136 @@ export default {
           }
         }
       },
-      // serverUrl: `${base.url}sys/storage/uploadSwiper?token=${storage.get('token')}`, // 这里写你要上传的图片服务器地址
       header: {
-        // token: sessionStorage.token
-       'Token': this.$storage.get("Token")
-      } // 有的图片服务器要求请求头需要有token
+        'Token': this.$storage.get("Token") // 请求头中的 Token
+      }
     };
   },
   computed: {
-    // 计算属性的 getter
+    // 动态计算上传接口 URL
     getActionUrl: function() {
-      // return this.$base.url + this.action + "?token=" + this.$storage.get("token");
       return `/${this.$base.name}/` + this.action;
     }
   },
   methods: {
     onEditorBlur() {
-      //失去焦点事件
+      // 失去焦点事件
     },
     onEditorFocus() {
-      //获得焦点事件
+      // 获得焦点事件
     },
     onEditorChange() {
       console.log(this.value);
-      //内容改变事件
+      // 内容改变事件
       this.$emit("input", this.value);
     },
     // 富文本图片上传前
-    beforeUpload() {
-      // 显示loading动画
+    beforeUpload(file) {
+      // 显示加载动画
       this.quillUpdateImg = true;
+      const isLtMaxSize = file.size / 1024 < this.maxSize; // 检查文件大小是否超过限制
+      if (!isLtMaxSize) {
+        this.$message.error(`上传图片大小不能超过 ${this.maxSize} KB!`);
+      }
+      return isLtMaxSize;
     },
-
     uploadSuccess(res, file) {
-      // res为图片服务器返回的数据
-      // 获取富文本组件实例
-      let quill = this.$refs.myQuillEditor.quill;
-      // 如果上传成功
+      // 上传成功回调
+      let quill = this.$refs.myQuillEditor.quill; // 获取富文本实例
       if (res.code === 0) {
-        // 获取光标所在位置
-        let length = quill.getSelection().index;
-        // 插入图片  res.url为服务器返回的图片地址
-        quill.insertEmbed(length, "image", this.$base.url+ "upload/" +res.file);
-        // 调整光标到最后
-        quill.setSelection(length + 1);
+        let length = quill.getSelection().index; // 获取光标位置
+        quill.insertEmbed(length, "image", this.$base.url + "upload/" + res.file); // 插入图片
+        quill.setSelection(length + 1); // 移动光标
       } else {
         this.$message.error("图片插入失败");
       }
-      // loading动画消失
-      this.quillUpdateImg = false;
+      this.quillUpdateImg = false; // 隐藏加载动画
     },
-    // 富文本图片上传失败
     uploadError() {
-      // loading动画消失
-      this.quillUpdateImg = false;
+      // 上传失败回调
+      this.quillUpdateImg = false; // 隐藏加载动画
       this.$message.error("图片插入失败");
     }
   }
 };
-</script> 
 
+/* 样式部分 */
 <style>
 .editor {
-  line-height: normal !important;
+  line-height: normal !important; /* 设置行高 */
 }
 .ql-snow .ql-tooltip[data-mode="link"]::before {
-  content: "请输入链接地址:";
+  content: "请输入链接地址:"; /* 自定义链接提示 */
 }
 .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
-  border-right: 0px;
+  border-right: 0px; /* 修改链接编辑按钮样式 */
   content: "保存";
   padding-right: 0px;
 }
 
 .ql-snow .ql-tooltip[data-mode="video"]::before {
-  content: "请输入视频地址:";
+  content: "请输入视频地址:"; /* 自定义视频提示 */
 }
 .ql-container {
-	height: 400px;
+  height: 400px; /* 设置富文本高度 */
 }
 
 .ql-snow .ql-picker.ql-size .ql-picker-label::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item::before {
-  content: "14px";
+  content: "14px"; /* 设置默认字体大小 */
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
-  content: "10px";
+  content: "10px"; /* 设置小字体 */
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
-  content: "18px";
+  content: "18px"; /* 设置大字体 */
 }
 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
 .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
-  content: "32px";
+  content: "32px"; /* 设置超大字体 */
 }
 
 .ql-snow .ql-picker.ql-header .ql-picker-label::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item::before {
-  content: "文本";
+  content: "文本"; /* 设置默认标题 */
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
-  content: "标题1";
+  content: "标题1"; /* 设置标题1 */
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
-  content: "标题2";
+  content: "标题2"; /* 设置标题2 */
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
-  content: "标题3";
+  content: "标题3"; /* 设置标题3 */
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
-  content: "标题4";
+  content: "标题4"; /* 设置标题4 */
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
-  content: "标题5";
+  content: "标题5"; /* 设置标题5 */
 }
 .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
 .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
-  content: "标题6";
+  content: "标题6"; /* 设置标题6 */
 }
 
 .ql-snow .ql-picker.ql-font .ql-picker-label::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item::before {
-  content: "标准字体";
+  content: "标准字体"; /* 设置默认字体 */
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
-  content: "衬线字体";
+  content: "衬线字体"; /* 设置衬线字体 */
 }
 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
 .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
-  content: "等宽字体";
+  content: "等宽字体"; /* 设置等宽字体 */
 }
 </style>
\ No newline at end of file
diff --git a/admin/src/components/common/ExcelFileUpload.vue b/admin/src/components/common/ExcelFileUpload.vue
index 05464c46..2d2bf1ea 100644
--- a/admin/src/components/common/ExcelFileUpload.vue
+++ b/admin/src/components/common/ExcelFileUpload.vue
@@ -1,142 +1,146 @@
 <template>
   <div>
-    <!-- 上传文件组件 -->
+    <!-- 文件上传组件 -->
     <el-upload
-      ref="upload"
-      :action="getActionUrl"
-      list-type="picture-card"
-      accept=".xls,.xlsx"
-      :limit="limit"
-      :headers="myHeaders"
-      :file-list="fileList"
-      :on-exceed="handleExceed"
-      :on-preview="handleUploadPreview"
-      :on-remove="handleRemove"
-      :on-success="handleUploadSuccess"
-      :on-error="handleUploadErr"
-      :before-upload="handleBeforeUpload"
+      ref="upload" <!-- 引用上传组件实例 -->
+      :action="getActionUrl" <!-- 上传接口地址 -->
+      list-type="picture-card" <!-- 列表类型 -->
+      accept=".xls,.xlsx" <!-- 仅允许上传 Excel 文件 -->
+      :limit="limit" <!-- 最大上传数量 -->
+      :headers="myHeaders" <!-- 请求头 -->
+      :file-list="fileList" <!-- 绑定上传文件列表 -->
+      :on-exceed="handleExceed" <!-- 超出限制时触发 -->
+      :on-preview="handleUploadPreview" <!-- 点击预览时触发 -->
+      :on-remove="handleRemove" <!-- 删除文件时触发 -->
+      :on-success="handleUploadSuccess" <!-- 上传成功时触发 -->
+      :on-error="handleUploadErr" <!-- 上传失败时触发 -->
+      :before-upload="handleBeforeUpload" <!-- 上传前触发 -->
     >
-      <i class="el-icon-plus"></i>
-      <div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div>
+      <i class="el-icon-plus"></i> <!-- 默认显示的加号图标 -->
+      <div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div> <!-- 提示文字 -->
     </el-upload>
+    <!-- 查看大图弹窗 -->
     <el-dialog :visible.sync="dialogVisible" size="tiny" append-to-body>
-      <img width="100%" :src="dialogImageUrl" alt>
+      <img width="100%" :src="dialogImageUrl" alt> <!-- 展示图片 -->
     </el-dialog>
   </div>
 </template>
+
 <script>
-import storage from "@/utils/storage";
-import base from "@/utils/base";
+import storage from "@/utils/storage"; // 导入本地存储工具
+import base from "@/utils/base"; // 导入基础配置工具
+
 export default {
   data() {
     return {
       // 查看大图
-      dialogVisible: false,
-      // 查看大图
-      dialogImageUrl: "",
-      // 组件渲染图片的数组字段，有特殊格式要求
-      fileList: [],
-      fileUrlList: [],
-      myHeaders:{}
+      dialogVisible: false, // 控制弹窗是否显示
+      dialogImageUrl: "", // 当前查看的大图地址
+      fileList: [], // 上传文件列表
+      fileUrlList: [], // 上传文件 URL 列表
+      myHeaders: {} // 请求头
     };
   },
-  props: ["tip", "action", "limit", "multiple", "fileUrls"],
+  props: {
+    tip: String, // 提示文字
+    action: String, // 上传接口路径
+    limit: Number, // 最大上传数量
+    multiple: Boolean, // 是否支持多选
+    fileUrls: String // 已上传文件的 URL 列表
+  },
   mounted() {
-    this.init();
-    this.myHeaders= {
-      'Token':storage.get("Token")
-    }
+    this.init(); // 初始化
+    this.myHeaders = { // 设置请求头
+      'Token': storage.get("Token")
+    };
   },
   watch: {
     fileUrls: function(val, oldVal) {
-      //   console.log("new: %s, old: %s", val, oldVal);
+      // 监听父组件传来的文件 URL 列表变化
       this.init();
     }
   },
   computed: {
-    // 计算属性的 getter
+    // 动态计算上传接口 URL
     getActionUrl: function() {
-      // return base.url + this.action + "?token=" + storage.get("token");
       return `/${this.$base.name}/` + this.action;
     }
   },
   methods: {
     // 初始化
     init() {
-      //   console.log(this.fileUrls);
       if (this.fileUrls) {
-        this.fileUrlList = this.fileUrls.split(",");
-        let fileArray = [];
+        this.fileUrlList = this.fileUrls.split(","); // 将字符串拆分为数组
+        let fileArray = []; // 用于存储文件对象数组
         this.fileUrlList.forEach(function(item, index) {
-          var url = item;
-          var name = index;
+          var url = item; // 当前文件 URL
+          var name = index; // 文件名称（此处简单用索引替代）
           var file = {
             name: name,
             url: url
-          };
-          fileArray.push(file);
+          }; // 构造文件对象
+          fileArray.push(file); // 添加到数组中
         });
-        this.setFileList(fileArray);
+        this.setFileList(fileArray); // 更新文件列表
       }
     },
     handleBeforeUpload(file) {
-    
+      // 上传前的钩子函数
+      // 可在此处添加文件大小、类型等验证逻辑
     },
     // 上传文件成功后执行
     handleUploadSuccess(res, file, fileList) {
-      if (res && res.code === 0) {
-        fileList[fileList.length - 1]["url"] = "upload/" + file.response.file;
-        this.setFileList(fileList);
-        this.$emit("change", this.fileUrlList.join(","));
-        this.$message.success("文件导入成功");
+      if (res && res.code === 0) { // 检查返回结果
+        fileList[fileList.length - 1]["url"] = "upload/" + file.response.file; // 更新文件 URL
+        this.setFileList(fileList); // 更新文件列表
+        this.$emit("change", this.fileUrlList.join(",")); // 通知父组件更新数据
+        this.$message.success("文件导入成功"); // 提示成功消息
       } else {
-        this.$message.error(res.msg);
+        this.$message.error(res.msg); // 提示错误消息
       }
     },
     // 图片上传失败
     handleUploadErr(err, file, fileList) {
-      this.$message.error("文件导入失败");
+      this.$message.error("文件导入失败"); // 提示失败消息
     },
     // 移除图片
     handleRemove(file, fileList) {
-      this.setFileList(fileList);
-      this.$emit("change", this.fileUrlList.join(","));
+      this.setFileList(fileList); // 更新文件列表
+      this.$emit("change", this.fileUrlList.join(",")); // 通知父组件更新数据
     },
     // 查看大图
     handleUploadPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
+      this.dialogImageUrl = file.url; // 设置大图地址
+      this.dialogVisible = true; // 显示弹窗
     },
     // 限制图片数量
     handleExceed(files, fileList) {
-      this.$message.warning(`最多上传${this.limit}张图片`);
+      this.$message.warning(`最多上传${this.limit}张图片`); // 提示超出限制
     },
     // 重新对fileList进行赋值
     setFileList(fileList) {
-      var fileArray = [];
-      var fileUrlArray = [];
-      // 有些图片不是公开的，所以需要携带token信息做权限校验
-      var token = storage.get("token");
-      let _this = this;
+      var fileArray = []; // 用于存储文件对象数组
+      var fileUrlArray = []; // 用于存储文件 URL 数组
+      var token = storage.get("Token"); // 获取 Token
+      let _this = this; // 保存当前上下文
       fileList.forEach(function(item, index) {
-        var url = item.url.split("?")[0];
-    if(!url.startsWith("http")) {
-      url = _this.$base.url+url
-    }
-        var name = item.name;
-        var file = {
+        var url = item.url.split("?")[0]; // 获取文件 URL
+        if (!url.startsWith("http")) { // 如果 URL 不是以 http 开头，则拼接基础路径
+          url = _this.$base.url + url;
+        }
+        var name = item.name; // 文件名称
+        var file = { // 构造文件对象
           name: name,
-          url: url + "?token=" + token
+          url: url + "?token=" + token // 添加 Token 参数
         };
-        fileArray.push(file);
-        fileUrlArray.push(url);
+        fileArray.push(file); // 添加到文件对象数组
+        fileUrlArray.push(url); // 添加到文件 URL 数组
       });
-      this.fileList = fileArray;
-      this.fileUrlList = fileUrlArray;
+      this.fileList = fileArray; // 更新文件列表
+      this.fileUrlList = fileUrlArray; // 更新文件 URL 列表
     }
   }
 };
-</script>
-<style lang="scss" scoped>
-</style>
 
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/admin/src/components/common/FileUpload.vue b/admin/src/components/common/FileUpload.vue
index 0b01d544..1e6c6aa4 100644
--- a/admin/src/components/common/FileUpload.vue
+++ b/admin/src/components/common/FileUpload.vue
@@ -1,140 +1,145 @@
 <template>
   <div>
-    <!-- 上传文件组件 -->
+    <!-- 文件上传组件 -->
     <el-upload
-      ref="upload"
-      :action="getActionUrl"
-      list-type="picture-card"
-      :multiple="multiple"
-      :limit="limit"
-      :headers="myHeaders"
-      :file-list="fileList"
-      :on-exceed="handleExceed"
-      :on-preview="handleUploadPreview"
-      :on-remove="handleRemove"
-      :on-success="handleUploadSuccess"
-      :on-error="handleUploadErr"
-      :before-upload="handleBeforeUpload"
+      ref="upload" <!-- 引用上传组件实例 -->
+      :action="getActionUrl" <!-- 上传接口地址 -->
+      list-type="picture-card" <!-- 列表类型 -->
+      :multiple="multiple" <!-- 是否支持多选 -->
+      :limit="limit" <!-- 最大上传数量 -->
+      :headers="myHeaders" <!-- 请求头 -->
+      :file-list="fileList" <!-- 绑定上传文件列表 -->
+      :on-exceed="handleExceed" <!-- 超出限制时触发 -->
+      :on-preview="handleUploadPreview" <!-- 点击预览时触发 -->
+      :on-remove="handleRemove" <!-- 删除文件时触发 -->
+      :on-success="handleUploadSuccess" <!-- 上传成功时触发 -->
+      :on-error="handleUploadErr" <!-- 上传失败时触发 -->
+      :before-upload="handleBeforeUpload" <!-- 上传前触发 -->
     >
-      <i class="el-icon-plus"></i>
-      <div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div>
+      <i class="el-icon-plus"></i> <!-- 默认显示的加号图标 -->
+      <div slot="tip" class="el-upload__tip" style="color:#838fa1;">{{tip}}</div> <!-- 提示文字 -->
     </el-upload>
+    <!-- 查看大图弹窗 -->
     <el-dialog :visible.sync="dialogVisible" size="tiny" append-to-body>
-      <img width="100%" :src="dialogImageUrl" alt>
+      <img width="100%" :src="dialogImageUrl" alt> <!-- 展示图片 -->
     </el-dialog>
   </div>
 </template>
+
 <script>
-import storage from "@/utils/storage";
-import base from "@/utils/base";
+import storage from "@/utils/storage"; // 导入本地存储工具
+import base from "@/utils/base"; // 导入基础配置工具
+
 export default {
   data() {
     return {
       // 查看大图
-      dialogVisible: false,
-      // 查看大图
-      dialogImageUrl: "",
-      // 组件渲染图片的数组字段，有特殊格式要求
-      fileList: [],
-      fileUrlList: [],
-      myHeaders:{}
+      dialogVisible: false, // 控制弹窗是否显示
+      dialogImageUrl: "", // 当前查看的大图地址
+      fileList: [], // 上传文件列表
+      fileUrlList: [], // 上传文件 URL 列表
+      myHeaders: {} // 请求头
     };
   },
-  props: ["tip", "action", "limit", "multiple", "fileUrls"],
+  props: {
+    tip: String, // 提示文字
+    action: String, // 上传接口路径
+    limit: Number, // 最大上传数量
+    multiple: Boolean, // 是否支持多选
+    fileUrls: String // 已上传文件的 URL 列表
+  },
   mounted() {
-    this.init();
-    this.myHeaders= {
-      'Token':storage.get("Token")
-    }
+    this.init(); // 初始化
+    this.myHeaders = { // 设置请求头
+      'Token': storage.get("Token")
+    };
   },
   watch: {
     fileUrls: function(val, oldVal) {
-      //   console.log("new: %s, old: %s", val, oldVal);
+      // 监听父组件传来的文件 URL 列表变化
       this.init();
     }
   },
   computed: {
-    // 计算属性的 getter
+    // 动态计算上传接口 URL
     getActionUrl: function() {
-      // return base.url + this.action + "?token=" + storage.get("token");
       return `/${this.$base.name}/` + this.action;
     }
   },
   methods: {
     // 初始化
     init() {
-      //   console.log(this.fileUrls);
       if (this.fileUrls) {
-        this.fileUrlList = this.fileUrls.split(",");
-        let fileArray = [];
+        this.fileUrlList = this.fileUrls.split(","); // 将字符串拆分为数组
+        let fileArray = []; // 用于存储文件对象数组
         this.fileUrlList.forEach(function(item, index) {
-          var url = item;
-          var name = index;
+          var url = item; // 当前文件 URL
+          var name = index; // 文件名称（此处简单用索引替代）
           var file = {
             name: name,
             url: url
-          };
-          fileArray.push(file);
+          }; // 构造文件对象
+          fileArray.push(file); // 添加到数组中
         });
-        this.setFileList(fileArray);
+        this.setFileList(fileArray); // 更新文件列表
       }
     },
     handleBeforeUpload(file) {
-	
+      // 上传前的钩子函数
+      // 可在此处添加文件大小、类型等验证逻辑
     },
     // 上传文件成功后执行
     handleUploadSuccess(res, file, fileList) {
-      if (res && res.code === 0) {
-        fileList[fileList.length - 1]["url"] = "upload/" + file.response.file;
-        this.setFileList(fileList);
-        this.$emit("change", this.fileUrlList.join(","));
+      if (res && res.code === 0) { // 检查返回结果
+        fileList[fileList.length - 1]["url"] = "upload/" + file.response.file; // 更新文件 URL
+        this.setFileList(fileList); // 更新文件列表
+        this.$emit("change", this.fileUrlList.join(",")); // 通知父组件更新数据
       } else {
-        this.$message.error(res.msg);
+        this.$message.error(res.msg); // 提示错误消息
       }
     },
     // 图片上传失败
     handleUploadErr(err, file, fileList) {
-      this.$message.error("文件上传失败");
+      this.$message.error("文件上传失败"); // 提示失败消息
     },
     // 移除图片
     handleRemove(file, fileList) {
-      this.setFileList(fileList);
-      this.$emit("change", this.fileUrlList.join(","));
+      this.setFileList(fileList); // 更新文件列表
+      this.$emit("change", this.fileUrlList.join(",")); // 通知父组件更新数据
     },
     // 查看大图
     handleUploadPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
+      this.dialogImageUrl = file.url; // 设置大图地址
+      this.dialogVisible = true; // 显示弹窗
     },
     // 限制图片数量
     handleExceed(files, fileList) {
-      this.$message.warning(`最多上传${this.limit}张图片`);
+      this.$message.warning(`最多上传${this.limit}张图片`); // 提示超出限制
     },
     // 重新对fileList进行赋值
     setFileList(fileList) {
-      var fileArray = [];
-      var fileUrlArray = [];
-      // 有些图片不是公开的，所以需要携带token信息做权限校验
-      var token = storage.get("token");
-      let _this = this;
+      var fileArray = []; // 用于存储文件对象数组
+      var fileUrlArray = []; // 用于存储文件 URL 数组
+      var token = storage.get("Token"); // 获取 Token
+      let _this = this; // 保存当前上下文
       fileList.forEach(function(item, index) {
-        var url = item.url.split("?")[0];
-	if(!url.startsWith("http")) {
-	  url = _this.$base.url+url
-	}
-        var name = item.name;
-        var file = {
+        var url = item.url.split("?")[0]; // 获取文件 URL
+        if (!url.startsWith("http")) { // 如果 URL 不是以 http 开头，则拼接基础路径
+          url = _this.$base.url + url;
+        }
+        var name = item.name; // 文件名称
+        var file = { // 构造文件对象
           name: name,
-          url: url + "?token=" + token
+          url: url + "?token=" + token // 添加 Token 参数
         };
-        fileArray.push(file);
-        fileUrlArray.push(url);
+        fileArray.push(file); // 添加到文件对象数组
+        fileUrlArray.push(url); // 添加到文件 URL 数组
       });
-      this.fileList = fileArray;
-      this.fileUrlList = fileUrlArray;
+      this.fileList = fileArray; // 更新文件列表
+      this.fileUrlList = fileUrlArray; // 更新文件 URL 列表
     }
   }
 };
-</script>
+
 <style lang="scss" scoped>
-</style>
+</style>
\ No newline at end of file
diff --git a/admin/src/components/home/HomeCard.vue b/admin/src/components/home/HomeCard.vue
index bcd8f3f9..3ca198f5 100644
--- a/admin/src/components/home/HomeCard.vue
+++ b/admin/src/components/home/HomeCard.vue
@@ -1,60 +1,72 @@
 <template>
   <el-card class="box-card">
+    <!-- 卡片头部 -->
     <div slot="header" class="header">
+      <!-- 标题 -->
       <span>{{title}}</span>
+      <!-- 标签 -->
       <span>
         <el-tag size="small" :type="titleTag">{{titleUnit}}</el-tag>
       </span>
     </div>
+    <!-- 主体内容 -->
     <div class="content">
+      <!-- 主要内容 -->
       {{content}}&nbsp;&nbsp;
+      <!-- 单位 -->
       <span class="unit">{{contentUnit}}</span>
     </div>
+    <!-- 底部信息 -->
     <div class="bottom">
+      <!-- 左侧标题 -->
       <span>{{bottomTitle}}</span>
+      <!-- 右侧内容 -->
       <span>
         {{bottomContent}}
+        <!-- 图标 -->
         <i :class="bottomIcon"></i>
       </span>
     </div>
   </el-card>
 </template>
+
 <script>
 export default {
   props: [
-    "title",
-    "titleTag",
-    "titleUnit",
-    "content",
-    "contentUnit",
-    "bottomTitle",
-    "bottomContent",
-    "bottomIcon"
+    "title", // 标题
+    "titleTag", // 标题标签类型
+    "titleUnit", // 标题单位
+    "content", // 主要内容
+    "contentUnit", // 内容单位
+    "bottomTitle", // 底部标题
+    "bottomContent", // 底部内容
+    "bottomIcon" // 底部图标类名
   ]
 };
 </script>
+
 <style lang="scss" scoped>
 .box-card {
-  margin-right: 10px;
+  margin-right: 10px; // 卡片之间的间距
   .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    display: flex; // 使用弹性布局
+    justify-content: space-between; // 水平分布
+    align-items: center; // 垂直居中
   }
   .content {
-    font-size: 30px;
-    font-weight: bold;
-    color: #666;
-    text-align: center;
+    font-size: 30px; // 主内容字体大小
+    font-weight: bold; // 加粗
+    color: #666; // 字体颜色
+    text-align: center; // 文字居中
     .unit {
-      font-size: 16px;
+      font-size: 16px; // 单位字体大小
     }
   }
   .bottom {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 10px;
+    display: flex; // 使用弹性布局
+    justify-content: space-between; // 水平分布
+    align-items: center; // 垂直居中
+    margin-top: 10px; // 上方间距
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/admin/src/components/home/HomeComment.vue b/admin/src/components/home/HomeComment.vue
index ea5c08c7..f68b68d9 100644
--- a/admin/src/components/home/HomeComment.vue
+++ b/admin/src/components/home/HomeComment.vue
@@ -1,33 +1,40 @@
 <template>
   <div class="home-comment">
+    <!-- 标题 -->
     <div class="title">用户留言</div>
+    <!-- 留言列表 -->
     <div class="comment-list">
-      <div v-for="(item,index) in list"  v-bind:key="index" class="comment-item">
+      <!-- 循环渲染每个留言项 -->
+      <div v-for="(item, index) in list" :key="index" class="comment-item">
+        <!-- 用户头像和用户名 -->
         <div class="user-content">
           <el-image
             class="avator"
-            :src="item.avator"
+            :src="item.avator" // 设置头像图片源
           ></el-image>
-          <span class="user">{{item.name}}</span>
+          <span class="user">{{ item.name }}</span> <!-- 显示用户名 -->
         </div>
-        <div class="comment">{{item.content}}</div>
-        <div class="create-time">{{item.createTime}}</div>
+        <!-- 留言内容 -->
+        <div class="comment">{{ item.content }}</div>
+        <!-- 创建时间 -->
+        <div class="create-time">{{ item.createTime }}</div>
       </div>
     </div>
   </div>
 </template>
+
 <script>
 export default {
   data() {
     return {
       list: [
         {
-          name: "MaskLin",
+          name: "MaskLin", // 用户名
           avator:
-            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", // 头像图片
           content:
-            "你以为只要长得漂亮就有男生喜欢？你以为只要有了钱漂亮妹子就自己贴上来了？你以为学霸就能找到好工作？我告诉你吧，这些都是真的！",
-          createTime: "5月02日 00:00"
+            "你以为只要长得漂亮就有男生喜欢？你以为只要有了钱漂亮妹子就自己贴上来了？你以为学霸就能找到好工作？我告诉你吧，这些都是真的！", // 留言内容
+          createTime: "5月02日 00:00" // 创建时间
         },
         {
           name: "MaskLin",
@@ -53,49 +60,49 @@ export default {
     };
   }
 };
-</script>
+
 <style lang="scss" scoped>
 .home-comment {
-  background: #ffffff;
+  background: #ffffff; // 背景颜色
   .title {
-    font-size: 18px;
-    color: #666;
-    font-weight: bold;
-    padding: 10px;
-    border-bottom: 1px solid #eeeeee;
+    font-size: 18px; // 字体大小
+    color: #666; // 文字颜色
+    font-weight: bold; // 加粗
+    padding: 10px; // 内边距
+    border-bottom: 1px solid #eeeeee; // 下方边框
   }
   .comment-list {
-    padding: 10px;
+    padding: 10px; // 内边距
     .comment-item {
-      padding: 10px;
-      border-bottom: 1px solid #eeeeee;
+      padding: 10px; // 内边距
+      border-bottom: 1px solid #eeeeee; // 下方边框
       .user-content {
-        display: flex;
-        align-items: center;
+        display: flex; // 弹性布局
+        align-items: center; // 垂直居中
         .user {
-          font-size: 18px;
-          color: #666;
-          font-weight: bold;
-          line-height: 50px;
-          margin-left: 10px;
+          font-size: 18px; // 字体大小
+          color: #666; // 文字颜色
+          font-weight: bold; // 加粗
+          line-height: 50px; // 行高
+          margin-left: 10px; // 左侧外边距
         }
         .avator {
-          width: 50px;
-          height: 50px;
-          border-radius: 50%;
+          width: 50px; // 宽度
+          height: 50px; // 高度
+          border-radius: 50%; // 圆形
         }
       }
       .comment {
-        margin-top: 10px;
-        font-size: 14px;
-        color: #888888;
+        margin-top: 10px; // 上方外边距
+        font-size: 14px; // 字体大小
+        color: #888888; // 文字颜色
       }
       .create-time {
-        margin-top: 15px;
-        font-size: 14px;
-        color: #888888;
+        margin-top: 15px; // 上方外边距
+        font-size: 14px; // 字体大小
+        color: #888888; // 文字颜色
       }
     }
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/admin/src/components/home/HomeProgress.vue b/admin/src/components/home/HomeProgress.vue
index 46a96c16..ee940f85 100644
--- a/admin/src/components/home/HomeProgress.vue
+++ b/admin/src/components/home/HomeProgress.vue
@@ -1,55 +1,68 @@
 <template>
   <div class="home-progress">
+    <!-- 第一个标题 -->
     <div class="title">月访问量</div>
+    <!-- 提示文字 -->
     <div class="tip">同上期增长</div>
+    <!-- 进度条组件 -->
     <el-progress
       class="progress"
-      :text-inside="true"
-      :stroke-width="24"
-      :percentage="20"
-      status="success"
+      :text-inside="true" // 将文字显示在进度条内部
+      :stroke-width="24" // 进度条宽度
+      :percentage="20" // 进度百分比
+      status="success" // 状态为成功
     ></el-progress>
+
+    <!-- 第二个标题 -->
     <div class="title">月用户量</div>
+    <!-- 提示文字 -->
     <div class="tip">同上期增长</div>
+    <!-- 进度条组件 -->
     <el-progress
       class="progress"
       :text-inside="true"
       :stroke-width="24"
-      :percentage="50"
-      status="success"
+      :percentage="50" // 进度百分比
+      status="success" // 状态为成功
     ></el-progress>
+
+    <!-- 第三个标题 -->
     <div class="title">月收入</div>
+    <!-- 提示文字 -->
     <div class="tip">同上期减少</div>
+    <!-- 进度条组件 -->
     <el-progress
       class="progress"
       :text-inside="true"
       :stroke-width="24"
-      :percentage="28"
-      status="exception"
+      :percentage="28" // 进度百分比
+      status="exception" // 状态为异常
     ></el-progress>
   </div>
 </template>
+
 <script>
 export default {};
 </script>
+
 <style lang="scss">
 .home-progress {
-  background: #ffffff;
-  height: 400px;
-  padding: 20px;
+  background: #ffffff; // 背景颜色
+  height: 400px; // 高度
+  padding: 20px; // 内边距
   .title {
-    color: #666666;
-    font-weight: bold;
-    font-size: 20px;
-    margin-top: 10px;
+    color: #666666; // 文字颜色
+    font-weight: bold; // 加粗
+    font-size: 20px; // 字体大小
+    margin-top: 10px; // 上方外边距
   }
   .tip {
-    color: #888888;
-    font-size: 16px;
-    margin-top: 10px;
+    color: #888888; // 文字颜色
+    font-size: 16px; // 字体大小
+    margin-top: 10px; // 上方外边距
   }
   .progress {
-    margin-top: 10px;
+    margin-top: 10px; // 上方外边距
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/admin/src/components/index/IndexAsideStatic.vue b/admin/src/components/index/IndexAsideStatic.vue
index e49965db..fbdbc168 100644
--- a/admin/src/components/index/IndexAsideStatic.vue
+++ b/admin/src/components/index/IndexAsideStatic.vue
@@ -1,26 +1,65 @@
 <template>
   <el-aside class="index-aside" width="200px">
     <div class="index-aside-inner menulist">
-      <div v-for="item in menuList" :key="item.roleName" v-if="role==item.roleName" class="menulist-item">
+      <!-- 动态渲染菜单 -->
+      <div v-for="item in menuList" :key="item.roleName" v-if="role == item.roleName" class="menulist-item">
+        <!-- 用户头像 -->
         <div class="menulistImg" v-if="false && 2 == 2">
-          <el-image :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}' v-if="'http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg'" src="http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg" fit="cover" />
+          <el-image
+            :style='{
+              padding: "0",
+              boxShadow: "0 0 6px rgba(0,0,0,0)",
+              margin: "0",
+              borderColor: "rgba(0,0,0,0)",
+              borderRadius: "0",
+              borderWidth: "0",
+              width: "100%",
+              borderStyle: "solid",
+              height: "auto"
+            }'
+            v-if="'http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg'"
+            src="http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg"
+            fit="cover"
+          />
         </div>
-		<el-menu :mode="2 == 1? 'horizontal':'vertical'" :unique-opened="true" class="el-menu-demo" default-active="0">
-          <el-menu-item index="0" @click="menuHandler('')"><i v-if="false" class="el-icon-menu el-icon-s-home" />首页</el-menu-item>
-          <el-submenu :index="1+''">
+        
+        <!-- 主菜单 -->
+        <el-menu
+          :mode="2 == 1 ? 'horizontal' : 'vertical'"
+          :unique-opened="true"
+          class="el-menu-demo"
+          default-active="0"
+        >
+          <!-- 首页菜单项 -->
+          <el-menu-item index="0" @click="menuHandler('')">
+            <i v-if="false" class="el-icon-menu el-icon-s-home" />
+            首页
+          </el-menu-item>
+          
+          <!-- 个人中心子菜单 -->
+          <el-submenu :index="1 + ''">
             <template slot="title">
-				<i v-if="false" class="el-icon-menu el-icon-user-solid" />
-				<span>个人中心</span>
+              <i v-if="false" class="el-icon-menu el-icon-user-solid" />
+              <span>个人中心</span>
             </template>
-            <el-menu-item :index="1-1" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
-            <el-menu-item :index="1-2" @click="menuHandler('center')">个人信息</el-menu-item>
+            <el-menu-item :index="1 - 1" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
+            <el-menu-item :index="1 - 2" @click="menuHandler('center')">个人信息</el-menu-item>
           </el-submenu>
-          <el-submenu v-for=" (menu,index) in item.backMenu" :key="menu.menu" :index="index+2+''">
+          
+          <!-- 动态渲染子菜单 -->
+          <el-submenu v-for="(menu, index) in item.backMenu" :key="menu.menu" :index="index + 2 + ''">
             <template slot="title">
-				<i v-if="false" class="el-icon-menu" :class="icons[index]" />
-				<span>{{ menu.menu }}</span>
+              <i v-if="false" class="el-icon-menu" :class="icons[index]" />
+              <span>{{ menu.menu }}</span>
             </template>
-            <el-menu-item v-for=" (child,sort) in menu.child" :key="sort" :index="(index+2)+'-'+sort" @click="menuHandler(child.tableName)">{{ child.menu }}</el-menu-item>
+            <el-menu-item
+              v-for="(child, sort) in menu.child"
+              :key="sort"
+              :index="(index + 2) + '-' + sort"
+              @click="menuHandler(child.tableName)"
+            >
+              {{ child.menu }}
+            </el-menu-item>
           </el-submenu>
         </el-menu>
       </div>
@@ -30,12 +69,13 @@
 
 <script>
 import menu from '@/utils/menu'
+
 export default {
   data() {
     return {
-      menuList: [],
-      dynamicMenuRoutes: [],
-      role: '',
+      menuList: [], // 动态菜单数据
+      dynamicMenuRoutes: [], // 动态路由数据
+      role: '', // 当前用户角色
       icons: [
         'el-icon-s-cooperation',
         'el-icon-s-order',
@@ -78,146 +118,144 @@ export default {
         'el-icon-stopwatch',
       ],
       menulistStyle: '${template.back.menulist.menulistStyle}',
-	  menulistBorderBottom: {},
+      menulistBorderBottom: {}, // 边框样式
     }
   },
   mounted() {
+    // 初始化菜单数据
     const menus = menu.list()
-    if(menus) {
-        this.menuList = menus
+    if (menus) {
+      this.menuList = menus
     } else {
-        let params = {
-            page: 1,
-            limit: 1,
-            sort: 'id',
+      let params = {
+        page: 1,
+        limit: 1,
+        sort: 'id',
+      }
+      this.$http({
+        url: "menu/list",
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.menuList = JSON.parse(data.data.list[0].menujson)
+          this.$storage.set("menus", this.menuList)
         }
-        this.$http({
-            url: "menu/list",
-            method: "get",
-            params: params
-        }).then(({
-            data
-        }) => {
-            if (data && data.code === 0) {
-                this.menuList = JSON.parse(data.data.list[0].menujson);
-                this.$storage.set("menus", this.menuList);
-            }
-        })
+      })
     }
+    // 获取当前用户角色
     this.role = this.$storage.get('role')
   },
-  created(){
-    setTimeout(()=>{
+  created() {
+    // 延迟加载样式
+    setTimeout(() => {
       this.menulistStyleChange()
-    },10)
-    this.icons.sort(()=>{
-      return (0.5-Math.random())
-    })
-	this.lineBorder()
+    }, 10)
+    // 随机排序图标
+    this.icons.sort(() => 0.5 - Math.random())
+    this.lineBorder()
   },
   methods: {
-	lineBorder() {
-		let style = '${template.back.menulist.menulistStyle}'
-		let w = '${template.back.menulist.menulistLineWidth}'
-		let s = '${template.back.menulist.menulistLineStyle}'
-		let c = '${template.back.menulist.menulistLineColor}'
-		if(style == 'vertical') {
-			this.menulistBorderBottom = {
-				borderBottomWidth: w,
-				borderBottomStyle: s,
-				borderBottomColor: c
-			}
-		} else {
-			this.menulistBorderBottom = {
-				borderRightWidth: w,
-				borderRightStyle: s,
-				borderRightColor: c
-			}
-		}
-	},
+    lineBorder() {
+      let style = '${template.back.menulist.menulistStyle}'
+      let w = '${template.back.menulist.menulistLineWidth}'
+      let s = '${template.back.menulist.menulistLineStyle}'
+      let c = '${template.back.menulist.menulistLineColor}'
+      
+      if (style == 'vertical') {
+        this.menulistBorderBottom = {
+          borderBottomWidth: w,
+          borderBottomStyle: s,
+          borderBottomColor: c
+        }
+      } else {
+        this.menulistBorderBottom = {
+          borderRightWidth: w,
+          borderRightStyle: s,
+          borderRightColor: c
+        }
+      }
+    },
     menuHandler(name) {
       let router = this.$router
-      name = '/'+name
+      name = '/' + name
       router.push(name)
     },
-    // 菜单
-    setMenulistHoverColor(){
-      let that = this
-	  return;
-      this.$nextTick(()=>{
-        document.querySelectorAll('.menulist .el-menu-item').forEach(el=>{
+    // 菜单样式调整
+    menulistStyleChange() {
+      this.setMenulistIconColor()
+      this.setMenulistHoverColor()
+      this.setMenulistStyleHeightChange()
+      let str = "2"
+      if (1 == str) {
+        this.$nextTick(() => {
+          document.querySelectorAll('.el-container .el-container').forEach(el => {
+            el.style.display = "block"
+            el.style.paddingTop = "80px" // header 高度
+          })
+          document.querySelectorAll('.el-aside').forEach(el => {
+            el.style.width = "100%"
+            el.style.height = "auto"
+            el.style.paddingTop = '0'
+          })
+          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el => {
+            el.style.paddingTop = '0'
+            el.style.width = "100%"
+          })
+        })
+      }
+      if (2 === str) {
+        this.$nextTick(() => {
+          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el => {
+            el.style.paddingTop = "80px"
+          })
+        })
+      }
+    },
+    setMenulistHoverColor() {
+      return
+      this.$nextTick(() => {
+        document.querySelectorAll('.menulist .el-menu-item').forEach(el => {
           el.addEventListener("mouseenter", e => {
             e.stopPropagation()
             el.style.backgroundColor = "${template.back.menulist.menulistHoverColor}"
           })
           el.addEventListener("mouseleave", e => {
             e.stopPropagation()
-            // el.style.backgroundColor = "${template.back.menulist.menulistBgColor}"
-			el.style.background = "none"
+            el.style.backgroundColor = "none"
           })
           el.addEventListener("focus", e => {
             e.stopPropagation()
             el.style.backgroundColor = "${template.back.menulist.menulistHoverColor}"
           })
         })
-        document.querySelectorAll('.menulist .el-submenu__title').forEach(el=>{
+        document.querySelectorAll('.menulist .el-submenu__title').forEach(el => {
           el.addEventListener("mouseenter", e => {
             e.stopPropagation()
             el.style.backgroundColor = "${template.back.menulist.menulistHoverColor}"
           })
           el.addEventListener("mouseleave", e => {
             e.stopPropagation()
-            // el.style.backgroundColor = "${template.back.menulist.menulistBgColor}"
-			el.style.background = "none"
+            el.style.backgroundColor = "none"
           })
         })
       })
     },
     setMenulistIconColor() {
-      this.$nextTick(()=>{
-        document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el=>{
+      this.$nextTick(() => {
+        document.querySelectorAll('.menulist .el-submenu__title .el-submenu__icon-arrow').forEach(el => {
           el.style.color = "${template.back.menulist.menulistIconColor}"
         })
       })
     },
-    menulistStyleChange() {
-      this.setMenulistIconColor()
-      this.setMenulistHoverColor()
-      this.setMenulistStyleHeightChange()
-      let str = "2"
-      if(1 == str) {
-        this.$nextTick(()=>{
-          document.querySelectorAll('.el-container .el-container').forEach(el=>{
-            el.style.display = "block"
-            el.style.paddingTop = "80px" // header 高度
-          })
-          document.querySelectorAll('.el-aside').forEach(el=>{
-            el.style.width = "100%"
-            el.style.height = "auto"
-            el.style.paddingTop = '0'
-          })
-          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
-            el.style.paddingTop = '0'
-			el.style.width = "100%"
-          })
-        })
-      }
-      if(2 === str) {
-        this.$nextTick(()=>{
-          document.querySelectorAll('.index-aside .index-aside-inner').forEach(el=>{
-            el.style.paddingTop = "80px"
-          })
-        })
-      }
-    },
     setMenulistStyleHeightChange() {
-		return;
-      this.$nextTick(()=>{
-        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el=>{
+      return
+      this.$nextTick(() => {
+        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-menu-item').forEach(el => {
           el.style.height = "${template.back.menulist.menulistHeight}"
           el.style.lineHeight = "${template.back.menulist.menulistHeight}"
         })
-        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el=>{
+        document.querySelectorAll('.menulist-item>.el-menu--horizontal>.el-submenu>.el-submenu__title').forEach(el => {
           el.style.height = "${template.back.menulist.menulistHeight}"
           el.style.lineHeight = "${template.back.menulist.menulistHeight}"
         })
@@ -226,276 +264,281 @@ export default {
   }
 }
 </script>
+
 <style lang="scss" scoped>
-	.el-container {
-		display: block;
-	}
-  .index-aside {
-    position: relative;
-    overflow: hidden;
-	display: flex;
-	flex-wrap: wrap;
+.el-container {
+  display: block;
+}
+.index-aside {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
 
-    .menulistImg {
-		font-size: 0;
-		box-sizing: border-box;
+  .menulistImg {
+    font-size: 0;
+    box-sizing: border-box;
 
-      .el-image {
-        margin: 0 auto;
-        width: 100px;
-        height: 100px;
-        border-radius: 100%;
-        display: block;
+    .el-image {
+      margin: 0 auto;
+      width: 100px;
+      height: 100px;
+      border-radius: 100%;
+      display: block;
+    }
+  }
+
+  .index-aside-inner {
+    height: 100%;
+    margin-right: -17px;
+    margin-bottom: -17px;
+    overflow: scroll;
+    overflow-x: hidden !important;
+    padding-top: 80px;
+    box-sizing: border-box;
+
+    &:focus {
+      outline: none;
+    }
+
+    & /deep/ .el-menu {
+      border: 0;
+      background-color: transparent;
+    }
+  }
+
+  .index-aside .index-aside-inner.menulist {
+    height: auto !important;
+  }
+
+  .menulist-item {
+    width: 200px;
+    padding: 15px 20px;
+    margin: 0;
+    border-radius: 0;
+    border-width: 0 !important;
+    border-style: solid !important;
+    border-color: rgba(254, 236, 190, 1) !important;
+    background: #FEECBE !important;
+    box-shadow: 0 0 6px rgba(30, 144, 255, 0.2);
+    box-sizing: border-box;
+  }
+
+  .el-menu-demo {
+    box-sizing: border-box;
+    min-height: calc(100vh - 80px);
+
+    & > .el-menu-item {
+      width: auto;
+      height: auto !important;
+      line-height: 24px !important;
+      padding: 10px 22px 10px 10px;
+      margin: 0 0 10px 0;
+      color: rgba(255, 255, 255, 1);
+      font-size: 14px;
+      border-radius: 160px;
+      border-width: 5px 3px;
+      border-style: solid;
+      border-color: rgba(79, 150, 68, 1) !important;
+      background-color: rgba(98, 190, 84, 1) !important;
+      box-shadow: 0 0 6px rgba(255, 255, 255, 0);
+      box-sizing: initial;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      box-sizing: border-box;
+
+      .el-icon-menu {
+        margin: 0 5px 0 0;
+        padding: 0;
+        width: 24px;
+        line-height: 24px;
+        color: rgba(199, 21, 133, 1);
+        font-size: 16px;
+        border-radius: 0;
+        border-width: 0;
+        border-style: solid;
+        border-color: #fff;
+        background-color: rgba(255, 255, 255, 0);
+        box-shadow: 0 0 6px rgba(255, 255, 255, 0);
       }
     }
-	
-	    .index-aside-inner {
-      height: 100%;
-      margin-right: -17px;
-      margin-bottom: -17px;
-      overflow: scroll;
-      overflow-x: hidden !important;
-      padding-top: 80px;
+
+    .el-submenu {
+      margin: 0 0 10px 0;
+    }
+
+    & /deep/ .el-submenu__title {
+      width: auto;
+      height: auto !important;
+      line-height: 24px !important;
+      padding: 10px 22px 10px 10px;
+      color: rgba(255, 255, 255, 1);
+      font-size: 14px;
+      border-radius: 160px;
+      border-width: 5px 3px;
+      border-style: solid;
+      border-color: rgba(79, 150, 68, 1) !important;
+      background-color: rgba(98, 190, 84, 1) !important;
+      box-shadow: 0 0 6px rgba(255, 255, 255, 0);
+      box-sizing: initial;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
       box-sizing: border-box;
 
-      &:focus {
-        outline: none;
+      .el-icon-menu {
+        margin: 0 5px 0 0;
+        padding: 0;
+        width: 24px;
+        line-height: 24px;
+        color: rgba(199, 21, 133, 1);
+        font-size: 16px;
+        border-radius: 0;
+        border-width: 0;
+        border-style: solid;
+        border-color: #fff;
+        background-color: rgba(255, 255, 255, 0);
+        box-shadow: 0 0 6px rgba(255, 255, 255, 0);
       }
 
-      & /deep/ .el-menu {
-        border: 0;
-		background-color: transparent;
+      .el-submenu__icon-arrow {
+        margin: 0 10px 0 0;
+        padding: 0;
+        width: 12px;
+        line-height: 12px;
+        color: rgba(255, 255, 255, 1) !important;
+        font-size: 12px;
+        border-radius: 0;
+        border-width: 0;
+        border-style: solid;
+        border-color: #fff;
+        background-color: rgba(255, 255, 255, 0);
+        box-shadow: 0 0 6px rgba(255, 255, 255, 0);
+        position: absolute;
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+        text-align: center;
+        display: block;
+      }
+    }
+
+    & /deep/ .el-menu.el-menu--inline {
+      width: 120px;
+      height: auto;
+      padding: 0;
+      margin: 0 auto 5px;
+      border-radius: 4px;
+      border-width: 0;
+      border-style: solid;
+      border-color: rgba(0, 0, 0, 0.3);
+      background-color: rgba(88, 171, 75, 1);
+      box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+
+      .el-menu-item {
+        width: 100%;
+        height: 44px;
+        line-height: 44px;
+        padding: 0 !important;
+        margin: 0;
+        color: rgba(249, 249, 249, 1) !important;
+        font-size: 14px;
+        border-radius: 0;
+        border-width: 0 0 1px 0;
+        border-style: solid;
+        border-color: rgba(255, 255, 255, 0.75);
+        background-color: rgba(255, 255, 255, 0) !important;
+        box-shadow: 0 0 6px rgba(30, 144, 255, 0);
+        text-align: center;
+        min-width: auto;
+
+        &.is-active {
+          width: 100%;
+          height: 44px;
+          line-height: 44px;
+          padding: 0 !important;
+          margin: 0;
+          color: rgba(88, 171, 75, 1) !important;
+          font-size: 14px;
+          border-radius: 0;
+          border-width: 0;
+          border-style: solid;
+          border-color: rgba(0, 0, 0, 0);
+          background-color: rgba(255, 255, 255, 1) !important;
+          box-shadow: 0 0 6px rgba(30, 144, 255, 0);
+          text-align: center;
+        }
+
+        &:hover {
+          width: 100%;
+          height: 44px;
+          line-height: 44px;
+          padding: 0 !important;
+          margin: 0;
+          color: rgba(88, 171, 75, 1) !important;
+          font-size: 14px;
+          border-radius: 0;
+          border-width: 0;
+          border-style: solid;
+          border-color: rgba(0, 0, 0, 0);
+          background-color: rgba(255, 255, 255, 1) !important;
+          box-shadow: 0 0 6px rgba(30, 144, 255, 0);
+          text-align: center;
+        }
       }
     }
-		
-			.index-aside .index-aside-inner.menulist {
-		height: auto !important;
-	}
-	.menulist-item {
-		width: 200px;
-		padding: 15px 20px;
-		margin: 0;
-		border-radius: 0;
-		border-width: 0 !important;
-		border-style: solid !important;
-		border-color: rgba(254, 236, 190, 1) !important;
-		background: #FEECBE !important;
-		box-shadow: 0 0 6px rgba(30, 144, 255, .2);
-		box-sizing: border-box;
-	}
-			.el-menu-demo {
-		box-sizing: border-box;
-		min-height: calc(100vh - 80px);
-			
-		&>.el-menu-item {
-			width: auto;
-			height: auto !important;
-			line-height: 24px !important;
-			padding: 10px 22px 10px 10px;
-			margin: 0 0 10px 0;
-			color: rgba(255, 255, 255, 1);
-			font-size: 14px;
-			border-radius: 160px;
-			border-width: 5px 3px;
-			border-style: solid;
-			border-color: rgba(79, 150, 68, 1) !important;
-			background-color: rgba(98, 190, 84, 1) !important;
-			box-shadow: 0 0 6px rgba(255,255,255,0);
-			box-sizing: initial;
-			display: flex;
-			align-items: center;
-			justify-content: flex-start;
-			box-sizing: border-box;
-            
-            .el-icon-menu {
-            	margin: 0 5px 0 0;
-            	padding: 0;
-            	width: 24px;
-            	line-height: 24px;
-            	color: rgba(199, 21, 133, 1);
-            	font-size: 16px;
-            	border-radius: 0;
-            	border-width: 0;
-            	border-style: solid;
-            	border-color: #fff;
-            	background-color: rgba(255,255,255,0);
-            	box-shadow: 0 0 6px rgba(255,255,255,0);
-            }
-		}
-		
-		.el-submenu {
-			margin: 0 0 10px 0;
-		}
-		
-		& /deep/ .el-submenu__title {
-			width: auto;
-			height: auto !important;
-			line-height: 24px !important;
-			padding: 10px 22px 10px 10px;
-			color: rgba(255, 255, 255, 1);
-			font-size: 14px;
-			border-radius: 160px;
-			border-width: 5px 3px;
-			border-style: solid;
-			border-color: rgba(79, 150, 68, 1) !important;
-			background-color: rgba(98, 190, 84, 1) !important;
-			box-shadow: 0 0 6px rgba(255,255,255,0);
-			box-sizing: initial;
-			display: flex;
-			align-items: center;
-			justify-content: flex-start;
-			box-sizing: border-box;
-			
-			.el-icon-menu {
-				margin: 0 5px 0 0;
-				padding: 0;
-				width: 24px;
-				line-height: 24px;
-				color: rgba(199, 21, 133, 1);
-				font-size: 16px;
-				border-radius: 0;
-				border-width: 0;
-				border-style: solid;
-				border-color: #fff;
-				background-color: rgba(255,255,255,0);
-				box-shadow: 0 0 6px rgba(255,255,255,0);
-			}
-			
-			.el-submenu__icon-arrow {
-				margin: 0 10px 0 0;
-				padding: 0;
-				width: 12px;
-				line-height: 12px;
-				color: rgba(255, 255, 255, 1) !important;
-				font-size: 12px;
-				border-radius: 0;
-				border-width: 0;
-				border-style: solid;
-				border-color: #fff;
-				background-color: rgba(255,255,255,0);
-				box-shadow: 0 0 6px rgba(255,255,255,0);
-				position: absolute;
-				top: 50%;
-				right: 0;
-				transform: translateY(-50%);
-				text-align: center;
-								display: block;
-											}
-		}
-		
-		& /deep/ .el-menu.el-menu--inline {
-			width: 120px;
-			height: auto;
-			padding: 0;
-			margin: 0 auto 5px;
-			border-radius: 4px;
-			border-width: 0;
-			border-style: solid;
-			border-color: rgba(0,0,0,.3);
-			background-color: rgba(88, 171, 75, 1);
-			box-shadow: 0 0 6px rgba(0, 0, 0, .3);
-			
-			.el-menu-item {
-				width: 100%;
-				height: 44px;
-				line-height: 44px;
-				padding: 0 !important;
-				margin: 0;
-				color: rgba(249, 249, 249, 1) !important;
-				font-size: 14px;
-				border-radius: 0;
-				border-width: 0 0 1px 0;
-				border-style: solid;
-				border-color: rgba(255, 255, 255, 0.75);
-				background-color: rgba(255, 255, 255, 0) !important;
-				box-shadow: 0 0 6px rgba(30, 144, 255, 0);
-				text-align: center;
-				min-width: auto;
-                
-                &.is-active {
-                    width: 100%;
-                    height: 44px;
-                    line-height: 44px;
-                    padding: 0 !important;
-                    margin: 0;
-                    color: rgba(88, 171, 75, 1) !important;
-                    font-size: 14px;
-                    border-radius: 0;
-                    border-width: 0;
-                    border-style: solid;
-                    border-color: rgba(0, 0, 0, 0);
-                    background-color: rgba(255, 255, 255, 1) !important;
-                    box-shadow: 0 0 6px rgba(30, 144, 255, 0);
-                    text-align: center;
-                }
-				 
-				&:hover {
-					width: 100%;
-					height: 44px;
-					line-height: 44px;
-					padding: 0 !important;
-					margin: 0;
-					color: rgba(88, 171, 75, 1) !important;
-					font-size: 14px;
-					border-radius: 0;
-					border-width: 0;
-					border-style: solid;
-					border-color: rgba(0, 0, 0, 0);
-					background-color: rgba(255, 255, 255, 1) !important;
-					box-shadow: 0 0 6px rgba(30, 144, 255, 0);
-					text-align: center;
-				}
-			}
-		}
-	}
   }
-</style>
-<style>
+}
 
+/* 弹出菜单样式 */
+<style>
 .el-menu--horizontal .el-menu--popup {
-		width: 120px;
-		height: auto;
-		padding: 0;
-		margin: 0 auto 5px;
-		border-radius: 4px;
-		border-width: 0;
-		border-style: solid;
-		border-color: rgba(0,0,0,.3);
-		background-color: rgba(88, 171, 75, 1);
-		box-shadow: 0 0 6px rgba(0, 0, 0, .3);
-		min-width: auto;
-		}
+  width: 120px;
+  height: auto;
+  padding: 0;
+  margin: 0 auto 5px;
+  border-radius: 4px;
+  border-width: 0;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.3);
+  background-color: rgba(88, 171, 75, 1);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
+  min-width: auto;
+}
+
 .el-menu--horizontal .el-menu--popup .el-menu-item {
-			width: 100%;
-			height: 44px;
-			line-height: 44px;
-			padding: 0;
-			margin: 0;
-			color: rgba(249, 249, 249, 1) !important;
-			font-size: 14px;
-			border-radius: 0;
-			border-width: 0 0 1px 0;
-			border-style: solid;
-			border-color: rgba(255, 255, 255, 0.75);
-			background-color: rgba(255, 255, 255, 0) !important;
-			box-shadow: 0 0 6px rgba(30, 144, 255, 0);
-			text-align: center;
-			min-width: auto;
-			} 
-	.el-menu--horizontal .el-menu--popup .el-menu-item:hover {
-				width: 100%;
-				height: 44px;
-				line-height: 44px;
-				padding: 0;
-				margin: 0;
-				color: rgba(88, 171, 75, 1) !important;
-				font-size: 14px;
-				border-radius: 0;
-				border-width: 0;
-				border-style: solid;
-				border-color: rgba(0, 0, 0, 0);
-				background-color: rgba(255, 255, 255, 1) !important;
-				box-shadow: 0 0 6px rgba(30, 144, 255, 0);
-				text-align: center;
-			}
-</style>
+  width: 100%;
+  height: 44px;
+  line-height: 44px;
+  padding: 0;
+  margin: 0;
+  color: rgba(249, 249, 249, 1) !important;
+  font-size: 14px;
+  border-radius: 0;
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  border-color: rgba(255, 255, 255, 0.75);
+  background-color: rgba(255, 255, 255, 0) !important;
+  box-shadow: 0 0 6px rgba(30, 144, 255, 0);
+  text-align: center;
+  min-width: auto;
+}
+
+.el-menu--horizontal .el-menu--popup .el-menu-item:hover {
+  width: 100%;
+  height: 44px;
+  line-height: 44px;
+  padding: 0;
+  margin: 0;
+  color: rgba(88, 171, 75, 1) !important;
+  font-size: 14px;
+  border-radius: 0;
+  border-width: 0;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+  background-color: rgba(255, 255, 255, 1) !important;
+  box-shadow: 0 0 6px rgba(30, 144, 255, 0);
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/admin/src/components/index/IndexAsideSub.vue b/admin/src/components/index/IndexAsideSub.vue
index 1c710eba..86ebd12d 100644
--- a/admin/src/components/index/IndexAsideSub.vue
+++ b/admin/src/components/index/IndexAsideSub.vue
@@ -1,49 +1,60 @@
 <template>
+  <!-- 如果当前菜单有子菜单且长度大于等于1，则渲染一个子菜单 -->
   <el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''">
+    <!-- 设置子菜单的标题区域 -->
     <template slot="title">
+      <!-- 显示子菜单的名称 -->
       <span>{{ menu.name }}</span>
     </template>
+    <!-- 遍历当前菜单的子菜单，并递归渲染 -->
     <sub-menu
       v-for="item in menu.list"
-      :key="item.menuId"
-      :menu="item"
-      :dynamicMenuRoutes="dynamicMenuRoutes"
+      :key="item.menuId" <!-- 为每个子菜单设置唯一的 key -->
+      :menu="item" <!-- 将子菜单对象传递给子组件 -->
+      :dynamicMenuRoutes="dynamicMenuRoutes" <!-- 将动态路由传递给子组件 -->
     ></sub-menu>
   </el-submenu>
+  <!-- 如果没有子菜单，则直接渲染菜单项 -->
   <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
+    <!-- 显示菜单项的名称 -->
     <span>{{ menu.name }}</span>
   </el-menu-item>
 </template>
 
+<!-- 导入子菜单组件 -->
 <script>
 import SubMenu from "./IndexAsideSub";
+
 export default {
-  name: "sub-menu",
-  props: {
-    menu: {
+  name: "sub-menu", <!-- 定义组件名称 -->
+  props: { <!-- 定义接收的属性 -->
+    menu: { <!-- 当前菜单对象 -->
       type: Object,
       required: true
     },
-    dynamicMenuRoutes: {
+    dynamicMenuRoutes: { <!-- 动态路由数组 -->
       type: Array,
       required: true
     }
   },
-  components: {
+  components: { <!-- 注册子组件 -->
     SubMenu
   },
-  methods: {
+  methods: { <!-- 定义方法 -->
     // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
     gotoRouteHandle(menu) {
+      // 从动态路由中筛选出与当前菜单ID匹配的路由
       var route = this.dynamicMenuRoutes.filter(
         item => item.meta.menuId === menu.menuId
       );
-      if (route.length >= 1) {
-        if (route[0].component != null) {
-          this.$router.replace({ name: route[0].name });
-        } else {
-          this.$router.push({ name: "404" });
+      if (route.length >= 1) { <!-- 如果找到匹配的路由 -->
+        if (route[0].component != null) { <!-- 如果组件存在 -->
+          this.$router.replace({ name: route[0].name }); <!-- 跳转到对应路由 -->
+        } else { <!-- 如果组件不存在 -->
+          this.$router.push({ name: "404" }); <!-- 跳转到404页面 -->
         }
+      } else { <!-- 如果未找到路由 -->
+        console.warn("未找到对应的路由"); <!-- 记录警告日志 -->
       }
     }
   }
diff --git a/admin/src/components/index/IndexHeader.vue b/admin/src/components/index/IndexHeader.vue
index 259b5d95..ca62561f 100644
--- a/admin/src/components/index/IndexHeader.vue
+++ b/admin/src/components/index/IndexHeader.vue
@@ -1,185 +1,169 @@
 <template>
-	<!-- <el-header>
-		<el-menu background-color="#00c292" text-color="#FFFFFF" active-text-color="#FFFFFF" mode="horizontal">
-			<div class="fl title">{{this.$project.projectName}}</div>
-			<div class="fr logout" style="display:flex;">
-				<el-menu-item index="3">
-					<div>{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
-				</el-menu-item>
-				<el-menu-item @click="onLogout" index="2">
-					<div>退出登录</div>
-				</el-menu-item>
-			</div>
-		</el-menu>
-	</el-header> -->
-	<div class="navbar" :style="{background:heads.headBgColor,height:heads.headHeight,boxShadow:heads.headBoxShadow,lineHeight:heads.headHeight}">
-		<div class="title-menu" :style="{justifyContent:heads.headTitleStyle=='1'?'flex-start':'center'}">
-			<el-image v-if="heads.headTitleImg" class="title-img" :style="{width:heads.headTitleImgWidth,height:heads.headTitleImgHeight,boxShadow:heads.headTitleImgBoxShadow,borderRadius:heads.headTitleImgBorderRadius}" :src="heads.headTitleImgUrl" fit="cover"></el-image>
-			<div class="title-name" :style="{color:heads.headFontColor,fontSize:heads.headFontSize}">{{this.$project.projectName}}</div>
-		</div>
-		<div class="right-menu">
-			<div class="user-info" :style="{color:heads.headUserInfoFontColor,fontSize:heads.headUserInfoFontSize}">{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
-			<div v-if="this.$storage.get('role')!='管理员'" class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onIndexTap">退出到前台</div>
-			<div class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onLogout">退出登录</div>
-		</div>
-	</div>
+    <div class="navbar" :style="{background:heads.headBgColor,height:heads.headHeight,boxShadow:heads.headBoxShadow,lineHeight:heads.headHeight}">
+        <!-- 左侧标题部分 -->
+        <div class="title-menu" :style="{justifyContent:heads.headTitleStyle=='1'?'flex-start':'center'}">
+            <!-- 如果头像图片存在，则显示头像 -->
+            <el-image v-if="heads.headTitleImg" class="title-img" :style="{width:heads.headTitleImgWidth,height:heads.headTitleImgHeight,boxShadow:heads.headTitleImgBoxShadow,borderRadius:heads.headTitleImgBorderRadius}" :src="heads.headTitleImgUrl" fit="cover"></el-image>
+            <!-- 显示项目名称 -->
+            <div class="title-name" :style="{color:heads.headFontColor,fontSize:heads.headFontSize}">{{this.$project.projectName}}</div>
+        </div>
+        <!-- 右侧用户信息和退出按钮 -->
+        <div class="right-menu">
+            <!-- 用户信息 -->
+            <div class="user-info" :style="{color:heads.headUserInfoFontColor,fontSize:heads.headUserInfoFontSize}">{{this.$storage.get('role')}} {{this.$storage.get('adminName')}}</div>
+            <!-- 如果角色不是管理员，则显示退出到前台按钮 -->
+            <div v-if="this.$storage.get('role')!='管理员'" class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onIndexTap">退出到前台</div>
+            <!-- 退出登录按钮 -->
+            <div class="logout" :style="{color:heads.headLogoutFontColor,fontSize:heads.headLogoutFontSize}" @click="onLogout">退出登录</div>
+        </div>
+    </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				dialogVisible: false,
-				ruleForm: {},
-				user: {},
-				heads: {"headLogoutFontHoverColor":"#fff","headFontSize":"20px","headUserInfoFontColor":"rgba(98, 190, 84, 1)","headBoxShadow":"0 1px 6px #444","headTitleImgHeight":"44px","headLogoutFontHoverBgColor":"rgba(193, 193, 193, 0.55)","headFontColor":"rgba(98, 190, 84, 1)","headTitleImg":false,"headHeight":"80px","headTitleImgBorderRadius":"22px","headTitleImgUrl":"http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg","headBgColor":"#fff url(\"http://codegen.caihongy.cn/20211129/dcfd98cdd41848e38b8e78e5b2092ada.png\") repeat top","headTitleImgBoxShadow":"0 1px 6px #444","headLogoutFontColor":"rgba(98, 190, 84, 1)","headUserInfoFontSize":"16px","headTitleImgWidth":"44px","headTitleStyle":"2","headLogoutFontSize":"16px"},
-			};
-		},
-		created() {
-			this.setHeaderStyle()
-		},
-		mounted() {
-			let sessionTable = this.$storage.get("sessionTable")
-			this.$http({
-				url: sessionTable + '/session',
-				method: "get"
-			}).then(({
-				data
-			}) => {
-				if (data && data.code === 0) {
-					this.user = data.data;
-					this.$storage.set('userid',data.data.id);
-				} else {
-					let message = this.$message
-					message.error(data.msg);
-				}
-			});
-		},
-		methods: {
-			onLogout() {
-				let storage = this.$storage
-				let router = this.$router
-				storage.clear()
-				router.replace({
-					name: "login"
-				});
-			},
-      			onIndexTap(){
-      				window.location.href = `${this.$base.indexUrl}`
-    			},
-			setHeaderStyle() {
-			  this.$nextTick(()=>{
-			    document.querySelectorAll('.navbar .right-menu .logout').forEach(el=>{
-			      el.addEventListener("mouseenter", e => {
-			        e.stopPropagation()
-			        el.style.backgroundColor = this.heads.headLogoutFontHoverBgColor
-					el.style.color = this.heads.headLogoutFontHoverColor
-			      })
-			      el.addEventListener("mouseleave", e => {
-			        e.stopPropagation()
-			        el.style.backgroundColor = "transparent"
-					el.style.color = this.heads.headLogoutFontColor
-			      })
-			    })
-			  })
-			},
-		}
-	};
+    export default {
+        data() {
+            return {
+                dialogVisible: false,
+                ruleForm: {},
+                user: {},
+                heads: {
+                    "headLogoutFontHoverColor": "#fff",
+                    "headFontSize": "20px",
+                    "headUserInfoFontColor": "rgba(98, 190, 84, 1)",
+                    "headBoxShadow": "0 1px 6px #444",
+                    "headTitleImgHeight": "44px",
+                    "headLogoutFontHoverBgColor": "rgba(193, 193, 193, 0.55)",
+                    "headFontColor": "rgba(98, 190, 84, 1)",
+                    "headTitleImg": false,
+                    "headHeight": "80px",
+                    "headTitleImgBorderRadius": "22px",
+                    "headTitleImgUrl": "http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg",
+                    "headBgColor": "#fff url(\\"http://codegen.caihongy.cn/20211129/dcfd98cdd41848e38b8e78e5b2092ada.png\\") repeat top",
+                    "headTitleImgBoxShadow": "0 1px 6px #444",
+                    "headLogoutFontColor": "rgba(98, 190, 84, 1)",
+                    "headUserInfoFontSize": "16px",
+                    "headTitleImgWidth": "44px",
+                    "headTitleStyle": "2",
+                    "headLogoutFontSize": "16px"
+                };
+            };
+        },
+        created() {
+            // 初始化头部样式
+            this.setHeaderStyle();
+        },
+        mounted() {
+            let sessionTable = this.$storage.get("sessionTable");
+            // 获取用户会话信息
+            this.$http({
+                url: sessionTable + "/session",
+                method: "get"
+            }).then(({ data }) => {
+                if (data && data.code === 0) {
+                    // 如果成功获取用户信息，则存储到 user 中
+                    this.user = data.data;
+                    this.$storage.set("userid", data.data.id);
+                } else {
+                    // 如果失败，弹出错误提示
+                    let message = this.$message;
+                    message.error(data.msg);
+                }
+            });
+        },
+        methods: {
+            // 退出登录
+            onLogout() {
+                let storage = this.$storage;
+                let router = this.$router;
+                // 清空存储并跳转到登录页面
+                storage.clear();
+                router.replace({
+                    name: "login"
+                });
+            },
+            // 退出到前台
+            onIndexTap() {
+                // 跳转到前台页面
+                window.location.href = `${this.$base.indexUrl}`;
+            },
+            // 设置头部样式
+            setHeaderStyle() {
+                this.$nextTick(() => {
+                    document.querySelectorAll('.navbar .right-menu .logout').forEach(el => {
+                        el.addEventListener("mouseenter", e => {
+                            e.stopPropagation();
+                            // 鼠标悬停时改变背景颜色和文字颜色
+                            el.style.backgroundColor = this.heads.headLogoutFontHoverBgColor;
+                            el.style.color = this.heads.headLogoutFontHoverColor;
+                        });
+                        el.addEventListener("mouseleave", e => {
+                            e.stopPropagation();
+                            // 鼠标离开时恢复默认样式
+                            el.style.backgroundColor = "transparent";
+                            el.style.color = this.heads.headLogoutFontColor;
+                        });
+                    });
+                });
+            },
+        }
+    };
 </script>
 
-
 <style lang="scss" scoped>
-	.navbar {
-		height: 60px;
-		line-height: 60px;
-		width: 100%;
-		padding: 0 34px;
-		box-sizing: border-box;
-		background-color: #ff00ff;
-		position: relative;
-		z-index: 111;
-		
-		.right-menu {
-			position: absolute;
-			right: 34px;
-			top: 0;
-			height: 100%;
-			display: flex;
-			justify-content: flex-end;
-			align-items: center;
-			z-index: 111;
-			
-			.user-info {
-				font-size: 16px;
-				color: red;
-				padding: 0 12px;
-			}
-			
-			.logout {
-				font-size: 16px;
-				color: red;
-				padding: 0 12px;
-				cursor: pointer;
-			}
-			
-		}
-		
-		.title-menu {
-			display: flex;
-			justify-content: flex-start;
-			align-items: center;
-			width: 100%;
-			height: 100%;
-			
-			.title-img {
-				width: 44px;
-				height: 44px;
-				border-radius: 22px;
-				box-shadow: 0 1px 6px #444;
-				margin-right: 16px;
-			}
-			
-			.title-name {
-				font-size: 24px;
-				color: #fff;
-				font-weight: 700;
-			}
-		}
-	}
-	// .el-header .fr {
-	// 	float: right;
-	// }
+    .navbar {
+        height: 60px; /* 设置导航栏高度 */
+        line-height: 60px; /* 设置文本垂直居中 */
+        width: 100%; /* 设置宽度为100% */
+        padding: 0 34px; /* 设置左右内边距 */
+        box-sizing: border-box; /* 确保padding不会增加总宽度 */
+        background-color: #ff00ff; /* 设置背景颜色 */
+        position: relative; /* 相对定位 */
+        z-index: 111; /* 设置堆叠顺序 */
+
+        .right-menu {
+            position: absolute; /* 绝对定位 */
+            right: 34px; /* 右侧距离 */
+            top: 0; /* 顶部对齐 */
+            height: 100%; /* 占据整个高度 */
+            display: flex; /* 弹性布局 */
+            justify-content: flex-end; /* 内容右对齐 */
+            align-items: center; /* 垂直居中 */
+            z-index: 111; /* 设置堆叠顺序 */
 
-	// .el-header .fl {
-	// 	float: left;
-	// }
+            .user-info {
+                font-size: 16px; /* 字体大小 */
+                color: red; /* 文字颜色 */
+                padding: 0 12px; /* 内边距 */
+            }
 
-	// .el-header {
-	// 	width: 100%;
-	// 	color: #333;
-	// 	text-align: center;
-	// 	line-height: 60px;
-	// 	padding: 0;
-	// 	z-index: 99;
-	// }
+            .logout {
+                font-size: 16px; /* 字体大小 */
+                color: red; /* 文字颜色 */
+                padding: 0 12px; /* 内边距 */
+                cursor: pointer; /* 鼠标悬停时显示手型 */
+            }
+        }
 
-	// .logo {
-	// 	width: 60px;
-	// 	height: 60px;
-	// 	margin-left: 70px;
-	// }
+        .title-menu {
+            display: flex; /* 弹性布局 */
+            justify-content: flex-start; /* 内容左对齐 */
+            align-items: center; /* 垂直居中 */
+            width: 100%; /* 占据整个宽度 */
+            height: 100%; /* 占据整个高度 */
 
-	// .avator {
-	// 	width: 40px;
-	// 	height: 40px;
-	// 	background: #ffffff;
-	// 	border-radius: 50%;
-	// }
+            .title-img {
+                width: 44px; /* 图片宽度 */
+                height: 44px; /* 图片高度 */
+                border-radius: 22px; /* 圆角 */
+                box-shadow: 0 1px 6px #444; /* 添加阴影 */
+                margin-right: 16px; /* 图片右侧间距 */
+            }
 
-	// .title {
-	// 	color: #ffffff;
-	// 	font-size: 20px;
-	// 	font-weight: bold;
-	// 	margin-left: 20px;
-	// }
-</style>
+            .title-name {
+                font-size: 24px; /* 字体大小 */
+                color: #fff; /* 文字颜色 */
+                font-weight: 700; /* 加粗 */
+            }
+        }
+    }
+</style>
\ No newline at end of file