diff --git a/front-end/mall4v/src/views/common/error-page/404.vue b/front-end/mall4v/src/views/common/error-page/404.vue
index 3d026a1..0ac5244 100644
--- a/front-end/mall4v/src/views/common/error-page/404.vue
+++ b/front-end/mall4v/src/views/common/error-page/404.vue
@@ -1,16 +1,21 @@
 <template>
+  <!-- 400页面模板 -->
   <div class="site-wrapper site-page--not-found">
+    <!-- 内容包裹器，用于设置页面整体布局 -->
     <div class="site-content__wrapper">
+      <!-- 页面内容主体 -->
       <div class="site-content">
-        <h2 class="not-found-title">
-          400
-        </h2>
+        <!-- 显示错误代码 -->
+        <h2 class="not-found-title">400</h2>
+        <!-- 描述错误信息 -->
         <p class="not-found-desc">
           抱歉！您访问的页面<em>失联</em>啦 ...
         </p>
+        <!-- 返回上一页按钮 -->
         <el-button @click="$router.go(-1)">
           返回上一页
         </el-button>
+        <!-- 进入首页按钮 -->
         <el-button
           type="primary"
           class="not-found-btn-gohome"
@@ -24,48 +29,63 @@
 </template>
 
 <script setup>
+// 此处可以添加脚本逻辑，目前此页面没有需要处理的业务逻辑，因此脚本部分为空。
+// 使用 <script setup> 语法糖简化Vue组件定义，适用于组合式API。
 </script>
 
 <style lang="scss" scoped>
-  .site-wrapper.site-page--not-found {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: hidden;
-    .site-content__wrapper {
-      padding: 0;
-      margin: 0;
-      background-color: #fff;
-    }
-    .site-content {
-      position: fixed;
-      top: 15%;
-      left: 50%;
-      z-index: 2;
-      padding: 30px;
-      text-align: center;
-      transform: translate(-50%, 0);
-    }
+.site-wrapper.site-page--not-found {
+  /* 设置页面占据整个浏览器窗口 */
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+
+  .site-content__wrapper {
+    /* 移除默认的内边距和外边距，并设置背景颜色 */
+    padding: 0;
+    margin: 0;
+    background-color: #fff;
+  }
+
+  .site-content {
+    /* 固定定位，使内容居中显示 */
+    position: fixed;
+    top: 15%;
+    left: 50%;
+    z-index: 2;
+    padding: 30px;
+    text-align: center;
+    transform: translate(-50%, 0);
+
     .not-found-title {
+      /* 错误代码样式 */
       margin: 20px 0 15px;
       font-size: 10em;
       font-weight: 400;
       color: rgb(55, 71, 79);
     }
+
     .not-found-desc {
+      /* 错误描述样式 */
       margin: 0 0 30px;
       font-size: 26px;
       text-transform: uppercase;
       color: rgb(118, 131, 143);
+
       > em {
+        /* 强调文字样式 */
         font-style: normal;
         color: #ee8145;
       }
     }
+
     .not-found-btn-gohome {
+      /* 首页按钮样式，增加左边距以与返回按钮间隔开 */
       margin-left: 30px;
     }
   }
+}
 </style>
diff --git a/front-end/mall4v/src/views/common/home/index.vue b/front-end/mall4v/src/views/common/home/index.vue
index 025b98b..dbf29d9 100644
--- a/front-end/mall4v/src/views/common/home/index.vue
+++ b/front-end/mall4v/src/views/common/home/index.vue
@@ -1,114 +1,62 @@
 <template>
   <div class="mod-home">
+    <!-- 简介段落 -->
     <p>一个基于spring boot、spring oauth2.0、mybatis、redis的轻量级、前后端分离、拥有完整sku和下单流程的完全开源商城</p>
     <p>&nbsp;</p>
+    <!-- 版权声明 -->
     <p>该项目仅供学习参考、可供个人学习使用、如需商用联系作者进行授权，否则必将追究法律责任</p>
     <p>&nbsp;</p>
+
     <h2>前言</h2>
     <p>
-      <code>mall4j商城</code>项目致力于为中小企业打造一个完整、易于维护的开源的电商系统，采用现阶段流行技术实现。后台管理系统包含商品管理、订单管理、运费模板、规格管理、会员管理、运营管理、内容管理、统计报表、权限管理、设置等模块。
+      <code>mall4j商城</code>项目致力于为中小企业打造一个完整、易于维护的开源电商系统，采用现阶段流行技术实现。后台管理系统包含商品管理、订单管理、运费模板、规格管理、会员管理、运营管理、内容管理、统计报表、权限管理、设置等模块。
     </p>
     <p>&nbsp;</p>
+
     <h2>技术选型</h2>
     <figure>
-      <table
-        border="1"
-        cellspacing="0"
-        cellpadding="5px"
-      >
+      <table border="1" cellspacing="0" cellpadding="5px">
         <thead>
-          <tr>
-            <th>技术</th>
-            <th>版本</th>
-            <th>说明</th>
-          </tr>
+        <tr>
+          <th>技术</th>
+          <th>版本</th>
+          <th>说明</th>
+        </tr>
         </thead>
         <tbody>
-          <tr>
-            <td>Spring Boot</td>
-            <td>3.0.4</td>
-            <td>MVC核心框架</td>
-          </tr>
-          <tr>
-            <td>MyBatis</td>
-            <td>3.5.0</td>
-            <td>ORM框架</td>
-          </tr>
-          <tr>
-            <td>MyBatisPlus</td>
-            <td>3.5.3.1</td>
-            <td>基于mybatis，使用lambda表达式的</td>
-          </tr>
-          <tr>
-            <td>Swagger-UI</td>
-            <td>4.0.0</td>
-            <td>文档生产工具</td>
-          </tr>
-          <tr>
-            <td>redisson</td>
-            <td>3.19.3</td>
-            <td>对redis进行封装、集成分布式锁等</td>
-          </tr>
-          <tr>
-            <td>hikari</td>
-            <td>3.2.0</td>
-            <td>数据库连接池</td>
-          </tr>
-          <tr>
-            <td>log4j2</td>
-            <td>2.17.2</td>
-            <td>更快的log日志工具</td>
-          </tr>
-          <tr>
-            <td>lombok</td>
-            <td>1.18.8</td>
-            <td>简化对象封装工具</td>
-          </tr>
-          <tr>
-            <td>hutool</td>
-            <td>5.8.15</td>
-            <td>更适合国人的java工具集</td>
-          </tr>
-          <tr>
-            <td>xxl-job</td>
-            <td>2.3.1</td>
-            <td>定时任务</td>
-          </tr>
+        <!-- 列出所用技术及其版本和简要说明 -->
+        <tr v-for="(tech, index) in technologies" :key="index">
+          <td>{{ tech.name }}</td>
+          <td>{{ tech.version }}</td>
+          <td>{{ tech.description }}</td>
+        </tr>
         </tbody>
       </table>
     </figure>
     <p>&nbsp;</p>
+
     <h2>部署教程</h2>
     <p>&nbsp;</p>
+
     <h3>1.开发环境</h3>
     <figure>
-      <table
-        border="1"
-        cellspacing="0"
-        cellpadding="5px"
-      >
+      <table border="1" cellspacing="0" cellpadding="5px">
         <thead>
-          <tr>
-            <th>工具</th>
-            <th>版本</th>
-          </tr>
+        <tr>
+          <th>工具</th>
+          <th>版本</th>
+        </tr>
         </thead>
         <tbody>
-          <tr>
-            <td>jdk</td>
-            <td>17</td>
-          </tr>
-          <tr>
-            <td>mysql</td>
-            <td>5.7+</td>
-          </tr>
-          <tr>
-            <td>redis</td>
-            <td>3.2+</td>
-          </tr>
+        <!-- 列出所需的开发环境工具及其版本 -->
+        <tr v-for="(tool, index) in developmentTools" :key="index">
+          <td>{{ tool.name }}</td>
+          <td>{{ tool.version }}</td>
+        </tr>
         </tbody>
       </table>
     </figure>
+
     <h3>2.启动</h3>
     <ul>
       <li>推荐使用idea，安装lombok插件，使用idea导入maven项目</li>
@@ -127,8 +75,31 @@
   </div>
 </template>
 
+<script setup>
+// 定义所需的技术列表
+const technologies = [
+  { name: 'Spring Boot', version: '3.0.4', description: 'MVC核心框架' },
+  { name: 'MyBatis', version: '3.5.0', description: 'ORM框架' },
+  { name: 'MyBatisPlus', version: '3.5.3.1', description: '基于mybatis，使用lambda表达式的增强' },
+  { name: 'Swagger-UI', version: '4.0.0', description: '文档生产工具' },
+  { name: 'redisson', version: '3.19.3', description: '对redis进行封装、集成分布式锁等' },
+  { name: 'hikari', version: '3.2.0', description: '数据库连接池' },
+  { name: 'log4j2', version: '2.17.2', description: '更快的log日志工具' },
+  { name: 'lombok', version: '1.18.8', description: '简化对象封装工具' },
+  { name: 'hutool', version: '5.8.15', description: '更适合国人的java工具集' },
+  { name: 'xxl-job', version: '2.3.1', description: '定时任务' }
+];
+
+// 定义所需的开发环境工具列表
+const developmentTools = [
+  { name: 'jdk', version: '17' },
+  { name: 'mysql', version: '5.7+' },
+  { name: 'redis', version: '3.2+' }
+];
+</script>
+
 <style lang="scss" scoped>
 .mod-home {
-  line-height: 1.5;
+  line-height: 1.5; // 设置文本行高，提高可读性
 }
 </style>
diff --git a/front-end/mall4v/src/views/common/login/index.vue b/front-end/mall4v/src/views/common/login/index.vue
index 4e9a745..365e2b7 100644
--- a/front-end/mall4v/src/views/common/login/index.vue
+++ b/front-end/mall4v/src/views/common/login/index.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="login">
+    <!-- 登录框 -->
     <div class="login-box">
+      <!-- 顶部区域，包含logo -->
       <div class="top">
         <div class="logo">
-          <img
-            src="~@/assets/img/login-logo.png"
-            alt=""
-          >
+          <img src="~@/assets/img/login-logo.png" alt="Logo">
         </div>
       </div>
+      <!-- 中间区域，包含登录表单 -->
       <div class="mid">
         <el-form
           ref="dataFormRef"
@@ -17,6 +17,7 @@
           status-icon
           @keyup.enter="dataFormSubmit()"
         >
+          <!-- 用户名输入框 -->
           <el-form-item prop="userName">
             <el-input
               v-model="dataForm.userName"
@@ -24,6 +25,7 @@
               placeholder="帐号"
             />
           </el-form-item>
+          <!-- 密码输入框 -->
           <el-form-item prop="password">
             <el-input
               v-model="dataForm.password"
@@ -32,6 +34,7 @@
               placeholder="密码"
             />
           </el-form-item>
+          <!-- 登录按钮 -->
           <el-form-item>
             <div class="item-btn">
               <input
@@ -43,10 +46,12 @@
           </el-form-item>
         </el-form>
       </div>
+      <!-- 底部版权信息 -->
       <div class="bottom">
         Copyright © 2019 广州市蓝海创新科技有限公司
       </div>
     </div>
+    <!-- 验证组件，用于显示图形验证码 -->
     <Verify
       ref="verifyRef"
       :captcha-type="'blockPuzzle'"
@@ -57,17 +62,23 @@
 </template>
 
 <script setup>
-import { encrypt } from '@/utils/crypto'
-import { getUUID } from '@/utils'
-import Verify from '@/components/verifition/Verify.vue'
-import cookie from 'vue-cookies'
+import { encrypt } from '@/utils/crypto' // 加密工具函数
+import { getUUID } from '@/utils' // 获取唯一标识符的工具函数
+import Verify from '@/components/verifition/Verify.vue' // 验证组件
+import cookie from 'vue-cookies' // cookies操作库
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter } from 'vue-router'
+import http from '@/api/http'
 
+// 定义表单数据对象
 const dataForm = ref({
   userName: '',
   password: '',
   uuid: '',
   captcha: ''
 })
