diff --git a/front-end/mall4v/src/layout/main-content.vue b/front-end/mall4v/src/layout/main-content.vue
index cd16490..90f6718 100644
--- a/front-end/mall4v/src/layout/main-content.vue
+++ b/front-end/mall4v/src/layout/main-content.vue
@@ -1,85 +1,125 @@
 <template>
   <div>
+    <!-- 条件渲染：如果当前路由配置了 isTab 属性，则显示顶部卡片 -->
     <el-card
       v-if="route.meta.isTab"
-      class="main-head"
+    class="main-head"
     >
-      <el-breadcrumb :separator-icon="ArrowRight">
-        <el-breadcrumb-item
-          v-for="(item, index) in selectMenu"
-          :key="index"
-          class="breadcrumb-item"
-        >
-          <span>{{ item }}</span>
-        </el-breadcrumb-item>
-      </el-breadcrumb>
+    <!-- 面包屑导航 -->
+    <el-breadcrumb :separator-icon="ArrowRight">           <!-- 使用 ArrowRight 图标作为分隔符 -->
+      <el-breadcrumb-item
+        v-for="(item, index) in selectMenu"
+      :key="index"
+      class="breadcrumb-item"
+      >
+      <span>{{ item }}</span>                            <!-- 显示面包屑项的文本内容 -->
+      </el-breadcrumb-item>
+    </el-breadcrumb>
     </el-card>
+
+    <!-- 主内容区域 -->
+    <!-- 主内容区容器，使用 site-content 类名进行样式定义 -->
+    <!-- 动态绑定类名：如果当前路由配置了 isTab，则添加 site-content--tabs 类 -->
     <main
       class="site-content"
-      :class="{ 'site-content--tabs': route.meta.isTab }"
+    :class="{ 'site-content--tabs': route.meta.isTab }"
     >
-      <!-- 主入口标签页 (发布商品) -->
-      <div
-        v-if="route.name === 'prod-post-product/postProduct'"
-        :style="siteContentViewHeight"
-      >
-        <keep-alive>
-          <router-view />
-        </keep-alive>
-      </div>
-      <el-card
-        v-else-if="homeHidden"
-        class="card-content-h"
-        style="border-radius: 0 !important; box-shadow: none"
-        :body-style="siteContentViewHeight"
-      >
-        <router-view />
-      </el-card>
-      <div v-else>
-        <router-view />
-      </div>
-    </main>
+    <!-- 条件渲染：根据当前路由名称和 meta 属性显示不同内容 -->
+    <!-- 发布商品页面 (prod-post-product/postProduct) -->
+      <!-- 如果当前路由名称为 prod-post-product/postProduct -->
+      <!-- 动态设置样式，确保内容区有足够的高度 -->
+      <!-- 使用 keep-alive 组件缓存视图，提高性能 -->
+      <!-- 渲染匹配到的子组件 -->
+    <div
+      v-if="route.name === 'prod-post-product/postProduct'"
+    :style="siteContentViewHeight"
+    >
+    <keep-alive>
+      <router-view />
+    </keep-alive>
+  </div>
+
+  <!-- 其他页面且 homeHidden 为 true -->
+      <!-- 如果 homeHidden 计算属性为 true -->
+      <!-- 使用 card-content-h 类名进行样式定义 -->
+      <!-- 移除边框圆角和阴影效果 -->
+      <!-- 动态设置内容区高度 -->
+  <el-card
+    v-else-if="homeHidden"
+  class="card-content-h"
+  style="border-radius: 0 !important; box-shadow: none"
+  :body-style="siteContentViewHeight"
+  >
+  <router-view />                                      <!-- 渲染匹配到的子组件 -->
+  </el-card>
+
+  <!-- 默认情况（首页或其他不需要特殊处理的页面） -->
+  <div v-else>
+    <router-view />                                      <!-- 渲染匹配到的子组件 -->
+  </div>
+  </main>
   </div>
 </template>
 
 <script setup>
-import { ArrowRight } from '@element-plus/icons-vue'
-const route = useRoute()
+import { ArrowRight } from '@element-plus/icons-vue'          // 导入 Element Plus 的箭头图标组件
+import { ref, computed } from 'vue'                           // 从 Vue 导入组合式 API 函数
+import { useRoute } from 'vue-router'                         // 从 vue-router 导入 useRoute 函数，用于获取当前路由信息
+import { isURL } from '@/utils/validate'                      // 导入自定义验证工具函数，用于检查 URL 格式
+import { useCommonStore } from '@/store'                      // 导入 Vuex store 模块中的 commonStore
+
+// 初始化文档客户区高度为当前页面的高度
 const documentClientHeight = ref(document.documentElement.clientHeight)
+
+// 监听窗口大小变化事件，实时更新文档客户区高度
 window.addEventListener('resize', () => {
   documentClientHeight.value = document.documentElement.clientHeight
 })
