diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index 80c1376..04d529b 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,8 +1,13 @@
 <template>
+  <!-- el-breadcrumb 组件用于创建面包屑导航，这里给它添加了类名 "app-breadcrumb"，并设置分隔符为 "/"，用于分隔面包屑中的各个节点 -->
   <el-breadcrumb class="app-breadcrumb" separator="/">
+    <!-- transition-group 组件用于对一组元素进行过渡动画效果的包裹，这里命名为 "breadcrumb"，它会根据内部元素的添加、删除、移动等操作自动应用过渡动画，常用于展示动态变化的元素列表，此处用于面包屑导航项的过渡效果处理 -->
     <transition-group name="breadcrumb">
+      <!-- 使用 v-for 指令遍历 levelList 数组，创建多个 el-breadcrumb-item 组件（面包屑导航的每一项），并将数组中的每个元素（item）以及对应的索引（index）传递到循环体内部使用，同时通过 :key 绑定每个项的唯一标识（这里使用 item.path），确保 Vue 能够正确识别每个元素的变化 -->
       <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if="item.meta.title">
+        <!-- 根据条件判断来决定面包屑导航项的显示方式，如果该项的 redirect 属性等于 "noredirect" 或者当前项是 levelList 数组中的最后一项（index == levelList.length - 1），则使用 span 标签显示该项的标题（item.meta.title），并且添加类名 "no-redirect"，用于后续样式设置 -->
         <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span>
+        <!-- 如果不满足上述条件（即可以进行路由跳转的情况），则使用 router-link 组件创建一个路由链接，通过 :to 属性绑定要跳转的目标路径（优先使用 item.redirect，如果不存在则使用 item.path），并在链接中显示该项的标题（item.meta.title），点击该链接可导航到对应的路由页面 -->
         <router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
       </el-breadcrumb-item>
     </transition-group>