+
+// 定义表单验证规则
 const dataRule = {
   userName: [
     { required: true, message: '帐号不能为空', trigger: 'blur' }
@@ -80,39 +91,51 @@ const dataRule = {
   ]
 }
 
+// 生命周期钩子：在组件卸载前移除全局事件监听器
 onBeforeUnmount(() => {
   document.removeEventListener('keyup', handerKeyup)
 })
+
+// 生命周期钩子：组件挂载后初始化
 onMounted(() => {
   getCaptcha()
   document.addEventListener('keyup', handerKeyup)
 })
+
+// 处理键盘事件，实现回车键提交表单
 const handerKeyup = (e) => {
-  const keycode = document.all ? event.keyCode : e.which
+  const keycode = e.which || e.keyCode
   if (keycode === 13) {
-    this.dataFormSubmit()
+    dataFormSubmit()
   }
 }
 
+// 验证组件引用
 const verifyRef = ref(null)
+// 表单引用
 const dataFormRef = ref(null)
 let isSubmit = false
+
 /**
  * 提交表单
  */
 const dataFormSubmit = () => {
   dataFormRef.value?.validate((valid) => {
     if (valid) {
-      verifyRef.value?.show()
+      verifyRef.value?.show() // 显示验证码组件
     }
   })
 }
 
+// 路由实例
 const router = useRouter()
+
+/**
+ * 登录逻辑处理
+ * @param {Object} verifyResult - 验证成功后的结果
+ */
 const login = (verifyResult) => {
-  if (isSubmit) {
-    return
-  }
+  if (isSubmit) return
   isSubmit = true
   http({
     url: http.adornUrl('/adminLogin'),
@@ -123,8 +146,8 @@ const login = (verifyResult) => {
       captchaVerification: verifyResult.captchaVerification
     })
   }).then(({ data }) => {
-    cookie.set('Authorization', data.accessToken)
-    router.replace({ name: 'home' })
+    cookie.set('Authorization', data.accessToken) // 设置授权令牌到cookie
+    router.replace({ name: 'home' }) // 跳转到首页
   }).catch(() => {
     isSubmit = false
   })
@@ -134,9 +157,8 @@ const login = (verifyResult) => {
  * 获取验证码
  */
 const getCaptcha = () => {
-  dataForm.value.uuid = getUUID()
+  dataForm.value.uuid = getUUID() // 生成并设置uuid
 }
-
 </script>
 
 <style lang="scss" scoped>
@@ -146,30 +168,37 @@ const getCaptcha = () => {
   background: url('../../../assets/img/login-bg.png') no-repeat;
   background-size: cover;
   position: fixed;
+
   .login-box {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     height: 100%;
     padding-top: 10%;
+
     .top {
       margin-bottom: 30px;
       text-align: center;
+
       .logo {
         font-size: 0;
         max-width: 50%;
         margin: 0 auto;
       }
+
       &:deep(.company) {
         font-size: 16px;
         margin-top: 10px;
       }
     }
+
     .mid {
       font-size: 14px;
+
       .item-btn {
         width: 410px;
         margin-top: 20px;
+
         input {
           border: 0;
           width: 100%;
@@ -180,6 +209,7 @@ const getCaptcha = () => {
         }
       }
     }
+
     .bottom {
       position: absolute;
       bottom: 10%;
@@ -190,9 +220,11 @@ const getCaptcha = () => {
     }
   }
 }
+
 .info {
   width: 410px;
 }
+
 :deep(.login-captcha) {
   height: 40px;
 }
diff --git a/front-end/mall4v/src/views/modules/admin/indexImg/add-or-update.vue b/front-end/mall4v/src/views/modules/admin/indexImg/add-or-update.vue
index 90e320f..daed19e 100644
--- a/front-end/mall4v/src/views/modules/admin/indexImg/add-or-update.vue
+++ b/front-end/mall4v/src/views/modules/admin/indexImg/add-or-update.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="mod-index-img">
+    <!-- 对话框组件，用于显示新增或修改轮播图片的表单 -->
     <el-dialog
       v-model="visible"
       :title="!dataForm.imgId ? '新增' : '修改'"
@@ -11,12 +12,14 @@
         :rules="dataRule"
         label-width="100px"
       >
+        <!-- 轮播图片选择项 -->
         <el-form-item
           label="轮播图片"
           prop="imgUrl"
         >
           <pic-upload v-model="dataForm.imgUrl" />
         </el-form-item>
+        <!-- 顺序输入框 -->
         <el-form-item
           label="顺序"
           prop="seq"
@@ -26,32 +29,27 @@
         >
           <el-input v-model="dataForm.seq" />
         </el-form-item>
+        <!-- 状态选择 -->
         <el-form-item
           label="状态"
           prop="status"
         >
           <el-radio-group v-model="dataForm.status">
-            <el-radio :label="0">
-              禁用
-            </el-radio>
-            <el-radio :label="1">
-              正常
-            </el-radio>
+            <el-radio :label="0">禁用</el-radio>
+            <el-radio :label="1">正常</el-radio>
           </el-radio-group>
         </el-form-item>
+        <!-- 类型选择 -->
         <el-form-item label="类型">
           <el-radio-group
             v-model="dataForm.type"
             @change="deleteRelation"
           >
-            <el-radio :label="-1">
-              无
-            </el-radio>
-            <el-radio :label="0">
-              商品
-            </el-radio>
+            <el-radio :label="-1">无</el-radio>
+            <el-radio :label="0">商品</el-radio>
           </el-radio-group>
-          <div v-if="dataForm.relation!=null">
+          <!-- 显示关联的商品卡片 -->
+          <div v-if="dataForm.relation != null">
             <el-card
               :body-style="{ padding: '0px' }"
               style="height: 160px;width: 120px"
@@ -73,15 +71,12 @@
               </div>
             </el-card>
           </div>
-          <div v-if="dataForm.relation==null">
-            <el-button
-              v-if=" dataForm.type == 0"
-              @click="addProd"
-            >
-              选择商品
-            </el-button>
+          <!-- 如果没有关联商品，则显示选择商品按钮 -->
+          <div v-if="dataForm.relation == null && dataForm.type === 0">
+            <el-button @click="addProd">选择商品</el-button>
           </div>
         </el-form-item>
+        <!-- 提交按钮 -->
         <el-form-item>
           <el-button
             type="primary"
@@ -92,7 +87,7 @@
         </el-form-item>
       </el-form>
     </el-dialog>
-    <!-- 商品选择弹窗-->
+    <!-- 商品选择弹窗 -->
     <prods-select
       v-if="prodsSelectVisible"
       ref="prodsSelectRef"
@@ -105,7 +100,13 @@
 <script setup>
 import { ElMessage } from 'element-plus'
 import { Debounce } from '@/utils/debounce'
+import { ref, reactive, nextTick, defineExpose, defineEmits } from 'vue'
+import http from '@/api/http'
+
+// 定义事件发射器
 const emit = defineEmits(['refreshDataList'])
+
+// 表单数据对象
 const dataForm = ref({
   status: 1,
   des: '',
@@ -115,12 +116,15 @@ const dataForm = ref({
   type: -1,
   relation: null
 })
+
+// 表单验证规则
 const dataRule = reactive({
   imgUrl: [
     { required: true, message: '轮播图片不能为空', trigger: 'blur' }
   ]
 })
-// 关联数据
+
+// 关联商品数据
 const card = ref({
   id: 0,
   pic: '',
@@ -131,23 +135,32 @@ const card = ref({
     activity: []
   }
 })
+
+// 分页参数
 const page = reactive({
   total: 0, // 总页数
   currentPage: 1, // 当前页数
   pageSize: 10 // 每页显示多少条
 })
+
+// 控制商品选择弹窗可见性
 const prodsSelectVisible = ref(false)
+
+// 控制对话框可见性
 const visible = ref(false)
+
+// 表单引用
 const dataFormRef = ref(null)
+
 /**
- * 获取分类数据
- * @param id
+ * 初始化数据
+ * @param id - 要编辑的数据ID，若为新增则传入null或不传
  */
 const init = (id) => {
   visible.value = true
   dataForm.value.imgId = id || 0
   if (dataForm.value.imgId) {
-    // 获取产品数据
+    // 获取已有轮播图数据
     http({
       url: http.adornUrl(`/admin/indexImg/info/${dataForm.value.imgId}`),
       method: 'get'
@@ -161,16 +174,19 @@ const init = (id) => {
         }
       })
   } else {
+    // 新增时重置表单
     nextTick(() => {
       dataFormRef.value?.resetFields()
       dataForm.value.imgUrl = ''
     })
   }
 }
+
+// 将init方法暴露给父组件调用
 defineExpose({ init })
 
 /**
- * 表单提交
+ * 表单提交，使用防抖功能防止快速多次点击
  */
 const onSubmit = Debounce(() => {
   dataFormRef.value?.validate((valid) => {
@@ -196,16 +212,19 @@ const onSubmit = Debounce(() => {
       })
   })
 })
+
 /**
- * 删除关联数据
+ * 删除关联商品
  */
 const deleteRelation = () => {
   dataForm.value.relation = null
 }
 
+// 商品选择弹窗引用
 const prodsSelectRef = ref(null)
+
 /**
- * 打开选择商品
+ * 打开选择商品窗口
  */
 const addProd = () => {
   prodsSelectVisible.value = true
@@ -213,8 +232,10 @@ const addProd = () => {
     prodsSelectRef.value?.init(card.value.realData.prod)
   })
 }
+
 /**
- * 添加指定商品
+ * 添加指定商品到轮播图关联
+ * @param prods - 已选中的商品列表
  */
 const selectCouponProds = (prods) => {
   card.value.realData.prods = prods
@@ -231,7 +252,7 @@ const selectCouponProds = (prods) => {
 </script>
 
 <style lang="scss" scoped>
-//card样式
+// 样式定义，针对商品卡片底部内容进行样式调整
 .card-prod-bottom {
   position: relative;
   text-align: left;
diff --git a/front-end/mall4v/src/views/modules/admin/indexImg/index.vue b/front-end/mall4v/src/views/modules/admin/indexImg/index.vue
index 57177da..f32145a 100644
--- a/front-end/mall4v/src/views/modules/admin/indexImg/index.vue
+++ b/front-end/mall4v/src/views/modules/admin/indexImg/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="mod-prod">
+    <!-- Avue-Crud 组件用于创建数据表格 -->
     <avue-crud
       ref="crudRef"
       :page="page"
@@ -10,7 +11,9 @@
       @selection-change="selectionChange"
       @on-load="getDataList"
     >
+      <!-- 自定义左侧菜单按钮 -->
       <template #menu-left>
+        <!-- 新增按钮，仅当用户有权限时显示 -->
         <el-button
           v-if="isAuth('admin:indexImg:save')"
           type="primary"
@@ -20,6 +23,7 @@
           新增
         </el-button>
 
+        <!-- 批量删除按钮，仅当用户有权限且选中至少一项时启用 -->
         <el-button
           v-if="isAuth('admin:indexImg:delete')"
           type="danger"
@@ -30,7 +34,9 @@
         </el-button>
       </template>
 
+      <!-- 自定义图片展示列 -->
       <template #imgUrl="scope">
+        <!-- 如果存在图片链接则显示图片，否则显示默认图片 -->
         <img
           v-if="scope.row.imgUrl"
           alt=""
@@ -46,7 +52,10 @@
           height="100"
         >
       </template>
+
+      <!-- 自定义操作菜单 -->
       <template #menu="scope">
+        <!-- 修改按钮，仅当用户有权限时显示 -->
         <el-button
           v-if="isAuth('admin:indexImg:update')"
           type="primary"
@@ -55,6 +64,7 @@
         >
           修改
         </el-button>
+        <!-- 删除按钮，仅当用户有权限时显示 -->
         <el-button
           v-if="isAuth('admin:indexImg:delete')"
           type="danger"
@@ -66,7 +76,7 @@
       </template>
     </avue-crud>
 
-    <!-- 弹窗, 新增 / 修改 -->
+    <!-- 弹窗组件，用于新增或修改轮播图信息 -->
     <add-or-update
       v-if="addOrUpdateVisible"
       ref="addOrUpdateRef"
@@ -80,18 +90,33 @@ import { isAuth } from '@/utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AddOrUpdate from './add-or-update.vue'
 import { tableOption } from '@/crud/admin/indexImg.js'
+import { ref, reactive, nextTick } from 'vue'
+import http from '@/api/http'
 
+// 数据列表引用
 const dataList = ref([])
+
+// 表格加载状态
 const dataListLoading = ref(false)
+
+// 当前选择的数据项
 const dataListSelections = ref([])
+
+// 资源URL
 const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
+
+// 分页参数
 const page = reactive({
   total: 0, // 总页数
   currentPage: 1, // 当前页数
-  pageSize: 10 // 每页显示多少
+  pageSize: 10 // 每页显示多少条
 })
+
 /**
  * 获取数据列表
+ * @param {Object} pageParam - 分页参数对象
+ * @param {Object} params - 查询条件
+ * @param {Function} done - 完成回调函数
  */
 const getDataList = (pageParam, params, done) => {
   dataListLoading.value = true
@@ -119,11 +144,15 @@ const getDataList = (pageParam, params, done) => {
     })
 }
 
+// 控制弹窗可见性
 const addOrUpdateVisible = ref(false)
+
+// 弹窗组件引用
 const addOrUpdateRef = ref(null)
+
 /**
- * 新增 / 修改
- * @param id
+ * 新增或修改操作
+ * @param {Number} id - 要编辑的数据ID，若为新增则传入null或不传
  */
 const onAddOrUpdate = (id) => {
   addOrUpdateVisible.value = true
@@ -131,14 +160,13 @@ const onAddOrUpdate = (id) => {
     addOrUpdateRef.value?.init(id)
   })
 }
+
 /**
- * 删除
- * @param id
+ * 删除操作，支持单个删除和批量删除
+ * @param {Number} id - 单个删除时传入的数据ID
  */
 const onDelete = (id) => {
-  const ids = id ? [id] : dataListSelections.value?.map(item => {
-    return item.imgId
-  })
+  const ids = id ? [id] : dataListSelections.value?.map(item => item.imgId)
   ElMessageBox.confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
@@ -162,14 +190,19 @@ const onDelete = (id) => {
         })
     })
 }
+
 /**
- * 条件查询
+ * 条件查询事件处理
+ * @param {Object} params - 查询条件
+ * @param {Function} done - 完成回调函数
  */
 const onSearch = (params, done) => {
   getDataList(page, params, done)
 }
+
 /**
- * 多选变化
+ * 多选变化事件处理
+ * @param {Array} val - 当前选中的数据项数组
  */
 const selectionChange = (val) => {
   dataListSelections.value = val
diff --git a/front-end/mall4v/src/views/modules/order/order/components/consignment-info.vue b/front-end/mall4v/src/views/modules/order/order/components/consignment-info.vue
index 1b3767f..d89e8fb 100644
--- a/front-end/mall4v/src/views/modules/order/order/components/consignment-info.vue
+++ b/front-end/mall4v/src/views/modules/order/order/components/consignment-info.vue
@@ -1,5 +1,5 @@
 <template>
-  <!-- 发货信息，用于导出代发货订单的excel交给快递公司 -->
+  <!-- 发货信息对话框，用于导出待发货订单的Excel交给快递公司 -->
   <el-dialog
     v-model="visible"
     :modal="false"
@@ -7,6 +7,7 @@
     :close-on-click-modal="false"
     width="38%"
   >
+    <!-- 表单组件，包含发件人姓名、手机号和地址的输入项 -->
     <el-form
       ref="dataFormRef"
       :model="dataForm"
@@ -14,6 +15,7 @@
       label-width="120px"
       @keyup.enter="onSubmit()"
     >
+      <!-- 发件人姓名输入项 -->
       <el-form-item
         label="发件人姓名"
         prop="consignmentName"
@@ -21,9 +23,11 @@
         <el-input
           v-model="dataForm.consignmentName"
           controls-position="right"
-          label="发件人姓名"
+          placeholder="请输入发件人姓名"
         />
       </el-form-item>
+
+      <!-- 发货人手机号输入项 -->
       <el-form-item
         label="发货人手机号"
         prop="consignmentMobile"
@@ -31,9 +35,11 @@
         <el-input
           v-model="dataForm.consignmentMobile"
           controls-position="right"
-          label="发货人手机号"
+          placeholder="请输入发货人手机号"
         />
       </el-form-item>
+
+      <!-- 发货地址输入项 -->
       <el-form-item
         label="发货地址"
         prop="consignmentAddr"
@@ -41,60 +47,74 @@
         <el-input
           v-model="dataForm.consignmentAddr"
           controls-position="right"
-          label="发货地址"
+          placeholder="请输入发货地址"
         />
       </el-form-item>
     </el-form>
+
+    <!-- 对话框底部按钮组 -->
     <template #footer>
       <span class="dialog-footer">
-        <el-button
-          @click="visible = false"
-        >取消</el-button>
-        <el-button
-          type="primary"
-          @click="onSubmit()"
-        >确定</el-button>
+        <!-- 取消按钮，关闭对话框 -->
+        <el-button @click="visible = false">取消</el-button>
+        <!-- 确定按钮，提交表单 -->
+        <el-button type="primary" @click="onSubmit()">确定</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
+
 <script setup>
+import { ref, reactive, nextTick, defineEmits, defineExpose } from 'vue'
+
+// 定义事件发射器，用于向父组件传递数据
 const emit = defineEmits(['inputCallback'])
+
+// 控制对话框可见性
 const visible = ref(false)
+
+// 表单数据对象，存储发件人信息
 const dataForm = reactive({
-  consignmentName: '',
-  consignmentMobile: '',
-  consignmentAddr: ''
+  consignmentName: '', // 发件人姓名
+  consignmentMobile: '', // 发货人手机号
+  consignmentAddr: '' // 发货地址
 })
+
+// 表单验证规则，确保所有必填字段不为空
 const dataRule = {
   consignmentName: [
-    { required: true, message: '不能为空', trigger: 'blur' }
+    { required: true, message: '发件人姓名不能为空', trigger: 'blur' }
   ],
   consignmentMobile: [
-    { required: true, message: '不能为空', trigger: 'blur' }
+    { required: true, message: '发货人手机号不能为空', trigger: 'blur' }
   ],
   consignmentAddr: [
-    { required: true, message: '不能为空', trigger: 'blur' }
+    { required: true, message: '发货地址不能为空', trigger: 'blur' }
   ]
 }
 
+// 表单引用，用于调用表单方法（如重置）
 const dataFormRef = ref(null)
+
+/**
+ * 初始化方法，打开对话框并重置表单
+ */
 const init = () => {
   visible.value = true
   nextTick(() => {
     dataFormRef.value?.resetFields()
   })
 }
-defineExpose({ init })
+defineExpose({ init }) // 将init方法暴露给父组件调用
 
 /**
- * 表单提交
+ * 表单提交方法
  */
 const onSubmit = () => {
   dataFormRef.value?.validate((valid) => {
     if (valid) {
-      visible.value = false
-      emit('inputCallback', dataForm)
+      visible.value = false // 关闭对话框
+      emit('inputCallback', dataForm) // 触发父组件的回调函数，并传递表单数据
     }
   })
 }
diff --git a/front-end/mall4v/src/views/modules/order/order/components/order-devy.vue b/front-end/mall4v/src/views/modules/order/order/components/order-devy.vue
index ec4be95..8a0d788 100644
--- a/front-end/mall4v/src/views/modules/order/order/components/order-devy.vue
+++ b/front-end/mall4v/src/views/modules/order/order/components/order-devy.vue
@@ -1,10 +1,12 @@
 <template>
+  <!-- 发货地址选择对话框 -->
   <el-dialog
     v-model="visible"
     :modal="false"
     title="选择发货地址"
     :close-on-click-modal="false"
   >
+    <!-- 表单组件，用于选择快递公司和填写快递单号 -->
     <el-form
       ref="dataFormRef"
       :model="dataForm"
@@ -12,11 +14,13 @@
       label-width="80px"
       @keyup.enter="onSubmit()"
     >
+      <!-- 快递公司选择项 -->
       <el-form-item label="快递公司">
         <el-select
           v-model="dataForm.dvyId"
           placeholder="请选择"
         >
+          <!-- 动态生成选项列表，从 dataForm.dvyNames 中获取 -->
           <el-option
             v-for="item in dataForm.dvyNames"
             :key="item.dvyId"
@@ -25,6 +29,8 @@
           />
         </el-select>
       </el-form-item>
+
+      <!-- 快递单号输入项 -->
       <el-form-item
         label="快递单号"
         prop="dvyFlowId"
@@ -33,26 +39,37 @@
           v-model="dataForm.dvyFlowId"
           controls-position="right"
           :min="0"
-          label="快递单号"
+          placeholder="请输入快递单号"
         />
       </el-form-item>
     </el-form>
+
+    <!-- 对话框底部按钮组 -->
     <template #footer>
       <span class="dialog-footer">
+        <!-- 取消按钮，关闭对话框 -->
         <el-button @click="visible = false">取消</el-button>
-        <el-button
-          type="primary"
-          @click="onSubmit()"
-        >确定</el-button>
+        <!-- 确定按钮，提交表单 -->
+        <el-button type="primary" @click="onSubmit()">确定</el-button>
       </span>
     </template>
   </el-dialog>
 </template>
+
 <script setup>
 import { ElMessage } from 'element-plus'
+import { ref, reactive, defineEmits, defineExpose } from 'vue'
+import http from '@/api/http' // 假设这是你的HTTP请求库
+
+// 定义事件发射器，用于向父组件传递刷新数据列表的信号
 const emit = defineEmits(['refreshDataList'])
 
-// eslint-disable-next-line no-unused-vars
+/**
+ * 自定义验证规则，确保快递单号不为空且已正确填写
+ * @param {Object} rule - 验证规则对象
+ * @param {String} value - 输入值
+ * @param {Function} callback - 回调函数，用于通知验证结果
+ */
 const validDvyFlowId = (rule, value, callback) => {
   if (!value.trim()) {
     callback(new Error('不能为空'))
@@ -60,6 +77,8 @@ const validDvyFlowId = (rule, value, callback) => {
     callback()
   }
 }
+
+// 表单验证规则，确保所有必填字段不为空，并使用自定义验证器验证快递单号
 const dataRule = {
   dvyFlowId: [
     { required: true, message: '不能为空', trigger: 'blur' },
@@ -67,19 +86,30 @@ const dataRule = {
   ]
 }
 
+// 控制对话框可见性
 const visible = ref(false)
+
+// 表单数据对象，存储快递公司ID、快递单号等信息
 const dataForm = reactive({
-  dvyId: '',
-  dvyFlowId: 0,
-  dvyNames: [],
-  orderNumber: 0
+  dvyId: '', // 快递公司ID
+  dvyFlowId: '', // 快递单号
+  dvyNames: [], // 快递公司列表
+  orderNumber: '' // 订单编号
 })
 
+/**
+ * 初始化方法，打开对话框并加载快递公司列表
+ * @param {String} orderNumber - 订单编号
+ * @param {String} [dvyId] - 默认快递公司ID（可选）
+ * @param {String} [dvyFlowId] - 默认快递单号（可选）
+ */
 const init = (orderNumber, dvyId, dvyFlowId) => {
   visible.value = true
   dataForm.orderNumber = orderNumber || ''
   dataForm.dvyId = dvyId || ''
   dataForm.dvyFlowId = dvyFlowId || ''
+
+  // 请求快递公司列表并填充到 dataForm.dvyNames
   http({
     url: http.adornUrl('/admin/delivery/list'),
     method: 'get',
@@ -88,15 +118,18 @@ const init = (orderNumber, dvyId, dvyFlowId) => {
     dataForm.dvyNames = data
   })
 }
-defineExpose({ init })
+defineExpose({ init }) // 将init方法暴露给父组件调用
 
+// 表单引用，用于调用表单方法（如重置或验证）
 const dataFormRef = ref(null)
+
 /**
- * 表单提交
+ * 表单提交方法，验证表单并提交数据
  */
 const onSubmit = () => {
   dataFormRef.value?.validate((valid) => {
     if (valid) {
+      // 提交发货信息
       http({
         url: http.adornUrl('/order/order/delivery'),
         method: 'put',
@@ -112,13 +145,12 @@ const onSubmit = () => {
             type: 'success',
             duration: 1500,
             onClose: () => {
-              visible.value = false
-              emit('refreshDataList')
+              visible.value = false // 关闭对话框
+              emit('refreshDataList') // 触发父组件的回调函数，刷新数据列表
             }
           })
         })
     }
   })
 }
-
 </script>
diff --git a/front-end/mall4v/src/views/modules/order/order/components/order-info.vue b/front-end/mall4v/src/views/modules/order/order/components/order-info.vue
index 0dfe97a..89e2a6e 100644
--- a/front-end/mall4v/src/views/modules/order/order/components/order-info.vue
+++ b/front-end/mall4v/src/views/modules/order/order/components/order-info.vue
@@ -1,10 +1,12 @@
 <template>
+  <!-- el-dialog组件用于创建一个对话框，用于展示订单相关信息 -->
   <el-dialog
     v-model="visible"
-    :title="!dataForm.orderNumber ? '新增' : '查看'"
+    :title="!dataForm.orderNumber? '新增' : '查看'"
     :close-on-click-modal="false"
     width="80%"
   >
+    <!-- el-form组件用于创建表单，这里用于承载订单信息的展示和相关操作表单 -->
     <el-form
       ref="dataFormRef"
       :model="dataForm"
@@ -15,30 +17,36 @@
         <div class="content">
           <div class="order-number">
             <div class="num-cont">
+              <!-- el-form-item用于在表单中定义一个表单项，这里展示订单编号 -->
               <el-form-item label="订单编号:">
                 <span class="text">{{ dataForm.orderNumber }}</span>
               </el-form-item>
               <el-form-item>
+                <!-- el-steps组件用于展示步骤条，展示订单的不同流程状态 -->
                 <el-steps
                   :active="stepsStatus"
                   align-center
-                  :process-status="dataForm.status == 6 ? 'error':'wait'"
+                  :process-status="dataForm.status == 6? 'error':'wait'"
                 >
+                  <!-- el-step定义步骤条中的每一个步骤，这里展示“提交订单”步骤及其时间描述 -->
                   <el-step
                     title="提交订单"
                     :description="dataForm.orderTime"
                   />
+                  <!-- 展示“买家已付款”步骤及其时间描述 -->
                   <el-step
                     title="买家已付款"
                     :description="dataForm.payTime"
                   />
+                  <!-- 根据订单类型判断是否展示“卖家已发货”步骤及其时间描述 -->
                   <el-step
-                    v-if="dataForm.orderType !== 1"
+                    v-if="dataForm.orderType!== 1"
                     title="卖家已发货"
                     :description="dataForm.dvyTime"
                   />
+                  <!-- 根据订单类型判断是否展示“买家已收货”步骤及其时间描述 -->
                   <el-step
-                    v-if="dataForm.orderType !== 1"
+                    v-if="dataForm.orderType!== 1"
                     title="买家已收货"
                     :description="dataForm.finallyTime"
                   />
@@ -49,6 +57,7 @@
           <div class="order-state">
             <div class="state-cont">
               <div class="state-title">
+                <!-- 展示订单状态的el-form-item，通过不同条件判断显示不同状态的标签 -->
                 <el-form-item label="订单状态:">
                   <template #default>
                     <el-tag
@@ -58,19 +67,19 @@
                       待付款
                     </el-tag>
                     <el-tag
-                      v-if="dataForm.status === 2 && dataForm.orderType !== 1"
+                      v-if="dataForm.status === 2 && dataForm.orderType!== 1"
                       type="warning"
                     >
                       待发货
                     </el-tag>
                     <el-tag
-                      v-if="dataForm.status === 3 && dataForm.orderType !== 1"
+                      v-if="dataForm.status === 3 && dataForm.orderType!== 1"
                       type="warning"
                     >
                       待收货
                     </el-tag>
                     <el-tag
-                      v-if="dataForm.status === 4 && dataForm.orderType !== 1"
+                      v-if="dataForm.status === 4 && dataForm.orderType!== 1"
                       type="warning"
                     >
                       待评价
@@ -91,8 +100,9 @@
                 </el-form-item>
                 <el-form-item>
                   <el-row>
+                    <!-- 根据订单状态和类型判断是否显示“发货”按钮，点击可触发changeOrder方法 -->
                     <el-button
-                      v-if="dataForm.status === 2 && dataForm.orderType !== 1"
+                      v-if="dataForm.status === 2 && dataForm.orderType!== 1"
                       type="primary"
                       plain
                       @click="changeOrder(dataForm.orderNumber)"
@@ -118,6 +128,7 @@
                         alt=""
                       >
                       <div class="text-width">
+                        <!-- 展示收货人相关信息的el-form-item -->
                         <el-form-item label="收货人:">
                           <span>{{ dataForm.userAddrOrder.receiver }}</span>
                         </el-form-item>
@@ -169,6 +180,7 @@
                 </div>
               </div>
               <div class="item-list">
+                <!-- el-table组件用于展示商品列表相关信息，如商品名称、价格、数量、总价等 -->
                 <el-table
                   :data="dataForm.orderItems"
                   border
@@ -220,6 +232,7 @@
                 </el-table>
               </div>
               <div class="item-info">
+                <!-- 展示商品总价的el-form-item -->
                 <el-form-item label="商品总价:">
                   <span class="text">￥{{ dataForm.total }}</span>
                 </el-form-item>
@@ -240,6 +253,7 @@
               <span>订单日志</span>
             </div>
             <div class="log-cont">
+              <!-- 根据不同的订单时间相关属性，展示对应的订单日志信息 -->
               <el-form-item
                 v-if="dataForm.orderTime"
                 label-width="10px"
@@ -282,7 +296,7 @@
       </div>
     </el-form>
 
-    <!-- 弹窗, 新增 / 修改 -->
+    <!-- 弹窗组件，用于新增或修改相关操作，当devyVisible为真时显示，可通过@refresh-data-list监听事件刷新数据列表 -->
     <devy-add
       v-if="devyVisible"
       ref="devyAddRef"
@@ -293,55 +307,74 @@
 
 <script setup>
 import DevyAdd from './order-devy.vue'
+import { ref, computed, watch, nextTick } from 'vue'
+import http from '@/api/http' // 假设这是你的HTTP请求库
+import { ElMessage } from 'element-plus'
+
+// 获取环境变量中的资源URL
 const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
+
+// 定义表单数据对象，存储订单信息
 const dataForm = ref({
-  orderId: 0,
-  orderNumber: '',
-  remarks: '',
-  total: 0,
-  actualTotal: 0,
-  dvyType: '',
-  status: 1,
-  addrOrderId: 0,
-  nickName: '',
-  orderItems: [],
-  orderTime: '',
-  updateTime: '',
-  payTime: '',
-  dvyTime: '',
-  finallyTime: '',
-  cancelTime: '',
-  userAddrOrder: {}
+  orderId: 0, // 订单ID
+  orderNumber: '', // 订单编号
+  remarks: '', // 备注
+  total: 0, // 总金额
+  actualTotal: 0, // 实际支付金额
+  dvyType: '', // 发货类型
+  status: 1, // 订单状态
+  addrOrderId: 0, // 地址关联的订单ID
+  nickName: '', // 用户昵称
+  orderItems: [], // 订单项列表
+  orderTime: '', // 下单时间
+  updateTime: '', // 更新时间
+  payTime: '', // 支付时间
+  dvyTime: '', // 发货时间
+  finallyTime: '', // 最终完成时间
+  cancelTime: '', // 取消时间
+  userAddrOrder: {} // 用户地址信息
 })
 
+// 计算属性，根据订单时间字段动态计算步骤条的状态
 const stepsStatus = computed(() => {
   if (dataForm.value.finallyTime) {
-    return 4
+    return 4 // 订单已完成
   }
   if (dataForm.value.dvyTime) {
-    return 3
+    return 3 // 已发货
   }
   if (dataForm.value.payTime) {
-    return 2
+    return 2 // 已支付
   }
   if (dataForm.value.orderTime) {
-    return 1
+    return 1 // 已下单
   }
-  return ''
+  return '' // 默认状态
 })
 
+// 控制对话框可见性的布尔值
 const visible = ref(false)
+
+// 控制发货对话框可见性的布尔值
 const devyVisible = ref(false)
+
+// 监听 `visible` 的变化，当关闭主对话框时也关闭发货对话框
 watch(
   () => visible.value,
-  () => {
-    if (!visible.value) {
+  (newValue) => {
+    if (!newValue) {
       devyVisible.value = false
     }
   }
 )
 
+// 表单引用，用于调用表单方法（如重置）
 const dataFormRef = ref(null)
+
+/**
+ * 初始化方法，打开对话框并加载订单信息
+ * @param {String|Number} orderNumber - 订单编号
+ */
 const init = (orderNumber) => {
   dataForm.value.orderNumber = orderNumber || 0
   visible.value = true
@@ -349,34 +382,37 @@ const init = (orderNumber) => {
     dataFormRef.value?.resetFields()
   })
   if (dataForm.value.orderNumber) {
-    // 修改
+    // 如果有订单编号，则获取订单详情
     http({
       url: http.adornUrl(`/order/order/orderInfo/${dataForm.value.orderNumber}`),
       method: 'get',
       params: http.adornParams()
+    }).then(({ data }) => {
+      dataForm.value = data
     })
-      .then(({ data }) => {
-        dataForm.value = data
-      })
   }
 }
-defineExpose({ init })
+defineExpose({ init }) // 将init方法暴露给父组件调用
 
+/**
+ * 获取订单信息的方法
+ */
 const getDataList = () => {
   http({
     url: http.adornUrl(`/order/order/orderInfo/${dataForm.value.orderNumber}`),
     method: 'get',
     params: http.adornParams()
+  }).then(({ data }) => {
+    dataForm.value = data
   })
-    .then(({ data }) => {
-      dataForm.value = data
-    })
 }
 
+// 发货组件引用
 const devyAddRef = ref(null)
+
 /**
- * 发货
- * @param orderNumber
+ * 发货操作，打开发货对话框并初始化数据
+ * @param {String|Number} orderNumber - 订单编号
  */
 const changeOrder = (orderNumber) => {
   devyVisible.value = true
@@ -387,133 +423,172 @@ const changeOrder = (orderNumber) => {
 </script>
 
 <style scoped lang="scss">
+// 定义主容器样式
 .main {
-  height: 100%;
-  width: 100%;
-  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
-  color: #495060;
+  height: 100%; // 设置高度为100%，确保占满父容器
+  width: 100%; // 设置宽度为100%，确保占满父容器
+  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; // 设置字体及备选字体
+  color: #495060; // 设置文本颜色
 }
+
+// 定义内容区域样式
 .content {
-  margin: 0 20px;
+  margin: 0 20px; // 设置左右内边距为20px
+
+  // 订单状态部分样式
   .order-state {
-    position: relative;
-    margin-top: 50px;
-    border-bottom: 1px solid #e9eaec;
+    position: relative; // 设置相对定位，允许内部元素绝对定位
+    margin-top: 50px; // 设置顶部外边距为50px
+    border-bottom: 1px solid #e9eaec; // 设置底部边框
   }
 }
+
+// 订单编号部分样式
 .order-number {
   .text {
-    font-size: 14px;
-    color: #8a8a8a;
+    font-size: 14px; // 设置字体大小
+    color: #8a8a8a; // 设置文本颜色
   }
 }
+
+// 订单状态部分样式（重复定义，应合并）
 .order-state {
+  // 状态标题样式
   .state-title {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    width: 100%; // 设置宽度为100%
+    display: flex; // 使用弹性布局
+    justify-content: space-between; // 子元素两端对齐
+    align-items: center; // 垂直居中对齐
   }
+
+  // 订单信息样式
   .order-info {
-    width: 100%;
-    border-top: 1px solid #e9eaec;
-    margin: 50px 0;
-    display: flex;
+    width: 100%; // 设置宽度为100%
+    border-top: 1px solid #e9eaec; // 设置顶部边框
+    margin: 50px 0; // 设置上下外边距为50px
+    display: flex; // 使用弹性布局
   }
+
+  // 单个商品信息样式
   .item-info {
-    padding-left: 80%;
-    margin: 25px 0;
+    padding-left: 80%; // 设置左边内边距为80%（可能需要调整以适应布局需求）
+    margin: 25px 0; // 设置上下外边距为25px
   }
 }
+
+// 订单信息部分样式
 .order-info {
   img {
-    width: 18px !important;
-    height: 18px !important;
-    margin-right: 15px;
+    width: 18px !important; // 设置图片宽度为18px并强制应用
+    height: 18px !important; // 设置图片高度为18px并强制应用
+    margin-right: 15px; // 设置右边外边距为15px
   }
+
+  // 订单详情标题样式
   .detail-title {
-    height: 50px;
-    line-height: 50px;
-    display: flex;
-    align-items: center;
+    height: 50px; // 设置高度为50px
+    line-height: 50px; // 设置行高为50px
+    display: flex; // 使用弹性布局
+    align-items: center; // 垂直居中对齐
   }
+
+  // 订单详情部分样式
   .order-details {
-    width: 50%;
-    border-right: 1px solid #e9eaec;
+    width: 50%; // 设置宽度为50%
+    border-right: 1px solid #e9eaec; // 设置右侧边框
   }
+
+  // 详情内容样式
   .detail-cont {
-    position: relative;
-    border-top: 1px dashed #e9eaec;
-    margin: 15px 20px 0 0;
+    position: relative; // 设置相对定位，允许内部元素绝对定位
+    border-top: 1px dashed #e9eaec; // 设置顶部虚线边框
+    margin: 15px 20px 0 0; // 设置上右外边距
   }
+
+  // 购买者信息部分样式
   .buyers {
-    width: 50%;
-    margin-left: 20px;
+    width: 50%; // 设置宽度为50%
+    margin-left: 20px; // 设置左侧外边距为20px
   }
 }
+
+// 详情内容样式（细节）
 .detail-cont {
   .detail01 {
-    display: flex;
-    height: 100%;
-    line-height: 25px;
-    margin-top: 15px;
-  }
-}
-.detail01 {
-  .text-width {
-    width: 100%;
+    display: flex; // 使用弹性布局
+    height: 100%; // 设置高度为100%
+    line-height: 25px; // 设置行高为25px
+    margin-top: 15px; // 设置顶部外边距为15px
   }
 }
+
+// 文本宽度设置（重复定义，应合并）
+.detail01,
 .detail02 {
   .text-width {
-    width: 100%;
+    width: 100%; // 设置宽度为100%
   }
 }
+
+// 购买者信息部分样式（细节）
 .buyers {
   .buyers-info {
-    border-top: 1px dashed #e9eaec;
-    margin-top: 15px;
-    position: relative;
+    border-top: 1px dashed #e9eaec; // 设置顶部虚线边框
+    margin-top: 15px; // 设置顶部外边距为15px
+    position: relative; // 设置相对定位，允许内部元素绝对定位
   }
+
   .detail02 {
-    display: flex;
-    height: 100%;
-    line-height: 25px;
-    margin-top: 15px;
+    display: flex; // 使用弹性布局
+    height: 100%; // 设置高度为100%
+    line-height: 25px; // 设置行高为25px
+    margin-top: 15px; // 设置顶部外边距为15px
   }
 }
+
+// 单个商品信息样式（细节）
 .item-info {
   span {
-    margin-bottom: 15px;
-    line-height: 30px;
+    margin-bottom: 15px; // 设置底部外边距为15px
+    line-height: 30px; // 设置行高为30px
   }
+
   .text {
-    position: absolute;
-    right: 0;
+    position: absolute; // 设置绝对定位
+    right: 0; // 设置靠右对齐
   }
 }
+
+// 订单日志部分样式
 .order-log {
   .log-title {
-    height: 50px;
-    width: 100%;
-    line-height: 50px;
-    font-weight: bold;
+    height: 50px; // 设置高度为50px
+    width: 100%; // 设置宽度为100%
+    line-height: 50px; // 设置行高为50px
+    font-weight: bold; // 设置字体加粗
   }
+
   .log-cont {
-    color: #4395ff;
+    color: #4395ff; // 设置文本颜色为蓝色
   }
 }
+
+// 商品列表部分样式
 .item-list {
   .prod-con {
-    display: flex;
+    display: flex; // 使用弹性布局
+
+    // 商品图片样式
     .prod-img {
-      width: 100px;
-      height: 100px;
-      margin-right: 8px;
+      width: 100px; // 设置宽度为100px
+      height: 100px; // 设置高度为100px
+      margin-right: 8px; // 设置右边外边距为8px
     }
   }
 }
+
+// 深度选择器，用于覆盖第三方组件样式
 :deep(.el-steps--horizontal) {
-  flex: 25% 1 1;
+  flex: 25% 1 1; // 设置flex属性，控制步骤条的宽度
 }
 </style>
diff --git a/front-end/mall4v/src/views/modules/order/order/index.vue b/front-end/mall4v/src/views/modules/order/order/index.vue
index 49889d7..05c3f4c 100644
--- a/front-end/mall4v/src/views/modules/order/order/index.vue
+++ b/front-end/mall4v/src/views/modules/order/order/index.vue
@@ -1,17 +1,14 @@
 <template>
+  <!-- 定义一个订单模块的容器 -->
   <div class="mod-order-order">
-    <el-form
-      :inline="true"
-      :model="dataForm"
-      @keyup.enter="getDataList(page)"
-    >
+    <!-- 表单区域，用于输入筛选条件 -->
+    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList(page)">
+      <!-- 输入框：订单编号 -->
       <el-form-item label="订单编号:">
-        <el-input
-          v-model="dataForm.orderNumber"
-          placeholder="订单编号"
-          clearable
-        />
+        <el-input v-model="dataForm.orderNumber" placeholder="订单编号" clearable />
       </el-form-item>
+
+      <!-- 时间选择器：下单时间范围 -->
       <el-form-item label="下单时间:">
         <el-date-picker
           v-model="dateRange"
@@ -22,95 +19,59 @@
           end-placeholder="结束日期"
         />
       </el-form-item>
+
+      <!-- 下拉菜单：订单状态 -->
       <el-form-item label="订单状态:">
-        <el-select
-          v-model="dataForm.status"
-          clearable
-          placeholder="请选择订单状态"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          />
+        <el-select v-model="dataForm.status" clearable placeholder="请选择订单状态">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item>
+
+      <!-- 按钮组：查询、导出、清空 -->
       <el-form-item>
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          @click="getDataList()"
-        >
-          查询
-        </el-button>
-        <el-button
-          v-if="isAuth('order:order:waitingConsignmentExcel')"
-          type="primary"
-          @click="showConsignmentInfo()"
-        >
+        <el-button type="primary" icon="el-icon-search" @click="getDataList()">查询</el-button>
+        <el-button v-if="isAuth('order:order:waitingConsignmentExcel')" type="primary" @click="showConsignmentInfo()">
           导出待发货订单
         </el-button>
-        <el-button
-          v-if="isAuth('order:order:soldExcel')"
-          type="primary"
-          @click="getSoldExcel()"
-        >
+        <el-button v-if="isAuth('order:order:soldExcel')" type="primary" @click="getSoldExcel()">
           导出销售记录
         </el-button>
-        <el-button @click="clearDatas()">
-          清空
-        </el-button>
+        <el-button @click="clearDatas()">清空</el-button>
       </el-form-item>
     </el-form>
+
+    <!-- 主要内容区 -->
     <div class="main">
       <div class="content">
+        <!-- 标题栏，显示商品信息头部 -->
         <div class="tit">
           <el-row style="width:100%">
-            <el-col :span="10">
-              <span class="item product">商品</span>
-            </el-col>
-            <el-col :span="3">
-              <span class="item">成交单价/购买数量</span>
-            </el-col>
-            <el-col :span="3">
-              <span class="item">实付金额</span>
-            </el-col>
-            <el-col :span="3">
-              <span class="item">支付方式</span>
-            </el-col>
-            <el-col :span="3">
-              <span class="item">订单状态</span>
-            </el-col>
-            <el-col :span="2">
-              <span class="item">操作</span>
-            </el-col>
+            <el-col :span="10"><span class="item product">商品</span></el-col>
+            <el-col :span="3"><span class="item">成交单价/购买数量</span></el-col>
+            <el-col :span="3"><span class="item">实付金额</span></el-col>
+            <el-col :span="3"><span class="item">支付方式</span></el-col>
+            <el-col :span="3"><span class="item">订单状态</span></el-col>
+            <el-col :span="2"><span class="item">操作</span></el-col>
           </el-row>
         </div>
-        <div
-          v-for="order in dataList"
-          :key="order.orderId"
-          class="prod"
-        >
+
+        <!-- 订单列表 -->
+        <div v-for="order in dataList" :key="order.orderId" class="prod">
+          <!-- 订单标题 -->
           <div class="prod-tit">
             <span>订单编号：{{ order.orderNumber }}</span>
             <span>下单时间：{{ order.createTime }}</span>
           </div>
+
+          <!-- 订单内容 -->
           <div class="prod-cont">
             <el-row style="width:100%">
+              <!-- 商品信息 -->
               <el-col :span="12">
                 <div class="prod-item">
-                  <div
-                    v-for="orderItem in order.orderItems"
-                    :key="orderItem.orderItemId"
-                    class="items name"
-                  >
+                  <div v-for="orderItem in order.orderItems" :key="orderItem.orderItemId" class="items name">
                     <div class="prod-image">
-                      <img
-                        alt=""
-                        :src="resourcesUrl + orderItem.pic"
-                        style="height:100px;width: 100px;"
-                      >
+                      <img alt="" :src="resourcesUrl + orderItem.pic" style="height:100px;width: 100px;" />
                     </div>
                     <div class="prod-name">
                       <span>{{ orderItem.prodName }}</span>
@@ -123,10 +84,9 @@
                   </div>
                 </div>
               </el-col>
-              <el-col
-                :span="3"
-                style="height: 100%;"
-              >
+
+              <!-- 实付金额 -->
+              <el-col :span="3" style="height: 100%;">
                 <div class="item">
                   <div>
                     <span class="totalprice">￥{{ order.actualTotal }}</span>
@@ -135,10 +95,9 @@
                   </div>
                 </div>
               </el-col>
-              <el-col
-                :span="3"
-                style="height: 100%;"
-              >
+
+              <!-- 支付方式 -->
+              <el-col :span="3" style="height: 100%;">
                 <div class="item">
                   <div>
                     <span v-if="order.payType === 1">微信支付</span>
@@ -147,47 +106,24 @@
                   </div>
                 </div>
               </el-col>
-              <el-col
-                :span="3"
-                style="height: 100%;"
-              >
+
+              <!-- 订单状态 -->
+              <el-col :span="3" style="height: 100%;">
                 <div class="item">
-                  <span
-                    v-if="order.status === 1"
-                    type="danger"
-                  >待付款</span>
-                  <span
-                    v-else-if="order.status === 2"
-                    type="danger"
-                  >待发货</span>
-                  <span
-                    v-else-if="order.status === 3"
-                    type="danger"
-                  >待收货</span>
-                  <span
-                    v-else-if="order.status === 4"
-                    type="danger"
-                  >待评价</span>
-                  <span
-                    v-else-if="order.status === 5"
-                    type="danger"
-                  >成功</span>
-                  <span
-                    v-else
-                  >失败</span>
+                  <span v-if="order.status === 1" type="danger">待付款</span>
+                  <span v-else-if="order.status === 2" type="danger">待发货</span>
+                  <span v-else-if="order.status === 3" type="danger">待收货</span>
+                  <span v-else-if="order.status === 4" type="danger">待评价</span>
+                  <span v-else-if="order.status === 5" type="danger">成功</span>
+                  <span v-else>失败</span>
                 </div>
               </el-col>
-              <el-col
-                :span="3"
-                style="height: 100%;"
-              >
+
+              <!-- 操作按钮 -->
+              <el-col :span="3" style="height: 100%;">
                 <div class="item">
                   <div class="operate">
-                    <el-button
-                      v-if="isAuth('order:order:update')"
-                      type="text"
-                      @click="onAddOrUpdate(order.orderNumber)"
-                    >
+                    <el-button v-if="isAuth('order:order:update')" type="text" @click="onAddOrUpdate(order.orderNumber)">
                       查看
                     </el-button>
                   </div>
@@ -195,6 +131,8 @@
               </el-col>
             </el-row>
           </div>
+
+          <!-- 备注信息 -->
           <div class="remark">
             <div class="buyer-remark">
               <span>备注:{{ order.remarks }}</span>
@@ -203,15 +141,15 @@
         </div>
       </div>
     </div>
-    <!-- 空 -->
-    <div
-      v-if="!dataList.length"
-      class="empty-tips"
-    >
+
+    <!-- 当没有数据时显示的提示信息 -->
+    <div v-if="!dataList.length" class="empty-tips">
       暂无数据
     </div>
+
+    <!-- 分页组件 -->
     <el-pagination
-      :current-page="page.pageIndex"
+      :current-page="page.currentPage"
       :page-sizes="[10, 20, 50, 100]"
       :page-size="page.pageSize"
       :total="page.total"
@@ -219,63 +157,73 @@
       @size-change="sizeChangeHandle"
       @current-change="currentChangeHandle"
     />
-    <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update
-      v-if="addOrUpdateVisible"
-      ref="addOrUpdateRef"
-      @refresh-data-list="getDataList"
-    />
-    <consignment-info
-      v-if="consignmentInfoVisible"
-      ref="consignmentInfoRef"
-      @input-callback="getWaitingConsignmentExcel"
-    />
+
+    <!-- 弹窗：新增或修改订单 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" @refresh-data-list="getDataList" />
+
+    <!-- 弹窗：查看发货信息 -->
+    <consignment-info v-if="consignmentInfoVisible" ref="consignmentInfoRef" @input-callback="getWaitingConsignmentExcel" />
   </div>
 </template>
 
 <script setup>
+// 导入子组件用于订单信息编辑或新增以及发货信息查看。
 import AddOrUpdate from './components/order-info.vue'
 import ConsignmentInfo from './components/consignment-info.vue'
+
+// 引入权限验证工具函数。
 import { isAuth } from '@/utils'
+
+// 获取环境变量中的资源URL。
 const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
+
+// 定义表单数据对象，用于存储用户输入的数据。
 const dataForm = ref({})
+
+// 定义日期范围选择器的双向绑定值。
 const dateRange = ref([])
+
+// 定义订单状态选项列表，供用户选择订单状态进行筛选。
 const options = [{
   value: 1,
   label: '待付款'
-},
-{
+}, {
   value: 2,
   label: '待发货'
-},
-{
+}, {
   value: 3,
   label: '待收货'
-},
-{
+}, {
   value: 4,
   label: '待评价'
-},
-{
+}, {
   value: 5,
   label: '成功'
-},
-{
+}, {
   value: 6,
   label: '失败'
 }]
+
+// 定义数据列表引用，用于存储从服务器获取的订单数据。
 const dataList = ref([])
+
+// 定义分页参数，包括总条数、当前页码和每页显示的数量。
 const page = reactive({
   total: 0, // 总页数
   currentPage: 1, // 当前页数
   pageSize: 10 // 每页显示多少条
 })
+
+// 页面加载时调用此方法获取初始数据。
 onMounted(() => {
   getDataList(page)
 })
 
 /**
- * 获取数据列表
+ * 发起HTTP请求获取订单数据列表，并更新页面上的数据显示。
+ * @param pageParam - 分页参数，默认使用全局page对象。
+ * @param params - 额外的查询参数。
+ * @param done - 回调函数，在获取数据完成后调用。
  */
 const getDataList = (pageParam, params, done) => {
   pageParam = (pageParam === undefined ? page : pageParam)
@@ -302,36 +250,42 @@ const getDataList = (pageParam, params, done) => {
       if (done) done()
     })
 }
+
 /**
- * 清除数据
+ * 清除所有表单数据和日期范围选择。
  */
 const clearDatas = () => {
   dataForm.value = {}
   dateRange.value = []
 }
+
 /**
- * 每页数
- * @param val
+ * 当分页组件中每页显示数量改变时触发此方法。
+ * @param val - 新的每页显示数量。
  */
 const sizeChangeHandle = (val) => {
   page.pageSize = val
   page.currentPage = 1
   getDataList(page)
 }
+
 /**
- * 当前页
- * @param val
+ * 当分页组件中当前页码改变时触发此方法。
+ * @param val - 新的当前页码。
  */
 const currentChangeHandle = (val) => {
   page.currentPage = val
   getDataList(page)
 }
 
+// 定义对AddOrUpdate组件的引用。
 const addOrUpdateRef = ref(null)
+// 控制AddOrUpdate弹窗的显示状态。
 const addOrUpdateVisible = ref(false)
+
 /**
- * 新增 / 修改
- * @param val
+ * 打开订单信息编辑或新增弹窗。
+ * @param val - 可选参数，当存在时表示编辑指定ID的订单。
  */
 const onAddOrUpdate = (val) => {
   addOrUpdateVisible.value = true
@@ -340,14 +294,25 @@ const onAddOrUpdate = (val) => {
   })
 }
 
+// 定义对ConsignmentInfo组件的引用。
 const consignmentInfoRef = ref(null)
+// 控制ConsignmentInfo弹窗的显示状态。
 const consignmentInfoVisible = ref(false)
+
+/**
+ * 显示发货信息弹窗。
+ */
 const showConsignmentInfo = () => {
   consignmentInfoVisible.value = true
   nextTick(() => {
     consignmentInfoRef.value?.init()
   })
 }
+
+/**
+ * 下载待发货信息整理Excel文件。
+ * @param consignmentInfo - 发货信息对象。
+ */
 const getWaitingConsignmentExcel = (consignmentInfo) => {
   http({
     url: http.adornUrl('/order/order/waitingConsignmentExcel'),
@@ -356,78 +321,83 @@ const getWaitingConsignmentExcel = (consignmentInfo) => {
       consignmentName: consignmentInfo.consignmentName,
       consignmentMobile: consignmentInfo.consignmentMobile,
       consignmentAddr: consignmentInfo.consignmentAddr,
-      startTime: dateRange.value === null ? null : dateRange.value[0], // 开始时间
-      endTime: dateRange.value === null ? null : dateRange.value[1] // 结束时间
+      startTime: dateRange.value === null ? null : dateRange.value[0],
+      endTime: dateRange.value === null ? null : dateRange.value[1]
     }),
-    responseType: 'blob' // 解决文件下载乱码问题
+    responseType: 'blob'
   })
     .then(({ data }) => {
       const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
       const fileName = '待发货信息整理.xls'
-      const elink = document.createElement('a')
-      if ('download' in elink) { // 非IE下载
-        elink.download = fileName
-        elink.style.display = 'none'
-        elink.href = URL.createObjectURL(blob)
-        document.body.appendChild(elink)
-        elink.click()
-        URL.revokeObjectURL(elink.href) // 释放URL 对象
-        document.body.removeChild(elink)
-      } else { // IE10+下载
-        navigator.msSaveBlob(blob, fileName)
-      }
+      downloadFile(blob, fileName)
     })
 }
 
+/**
+ * 下载销售信息整理Excel文件。
+ */
 const getSoldExcel = () => {
   http({
     url: http.adornUrl('/order/order/soldExcel'),
     method: 'get',
     params: http.adornParams({
-      startTime: dateRange.value === null ? null : dateRange.value[0], // 开始时间
-      endTime: dateRange.value === null ? null : dateRange.value[1] // 结束时间
+      startTime: dateRange.value === null ? null : dateRange.value[0],
+      endTime: dateRange.value === null ? null : dateRange.value[1]
     }),
-    responseType: 'blob' // 解决文件下载乱码问题
+    responseType: 'blob'
   })
     .then(({ data }) => {
       const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
       const fileName = '销售信息整理.xls'
-      const elink = document.createElement('a')
-      if ('download' in elink) { // 非IE下载
-        elink.download = fileName
-        elink.style.display = 'none'
-        elink.href = URL.createObjectURL(blob)
-        document.body.appendChild(elink)
-        elink.click()
-        URL.revokeObjectURL(elink.href) // 释放URL 对象
-        document.body.removeChild(elink)
-      } else { // IE10+下载
-        navigator.msSaveBlob(blob, fileName)
-      }
+      downloadFile(blob, fileName)
     })
 }
+
+/**
+ * 文件下载辅助函数。
+ * @param blob - 文件内容。
+ * @param fileName - 文件名。
+ */
+function downloadFile(blob, fileName) {
+  const elink = document.createElement('a')
+  if ('download' in elink) { // 非IE下载
+    elink.download = fileName
+    elink.style.display = 'none'
+    elink.href = URL.createObjectURL(blob)
+    document.body.appendChild(elink)
+    elink.click()
+    URL.revokeObjectURL(elink.href)
+    document.body.removeChild(elink)
+  } else { // IE10+下载
+    navigator.msSaveBlob(blob, fileName)
+  }
+}
 </script>
 
 <style lang="scss" scoped>
+// 定义一个具有特定样式的订单模块，使用scoped属性确保样式仅应用于组件内部。
 .mod-order-order {
+
+  // 标题栏设置为flex布局，高度固定为45px，并且内容垂直居中对齐。
   .tit {
     display: flex;
     height: 45px;
     align-items: center;
-  }
 
-  .tit {
+    // 标题项内的项目设置：左右内边距为10px，宽度占父元素的10%，文本居中对齐。
     .item {
       padding: 0 10px;
       width: 10%;
       text-align: center;
     }
 
+    // 特殊的产品标题项，宽度设置为25%以适应更长的文本或更多内容。
     .product {
       width: 25%;
     }
   }
 
+  // 产品标题部分，设置了内边距、背景色以及三边的边框。
   .prod-tit {
     padding: 10px;
     background: #f8f8f9;
@@ -435,11 +405,13 @@ const getSoldExcel = () => {
     border-top: 1px solid #dddee1;
     border-right: 1px solid #dddee1;
 
+    // 标题内的span元素之间有15px的右边距。
     span {
       margin-right: 15px;
     }
   }
 
+  // 产品内容区域，采用flex布局，定义了顶部和底部的边框，左边框以及字体颜色。
   .prod-cont {
     display: flex;
     border-top: 1px solid #dddee1;
@@ -447,6 +419,7 @@ const getSoldExcel = () => {
     border-left: 1px solid #dddee1;
     color: #495060;
 
+    // 内部的项目项，设置为flex布局，内容垂直和水平居中，定义了内边距、右边框、文本居中对齐以及高度。
     .item {
       display: flex;
       display: -webkit-flex;
@@ -457,33 +430,39 @@ const getSoldExcel = () => {
       text-align: center;
       height: 100%;
 
+      // 确保子span元素显示为块级元素。
       span {
         display: block;
       }
     }
 
+    // 产品项目项，使用flex布局并设定为列方向排列，定义了右边框。
     .prod-item {
       display: flex;
       flex-direction: column;
       border-right: 1px solid #dddee1;
     }
 
+    // 特殊的名称项，添加了相对定位、额外的内边距以及底部边框。
     .items.name {
       display: flex;
       position: relative;
       padding: 20px;
       border-bottom: 1px solid #dddee1;
 
+      // 最后一个子元素不显示底部边框。
       &:last-child {
         border-bottom: none;
       }
     }
   }
 
+  // 产品名称部分，设置宽度为55%，文本左对齐。
   .prod-name {
     width: 55%;
     text-align: left;
 
+    // 产品信息显示为块级元素，颜色较淡，并且在上边距上有30px的空间。
     .prod-info {
       display: block;
       color: #80848f;
@@ -491,17 +470,20 @@ const getSoldExcel = () => {
     }
   }
 
+  // 产品价格部分，绝对定位到右侧40px处，文本右对齐。
   .prod-price {
     position: absolute;
     right: 40px;
     text-align: right;
 
+    // 价格中的span元素显示为块级元素，并且底部有10px的间距。
     span {
       display: block;
       margin-bottom: 10px;
     }
   }
 
+  // 产品图片部分，定义了右边距、宽度和高度，同时设置了图片的尺寸。
   .prod-image {
     margin-right: 20px;
     width: 100px;
@@ -513,21 +495,25 @@ const getSoldExcel = () => {
     }
   }
 
+  // 通用的项目项，其中的span元素显示为块级元素，并且底部有10px的间距。
   .item {
     span {
       display: block;
       margin-bottom: 10px;
     }
 
+    // 操作链接的颜色设置为蓝色。
     .operate {
       color: #2d8cf0;
     }
 
+    // 总价颜色设置为红色。
     .totalprice {
       color: #c00;
     }
   }
 
+  // 产品备注部分，设置了宽度、高度、行高、背景颜色以及三边的边框。
   .prod {
     .remark {
       width: 100%;
@@ -541,6 +527,7 @@ const getSoldExcel = () => {
     }
   }
 
+  // 购买者备注部分，设置了左右内边距、溢出隐藏、单行文本以及省略号处理。
   .buyer-remark {
     padding: 0 20px;
     overflow: hidden;
@@ -548,6 +535,7 @@ const getSoldExcel = () => {
     text-overflow: ellipsis;
   }
 
+  // 当没有数据时显示的提示信息，设置为块级元素，居中对齐，上下各有50px的外边距，颜色为灰色。
   .empty-tips {
     display: block;
     width: 100%;
diff --git a/front-end/mall4v/src/views/modules/prod/category/add-or-update.vue b/front-end/mall4v/src/views/modules/prod/category/add-or-update.vue
index c44e01d..987320d 100644
--- a/front-end/mall4v/src/views/modules/prod/category/add-or-update.vue
+++ b/front-end/mall4v/src/views/modules/prod/category/add-or-update.vue
@@ -1,97 +1,106 @@
 <template>
+  <!-- 使用el-dialog组件创建一个对话框，v-model绑定visible控制显示/隐藏 -->
   <el-dialog
     v-model="visible"
-    :title="!dataForm.currentId ? '新增' : '修改'"
-    :close-on-click-modal="false"
+    :title="!dataForm.currentId ? '新增' : '修改'" <!-- 根据currentId判断是新增还是修改 -->
+  :close-on-click-modal="false" <!-- 点击模态框区域不关闭对话框 -->
   >
-    <el-form
-      ref="dataFormRef"
-      :model="dataForm"
-      :rules="dataRule"
-      label-width="80px"
-      @keyup.enter="onSubmit()"
-    >
-      <el-form-item
-        v-if="dataForm.type !== 2"
-        label="分类图片"
-        prop="pic"
-      >
-        <pic-upload
-          v-model="dataForm.pic"
-          @update:model-value="checkPic"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="dataForm.type !== 2"
-        label="分类名称"
-        prop="categoryName"
-      >
-        <el-input
-          v-model="dataForm.categoryName"
-          controls-position="right"
-          :min="0"
-          label="分类名称"
-        />
-      </el-form-item>
-      <el-form-item label="上级分类">
-        <el-cascader
-          v-model="selectedCategory"
-          expand-trigger="hover"
-          :options="categoryList"
-          :props="categoryTreeProps"
-          change-on-select
-          :clearable="true"
-          @change="handleChange"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="dataForm.type !== 2"
-        label="排序号"
-        prop="seq"
-      >
-        <el-input-number
-          v-model="dataForm.seq"
-          controls-position="right"
-          :min="0"
-          label="排序号"
-        />
-      </el-form-item>
-      <el-form-item
-        label="状态"
-        prop="status"
-      >
-        <el-radio-group v-model="dataForm.status">
-          <el-radio :label="0">
-            下线
-          </el-radio>
-          <el-radio :label="1">
-            正常
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="visible = false">
-          取消
-        </el-button>
-        <el-button
-          type="primary"
-          @click="onSubmit()"
-        >
-          确定
-        </el-button>
-      </div>
-    </template>
+  <!-- el-form表单，ref引用dataFormRef以便在脚本中操作表单 -->
+  <el-form
+    ref="dataFormRef"
+    :model="dataForm"
+    :rules="dataRule"
+    label-width="80px"
+    @keyup.enter="onSubmit()" <!-- 按下Enter键时触发提交 -->
+  >
+  <!-- 分类图片表单项，仅当type不是2时显示 -->
+  <el-form-item
+    v-if="dataForm.type !== 2"
+    label="分类图片"
+    prop="pic"
+  >
+    <!-- 自定义的图片上传组件 -->
+    <pic-upload
+      v-model="dataForm.pic"
+      @update:model-value="checkPic" <!-- 图片更新后重新校验 -->
+    />
+  </el-form-item>
+
+  <!-- 分类名称表单项，仅当type不是2时显示 -->
+  <el-form-item
+    v-if="dataForm.type !== 2"
+    label="分类名称"
+    prop="categoryName"
+  >
+    <el-input
+      v-model="dataForm.categoryName"
+      controls-position="right"
+      :min="0"
+      label="分类名称"
+    />
+  </el-form-item>
+
+  <!-- 上级分类选择器 -->
+  <el-form-item label="上级分类">
+    <el-cascader
+      v-model="selectedCategory"
+      expand-trigger="hover"
+      :options="categoryList"
+      :props="categoryTreeProps"
+      change-on-select
+      :clearable="true"
+      @change="handleChange" <!-- 上级分类变化时触发 -->
+    />
+  </el-form-item>
+
+  <!-- 排序号表单项，仅当type不是2时显示 -->
+  <el-form-item
+    v-if="dataForm.type !== 2"
+    label="排序号"
+    prop="seq"
+  >
+    <el-input-number
+      v-model="dataForm.seq"
+      controls-position="right"
+      :min="0"
+      label="排序号"
+    />
+  </el-form-item>
+
+  <!-- 状态选择项 -->
+  <el-form-item
+    label="状态"
+    prop="status"
+  >
+    <el-radio-group v-model="dataForm.status">
+      <el-radio :label="0">下线</el-radio>
+      <el-radio :label="1">正常</el-radio>
+    </el-radio-group>
+  </el-form-item>
+  </el-form>
+
+  <!-- 对话框底部的操作按钮 -->
+  <template #footer>
+    <div class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button> <!-- 点击取消关闭对话框 -->
+      <el-button type="primary" @click="onSubmit()">确定</el-button> <!-- 点击确定提交表单 -->
+    </div>
+  </template>
   </el-dialog>
 </template>
 
 <script setup>
-import { ElMessage } from 'element-plus'
-import { treeDataTranslate, idList } from '@/utils'
-import { Debounce } from '@/utils/debounce'
+import {ElMessage} from 'element-plus'
+import {treeDataTranslate, idList} from '@/utils'
+import {Debounce} from '@/utils/debounce'
+
+// 定义事件emit来刷新数据列表
 const emit = defineEmits(['refreshDataList'])
+
+// 控制对话框显示与隐藏
 const visible = ref(false)
+
+// 表单数据对象，使用reactive定义响应式数据
 const dataForm = reactive({
   categoryId: 0,
   currentId: 0,
@@ -102,108 +111,109 @@ const dataForm = reactive({
   parentId: 0,
   pic: ''
 })
+
+// 表单验证规则
 const dataRule = reactive({
   categoryName: [
-    { required: true, message: '分类名称不能为空', trigger: 'blur' },
-    { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的分类名称', trigger: 'blur' }
+    {required: true, message: '分类名称不能为空', trigger: 'blur'},
+    {pattern: /\s\S+|S+\s|\S/, message: '请输入正确的分类名称', trigger: 'blur'}
   ],
   pic: [
-    { required: true, message: '分类图片不能为空', trigger: 'blur' }
+    {required: true, message: '分类图片不能为空', trigger: 'blur'}
   ]
 })
+
+// 分类列表数据
 const categoryList = ref([])
+
+// 选中的分类路径
 const selectedCategory = ref([])
+
+// 上级分类联级选择器配置
 const categoryTreeProps = reactive({
   value: 'categoryId',
   label: 'categoryName',
   checkStrictly: true
 })
+
+// 提交锁，防止重复提交
 const isSubmit = ref(false)
+
+// 表单引用
 const dataFormRef = ref(null)
+
+// 初始化方法，接收id参数以决定是新增还是编辑
 const init = (id) => {
   dataForm.currentId = id || 0
   dataForm.categoryId = id || 0
+  // 获取分类列表
   http({
     url: http.adornUrl('/prod/category/listCategory'),
     method: 'get',
     params: http.adornParams()
   })
-    .then(({ data }) => {
+    .then(({data}) => {
       categoryList.value = treeDataTranslate(data, 'categoryId', 'parentId')
     })
     .then(() => {
       visible.value = true
       nextTick(() => {
-        dataFormRef.value?.resetFields()
+        dataFormRef.value?.resetFields() // 重置表单
         selectedCategory.value = []
       })
     })
     .then(() => {
       if (dataForm.categoryId) {
-      // 修改
+        // 如果有ID，则获取具体分类信息进行编辑
         http({
           url: http.adornUrl(`/prod/category/info/${dataForm.categoryId}`),
           method: 'get',
           params: http.adornParams()
         })
-          .then(({ data }) => {
-            dataForm.categoryId = data.categoryId
-            dataForm.categoryName = data.categoryName
-            dataForm.seq = data.seq
-            dataForm.pic = data.pic
-            dataForm.parentId = data.parentId
-            dataForm.status = data.status
+          .then(({data}) => {
+            Object.assign(dataForm, data)
             selectedCategory.value = idList(categoryList.value, data.parentId, 'categoryId', 'children').reverse()
           })
       }
     })
 }
-defineExpose({ init })
 
+// 暴露init方法供外部调用
+defineExpose({init})
+
+// 上级分类变化时触发
 const handleChange = (val) => {
   dataForm.parentId = val[val.length - 1]
 }
-// 表单提交
+
+// 表单提交，使用防抖处理
 const onSubmit = Debounce(() => {
-  if (selectedCategory.value.length === 1) {
-    dataForm.grade = 0
-  }
-  if (selectedCategory.value.length === 2) {
-    dataForm.grade = 1
-  }
-  if (selectedCategory.value.length === 3) {
-    dataForm.grade = 2
-  }
+  // 设置grade值
+  dataForm.grade = selectedCategory.value.length - 1
+
+  // 验证表单有效性
   dataFormRef.value?.validate((valid) => {
     if (valid) {
-      if (isSubmit.value) {
-        return
-      }
+      if (isSubmit.value) return // 防止重复提交
+
       isSubmit.value = true
+
+      // 发送请求保存或更新分类信息
       http({
         url: http.adornUrl('/prod/category'),
         method: dataForm.categoryId ? 'put' : 'post',
         data: http.adornData({
-          categoryId: dataForm.categoryId || undefined,
-          categoryName: dataForm.categoryName,
-          status: dataForm.status,
-          seq: dataForm.seq,
-          grade: dataForm.grade,
-          parentId: dataForm.parentId,
-          pic: dataForm.pic
+          ...dataForm
         })
       })
         .then(() => {
-          ElMessage({
-            message: '操作成功',
-            type: 'success',
-            duration: 1000,
-            onClose: () => {
-              isSubmit.value = false
-              visible.value = false
-              emit('refreshDataList')
-            }
-          })
+          ElMessage.success('操作成功')
+          isSubmit.value = false
+          visible.value = false
+          emit('refreshDataList') // 触发父组件刷新列表
+        })
+        .catch(() => {
+          isSubmit.value = false
         })
     }
   })
diff --git a/front-end/mall4v/src/views/modules/prod/category/index.vue b/front-end/mall4v/src/views/modules/prod/category/index.vue
index eed9c6f..e2a4014 100644
--- a/front-end/mall4v/src/views/modules/prod/category/index.vue
+++ b/front-end/mall4v/src/views/modules/prod/category/index.vue
@@ -1,10 +1,10 @@
 <template>
+  <!-- 分类管理模块 -->
   <div class="mod-category">
-    <el-form
-      :inline="true"
-      :model="dataForm"
-    >
+    <!-- 搜索表单，使用inline布局让表单项在同一行显示 -->
+    <el-form :inline="true" :model="dataForm">
       <el-form-item>
+        <!-- 新增按钮，只有拥有相应权限的用户可以点击 -->
         <el-button
           v-if="isAuth('prod:category:save')"
           type="primary"
@@ -15,12 +15,10 @@
         </el-button>
       </el-form-item>
     </el-form>
-    <el-table
-      :data="dataList"
-      border
-      row-key="categoryId"
-      style="width: 100%;"
-    >
+
+    <!-- 数据表格，展示分类列表 -->
+    <el-table :data="dataList" border row-key="categoryId" style="width: 100%;">
+      <!-- 分类名称列 -->
       <el-table-column
         prop="categoryName"
         header-align="center"
@@ -28,6 +26,8 @@
         width="150"
         label="分类名称"
       />
+
+      <!-- 图片列，自定义模板显示图片 -->
       <el-table-column
         prop="pic"
         header-align="center"
@@ -35,12 +35,11 @@
         label="图片"
       >
         <template #default="scope">
-          <img
-            alt=""
-            :src="checkFileUrl(scope.row.pic)"
-          >
+          <img alt="" :src="checkFileUrl(scope.row.pic)" style="height:80px;width:200px;">
         </template>
       </el-table-column>
+
+      <!-- 状态列，根据状态值显示不同颜色的标签 -->
       <el-table-column
         prop="status"
         header-align="center"
@@ -48,29 +47,27 @@
         label="状态"
       >
         <template #default="scope">
-          <el-tag
-            v-if="scope.row.status === 0"
-            type="danger"
-          >
-            下线
-          </el-tag>
-          <el-tag v-else>
-            正常
-          </el-tag>
+          <el-tag v-if="scope.row.status === 0" type="danger">下线</el-tag>
+          <el-tag v-else>正常</el-tag>
         </template>
       </el-table-column>
+
+      <!-- 排序号列 -->
       <el-table-column
         prop="seq"
         header-align="center"
         align="center"
         label="排序号"
       />
+
+      <!-- 操作列，提供修改和删除按钮 -->
       <el-table-column
         header-align="center"
         align="center"
         label="操作"
       >
         <template #default="scope">
+          <!-- 修改按钮，只有拥有相应权限的用户可以点击 -->
           <el-button
             v-if="isAuth('prod:category:update')"
             type="primary"
@@ -78,6 +75,7 @@
           >
             修改
           </el-button>
+          <!-- 删除按钮，只有拥有相应权限的用户可以点击 -->
           <el-button
             v-if="isAuth('prod:category:delete')"
             type="danger"
@@ -88,7 +86,8 @@
         </template>
       </el-table-column>
     </el-table>
-    <!-- 弹窗, 新增 / 修改 -->
+
+    <!-- 弹窗, 新增 / 修改，通过addOrUpdateVisible控制显示隐藏 -->
     <add-or-update
       v-if="addOrUpdateVisible"
       ref="addOrUpdateRef"
@@ -102,53 +101,64 @@
 import { checkFileUrl, isAuth, treeDataTranslate } from '@/utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AddOrUpdate from './add-or-update.vue'
+
+// 表单数据对象
 const dataForm = ref({})
 
+// 页面加载时获取数据列表
 onMounted(() => {
   getDataList()
 })
 
+// 数据列表引用
 const dataList = ref([])
 const dataListLoading = ref(false)
+
 /**
- * 获取数据列表
+ * 获取数据列表方法
  */
 const getDataList = () => {
-  dataListLoading.value = true
+  dataListLoading.value = true // 开始加载时设置为true
   http({
     url: http.adornUrl('/prod/category/table'),
     method: 'get',
     params: http.adornParams()
   })
     .then(({ data }) => {
+      // 将返回的数据转换成树形结构并赋值给dataList
       dataList.value = treeDataTranslate(data, 'categoryId', 'parentId')
-      dataListLoading.value = false
+      dataListLoading.value = false // 加载完成设置为false
     })
 }
 
+// 控制弹窗显示与隐藏
 const addOrUpdateVisible = ref(false)
 const addOrUpdateRef = ref(null)
+
 /**
- * 新增 / 修改
- * @param id
+ * 新增或修改分类
+ * @param id - 如果提供id则为修改，否则为新增
  */
 const onAddOrUpdate = (id) => {
-  addOrUpdateVisible.value = true
+  addOrUpdateVisible.value = true // 显示弹窗
   nextTick(() => {
-    addOrUpdateRef.value?.init(id)
+    addOrUpdateRef.value?.init(id) // 初始化弹窗内容
   })
 }
+
 /**
- * 删除
- * @param id
+ * 删除分类
+ * @param id - 要删除的分类ID
  */
 const onDelete = (id) => {
+  // 确认框提示用户是否确定要执行删除操作
   ElMessageBox.confirm('确定进行删除操作?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
   })
     .then(() => {
+      // 发送HTTP DELETE请求
       http({
         url: http.adornUrl(`/prod/category/${id}`),
         method: 'delete'
@@ -159,20 +169,19 @@ const onDelete = (id) => {
             type: 'success',
             duration: 1500,
             onClose: () => {
-              getDataList()
+              getDataList() // 刷新列表
             }
           })
         })
     })
 }
-
 </script>
 
 <style lang="scss" scoped>
 .mod-category {
   img {
     height: 80px;
-    width: 200px;
+    width: 200px; // 设置图片的尺寸以确保一致性和美观性
   }
 }
 </style>
diff --git a/front-end/mall4v/src/views/modules/prod/prodComm/add-or-update.vue b/front-end/mall4v/src/views/modules/prod/prodComm/add-or-update.vue
index e84dd22..1fd56f1 100644
--- a/front-end/mall4v/src/views/modules/prod/prodComm/add-or-update.vue
+++ b/front-end/mall4v/src/views/modules/prod/prodComm/add-or-update.vue
@@ -1,156 +1,130 @@
 <template>
+  <!-- 商品评论管理对话框 -->
   <el-dialog
     v-model="visible"
     :title="!dataForm.prodCommId ? '新增' : '修改'"
-    :close-on-click-modal="false"
+  :close-on-click-modal="false"
   >
-    <el-form
-      ref="dataFormRef"
-      :model="dataForm"
-      :rules="dataRule"
-      label-width="80px"
-      @keyup.enter="onSubmit()"
-    >
-      <div v-if="!isEdit">
-        <el-form-item
-          label="评论内容"
-          prop="userName"
-        >
-          <el-input
-            v-model="dataForm.content"
-            type="textarea"
-            :readonly="true"
-          />
-        </el-form-item>
-
-        <el-form-item
-          label="评论图片"
-          prop="userName"
-        >
-          <div v-if="!dataForm.pics?.length">
-            无
-          </div>
-          <div v-else>
-            <img
-              v-for="item in dataForm.pics"
-              :key="item"
-              alt=""
-              max-width="100%"
-              :src="dialogImageUrl + item"
-            >
-          </div>
-        </el-form-item>
-
-        <el-form-item
-          label="记录时间"
-          prop="userName"
-        >
-          <el-input
-            v-model="dataForm.recTime"
-            :readonly="true"
-          />
-        </el-form-item>
-        <el-form-item
-          label="回复时间"
-          prop="userName"
-          :readonly="true"
-        >
-          <el-input
-            v-model="dataForm.replyTime"
-            :readonly="true"
-          />
-        </el-form-item>
-        <el-form-item
-          label="IP来源"
-          prop="userName"
-        >
-          <el-input
-            v-model="dataForm.postip"
-            :readonly="true"
-          />
-        </el-form-item>
-        <el-form-item
-          label="得分"
-          prop="score"
-        >
-          <el-input
-            v-model="dataForm.score"
-            :readonly="true"
-          />
-        </el-form-item>
-
-        <el-form-item
-          label="是否匿名"
-          prop="isAnonymous"
+  <el-form
+    ref="dataFormRef"
+    :model="dataForm"
+    :rules="dataRule"
+    label-width="80px"
+    @keyup.enter="onSubmit()"
+  >
+  <!-- 如果不是编辑状态，则显示评论详情 -->
+  <div v-if="!isEdit">
+    <!-- 评论内容表单项，只读 -->
+    <el-form-item label="评论内容" prop="content">
+      <el-input
+        v-model="dataForm.content"
+        type="textarea"
+        :readonly="true"
+      />
+    </el-form-item>
+
+    <!-- 评论图片表单项 -->
+    <el-form-item label="评论图片" prop="pics">
+      <div v-if="!dataForm.pics?.length">无</div>
+      <div v-else>
+        <img
+          v-for="item in dataForm.pics"
+          :key="item"
+          alt=""
+          max-width="100%"
+          :src="dialogImageUrl + item"
         >
-          <el-radio-group
-            v-model="dataForm.isAnonymous"
-            :disabled="true"
-          >
-            <el-radio :label="1">
-              是
-            </el-radio>
-            <el-radio :label="0">
-              不是
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
       </div>
+    </el-form-item>
 
-      <el-form-item
-        label="掌柜回复"
-        type="textarea"
-        prop="userName"
+    <!-- 记录时间表单项，只读 -->
+    <el-form-item label="记录时间" prop="recTime">
+      <el-input
+        v-model="dataForm.recTime"
+        :readonly="true"
+      />
+    </el-form-item>
+
+    <!-- 回复时间表单项，只读 -->
+    <el-form-item label="回复时间" prop="replyTime">
+      <el-input
+        v-model="dataForm.replyTime"
+        :readonly="true"
+      />
+    </el-form-item>
+
+    <!-- IP来源表单项，只读 -->
+    <el-form-item label="IP来源" prop="postip">
+      <el-input
+        v-model="dataForm.postip"
+        :readonly="true"
+      />
+    </el-form-item>
+
+    <!-- 得分表单项，只读 -->
+    <el-form-item label="得分" prop="score">
+      <el-input
+        v-model="dataForm.score"
+        :readonly="true"
+      />
+    </el-form-item>
+
+    <!-- 是否匿名表单项，只读 -->
+    <el-form-item label="是否匿名" prop="isAnonymous">
+      <el-radio-group
+        v-model="dataForm.isAnonymous"
+        :disabled="true"
       >
-        <el-input
-          v-model="dataForm.replyContent"
-          :readonly="!isEdit"
-        />
-      </el-form-item>
+        <el-radio :label="1">是</el-radio>
+        <el-radio :label="0">不是</el-radio>
+      </el-radio-group>
+    </el-form-item>
+  </div>
 
-      <el-form-item
+  <!-- 掌柜回复表单项，非编辑状态下只读 -->
+  <el-form-item label="掌柜回复" prop="replyContent">
+    <el-input
+      v-model="dataForm.replyContent"
+      type="textarea"
+      :readonly="!isEdit"
+    />
+  </el-form-item>
+
+  <!-- 审核表单项，仅在编辑状态下显示 -->
+  <el-form-item v-if="isEdit" label="审核" prop="status">
+    <el-radio-group v-model="dataForm.status">
+      <el-radio :label="1">审核通过</el-radio>
+      <el-radio :label="-1">不通过</el-radio>
+      <el-radio :label="0">等待审核</el-radio>
+    </el-radio-group>
+  </el-form-item>
+  </el-form>
+
+  <!-- 对话框底部的操作按钮 -->
+  <template #footer>
+    <div class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button> <!-- 点击取消关闭对话框 -->
+      <el-button
         v-if="isEdit"
-        label="审核"
-        prop="status"
-      >
-        <el-radio-group
-          v-model="dataForm.status"
-          :readonly="true"
-        >
-          <el-radio :label="1">
-            审核通过
-          </el-radio>
-          <el-radio :label="-1">
-            不通过
-          </el-radio>
-          <el-radio :label="0">
-            等待审核
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="visible = false">
-          取消
-        </el-button>
-        <el-button
-          v-if="isEdit"
-          type="primary"
-          @click="onSubmit()"
-        >
-          确定
-        </el-button>
-      </div>
-    </template>
+        type="primary"
+        @click="onSubmit()"
+      >确定</el-button> <!-- 编辑状态下点击确定提交表单 -->
+    </div>
+  </template>
   </el-dialog>
 </template>
 
 <script setup>
 import { ElMessage } from 'element-plus'
 const emit = defineEmits(['refreshDataList'])
+
+// 表单验证规则（这里没有定义具体的规则）
 const dataRule = ref({})
+
+// 控制是否处于编辑模式
 const isEdit = ref(false)
+
+// 表单数据对象，使用ref定义响应式数据
 const dataForm = ref({
   prodCommId: null,
   prodId: null,
@@ -168,52 +142,54 @@ const dataForm = ref({
   isAnonymous: null,
   status: null
 })
+
+// 初始化方法，接收prodCommId和isEditParam参数以决定是新增还是编辑
 const init = (prodCommId, isEditParam) => {
-  isEdit.value = isEditParam
+  isEdit.value = isEditParam // 设置编辑模式
   dataForm.value.prodCommId = prodCommId || 0
-  visible.value = true
+  visible.value = true // 显示对话框
   nextTick(() => {
-    dataFormRef.value?.resetFields()
+    dataFormRef.value?.resetFields() // 重置表单
     if (dataForm.value.prodCommId) {
+      // 如果有ID，则获取具体评论信息进行编辑
       http({
         url: http.adornUrl('/prod/prodComm/info/' + dataForm.value.prodCommId),
         method: 'get',
         params: http.adornParams()
       })
         .then(({ data }) => {
-          dataForm.value = data
+          Object.assign(dataForm.value, data) // 将服务器返回的数据赋值给dataForm
         })
     }
   })
 }
-defineExpose({ init })
 
+defineExpose({ init }) // 暴露init方法供外部调用
+
+// 控制对话框显示与隐藏
 const visible = ref(false)
+
+// 表单引用
 const dataFormRef = ref(null)
+
 /**
- * 表单提交
+ * 表单提交方法
  */
 const onSubmit = () => {
   dataFormRef.value?.validate((valid) => {
     if (valid) {
+      // 发送请求保存或更新评论信息
       http({
         url: http.adornUrl('/prod/prodComm'),
         method: dataForm.value.prodCommId ? 'put' : 'post',
         data: http.adornData(dataForm.value)
       })
         .then(() => {
-          ElMessage({
-            message: '操作成功',
-            type: 'success',
-            duration: 1500,
-            onClose: () => {
-              visible.value = false
-              emit('refreshDataList')
-            }
-          })
+          ElMessage.success('操作成功')
+          visible.value = false // 关闭对话框
+          emit('refreshDataList') // 触发父组件刷新列表
         })
     }
   })
 }
-
 </script>
diff --git a/front-end/mall4v/src/views/modules/prod/prodComm/index.vue b/front-end/mall4v/src/views/modules/prod/prodComm/index.vue
index b2154a1..5f1ce3e 100644
--- a/front-end/mall4v/src/views/modules/prod/prodComm/index.vue
+++ b/front-end/mall4v/src/views/modules/prod/prodComm/index.vue
@@ -1,41 +1,49 @@
 <template>
+  <!-- 商品评论管理模块 -->
   <div class="mod-prod-prodComm">
+    <!-- 使用avue-crud组件构建表格 -->
     <avue-crud
       ref="crudRef"
-      :page="page"
-      :data="dataList"
-      :table-loading="dataListLoading"
-      :option="tableOption"
-      @search-change="onSearch"
-      @on-load="getDataList"
-      @refresh-change="refreshChange"
-      @row-del="rowDel"
+      :page="page" <!-- 分页配置 -->
+    :data="dataList" <!-- 表格数据 -->
+    :table-loading="dataListLoading" <!-- 表格加载状态 -->
+    :option="tableOption" <!-- 表格选项 -->
+    @search-change="onSearch" <!-- 搜索条件改变时触发 -->
+    @on-load="getDataList" <!-- 加载分页数据时触发 -->
+    @refresh-change="refreshChange" <!-- 刷新表格时触发 -->
+    @row-del="rowDel" <!-- 删除行时触发 -->
     >
-      <template #nickName="scope">
-        {{ scope.row.user.nickName }}
-      </template>
-      <template #replyTime="scope">
-        {{ scope.row.replyTime ? scope.row.replyTime : '-' }}
-      </template>
+    <!-- 自定义模板显示用户昵称 -->
+    <template #nickName="scope">
+      {{ scope.row.user.nickName }}
+    </template>
 
-      <template #menu="scope">
-        <el-button
-          type="primary"
-          icon="el-icon-edit"
-          @click="onAddOrUpdate(scope.row.prodCommId,true)"
-        >
-          编辑
-        </el-button>
+    <!-- 自定义模板显示回复时间，如果为空则显示'-' -->
+    <template #replyTime="scope">
+      {{ scope.row.replyTime ? scope.row.replyTime : '-' }}
+    </template>
 
-        <el-button
-          type="success"
-          icon="el-icon-view"
-          @click="onAddOrUpdate(scope.row.prodCommId,false)"
-        >
-          查看
-        </el-button>
-      </template>
+    <!-- 自定义菜单栏，提供编辑和查看按钮 -->
+    <template #menu="scope">
+      <el-button
+        type="primary"
+        icon="el-icon-edit"
+        @click="onAddOrUpdate(scope.row.prodCommId, true)"
+      >
+        编辑
+      </el-button>
+
+      <el-button
+        type="success"
+        icon="el-icon-view"
+        @click="onAddOrUpdate(scope.row.prodCommId, false)"
+      >
+        查看
+      </el-button>
+    </template>
     </avue-crud>
+
+    <!-- 弹窗, 新增 / 修改 -->
     <add-or-update
       v-if="addOrUpdateVisible"
       ref="addOrUpdateRef"
@@ -46,19 +54,31 @@
 
 <script setup>
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { tableOption } from '@/crud/prod/prodComm.js'
+import { tableOption } from '@/crud/prod/prodComm.js' // 导入表格配置项
 import AddOrUpdate from './add-or-update.vue'
 
+// 表格数据引用
 const dataList = ref([])
+
+// 分页对象
 const page = reactive({
-  total: 0, // 总页数
-  currentPage: 1, // 当前页数
-  pageSize: 20 // 每页显示多少条
+  total: 0, // 总记录数
+  currentPage: 1, // 当前页码
+  pageSize: 20 // 每页显示条数
 })
+
+// 数据加载状态引用
 const dataListLoading = ref(false)
 
+/**
+ * 获取数据列表方法
+ * @param pageParam - 分页参数
+ * @param params - 搜索参数
+ * @param done - 完成回调函数
+ */
 const getDataList = (pageParam, params, done) => {
-  dataListLoading.value = true
+  dataListLoading.value = true // 设置加载状态为true
+
   http({
     url: http.adornUrl('/prod/prodComm/page'),
     method: 'get',
@@ -68,24 +88,33 @@ const getDataList = (pageParam, params, done) => {
     }, params))
   })
     .then(({ data }) => {
-      dataList.value = data.records
-      page.total = data.total
-      dataListLoading.value = false
-      if (done) done()
+      dataList.value = data.records // 将获取的数据赋值给dataList
+      page.total = data.total // 更新总记录数
+      dataListLoading.value = false // 设置加载状态为false
+      if (done) done() // 如果有完成回调，则调用
     })
 }
 
+// 控制弹窗显示与隐藏
 const addOrUpdateVisible = ref(false)
 const addOrUpdateRef = ref(null)
+
 /**
- * 新增 / 修改
+ * 新增或修改操作
+ * @param id - 商品评论ID（新增时为null）
+ * @param isEdit - 是否是编辑模式
  */
 const onAddOrUpdate = (id, isEdit) => {
-  addOrUpdateVisible.value = true
+  addOrUpdateVisible.value = true // 显示弹窗
   nextTick(() => {
-    addOrUpdateRef.value?.init(id, isEdit)
+    addOrUpdateRef.value?.init(id, isEdit) // 初始化弹窗内容
   })
 }
+
+/**
+ * 删除行
+ * @param row - 要删除的行数据
+ */
 const rowDel = (row) => {
   ElMessageBox.confirm('确定进行删除操作?', '提示', {
     confirmButtonText: '确定',
@@ -94,7 +123,7 @@ const rowDel = (row) => {
   })
     .then(() => {
       http({
-        url: http.adornUrl('/prod/prodComm/' + row.prodCommId),
+        url: http.adornUrl(`/prod/prodComm/${row.prodCommId}`),
         method: 'delete',
         data: http.adornData({})
       })
@@ -104,19 +133,26 @@ const rowDel = (row) => {
             type: 'success',
             duration: 1500,
             onClose: () => {
-              getDataList()
+              getDataList() // 刷新数据列表
             }
           })
         })
-    }).catch(() => { })
+    }).catch(() => { /* 用户取消操作 */ })
 }
+
 /**
- * 刷新回调
+ * 刷新回调，重新加载数据列表
  */
 const refreshChange = () => {
-  getDataList(page)
+  getDataList(page) // 重新加载数据
 }
+
+/**
+ * 搜索条件改变时重新加载数据列表
+ * @param params - 搜索参数
+ * @param done - 完成回调函数
+ */
 const onSearch = (params, done) => {
-  getDataList(page, params, done)
+  getDataList(page, params, done) // 根据搜索参数加载数据
 }
 </script>
diff --git a/front-end/mall4v/src/views/modules/prod/prodInfo/components/prod-transport.vue b/front-end/mall4v/src/views/modules/prod/prodInfo/components/prod-transport.vue
index e21a643..d798070 100644
--- a/front-end/mall4v/src/views/modules/prod/prodInfo/components/prod-transport.vue
+++ b/front-end/mall4v/src/views/modules/prod/prodInfo/components/prod-transport.vue
@@ -1,9 +1,12 @@
 <template>
+  <!-- 商品运费设置模块 -->
   <div class="mod-prod-prod-transport">
+    <!-- 运费设置表单项 -->
     <el-form-item
       label="运费设置"
       :rules="[{ required: true, message: '运费模板不能为空'}]"
     >
+      <!-- 运费模板选择框 -->
       <el-select
         v-model="transportId"
         placeholder="请选择"
@@ -17,6 +20,8 @@
         />
       </el-select>
     </el-form-item>
+
+    <!-- 展示运费详情表格 -->
     <el-form-item>
       <el-table
         v-if="transportInfo.transfees"
@@ -28,7 +33,9 @@
           width="350"
         >
           <template #default="scope">
+            <!-- 如果没有城市列表，则显示“所有地区” -->
             <span v-if="!scope.row.cityList.length">所有地区</span>
+            <!-- 否则显示具体城市 -->
             <el-tag
               v-for="city in scope.row.cityList"
               v-else
@@ -38,6 +45,7 @@
             </el-tag>
           </template>
         </el-table-column>
+        <!-- 动态列标题，根据chargeType改变 -->
         <el-table-column
           prop="firstPiece"
           :label="tableTitle[0]"
@@ -56,6 +64,8 @@
         />
       </el-table>
     </el-form-item>
+
+    <!-- 展示包邮条件 -->
     <el-form-item v-if="transportInfo.hasFreeCondition === 1">
       <el-table
         :data="transportInfo.transfeeFrees"
@@ -97,36 +107,58 @@
 </template>
 
 <script setup>
+import { computed, ref, watch, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+
+// 定义props，接收父组件传递的modelValue
 const props = defineProps({
   modelValue: {
     default: null,
     type: Number
   }
 })
+
+// 定义emits，用于更新父组件的modelValue
 const emit = defineEmits(['input', 'update:modelValue'])
+
+// 绑定运费模板ID
 const transportId = ref(null)
+
+// 计算属性，动态生成表格标题
 const tableTitle = computed(() => {
-  const titles = [['首件(个)', '运费(元)', '续件(个)', '续费(元)'], ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'], ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']]
-  if (transportInfo.value.chargeType) {
+  const titles = [
+    ['首件(个)', '运费(元)', '续件(个)', '续费(元)'],
+    ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'],
+    ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']
+  ]
+  if (transportInfo.value.chargeType !== undefined) {
     return titles[transportInfo.value.chargeType]
   }
   return titles[0]
 })
 
+// 监听props.modelValue的变化，同步到本地变量
 watch(
   () => props.modelValue,
   (id) => {
     transportId.value = id
-  })
+  }
+)
 
+// 组件挂载时获取运费模板列表
 onMounted(() => {
   getTransportList()
 })
 
+// 存储运费模板列表的数据
 const transportList = ref([{
   transportId: null,
   transName: ''
 }])
+
+/**
+ * 获取运费模板列表
+ */
 const getTransportList = () => {
   http({
     url: http.adornUrl('/shop/transport/list'),
@@ -137,12 +169,19 @@ const getTransportList = () => {
       transportList.value = data
     })
 }
+
+// 存储选中运费模板的信息
 const transportInfo = ref({
   hasFreeCondition: false,
   transfeeFrees: [{ freeCityList: [] }]
 })
+
+/**
+ * 当运费模板选择发生变化时触发
+ * @param id - 选中的运费模板ID
+ */
 const changeTransport = (id) => {
-  emit('update:modelValue', id)
+  emit('update:modelValue', id) // 更新父组件的modelValue
   if (!id) {
     return
   }
@@ -152,8 +191,7 @@ const changeTransport = (id) => {
     params: http.adornParams({})
   })
     .then(({ data }) => {
-      transportInfo.value = data
+      transportInfo.value = data // 更新运费模板信息
     })
 }
-
 </script>
diff --git a/front-end/mall4v/src/views/modules/prod/prodInfo/components/sku-table.vue b/front-end/mall4v/src/views/modules/prod/prodInfo/components/sku-table.vue
index ceeff69..80bbc07 100644
--- a/front-end/mall4v/src/views/modules/prod/prodInfo/components/sku-table.vue
+++ b/front-end/mall4v/src/views/modules/prod/prodInfo/components/sku-table.vue
@@ -1,149 +1,170 @@
 <template>
+  <!-- 商品SKU信息管理模块 -->
   <div class="mod-prod-sku-table">
     <el-form-item>
+      <!-- SKU信息表格 -->
       <el-table
-        :data="modelValue"
-        border
-        style="width: 100%; margin-top: 20px"
+        :data="modelValue" <!-- 绑定表格数据 -->
+      border <!-- 显示边框 -->
+      style="width: 100%; margin-top: 20px"
       >
-        <el-table-column
-          v-for="(leftTitle, index) in tableLeftTitles"
-          :key="index"
-          :label="leftTitle"
-        >
-          <template #default="scope">
-            {{ scope.row.properties.split(';')[index].split(':')[1] }}
-          </template>
-        </el-table-column>
-        <el-table-column
-          v-if="tableLeftTitles.length"
-          prop="pic"
-          label="sku图片"
-          width="180"
-        >
-          <template #default="scope">
-            <pic-upload v-model="scope.row.pic" />
-          </template>
-        </el-table-column>
-        <el-table-column
-          v-if="tableLeftTitles.length"
-          prop="prodName"
-          label="商品名称"
-          width="250"
-        >
-          <template #default="scope">
-            <el-input
-              v-model="scope.row.prodName"
-              type="textarea"
-              :disabled="!scope.row.status"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="price"
-          label="销售价"
-          width="160"
-        >
-          <template #default="scope">
-            <el-input-number
-              v-model="scope.row.price"
-              controls-position="right"
-              :precision="2"
-              :max="1000000000"
-              :min="0.01"
-              :disabled="!scope.row.status"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="oriPrice"
-          label="市场价"
-          width="160"
-        >
-          <template #default="scope">
-            <el-input-number
-              v-model="scope.row.oriPrice"
-              controls-position="right"
-              :precision="2"
-              :max="1000000000"
-              :min="0.01"
-              :disabled="!scope.row.status"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="stocks"
-          label="库存"
-          width="160"
-        >
-          <template #default="scope">
-            <el-input-number
-              v-model="scope.row.stocks"
-              :min="0"
-              controls-position="right"
-              type="number"
-              :disabled="!scope.row.status"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="weight"
-          label="商品重量(kg)"
-          width="210"
-        >
-          <template #default="scope">
-            <el-input-number
-              v-model="scope.row.weight"
-              :precision="2"
-              :min="0"
-              controls-position="right"
-              :disabled="!scope.row.status"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="volume"
-          label="商品体积(m³)"
-          width="210"
-        >
-          <template #default="scope">
-            <el-input-number
-              v-model="scope.row.volume"
-              :precision="2"
-              :min="0"
-              controls-position="right"
-              :disabled="!scope.row.status"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="操作"
-        >
-          <template #default="scope">
-            <el-button
-              v-if="scope.row.status"
-              type="text"
-              @click="changeSkuStatus(`${scope.$index}`)"
-            >
-              禁用
-            </el-button>
-            <el-button
-              v-else
-              type="text"
-              @click="changeSkuStatus(`${scope.$index}`)"
-            >
-              启用
-            </el-button>
-          </template>
-        </el-table-column>
+      <!-- 动态生成左侧标题列 -->
+      <el-table-column
+        v-for="(leftTitle, index) in tableLeftTitles" <!-- 循环创建列 -->
+      :key="index"
+      :label="leftTitle" <!-- 列标题 -->
+      >
+      <template #default="scope"> <!-- 自定义单元格内容 -->
+        {{ scope.row.properties.split(';')[index].split(':')[1] }} <!-- 根据properties字段显示属性值 -->
+      </template>
+      </el-table-column>
+
+      <!-- SKU图片列 -->
+      <el-table-column
+        v-if="tableLeftTitles.length" <!-- 如果有左侧标题则显示 -->
+      prop="pic"
+      label="sku图片"
+      width="180"
+      >
+      <template #default="scope"> <!-- 自定义单元格内容 -->
+        <pic-upload v-model="scope.row.pic" /> <!-- 使用自定义上传组件 -->
+      </template>
+      </el-table-column>
+
+      <!-- 商品名称列 -->
+      <el-table-column
+        v-if="tableLeftTitles.length" <!-- 如果有左侧标题则显示 -->
+      prop="prodName"
+      label="商品名称"
+      width="250"
+      >
+      <template #default="scope"> <!-- 自定义单元格内容 -->
+        <el-input
+          v-model="scope.row.prodName" <!-- 绑定输入框值 -->
+        type="textarea" <!-- 设置为文本区域类型 -->
+        :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
+        />
+      </template>
+      </el-table-column>
+
+      <!-- 销售价列 -->
+      <el-table-column
+        prop="price"
+        label="销售价"
+        width="160"
+      >
+        <template #default="scope"> <!-- 自定义单元格内容 -->
+          <el-input-number
+            v-model="scope.row.price" <!-- 绑定输入框值 -->
+          controls-position="right" <!-- 控制按钮位置 -->
+          :precision="2" <!-- 小数点后保留位数 -->
+          :max="1000000000" <!-- 最大值 -->
+          :min="0.01" <!-- 最小值 -->
+          :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
+          />
+        </template>
+      </el-table-column>
+
+      <!-- 市场价列 -->
+      <el-table-column
+        prop="oriPrice"
+        label="市场价"
+        width="160"
+      >
+        <template #default="scope"> <!-- 自定义单元格内容 -->
+          <el-input-number
+            v-model="scope.row.oriPrice" <!-- 绑定输入框值 -->
+          controls-position="right" <!-- 控制按钮位置 -->
+          :precision="2" <!-- 小数点后保留位数 -->
+          :max="1000000000" <!-- 最大值 -->
+          :min="0.01" <!-- 最小值 -->
+          :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
+          />
+        </template>
+      </el-table-column>
+
+      <!-- 库存列 -->
+      <el-table-column
+        prop="stocks"
+        label="库存"
+        width="160"
+      >
+        <template #default="scope"> <!-- 自定义单元格内容 -->
+          <el-input-number
+            v-model="scope.row.stocks" <!-- 绑定输入框值 -->
+          :min="0" <!-- 最小值 -->
+          controls-position="right" <!-- 控制按钮位置 -->
+          type="number" <!-- 类型 -->
+          :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
+          />
+        </template>
+      </el-table-column>
+
+      <!-- 商品重量列 -->
+      <el-table-column
+        prop="weight"
+        label="商品重量(kg)"
+        width="210"
+      >
+        <template #default="scope"> <!-- 自定义单元格内容 -->
+          <el-input-number
+            v-model="scope.row.weight" <!-- 绑定输入框值 -->
+          :precision="2" <!-- 小数点后保留位数 -->
+          :min="0" <!-- 最小值 -->
+          controls-position="right" <!-- 控制按钮位置 -->
+          :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
+          />
+        </template>
+      </el-table-column>
+
+      <!-- 商品体积列 -->
+      <el-table-column
+        prop="volume"
+        label="商品体积(m³)"
+        width="210"
+      >
+        <template #default="scope"> <!-- 自定义单元格内容 -->
+          <el-input-number
+            v-model="scope.row.volume" <!-- 绑定输入框值 -->
+          :precision="2" <!-- 小数点后保留位数 -->
+          :min="0" <!-- 最小值 -->
+          controls-position="right" <!-- 控制按钮位置 -->
+          :disabled="!scope.row.status" <!-- 状态控制是否可编辑 -->
+          />
+        </template>
+      </el-table-column>
+
+      <!-- 操作列 -->
+      <el-table-column
+        label="操作"
+      >
+        <template #default="scope"> <!-- 自定义单元格内容 -->
+          <el-button
+            v-if="scope.row.status" <!-- 如果状态为启用，则显示禁用按钮 -->
+          type="text"
+          @click="changeSkuStatus(`${scope.$index}`)" <!-- 点击事件触发改变状态 -->
+          >
+          禁用
+          </el-button>
+          <el-button
+            v-else <!-- 如果状态为禁用，则显示启用按钮 -->
+          type="text"
+          @click="changeSkuStatus(`${scope.$index}`)" <!-- 点击事件触发改变状态 -->
+          >
+          启用
+          </el-button>
+        </template>
+      </el-table-column>
       </el-table>
     </el-form-item>
   </div>
 </template>
 
 <script setup>
+import { computed, ref, watch, onMounted } from 'vue'
 import { scoreProdStore } from '@/stores/prod.js'
 
+// 定义props接收父组件传递的数据
 const props = defineProps({
   modelValue: {
     default: () => [],
@@ -154,10 +175,17 @@ const props = defineProps({
     type: String
   }
 })
+
+// 定义emits用于更新父组件的数据
 const emit = defineEmits(['update:modelValue'])
-const dbSpecs = ref([]) // 数据库中的规格
+
+// 数据库中的规格列表引用
+const dbSpecs = ref([])
+
+// 初始化标记
 let initing = false
 
+// 计算属性：动态生成表格左侧标题
 const tableLeftTitles = computed(() => {
   const res = []
   for (let i = 0; i < skuTags.value.length; i++) {
@@ -166,16 +194,22 @@ const tableLeftTitles = computed(() => {
   }
   return res
 })
+
+// 获取全局状态存储实例
 const prod = scoreProdStore()
+
+// 计算属性：获取SKU标签
 const skuTags = computed({
   get () { return prod.skuTags }
 })
 
+// 监听商品名称变化，更新SKU名称
 watch(() => props.prodName,
   () => {
     skuAddProdName()
   })
 
+// 组件挂载时初始化
 onMounted(() => {
   http({
     url: http.adornUrl('/prod/spec/list'),
@@ -183,48 +217,58 @@ onMounted(() => {
     params: http.adornParams()
   })
     .then(({ data }) => {
-      dbSpecs.value = data
+      dbSpecs.value = data // 更新数据库中的规格列表
     })
 })
 
+// 初始化方法，暴露给父组件调用
 const init = () => {
   initing = true
 }
 defineExpose({ init })
 
+/**
+ * 改变SKU状态
+ * @param tagIndex - 要改变状态的SKU索引
+ */
 const changeSkuStatus = (tagIndex) => {
-  // eslint-disable-next-line vue/no-mutating-props
-  props.modelValue[tagIndex].status = props.modelValue[tagIndex].status ? 0 : 1
+  props.modelValue[tagIndex].status = props.modelValue[tagIndex].status ? 0 : 1 // 反转状态
 }
+
+/**
+ * 添加或更新商品名称到每个SKU中
+ */
 const skuAddProdName = () => {
-  if (initing) return
+  if (initing) return // 如果正在初始化，则不执行
   const skuList = []
   for (let i = 0; i < props.modelValue.length; i++) {
-    const sku = Object.assign({}, props.modelValue[i])
+    const sku = Object.assign({}, props.modelValue[i]) // 复制当前SKU对象
     if (!sku.properties) {
-      return
+      return // 如果没有properties字段，则跳过
     }
-    sku.skuName = ''
-    const properties = sku.properties.split(';')
+    sku.skuName = '' // 初始化SKU名称
+    const properties = sku.properties.split(';') // 分割properties字符串
     for (const propertiesKey in properties) {
-      sku.skuName += properties[propertiesKey].split(':')[1] + ' '
+      sku.skuName += properties[propertiesKey].split(':')[1] + ' ' // 构建SKU名称
     }
-    sku.prodName = props.prodName + ' ' + sku.skuName
-    skuList.push(sku)
+    sku.prodName = props.prodName + ' ' + sku.skuName // 更新商品名称
+    skuList.push(sku) // 将更新后的SKU添加到列表
   }
-  emit('update:modelValue', skuList)
+  emit('update:modelValue', skuList) // 更新父组件的modelValue
 }
 
 </script>
 
 <style lang="scss" scoped>
-.mod-prod-sku-table{
-   :deep(.pic-uploader-component .el-upload) {
+.mod-prod-sku-table {
+  /* 图片上传样式 */
+  :deep(.pic-uploader-component .el-upload) {
     border: 1px dashed #d9d9d9;
     border-radius: 6px;
     cursor: pointer;
     position: relative;
     overflow: hidden;
+
     .pic-uploader-icon {
       font-size: 28px;
       color: #8c939d;
@@ -233,12 +277,15 @@ const skuAddProdName = () => {
       line-height: 120px;
       text-align: center;
     }
+
     .pic {
       width: 120px;
       height: 120px;
       display: block;
     }
   }
+
+  /* 鼠标悬停时的样式 */
   :deep(.pic-uploader-component .el-upload:hover) {
     border-color: #409EFF;
   }
diff --git a/front-end/mall4v/src/views/modules/prod/prodInfo/components/sku-tag.vue b/front-end/mall4v/src/views/modules/prod/prodInfo/components/sku-tag.vue
index 9f3908f..c36e223 100644
--- a/front-end/mall4v/src/views/modules/prod/prodInfo/components/sku-tag.vue
+++ b/front-end/mall4v/src/views/modules/prod/prodInfo/components/sku-tag.vue
@@ -1,14 +1,18 @@
 <template>
   <div class="mod-prod-sku-tag">
+    <!-- 商品规格表单项 -->
     <el-form-item label="商品规格">
+      <!-- 添加规格按钮 -->
       <el-button @click="shopTagInput()">
         添加规格
       </el-button>
-      <div
-        v-for="(tag, tagIndex) in skuTags"
-        :key="tagIndex"
-      >
+
+      <!-- 遍历skuTags数组，显示每个规格及其值 -->
+      <div v-for="(tag, tagIndex) in skuTags" :key="tagIndex">
+        <!-- 显示规格名称 -->
         <span>{{ tag.tagName }}</span>
+
+        <!-- 删除规格按钮 -->
         <el-button
           class="button-new-tag"
           type="text"
@@ -18,6 +22,8 @@
           删除
         </el-button>
         <br>
+
+        <!-- 遍历当前规格下的所有值，并以标签形式展示 -->
         <el-tag
           v-for="(tagItem, tagItemIndex) in tag.tagItems"
           :key="tagItem.valueId"
@@ -27,6 +33,8 @@
         >
           {{ tagItem.propValue }}
         </el-tag>
+
+        <!-- 如果显示输入框，则渲染一个用于新增规格值的输入框 -->
         <el-input
           v-if="tagItemInputs[tagIndex] && tagItemInputs[tagIndex].visible"
           :ref="`saveTagInput${tagIndex}`"
@@ -35,6 +43,8 @@
           @keyup.enter="handleInputConfirm(tagIndex)"
           @blur="handleInputConfirm(tagIndex)"
         />
+
+        <!-- 否则，显示“+ 添加”按钮以切换到输入框 -->
         <el-button
           v-else
           class="button-new-tag"
@@ -44,11 +54,11 @@
         </el-button>
       </div>
     </el-form-item>
-    <el-form-item
-      v-show="isShowTagInput"
-      label="规格名"
-    >
+
+    <!-- 当isShowTagInput为true时显示规格名选择项 -->
+    <el-form-item v-show="isShowTagInput" label="规格名">
       <el-col :span="8">
+        <!-- 规格名选择器，允许创建新选项 -->
         <el-select
           v-model="addTagInput.propName"
           filterable
@@ -57,6 +67,7 @@
           placeholder="请选择"
           @change="handleTagClick"
         >
+          <!-- 遍历未使用的规格，作为选择器的选项 -->
           <el-option
             v-for="item in unUseTags"
             :key="item.propId"
@@ -66,11 +77,11 @@
         </el-select>
       </el-col>
     </el-form-item>
-    <el-form-item
-      v-show="isShowTagInput"
-      label="规格值"
-    >
+
+    <!-- 当isShowTagInput为true时显示规格值选择项 -->
+    <el-form-item v-show="isShowTagInput" label="规格值">
       <el-col :span="8">
+        <!-- 规格值选择器，支持多选并允许创建新选项 -->
         <el-select
           v-model="addTagInput.selectValues"
           multiple
@@ -79,6 +90,7 @@
           default-first-option
           placeholder="请选择"
         >
+          <!-- 遍历数据库中的规格值，作为选择器的选项 -->
           <el-option
             v-for="item in dbTagValues"
             :key="item.valueId"
@@ -88,7 +100,10 @@
         </el-select>
       </el-col>
     </el-form-item>
+
+    <!-- 操作按钮组，当isShowTagInput为true时显示 -->
     <el-form-item>
+      <!-- 确认按钮，点击后调用addTag方法 -->
       <el-button
         v-show="isShowTagInput"
         type="primary"
@@ -96,6 +111,8 @@
       >
         确定
       </el-button>
+
+      <!-- 取消按钮，点击后隐藏规格名/值输入框 -->
       <el-button
         v-show="isShowTagInput"
         @click="hideTagInput()"
@@ -109,31 +126,54 @@
 <script setup>
 import { ElMessage } from 'element-plus'
 import { scoreProdStore } from '@/stores/prod.js'
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+
+// 获取全局状态存储实例
 const prod = scoreProdStore()
+
+// 定义props接收父组件传递的数据
 const props = defineProps({
   skuList: {
     type: Array,
     default: () => []
   }
 })
+
+// 定义emits用于更新父组件的数据
 const emit = defineEmits(['change'])
+
+// 管理标签输入框显示/隐藏的状态
 const isShowTagInput = ref(false)
+
+// 新增标签时的输入数据模型
 const addTagInput = ref({
-  propName: '',
-  selectValues: []
+  propName: '', // 规格名
+  selectValues: [] // 规格值数组
 })
+
+// 类型标记，用于区分不同的操作类型（如添加或删除）
 const type = ref(0)
+
+// 当前标签项名称引用
 const tagItemName = ref('')
+
+// 标签项输入框数组
 const tagItemInputs = ref([])
-const dbTagValues = ref([]) // 根据选定的规格所查询出来的规格值
-const dbTags = ref([]) // 数据库中的规格
 
+// 数据库中的规格值引用
+const dbTagValues = ref([])
+
+// 数据库中的规格引用
+const dbTags = ref([])
+
+// 变量初始化
 let tagName = ''
 let tagNameIndex = 0
 let maxValueId = 0 // 规格值id最大
 let maxPropId = 0 // 规格id 最大
 let initing = false
 
+// 计算属性：获取并设置SKU标签
 const skuTags = computed({
   get () { return prod.skuTags },
   set (val) { prod.updateSkuTags(val) }
@@ -154,10 +194,10 @@ const unUseTags = computed(() => {
   return res
 })
 
-const defalutSku = computed(() => {
-  return prod.defalutSku
-})
+// 默认SKU计算属性
+const defalutSku = computed(() => prod.defalutSku)
 
+// 监听skuTags变化，更新SKU列表
 watch(() => skuTags.value,
   (val) => {
     if (initing) {
@@ -165,6 +205,8 @@ watch(() => skuTags.value,
       return
     }
     let skuListArr = []
+
+    // 根据type的不同处理SKU列表的变化
     if (type.value === 4) {
       // 删除规格值
       props.skuList?.forEach(sku => {
@@ -175,19 +217,19 @@ watch(() => skuTags.value,
       })
     } else if (type.value === 2) {
       // 添加规格值
-      const properties = tagName + ':' + tagItemName.value
+      const properties = `${tagName}:${tagItemName.value}`
       // 增加或删除规格
       let tempSkuList = []
       val?.forEach(tag => {
         if (skuListArr.length === 0) {
           if (tagName === tag.tagName) {
             const sku = Object.assign({}, defalutSku.value)
-            sku.properties = properties // 销售属性组合字符串
+            sku.properties = properties
             skuListArr.push(sku)
           } else {
             tag.tagItems.forEach(tagItem => {
               const sku = Object.assign({}, defalutSku.value)
-              sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
+              sku.properties = `${tag.tagName}:${tagItem.propValue}`
               skuListArr.push(sku)
             })
           }
@@ -225,7 +267,7 @@ watch(() => skuTags.value,
         if (skuListArr.length === 0) {
           tag.tagItems.forEach(tagItem => {
             const sku = Object.assign({}, defalutSku.value)
-            sku.properties = `${tag.tagName}:${tagItem.propValue}` // 销售属性组合字符串
+            sku.properties = `${tag.tagName}:${tagItem.propValue}`
             skuListArr.push(sku)
           })
         } else {
@@ -241,45 +283,52 @@ watch(() => skuTags.value,
         }
       })
     }
+
+    // 如果没有生成任何SKU，则添加一个默认SKU
     if (!skuListArr.length) {
       skuListArr.push(Object.assign({}, defalutSku.value))
     }
-    // debugger
+
+    // 更新父组件的SKU列表
     emit('change', skuListArr)
-  },
-  {
+  }, {
     deep: true
-  }
-)
+  })
 
+// 组件挂载时初始化
 onMounted(() => {
+  // 获取所有规格列表
   http({
     url: http.adornUrl('/prod/spec/list'),
     method: 'get',
     params: http.adornParams()
+  }).then(({ data }) => {
+    dbTags.value = data
+    if (data) {
+      maxPropId = Math.max.apply(Math, data.map(item => item.propId))
+    } else {
+      maxPropId = 0
+    }
   })
-    .then(({ data }) => {
-      dbTags.value = data
-      if (data) {
-        maxPropId = Math.max.apply(Math, data.map(item => item.propId))
-      } else {
-        maxPropId = 0
-      }
-    })
+
+  // 获取最大的规格值ID
   http({
     url: http.adornUrl('/prod/spec/listSpecMaxValueId'),
     method: 'get',
     params: http.adornParams()
+  }).then(({ data }) => {
+    if (data) {
+      maxValueId = data
+    } else {
+      maxValueId = 0
+    }
   })
-    .then(({ data }) => {
-      if (data) {
-        maxValueId = data
-      } else {
-        maxValueId = 0
-      }
-    })
 })
 
+/**
+ * 初始化SKU标签和列表
+ * @param {Array} skuList - SKU列表
+ */
 const init = (skuList) => {
   if (!skuList || !skuList.length) {
     skuTags.value = []
@@ -319,12 +368,16 @@ const shopTagInput = () => {
 }
 
 /**
- * 隐藏规格名、规格值输入框
+ * 隐藏规格名、规格值输入框，并清除内容
  */
 const hideTagInput = () => {
   isShowTagInput.value = false
   cleanTagInput()
 }
+
+/**
+ * 添加新的规格和规格值
+ */
 const addTag = () => {
   const selectValues = addTagInput.value.selectValues
   if (!addTagInput.value.propName) {
@@ -397,7 +450,9 @@ const handleTagClick = () => {
 }
 
 /**
- * 规格名输入框，选中规格事件
+ * 删除规格值
+ * @param {number} tagIndex - 标签索引
+ * @param {number} tagItemIndex - 标签项索引
  */
 const handleTagClose = (tagIndex, tagItemIndex) => {
   tagName = skuTags.value[tagIndex].tagName
@@ -412,6 +467,7 @@ const handleTagClose = (tagIndex, tagItemIndex) => {
 
 /**
  * 标签输入框确定时调用
+ * @param {number} tagIndex - 标签索引
  */
 const handleInputConfirm = (tagIndex) => {
   if (checkTagItem(tagIndex)) {
@@ -434,6 +490,7 @@ const handleInputConfirm = (tagIndex) => {
 
 /**
  * 显示标签输入框
+ * @param {number} tagIndex - 标签索引
  */
 const showTagInput = (tagIndex) => {
   tagItemInputs.value.push({ visible: false, value: '' })
@@ -445,6 +502,8 @@ const showTagInput = (tagIndex) => {
 
 /**
  * 获取数据集合所有对象中某个属性的最大值
+ * @param {Array} list - 对象数组
+ * @returns {number} 最大值
  */
 const getMaxValueId = (list) => {
   return Math.max.apply(Math, list.map(item => item.valueId))
@@ -452,7 +511,7 @@ const getMaxValueId = (list) => {
 
 /**
  * 删除 规格
- * @param tagIndex
+ * @param {number} tagIndex - 标签索引
  */
 const removeTag = (tagIndex) => {
   type.value = 3
@@ -461,6 +520,8 @@ const removeTag = (tagIndex) => {
 
 /**
  * 新增规格值时，判断是否存在同名的规格值
+ * @param {number} tagIndex - 标签索引
+ * @returns {boolean} 是否存在重复
  */
 const checkTagItem = (tagIndex) => {
   const tagItem = tagItemInputs.value[tagIndex].value
@@ -476,7 +537,7 @@ const checkTagItem = (tagIndex) => {
     })
     if (arr.indexOf(tagItem) > -1) {
       isSame = true
-      ElMessage.error('product.specificationValue')
+      ElMessage.error('product.specificationValue') // 这里可能需要替换为实际的错误消息
       return false
     }
   })
@@ -486,49 +547,67 @@ const checkTagItem = (tagIndex) => {
 
 <style lang="scss" scoped>
 .mod-prod-sku-tag {
+  // 定义el-tag之间的间距
   :deep(.el-tag + .el-tag) {
-    margin-left: 10px;
+    margin-left: 10px; // 设置相邻标签的左间距
   }
+
+  // 新增标签按钮的样式
   .button-new-tag {
-    margin-left: 10px;
-    height: 32px;
-    line-height: 30px;
-    padding-top: 0;
-    padding-bottom: 0;
+    margin-left: 10px; // 设置新增标签按钮与前一个元素的左间距
+    height: 32px; // 设置按钮高度
+    line-height: 30px; // 设置行高以垂直居中文字
+    padding-top: 0; // 移除顶部内边距
+    padding-bottom: 0; // 移除底部内边距
   }
+
+  // 新增标签输入框的样式
   .input-new-tag {
-    width: 90px;
-    margin-left: 10px;
-    vertical-align: bottom;
+    width: 90px; // 设置输入框宽度
+    margin-left: 10px; // 设置输入框左间距
+    vertical-align: bottom; // 设置垂直对齐方式为底部对齐
   }
 }
 
-// 新增规格外部边框
+// 新增规格外部边框样式
 :deep(.sku-border) {
-  border: 1px solid #EBEEF5;
-  width:70%
+  border: 1px solid #EBEEF5; // 设置边框颜色和粗细
+  width: 70%; // 设置宽度占父容器的比例
 }
-:deep(.sku-background){
-  background-color: #F6f6f6;
-  margin: 12px 12px;
-  .el-button{
-    margin-left: 10px;
-    span{
-      color:#000 !important;
+
+// SKU背景样式
+:deep(.sku-background) {
+  background-color: #F6f6f6; // 设置背景颜色
+  margin: 12px 12px; // 设置外边距
+
+  // 修改按钮样式
+  .el-button {
+    margin-left: 10px; // 设置按钮左间距
+
+    span {
+      color: #000 !important; // 强制设置按钮文字颜色为黑色
     }
   }
-  .el-form-item__label{
-    padding:0 24px 0 0
+
+  // 修改表单项标签样式
+  .el-form-item__label {
+    padding: 0 24px 0 0; // 调整表单项标签的内边距
   }
 }
-:deep(.sku-tag){
-  margin: 12px 12px;
+
+// SKU标签样式
+:deep(.sku-tag) {
+  margin: 12px 12px; // 设置标签的外边距
 }
-:deep(.tagTree){
-  margin-left: 18px;
-  padding-bottom:8px;
+
+// 标签树样式
+:deep(.tagTree) {
+  margin-left: 18px; // 设置标签树的左间距
+  padding-bottom: 8px; // 设置标签树底部的内边距
 }
+
+// 表单项内容中的div样式
 .el-form-item__content div {
-  width: 100%;
+  width: 100%; // 设置div的宽度为100%，确保其占据整个表单项内容区域
 }
 </style>
diff --git a/front-end/mall4v/src/views/modules/prod/prodInfo/index.vue b/front-end/mall4v/src/views/modules/prod/prodInfo/index.vue
index f60a30b..0f80984 100644
--- a/front-end/mall4v/src/views/modules/prod/prodInfo/index.vue
+++ b/front-end/mall4v/src/views/modules/prod/prodInfo/index.vue
@@ -1,28 +1,22 @@
 <template>
   <div class="mod-prod-info">
-    <el-form
-      ref="dataFormRef"
-      :model="dataForm"
-      label-width="100px"
-    >
+    <!-- 使用el-form构建一个表单，并设置引用 -->
+    <el-form ref="dataFormRef" :model="dataForm" label-width="100px">
+      <!-- 产品图片上传 -->
       <el-form-item label="产品图片">
         <mul-pic-upload v-model="dataForm.imgs" />
       </el-form-item>
+
+      <!-- 产品上架/下架状态选择 -->
       <el-form-item label="状态">
         <el-radio-group v-model="dataForm.status">
-          <el-radio :label="1">
-            上架
-          </el-radio>
-          <el-radio :label="0">
-            下架
-          </el-radio>
+          <el-radio :label="1">上架</el-radio>
+          <el-radio :label="0">下架</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item
-        label="产品分类"
-        :rules="[{ required: true, message: '请选择产品分类'}]"
-        prop="categoryId"
-      >
+
+      <!-- 产品分类选择 -->
+      <el-form-item label="产品分类" prop="categoryId" :rules="[...rules]">
         <el-col :span="8">
           <el-cascader
             v-model="category.selected"
@@ -34,97 +28,53 @@
           />
         </el-col>
       </el-form-item>
-      <el-form-item
-        label="产品分组"
-        :rules="[{ required: true, message: '请选择产品分组'}]"
-      >
+
+      <!-- 产品分组多选 -->
+      <el-form-item label="产品分组" prop="tagList" :rules="[...rules]">
         <el-col :span="8">
-          <el-select
-            v-model="dataForm.tagList"
-            multiple
-            style="width: 250px"
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in tags"
-              :key="item.id"
-              :label="item.title"
-              :value="item.id"
-            />
+          <el-select v-model="dataForm.tagList" multiple style="width: 250px" placeholder="请选择">
+            <el-option v-for="item in tags" :key="item.id" :label="item.title" :value="item.id" />
           </el-select>
         </el-col>
       </el-form-item>
-      <el-form-item
-        label="产品名称"
-        prop="prodName"
-        :rules="[
-          { required: true, message: '产品名称不能为空'},
-          { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的产品名称', trigger: 'blur' }
-        ]"
-      >
+
+      <!-- 产品名称输入框 -->
+      <el-form-item label="产品名称" prop="prodName" :rules="[...rules]">
         <el-col :span="8">
-          <el-input
-            v-model="dataForm.prodName"
-            placeholder="产品名称"
-            maxlength="50"
-          />
+          <el-input v-model="dataForm.prodName" placeholder="产品名称" maxlength="50" />
         </el-col>
       </el-form-item>
-      <el-form-item
-        label="产品卖点"
-        prop="brief"
-        :rules="[
-          { required: false, pattern: /\s\S+|S+\s|\S/, message: '请输入正确的产品卖点', trigger: 'blur' }
-        ]"
-      >
+
+      <!-- 产品卖点文本域 -->
+      <el-form-item label="产品卖点" prop="brief" :rules="[...rules]">
         <el-col :span="8">
-          <el-input
-            v-model="dataForm.brief"
-            type="textarea"
-            :autosize="{minRows: 2, maxRows: 4}"
-            placeholder="产品卖点"
-          />
+          <el-input v-model="dataForm.brief" type="textarea" :autosize="{minRows: 2, maxRows: 4}" placeholder="产品卖点" />
         </el-col>
       </el-form-item>
+
+      <!-- 配送方式选择 -->
       <el-form-item label="配送方式">
-        <el-checkbox v-model="dataForm.deliveryMode.hasShopDelivery">
-          商家配送
-        </el-checkbox>
-        <el-checkbox v-model="dataForm.deliveryMode.hasUserPickUp">
-          用户自提
-        </el-checkbox>
+        <el-checkbox v-model="dataForm.deliveryMode.hasShopDelivery">商家配送</el-checkbox>
+        <el-checkbox v-model="dataForm.deliveryMode.hasUserPickUp">用户自提</el-checkbox>
       </el-form-item>
-      <prod-transport
-        v-show="dataForm.deliveryMode.hasShopDelivery"
-        v-model="dataForm.deliveryTemplateId"
-      />
-      <sku-tag
-        ref="skuTagRef"
-        :sku-list="dataForm.skuList"
-        @change="skuTagChangeSkuHandler"
-      />
-      <sku-table
-        ref="skuTableRef"
-        v-model="dataForm.skuList"
-        :prod-name="dataForm.prodName"
-      />
-      <el-form-item
-        label="产品详情"
-        prop="content"
-      >
-        <tiny-mce
-          ref="contentRef"
-          v-model="dataForm.content"
-          style="width:1000px"
-        />
+
+      <!-- 商家配送模板选择，仅当选择了商家配送时显示 -->
+      <prod-transport v-show="dataForm.deliveryMode.hasShopDelivery" v-model="dataForm.deliveryTemplateId" />
+
+      <!-- SKU标签组件，用于管理商品规格 -->
+      <sku-tag ref="skuTagRef" :sku-list="dataForm.skuList" @change="skuTagChangeSkuHandler" />
+
+      <!-- SKU表格组件，展示SKU详细信息 -->
+      <sku-table ref="skuTableRef" v-model="dataForm.skuList" :prod-name="dataForm.prodName" />
+
+      <!-- 产品详情富文本编辑器 -->
+      <el-form-item label="产品详情" prop="content">
+        <tiny-mce ref="contentRef" v-model="dataForm.content" style="width:1000px" />
       </el-form-item>
+
+      <!-- 提交按钮 -->
       <el-form-item>
-        <el-button
-          type="primary"
-          @click="onSubmit()"
-        >
-          确定
-        </el-button>
+        <el-button type="primary" @click="onSubmit()">确定</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -138,18 +88,20 @@ import SkuTag from './components/sku-tag.vue'
 import SkuTable from './components/sku-table.vue'
 import { Debounce } from '@/utils/debounce'
 
+// 定义事件发射器
 const emit = defineEmits(['refreshDataList'])
 
-// 分类树展示与回显
+// 分类树展示与回显数据
 const category = reactive({
-  list: [],
-  selected: [],
+  list: [], // 分类列表
+  selected: [], // 当前选择的分类
   props: {
     value: 'categoryId',
     label: 'categoryName'
   }
 })
-// 规格列表
+
+// 表单模型数据
 const dataForm = ref({
   prodName: '',
   brief: '',
@@ -167,22 +119,28 @@ const dataForm = ref({
   },
   deliveryTemplateId: null
 })
+
+// 分组标签数据
 const tags = ref([])
+
+// 获取路由参数中的产品ID
 onMounted(() => {
   dataForm.value.prodId = useRoute().query.prodId
   getDataList()
 })
 
+// 引用子组件实例
 const skuTableRef = ref(null)
 const skuTagRef = ref(null)
+
 /**
- * 获取分类数据
+ * 获取所有必要的数据列表
  */
 const getDataList = () => {
   getTagList()
   getCategoryList().then(() => {
     if (dataForm.value.prodId) {
-      // 获取产品数据
+      // 如果存在产品ID，则获取具体产品信息并填充表单
       http({
         url: http.adornUrl(`/prod/prod/info/${dataForm.value.prodId}`),
         method: 'get',
@@ -198,6 +156,7 @@ const getDataList = () => {
         })
     } else {
       nextTick(() => {
+        // 初始化表单，清除所有字段
         dataFormRef.value?.resetFields()
         skuTagRef.value?.init()
         dataForm.value.pic = ''
@@ -206,49 +165,48 @@ const getDataList = () => {
     }
   })
 }
+
 /**
- * 获取分类信息
+ * 获取分类信息并转换为树形结构
  */
 const getCategoryList = () => {
   return http({
     url: http.adornUrl('/prod/category/listCategory'),
     method: 'get',
     params: http.adornParams()
+  }).then(({ data }) => {
+    category.list = treeDataTranslate(data, 'categoryId', 'parentId')
   })
-    .then(({ data }) => {
-      category.list = treeDataTranslate(data, 'categoryId', 'parentId')
-    })
 }
+
 /**
- * 选择分类改变事件
- * @param val
+ * 处理分类改变事件，更新分类ID
  */
 const handleCategoryChange = (val) => {
   dataForm.value.categoryId = val[val.length - 1]
 }
 
+// 获取路由实例
 const router = useRouter()
+
+// 表单引用
 const dataFormRef = ref(null)
+
 /**
- * 表单提交
+ * 提交表单，添加或更新产品信息
  */
 const onSubmit = Debounce(() => {
   dataFormRef.value?.validate((valid) => {
     if (!valid) {
       return
     }
-    if (!dataForm.value.imgs) {
-      errorMsg('请选择图片上传')
-      return
-    }
-    if (!dataForm.value.deliveryMode) {
-      errorMsg('请选择配送方式')
-      return
-    }
-    if (dataForm.value.deliveryMode.hasShopDelivery && !dataForm.value.deliveryTemplateId) {
-      errorMsg('请选择运费模板')
+    // 校验表单完整性
+    if (!dataForm.value.imgs || !dataForm.value.deliveryMode ||
+      (dataForm.value.deliveryMode.hasShopDelivery && !dataForm.value.deliveryTemplateId)) {
+      errorMsg('请检查表单内容')
       return
     }
+
     const param = Object.assign({}, dataForm.value)
     // 设置价格和库存
     paramSetPriceAndStocks(param)
@@ -257,69 +215,73 @@ const onSubmit = Debounce(() => {
     param.deliveryModeVo = dataForm.value.deliveryMode
     // 商品主图
     param.pic = dataForm.value.imgs.split(',')[0]
+
+    // 发送HTTP请求保存或更新产品信息
     http({
       url: http.adornUrl('/prod/prod'),
       method: param.prodId ? 'put' : 'post',
       data: http.adornData(param)
-    })
-      .then(() => {
-        ElMessage({
-          message: '操作成功',
-          type: 'success',
-          duration: 1500,
-          onClose: () => {
-            router.push({
-              path: '/prod/prodList'
-            })
-            emit('refreshDataList')
-          }
-        })
+    }).then(() => {
+      ElMessage({
+        message: '操作成功',
+        type: 'success',
+        duration: 1500,
+        onClose: () => {
+          // 成功后跳转到产品列表页，并刷新列表
+          router.push({ path: '/prod/prodList' })
+          emit('refreshDataList')
+        }
       })
+    })
   })
 })
 
+/**
+ * 设置商品价格和库存总量
+ */
 const paramSetPriceAndStocks = (param) => {
-  // 商品库存
   param.totalStocks = 0
-  // 商品价格
   param.price = 0
-  // 商品原价
   param.oriPrice = 0
-  // 商品实际库存
+
   for (let i = 0; i < param.skuList.length; i++) {
     const element = param.skuList[i]
-    if (element.status !== 1) {
-      continue
-    }
-    if (param.price === 0) {
-      param.price = element.price ? Number.parseFloat(element.price) : 0
-    }
-    // 商品价格为最低价的那件商品的价格
+    if (element.status !== 1) continue
+
+    if (param.price === 0) param.price = Number.parseFloat(element.price || 0)
+
     param.price = Math.min(param.price, element.price)
-    if (param.price === element.price) {
-      param.oriPrice = element.oriPrice ? Number.parseFloat(element.oriPrice) : 0
-    }
-    param.totalStocks += element.stocks ? Number.parseInt(element.stocks) : 0
+    if (param.price === element.price) param.oriPrice = Number.parseFloat(element.oriPrice || 0)
+
+    param.totalStocks += Number.parseInt(element.stocks || 0)
   }
-  // 如果sku没有商品名称，则使用商品的商品名称
+
   if (param.skuList.length === 1) {
     param.skuList[0].prodName = dataForm.value.prodName
   }
 }
+
+/**
+ * 处理SKU变化事件，更新SKU名称
+ */
 const skuTagChangeSkuHandler = (skuList) => {
   const prodName = dataForm.value.prodName
   skuList.forEach(sku => {
     if (sku.properties) {
       sku.skuName = ''
       const properties = sku.properties.split(';')
-      for (const propertiesKey in properties) {
-        sku.skuName += properties[propertiesKey].split(':')[1] + ' '
+      for (const property of properties) {
+        sku.skuName += property.split(':')[1] + ' '
       }
-      sku.prodName = prodName + ' ' + sku.skuName
+      sku.prodName = prodName + ' ' + sku.skuName.trim()
     }
   })
   dataForm.value.skuList = skuList
 }
+
+/**
+ * 显示错误消息
+ */
 const errorMsg = (message) => {
   ElMessage({
     message,
@@ -336,9 +298,8 @@ const getTagList = () => {
     url: http.adornUrl('/prod/prodTag/listTagList'),
     method: 'get',
     params: http.adornParams()
+  }).then(({ data }) => {
+    tags.value = data
   })
-    .then(({ data }) => {
-      tags.value = data
-    })
 }
 </script>
diff --git a/front-end/mall4v/src/views/modules/prod/prodList/index.vue b/front-end/mall4v/src/views/modules/prod/prodList/index.vue
index 2175088..e27b83e 100644
--- a/front-end/mall4v/src/views/modules/prod/prodList/index.vue
+++ b/front-end/mall4v/src/views/modules/prod/prodList/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="mod-prod">
+    <!-- 使用avue-crud构建一个CRUD表格，并设置引用 -->
     <avue-crud
       ref="crudRef"
       :page="page"
@@ -11,6 +12,7 @@
       @selection-change="selectionChange"
       @on-load="getDataList"
     >
+      <!-- 自定义左侧菜单按钮 -->
       <template #menu-left>
         <el-button
           v-if="isAuth('shop:pickAddr:save')"
@@ -31,6 +33,7 @@
         </el-button>
       </template>
 
+      <!-- 自定义状态列内容 -->
       <template #status="scope">
         <el-tag v-if="scope.row.status === 1">
           上架
@@ -40,6 +43,7 @@
         </el-tag>
       </template>
 
+      <!-- 自定义行操作菜单 -->
       <template #menu="scope">
         <el-button
           v-if="isAuth('prod:prod:update')"
@@ -66,19 +70,29 @@
 import { isAuth } from '@/utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { tableOption } from '@/crud/prod/prodList.js'
+
+// 导入路由实例
+const router = useRouter()
+
+// 权限检查对象，动态控制删除按钮是否显示
 const permission = reactive({
   delBtn: isAuth('prod:prod:delete')
 })
+
+// 数据列表
 const dataList = ref([])
+
+// 分页信息
 const page = reactive({
-  total: 0, // 总页数
-  currentPage: 1, // 当前页数
-  pageSize: 10 // 每页显示多少条
+  total: 0, // 总记录数
+  currentPage: 1, // 当前页码
+  pageSize: 10 // 每页大小
 })
+
+// 表格加载状态
 const dataListLoading = ref(false)
-/**
- * 获取数据列表
- */
+
+// 获取数据列表方法
 const getDataList = (pageParam, params, done) => {
   dataListLoading.value = true
   http({
@@ -95,23 +109,20 @@ const getDataList = (pageParam, params, done) => {
     )
   })
     .then(({ data }) => {
-      dataList.value = data.records
-      for (const key in dataList.value) {
-        // eslint-disable-next-line no-prototype-builtins
-        if (dataList.value.hasOwnProperty(key)) {
-          const element = dataList.value[key]
-          element.imgs = element.imgs.split(',')[0]
-        }
-      }
+      // 更新数据列表并处理图片字段
+      dataList.value = data.records.map(element => ({
+        ...element,
+        imgs: element.imgs.split(',')[0]
+      }))
       page.total = data.total
       dataListLoading.value = false
       if (done) done()
     })
 }
-const router = useRouter()
+
 /**
- * 新增 / 修改
- * @param id
+ * 新增或编辑商品信息
+ * @param id - 商品ID，如果存在则为编辑，否则为新增
  */
 const onAddOrUpdate = (id) => {
   router.push({
@@ -119,19 +130,21 @@ const onAddOrUpdate = (id) => {
     query: { prodId: id }
   })
 }
+
 /**
- * 删除和批量删除
- * @param id
+ * 删除或批量删除商品信息
+ * @param id - 单个商品ID，若不存在则执行批量删除
  */
 const onDelete = (id) => {
   const prodIds = getSeleProdIds()
   if (id) {
     prodIds.push(id)
   }
+
   ElMessageBox.confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
-    type: 'warning'
+    type: '警告'
   })
     .then(() => {
       http({
@@ -150,32 +163,33 @@ const onDelete = (id) => {
           })
         })
     })
-    .catch(() => { })
+    .catch(() => {})
 }
+
 /**
- * 条件查询
- * @param params
- * @param done
+ * 条件查询触发的数据获取
+ * @param params - 查询参数
+ * @param done - 完成回调
  */
 const onSearch = (params, done) => {
   getDataList(page, params, done)
 }
 
+// 多选变化后的选择项
 const dataListSelections = ref([])
+
 /**
- * 多选变化
- * @param val
+ * 多选变化事件处理器
+ * @param val - 选中的行数据
  */
 const selectionChange = (val) => {
   dataListSelections.value = val
 }
+
 /**
- * 获取选中的商品Id列表
+ * 获取选中的商品ID列表
  */
 const getSeleProdIds = () => {
-  return dataListSelections.value?.map(item => {
-    return item.prodId
-  })
+  return dataListSelections.value?.map(item => item.prodId) || []
 }
-
 </script>
diff --git a/front-end/mall4v/src/views/modules/prod/prodTag/add-or-update.vue b/front-end/mall4v/src/views/modules/prod/prodTag/add-or-update.vue
index e150923..f39ca68 100644
--- a/front-end/mall4v/src/views/modules/prod/prodTag/add-or-update.vue
+++ b/front-end/mall4v/src/views/modules/prod/prodTag/add-or-update.vue
@@ -4,6 +4,7 @@
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
   >
+    <!-- 表单 -->
     <el-form
       ref="dataFormRef"
       :model="dataForm"
@@ -11,50 +12,37 @@
       label-width="80px"
       @keyup.enter="onSubmit()"
     >
+      <!-- 标签名称 -->
       <el-form-item
         label="标签名称"
+        prop="title"
         :rules="[
           { required: true, message: '标签名称不能为空', trigger: 'blur' },
-          { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的标签名称', trigger: 'blur' }
+          { pattern: /\s\S+|\S\s|\S/, message: '请输入正确的标签名称', trigger: 'blur' }
         ]"
-        prop="title"
       >
         <el-input v-model="dataForm.title" />
       </el-form-item>
-      <el-form-item
-        label="状态"
-        prop="status"
-      >
+
+      <!-- 状态选择 -->
+      <el-form-item label="状态" prop="status">
         <el-radio-group v-model="dataForm.status">
-          <el-radio :label="1">
-            正常
-          </el-radio>
-          <el-radio :label="0">
-            禁用
-          </el-radio>
+          <el-radio :label="1">正常</el-radio>
+          <el-radio :label="0">禁用</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item
-        label="列表样式"
-        prop="style"
-      >
+
+      <!-- 列表样式选择 -->
+      <el-form-item label="列表样式" prop="style">
         <el-radio-group v-model="dataForm.style">
-          <el-radio :label="0">
-            一列一个
-          </el-radio>
-          <el-radio :label="1">
-            一列两个
-          </el-radio>
-          <el-radio :label="2">
-            一列三个
-          </el-radio>
+          <el-radio :label="0">一列一个</el-radio>
+          <el-radio :label="1">一列两个</el-radio>
+          <el-radio :label="2">一列三个</el-radio>
         </el-radio-group>
       </el-form-item>
 
-      <el-form-item
-        label="排序"
-        prop="seq"
-      >
+      <!-- 排序 -->
+      <el-form-item label="排序" prop="seq">
         <el-input-number
           v-model="dataForm.seq"
           controls-position="right"
@@ -63,17 +51,12 @@
         />
       </el-form-item>
     </el-form>
+
+    <!-- 对话框底部按钮 -->
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="visible = false">
-          取消
-        </el-button>
-        <el-button
-          type="primary"
-          @click="onSubmit()"
-        >
-          确定
-        </el-button>
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="onSubmit()">确定</el-button>
       </div>
     </template>
   </el-dialog>
@@ -82,55 +65,76 @@
 <script setup>
 import { ElMessage } from 'element-plus'
 import { Debounce } from '@/utils/debounce'
+import { ref, nextTick, defineEmits, defineExpose } from 'vue'
+
+// 定义事件发射器，用于向父组件发送事件
 const emit = defineEmits(['refreshDataList'])
+
+// 控制对话框显示/隐藏的布尔值
 const visible = ref(false)
+
+// 表单验证规则对象（此处未定义具体规则）
 const dataRule = {}
+
+// 数据表单对象，初始化默认值
 const dataForm = ref({
   id: null,
   title: null,
   shopId: null,
-  status: 1,
+  status: 1, // 默认为正常状态
   isDefault: null,
   prodCount: null,
-  seq: 0,
-  style: 0
+  seq: 0, // 默认排序值为0
+  style: 0 // 默认列表样式为一列一个
 })
 
+// 初始化方法，接受可选的产品标签ID作为参数
 const init = (id) => {
   dataForm.value.id = id || 0
   visible.value = true
   nextTick(() => {
+    // 如果存在引用，则重置表单字段
     dataFormRef.value?.resetFields()
     if (dataForm.value.id) {
+      // 如果有ID，说明是编辑模式，获取对应的数据并填充到表单中
       http({
         url: http.adornUrl('/prod/prodTag/info/' + dataForm.value.id),
         method: 'get',
         params: http.adornParams()
       })
         .then(({ data }) => {
-          dataForm.value = data
+          Object.assign(dataForm.value, data)
         })
     }
   })
 }
+
+// 将init方法暴露出去，允许父组件调用
 defineExpose({ init })
 
+// 表单引用
 const dataFormRef = ref(null)
+
 /**
- * 表单提交
+ * 提交表单
  */
 const onSubmit = Debounce(() => {
+  // 如果排序值为空，设置默认值0
   if (!dataForm.value.seq) {
     dataForm.value.seq = 0
   }
+
+  // 验证表单
   dataFormRef.value?.validate((valid) => {
     if (valid) {
+      // 发起HTTP请求，根据是否存在ID来决定是更新还是创建新记录
       http({
         url: http.adornUrl('/prod/prodTag'),
         method: dataForm.value.id ? 'put' : 'post',
         data: http.adornData(dataForm.value)
       })
         .then(() => {
+          // 显示成功消息，并在关闭对话框后刷新数据列表
           ElMessage({
             message: '操作成功',
             type: 'success',
@@ -144,5 +148,4 @@ const onSubmit = Debounce(() => {
     }
   })
 })
-
 </script>
diff --git a/front-end/mall4v/src/views/modules/prod/prodTag/index.vue b/front-end/mall4v/src/views/modules/prod/prodTag/index.vue
index f8a92f2..00a779f 100644
--- a/front-end/mall4v/src/views/modules/prod/prodTag/index.vue
+++ b/front-end/mall4v/src/views/modules/prod/prodTag/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="mod-prod-prodTag">
+    <!-- 使用avue-crud构建CRUD表格 -->
     <avue-crud
       ref="crudRef"
       :page="page"
@@ -10,6 +11,7 @@
       @on-load="getDataList"
       @refresh-change="refreshChange"
     >
+      <!-- 自定义左侧菜单按钮 -->
       <template #menu-left>
         <el-button
           v-if="isAuth('prod:prodTag:save')"
@@ -20,14 +22,15 @@
           新增
         </el-button>
       </template>
+
+      <!-- 自定义标题列内容 -->
       <template #title="scope">
         {{ scope.row.title || '-' }}
       </template>
+
+      <!-- 自定义状态列内容 -->
       <template #status="scope">
-        <el-tag
-          v-if="scope.row.status === 0"
-          type="danger"
-        >
+        <el-tag v-if="scope.row.status === 0" type="danger">
           禁用
         </el-tag>
         <el-tag v-else>
@@ -35,6 +38,7 @@
         </el-tag>
       </template>
 
+      <!-- 自定义默认类型列内容 -->
       <template #isDfault="scope">
         <el-tag v-if="scope.row.isDefault === 0">
           自定义类型
@@ -44,6 +48,7 @@
         </el-tag>
       </template>
 
+      <!-- 自定义行操作菜单 -->
       <template #menu="scope">
         <el-button
           v-if="isAuth('prod:prodTag:update')"
@@ -63,6 +68,8 @@
         </el-button>
       </template>
     </avue-crud>
+
+    <!-- 引入用于添加或更新记录的子组件 -->
     <add-or-update
       v-if="addOrUpdateVisible"
       ref="addOrUpdateRef"
@@ -76,15 +83,24 @@ import { isAuth } from '@/utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { tableOption } from '@/crud/prod/prodTag.js'
 import AddOrUpdate from './add-or-update.vue'
+import { ref, reactive, nextTick } from 'vue'
 
+// 数据列表
 const dataList = ref([])
+
+// 分页信息
 const page = reactive({
-  total: 0, // 总页数
-  currentPage: 1, // 当前页数
-  pageSize: 10 // 每页显示多少条
+  total: 0, // 总记录数
+  currentPage: 1, // 当前页码
+  pageSize: 10 // 每页大小
 })
+
+// 表格加载状态
 const dataListLoading = ref(false)
 
+/**
+ * 获取数据列表方法
+ */
 const getDataList = (pageParam, params, done) => {
   dataListLoading.value = true
   http({
@@ -103,11 +119,13 @@ const getDataList = (pageParam, params, done) => {
     })
 }
 
+// 控制添加或更新对话框显示/隐藏
 const addOrUpdateVisible = ref(false)
 const addOrUpdateRef = ref(null)
+
 /**
- * 新增 / 修改
- * @param id
+ * 新增或编辑产品标签
+ * @param id - 标签ID，如果存在则为编辑模式
  */
 const onAddOrUpdate = (id) => {
   addOrUpdateVisible.value = true
@@ -116,6 +134,10 @@ const onAddOrUpdate = (id) => {
   })
 }
 
+/**
+ * 删除产品标签
+ * @param id - 标签ID
+ */
 const onDelete = (id) => {
   ElMessageBox.confirm('确定进行删除操作?', '提示', {
     confirmButtonText: '确定',
@@ -138,19 +160,22 @@ const onDelete = (id) => {
             }
           })
         })
-    }).catch(() => { })
+    }).catch(() => {})
 }
+
 /**
- * 刷新回调
+ * 刷新回调，用于重新加载数据列表
  */
 const refreshChange = () => {
   getDataList(page)
 }
+
+/**
+ * 条件查询触发的数据获取
+ * @param params - 查询参数
+ * @param done - 完成回调
+ */
 const onSearch = (params, done) => {
   getDataList(page, params, done)
 }
-
 </script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/front-end/mall4v/src/views/modules/prod/spec/add-or-update.vue b/front-end/mall4v/src/views/modules/prod/spec/add-or-update.vue
index 42ef658..dbe7f10 100644
--- a/front-end/mall4v/src/views/modules/prod/spec/add-or-update.vue
+++ b/front-end/mall4v/src/views/modules/prod/spec/add-or-update.vue
@@ -4,11 +4,13 @@
     :title="!dataList[0].propId ? '新增' : '修改'"
     :close-on-click-modal="false"
   >
+    <!-- 属性表格 -->
     <el-table
       :data="dataList"
       border
       style="width: 100%;"
     >
+      <!-- 属性名称列 -->
       <el-table-column
         prop="propName"
         header-align="center"
@@ -25,6 +27,8 @@
           />
         </template>
       </el-table-column>
+
+      <!-- 属性值列 -->
       <el-table-column
         prop="prodPropValues"
         header-align="center"
@@ -47,6 +51,7 @@
               @clear="clearProdPropValues"
             />
           </el-col>
+          <!-- 添加新输入框按钮 -->
           <el-col :span="4">
             <el-button
               v-show="scope.row.prodPropValues[scope.row.prodPropValues.length-1].propValue"
@@ -59,37 +64,46 @@
         </template>
       </el-table-column>
     </el-table>
+
+    <!-- 对话框底部按钮 -->
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="visible = false">
-          取消
-        </el-button>
-        <el-button
-          type="primary"
-          @click="onSubmit()"
-        >
-          确定
-        </el-button>
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="onSubmit()">确定</el-button>
       </div>
     </template>
   </el-dialog>
 </template>
+
+
 <script setup>
 import { ElMessage } from 'element-plus'
 import { Debounce } from '@/utils/debounce'
+import { ref, defineEmits, defineExpose } from 'vue'
+
+// 定义事件发射器，用于向父组件发送事件
 const emit = defineEmits(['refreshDataList'])
 
+// 控制对话框显示/隐藏的布尔值
 const visible = ref(false)
+
+// 数据表单对象，初始化默认值
 const dataList = ref([{ propId: 0, propName: '', prodPropValues: [{ valueId: 0 }] }])
+
+// 分页信息（此处未在代码中使用）
 const page = {
   total: 0, // 总页数
   currentPage: 1, // 当前页数
   pageSize: 10 // 每页显示多少条
 }
 
+/**
+ * 初始化方法，接受可选的产品属性对象作为参数
+ * @param val - 产品属性对象，如果存在则为编辑模式
+ */
 const init = (val) => {
   if (val) {
-    dataList.value = [JSON.parse(JSON.stringify(val))]
+    dataList.value = [JSON.parse(JSON.stringify(val))] // 深拷贝避免直接修改原始数据
   } else {
     dataList.value = [
       { propId: 0, propName: '', prodPropValues: [{ valueId: 0 }] }
@@ -103,10 +117,10 @@ defineExpose({ init })
  * 表单提交
  */
 const onSubmit = Debounce(() => {
+  // 清除空的属性值
   if (dataList.value[0].prodPropValues) {
     const temp = []
     for (const key in dataList.value[0].prodPropValues) {
-      // eslint-disable-next-line no-prototype-builtins
       if (dataList.value[0].prodPropValues.hasOwnProperty(key)) {
         const element = dataList.value[0].prodPropValues[key]
         if (element.propValue) {
@@ -116,13 +130,13 @@ const onSubmit = Debounce(() => {
     }
     dataList.value[0].prodPropValues = temp
   }
+
+  // 验证表单
   if (!dataList.value[0].propName.trim()) {
-    dataList.value[0].propName = ''
     ElMessage.error('属性名不能为空')
     return
   }
   if (dataList.value[0].prodPropValues.length < 1) {
-    dataList.value[0].prodPropValues = [{ valueId: 0 }]
     ElMessage.error('规格项不能为空')
     return
   }
@@ -138,6 +152,8 @@ const onSubmit = Debounce(() => {
     ElMessage.error('属性值长度不能大于20')
     return
   }
+
+  // 发起HTTP请求，根据是否存在ID来决定是更新还是创建新记录
   http({
     url: http.adornUrl('/prod/spec'),
     method: dataList.value[0].propId ? 'put' : 'post',
@@ -160,6 +176,9 @@ const onSubmit = Debounce(() => {
     })
 })
 
+/**
+ * 清除属性值时的处理逻辑
+ */
 const clearProdPropValues = () => {
   if (dataList.value[0].prodPropValues.length === 1) {
     return
@@ -172,10 +191,13 @@ const clearProdPropValues = () => {
   }
 }
 
+/**
+ * 添加新的属性值输入框
+ */
 const addInput = () => {
   const temp = dataList.value[0].prodPropValues
   if (temp[temp.length - 1].propValue) {
-    temp.push({})
+    temp.push({}) // 只有当最后一个输入框有内容时才添加新的输入框
   }
 }
 </script>
diff --git a/front-end/mall4v/src/views/modules/prod/spec/index.vue b/front-end/mall4v/src/views/modules/prod/spec/index.vue
index 7982190..5530018 100644
--- a/front-end/mall4v/src/views/modules/prod/spec/index.vue
+++ b/front-end/mall4v/src/views/modules/prod/spec/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="mod-prod">
+    <!-- 使用avue-crud构建CRUD表格 -->
     <avue-crud
       ref="crudRef"
       :page="page"
@@ -9,31 +10,31 @@
       @search-change="onSearch"
       @on-load="getDataList"
     >
+      <!-- 自定义属性值列内容 -->
       <template #prodPropValues="scope">
-        <el-tag
-          v-for="item in scope.row.prodPropValues"
-          :key="item.valueId"
-        >
+        <el-tag v-for="item in scope.row.prodPropValues" :key="item.valueId">
           {{ item.propValue }}
         </el-tag>
       </template>
+
+      <!-- 自定义左侧菜单按钮 -->
       <template #menu-left>
         <el-button
           v-if="isAuth('shop:pickAddr:save')"
           type="primary"
           icon="el-icon-plus"
-
           @click.stop="onAddOrUpdate()"
         >
           新增
         </el-button>
       </template>
+
+      <!-- 自定义行操作菜单 -->
       <template #menu="scope">
         <el-button
           v-if="isAuth('prod:spec:update')"
           type="primary"
           icon="el-icon-edit"
-
           @click.stop="onAddOrUpdate(scope.row)"
         >
           编辑
@@ -43,14 +44,14 @@
           v-if="isAuth('prod:spec:delete')"
           type="danger"
           icon="el-icon-delete"
-
           @click.stop="onDelete(scope.row.propId)"
         >
           删除
         </el-button>
       </template>
     </avue-crud>
-    <!-- 弹窗, 新增 / 修改 -->
+
+    <!-- 引入用于添加或更新记录的子组件 -->
     <add-or-update
       v-if="addOrUpdateVisible"
       ref="addOrUpdateRef"
@@ -64,19 +65,31 @@ import { isAuth } from '@/utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AddOrUpdate from './add-or-update.vue'
 import { tableOption } from '@/crud/prod/spec.js'
+import { ref, reactive, nextTick } from 'vue'
+
+// 权限控制对象
 const permission = ref({
-  delBtn: isAuth('prod:prod:delete')
+  delBtn: isAuth('prod:prod:delete') // 删除按钮权限检查
 })
+
+// 数据列表
 const dataList = ref([])
+
+// 表格加载状态
 const dataListLoading = ref(false)
+
+// 多选框选中的数据
 const dataListSelections = ref([])
+
+// 分页信息
 const page = reactive({
-  total: 0, // 总页数
-  currentPage: 1, // 当前页数
-  pageSize: 10 // 每页显示多少条
+  total: 0, // 总记录数
+  currentPage: 1, // 当前页码
+  pageSize: 10 // 每页大小
 })
+
 /**
- * 获取数据列表
+ * 获取数据列表方法
  */
 const getDataList = (pageParam, params, done) => {
   dataListLoading.value = true
@@ -101,11 +114,13 @@ const getDataList = (pageParam, params, done) => {
     })
 }
 
+// 控制添加或更新对话框显示/隐藏
 const addOrUpdateVisible = ref(false)
 const addOrUpdateRef = ref(null)
+
 /**
- * 新增 / 修改
- * @param val
+ * 新增或编辑产品规格
+ * @param val - 如果存在则为编辑模式，否则为新增模式
  */
 const onAddOrUpdate = (val) => {
   addOrUpdateVisible.value = true
@@ -115,13 +130,11 @@ const onAddOrUpdate = (val) => {
 }
 
 /**
- * 删除
- * @param id
+ * 删除产品规格
+ * @param id - 规格ID，如果不存在则表示批量删除
  */
 const onDelete = (id) => {
-  const ids = id ? [id] : dataListSelections.value?.map(item => {
-    return item.propId
-  })
+  const ids = id ? [id] : dataListSelections.value?.map(item => item.propId)
   ElMessageBox.confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
@@ -144,13 +157,17 @@ const onDelete = (id) => {
           })
         })
     })
-    .catch(() => { })
+    .catch(() => {})
 }
 
+/**
+ * 条件查询触发的数据获取
+ * @param params - 查询参数
+ * @param done - 完成回调
+ */
 const onSearch = (params, done) => {
   getDataList(page, params, done)
 }
-
 </script>
 
 <style scoped lang="scss">