+
+// 计算属性：动态计算内容区高度，考虑导航栏、头部等固定元素占用的空间
 const siteContentViewHeight = computed(() => {
-  let height = documentClientHeight.value - 50 - 30 - 2
-  if (route.meta.isTab) {
-    height -= 40
-    return isURL(route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
+  let height = documentClientHeight.value - 50 - 30 - 2      // 初始高度减去顶部和底部固定元素占用的空间
+  if (route.meta.isTab) {                                    // 如果当前路由配置了 isTab 属性
+    height -= 40                                             // 进一步减少高度以适应标签页
+    return isURL(route.meta.iframeUrl)                       // 检查是否为 iframe 路由
+      ? { height: height + 'px' }                            // 是 iframe，则设置固定高度
+      : { minHeight: height + 'px' };                        // 否则，设置最小高度
   }
-  return { minHeight: height + 'px' }
+  return { minHeight: height + 'px' };                       // 对于非标签页路由，仅设置最小高度
 })
 
+// 获取通用 Store 实例，用于管理全局状态
 const commonStore = useCommonStore()
+
+// 计算属性：动态获取选中的菜单项
 const selectMenu = computed(() => commonStore.selectMenu)
+
+// 计算属性：判断是否隐藏首页标志（根据当前路由名称）
 const homeHidden = computed(() => route.name !== 'home')
 </script>
 <style scoped>
+/* 主头部样式 */
 .main-head {
-  background: #ffffff;
-  width: 100%;
-  height: 40px;
-  position: fixed;
-  top: 50px;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  border-radius: 0;
-  box-shadow: none;
-  border-top: none;
+  background: #ffffff;                                       /* 白色背景 */
+  width: 100%;                                               /* 宽度占满整个容器 */
+  height: 40px;                                              /* 固定高度 */
+  position: fixed;                                           /* 固定定位 */
+  top: 50px;                                                 /* 距离顶部 50px */
+  z-index: 10;                                               /* 设置堆叠顺序，确保在其他内容之上 */
+  display: flex;                                             /* 使用弹性布局 */
+  align-items: center;                                       /* 垂直居中对齐子元素 */
+  border-radius: 0;                                          /* 移除边框圆角 */
+  box-shadow: none;                                          /* 移除阴影效果 */
+  border-top: none;                                          /* 移除顶部边框 */
 }
+
+/* 面包屑最后一项样式 */
 .breadcrumb-item:last-child span {
-  color: #155bd4 !important;
+  color: #155bd4 !important;                                 /* 设置文本颜色为蓝色，并强制覆盖其他样式 */
 }
+
+/* 卡片内容区域最小高度 */
 .card-content-h {
-  min-height: calc(100vh - 50px - 60px - 20px);
+  min-height: calc(100vh - 50px - 60px - 20px);              /* 动态计算最小高度，确保内容区有足够的空间 */
 }
 </style>
diff --git a/front-end/mall4v/src/layout/main-navbar-update-password.vue b/front-end/mall4v/src/layout/main-navbar-update-password.vue
index e981fd9..195b955 100644
--- a/front-end/mall4v/src/layout/main-navbar-update-password.vue
+++ b/front-end/mall4v/src/layout/main-navbar-update-password.vue
@@ -1,121 +1,157 @@
 <template>
+  <!-- 修改密码对话框 -->
   <el-dialog
     v-model="visible"
-    :title="'修改密码'"
-    :append-to-body="true"
+  :title="'修改密码'"
+  :append-to-body="true"
   >
-    <el-form
-      ref="dataFormRef"
-      :model="dataForm"
-      :rules="dataRule"
-      label-width="80px"
-      @keyup.enter="onSubmit(dataFormRef)"
-    >
-      <el-form-item label="账号">
-        <span>{{ userName }}</span>
-      </el-form-item>
-      <el-form-item
-        label="原密码"
-        prop="password"
-      >
-        <el-input
-          v-model="dataForm.password"
-          type="password"
-        />
-      </el-form-item>
-      <el-form-item
-        label="新密码"
-        prop="newPassword"
-      >
-        <el-input
-          v-model="dataForm.newPassword"
-          type="password"
-        />
-      </el-form-item>
-      <el-form-item
-        label="确定密码"
-        prop="confirmPassword"
-      >
-        <el-input
-          v-model="dataForm.confirmPassword"
-          type="password"
-        />
-      </el-form-item>
-    </el-form>
-    <template #footer>
+  <!-- 表单容器 -->
+  <el-form
+    ref="dataFormRef"
+  :model="dataForm"
+  :rules="dataRule"
+  label-width="80px"
+  @keyup.enter="onSubmit(dataFormRef)"
+  >
+  <!-- 账号信息 -->
+  <el-form-item label="账号">
+    <span>{{ userName }}</span>                           <!-- 显示当前用户名 -->
+  </el-form-item>
+
+  <!-- 原密码输入项 -->
+  <el-form-item
+    label="原密码"
+    prop="password"
+  >
+  <el-input
+    v-model="dataForm.password"
+  type="password"
+  />
+  </el-form-item>
+
+  <!-- 新密码输入项 -->
+  <el-form-item
+    label="新密码"
+    prop="newPassword"
+  >
+  <el-input
+    v-model="dataForm.newPassword"
+  type="password"
+  />
+  </el-form-item>
+
+  <!-- 确认密码输入项 -->
+  <el-form-item
+    label="确定密码"
+    prop="confirmPassword"
+  >
+  <el-input
+    v-model="dataForm.confirmPassword"
+  type="password"
+  />
+  </el-form-item>
+  </el-form>
+
+  <!-- 对话框底部按钮区域 -->
+  <template #footer>
       <span class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
+        <el-button @click="visible = false">取消</el-button>  <!-- 点击取消按钮关闭对话框 -->
         <el-button
           type="primary"
           @click="onSubmit(dataFormRef)"
         >确定</el-button>
       </span>
-    </template>
+  </template>
   </el-dialog>
 </template>
 
 <script setup>
-import { ElMessage } from 'element-plus'
-const visible = ref(false)
-const dataForm = reactive({
-  password: '',
-  newPassword: '',
-  confirmPassword: ''
+import { ElMessage } from 'element-plus'                      // 导入 Element Plus 的消息提示组件
+import { ref, reactive, computed, nextTick } from 'vue'       // 从 Vue 导入组合式 API 函数
+import { useUserStore } from '@/store'                        // 从 Vuex store 模块中导入用户状态管理
+import { useRouter } from 'vue-router'                        // 从 vue-router 导入路由导航器实例
+import http from '@/utils/http'                               // 导入 HTTP 请求工具
+import { encrypt } from '@/utils/encrypt'                     // 导入加密工具函数
+import { clearLoginInfo } from '@/utils/auth'                 // 导入清除登录信息的工具函数
+
+// 定义响应式变量和引用
+const visible = ref(false)                                    // 控制修改密码弹窗的可见性
+const dataForm = reactive({                                   // 修改密码表单的数据对象
+  password: '',                                               // 原始密码
+  newPassword: '',                                            // 新密码
+  confirmPassword: ''                                         // 确认新密码
 })
-const dataFormRef = ref()
+const dataFormRef = ref()                                     // 引用修改密码表单组件实例
+
+// 初始化函数：显示修改密码弹窗并重置表单
 const init = () => {
-  visible.value = true
+  visible.value = true                                        // 显示修改密码弹窗
   nextTick(() => {
-    dataFormRef.value?.resetFields()
+    dataFormRef.value?.resetFields()                          // 在下一个 DOM 更新周期后重置表单
   })
 }
-// eslint-disable-next-line no-unused-vars
+
+// 自定义验证规则：确保确认密码与新密码一致
 const validateConfirmPassword = (rule, value, callback) => {
   if (dataForm.newPassword !== value) {
-    callback(new Error('确认密码与新密码不一致'))
+    callback(new Error('确认密码与新密码不一致'))               // 如果确认密码与新密码不一致，则返回错误
   } else {
-    callback()
+    callback()                                                // 否则通过验证
   }
 }
+
+// 定义表单验证规则
 const dataRule = reactive({
-  password: [{ required: true, message: '原密码不能为空', trigger: 'blur' }],
-  newPassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
+  password: [{ required: true, message: '原密码不能为空', trigger: 'blur' }], // 原密码必填
+  newPassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }], // 新密码必填
   confirmPassword: [
-    { required: true, message: '确认密码不能为空', trigger: 'blur' },
-    { validator: validateConfirmPassword, trigger: 'blur' }
+    { required: true, message: '确认密码不能为空', trigger: 'blur' },            // 确认密码必填
+    { validator: validateConfirmPassword, trigger: 'blur' }                    // 自定义验证规则
   ]
 })
+
+// 获取用户 Store 实例，用于管理用户相关信息
 const userStore = useUserStore()
+
+// 计算属性：动态获取用户名
 const userName = computed(() => userStore.name)
+
+// 获取路由导航器实例
 const router = useRouter()
+
+// 提交表单处理函数
 const onSubmit = async formEl => {
-  if (!formEl) return
-  await formEl.validate(valid => {
-    if (valid) {
+  if (!formEl) return                                          // 如果没有表单元素，直接返回
+
+  await formEl.validate(valid => {                             // 调用表单验证方法
+    if (valid) {                                               // 如果验证通过
       http({
-        url: http.adornUrl('/sys/user/password'),
-        method: 'post',
+        url: http.adornUrl('/sys/user/password'),              // 修改密码 API 路径
+        method: 'post',                                        // 请求方法
         data: http.adornData({
-          password: encrypt(dataForm.password),
-          newPassword: encrypt(dataForm.newPassword)
+          password: encrypt(dataForm.password),                // 加密原始密码
+          newPassword: encrypt(dataForm.newPassword)           // 加密新密码
         })
       }).then(() => {
         ElMessage({
-          message: '操作?',
+          message: '密码修改成功',                              // 成功提示信息
           type: 'success',
           duration: 1500,
           onClose: () => {
-            visible.value = false
+            visible.value = false                              // 关闭修改密码弹窗
             nextTick(() => {
-              clearLoginInfo()
-              router.replace({ name: 'login' })
+              clearLoginInfo()                                 // 清除登录信息
+              router.replace({ name: 'login' })                // 跳转到登录页面
             })
           }
         })
+      }).catch(error => {
+        ElMessage.error('密码修改失败，请稍后再试')               // 失败提示信息
       })
     }
   })
 }
 
+// 将 init 方法暴露给父组件调用
 defineExpose({ init })
 </script>
diff --git a/front-end/mall4v/src/layout/main-navbar.vue b/front-end/mall4v/src/layout/main-navbar.vue
index e5cd724..627e51b 100644
--- a/front-end/mall4v/src/layout/main-navbar.vue
+++ b/front-end/mall4v/src/layout/main-navbar.vue
@@ -1,172 +1,219 @@
 <template>
   <div>
+    <!-- 导航栏容器 -->
     <nav class="site-navbar">
-      <!--左侧-->
+      <!-- 左侧区域 -->
       <div
         class="site-navbar-header"
         :style="{ 'margin-right': sidebarFold ? 0 : '20px' }"
       >
-        <!--        <img-->
-        <!--          class="menu-image-logo"-->
-        <!--          :src="configuration.bsTopBarIcon"-->
-        <!--          alt="logo"-->
-        <!--        >-->
-        <span
-          v-if="!sidebarFold"
-          class="site-navbar-lg"
-        >
-          mall4j建站后台
-        </span>
-        <span
-          v-else
-          class="site-navbar-mini"
-          :style="fontCloseSize"
-        >
-          mall4j
-        </span>
-      </div>
-      <!--右侧数据-->
-      <div class="site-navbar-content">
-        <div class="navbar-content-left">
-          <svg-icon
-            class="left-item"
-            icon-class="icon-zhedie"
-            @click="setSidebarFold"
-          />
-        </div>
-
-        <div class="navbar-content-right">
-          <el-dropdown
-            class="content-right-item"
-            :show-timeout="0"
-            placement="bottom"
-          >
-            <span class="el-dropdown-link">{{ userName }}</span>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item @click="updatePasswordHandle">
-                  修改密码
-                </el-dropdown-item>
-                <el-dropdown-item @click="logoutHandle">
-                  退出
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </div>
-      </div>
-      <!-- 弹窗, 修改密码 -->
-      <UpdatePassword
-        v-if="updatePassowrdVisible"
-        ref="updatePassowrdRef"
+      <!-- Logo 或标题 -->
+      <!--
+      <img
+        class="menu-image-logo"
+        :src="configuration.bsTopBarIcon"
+        alt="logo"
+      >
+      -->
+      <!-- 标题文本，根据侧边栏折叠状态显示不同内容 -->
+      <span
+        v-if="!sidebarFold"
+      class="site-navbar-lg"
+      >
+      mall4j建站后台
+      </span>
+      <span
+        v-else
+      class="site-navbar-mini"
+      :style="fontCloseSize"
+      >
+      mall4j
+      </span>
+  </div>
+
+  <!-- 右侧数据区域 -->
+  <div class="site-navbar-content">
+    <!-- 左侧操作项 -->
+    <div class="navbar-content-left">
+      <!-- 折叠/展开侧边栏按钮 -->
+      <svg-icon
+        class="left-item"
+        icon-class="icon-zhedie"
+      @click="setSidebarFold"
       />
-    </nav>
+    </div>
+
+    <!-- 右侧用户操作项 -->
+    <div class="navbar-content-right">
+      <!-- 用户下拉菜单 -->
+      <el-dropdown
+        class="content-right-item"
+        :show-timeout="0"
+      placement="bottom"
+      >
+      <span class="el-dropdown-link">{{ userName }}</span> <!-- 显示当前用户名 -->
+      <!-- 下拉菜单内容 -->
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item @click="updatePasswordHandle"> <!-- 修改密码选项 -->
+            修改密码
+          </el-dropdown-item>
+          <el-dropdown-item @click="logoutHandle">       <!-- 退出登录选项 -->
+            退出
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+      </el-dropdown>
+    </div>
+  </div>
+
+  <!-- 修改密码弹窗 -->
+  <UpdatePassword
+    v-if="updatePassowrdVisible"
+  ref="updatePassowrdRef"
+  />
+  </nav>
   </div>
 </template>
 
 <script setup>
-import { ElMessageBox } from 'element-plus'
-import UpdatePassword from './main-navbar-update-password.vue'
+import { ElMessageBox } from 'element-plus'                  // 导入 Element Plus 的消息框组件
+import UpdatePassword from './main-navbar-update-password.vue'// 导入修改密码组件
+
+import { computed, reactive, ref, nextTick } from 'vue'      // 从 Vue 导入组合式 API 函数
+import { useRoute, useRouter } from 'vue-router'             // 从 vue-router 导入路由相关函数
+import { useUserStore, useCommonStore } from '@/store'       // 从 Vuex store 模块中导入用户和通用状态管理
+import http from '@/utils/http'                              // 导入 HTTP 请求工具
+import { clearLoginInfo } from '@/utils/auth'                // 导入清除登录信息的工具函数
 
+// 获取当前路由实例
 const route = useRoute()
+
+// 获取路由导航器实例
 const router = useRouter()
+
+// 获取用户 Store 实例，用于管理用户相关信息
 const userStore = useUserStore()
+
+// 计算属性：动态获取用户名
 const userName = computed(() => userStore.name)
+
+// 定义一个响应式对象，用于设置关闭按钮的字体大小
 const fontCloseSize = reactive({
   fontSize: '16px'
 })
+
+// 获取通用 Store 实例，用于管理全局状态
 const commonStore = useCommonStore()
+
+// 计算属性：动态获取侧边栏折叠状态
 const sidebarFold = computed(() => commonStore.sidebarFold)
+
+// 函数：切换侧边栏折叠状态
 const setSidebarFold = () => {
-  const len = commonStore.selectMenu.length
-  const flag = sessionStorage.getItem('isExpand')
-  if ((route.path === '/home' || len === 1) && flag === '0') {
-    commonStore.updateSidebarFold(true)
+  const len = commonStore.selectMenu.length                   // 获取选中的菜单项数量
+  const flag = sessionStorage.getItem('isExpand')             // 获取会话存储中的展开标志
+  if ((route.path === '/home' || len === 1) && flag === '0') { // 如果在首页或只有一个菜单项且标志为 '0'
+    commonStore.updateSidebarFold(true)                       // 设置侧边栏为展开状态
   } else {
-    const foldFlag = sidebarFold.value
-    commonStore.updateSidebarFold(!foldFlag)
+    const foldFlag = sidebarFold.value                        // 获取当前侧边栏折叠状态
+    commonStore.updateSidebarFold(!foldFlag)                  // 切换侧边栏折叠状态
   }
 }
 
+// 函数：处理退出操作
 const logoutHandle = () => {
+  // 使用 Element Plus 的消息框确认退出操作
   ElMessageBox.confirm('确定进行[退出]操作?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
+    // 发送 POST 请求执行登出操作
     http({
-      url: http.adornUrl('/logOut'),
-      method: 'post',
-      data: http.adornData()
+      url: http.adornUrl('/logOut'),                         // 登出 API 路径
+      method: 'post',                                        // 请求方法
+      data: http.adornData()                                 // 请求数据
     }).then(() => {
-      clearLoginInfo()
-      router.push({ name: 'login' })
+      clearLoginInfo()                                       // 清除登录信息
+      router.push({ name: 'login' })                         // 跳转到登录页面
     })
   })
 }
 
+// 响应式引用：控制修改密码弹窗的可见性
 const updatePassowrdVisible = ref(false)
+
+// 响应式引用：指向修改密码组件的实例
 const updatePassowrdRef = ref(null)
+
 /**
- * 修改密码
+ * 函数：处理修改密码操作
  */
 const updatePasswordHandle = () => {
-  updatePassowrdVisible.value = true
+  updatePassowrdVisible.value = true                          // 显示修改密码弹窗
   nextTick(() => {
-    updatePassowrdRef.value?.init()
+    updatePassowrdRef.value?.init()                           // 在下一个 DOM 更新周期后初始化修改密码组件
   })
 }
 </script>
 
 <style lang="scss" scoped>
 .site-navbar {
-  display: flex;
-  align-items: center;
-  background-color: #ffffff;
-  color: #333333;
-  border-bottom: 1px solid #ebedf0;
+  display: flex;                                             // 使用弹性布局以确保子元素在行内排列
+  align-items: center;                                       // 垂直居中对齐子元素
+  background-color: #ffffff;                                 // 设置背景颜色为白色
+  color: #333333;                                            // 设置文本颜色为深灰色
+  border-bottom: 1px solid #ebedf0;                          // 添加底部细边框，颜色为浅灰色
+
   .site-navbar-header {
-    display: flex;
-    align-items: center;
-    margin-left: 20px;
-    color: #333;
-    font-weight: 700;
-    height: 50px;
-    line-height: 50px;
+    display: flex;                                           // 使用弹性布局以确保子元素在行内排列
+    align-items: center;                                     // 垂直居中对齐子元素
+    margin-left: 20px;                                       // 左侧外边距为 20px
+    color: #333;                                             // 设置文本颜色为深灰色
+    font-weight: 700;                                        // 设置字体粗细为加粗（700）
+    height: 50px;                                            // 固定高度为 50px
+    line-height: 50px;                                       // 行高为 50px，使文本垂直居中
+
     .site-navbar-lg {
-      font-size: 16px;
-      word-break: break-all;
-      word-wrap: break-word;
+      font-size: 16px;                                       // 设置字体大小为 16px
+      word-break: break-all;                                 // 允许长单词或 URL 地址换行到下一行
+      word-wrap: break-word;                                 // 允许长单词或 URL 地址换行到下一行（旧版浏览器兼容）
     }
+
     .site-navbar-lg,
     .site-navbar-mini {
-      margin: 0 5px;
+      margin: 0 5px;                                         // 左右外边距为 5px
     }
   }
+
   .site-navbar-content {
-    flex: 1;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    padding: 0 20px;
-    font-size: 18px;
-    align-items: center;
+    flex: 1;                                                 // 占据剩余空间
+    width: 100%;                                             // 宽度占满整个容器
+    display: flex;                                           // 使用弹性布局以确保子元素在行内排列
+    justify-content: space-between;                          // 子元素之间等间距分布
+    padding: 0 20px;                                         // 内边距左右各 20px
+    font-size: 18px;                                         // 设置字体大小为 18px
+    align-items: center;                                     // 垂直居中对齐子元素
+
     .navbar-content-left {
-      flex: 1;
+      flex: 1;                                               // 占据剩余空间
       .left-item {
-        cursor: pointer;
+        cursor: pointer;                                     // 指针样式，表示该元素可点击
       }
     }
 
     .navbar-content-right {
-      display: flex;
+      display: flex;                                         // 使用弹性布局以确保子元素在行内排列
     }
   }
 }
+
+// 注释掉的部分：
 //.menu-image-logo {
-//  object-fit: contain;
-//  height: 18px;
-//  width: 59px;
-//  margin-right: 10px;
+//  object-fit: contain;                                      // 确保图片在容器内保持比例缩放
+//  height: 18px;                                             // 设置图片高度为 18px
+//  width: 59px;                                              // 设置图片宽度为 59px
+//  margin-right: 10px;                                       // 右侧外边距为 10px
 //}
 </style>
diff --git a/front-end/mall4v/src/layout/main-sidebar-sub-menu-item.vue b/front-end/mall4v/src/layout/main-sidebar-sub-menu-item.vue
index 867e1af..7c461e8 100644
--- a/front-end/mall4v/src/layout/main-sidebar-sub-menu-item.vue
+++ b/front-end/mall4v/src/layout/main-sidebar-sub-menu-item.vue
@@ -1,125 +1,154 @@
 <template>
   <div class="menu-mod">
+    <!-- 如果 expandMenu 包含子菜单项 (list) -->
     <div v-if="expandMenu.list">
+      <!-- 使用 el-sub-menu 创建一个可展开的菜单项 -->
       <el-sub-menu
         v-if="!item.hidden"
-        :index="expandMenu.menuId + ''"
+      :index="expandMenu.menuId + ''"
       >
-        <template #title>
-          <span
-            style="font-size: 14px"
-            :title="expandMenu.name.length > 4 ? expandMenu.name : ''"
-          >{{ expandMenu.name }}</span>
+      <template #title>
+        <!-- 菜单项标题 -->
+        <span
+          style="font-size: 14px"
+        :title="expandMenu.name.length > 4 ? expandMenu.name : ''"
+        >{{ expandMenu.name }}</span>
+      </template>
+
+      <!-- 使用 el-menu-item-group 包装子菜单项 -->
+      <el-menu-item-group class="menu-right-el-item">
+        <template v-for="menu in expandMenu.list">     <!-- 遍历子菜单列表 -->
+          <!-- 每个子菜单项 -->
+          <el-menu-item
+            v-if="!menu.hidden"
+          :key="menu.menuId"
+          style="
+          font-size: 14px !important;              <!-- 设置字体大小为 14px -->
+          line-height: 40px;
+          padding-left: 30px !important;           <!-- 设置左侧内边距为 30px -->
+          padding-right: 10px !important;          <!-- 设置右侧内边距为 10px -->
+          "
+          class="menu-right-el-item is-active item-text"
+          :class="{ 'menu-active': selectRightId === menu.menuId }"
+          @click="gotoRouteHandle(menu)"
+          >
+          <span :title="menu.name.length > 4 ? menu.name : ''">{{ menu.name }}</span> <!-- 显示子菜单名称 -->
+          <!-- 如果子菜单还有子菜单，则递归渲染 SubMenuItem 组件 -->
+          <SubMenuItem
+            v-if="menu.list"
+            :expand-menu="menu"
+          />
+          </el-menu-item>
         </template>
-        <el-menu-item-group class="menu-right-el-item">
-          <template v-for="menu in expandMenu.list">
-            <el-menu-item
-              v-if="!menu.hidden"
-              :key="menu.menuId"
-              style="
-                font-size: 14px !important;
-                line-height: 40px;
-                padding-left: 30px !important;
-                padding-right: 10px !important;
-              "
-              class="menu-right-el-item is-active item-text"
-              :class="{ 'menu-active': selectRightId === menu.menuId }"
-              @click="gotoRouteHandle(menu)"
-            >
-              <span :title="menu.name.length > 4 ? menu.name : ''">{{ menu.name }}</span>
-              <SubMenuItem
-                v-if="menu.list"
-                :expand-menu="menu"
-              />
-            </el-menu-item>
-          </template>
-        </el-menu-item-group>
+      </el-menu-item-group>
       </el-sub-menu>
     </div>
+
+    <!-- 如果 expandMenu 没有子菜单项 (list) -->
     <div v-else>
+      <!-- 使用 el-menu-item 创建一个不可展开的菜单项 -->
       <el-menu-item
         v-if="!expandMenu.hidden"
-        :key="expandMenu.menuId"
-        style="font-size: 14px !important; padding-left: 15px !important; line-height: 40px"
-        class="menu-right-el-item is-active item-text"
-        :class="{ 'menu-active': selectRightId === expandMenu.menuId }"
-        @click="gotoRouteHandle(expandMenu)"
+      :key="expandMenu.menuId"
+      style="font-size: 14px !important; padding-left: 15px !important; line-height: 40px"
+      class="menu-right-el-item is-active item-text"
+      :class="{ 'menu-active': selectRightId === expandMenu.menuId }"
+      @click="gotoRouteHandle(expandMenu)"
       >
-        <span :title="expandMenu.name.length > 4 ? expandMenu.name : ''">{{
-          expandMenu.name
-        }}</span>
+      <span :title="expandMenu.name.length > 4 ? expandMenu.name : ''">{{ expandMenu.name }}</span> <!-- 显示菜单名称 -->
       </el-menu-item>
     </div>
   </div>
 </template>
 
 <script setup>
+// 导入子菜单项组件
 import SubMenuItem from './main-sidebar-sub-menu-item.vue'
+
+// 定义组件接收的属性 (props)
 const props = defineProps({
   expandMenu: {
-    type: Object,
-    default: () => {}
+    type: Object, // 属性类型为对象
+    default: () => ({}) // 如果没有传递此属性，则默认为空对象
   },
   menuIndex: {
-    type: String,
-    default: ''
+    type: String, // 属性类型为字符串
+    default: '' // 如果没有传递此属性，则默认为空字符串
   }
 })
+
+// 使用 ref 创建响应式数据，初始化为 props.expandMenu 的值
 const item = ref(props.expandMenu)
 
+// 初始化 Vuex store 实例
+const commonStore = useCommonStore()
+
+// 计算属性：获取当前选中的右侧菜单项 ID
 const selectRightId = computed(() => commonStore.selectRightId)
 
-const commonStore = useCommonStore()
+// 初始化 Vue Router 实例
 const router = useRouter()
-// 监听路由
+
+// 监听路由变化，当路由发生变化时调用 routeHandle 函数处理
 watch(
-  () => router.currentRoute,
+  () => router.currentRoute.value, // 监听当前路由的变化
   route => {
-    routeHandle(route)
+    routeHandle(route) // 路由变化时调用 routeHandle 处理逻辑
   }
 )
-// 路由操作
+
+// 路由操作函数
 const routeHandle = route => {
-  if (route.meta.isTab) {
-    commonStore.updateSelectRightId(route.meta.menuId || '')
+  if (route.meta.isTab) { // 检查路由元信息中是否有 isTab 标记
+    commonStore.updateSelectRightId(route.meta.menuId || '') // 更新选中的右侧菜单项 ID
   }
 }
 
-// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
+// 通过 menuId 与动态(菜单)路由进行匹配跳转至指定路由
 const gotoRouteHandle = menu => {
-  if (router.currentRoute.value.name === menu.url) {
+  if (router.currentRoute.value.name === menu.url) { // 如果当前路由已经是目标路由，则不执行跳转
     return
   }
-  router.push({ name: menu.url })
+  router.push({ name: menu.url }) // 否则，导航到指定路由
 }
 </script>
 <style lang="scss" scoped>
 .menu-mod {
+  /* 定义右侧菜单项的基本样式 */
   .menu-right-el-item {
+    /* 当菜单项处于激活状态时的样式 */
     &.is-active {
-      background-color: #ffffff;
-      color: #333;
+      background-color: #ffffff; /* 背景颜色为白色 */
+      color: #333;               /* 文本颜色为深灰色 */
     }
+
+    /* 自定义激活状态下的样式 */
     &.menu-active {
-      background-color: #e7eefb;
-      color: #155bd4;
+      background-color: #e7eefb; /* 背景颜色为浅蓝色 */
+      color: #155bd4;            /* 文本颜色为蓝色 */
     }
+
+    /* 修改 el-menu-item-group 组件中标题的内边距 */
     :deep(.el-menu-item-group__title) {
-      padding: 0;
+      padding: 0; /* 移除默认内边距 */
     }
   }
+
+  /* 定义子菜单标题的样式 */
   div .el-sub-menu__title span {
-    display: inline-block;
-    width: 85px;
-    font-size: 14px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    display: inline-block;       /* 设置为行内块元素 */
+    width: 85px;                 /* 固定宽度为 85px */
+    font-size: 14px;             /* 字体大小为 14px */
+    overflow: hidden;            /* 隐藏溢出的内容 */
+    text-overflow: ellipsis;     /* 溢出部分用省略号表示 */
+    white-space: nowrap;         /* 强制在同一行显示 */
   }
-  .el-sub-menu  .menu-right-el-item.el-menu-item span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+
+  /* 定义子菜单项中的文本样式 */
+  .el-sub-menu .menu-right-el-item.el-menu-item span {
+    overflow: hidden;            /* 隐藏溢出的内容 */
+    text-overflow: ellipsis;     /* 溢出部分用省略号表示 */
+    white-space: nowrap;         /* 强制在同一行显示 */
   }
 }
 </style>
diff --git a/front-end/mall4v/src/layout/main-sidebar-sub-menu.vue b/front-end/mall4v/src/layout/main-sidebar-sub-menu.vue
index 6322391..f8fbe0c 100644
--- a/front-end/mall4v/src/layout/main-sidebar-sub-menu.vue
+++ b/front-end/mall4v/src/layout/main-sidebar-sub-menu.vue
@@ -1,41 +1,53 @@
 <template>
+  <!-- 使用 el-scrollbar 创建一个具有滚动功能的容器 -->
   <el-scrollbar class="menu-right-el">
+    <!-- 使用 el-menu 组件创建一个垂直菜单 -->
     <el-menu
       class="el-menu-vertical-demo"
-      :default-openeds="openeds"
+    :default-openeds="openeds"
     >
-      <SubMenuItem
-        v-for="(item, index) in expandMenu"
-        :key="index"
-        :expand-menu="item"
-      />
+    <!-- 使用 v-for 指令遍历 expandMenu 数组，动态生成子菜单项 -->
+    <SubMenuItem
+      v-for="(item, index) in expandMenu"
+    :key="index"
+    :expand-menu="item"
+    />
     </el-menu>
   </el-scrollbar>
 </template>
 
 <script setup>
+// 导入子菜单项组件
 import SubMenuItem from './main-sidebar-sub-menu-item.vue'
+
+// 定义组件接收的属性 (props)
 defineProps({
   expandMenu: {
-    type: Array,
-    default: () => []
+    type: Array, // 属性类型为数组
+    default: () => [] // 如果没有传递此属性，则默认为空数组
   }
 })
 
+// 初始化 Vuex store 实例
 const commonStore = useCommonStore()
-const openeds = computed(() => commonStore.menuIds)
+
+// 计算属性：获取当前展开的菜单项 ID 列表
+const openeds = computed(() => commonStore.menuIds) // 从 store 中获取菜单项 ID 列表
 </script>
 
 <style scoped>
+/* 定义右侧菜单容器样式 */
 .menu-right-el {
-  background-color: #fff;
-  width: 130px !important;
-  border-top: 1px solid #ebedf0;
-  height: calc(100vh - 50px);
-  overflow-y: auto;
+  background-color: #fff; /* 设置背景颜色为白色 */
+  width: 130px !important; /* 固定宽度为 130px，并使用 !important 确保优先级 */
+  border-top: 1px solid #ebedf0; /* 添加顶部边框，颜色为浅灰色 */
+  height: calc(100vh - 50px); /* 高度为视口高度减去 50px（通常用于顶部导航栏） */
+  overflow-y: auto; /* 当内容超出容器高度时启用垂直滚动条 */
 }
+
+/* 定义垂直菜单样式的自定义类 */
 .el-menu-vertical-demo {
-  border: none;
-  height: 100%;
+  border: none; /* 移除默认的边框 */
+  height: 100%; /* 设置高度为 100%，确保菜单占满整个容器 */
 }
 </style>
diff --git a/front-end/mall4v/src/layout/main-sidebar.vue b/front-end/mall4v/src/layout/main-sidebar.vue
index 797e6a2..0dd4ea6 100644
--- a/front-end/mall4v/src/layout/main-sidebar.vue
+++ b/front-end/mall4v/src/layout/main-sidebar.vue
@@ -1,105 +1,124 @@
 <template>
   <aside class="site-sidebar">
+    <!-- 侧边栏容器 -->
     <div class="menu-mod">
+      <!-- 左侧菜单滚动容器 -->
       <el-scrollbar class="menu-left">
+        <!-- 首页菜单项 -->
         <ul>
           <li>
             <div
               :class="{
-                'menu-left-active': selectLeftId === '',
-                'menu-left-item1': 'language' === 'English',
-                'menu-left-item': 'language' !== 'English'
+                'menu-left-active': selectLeftId === '',  // 当没有选中左侧菜单时激活首页样式
+                'menu-left-item1': 'language' === 'English', // 如果语言是英文则使用不同的样式
+                'menu-left-item': 'language' !== 'English' // 如果语言不是英文则使用默认样式
               }"
               @click="toHome()"
             >
-              <svg-icon
-                icon-class="icon-shouye"
-                style="font-size: 16px; margin-right: 3px !important"
-              />
-              <span style="font-size: 14px">首页</span>
-            </div>
-          </li>
-        </ul>
-        <ul>
-          <template
-            v-for="menu in menuList"
-            :key="menu.menuId"
-          >
-            <li
-              v-if="!menu.hidden"
-              class="menu-left-active"
-            >
-              <div
-                v-if="menu.list"
-                :class="[
+            <svg-icon
+              icon-class="icon-shouye"
+            style="font-size: 16px; margin-right: 3px !important"
+            />
+            <span style="font-size: 14px">首页</span>
+    </div>
+    </li>
+    </ul>
+
+    <!-- 动态生成的菜单列表 -->
+    <ul>
+      <template
+        v-for="menu in menuList"
+      :key="menu.menuId"
+      >
+      <li
+        v-if="!menu.hidden"
+      :class="{ 'menu-left-active': selectLeftId === menu.menuId }"
+      >
+      <!-- 如果菜单有子菜单，则显示可展开的菜单项 -->
+      <div
+        v-if="menu.list"
+        :class="[
                   'menu-left-item',
-                  {'menu-left-active': selectLeftId === menu.menuId}
+                  {'menu-left-active': selectLeftId === menu.menuId} // 根据是否选中设置激活样式
                 ]"
-                @click="expandMenu(menu)"
-              >
-                <svg-icon
-                  v-if="menu.icon"
-                  :icon-class="`icon-${menu.icon}`"
-                  style="font-size: 16px; margin-right: 3px !important"
-                />
-                <span
-                  class="item-text"
-                  :title="menu.name.length > 4 ? menu.name : ''"
-                  style="font-size: 14px"
-                >{{ menu.name }}</span>
-              </div>
-              <div
-                v-else
-                :class="{
-                  'menu-left-active': selectLeftId === menu.menuId,
-                  'menu-left-item1': '语言' === 'English',
-                  'menu-left-item': '语言' !== 'English'
+        @click="expandMenu(menu)"
+      >
+      <svg-icon
+        v-if="menu.icon"
+        :icon-class="`icon-${menu.icon}`"
+      style="font-size: 16px; margin-right: 3px !important"
+      />
+      <span
+        class="item-text"
+        :title="menu.name.length > 4 ? menu.name : ''"
+      style="font-size: 14px"
+      >{{ menu.name }}</span> // 显示菜单名称
+      </div>
+
+      <!-- 如果菜单没有子菜单，则直接链接到目标页面 -->
+      <div
+        v-else
+        :class="{
+                  'menu-left-active': selectLeftId === menu.menuId, // 根据是否选中设置激活样式
+                  'menu-left-item1': '语言' === 'English', // 如果语言是英文则使用不同的样式
+                  'menu-left-item': '语言' !== 'English' // 如果语言不是英文则使用默认样式
                 }"
-                @click="gotoRouteHandle(menu)"
-              >
-                <svg-icon
-                  v-if="menu.icon"
-                  :icon-class="menu.icon || ''"
-                  style="font-size: 16px; margin-right: 3px !important"
-                  class="site-sidebar__menu-icon"
-                />
-                <span
-                  class="item-text"
-                  :title="menu.name.length > 4 ? menu.name : ''"
-                  style="font-size: 14px"
-                >{{ menu.name }}</span>
-              </div>
-            </li>
-          </template>
-        </ul>
-      </el-scrollbar>
-      <SubMenu
-        v-if="!sidebarFold"
-        :key="selectLeftId"
-        class="menu-right-con"
-        :expand-menu="expandMenuList"
+        @click="gotoRouteHandle(menu)"
+      >
+      <svg-icon
+        v-if="menu.icon"
+        :icon-class="menu.icon || ''"
+      style="font-size: 16px; margin-right: 3px !important"
+      class="site-sidebar__menu-icon"
       />
-    </div>
-  </aside>
+      <span
+        class="item-text"
+        :title="menu.name.length > 4 ? menu.name : ''"
+      style="font-size: 14px"
+      >{{ menu.name }}</span> // 显示菜单名称
+      </div>
+      </li>
+</template>
+</ul>
+</el-scrollbar>
+
+<!-- 右侧子菜单组件，仅当侧边栏未折叠时显示 -->
+<SubMenu
+  v-if="!sidebarFold"
+:key="selectLeftId"
+class="menu-right-con"
+:expand-menu="expandMenuList"
+/>
+</div>
+</aside>
 </template>
 <script setup>
-import SubMenu from './main-sidebar-sub-menu.vue'
-const route = useRoute()
-const router = useRouter()
-const commonStore = useCommonStore()
-const dynamicMenuRoutes = ref([])
-const expandMenuList = ref([])
+import SubMenu from './main-sidebar-sub-menu.vue'             // 导入子菜单组件
 
+// 从 Vue 和 Vuex 中导入必要的函数和模块
+import { useRoute, useRouter } from 'vue-router'
+import { computed, ref, onBeforeMount } from 'vue'
+import { useCommonStore } from '@/store'
+
+// 初始化路由对象和 Vuex store 实例
+const route = useRoute()                                      // 获取当前路由信息
+const router = useRouter()                                    // 获取路由导航器实例
+const commonStore = useCommonStore()                          // 获取通用状态管理实例
+
+// 定义响应式变量
+const dynamicMenuRoutes = ref([])                             // 动态菜单路由列表
+const expandMenuList = ref([])                                // 展开的菜单列表
+
+// 计算属性：获取侧边栏折叠状态
 const sidebarFold = computed(() => commonStore.sidebarFold)
+
+// 计算属性：获取和设置菜单列表
 const menuList = computed({
-  get: () => {
-    return commonStore.menuList
-  },
-  set: val => {
-    commonStore.updateMenuList(val)
-  }
+  get: () => commonStore.menuList,                            // 从 store 获取菜单列表
+  set: val => commonStore.updateMenuList(val)                 // 更新 store 中的菜单列表
 })
 
+// 计算属性：获取并处理选中的左侧菜单 ID
 const selectLeftId = computed({
   get: () => {
     handleRightRoute(commonStore.selectLeftId)
@@ -107,32 +126,41 @@ const selectLeftId = computed({
   }
 })
 
+// 在组件挂载之前执行的钩子函数
 onBeforeMount(() => {
+  // 从 sessionStorage 中恢复菜单列表和动态菜单路由
   menuList.value = JSON.parse(sessionStorage.getItem('menuList') || '[]')
   dynamicMenuRoutes.value = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
+
+  // 处理当前路由
   routeHandle(route)
+
+  // 如果有选中的左侧菜单 ID，则处理右侧路由
   if (selectLeftId.value) {
     handleRightRoute(selectLeftId.value)
   }
 })
 
+// 处理右侧路由展开逻辑
 const handleRightRoute = selectLeftId => {
   menuList.value.forEach(item => {
     if (selectLeftId === item.menuId) {
-      expandMenu(item, true)
+      expandMenu(item, true)                                  // 展开对应的菜单项
     }
   })
 }
 
+// 跳转到首页
 const toHome = () => {
-  router.push({ name: 'home' })
-  expandMenuList.value = []
-  sessionStorage.setItem('isExpand', '0')
-  commonStore.updateSidebarFold(true)
-  commonStore.updateSelectLeftId('')
-  commonStore.updateSelectRightId('')
+  router.push({ name: 'home' })                               // 跳转到首页
+  expandMenuList.value = []                                   // 清空展开菜单列表
+  sessionStorage.setItem('isExpand', '0')                     // 设置展开状态为关闭
+  commonStore.updateSidebarFold(true)                         // 折叠侧边栏
+  commonStore.updateSelectLeftId('')                          // 清空选中的左侧菜单 ID
+  commonStore.updateSelectRightId('')                         // 清空选中的右侧菜单 ID
 }
 
+// 处理路由变化
 const routeHandle = route => {
   if (route.name === 'home') {
     expandMenuList.value = []
@@ -142,7 +170,9 @@ const routeHandle = route => {
   }
 }
 
+// 跳转到指定菜单项的路由
 const gotoRouteHandle = menu => {
+  // 如果当前路由已经是目标路由，则进行一些清理操作
   if (router.history.current.name === menu.url) {
     expandMenuList.value = []
     commonStore.updateSidebarFold(true)
@@ -151,10 +181,13 @@ const gotoRouteHandle = menu => {
     commonStore.updateSelectLeftId(menu.menuId || '')
     return
   }
+
+  // 特殊处理消息菜单项
   if (menu.name === '消息' || menu.name === 'Message') {
     sessionStorage.setItem('isExpand', '0')
     window.open(location.href.split('#')[0] + '#/imBox', '_blank', 'noopener,noreferrer')
   } else {
+    // 对于普通菜单项，更新状态并跳转到目标路由
     expandMenuList.value = []
     commonStore.updateSidebarFold(true)
     sessionStorage.setItem('isExpand', '0')
@@ -164,29 +197,36 @@ const gotoRouteHandle = menu => {
   }
 }
 
+// 展开或收起菜单项
 const expandMenu = menu => {
-  expandMenuList.value = menu.list || []
-  commonStore.updateSidebarFold(menu.list === null)
-  const id1 = commonStore.selectLeftId
-  commonStore.updateSelectLeftId(menu.menuId || '')
-  const id2 = commonStore.selectLeftId
+  expandMenuList.value = menu.list || []                      // 更新展开的菜单列表
+  commonStore.updateSidebarFold(menu.list === null)           // 根据菜单是否有子项决定是否折叠侧边栏
+  const id1 = commonStore.selectLeftId                        // 记录当前选中的左侧菜单 ID
+  commonStore.updateSelectLeftId(menu.menuId || '')           // 更新选中的左侧菜单 ID
+  const id2 = commonStore.selectLeftId                        // 再次记录选中的左侧菜单 ID（更新后）
+
   if (menu.list) {
-    sessionStorage.setItem('isExpand', '1')
+    sessionStorage.setItem('isExpand', '1')                   // 设置展开状态为展开
   }
+
+  // 如果左侧菜单 ID 发生变化，则根据菜单项跳转路由
   if (id1 !== id2) {
     routeJump(menu)
   }
 }
 
+// 根据菜单项跳转路由
 const routeJump = menu => {
   const routes = menu.list
   for (let i = 0; i < routes.length; i++) {
+    // 如果找到第一个非隐藏且无子项的路由，则跳转到该路由
     if (!routes[i].hidden && !routes[i].list) {
       router.push({ name: routes[i].url })
       break
     } else if (routes[i].list) {
       let flag = false
       for (let j = 0; j < routes[i].list.length; j++) {
+        // 如果找到第一个非隐藏的子项路由，则跳转到该路由
         if (!routes[i].list[j].hidden) {
           router.push({ name: routes[i].list[j].url })
           flag = true
@@ -202,94 +242,117 @@ const routeJump = menu => {
 </script>
 
 <style scoped>
+/* 定义菜单模块的整体布局 */
 .menu-mod {
-  display: flex;
+  display: flex; /* 使用 Flexbox 布局，使子元素可以灵活排列 */
 }
+
+/* 定义右侧内容容器的位置和层级 */
 .menu-right-con {
-  position: absolute;
-  z-index: 1;
-  left: 100px;
+  position: absolute; /* 设置为绝对定位 */
+  z-index: 1;         /* 设置堆叠顺序，确保在其他元素之上 */
+  left: 100px;        /* 左边距为 100px */
 }
+
+/* 定义左侧菜单栏样式 */
 .menu-left {
-  background: #222222;
-  color: #ffffff !important;
-  width: 100px;
-  height: calc(100vh - 50px);
-  overflow-y: auto;
+  background: #222222; /* 背景颜色为深灰色 */
+  color: #ffffff !important; /* 文本颜色为白色，并使用 !important 确保优先级 */
+  width: 100px;           /* 固定宽度为 100px */
+  height: calc(100vh - 50px); /* 高度为视口高度减去 50px（通常用于顶部导航栏） */
+  overflow-y: auto;      /* 当内容超出容器高度时启用垂直滚动条 */
 }
+
+/* 定义左侧菜单项的基本样式 */
 .menu-mod .menu-left-item {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  width: 100%;          /* 占满整个父容器宽度 */
+  height: 100%;         /* 占满整个父容器高度 */
+  display: flex;        /* 使用 Flexbox 布局 */
+  align-items: center;  /* 水平居中对齐 */
+  justify-content: center; /* 垂直居中对齐 */
 }
+
+/* 定义左侧菜单项的另一种样式（可能是不同状态或类型的菜单项） */
 .menu-mod .menu-left-item1 {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  text-align: left;
-  padding-left: 12px;
+  width: 100%;          /* 占满整个父容器宽度 */
+  height: 100%;         /* 占满整个父容器高度 */
+  display: flex;        /* 使用 Flexbox 布局 */
+  align-items: center;  /* 水平居中对齐 */
+  text-align: left;     /* 文本左对齐 */
+  padding-left: 12px;   /* 左内边距为 12px */
 }
+
+/* 定义左侧菜单的无序列表样式 */
 .menu-mod .menu-left ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  width: 100px;
-  text-align: center;
+  list-style-type: none; /* 移除默认的列表样式 */
+  margin: 0;             /* 移除外边距 */
+  padding: 0;            /* 移除内边距 */
+  width: 100px;          /* 固定宽度为 100px */
+  text-align: center;    /* 文本居中对齐 */
 }
+
+/* 定义右侧菜单的无序列表样式 */
 .menu-mod .menu-right ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  width: 130px;
-  text-align: center;
+  list-style-type: none; /* 移除默认的列表样式 */
+  margin: 0;             /* 移除外边距 */
+  padding: 0;            /* 移除内边距 */
+  width: 130px;          /* 固定宽度为 130px */
+  text-align: center;    /* 文本居中对齐 */
 }
+
+/* 定义左侧菜单项的样式 */
 .menu-left li {
-  background: #222222;
-  color: #fff;
-  height: 40px;
-  cursor: pointer;
-  font-size: 14px;
-  stroke: #fff !important;
+  background: #222222;  /* 背景颜色为深灰色 */
+  color: #fff;          /* 文本颜色为白色 */
+  height: 40px;         /* 固定高度为 40px */
+  cursor: pointer;      /* 鼠标悬停时显示指针样式 */
+  font-size: 14px;      /* 字体大小为 14px */
+  stroke: #fff !important; /* SVG 图标颜色为白色，并使用 !important 确保优先级 */
 }
 
+/* 定义右侧菜单项的样式 */
 .menu-right li {
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  font-size: 14px;
-  color: #333333;
+  height: 40px;         /* 固定高度为 40px */
+  display: flex;        /* 使用 Flexbox 布局 */
+  align-items: center;  /* 水平居中对齐 */
+  justify-content: center; /* 垂直居中对齐 */
+  cursor: pointer;      /* 鼠标悬停时显示指针样式 */
+  font-size: 14px;      /* 字体大小为 14px */
+  color: #333333;       /* 文本颜色为深灰色 */
 }
 
-/* 鼠标移动到选项上修改背景颜色 */
+/* 定义左侧菜单项悬停时的样式 */
 .menu-left li:hover {
-  background-color: #ffffff;
-  color: #155bd4;
-  stroke: #155bd4 !important;
+  background-color: #ffffff; /* 背景颜色变为白色 */
+  color: #155bd4;            /* 文本颜色变为蓝色 */
+  stroke: #155bd4 !important;/* SVG 图标颜色变为蓝色，并使用 !important 确保优先级 */
 }
-/* 鼠标移动到选项上修改背景颜色 */
+
+/* 定义右侧菜单项悬停时的样式 */
 .menu-right li:hover {
-  background-color: rgba(21, 91, 212, 0.1);
-  color: #155bd4;
+  background-color: rgba(21, 91, 212, 0.1); /* 背景颜色变为浅蓝色透明 */
+  color: #155bd4;                           /* 文本颜色变为蓝色 */
 }
+
+/* 冗余定义，应删除 */
 .menu-right li:hover {
   background-color: rgba(21, 91, 212, 0.1);
   color: #155bd4;
 }
+
+/* 定义左侧菜单项激活状态的样式 */
 .menu-left-active {
-  background-color: #ffffff;
-  color: #155bd4;
-  stroke: #155bd4 !important;
+  background-color: #ffffff; /* 背景颜色变为白色 */
+  color: #155bd4;            /* 文本颜色变为蓝色 */
+  stroke: #155bd4 !important;/* SVG 图标颜色变为蓝色，并使用 !important 确保优先级 */
 }
+
+/* 定义菜单项文本的样式 */
 .item-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-  max-width: 70px;
+  overflow: hidden;          /* 隐藏溢出的内容 */
+  text-overflow: ellipsis;   /* 溢出部分用省略号表示 */
+  white-space: nowrap;       /* 强制在同一行显示 */
+  display: inline-block;     /* 显示为内联块元素 */
+  max-width: 70px;           /* 最大宽度为 70px */
 }
 </style>
diff --git a/front-end/mall4v/src/layout/main.vue b/front-end/mall4v/src/layout/main.vue
index 4967b79..825c0ac 100644
--- a/front-end/mall4v/src/layout/main.vue
+++ b/front-end/mall4v/src/layout/main.vue
@@ -1,59 +1,84 @@
 <template>
+  <!-- 主应用布局容器 -->
   <div
     v-loading.fullscreen.lock="loading"
-    class="site-wrapper"
-    :class="{ 'site-sidebar--fold': sidebarFold }"
-    :element-loading-text="'拼命加载中'"
+  class="site-wrapper"
+  :class="{ 'site-sidebar--fold': sidebarFold }"
+  :element-loading-text="'拼命加载中'"
   >
-    <template v-if="!loading">
-      <MainNavbar />
-      <MainSidebar />
-      <div
-        class="site-content__wrapper"
-        :style="{ 'min-height': documentClientHeight + 'px' }"
-      >
-        <main-content />
-      </div>
-    </template>
+  <!-- 条件渲染：只有当 loading 为 false 时才渲染内部组件 -->
+  <template v-if="!loading">
+    <!-- 导航栏组件 -->
+    <MainNavbar />                                         <!-- 渲染主导航栏组件，通常包含导航链接、用户信息等 -->
+
+    <!-- 侧边栏组件 -->
+    <MainSidebar />                                        <!-- 渲染主侧边栏组件，通常包含菜单选项或快捷方式 -->
+
+    <!-- 内容区容器 -->
+    <div
+      class="site-content__wrapper"
+    :style="{ 'min-height': documentClientHeight + 'px' }"
+    >
+    <!-- 主要内容组件 -->
+    <main-content />                                     <!-- 渲染主要内容组件，这里是页面的主要内容展示区域 -->
+    </div>
+  </template>
   </div>
 </template>
 
 <script setup>
-import MainNavbar from './main-navbar.vue'
-import MainSidebar from './main-sidebar.vue'
-import MainContent from './main-content.vue'
+import { ref, computed, onBeforeMount, onMounted } from 'vue'
+import http from '@/utils/http'                              // 导入 HTTP 请求工具
+import MainNavbar from './main-navbar.vue'                   // 导入主导航栏组件
+import MainSidebar from './main-sidebar.vue'                 // 导入主侧边栏组件
+import MainContent from './main-content.vue'                 // 导入主要内容组件
+import { useCommonStore, useUserStore } from '@/store'       // 导入 Vuex store 模块
+
+// 在组件挂载之前获取用户信息
 onBeforeMount(() => {
-  getUserInfo()
+  getUserInfo()                                              // 调用 getUserInfo 函数获取当前管理员信息
 })
 
-const commonStore = useCommonStore()
-const documentClientHeight = computed(() => commonStore.documentClientHeight)
-const userStore = useUserStore()
-const sidebarFold = computed(() => commonStore.sidebarFold)
+const commonStore = useCommonStore()                         // 获取通用 Store 实例，用于管理全局状态
+const documentClientHeight = computed(() =>                  // 计算属性：动态获取文档客户区高度
+  commonStore.documentClientHeight                           // 从 commonStore 中读取文档客户区高度
+)
+const userStore = useUserStore()                             // 获取用户 Store 实例，用于管理用户相关信息
+const sidebarFold = computed(() =>                           // 计算属性：动态获取侧边栏折叠状态
+  commonStore.sidebarFold                                    // 从 commonStore 中读取侧边栏折叠状态
+)
+
+// 组件挂载后重置文档客户区高度
 onMounted(() => {
-  resetDocumentClientHeight()
+  resetDocumentClientHeight()                                // 调用 resetDocumentClientHeight 函数初始化并监听窗口大小变化
 })
+
+// 函数：重置文档客户区高度，并监听窗口大小变化
 const resetDocumentClientHeight = () => {
-  commonStore.documentClientHeight = document.documentElement.clientHeight
-  window.onresize = () => {
-    commonStore.documentClientHeight = document.documentElement.clientHeight
+  commonStore.documentClientHeight = document.documentElement.clientHeight // 设置初始高度为当前文档客户区的高度
+  window.onresize = () => {                                   // 监听窗口大小变化事件
+    commonStore.documentClientHeight = document.documentElement.clientHeight // 更新文档客户区高度
   }
 }
 
-const loading = ref(true)
-// 获取当前管理员信息
+// 控制全屏加载指示器的状态
+const loading = ref(true)                                     // 定义一个响应式变量 loading，初始值为 true，表示正在加载
+
+// 函数：获取当前管理员信息
 const getUserInfo = () => {
   http({
-    url: http.adornUrl('/sys/user/info'),
-    method: 'get',
-    params: http.adornParams()
+    url: http.adornUrl('/sys/user/info'),                    // API 路径，使用 http.adornUrl 方法处理 URL
+    method: 'get',                                           // 请求方法为 GET
+    params: http.adornParams()                               // 请求参数，使用 http.adornParams 方法处理参数
   }).then(({ data }) => {
-    loading.value = false
-    userStore.userId = data.userId
-    userStore.name = data.username
-    userStore.mobile = data.mobile
-    userStore.shopId = data.shopId
-    userStore.userId = data.userId
-  }).catch(() => {})
+    loading.value = false                                    // 加载完成，关闭加载指示器
+    userStore.userId = data.userId                          // 更新用户 ID 到 userStore
+    userStore.name = data.username                          // 更新用户名到 userStore
+    userStore.mobile = data.mobile                          // 更新手机号到 userStore
+    userStore.shopId = data.shopId                          // 更新商店 ID 到 userStore
+    // 注意：userStore.userId = data.userId 这行重复了，建议移除或检查是否需要
+  }).catch(() => {
+    // 错误处理逻辑可以在这里实现
+  })
 }
 </script>
diff --git a/front-end/mall4v/src/router/index.js b/front-end/mall4v/src/router/index.js
index 013bf38..12370c3 100644
--- a/front-end/mall4v/src/router/index.js
+++ b/front-end/mall4v/src/router/index.js
@@ -5,67 +5,70 @@ import { clearLoginInfo } from '@/utils'
 import Layout from '@/layout/main.vue'
 import Login from '@/views/common/login/index.vue'
 
-// 全局路由(无需嵌套上左右整体布局)
+// 定义全局路由（无需嵌套在左右整体布局中）
 const globalRoutes = [
   {
-    path: '/404',
-    component: () => import('@/views/common/error-page/404.vue'),
-    name: '404',
-    meta: { title: '404未找到' }
+    path: '/404', // 404 页面路径
+    component: () => import('@/views/common/error-page/404.vue'), // 动态导入 404 页面组件
+    name: '404', // 路由名称
+    meta: { title: '404未找到' } // 元信息，用于设置页面标题等
   },
   {
-    path: '/login',
-    component: Login,
-    name: 'login',
-    meta: { title: '登录' }
+    path: '/login', // 登录页面路径
+    component: Login, // 登录页面组件
+    name: 'login', // 路由名称
+    meta: { title: '登录' } // 元信息，用于设置页面标题等
   }
 ]
 
+// 定义主路由（需要嵌套在 Layout 组件中）
 export const mainRoutes = {
-  path: '/',
-  component: Layout,
-  name: 'home',
-  redirect: '/home',
-  children: [
+  path: '/', // 根路径
+  component: Layout, // 布局组件
+  name: 'home', // 路由名称
+  redirect: '/home', // 默认重定向到 home 页面
+  children: [ // 子路由
     {
-      path: 'home',
-      name: 'home',
-      component: () => import('@/views/common/home/index.vue')
+      path: 'home', // 主页路径
+      name: 'home', // 路由名称
+      component: () => import('@/views/common/home/index.vue') // 动态导入主页组件
     },
     {
-      path: '/prodInfo',
-      name: 'prodInfo',
-      component: () => import('@/views/modules/prod/prodInfo/index.vue')
+      path: '/prodInfo', // 产品信息页面路径
+      name: 'prodInfo', // 路由名称
+      component: () => import('@/views/modules/prod/prodInfo/index.vue') // 动态导入产品信息页面组件
     }
   ],
-  // eslint-disable-next-line no-unused-vars
-  beforeEnter (to, from, next) {
-    const authorization = cookie.get('Authorization')
-    if (!authorization || !/\S/.test(authorization)) {
-      clearLoginInfo()
-      next({ name: 'login' })
+  beforeEnter (to, from, next) { // 路由守卫，检查用户是否已登录
+    const authorization = cookie.get('Authorization') // 获取存储在 cookie 中的授权信息
+    if (!authorization || !/\S/.test(authorization)) { // 如果没有授权信息或为空
+      clearLoginInfo() // 清除登录信息
+      next({ name: 'login' }) // 重定向到登录页面
     }
-    next()
+    next() // 否则继续导航
   }
 }
 
+// 创建 Vue Router 实例
 const router = createRouter({
-  history: createWebHistory(),
-  scrollBehavior: () => ({ top: 0 }),
+  history: createWebHistory(), // 使用 HTML5 History 模式
+  scrollBehavior: () => ({ top: 0 }), // 设置滚动行为，每次导航回到顶部
   isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
-  routes: globalRoutes.concat(mainRoutes)
+  routes: globalRoutes.concat(mainRoutes) // 合并全局路由和主路由
 })
 
-// eslint-disable-next-line no-unused-vars
+// 全局前置守卫，拦截所有路由导航
 router.beforeEach((to, from, next) => {
-  const commonStore = useCommonStore()
-  // 添加动态(菜单)路由
-  // 1. 已经添加 or 全局路由, 直接访问
-  // 2. 获取菜单列表, 添加并保存本地存储
+  const commonStore = useCommonStore() // 初始化 Vuex store 实例
+
+  // 添加动态(菜单)路由逻辑
   if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to, globalRoutes) === 'global') {
-    const routeList = commonStore.routeList
-    let navTitles = []
-    let leftMenuId = ''
+    // 已经添加动态路由或访问的是全局路由，直接处理导航
+    const routeList = commonStore.routeList // 获取路由列表
+    let navTitles = [] // 用于存储导航标题
+    let leftMenuId = '' // 用于存储左侧菜单 ID
+
+    // 查找当前路由对应的菜单项，并构建导航标题链
     routeList.forEach(item => {
       if (to.meta.menuId === item.menuId) {
         navTitles.push(item.name)
@@ -83,30 +86,37 @@ router.beforeEach((to, from, next) => {
         })
       }
     })
-    navTitles = navTitles.reverse()
+
+    navTitles = navTitles.reverse() // 反转导航标题链
+
+    // 更新 Vuex store 中的状态
     if (to.meta.isLeftMenu || to.path === '/home' || leftMenuId) {
       if (leftMenuId) {
-        commonStore.updateSelectLeftId(leftMenuId)
-        commonStore.updateSelectRightId(to.meta.menuId)
+        commonStore.updateSelectLeftId(leftMenuId) // 更新选中的左侧菜单 ID
+        commonStore.updateSelectRightId(to.meta.menuId) // 更新选中的右侧菜单 ID
       } else {
-        commonStore.updateSidebarFold(true)
-        commonStore.updateSelectLeftId(to.path === '/home' ? '' : to.meta.menuId)
+        commonStore.updateSidebarFold(true) // 折叠侧边栏
+        commonStore.updateSelectLeftId(to.path === '/home' ? '' : to.meta.menuId) // 更新选中的左侧菜单 ID
       }
     }
-    commonStore.updateSelectMenu(navTitles)
-    next()
+
+    commonStore.updateSelectMenu(navTitles) // 更新选中的菜单标题链
+    next() // 继续导航
   } else {
+    // 请求菜单列表和权限信息
     http({
-      url: http.adornUrl('/sys/menu/nav'),
-      method: 'get',
-      params: http.adornParams()
+      url: http.adornUrl('/sys/menu/nav'), // 请求 URL
+      method: 'get', // 请求方法
+      params: http.adornParams() // 请求参数
     }).then(({ data }) => {
-      sessionStorage.setItem('Authorities', JSON.stringify(data.authorities || '[]'))
-      fnAddDynamicMenuRoutes(data.menuList)
-      router.options.isAddDynamicMenuRoutes = true
+      sessionStorage.setItem('Authorities', JSON.stringify(data.authorities || '[]')) // 存储权限信息到 sessionStorage
+      fnAddDynamicMenuRoutes(data.menuList) // 添加动态路由
+      router.options.isAddDynamicMenuRoutes = true // 标记动态路由已添加
+
+      // 构建完整的路由列表，并保存到 Vuex store 和 sessionStorage
       const rList = []
       data.menuList.forEach(item => {
-        item.isLeftMenu = item.parentId === 0
+        item.isLeftMenu = item.parentId === 0 // 判断是否为左侧菜单
         rList.push({
           menuId: item.menuId,
           name: item.name,
@@ -136,81 +146,92 @@ router.beforeEach((to, from, next) => {
           })
         }
       })
-      fnAddDynamicMenuRoutes(data.menuList)
-      sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
-      commonStore.updateRouteList(rList)
-      commonStore.updateMenuIds(rList)
+
+      fnAddDynamicMenuRoutes(data.menuList) // 再次调用以确保所有子菜单被正确添加
+      sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]')) // 存储菜单列表到 sessionStorage
+      commonStore.updateRouteList(rList) // 更新 Vuex store 中的路由列表
+      commonStore.updateMenuIds(rList) // 更新 Vuex store 中的菜单 ID 列表
+
+      // 重新导航到目标页面
       next({ ...to, replace: true })
     }).catch(e => {
-      // eslint-disable-next-line no-console
-      console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
-      router.push({ name: 'login' })
+      console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue') // 打印错误信息
+      router.push({ name: 'login' }) // 跳转到登录页面
     })
   }
 })
 
 /**
- * 判断当前路由类型, global: 全局路由, main: 主入口路由
- * @param {*} route 当前路由
- * @param globalRoutes 全局路由
+ * 判断当前路由类型，返回 'global' 或 'main'
+ * @param {*} route 当前路由对象
+ * @param globalRoutes 全局路由数组
  */
 function fnCurrentRouteType (route, globalRoutes = []) {
-  let temp = []
+  let temp = [] // 临时存储子路由
   for (let i = 0; i < globalRoutes.length; i++) {
     if (route.path === globalRoutes[i].path) {
-      return 'global'
+      return 'global' // 如果匹配到全局路由，返回 'global'
     } else if (globalRoutes[i].children && globalRoutes[i].children.length >= 1) {
-      temp = temp.concat(globalRoutes[i].children)
+      temp = temp.concat(globalRoutes[i].children) // 将子路由添加到临时数组
     }
   }
-  return temp.length >= 1 ? fnCurrentRouteType(route, temp) : 'main'
+  return temp.length >= 1 ? fnCurrentRouteType(route, temp) : 'main' // 递归查找子路由，直到找到匹配项或返回 'main'
 }
 
 /**
  * 添加动态(菜单)路由
  * @param {*} menuList 菜单列表
- * @param {*} routes 递归创建的动态(菜单)路由
+ * @param {*} routes 递归创建的动态(菜单)路由数组
  */
 function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
-  let temp = []
-  const modules = import.meta.glob('../views/modules/**/index.vue')
+  let temp = [] // 临时存储子菜单项
+  const modules = import.meta.glob('../views/modules/**/index.vue') // 动态导入视图模块
+
+  // 遍历菜单列表，创建对应的路由对象
   for (let i = 0; i < menuList.length; i++) {
     if (menuList[i].list && menuList[i].list.length >= 1) {
-      temp = temp.concat(menuList[i].list)
+      temp = temp.concat(menuList[i].list) // 如果有子菜单，添加到临时数组
     } else if (menuList[i].url && /\S/.test(menuList[i].url)) {
-      menuList[i].url = menuList[i].url.replace(/^\//, '')
+      menuList[i].url = menuList[i].url.replace(/^\//, '') // 移除 URL 开头的斜杠
       const route = {
-        path: menuList[i].url,
-        component: null,
-        name: menuList[i].url,
+        path: menuList[i].url, // 路径
+        component: null, // 组件
+        name: menuList[i].url, // 名称
         meta: {
-          menuId: menuList[i].menuId,
-          title: menuList[i].name,
-          isDynamic: true,
-          isTab: true,
-          iframeUrl: ''
+          menuId: menuList[i].menuId, // 菜单项 ID
+          title: menuList[i].name, // 标题
+          isDynamic: true, // 标记为动态路由
+          isTab: true, // 标记为标签页
+          iframeUrl: '' // iframe URL，默认为空
         }
       }
-      // url以http[s]://开头, 通过iframe展示
+
+      // 如果 URL 是有效的 HTTP[S] 地址，则通过 iframe 展示
       if (isURL(menuList[i].url)) {
-        route.path = `i-${menuList[i].menuId}`
-        route.name = `i-${menuList[i].menuId}`
-        route.meta.iframeUrl = menuList[i].url
+        route.path = `i-${menuList[i].menuId}` // 修改路径为 iframe 特定格式
+        route.name = `i-${menuList[i].menuId}` // 修改名称为 iframe 特定格式
+        route.meta.iframeUrl = menuList[i].url // 设置 iframe URL
       } else {
         try {
-          route.component = modules[`../views/modules/${menuList[i].url}/index.vue`] || null
+          route.component = modules[`../views/modules/${menuList[i].url}/index.vue`] || null // 动态加载组件
         } catch (e) {}
       }
-      routes.push(route)
+
+      routes.push(route) // 将路由对象添加到 routes 数组
     }
   }
+
+  // 如果还有子菜单项，递归处理
   if (temp.length >= 1) {
     fnAddDynamicMenuRoutes(temp, routes)
   } else {
-    mainRoutes.name = 'main-dynamic'
-    mainRoutes.children = routes
-    router.addRoute(mainRoutes)
+    mainRoutes.name = 'main-dynamic' // 修改主路由名称为 'main-dynamic'
+    mainRoutes.children = routes // 将动态路由添加为主路由的子路由
+    router.addRoute(mainRoutes) // 添加主路由到 Vue Router 实例
   }
+
+  // 添加一个通配符路由，处理未匹配的路径，重定向到 404 页面
   router.addRoute({ path: '/:pathMatch(.*)*', redirect: { name: '404' } })
 }
-export default router
+
+export default router // 导出配置好的 Vue Router 实例
diff --git a/front-end/mall4v/src/stores/common.js b/front-end/mall4v/src/stores/common.js
index 72ba4af..26e0878 100644
--- a/front-end/mall4v/src/stores/common.js
+++ b/front-end/mall4v/src/stores/common.js
@@ -1,80 +1,116 @@
 import { defineStore } from 'pinia'
 import router from '@/router'
+
+// 定义名为 'common' 的 Pinia Store
 export const useCommonStore = defineStore('common', {
-  state: () => {
-    return {
-      // 页面文档可视高度(随窗口改变大小)
-      documentClientHeight: 0,
-      // 侧边栏, 布局皮肤, light(浅色) / dark(黑色)
-      sidebarLayoutSkin: 'dark',
-      // 侧边栏, 折叠状态
-      sidebarFold: true,
-      // 侧边栏, 菜单
-      menuList: [],
-      menuActiveName: '',
-      // 主入口标签页
-      mainTabs: [],
-      mainTabsActiveName: '',
-      // 当前选择的标签
-      selectMenu: [],
-      // 路由列表
-      routeList: [],
-      menuIds: [],
-      selectLeftId: '',
-      selectRightId: ''
-    }
-  },
+  // 状态 (state) - 存储应用的数据
+  state: () => ({
+    // 页面文档可视高度(随窗口改变大小)
+    documentClientHeight: 0,
+    // 侧边栏布局皮肤, light(浅色) / dark(黑色)
+    sidebarLayoutSkin: 'dark',
+    // 侧边栏折叠状态
+    sidebarFold: true,
+    // 侧边栏菜单列表
+    menuList: [],
+    // 当前激活的菜单名称
+    menuActiveName: '',
+    // 主入口标签页列表
+    mainTabs: [],
+    // 当前激活的主入口标签页名称
+    mainTabsActiveName: '',
+    // 当前选择的标签链（用于面包屑导航）
+    selectMenu: [],
+    // 路由列表
+    routeList: [],
+    // 菜单项 ID 列表
+    menuIds: [],
+    // 当前选中的左侧菜单 ID
+    selectLeftId: '',
+    // 当前选中的右侧菜单 ID
+    selectRightId: ''
+  }),
+
+  // 动作 (actions) - 包含更改状态的逻辑
   actions: {
-    updateDocumentClientHeight (height) {
-      this.documentClientHeight = height
+    // 更新页面文档可视高度
+    updateDocumentClientHeight(height) {
+      this.documentClientHeight = height;
     },
-    updateSidebarFold (fold) {
-      this.sidebarFold = fold
+
+    // 更新侧边栏折叠状态
+    updateSidebarFold(fold) {
+      this.sidebarFold = fold;
     },
-    updateMenuList (list) {
-      this.menuList = list
+
+    // 更新侧边栏菜单列表
+    updateMenuList(list) {
+      this.menuList = list;
     },
-    updateMenuActiveName (name) {
-      this.menuActiveName = name
+
+    // 更新当前激活的菜单名称
+    updateMenuActiveName(name) {
+      this.menuActiveName = name;
     },
-    updateMainTabs (tabs) {
-      this.mainTabs = tabs
+
+    // 更新主入口标签页列表
+    updateMainTabs(tabs) {
+      this.mainTabs = tabs;
     },
-    updateMainTabsActiveName (name) {
-      this.mainTabsActiveName = name
+
+    // 更新当前激活的主入口标签页名称
+    updateMainTabsActiveName(name) {
+      this.mainTabsActiveName = name;
     },
-    updateRouteList (list) {
-      this.routeList = list
+
+    // 更新路由列表
+    updateRouteList(list) {
+      this.routeList = list;
     },
-    updateSelectMenu (list) {
-      this.selectMenu = list
+
+    // 更新当前选择的标签链（用于面包屑导航）
+    updateSelectMenu(list) {
+      this.selectMenu = list;
     },
-    updateSelectLeftId (id) {
-      this.selectLeftId = id
+
+    // 更新当前选中的左侧菜单 ID
+    updateSelectLeftId(id) {
+      this.selectLeftId = id;
     },
-    updateSelectRightId (id) {
-      this.selectRightId = id
+
+    // 更新当前选中的右侧菜单 ID
+    updateSelectRightId(id) {
+      this.selectRightId = id;
     },
-    replaceSelectMenu (title) {
-      this.selectMenu.splice(this.selectMenu.length - 1, 1, title)
+
+    // 替换当前选择的标签链的最后一项
+    replaceSelectMenu(title) {
+      this.selectMenu.splice(this.selectMenu.length - 1, 1, title);
     },
-    updateMenuIds (list) {
-      this.menuIds = []
+
+    // 更新菜单项 ID 列表，确保所有 ID 是字符串形式
+    updateMenuIds(list) {
+      this.menuIds = [];
       list.forEach(menu => {
-        this.menuIds.push(String(menu.menuId + ''))
-      })
+        this.menuIds.push(String(menu.menuId + ''));
+      });
     },
-    removeMainActiveTab () {
-      this.mainTabs = this.mainTabs.filter(item => item.name !== this.mainTabsActiveName)
+
+    // 移除当前激活的主入口标签页，并处理相关逻辑
+    removeMainActiveTab() {
+      // 过滤掉当前激活的标签页
+      this.mainTabs = this.mainTabs.filter(item => item.name !== this.mainTabsActiveName);
+
       if (this.mainTabs.length >= 1) {
-        // 当前选中tab被删除
+        // 如果还有其他标签页，则切换到最后一个标签页
         router.push({ name: this.mainTabs[this.mainTabs.length - 1].name }, () => {
-          this.mainTabsActiveName = this.mainTabs[this.mainTabs.length - 1].name
-        })
+          this.mainTabsActiveName = this.mainTabs[this.mainTabs.length - 1].name;
+        });
       } else {
-        this.menuActiveName = ''
-        router.push({ name: 'home' })
+        // 如果没有其他标签页，则重置菜单激活名称并跳转到主页
+        this.menuActiveName = '';
+        router.push({ name: 'home' });
       }
     }
   }
-})
+});
diff --git a/front-end/mall4v/src/stores/prod.js b/front-end/mall4v/src/stores/prod.js
index ef07f3c..8112447 100644
--- a/front-end/mall4v/src/stores/prod.js
+++ b/front-end/mall4v/src/stores/prod.js
@@ -1,37 +1,53 @@
 import { defineStore } from 'pinia'
+
+// 定义名为 'prod' 的 Pinia Store，用于管理商品相关数据和操作
 export const scoreProdStore = defineStore('prod', {
-  state: () => {
-    return {
-      id: 0,
-      skuTags: [],
-      defalutSku: {
-        price: 0, // 销售价
-        oriPrice: 0, // 市场价
-        stocks: 0, // 库存
-        properties: '', // 销售属性组合字符串
-        skuName: '', // sku名称
-        prodName: '', // 商品名称
-        weight: 0, // 商品重量
-        volume: 0, // 商品体积
-        status: 1 // 0 禁用 1 启用
-      }
+  // 状态 (state) - 存储商品相关的数据
+  state: () => ({
+    id: 0, // 商品 ID
+    skuTags: [], // SKU 标签列表，每个标签代表一个销售属性（如颜色、尺寸等）
+    defalutSku: {
+      price: 0, // 销售价
+      oriPrice: 0, // 市场价（原价）
+      stocks: 0, // 库存数量
+      properties: '', // 销售属性组合字符串，例如 "红色;M号"
+      skuName: '', // SKU 名称，具体到某一销售属性组合的商品名称
+      prodName: '', // 商品名称，通用名称
+      weight: 0, // 商品重量
+      volume: 0, // 商品体积
+      status: 1 // SKU 状态，0 表示禁用，1 表示启用
     }
-  },
+  }),
+
+  // 动作 (actions) - 包含更改状态的逻辑
   actions: {
-    updateSkuTags (skuTags) {
-      this.skuTags = skuTags
+    // 更新 SKU 标签列表
+    updateSkuTags(skuTags) {
+      this.skuTags = skuTags;
     },
-    addSkuTag (skuTag) {
-      this.skuTags.push(skuTag)
+
+    // 添加新的 SKU 标签
+    addSkuTag(skuTag) {
+      this.skuTags.push(skuTag);
     },
-    removeSkuTag (tagIndex) {
-      this.skuTags.splice(tagIndex, 1)
+
+    // 移除指定索引的 SKU 标签
+    removeSkuTag(tagIndex) {
+      this.skuTags.splice(tagIndex, 1);
     },
-    removeSkuTagItem (tagIndex, tagItemIndex) {
-      this.skuTags[tagIndex].tagItems.splice(tagItemIndex, 1)
+
+    // 移除指定 SKU 标签中的某个项
+    removeSkuTagItem(tagIndex, tagItemIndex) {
+      if (this.skuTags[tagIndex] && this.skuTags[tagIndex].tagItems) {
+        this.skuTags[tagIndex].tagItems.splice(tagItemIndex, 1);
+      }
     },
-    addSkuTagItem ({ tagIndex, tagItem }) {
-      this.skuTags[tagIndex].tagItems.push(tagItem)
+
+    // 向指定 SKU 标签中添加新项
+    addSkuTagItem({ tagIndex, tagItem }) {
+      if (this.skuTags[tagIndex] && this.skuTags[tagIndex].tagItems) {
+        this.skuTags[tagIndex].tagItems.push(tagItem);
+      }
     }
   }
-})
+});
diff --git a/front-end/mall4v/src/stores/user.js b/front-end/mall4v/src/stores/user.js
index 0af1012..491485f 100644
--- a/front-end/mall4v/src/stores/user.js
+++ b/front-end/mall4v/src/stores/user.js
@@ -1,29 +1,41 @@
 import { defineStore } from 'pinia'
+
+// 定义名为 'user' 的 Pinia Store，用于管理用户相关数据和操作
 export const useUserStore = defineStore('user', {
-  state: () => {
-    return {
-      id: 0,
-      name: '',
-      userId: '',
-      shopId: '',
-      mobile: ''
-    }
-  },
+  // 状态 (state) - 存储用户相关的数据
+  state: () => ({
+    id: 0,        // 用户 ID，通常是一个唯一的整数值
+    name: '',     // 用户名称
+    userId: '',   // 用户标识符，可能是用户名或系统内部使用的唯一标识
+    shopId: '',   // 商铺 ID，如果用户关联到特定商铺，则存储该商铺的 ID
+    mobile: ''    // 用户手机号码
+  }),
+
+  // 动作 (actions) - 包含更改状态的逻辑
   actions: {
-    updateId (id) {
-      this.id = id
+    // 更新用户 ID
+    updateId(id) {
+      this.id = id;
     },
-    updateName (name) {
-      this.name = name
+
+    // 更新用户名称
+    updateName(name) {
+      this.name = name;
     },
-    updateMobile (mobile) {
-      this.mobile = mobile
+
+    // 更新用户手机号码
+    updateMobile(mobile) {
+      this.mobile = mobile;
     },
-    updateShopId (shopId) {
-      this.shopId = shopId
+
+    // 更新商铺 ID
+    updateShopId(shopId) {
+      this.shopId = shopId;
     },
-    updateUserId (userId) {
-      this.userId = userId
+
+    // 更新用户标识符
+    updateUserId(userId) {
+      this.userId = userId;
     }
   }
-})
+});
diff --git a/front-end/mall4v/src/styles/_base.scss b/front-end/mall4v/src/styles/_base.scss
index 088920b..2f3686d 100644
--- a/front-end/mall4v/src/styles/_base.scss
+++ b/front-end/mall4v/src/styles/_base.scss
@@ -1,8 +1,12 @@
+/*
+ * 全局样式设置
+ */
 *,
 *:before,
 *:after {
-  box-sizing: border-box;
+  box-sizing: border-box; /* 确保所有元素的宽度和高度计算包括 padding 和 border */
 }
+
 body {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
   font-size: 14px;
@@ -10,23 +14,24 @@ body {
   color: #303133;
   background-color: #fff;
 }
+
 a {
-  color: mix(#fff, $--color-primary, 20%);
+  color: mix(#fff, $--color-primary, 20%); /* 链接颜色为白色与主色混合后的20% */
   text-decoration: none;
+
   &:focus,
   &:hover {
-    color: $--color-primary;
+    color: $--color-primary; /* 激活或悬停时链接颜色为主色 */
     text-decoration: underline;
   }
 }
+
 img {
-  vertical-align: middle;
-  max-width: 100%;
+  vertical-align: middle; /* 图片垂直居中对齐 */
+  max-width: 100%; /* 确保图片不会超出其容器 */
 }
 
-
-/* Utils
------------------------------- */
+/* 清除浮动 */
 .clearfix:before,
 .clearfix:after {
   content: " ";
@@ -36,31 +41,21 @@ img {
   clear: both;
 }
 
-
-
-
-/* Reset element-ui
------------------------------- */
-.site-wrapper {
-  .el-pagination {
-    display: flex;
-    justify-content: flex-end;
-  }
+/* 重置 element-ui 样式 */
+.site-wrapper .el-pagination {
+  display: flex;
+  justify-content: flex-end; /* 分页组件右对齐 */
 }
 
-
-/* Layout
------------------------------- */
+/* 布局 */
 .site-wrapper {
   position: relative;
-  min-width: 1180px;
+  min-width: 1180px; /* 设置最小宽度以确保布局在大屏幕上的稳定性 */
 }
 
-
-/* Sidebar fold
------------------------------- */
+/* 侧边栏折叠 */
 .site-content--tabs {
-  padding: 60px 20px 20px 20px !important;
+  padding: 60px 20px 20px 20px !important; /* 当标签页存在时调整内容区的内边距 */
 }
 .site-navbar {
   color: #333333;
@@ -69,37 +64,32 @@ img {
   .site-navbar__header,
   .site-navbar__brand,
   .site-sidebar {
-    width: 100px;
+    width: 100px; /* 折叠状态下左侧栏的宽度 */
   }
   .site-navbar__body,
   .site-content__wrapper {
-    margin-left: 100px;
+    margin-left: 100px; /* 折叠后内容区向左偏移量 */
     border-bottom: 1px solid #EBEDF0;
   }
-  .site-navbar__brand {
-    &-lg {
-      display: none;
-    }
-    &-mini {
-      display: inline-block;
-    }
+  .site-navbar__brand-lg {
+    display: none; /* 折叠状态隐藏大尺寸品牌标志 */
+  }
+  .site-navbar__brand-mini {
+    display: inline-block; /* 显示小尺寸品牌标志 */
   }
   .site-sidebar,
   .site-sidebar__inner {
-    overflow: initial;
+    overflow: initial; /* 解决滚动条显示问题 */
   }
 }
-// animation
 .site-sidebar,
 .site-sidebar__menu-icon,
 .site-content__wrapper,
 .site-content--tabs > .el-tabs .el-tabs__header {
-  transition: inline-block .3s, left .3s, width .3s, margin-left .3s, font-size .3s;
+  transition: all .3s ease-in-out; /* 添加过渡效果 */
 }
 
-
-/* Navbar
------------------------------- */
+/* 导航栏 */
 .site-navbar {
   position: fixed;
   top: 0;
@@ -107,13 +97,10 @@ img {
   left: 0;
   z-index: 1030;
   height: 50px;
-  // box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
   background-color: $navbar--background-color;
 
   &__header {
-    position: relative;
     float: left;
-    // width: 180px;
     height: 50px;
     margin-left: 20px;
     overflow: hidden;
@@ -121,9 +108,7 @@ img {
   &__brand {
     display: table-cell;
     vertical-align: middle;
-    // width: 230px;
     height: 50px;
-    margin: 0;
     line-height: 50px;
     font-size: 20px;
     text-align: center;
@@ -151,28 +136,19 @@ img {
   }
   &__avatar {
     border-bottom: none !important;
-    * {
-      vertical-align: inherit;
-    }
-    .el-dropdown-link {
-      > img {
-        width: 36px;
-        height: auto;
-        margin-right: 5px;
-        border-radius: 100%;
-        vertical-align: middle;
-      }
+    .el-dropdown-link img {
+      width: 36px;
+      height: auto;
+      margin-right: 5px;
+      border-radius: 100%;
+      vertical-align: middle;
     }
   }
   &__body {
-    position: relative;
-    // margin-left: 230px;
-    // padding-right: 15px;
     background-color: #fff;
   }
   &__menu {
     float: left;
-    background-color: transparent;
     border-bottom: 0;
 
     &--right {
@@ -185,9 +161,7 @@ img {
   }
 }
 
-
-/* Sidebar
------------------------------- */
+/* 侧边栏 */
 .site-sidebar {
   position: fixed;
   top: 50px;
@@ -203,14 +177,12 @@ img {
   }
   &__inner {
     position: relative;
-    z-index: 1;
     width: 250px;
     height: 100%;
     padding-bottom: 15px;
     overflow-y: scroll;
   }
   &__menu.el-menu {
-    width: 100px;
     border-right: 0;
   }
   &__menu-icon {
@@ -222,9 +194,7 @@ img {
   }
 }
 
-
-/* Content
------------------------------- */
+/* 内容区 */
 .site-content {
   position: relative;
   padding: 15px;
@@ -242,38 +212,31 @@ img {
   }
 }
 
-
-// 新版规范全局统一样式
-// el-table 表格表头样式
+/* 表格样式 */
 .table-header {
   background-color: #f7f8fa !important;
   color: #000;
   height: 60px;
 }
-// el-table 表格行样式 - 多行文本/图文
 .table-row {
   height: 100px;
 }
-// el-table 表格行样式 - 单行文本展示
 .table-row-low {
   height: 65px;
 }
-// el-table 表格单元格样式
 .table-cell {
   padding: 0;
 }
-// 表格文字换行模式
 .el-table .cell {
   line-height: 20px !important;
   word-break: break-word !important;
 }
-// 表格第一列样式（内容&表头）
 .el-table tr > td:first-child > .cell,
 .el-table th:first-child > .cell {
   padding-left: 20px;
 }
 
-// 按钮样式
+/* 按钮样式 */
 .default-btn {
   height: 32px;
   line-height: 32px;
@@ -334,7 +297,6 @@ img {
     cursor: not-allowed;
   }
 }
-// 相邻按钮样式
 .default-btn + .default-btn {
   margin-left: 10px;
 }
@@ -342,31 +304,26 @@ img {
   margin-left: 20px;
 }
 
-// 状态展示
+/* 状态展示 */
 .tag-text {
   font-size: 14px;
 }
 
-// el-dialog 样式
+/* 对话框样式 */
 .el-dialog__header {
   border-bottom: 1px solid #f0f0f0;
   margin-right: 0;
 }
-
 .el-dialog__footer {
   border-top: 1px solid #f0f0f0;
 }
 
-
-// 列表布局样式
-// 搜索栏
+/* 列表布局样式 */
 .search-bar {
   padding: 25px 20px 0;
   margin-bottom: 20px;
   background-color: #F7F8FA;
   .input-row {
-    display: block;
-    // 选择器(下拉框)  &  输入框 宽度
     .el-form-item .el-form-item__content .el-select,
     .el-form-item .el-form-item__content .el-input {
       width: 200px;
@@ -382,9 +339,7 @@ img {
     }
   }
 }
-// 主体
 .main-container {
-  // 操作按钮
   .operation-bar {
     position: relative;
     display: flex;
@@ -403,7 +358,6 @@ img {
       font-size: 12px;
     }
   }
-  // 表格
   .table-con {
     margin-top: 20px;
     padding-bottom: 30px;
@@ -412,7 +366,6 @@ img {
       display: flex;
       justify-content: center;
     }
-    // 图片 + 文本
     .table-cell-con {
       display: flex;
       align-items: center;
@@ -430,17 +383,14 @@ img {
         margin-left: 8px;
         flex: 1;
         text-overflow: ellipsis;
-        -o-text-overflow: ellipsis;
         word-break: break-word;
         display: -webkit-box;
         -webkit-line-clamp: 2;
-        /* autoprefixer: ignore next */
         -webkit-box-orient: vertical;
         overflow: hidden;
         line-height: 20px;
       }
     }
-    // 纯图片
     .table-cell-image {
       width: 60px;
       height: 60px;
@@ -451,14 +401,11 @@ img {
         object-fit: contain;
       }
     }
-    // 纯文本
     .table-cell-text {
       text-overflow: ellipsis;
-      -o-text-overflow: ellipsis;
       word-break: break-word;
       display: -webkit-box;
       -webkit-line-clamp: 2;
-      /* autoprefixer: ignore next */
       -webkit-box-orient: vertical;
       overflow: hidden;
       line-height: 20px;
@@ -469,7 +416,7 @@ img {
   }
 }
 
-// el-tabs 样式
+/* 标签样式 */
 .el-tabs__nav-wrap::after{
   height: 1px !important;
 }
@@ -487,12 +434,11 @@ img {
   border-bottom: 2px solid #155BD4;
 }
 
-// 新增页面头部标题样式
+/* 新增页面头部标题样式 */
 .new-page-title {
   width: 100%;
   height: 62px;
   background: #F7F8FA;
-  box-sizing: border-box;
   padding: 19px 20px;
   display: flex;
   align-items: center;
@@ -514,4 +460,4 @@ img {
 }
 .time-select-item {
   text-align: center;
-}
\ No newline at end of file
+}
diff --git a/front-end/mall4v/src/styles/_normalize.scss b/front-end/mall4v/src/styles/_normalize.scss
index 7fb5177..bd3b8c3 100644
--- a/front-end/mall4v/src/styles/_normalize.scss
+++ b/front-end/mall4v/src/styles/_normalize.scss
@@ -4,12 +4,10 @@
    ========================================================================== */
 
 /**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
+ * 1. 正确设置所有浏览器中的行高。
+ * 2. 防止 Windows Phone IE 和 iOS 中由于方向变化引起的字体大小调整。
  */
-
- html {
+html {
   line-height: 1.15; /* 1 */
   -ms-text-size-adjust: 100%; /* 2 */
   -webkit-text-size-adjust: 100%; /* 2 */
@@ -19,17 +17,15 @@
    ========================================================================== */
 
 /**
- * Remove the margin in all browsers (opinionated).
+ * 移除所有浏览器中的 body 边距（意见性）。
  */
-
 body {
   margin: 0;
 }
 
 /**
- * Add the correct display in IE 9-.
+ * 在IE 9-中正确显示这些元素。
  */
-
 article,
 aside,
 footer,
@@ -40,10 +36,8 @@ section {
 }
 
 /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
+ * 在 Chrome, Firefox, 和 Safari 中，修正 section 和 article 上下文中 h1 元素的字体大小和边距。
  */
-
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
@@ -53,10 +47,9 @@ h1 {
    ========================================================================== */
 
 /**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
+ * 在IE 9-中正确显示这些元素。
+ * 1. 在IE中正确显示 main 元素。
  */
-
 figcaption,
 figure,
 main { /* 1 */
@@ -64,18 +57,16 @@ main { /* 1 */
 }
 
 /**
- * Add the correct margin in IE 8.
+ * 在IE 8中添加正确的边距。
  */
-
 figure {
   margin: 1em 40px;
 }
 
 /**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
+ * 1. 在Firefox中正确设置 box-sizing。
+ * 2. 在Edge和IE中显示溢出内容。
  */
-
 hr {
   box-sizing: content-box; /* 1 */
   height: 0; /* 1 */
@@ -83,10 +74,9 @@ hr {
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
+ * 1. 在所有浏览器中正确继承和缩放字体大小。
+ * 2. 在所有浏览器中修正奇怪的 em 字体大小。
  */
-
 pre {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
@@ -96,47 +86,42 @@ pre {
    ========================================================================== */
 
 /**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ * 1. 移除IE 10中激活链接的灰色背景。
+ * 2. 移除iOS 8+ 和 Safari 8+中链接下划线的间隙。
  */
-
 a {
   background-color: transparent; /* 1 */
 }
 
 /**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ * 1. 移除Chrome 57- 和 Firefox 39-中按钮底部的边框。
+ * 2. 在Chrome, Edge, IE, Opera, 和 Safari中添加正确的文本装饰。
  */
-
 abbr[title] {
   border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
 }
 
 /**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ * 防止Safari 6中 bolder 样式重复应用。
  */
-
 b,
 strong {
   font-weight: inherit;
 }
 
 /**
- * Add the correct font weight in Chrome, Edge, and Safari.
+ * 在Chrome, Edge, 和 Safari中添加正确的字体粗细。
  */
-
 b,
 strong {
   font-weight: bolder;
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
+ * 1. 在所有浏览器中正确继承和缩放字体大小。
+ * 2. 在所有浏览器中修正奇怪的 em 字体大小。
  */
-
 code,
 kbd,
 samp {
@@ -145,35 +130,30 @@ samp {
 }
 
 /**
- * Add the correct font style in Android 4.3-.
+ * 在Android 4.3-中添加正确的字体风格。
  */
-
 dfn {
   font-style: italic;
 }
 
 /**
- * Add the correct background and color in IE 9-.
+ * 在IE 9-中添加正确的背景色和颜色。
  */
-
 mark {
   background-color: #ff0;
   color: #000;
 }
 
 /**
- * Add the correct font size in all browsers.
+ * 在所有浏览器中添加正确的字体大小。
  */
-
 small {
   font-size: 80%;
 }
 
 /**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
+ * 防止 sub 和 sup 元素影响所有浏览器中的行高。
  */
-
 sub,
 sup {
   font-size: 75%;
@@ -194,35 +174,31 @@ sup {
    ========================================================================== */
 
 /**
- * Add the correct display in IE 9-.
+ * 在IE 9-中正确显示这些元素。
  */
-
 audio,
 video {
   display: inline-block;
 }
 
 /**
- * Add the correct display in iOS 4-7.
+ * 在iOS 4-7中正确显示 audio 元素。
  */
-
 audio:not([controls]) {
   display: none;
   height: 0;
 }
 
 /**
- * Remove the border on images inside links in IE 10-.
+ * 移除IE 10-中图片内部链接的边框。
  */
-
 img {
   border-style: none;
 }
 
 /**
- * Hide the overflow in IE.
+ * 在IE中隐藏溢出内容。
  */
-
 svg:not(:root) {
   overflow: hidden;
 }
@@ -231,10 +207,9 @@ svg:not(:root) {
    ========================================================================== */
 
 /**
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
+ * 1. 改变所有浏览器中的表单控件字体样式（意见性）。
+ * 2. 移除Firefox和Safari中的边距。
  */
-
 button,
 input,
 optgroup,
@@ -247,42 +222,38 @@ textarea {
 }
 
 /**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
+ * 在IE中显示溢出内容。
+ * 1. 在Edge中显示溢出内容。
  */
-
 button,
 input { /* 1 */
   overflow: visible;
 }
 
 /**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
+ * 移除Edge, Firefox, 和 IE中 text-transform 的继承。
+ * 1. 移除Firefox中的 text-transform 继承。
  */
-
 button,
 select { /* 1 */
   text-transform: none;
 }
 
 /**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
+ * 1. 防止WebKit中的 bug，该bug会破坏 Android 4 中 native `audio` 和 `video` 控件。
+ * 2. 修正iOS和Safari中无法对可点击类型进行样式的错误。
  */
-
 button,
 html [type="button"], /* 1 */
 [type="reset"],
+[type="reset"],
 [type="submit"] {
   -webkit-appearance: button; /* 2 */
 }
 
 /**
- * Remove the inner border and padding in Firefox.
+ * 移除Firefox中按钮和输入框聚焦时的内边距和边框。
  */
-
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
@@ -292,9 +263,8 @@ button::-moz-focus-inner,
 }
 
 /**
- * Restore the focus styles unset by the previous rule.
+ * 恢复Firefox中被上一条规则移除的聚焦样式。
  */
-
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
@@ -303,20 +273,17 @@ button:-moz-focusring,
 }
 
 /**
- * Correct the padding in Firefox.
+ * 在Firefox中修正 fieldset 的内边距。
  */
-
 fieldset {
   padding: 0.35em 0.75em 0.625em;
 }
 
 /**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
+ * 1. 在Edge和IE中修正文本换行。
+ * 2. 在IE中修正颜色继承自 fieldset 元素的问题。
+ * 3. 移除内边距，以防止开发者在所有浏览器中将 fieldset 元素置零时遇到问题。
  */
-
 legend {
   box-sizing: border-box; /* 1 */
   color: inherit; /* 2 */
@@ -327,28 +294,25 @@ legend {
 }
 
 /**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * 1. 在IE 9-中正确显示 progress 元素。
+ * 2. 在Chrome, Firefox, 和 Opera中正确设置垂直对齐。
  */
-
 progress {
   display: inline-block; /* 1 */
   vertical-align: baseline; /* 2 */
 }
 
 /**
- * Remove the default vertical scrollbar in IE.
+ * 移除IE中的默认垂直滚动条。
  */
-
 textarea {
   overflow: auto;
 }
 
 /**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
+ * 1. 在IE 10-中正确设置 box-sizing。
+ * 2. 在IE 10-中移除内边距。
  */
-
 [type="checkbox"],
 [type="radio"] {
   box-sizing: border-box; /* 1 */
@@ -356,38 +320,34 @@ textarea {
 }
 
 /**
- * Correct the cursor style of increment and decrement buttons in Chrome.
+ * 在Chrome中修正数字输入框中的上下箭头的高度。
  */
-
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
 /**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
+ * 1. 修正Chrome和Safari中搜索框的奇怪外观。
+ * 2. 修正Safari中搜索框的轮廓样式。
  */
-
 [type="search"] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
 
 /**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ * 移除macOS版Chrome和Safari中搜索框的内部填充和取消按钮。
  */
-
 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
 /**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
+ * 1. 修正iOS和Safari中无法对可点击类型进行样式的错误。
+ * 2. 将字体属性更改为 inherit 以适应 Safari。
  */
-
 ::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
@@ -396,20 +356,18 @@ textarea {
 /* Interactive
    ========================================================================== */
 
-/*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
+/**
+ * 添加在IE 9-中正确显示的细节元素。
+ * 1. 在Edge, IE, 和 Firefox中正确显示菜单元素。
  */
-
 details, /* 1 */
 menu {
   display: block;
 }
 
-/*
- * Add the correct display in all browsers.
+/**
+ * 在所有浏览器中正确显示 summary 元素。
  */
-
 summary {
   display: list-item;
 }
@@ -418,17 +376,15 @@ summary {
    ========================================================================== */
 
 /**
- * Add the correct display in IE 9-.
+ * 在IE 9-中正确显示 canvas 元素。
  */
-
 canvas {
   display: inline-block;
 }
 
 /**
- * Add the correct display in IE.
+ * 在IE中正确显示 template 元素。
  */
-
 template {
   display: none;
 }
@@ -437,9 +393,8 @@ template {
    ========================================================================== */
 
 /**
- * Add the correct display in IE 10-.
+ * 在IE 10-中正确显示 [hidden] 属性。
  */
-
 [hidden] {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/front-end/mall4v/src/styles/_variables.scss b/front-end/mall4v/src/styles/_variables.scss
index 4518fa2..a4aaf3a 100644
--- a/front-end/mall4v/src/styles/_variables.scss
+++ b/front-end/mall4v/src/styles/_variables.scss
@@ -1,14 +1,36 @@
-
-// css 变量
+// 定义全局颜色变量
+// --color-primary: 主要颜色，用于强调或突出显示重要元素
 $--color-primary: #155BD4;
 
-// Navbar
+// Navbar (导航栏) 样式
+// 设置导航栏的背景色为主颜色
 $navbar--background-color: $--color-primary;
 
-// Sidebar
+// Sidebar (侧边栏) 样式
+// 设置侧边栏深色背景色
 $sidebar--background-color-dark: #263238;
+// 设置侧边栏文字颜色为浅灰色，适合深色背景
 $sidebar--color-text-dark: #8a979e;
 
-// Content
+// Content (内容区) 样式
+// 设置主要内容区域的背景色为淡灰白色，提供舒适的阅读体验
 $content--background-color: #f1f4f5;
 
+/* 下面是使用上述变量的实际CSS规则示例 */
+
+/* 导航栏 */
+.navbar {
+  background-color: $navbar--background-color; // 使用主要颜色作为导航栏背景
+}
+
+/* 侧边栏 */
+.sidebar {
+  background-color: $sidebar--background-color-dark; // 使用深色作为侧边栏背景
+  color: $sidebar--color-text-dark; // 使用浅灰色作为侧边栏文本颜色
+}
+
+/* 内容区 */
+.content {
+  background-color: $content--background-color; // 使用淡灰白色作为内容区背景
+}
+
diff --git a/front-end/mall4v/src/styles/element-variables.scss b/front-end/mall4v/src/styles/element-variables.scss
index 25c0681..87bd68e 100644
--- a/front-end/mall4v/src/styles/element-variables.scss
+++ b/front-end/mall4v/src/styles/element-variables.scss
@@ -1,7 +1,33 @@
-// element-plus
 :root {
+  /*
+   * 定义全局 CSS 变量，这些变量可以在整个项目中被引用。
+   */
+
+  /*
+   * --el-color-primary: 主要颜色，用于强调或突出显示重要元素，
+   * 如按钮、链接等交互性元素的颜色。这个颜色应该在整个应用中保持一致，
+   * 以提供统一的视觉体验。
+   */
   --el-color-primary: #155BD4;
+
+  /*
+   * --el-color-primary-light-3: 较浅的主要颜色变体，通常用作主要颜色的替代，
+   * 比如在悬停状态、激活状态或者需要稍微减弱视觉重量的地方。
+   * 这个值可以用来创建一个从主要颜色到更浅色调的过渡效果。
+   */
   --el-color-primary-light-3: #447cdd;
+
+  /*
+   * --el-menu-item-height: 设置菜单项的高度，默认为40px。
+   * 这个高度适用于Element Plus的菜单组件中的顶级菜单项。
+   * 确保所有菜单项有相同的高度，有助于保持界面的一致性和美观性。
+   */
   --el-menu-item-height: 40px;
+
+  /*
+   * --el-menu-sub-item-height: 设置子菜单项的高度，默认为40px。
+   * 类似于菜单项的高度，但专门用于菜单的子级项目。
+   * 保持与父级菜单项相同或不同的高度，取决于设计需求。
+   */
   --el-menu-sub-item-height: 40px;
 }
diff --git a/front-end/mall4v/src/styles/index.scss b/front-end/mall4v/src/styles/index.scss
index 526a674..5fac76c 100644
--- a/front-end/mall4v/src/styles/index.scss
+++ b/front-end/mall4v/src/styles/index.scss
@@ -1,8 +1,27 @@
-@import "_normalize";       // api: https://github.com/necolas/normalize.css/
+// 引入 normalize.css 样式库
+// api: https://github.com/necolas/normalize.css/
+// normalize.css 是一个CSS库，它的目的是通过提供一组样式来标准化不同浏览器的默认样式，
+// 确保网页在各种浏览器中看起来一致。此文件应该放在所有其他样式之前引入，以确保其样式可以被正确覆盖。
+@import "_normalize";
+
+// 引入变量文件
+// _variables 文件通常包含了项目中使用的全局变量定义，如颜色、字体大小、间距等。
+// 这些变量可以在整个项目中重复使用，以便于维护和统一设计语言。
 @import "_variables";
+
+// 引入基础样式文件
+// _base 文件一般包含项目的通用样式，如重置样式（reset）、排版样式（typography）、布局样式（layout）等。
+// 它为网站提供了一套基础的样式规范，确保页面元素具有一致的表现。
 @import "_base";
+
+// 引入 Element Plus 的变量文件
+// 此文件包含了 Element Plus 组件库所用的颜色、尺寸等变量定义。
+// 通过覆盖这些变量，可以在不修改组件库源码的情况下，定制化Element Plus组件的外观。
 @import "@/styles/element-variables.scss";
 
+// 自定义样式规则：设置错误消息的 z-index
+// .element-error-message-zindex 类用于提高特定元素的堆叠顺序（z-index），确保该元素始终显示在其他内容之上。
+// 在这里，我们给这个类设置了 z-index 为 3000，并且使用了 !important 关键字来确保这条规则不会被其他样式覆盖。
 .element-error-message-zindex {
-  z-index:3000 !important;
+  z-index: 3000 !important;
 }