@@ -11,14 +16,17 @@
 
 <script>
 export default {
+  // created 生命周期钩子函数，在组件实例被创建后立即调用，这里调用了 this.getBreadcrumb 方法，用于初始化获取面包屑导航的数据，确保在组件首次渲染时就能展示正确的面包屑信息
   created() {
     this.getBreadcrumb()
   },
   data() {
     return {
+      // 定义一个名为 levelList 的数据属性，初始值为 null，它将用于存储面包屑导航对应的路由信息数组，后续会通过 getBreadcrumb 方法来填充这个数组，每个元素代表面包屑中的一项对应的路由相关数据
       levelList: null
     }
   },
+  // watch 选项用于监听组件中的数据变化，这里监听了 $route（Vue 路由对象）的变化，一旦路由发生改变，就会触发 this.getBreadcrumb 方法，重新获取并更新面包屑导航的数据，以保证面包屑能够实时反映当前的路由情况
   watch: {
     $route() {
       this.getBreadcrumb()
@@ -26,11 +34,15 @@ export default {
   },
   methods: {
     getBreadcrumb() {
+      // 通过 this.$route.matched 获取当前路由匹配的所有路由记录数组（包含了从根路由到当前路由的所有嵌套路由记录），然后使用 filter 方法筛选出其中有 name 属性的路由记录（通常有 name 属性的路由才方便进行导航等相关操作），将筛选后的结果赋值给 matched 变量
       let matched = this.$route.matched.filter(item => item.name)
       const first = matched[0]
-      if (first && first.name !== 'home') {
+      // 判断筛选后的第一个路由记录（即最顶层匹配的路由）是否存在，并且其 name 属性不等于 'home'，如果满足这个条件
+      if (first && first.name!== 'home') {
+        // 则在 matched 数组的开头插入一个新的路由记录，表示首页路由，它的路径为 '/home'，元数据（meta）中的标题设置为 '首页'，这样做可能是为了确保面包屑导航中始终能显示首页作为根节点（除非当前就在首页路由）
         matched = [{ path: '/home', meta: { title: '首页' }}].concat(matched)
       }
+      // 将处理后的 matched 数组赋值给 levelList 属性，使得模板中可以根据这个数组来渲染面包屑导航的各项内容
       this.levelList = matched
     }
   }
@@ -38,14 +50,22 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .app-breadcrumb.el-breadcrumb {
-    display: inline-block;
-    font-size: 14px;
-    line-height: 50px;
-    margin-left: 10px;
-    .no-redirect {
-      color: #97a8be;
-      cursor: text;
-    }
+// 选择器匹配类名为 "app-breadcrumb" 的元素内部的类名为 "el-breadcrumb" 的子元素（也就是前面模板中定义的面包屑导航组件），设置以下样式属性
+.app-breadcrumb.el-breadcrumb {
+  // 将元素显示为行内块级元素，使其既可以在水平方向上与其他元素并排显示，又能设置宽度、高度等块级元素的属性
+  display: inline-block;
+  // 设置字体大小为 14px，用于控制面包屑导航文字的大小显示
+  font-size: 14px;
+  // 设置行高为 50px，使得面包屑导航中的文字在垂直方向上能够较好地居中对齐，并且影响整个面包屑导航在垂直方向上的布局高度
+  line-height: 50px;
+  // 设置元素左侧的外边距为 10px，用于与其他相邻元素在水平方向上拉开一定的间距，使布局更美观
+  margin-left: 10px;
+  // 针对类名为 "no-redirect" 的子元素（即模板中那些不进行路由跳转，只是展示文本的面包屑导航项）设置样式，以下是具体的样式属性说明
+  .no-redirect {
+    // 设置文字颜色为 #97a8be，一种特定的颜色，用于区分这类特殊的面包屑导航项与可点击跳转的导航项
+    color: #97a8be;
+    // 将鼠标指针样式设置为文本光标样式（cursor: text），表示该元素不可点击（因为它不进行路由跳转），给用户视觉上的提示
+    cursor: text;
   }
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 0f7fdd7..0089091 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,71 +1,113 @@
+// 导入Vue构造函数，Vue是Vue.js框架的核心，用于创建Vue实例以及进行各种组件化开发相关操作
 import Vue from 'vue'
+// 导入Vue Router插件，Vue Router用于在Vue.js应用中实现路由功能，管理不同页面（路由组件）之间的切换和导航
 import Router from 'vue-router'
 
+// 使用Vue.use方法来安装Vue Router插件，使其能够在Vue应用中被使用，这一步是必要的初始化操作
 Vue.use(Router)
 
 /* Layout */
+// 从指定的路径 '../views/layout/Layout' 导入一个名为Layout的组件，通常这个组件可能是整个应用的布局框架组件，包含侧边栏、顶部导航栏等通用布局结构，其他页面组件会在这个布局框架内进行展示
 import Layout from '../views/layout/Layout'
 
 /**
+ * 以下是一段注释，用于对路由配置对象中的一些属性进行说明，方便后续理解和维护路由配置
  * hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
+ * 解释：如果路由配置中的 `hidden` 属性设置为 `true`，则对应的路由对应的菜单项将不会显示在侧边栏中（默认值为 `false`，即默认会显示在侧边栏）
+ *
  * alwaysShow: true               if set true, will always show the root menu, whatever its child routes length
  *                                if not set alwaysShow, only more than one route under the children
  *                                it will becomes nested mode, otherwise not show the root menu
+ * 解释：如果 `alwaysShow` 属性设置为 `true`，无论该路由下的子路由数量是多少，都会始终显示根菜单。如果不设置这个属性，只有当子路由数量大于1时，才会呈现嵌套菜单模式（显示根菜单以及子菜单），否则不会显示根菜单。
+ *
  * redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
+ * 解释：如果 `redirect` 属性设置为 `noredirect`，在面包屑导航中不会进行重定向操作（通常面包屑导航会根据路由跳转情况进行相应的更新显示，这里可用于特殊情况的控制）
+ *
  * name:'router-name'             the name is used by <keep-alive> (must set!!!)
+ * 解释：`name` 属性用于给路由命名，这个名称会被 `<keep-alive>` 组件使用（必须设置，在进行组件缓存等相关功能时需要通过这个名称来识别路由对应的组件）
+ *
  * meta : {
-    title: 'title'               the name show in submenu and breadcrumb (recommend set)
-    icon: 'svg-name'             the icon show in the sidebar,
-  }
+ title: 'title'               the name show in submenu and breadcrumb (recommend set)
+ icon: 'svg-name'             the icon show in the sidebar,
+ }
+ * 解释：`meta` 是一个自定义的元数据对象，可以在路由配置中添加额外的信息。其中 `title` 属性用于设置在子菜单和面包屑导航中显示的名称（建议设置，方便用户直观了解当前页面信息），`icon` 属性用于指定在侧边栏中显示的图标（方便通过图标区分不同的菜单功能）
  **/
+
+// 定义一个名为constantRouterMap的常量数组，用于存放基础的、固定不变的路由配置信息，这些路由通常是应用中始终存在且不需要动态加载的部分
 export const constantRouterMap = [
+  // 定义一个登录页面的路由配置对象，路径为 '/login'，对应的组件通过动态导入的方式加载（使用 () => import('@/views/login/index') 这种语法，会在实际访问该路由时才加载对应的组件代码，提高初始加载性能），并且设置 `hidden` 属性为 `true`，意味着这个登录页面不会显示在侧边栏中
   {path: '/login', component: () => import('@/views/login/index'), hidden: true},
+  // 定义一个404页面的路由配置对象，路径为 '/404'，同样通过动态导入加载对应的组件，也设置 `hidden` 属性为 `true`，该页面不会在侧边栏展示，一般用于处理未匹配到的路由情况
   {path: '/404', component: () => import('@/views/404'), hidden: true},
   {
+    // 定义一个根路径（空字符串表示应用的根路径）的路由配置，它会作为应用的基础布局框架
     path: '',
+    // 指定该根路径对应的组件为之前导入的Layout组件，也就是整个页面的布局框架会围绕这个组件展开
     component: Layout,
+    // 设置重定向路径为 '/home'，意味着当访问根路径时，会自动跳转到 '/home' 这个子路径对应的页面
     redirect: '/home',
+    // 在路由的元数据（meta）中设置标题为 '首页'，图标为 'home'，这两个信息会分别用于侧边栏菜单的显示和面包屑导航等地方的展示
     meta: {title: '首页', icon: 'home'},
-    children: [{
-      path: 'home',
-      name: 'home',
-      component: () => import('@/views/home/index'),
-      meta: {title: '仪表盘', icon: 'dashboard'}
-    },
-    {
-      name: 'document',
-      path: 'https://www.macrozheng.com',
-      meta: {title: '学习教程', icon: 'document'}
-    },
-    {
-      name: 'video',
-      path: 'https://www.macrozheng.com/mall/catalog/mall_video.html',
-      meta: {title: '视频教程', icon: 'video'}
-    },
+    // 定义该路由下的子路由数组，每个子路由对应一个具体的页面组件
+    children: [
+      {
+        // 子路由的路径为 'home'，也就是在根路径下访问 'home' 会对应这个路由配置
+        path: 'home',
+        // 给这个路由命名为 'home'，用于后续的路由导航、组件缓存等相关操作
+        name: 'home',
+        // 通过动态导入加载对应的组件，这里对应的是 '@/views/home/index' 这个页面组件，一般是应用的仪表盘页面之类的主页面
+        component: () => import('@/views/home/index'),
+        // 在子路由的元数据中设置标题为 '仪表盘'，图标为 'dashboard'，同样用于展示相关信息
+        meta: {title: '仪表盘', icon: 'dashboard'}
+      },
+      {
+        // 给这个路由命名为 'document'，路径是一个外部链接 'https://www.macrozheng.com'，可能用于跳转到外部学习教程网站
+        name: 'document',
+        path: 'https://www.macrozheng.com',
+        // 在元数据中设置标题为 '学习教程'，图标为 'document'，用于侧边栏等地方显示相关信息
+        meta: {title: '学习教程', icon: 'document'}
+      },
+      {
+        // 给这个路由命名为 'video'，路径是另一个外部链接 'https://www.macrozheng.com/mall/catalog/mall_video.html'，可能用于跳转到外部视频教程页面
+        name: 'video',
+        path: 'https://www.macrozheng.com/mall/catalog/mall_video.html',
+        // 在元数据中设置标题为 '视频教程'，图标为 'video'，用于展示相关信息
+        meta: {title: '视频教程', icon: 'video'}
+      },
     ]
   }
 ]
 
+// 定义一个名为asyncRouterMap的常量数组，用于存放需要动态加载的路由配置信息，通常这些路由对应的模块可能比较大，或者是根据用户权限等情况动态决定是否加载的部分
 export const asyncRouterMap = [
   {
+    // 定义一个商品管理模块（pms）相关的路由配置，路径为 '/pms'，对应的组件是之前导入的Layout组件作为布局框架
     path: '/pms',
     component: Layout,
+    // 设置重定向路径为 '/pms/product'，访问 '/pms' 时会自动跳转到商品列表页面相关的子路由
     redirect: '/pms/product',
+    // 给这个路由命名为 'pms'，方便后续操作识别
     name: 'pms',
+    // 在路由的元数据中设置标题为 '商品'，图标为 'product'，用于侧边栏菜单等地方显示
     meta: {title: '商品', icon: 'product'},
-    children: [{
-      path: 'product',
-      name: 'product',
-      component: () => import('@/views/pms/product/index'),
-      meta: {title: '商品列表', icon: 'product-list'}
-    },
+    // 定义该路由下的子路由数组，包含商品管理相关的各个具体功能页面的路由配置
+    children: [
       {
+        // 商品列表页面的子路由，路径为 'product'，命名为 'product'，通过动态导入加载对应的组件，用于展示商品列表信息
+        path: 'product',
+        name: 'product',
+        component: () => import('@/views/pms/product/index'),
+        meta: {title: '商品列表', icon: 'product-list'}
+      },
+      {
+        // 添加商品页面的子路由，命名为 'addProduct'，通过动态导入加载对应组件，用于添加商品的操作页面
         path: 'addProduct',
         name: 'addProduct',
         component: () => import('@/views/pms/product/add'),
         meta: {title: '添加商品', icon: 'product-add'}
       },
       {
+        // 修改商品页面的子路由，命名为 'updateProduct'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，意味着这个页面不会显示在侧边栏等常规菜单中，可能是通过其他方式（比如在商品列表页点击编辑按钮进入）访问
         path: 'updateProduct',
         name: 'updateProduct',
         component: () => import('@/views/pms/product/update'),
@@ -73,12 +115,14 @@ export const asyncRouterMap = [
         hidden: true
       },
       {
+        // 商品分类页面的子路由，命名为 'productCate'，通过动态导入加载对应组件，用于商品分类管理相关操作
         path: 'productCate',
         name: 'productCate',
         component: () => import('@/views/pms/productCate/index'),
         meta: {title: '商品分类', icon: 'product-cate'}
       },
       {
+        // 添加商品分类页面的子路由，命名为 'addProductCate'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不会在常规菜单显示，可能是特定操作下进入的页面
         path: 'addProductCate',
         name: 'addProductCate',
         component: () => import('@/views/pms/productCate/add'),
@@ -86,6 +130,7 @@ export const asyncRouterMap = [
         hidden: true
       },
       {
+        // 修改商品分类页面的子路由，命名为 'updateProductCate'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，同样不在常规菜单展示，用于特定的修改操作入口
         path: 'updateProductCate',
         name: 'updateProductCate',
         component: () => import('@/views/pms/productCate/update'),
@@ -93,12 +138,14 @@ export const asyncRouterMap = [
         hidden: true
       },
       {
+        // 商品类型页面的子路由，命名为 'productAttr'，通过动态导入加载对应组件，用于管理商品类型相关功能
         path: 'productAttr',
         name: 'productAttr',
         component: () => import('@/views/pms/productAttr/index'),
         meta: {title: '商品类型', icon: 'product-attr'}
       },
       {
+        // 商品属性列表页面的子路由，命名为 'productAttrList'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不常规显示，可能是特定的查看属性列表的入口
         path: 'productAttrList',
         name: 'productAttrList',
         component: () => import('@/views/pms/productAttr/productAttrList'),
@@ -106,6 +153,7 @@ export const asyncRouterMap = [
         hidden: true
       },
       {
+        // 添加商品属性页面的子路由，命名为 'addProductAttr'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不是常规菜单可见的页面，用于添加商品属性操作入口
         path: 'addProductAttr',
         name: 'addProductAttr',
         component: () => import('@/views/pms/productAttr/addProductAttr'),
@@ -113,6 +161,7 @@ export const asyncRouterMap = [
         hidden: true
       },
       {
+        // 修改商品属性页面的子路由，命名为 'updateProductAttr'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不在常规菜单展示，用于修改商品属性的操作入口
         path: 'updateProductAttr',
         name: 'updateProductAttr',
         component: () => import('@/views/pms/productAttr/updateProductAttr'),
@@ -120,12 +169,14 @@ export const asyncRouterMap = [
         hidden: true
       },
       {
+        // 品牌管理页面的子路由，命名为 'brand'，通过动态导入加载对应组件，用于品牌管理相关操作，比如查看、编辑品牌等
         path: 'brand',
         name: 'brand',
         component: () => import('@/views/pms/brand/index'),
         meta: {title: '品牌管理', icon: 'product-brand'}
       },
       {
+        // 添加品牌页面的子路由，命名为 'addBrand'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不是常规显示的页面，用于添加品牌的操作入口
         path: 'addBrand',
         name: 'addBrand',
         component: () => import('@/views/pms/brand/add'),
@@ -133,6 +184,7 @@ export const asyncRouterMap = [
         hidden: true
       },
       {
+        // 编辑品牌页面的子路由，命名为 'updateBrand'，通过动态导入加载对应组件，设置 `hidden` 属性为 `true`，不在常规菜单出现，用于编辑品牌的操作入口
         path: 'updateBrand',
         name: 'updateBrand',
         component: () => import('@/views/pms/brand/update'),
@@ -142,6 +194,8 @@ export const asyncRouterMap = [
     ]
   },
   {
+    // 订单管理模块（oms）相关的路由配置，路径为 '/oms'，对应Layout组件作为布局框架，以下类似的结构都是对订单管理各功能页面路由的详细配置
+
     path: '/oms',
     component: Layout,
     redirect: '/oms/order',
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index d69c434..42260d7 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -1,57 +1,84 @@
+// 选择器匹配 id 为 "app" 的元素及其内部的样式规则，以下是针对该元素内部不同类名所对应的样式设置
 #app {
 
-  // 主体区域
+  // 以下是针对类名为 "main-container" 的元素设置的样式规则，它通常用于页面的主体内容区域
   .main-container {
+    // 设置元素的最小高度为 100%，确保在内容较少时也能占满整个可视区域的高度（具体取决于父元素高度情况）
     min-height: 100%;
-    transition: margin-left .28s;
+    // 定义一个过渡效果，当元素的 margin-left 属性发生变化时，过渡时间为 0.28 秒，实现平滑的动画效果，常用于侧边栏展开或收缩时主体区域的位置移动动画
+    transition: margin-left.28s;
+    // 设置元素初始的左边距为 180px，可能是为侧边栏预留的空间，使得主体内容在侧边栏右侧显示
     margin-left: 180px;
   }
 
-   // 侧边栏
+  // 以下是针对类名为 "sidebar-container" 的元素设置的样式规则，一般用于侧边栏的样式设置
   .sidebar-container {
+    // 针对类名为 "horizontal-collapse-transition" 的子元素设置样式，它可能用于控制侧边栏在水平方向收缩展开时某些属性的过渡效果
     .horizontal-collapse-transition {
+      // 这里设置了多个属性的过渡时间为 0 秒，意味着这些属性变化时不会有过渡动画效果，分别是宽度（width）、左内边距（padding-left）和右内边距（padding-right），使用 ease-in-out 缓动函数（不过由于过渡时间为 0，实际不会体现缓动效果）
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
     }
-    transition: width .28s;
-    width: 180px !important;
+    // 为侧边栏容器本身设置宽度变化的过渡效果，过渡时间为 0.28 秒，用于侧边栏展开或收缩时宽度变化的动画展示
+    transition: width.28s;
+    // 强制设置侧边栏的宽度为 180px，确保侧边栏有固定的宽度显示，"!important" 用于提高该样式规则的优先级，使其覆盖可能存在的其他相同属性的冲突样式
+    width: 180px!important;
+    // 设置侧边栏的高度为 100%，使其占满整个页面的垂直方向空间（取决于父元素高度）
     height: 100%;
+    // 将侧边栏设置为固定定位（fixed），使其相对于浏览器窗口固定位置，不会随着页面滚动而移动，常用于侧边栏始终保持在页面特定位置的布局
     position: fixed;
+    // 设置字体大小为 0px，可能后续会通过其他方式（比如图标字体等）来设置合适的显示大小，或者只是临时隐藏文本内容的一种方式（不过需要注意兼容性和可访问性问题）
     font-size: 0px;
+    // 将侧边栏定位在页面顶部，距离顶部距离为 0
     top: 0;
+    // 将侧边栏定位在页面底部，距离底部距离为 0，结合 height: 100% 就能使其占满整个垂直空间
     bottom: 0;
+    // 将侧边栏定位在页面左侧，距离左侧距离为 0，使其靠页面左边显示
     left: 0;
+    // 设置侧边栏的 z-index 为 1001，确保它在页面堆叠顺序中处于较高的层级，能够覆盖一些其他元素显示，防止被其他元素遮挡
     z-index: 1001;
+    // 当侧边栏内容超出其自身大小时，设置隐藏超出部分，防止内容溢出显示混乱
     overflow: hidden;
+    // 针对侧边栏内部的 <a> 标签设置样式，将其显示为行内块级元素，使其既可以在水平方向上排列，又能设置宽度、高度等块级元素的属性，并且设置宽度为 100%，占满父元素宽度
     a {
       display: inline-block;
       width: 100%;
     }
+    // 针对类名为 "svg-icon" 的元素（可能是用于展示 SVG 图标的元素）设置样式，设置其右侧外边距为 16px，用于与其他元素的间距调整
     .svg-icon {
       margin-right: 16px;
     }
+    // 针对类名为 "el-menu" 的元素（可能是使用了 Element UI 等框架中的菜单组件）设置样式，移除其边框显示（border: none），并强制设置宽度为 100%，确保菜单组件占满侧边栏宽度
     .el-menu {
       border: none;
-      width: 100% !important;
+      width: 100%!important;
     }
   }
 
+  // 以下是针对类名为 "hideSidebar" 的元素及其内部相关元素设置的样式规则，用于在侧边栏需要隐藏（收缩）时的样式变化
   .hideSidebar {
+    // 当 "hideSidebar" 类应用到某个元素时，针对其内部类名为 "sidebar-container" 的子元素设置样式，将侧边栏宽度缩小为 36px，实现隐藏（收缩）侧边栏的视觉效果
     .sidebar-container {
-      width: 36px !important;
+      width: 36px!important;
     }
+    // 同样在 "hideSidebar" 类生效时，针对内部类名为 "main-container" 的子元素设置样式，将其左边距调整为 36px，以适应侧边栏收缩后的空间变化，使主体内容向左移动，占满侧边栏收缩后的空间
     .main-container {
       margin-left: 36px;
     }
+    // 针对类名为 "submenu-title-noDropdown" 的元素设置样式，设置其左内边距为 10px，用于在侧边栏隐藏状态下调整该元素的显示位置，"!important" 提高样式优先级确保生效，并设置为相对定位（position: relative），方便后续其内部的绝对定位元素基于它进行定位
     .submenu-title-noDropdown {
-      padding-left: 10px !important;
+      padding-left: 10px!important;
       position: relative;
+      // 针对内部类名为 "el-tooltip" 的子元素（可能是用于显示提示信息的工具提示组件）设置样式，设置其内边距为 0 到 10px，调整提示信息的显示区域大小
       .el-tooltip {
-        padding: 0 10px !important;
+        padding: 0 10px!important;
       }
     }
+    // 针对类名为 "el-submenu" 的元素（可能是菜单中的子菜单组件）设置样式，以下是具体的样式规则调整
     .el-submenu {
+      // 针对 "el-submenu" 元素下的直接子元素 "el-submenu__title"（即子菜单标题部分）设置样式，设置其左内边距为 10px，调整标题的显示位置
       &>.el-submenu__title {
-        padding-left: 10px !important;
+        padding-left: 10px!important;
+        // 针对 "el-submenu__title" 内部的 <span> 元素设置样式，将其高度、宽度设置为 0，隐藏其内容（通过 overflow: hidden 和 visibility: hidden 进一步确保内容不可见），并且设置为行内块级元素，可能是在侧边栏隐藏状态下对这些元素进行特定的显示隐藏处理
         &>span {
           height: 0;
           width: 0;
@@ -59,6 +86,7 @@
           visibility: hidden;
           display: inline-block;
         }
+        // 针对 "el-submenu__title" 内部的 "el-submenu__icon-arrow" 元素（可能是子菜单标题中的箭头图标元素）设置样式，将其隐藏（display: none），在侧边栏隐藏状态下不显示该箭头图标
         .el-submenu__icon-arrow {
           display: none;
         }
@@ -66,28 +94,34 @@
     }
   }
 
-  .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
-  .sidebar-container .el-submenu .el-menu-item {
-    min-width: 180px !important;
-    background-color: $subMenuBg !important;
+  // 针对类名为 "sidebar-container" 的元素内部类名为 "nest-menu" 的子元素下的 "el-submenu" 元素的 "el-submenu__title"，以及类名为 "sidebar-container" 的元素内部的 "el-menu-item"（可能是菜单中的菜单项元素）设置样式，强制设置它们的最小宽度为 180px，并设置背景颜色为 $subMenuBg 变量所代表的颜色（这里 $subMenuBg 应该是在其他地方定义的 SCSS 变量），用于统一这些元素的背景颜色显示
+  .sidebar-container.nest-menu.el-submenu>.el-submenu__title,
+  .sidebar-container.el-submenu.el-menu-item {
+    min-width: 180px!important;
+    background-color: $subMenuBg!important;
+    // 当鼠标悬停在这些元素上时，改变它们的背景颜色为 $menuHover 变量所代表的颜色（同样是外部定义的 SCSS 变量），实现悬停效果的背景颜色变化
     &:hover {
-      background-color: $menuHover !important;
+      background-color: $menuHover!important;
     }
   }
-  .el-menu--collapse .el-menu .el-submenu {
-    min-width: 180px !important;
+  // 针对类名为 "el-menu--collapse" 的元素内部的 "el-menu" 元素下的 "el-submenu" 元素（可能是在菜单处于折叠状态下的子菜单元素）设置样式，强制设置其最小宽度为 180px，确保在特定菜单折叠状态下有合适的宽度显示
+  .el-menu--collapse.el-menu.el-submenu {
+    min-width: 180px!important;
   }
 
-  //适配移动端
+  // 以下是针对类名为 "mobile" 的元素及其内部相关元素设置的样式规则，用于适配移动端设备的页面布局样式调整
   .mobile {
+    // 在移动端布局下，针对类名为 "main-container" 的元素设置样式，将其左边距设置为 0px，使主体内容在移动端可以占满整个页面宽度，无需为侧边栏预留空间（可能在移动端侧边栏有不同的显示方式或者隐藏了）
     .main-container {
       margin-left: 0px;
     }
+    // 在移动端布局下，针对类名为 "sidebar-container" 的元素设置样式，将其定位在距离页面顶部 50px 的位置（可能是为了避开顶部导航栏等占用的空间），设置宽度变化的过渡时间为 0.28 秒，并强制设置宽度为 180px
     .sidebar-container {
       top: 50px;
-      transition: transform .28s;
-      width: 180px !important;
+      transition: transform.28s;
+      width: 180px!important;
     }
+    // 当 "mobile" 类和 "hideSidebar" 类同时应用到某个元素时（可能表示在移动端且侧边栏需要隐藏的情况），针对内部类名为 "sidebar-container" 的子元素设置样式，设置其过渡持续时间为 0.3s，并通过 transform 属性将其在水平方向上向左移动 180px，实现侧边栏隐藏（移出屏幕外）的动画效果，使用 translate3d 函数实现 3D 变换，这里主要是在 X 轴方向上移动
     &.hideSidebar {
       .sidebar-container {
         transition-duration: 0.3s;
@@ -96,7 +130,9 @@
     }
   }
 
+  // 以下是针对类名为 "withoutAnimation" 的元素及其内部相关元素设置的样式规则，用于在不需要动画效果的情况下，取消相关元素的过渡动画设置
   .withoutAnimation {
+    // 当 "withoutAnimation" 类应用到某个元素时，针对其内部类名为 "main-container" 和 "sidebar-container" 的子元素设置样式，将它们的过渡效果设置为 none，即取消所有过渡动画，使元素属性变化时立即生效，没有过渡过程
     .main-container,
     .sidebar-container {
       transition: none;
diff --git a/src/utils/index.js b/src/utils/index.js
index 07de405..98fafed 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,54 +1,78 @@
+// 这个函数用于将给定的时间数据按照指定的格式进行格式化处理，支持传入不同类型的时间表示形式（如时间戳、Date对象等）并转化为格式化后的字符串
 export function parseTime(time, cFormat) {
+  // 如果没有传入任何参数（arguments.length === 0表示参数个数为0），则直接返回null，表示无法进行时间格式化操作
   if (arguments.length === 0) {
     return null
   }
+  // 如果没有传入自定义的格式化字符串（cFormat），则使用默认的格式化字符串，这里定义了一个包含年、月、日、时、分、秒占位符的格式模板
   const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
   let date
+  // 判断传入的时间参数是否已经是一个Date对象，如果是，则直接将其赋值给date变量，后续用于提取时间信息进行格式化
   if (typeof time === 'object') {
     date = time
   } else {
+    // 如果传入的时间参数不是Date对象，先进行以下处理
+    // 如果传入的时间字符串长度为10位（通常表示以秒为单位的时间戳，比如从后端获取的时间戳可能是这种形式），则将其转换为以毫秒为单位的时间戳（乘以1000），因为JavaScript中Date对象的构造函数接收的是以毫秒为单位的时间戳
     if (('' + time).length === 10) time = parseInt(time) * 1000
+    // 使用转换后的时间戳（或者本身就是以毫秒为单位的时间戳）创建一个Date对象，用于后续获取年、月、日等时间信息
     date = new Date(time)
   }
+  // 创建一个对象，用于存储从Date对象中提取出的各个时间单位对应的数值，键名与格式化字符串中的占位符相对应
   const formatObj = {
-    y: date.getFullYear(),
-    m: date.getMonth() + 1,
-    d: date.getDate(),
-    h: date.getHours(),
-    i: date.getMinutes(),
-    s: date.getSeconds(),
-    a: date.getDay()
+    y: date.getFullYear(), // 获取年份，例如2024
+    m: date.getMonth() + 1, // 获取月份，JavaScript中月份是从0开始计数的，所以要加1，范围是1 - 12
+    d: date.getDate(), // 获取日期，即一个月中的第几天，范围是1 - 31
+    h: date.getHours(), // 获取小时，范围是0 - 23
+    i: date.getMinutes(), // 获取分钟，范围是0 - 59
+    s: date.getSeconds(), // 获取秒，范围是0 - 59
+    a: date.getDay() // 获取星期几，返回值是0（星期日） - 6（星期六）
   }
+  // 使用正则表达式替换格式化字符串中的占位符，将其替换为实际的时间数值对应的字符串表示形式
   const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
     let value = formatObj[key]
+    // 如果占位符是 'a'（表示星期几），则将数字形式的星期几转换为中文汉字形式（例如1转换为“一”，表示星期一）
     if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
+    // 如果占位符对应的时间数值小于10，并且占位符长度大于0（防止出现类似 {0} 这种不需要补0的情况），则在数值前面补0，使其格式更规范（例如1变为01）
     if (result.length > 0 && value < 10) {
       value = '0' + value
     }
+    // 返回处理后的时间数值对应的字符串，如果数值为0或者不存在（比如没有获取到对应的时间信息），则返回0
     return value || 0
   })
+  // 返回最终格式化后的时间字符串
   return time_str
 }
 
+// 这个函数用于根据时间与当前时间的时间差，以相对友好的格式来展示时间，例如“刚刚”、“10分钟前”等，如果时间差较大或者传入了格式化选项，则按照指定格式进行格式化展示
 export function formatTime(time, option) {
+  // 将传入的时间参数转换为以毫秒为单位的时间戳（假设传入的是以秒为单位的时间戳，乘以1000进行转换），方便后续进行时间差的计算等操作
   time = +time * 1000
+  // 根据转换后的时间戳创建一个Date对象，用于获取时间信息
   const d = new Date(time)
+  // 获取当前时间的时间戳（以毫秒为单位）
   const now = Date.now()
 
+  // 计算当前时间与给定时间的时间差，单位为秒，通过将时间戳差值除以1000得到
   const diff = (now - d) / 1000
 
+  // 如果时间差小于30秒，直接返回“刚刚”，表示时间很近
   if (diff < 30) {
     return '刚刚'
-  } else if (diff < 3600) { // less 1 hour
+  } else if (diff < 3600) { // 如果时间差小于1小时（1小时等于3600秒）
+    // 计算时间差对应的分钟数（向上取整），并返回类似“10分钟前”的格式
     return Math.ceil(diff / 60) + '分钟前'
-  } else if (diff < 3600 * 24) {
+  } else if (diff < 3600 * 24) { // 如果时间差小于1天（1天等于3600 * 24秒）
+    // 计算时间差对应的小时数（向上取整），并返回类似“3小时前”的格式
     return Math.ceil(diff / 3600) + '小时前'
-  } else if (diff < 3600 * 24 * 2) {
+  } else if (diff < 3600 * 24 * 2) { // 如果时间差小于2天
+    // 直接返回“1天前”
     return '1天前'
   }
+  // 如果传入了格式化选项（option），则调用parseTime函数按照传入的选项格式来格式化时间并返回
   if (option) {
     return parseTime(time, option)
   } else {
+    // 如果没有传入格式化选项，则以“月日时分”的格式返回时间，例如“10月15日12时30分”
     return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
   }
 }
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
index 369b902..43ef4dd 100644
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
@@ -1,36 +1,53 @@
 <template>
+  <!-- 最外层的 div 作为整个应用布局的包裹容器，通过绑定 :class 属性，动态地根据计算属性 classObj 的值来添加相应的类名 -->
   <div class="app-wrapper" :class="classObj">
+    <!-- 引入自定义的 Sidebar 组件，用于展示侧边栏内容，给它添加了一个类名 "sidebar-container"，方便后续进行样式设置 -->
     <sidebar class="sidebar-container"></sidebar>
+    <!-- 这是主要内容的容器 div，用于放置页面中除侧边栏之外的主体部分 -->
     <div class="main-container">
+      <!-- 引入自定义的 Navbar 组件，用于展示页面顶部的导航栏 -->
       <navbar></navbar>
+      <!-- 引入自定义的 AppMain 组件，用于展示页面主体的核心内容 -->
       <app-main></app-main>
     </div>
   </div>
 </template>
 
 <script>
+// 从当前目录下的 components 模块中导入 Navbar、Sidebar 和 AppMain 这三个自定义组件，以便在当前组件中使用它们来构建页面布局
 import { Navbar, Sidebar, AppMain } from './components'
+// 从当前目录下的 mixin 文件夹中的 ResizeHandler 文件导入 ResizeMixin，可能是一个混入（mixin）对象，用于处理页面尺寸变化相关的逻辑
 import ResizeMixin from './mixin/ResizeHandler'
 
 export default {
   name: 'layout',
+  // 在 components 属性中注册要使用的子组件，将导入的 Navbar、Sidebar 和 AppMain 组件进行注册，这样在模板中就可以直接通过组件标签名来使用它们了
   components: {
     Navbar,
     Sidebar,
     AppMain
   },
+  // 使用 mixins 属性引入 ResizeMixin，混入（mixin）可以将一些通用的逻辑、属性或方法混入到当前组件中，这里可能会混入处理页面大小调整相关的功能代码到当前的 layout 组件
   mixins: [ResizeMixin],
   computed: {
+    // 定义一个计算属性 sidebar，它返回 Vuex 存储（store）中 app 模块下的 sidebar 状态数据。
+    // 通过这种方式，当前组件可以获取并响应式地使用 sidebar 的相关状态，比如判断侧边栏是否打开等情况。
     sidebar() {
       return this.$store.state.app.sidebar
     },
+    // 定义一个计算属性 device，同样是从 Vuex 存储的 app 模块中获取 device 状态数据，这个数据可能用于表示当前设备类型（如移动端'mobile' 或者桌面端等）。
     device() {
       return this.$store.state.app.device
     },
+    // 定义一个计算属性 classObj，它返回一个对象，对象中的属性会根据前面获取的 sidebar 和 device 等状态来动态决定。
+    // 以下是对这个对象属性的详细说明：
     classObj() {
       return {
-        hideSidebar: !this.sidebar.opened,
+        // 如果侧边栏不是打开状态（!this.sidebar.opened），则添加 hideSidebar 类名，这个类名可能在样式中用于隐藏侧边栏或者改变其显示样式等相关操作。
+        hideSidebar:!this.sidebar.opened,
+        // 如果侧边栏设置了 withoutAnimation 属性为 true（表示不需要动画效果），则添加 withoutAnimation 类名，用于控制侧边栏在显示隐藏等操作时是否应用动画效果的样式相关设置。
         withoutAnimation: this.sidebar.withoutAnimation,
+        // 如果当前设备类型是'mobile'（通过 this.device ==='mobile' 判断），则添加 mobile 类名，方便针对移动端进行特定的样式布局调整。
         mobile: this.device === 'mobile'
       }
     }
@@ -38,12 +55,44 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
+<script>
+// 从当前目录下的 components 模块中导入 Navbar、Sidebar 和 AppMain 这三个自定义组件，以便在当前组件中使用它们来构建页面布局
+import { Navbar, Sidebar, AppMain } from './components'
+// 从当前目录下的 mixin 文件夹中的 ResizeHandler 文件导入 ResizeMixin，可能是一个混入（mixin）对象，用于处理页面尺寸变化相关的逻辑
+import ResizeMixin from './mixin/ResizeHandler'
+
+export default {
+  name: 'layout',
+  // 在 components 属性中注册要使用的子组件，将导入的 Navbar、Sidebar 和 AppMain 组件进行注册，这样在模板中就可以直接通过组件标签名来使用它们了
+  components: {
+    Navbar,
+    Sidebar,
+    AppMain
+  },
+  // 使用 mixins 属性引入 ResizeMixin，混入（mixin）可以将一些通用的逻辑、属性或方法混入到当前组件中，这里可能会混入处理页面大小调整相关的功能代码到当前的 layout 组件
+  mixins: [ResizeMixin],
+  computed: {
+    // 定义一个计算属性 sidebar，它返回 Vuex 存储（store）中 app 模块下的 sidebar 状态数据。
+    // 通过这种方式，当前组件可以获取并响应式地使用 sidebar 的相关状态，比如判断侧边栏是否打开等情况。
+    sidebar() {
+      return this.$store.state.app.sidebar
+    },
+    // 定义一个计算属性 device，同样是从 Vuex 存储的 app 模块中获取 device 状态数据，这个数据可能用于表示当前设备类型（如移动端'mobile' 或者桌面端等）。
+    device() {
+      return this.$store.state.app.device
+    },
+    // 定义一个计算属性 classObj，它返回一个对象，对象中的属性会根据前面获取的 sidebar 和 device 等状态来动态决定。
+    // 以下是对这个对象属性的详细说明：
+    classObj() {
+      return {
+        // 如果侧边栏不是打开状态（!this.sidebar.opened），则添加 hideSidebar 类名，这个类名可能在样式中用于隐藏侧边栏或者改变其显示样式等相关操作。
+        hideSidebar:!this.sidebar.opened,
+        // 如果侧边栏设置了 withoutAnimation 属性为 true（表示不需要动画效果），则添加 withoutAnimation 类名，用于控制侧边栏在显示隐藏等操作时是否应用动画效果的样式相关设置。
+        withoutAnimation: this.sidebar.withoutAnimation,
+        // 如果当前设备类型是'mobile'（通过 this.device ==='mobile' 判断），则添加 mobile 类名，方便针对移动端进行特定的样式布局调整。
+        mobile: this.device === 'mobile'
+      }
+    }
   }
-</style>
+}
+</script>
diff --git a/src/views/layout/mixin/ResizeHandler.js b/src/views/layout/mixin/ResizeHandler.js
index b22c8bb..701d0a8 100644
--- a/src/views/layout/mixin/ResizeHandler.js
+++ b/src/views/layout/mixin/ResizeHandler.js
@@ -1,38 +1,57 @@
+// 从项目的 @/store 目录下导入 Vuex 的 store 实例，这个 store 通常用于管理应用中的状态数据以及处理相关的业务逻辑，例如控制侧边栏的显示隐藏、设备类型的切换等操作
 import store from '@/store'
 
+// 通过解构赋值从 document 对象中获取 body 属性，后续可能会基于这个 body 元素来获取页面相关的尺寸等信息，比如判断页面宽度是否满足移动端的条件
 const { body } = document
+// 定义一个常量 WIDTH，表示一个宽度的阈值，单位应该是像素，这里设置为 1024px，可能用于区分移动端和桌面端设备（比如页面宽度小于这个值时认为是移动端）
 const WIDTH = 1024
+// 定义一个常量 RATIO，具体含义可能和页面尺寸判断逻辑相关，结合代码来看，可能是在判断页面宽度是否符合移动端条件时需要减去的一个值
 const RATIO = 3
 
 export default {
+  // watch 选项用于监听组件中的数据变化，这里监听了 $route（Vue 路由对象）的变化
   watch: {
     $route(route) {
+      // 判断当前设备是否为移动端（通过 this.device ==='mobile' 判断，这里的 this.device 应该是组件中的某个属性，用于标识设备类型）并且侧边栏是打开状态（this.sidebar.opened）
       if (this.device === 'mobile' && this.sidebar.opened) {
+        // 如果满足上述条件，通过 store.dispatch 方法触发 Vuex store 中的 'CloseSideBar' 这个 action，传入一个配置对象 { withoutAnimation: false }，表示关闭侧边栏，并且关闭时是否有动画效果设置为 false（可能在对应的 action 实现中有相应的处理逻辑来根据这个配置关闭侧边栏并控制动画展示情况）
         store.dispatch('CloseSideBar', { withoutAnimation: false })
       }
     }
   },
+  // beforeMount 生命周期钩子函数，在组件挂载到 DOM 之前被调用。这里给 window 对象添加了一个'resize' 事件监听器，当窗口大小发生变化时，会触发 this.resizeHandler 方法，用于处理窗口大小变化相关的逻辑
   beforeMount() {
     window.addEventListener('resize', this.resizeHandler)
   },
+  // mounted 生命周期钩子函数，在组件挂载到 DOM 之后被调用。这里首先调用 this.isMobile 方法来判断当前设备是否为移动端
   mounted() {
     const isMobile = this.isMobile()
     if (isMobile) {
+      // 如果是移动端，通过 store.dispatch 方法触发 Vuex store 中的 'ToggleDevice' 这个 action，传入'mobile' 字符串参数，可能用于在 store 中更新设备类型的状态为移动端，以便后续根据这个状态进行相应的布局或功能调整
       store.dispatch('ToggleDevice', 'mobile')
+      // 同时触发 'CloseSideBar' 这个 action，传入 { withoutAnimation: true }，表示关闭侧边栏并且关闭过程不显示动画，用于在移动端初始加载时关闭侧边栏以适应移动端布局等情况
       store.dispatch('CloseSideBar', { withoutAnimation: true })
     }
   },
   methods: {
+    // 定义一个名为 isMobile 的方法，用于判断当前设备是否为移动端
     isMobile() {
+      // 通过 body.getBoundingClientRect() 方法获取 body 元素的尺寸信息（返回一个包含元素的位置、宽度、高度等信息的 DOMRect 对象）
       const rect = body.getBoundingClientRect()
+      // 判断页面可视区域的宽度（rect.width）减去常量 RATIO 的值是否小于定义的 WIDTH（1024px），如果小于则认为当前设备是移动端，返回 true，否则返回 false
       return rect.width - RATIO < WIDTH
     },
+    // 定义 resizeHandler 方法，用于处理窗口大小变化的逻辑，当窗口触发'resize' 事件时会调用这个方法
     resizeHandler() {
+      // 判断当前页面是否处于隐藏状态（比如切换到其他标签页等情况，document.hidden 为 true 表示页面被隐藏），如果页面没有隐藏
       if (!document.hidden) {
+        // 调用 this.isMobile 方法重新判断当前设备是否变为移动端
         const isMobile = this.isMobile()
-        store.dispatch('ToggleDevice', isMobile ? 'mobile' : 'desktop')
+        // 通过 store.dispatch 方法触发 Vuex store 中的 'ToggleDevice' 这个 action，根据 isMobile 的结果传入'mobile' 或者 'desktop'，用于更新 store 中设备类型的状态，使其与当前实际设备类型保持一致
+        store.dispatch('ToggleDevice', isMobile? 'mobile' : 'desktop')
 
         if (isMobile) {
+          // 如果当前设备变为移动端，触发 'CloseSideBar' 这个 action，传入 { withoutAnimation: true }，关闭侧边栏并且不显示动画，以适应移动端布局要求
           store.dispatch('CloseSideBar', { withoutAnimation: true })
         }
       }