diff --git a/front-end/mall4v/src/assets/app.scss b/front-end/mall4v/src/assets/app.scss
index 48d5832..8ad03c9 100644
--- a/front-end/mall4v/src/assets/app.scss
+++ b/front-end/mall4v/src/assets/app.scss
@@ -1,26 +1,31 @@
 // 商品卡片信息的名称删除按钮组
-.card-prod-info-btn{
-  font-size: 14px;
-  .prod-name{
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    padding: 0 8px;
+.card-prod-info-btn {
+  font-size: 14px; // 设置整个容器的基础字体大小为14像素
+
+  .prod-name { // 商品名称样式
+    white-space: nowrap; // 强制在同一行内显示文本，不进行换行
+    text-overflow: ellipsis; // 当文本溢出其容器时，用省略号（...）表示被截断的文本
+    overflow: hidden; // 隐藏溢出容器的内容，与text-overflow配合使用以实现文本截断效果
+    padding: 0 8px; // 为商品名称添加左右各8像素的内边距，使其与容器边缘保持适当距离
   }
-  .del-btn{
-    line-height: 20px;
-    text-align: right;
-    padding-right: 8px;
-    user-select: none;
-    span{
-      color: #155bd4;
-      cursor: pointer;
-      &:hover{
-        opacity: 0.8;
+
+  .del-btn { // 删除按钮样式
+    line-height: 20px; // 设置行高为20像素，确保按钮内的文本垂直居中对齐
+    text-align: right; // 文本右对齐，使删除图标或文字靠右显示
+    padding-right: 8px; // 为删除按钮右侧添加8像素的内边距，保证与其他元素有足够的间距
+    user-select: none; // 禁止用户选中文本，改善用户体验，特别是对于交互性元素
+
+    span { // 删除按钮内部span标签的样式
+      color: #155bd4; // 设置删除按钮文本颜色为蓝色，用于指示可点击状态
+      cursor: pointer; // 更改鼠标指针为手型，提示用户该元素是可交互的
+
+      &:hover { // 当鼠标悬停在删除按钮上时
+        opacity: 0.8; // 减少不透明度到80%，提供视觉反馈，表明元素处于悬停状态
       }
-      &.disabled{
-        opacity: 0.6;
-        cursor: not-allowed;
+
+      &.disabled { // 当删除按钮具有.disabled类时（即禁用状态）
+        opacity: 0.6; // 进一步降低不透明度到60%，表示按钮不可用
+        cursor: not-allowed; // 改变鼠标指针为禁止符号，明确传达按钮不可点击的状态
       }
     }
   }
diff --git a/front-end/mall4v/src/assets/scss/_base.scss b/front-end/mall4v/src/assets/scss/_base.scss
index f2dde4d..68784ed 100644
--- a/front-end/mall4v/src/assets/scss/_base.scss
+++ b/front-end/mall4v/src/assets/scss/_base.scss
@@ -1,114 +1,110 @@
+/* 全局样式 */
+/* 设置所有元素及其伪元素的盒模型为包含padding和border */
 *,
 *:before,
 *:after {
   box-sizing: border-box;
 }
+
+/* 设置body的基础样式 */
 body {
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-  font-size: 14px;
-  line-height: 1.15;
-  color: #303133;
-  background-color: #fff;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; /* 设置全局字体 */
+  font-size: 14px; /* 默认字体大小 */
+  line-height: 1.15; /* 行高 */
+  color: #303133; /* 文字颜色 */
+  background-color: #fff; /* 背景颜色 */
 }
+
+/* 设置链接的基础样式 */
 a {
-  color: mix(#fff, $--color-primary, 20%);
-  text-decoration: none;
+  color: mix(#fff, $--color-primary, 20%); /* 使用Sass混合函数设置链接颜色 */
+  text-decoration: none; /* 移除默认下划线 */
+
   &:focus,
-  &:hover {
-    color: $--color-primary;
-    text-decoration: underline;
+  &:hover { /* 当链接被聚焦或悬停时 */
+    color: $--color-primary; /* 改变链接颜色 */
+    text-decoration: underline; /* 添加下划线 */
   }
 }
+
+/* 设置图片的基础样式 */
 img {
-  vertical-align: middle;
-  max-width: 100%;
+  vertical-align: middle; /* 图片垂直对齐方式 */
+  max-width: 100%; /* 确保图片不会超出容器宽度 */
 }
 
-.el-cascader-menu {
-  .el-scrollbar__wrap {
-    overflow-y: auto !important;
-    width: 100% !important;
-    margin: 0 !important;
-    overflow: auto !important;
-  }
+/* 修改Element UI级联菜单滚动条的行为 */
+.el-cascader-menu .el-scrollbar__wrap {
+  overflow-y: auto !important; /* 确保Y轴可以滚动 */
+  width: 100% !important; /* 滚动内容占据全部宽度 */
+  margin: 0 !important; /* 移除默认边距 */
+  overflow: auto !important; /* 确保溢出内容可见 */
 }
 
-/* Utils
------------------------------- */
+/* 清除浮动 */
 .clearfix:before,
 .clearfix:after {
   content: " ";
   display: table;
 }
 .clearfix:after {
-  clear: both;
+  clear: both; /* 清除浮动影响 */
 }
 
-
-/* Animation
------------------------------- */
+/* 定义淡入淡出动画 */
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity .5s;
+  transition: opacity .5s; /* 动画过渡时间 */
 }
 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+  opacity: 0; /* 初始和结束状态透明度 */
 }
 
-
-/* Reset element-ui
------------------------------- */
-.site-wrapper {
-  .el-pagination {
-    text-align: right;
-  }
+/* 重置Element UI分页组件的文本对齐 */
+.site-wrapper .el-pagination {
+  text-align: right; /* 分页组件右对齐 */
 }
 
-
-/* Layout
------------------------------- */
+/* 布局 */
 .site-wrapper {
-  position: relative;
-  min-width: 1180px;
+  position: relative; /* 相对于自身定位 */
+  min-width: 1180px; /* 最小宽度 */
 }
 
-
-/* Sidebar fold
------------------------------- */
+/* 侧边栏折叠时的样式调整 */
 .site-sidebar--fold {
   .site-navbar__header,
   .site-navbar__brand,
   .site-sidebar,
   .site-sidebar__inner,
   .el-menu.site-sidebar__menu {
-    width: 64px;
+    width: 64px; /* 折叠后的宽度 */
   }
   .site-navbar__body,
   .site-content__wrapper {
-    margin-left: 64px;
+    margin-left: 64px; /* 折叠后内容区的左边距 */
   }
-  .site-navbar__brand {
-    &-lg {
-      display: none;
-    }
-    &-mini {
-      display: inline-block;
-    }
+  .site-navbar__brand-lg {
+    display: none; /* 隐藏大尺寸品牌标志 */
+  }
+  .site-navbar__brand-mini {
+    display: inline-block; /* 显示迷你品牌标志 */
   }
   .site-sidebar,
   .site-sidebar__inner {
-    overflow: initial;
+    overflow: initial; /* 恢复默认的溢出行为 */
   }
   .site-sidebar__menu-icon {
-    margin-right: 0;
-    font-size: 20px;
+    margin-right: 0; /* 移除右边距 */
+    font-size: 20px; /* 字体大小 */
   }
   .site-content--tabs > .el-tabs > .el-tabs__header {
-    left: 64px;
+    left: 64px; /* 标签头部左侧位置 */
   }
 }
-// animation
+
+/* 侧边栏、导航栏等元素在切换时添加动画效果 */
 .site-navbar__header,
 .site-navbar__brand,
 .site-navbar__body,
@@ -118,48 +114,46 @@ img {
 .site-sidebar__menu-icon,
 .site-content__wrapper,
 .site-content--tabs > .el-tabs .el-tabs__header {
-  transition: inline-block .3s, left .3s, width .3s, margin-left .3s, font-size .3s;
+  transition: inline-block .3s, left .3s, width .3s, margin-left .3s, font-size .3s; /* 动画过渡 */
 }
 
-
-/* Navbar
------------------------------- */
+/* 导航栏样式 */
 .site-navbar {
-  position: fixed;
+  position: fixed; /* 固定定位 */
   top: 0;
   right: 0;
   left: 0;
-  z-index: 1030;
-  height: 50px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
-  background-color: $navbar--background-color;
+  z-index: 1030; /* 层级 */
+  height: 50px; /* 高度 */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, .08); /* 阴影效果 */
+  background-color: $navbar--background-color; /* 背景颜色 */
 
-  &--inverse {
+  &--inverse { /* 反色主题 */
     .site-navbar__body {
-      background-color: transparent;
+      background-color: transparent; /* 逆向导航栏背景透明 */
     }
     .el-menu {
       > .el-menu-item,
       > .el-submenu > .el-submenu__title {
-        color: #fff;
+        color: #fff; /* 白色文字 */
         &:focus,
         &:hover {
-          color: #fff;
-          background-color: mix(#000, $navbar--background-color, 15%);
+          color: #fff; /* 悬停时保持白色 */
+          background-color: mix(#000, $navbar--background-color, 15%); /* 混合背景色 */
         }
       }
       > .el-menu-item.is-active,
       > .el-submenu.is-active > .el-submenu__title {
-        border-bottom-color: mix(#fff, $navbar--background-color, 85%);
+        border-bottom-color: mix(#fff, $navbar--background-color, 85%); /* 活动项下划线颜色 */
       }
       .el-menu-item i,
       .el-submenu__title i,
       .el-dropdown {
-        color: #fff;
+        color: #fff; /* 白色图标 */
       }
     }
     .el-menu--popup-bottom-start {
-      background-color: $navbar--background-color;
+      background-color: $navbar--background-color; /* 下拉菜单背景 */
     }
   }
 
@@ -168,7 +162,7 @@ img {
     float: left;
     width: 230px;
     height: 50px;
-    overflow: hidden;
+    overflow: hidden; /* 导航栏头部 */
   }
   &__brand {
     display: table-cell;
@@ -181,7 +175,7 @@ img {
     text-align: center;
     text-transform: uppercase;
     white-space: nowrap;
-    color: #fff;
+    color: #fff; /* 品牌名称颜色 */
 
     &-lg,
     &-mini {
@@ -194,12 +188,12 @@ img {
       }
     }
     &-mini {
-      display: none;
+      display: none; /* 默认隐藏迷你品牌 */
     }
   }
   &__switch {
     font-size: 18px;
-    border-bottom: none !important;
+    border-bottom: none !important; /* 移除底部边框 */
   }
   &__avatar {
     border-bottom: none !important;
@@ -220,7 +214,7 @@ img {
     position: relative;
     margin-left: 230px;
     padding-right: 15px;
-    background-color: #fff;
+    background-color: #fff; /* 导航栏主体背景 */
   }
   &__menu {
     float: left;
@@ -228,7 +222,7 @@ img {
     border-bottom: 0;
 
     &--right {
-      float: right;
+      float: right; /* 右对齐 */
     }
     a:focus,
     a:hover {
@@ -252,9 +246,7 @@ img {
   }
 }
 
-
-/* Sidebar
------------------------------- */
+/* 侧边栏样式 */
 .site-sidebar {
   position: fixed;
   top: 50px;
@@ -266,7 +258,7 @@ img {
 
   &--dark,
   &--dark-popper {
-    background-color: $sidebar--background-color-dark;
+    background-color: $sidebar--background-color-dark; /* 深色背景 */
     .site-sidebar__menu.el-menu,
     > .el-menu--popup {
       background-color: $sidebar--background-color-dark;
@@ -310,9 +302,7 @@ img {
   }
 }
 
-
-/* Content
------------------------------- */
+/* 内容区样式 */
 .site-content {
   position: relative;
   padding: 15px;
@@ -365,6 +355,7 @@ img {
   }
 }
 
-.element-error-message-zindex{
-  z-index:3000 !important;
+/* 提升错误信息的层级 */
+.element-error-message-zindex {
+  z-index: 3000 !important; /* 确保错误信息显示在其他元素之上 */
 }
diff --git a/front-end/mall4v/src/assets/scss/_normalize.scss b/front-end/mall4v/src/assets/scss/_normalize.scss
index 9bb2529..13e3319 100644
--- a/front-end/mall4v/src/assets/scss/_normalize.scss
+++ b/front-end/mall4v/src/assets/scss/_normalize.scss
@@ -2,14 +2,11 @@
 
 /* Document
    ========================================================================== */
-
 /**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
+ * 1. 正确设置所有浏览器中的行高。
+ * 2. 防止在 Windows Phone 的 IE 和 iOS 中发生方向变化后字体大小调整。
  */
-
- html {
+html {
   line-height: 1.15; /* 1 */
   -ms-text-size-adjust: 100%; /* 2 */
   -webkit-text-size-adjust: 100%; /* 2 */
@@ -17,19 +14,16 @@
 
 /* Sections
    ========================================================================== */
-
 /**
- * Remove the margin in all browsers (opinionated).
+ * 移除所有浏览器中的 body 边距（这是作者的意见）。
  */
-
 body {
   margin: 0;
 }
 
 /**
- * Add the correct display in IE 9-.
+ * 在 IE 9- 中正确显示这些 HTML5 元素。
  */
-
 article,
 aside,
 footer,
@@ -40,10 +34,8 @@ section {
 }
 
 /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
+ * 在 Chrome, Firefox, 和 Safari 中修正 `h1` 元素在 `section` 和 `article` 上下文中字体大小和边距的问题。
  */
-
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
@@ -51,12 +43,9 @@ h1 {
 
 /* Grouping content
    ========================================================================== */
-
 /**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in IE.
+ * 1. 在 IE 9- 中正确显示这些元素。
  */
-
 figcaption,
 figure,
 main { /* 1 */
@@ -64,18 +53,16 @@ main { /* 1 */
 }
 
 /**
- * Add the correct margin in IE 8.
+ * 在 IE 8 中正确设置 figure 的边距。
  */
-
 figure {
   margin: 1em 40px;
 }
 
 /**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
+ * 1. 在 Firefox 中正确设置 hr 的盒模型。
+ * 2. 在 Edge 和 IE 中显示溢出内容。
  */
-
 hr {
   box-sizing: content-box; /* 1 */
   height: 0; /* 1 */
@@ -83,10 +70,9 @@ hr {
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
+ * 1. 在所有浏览器中正确继承和缩放字体大小。
+ * 2. 修正所有浏览器中奇怪的 `em` 字体大小。
  */
-
 pre {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
@@ -94,22 +80,19 @@ pre {
 
 /* Text-level semantics
    ========================================================================== */
-
 /**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ * 1. 移除 IE 10 中活动链接上的灰色背景。
+ * 2. 移除 iOS 8+ 和 Safari 8+ 中链接下划线之间的空隙。
  */
-
 a {
   background-color: transparent; /* 1 */
   -webkit-text-decoration-skip: objects; /* 2 */
 }
 
 /**
- * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ * 1. 移除 Chrome 57- 和 Firefox 39- 中 h1 下方的边框。
+ * 2. 在 Chrome, Edge, IE, Opera, 和 Safari 中添加正确的文本装饰。
  */
-
 abbr[title] {
   border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
@@ -117,28 +100,25 @@ abbr[title] {
 }
 
 /**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ * 防止 Safari 6 中 `bolder` 样式的重复应用。
  */
-
 b,
 strong {
   font-weight: inherit;
 }
 
 /**
- * Add the correct font weight in Chrome, Edge, and Safari.
+ * 在 Chrome, Edge, 和 Safari 中添加正确的字体粗细。
  */
-
 b,
 strong {
   font-weight: bolder;
 }
 
 /**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
+ * 1. 在所有浏览器中正确继承和缩放字体大小。
+ * 2. 修正所有浏览器中奇怪的 `em` 字体大小。
  */
-
 code,
 kbd,
 samp {
@@ -147,35 +127,30 @@ samp {
 }
 
 /**
- * Add the correct font style in Android 4.3-.
+ * 在 Android 4.3- 中添加正确的字体风格。
  */
-
 dfn {
   font-style: italic;
 }
 
 /**
- * Add the correct background and color in IE 9-.
+ * 在 IE 9- 中添加正确的背景色和颜色。
  */
-
 mark {
   background-color: #ff0;
   color: #000;
 }
 
 /**
- * Add the correct font size in all browsers.
+ * 在所有浏览器中添加正确的字体大小。
  */
-
 small {
   font-size: 80%;
 }
 
 /**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
+ * 防止 `sub` 和 `sup` 元素影响所有浏览器中的行高。
  */
-
 sub,
 sup {
   font-size: 75%;
@@ -194,49 +169,42 @@ sup {
 
 /* Embedded content
    ========================================================================== */
-
 /**
- * Add the correct display in IE 9-.
+ * 在 IE 9- 中正确显示音频和视频元素。
  */
-
 audio,
 video {
   display: inline-block;
 }
 
 /**
- * Add the correct display in iOS 4-7.
+ * 在 iOS 4-7 中正确显示没有控制栏的音频元素。
  */
-
 audio:not([controls]) {
   display: none;
   height: 0;
 }
 
 /**
- * Remove the border on images inside links in IE 10-.
+ * 移除 IE 10- 中图片链接内的边框。
  */
-
 img {
   border-style: none;
 }
 
 /**
- * Hide the overflow in IE.
+ * 在 IE 中隐藏 SVG 溢出部分。
  */
-
 svg:not(:root) {
   overflow: hidden;
 }
 
 /* Forms
    ========================================================================== */
-
 /**
- * 1. Change the font styles in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
+ * 1. 更改所有浏览器中的表单元素字体样式（意见性）。
+ * 2. 移除 Firefox 和 Safari 中的边距。
  */
-
 button,
 input,
 optgroup,
@@ -249,31 +217,27 @@ textarea {
 }
 
 /**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
+ * 1. 在 IE 中显示溢出。
+ * 2. 在 Edge 中显示溢出。
  */
-
 button,
 input { /* 1 */
   overflow: visible;
 }
 
 /**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
+ * 移除 Edge, Firefox, 和 IE 中的文本转换继承。
+ * 1. 移除 Firefox 中的文本转换继承。
  */
-
 button,
 select { /* 1 */
   text-transform: none;
 }
 
 /**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
+ * 1. 防止 WebKit 中的一个 bug，在 Android 4 中破坏本地 `audio` 和 `video` 控件。
+ * 2. 修正 iOS 和 Safari 中无法自定义可点击类型的样式。
  */
-
 button,
 html [type="button"], /* 1 */
 [type="reset"],
@@ -282,9 +246,8 @@ html [type="button"], /* 1 */
 }
 
 /**
- * Remove the inner border and padding in Firefox.
+ * 移除 Firefox 中按钮和输入框聚焦时的内边距和边框。
  */
-
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
@@ -294,9 +257,8 @@ button::-moz-focus-inner,
 }
 
 /**
- * Restore the focus styles unset by the previous rule.
+ * 恢复 Firefox 中移除的按钮和输入框的焦点样式。
  */
-
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
@@ -305,20 +267,17 @@ button:-moz-focusring,
 }
 
 /**
- * Correct the padding in Firefox.
+ * 在 Firefox 中修正 fieldset 的内边距。
  */
-
 fieldset {
   padding: 0.35em 0.75em 0.625em;
 }
 
 /**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
+ * 1. 在 Edge 和 IE 中修正文本换行。
+ * 2. 在 IE 中修正从 fieldset 继承的颜色。
+ * 3. 移除内边距，以防开发人员在所有浏览器中将 fieldset 的内边距设置为零时出现问题。
  */
-
 legend {
   box-sizing: border-box; /* 1 */
   color: inherit; /* 2 */
@@ -329,28 +288,25 @@ legend {
 }
 
 /**
- * 1. Add the correct display in IE 9-.
- * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * 1. 在 IE 9- 中正确显示进度条。
+ * 2. 在 Chrome, Firefox, 和 Opera 中正确设置垂直对齐方式。
  */
-
 progress {
   display: inline-block; /* 1 */
   vertical-align: baseline; /* 2 */
 }
 
 /**
- * Remove the default vertical scrollbar in IE.
+ * 移除 IE 中 textarea 的默认垂直滚动条。
  */
-
 textarea {
   overflow: auto;
 }
 
 /**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
+ * 1. 在 IE 10- 中正确设置 checkbox 和 radio 的盒模型。
+ * 2. 移除 IE 10- 中 checkbox 和 radio 的内边距。
  */
-
 [type="checkbox"],
 [type="radio"] {
   box-sizing: border-box; /* 1 */
@@ -358,38 +314,34 @@ textarea {
 }
 
 /**
- * Correct the cursor style of increment and decrement buttons in Chrome.
+ * 在 Chrome 中修正数字输入框上下箭头的高度。
  */
-
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
 /**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
+ * 1. 修正 Chrome 和 Safari 中搜索框的奇怪外观。
+ * 2. 修正 Safari 中搜索框的轮廓样式。
  */
-
 [type="search"] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
 
 /**
- * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ * 移除 macOS 上 Chrome 和 Safari 中搜索框取消按钮和装饰的内边距。
  */
-
 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
 /**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
+ * 1. 修正 iOS 和 Safari 中无法自定义可点击类型的样式。
+ * 2. 在 Safari 中更改字体属性以继承。
  */
-
 ::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
@@ -397,51 +349,43 @@ textarea {
 
 /* Interactive
    ========================================================================== */
-
-/*
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
+/**
+ * 1. 在 IE 9- 中正确显示 details 元素。
+ * 2. 在 Edge, IE, 和 Firefox 中正确显示 menu 元素。
  */
-
 details, /* 1 */
 menu {
   display: block;
 }
 
-/*
- * Add the correct display in all browsers.
+/**
+ * 在所有浏览器中正确显示 summary 元素。
  */
-
 summary {
   display: list-item;
 }
 
 /* Scripting
    ========================================================================== */
-
 /**
- * Add the correct display in IE 9-.
+ * 在 IE 9- 中正确显示 canvas 元素。
  */
-
 canvas {
   display: inline-block;
 }
 
 /**
- * Add the correct display in IE.
+ * 在 IE 中正确显示 template 元素。
  */
-
 template {
   display: none;
 }
 
 /* Hidden
    ========================================================================== */
-
 /**
- * Add the correct display in IE 10-.
+ * 在 IE 10- 中正确显示带有 hidden 属性的元素。
  */
-
 [hidden] {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/front-end/mall4v/src/assets/scss/_variables.scss b/front-end/mall4v/src/assets/scss/_variables.scss
index b081e04..1041e18 100644
--- a/front-end/mall4v/src/assets/scss/_variables.scss
+++ b/front-end/mall4v/src/assets/scss/_variables.scss
@@ -1,13 +1,13 @@
 // 站点主色
-// tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-[#17B3A3]/index.css']当前主题色一致
-$--color-primary: #02A1E9;
+// tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-#17B3A3/index.css']当前主题色一致
+$--color-primary: #02A1E9; // 定义站点的主要颜色，这是一个蓝色色调（#02A1E9）。这个颜色将用于整个网站的一致性配色方案，包括链接、按钮、强调文字等元素。为了保证一致性，需要确保此颜色与Element UI框架中的主题色相匹配。
 
-// Navbar
-$navbar--background-color: $--color-primary;
+// Navbar (导航栏)
+$navbar--background-color: $--color-primary; // 使用站点主色作为导航栏的背景颜色。这使得导航栏与站点的整体设计保持一致，并且在视觉上提供了一种连贯的品牌形象。
 
-// Sidebar
-$sidebar--background-color-dark: #263238;
-$sidebar--color-text-dark: #8a979e;
+// Sidebar (侧边栏)
+$sidebar--background-color-dark: #263238; // 设置侧边栏的深色背景颜色（#263238），这是一种深灰色调。这种颜色通常用于创建对比度，使得侧边栏中的内容更加突出。
+$sidebar--color-text-dark: #8a979e; // 设置侧边栏中文本的颜色（#8a979e），这是一种浅灰色调。选择这种颜色是为了确保文本具有良好的可读性，同时与深色背景形成适当的对比。
 
-// Content
-$content--background-color: #f1f4f5;
+// Content (内容区)
+$content--background-color: #f1f4f5; // 定义内容区的背景颜色（#f1f4f5），这是一种非常浅的灰蓝色。这种颜色可以为主要内容提供一个干净、明亮的背景，同时也不会分散用户的注意力。
diff --git a/front-end/mall4v/src/assets/scss/index.scss b/front-end/mall4v/src/assets/scss/index.scss
index c17d72c..8b4c002 100644
--- a/front-end/mall4v/src/assets/scss/index.scss
+++ b/front-end/mall4v/src/assets/scss/index.scss
@@ -1,3 +1,9 @@
-@import "normalize";       // api: https://github.com/necolas/normalize.css/
-@import "variables";       // 站点变量
-@import "base";
+// 导入 Normalize.css 重置样式
+// api: https://github.com/necolas/normalize.css/
+@import "normalize"; // Normalize.css 是一个CSS库，旨在使浏览器的默认样式更加一致，并修复一些常见的跨浏览器问题。通过导入此文件，可以确保在不同浏览器中呈现的内容具有一致的基础样式。Normalize.css 不会移除所有默认样式，而是保留有用的默认值并进行微调，以提高兼容性和可读性。
+
+// 导入站点变量
+@import "variables"; // 这里导入的是包含整个站点所使用的所有Sass变量的文件。这些变量定义了诸如颜色、字体大小、间距等全局样式属性。通过将这些变量集中在一个文件中，可以在整个项目中方便地管理和统一修改样式。例如，如果需要更改站点的主要颜色，只需在一个地方更新变量值即可。
+
+// 导入基础样式
+@import "base"; // 此处导入的是包含了项目中所有基本样式的文件，它可能包括但不限于：排版规则、链接样式、按钮样式等。这些基础样式是构建其他更具体组件的基础，确保了一致的外观和感觉。此外，这里还可以设置全局的选择器、清除浮动的实用工具类以及其他任何对整个项目至关重要的样式规则。
diff --git a/front-end/mall4v/src/components/mul-pic-upload/index.vue b/front-end/mall4v/src/components/mul-pic-upload/index.vue
index 9b934a4..1fd1788 100644
--- a/front-end/mall4v/src/components/mul-pic-upload/index.vue
+++ b/front-end/mall4v/src/components/mul-pic-upload/index.vue
@@ -1,60 +1,75 @@
 <template>
   <div>
+    <!-- 图片上传组件 -->
     <el-upload
-      :action="uploadAction"
-      :headers="uploadHeaders"
-      list-type="picture-card"
-      :on-preview="handlePictureCardPreview"
-      :on-remove="handleRemove"
-      :on-success="handleUploadSuccess"
-      :file-list="imageList"
-      :before-upload="beforeAvatarUpload"
+      :action="uploadAction"                       <!-- 设置上传的服务器地址 -->
+    :headers="uploadHeaders"                     <!-- 设置上传请求头，包含认证信息 -->
+    list-type="picture-card"                     <!-- 使用卡片列表显示上传的图片 -->
+    :on-preview="handlePictureCardPreview"       <!-- 点击预览图标时触发的事件 -->
+    :on-remove="handleRemove"                    <!-- 点击移除图标时触发的事件 -->
+    :on-success="handleUploadSuccess"            <!-- 文件上传成功后的回调 -->
+    :file-list="imageList"                       <!-- 显示的文件列表 -->
+    :before-upload="beforeAvatarUpload"          <!-- 上传前的钩子函数，用于限制文件类型和大小 -->
     >
-      <el-icon><Plus /></el-icon>
+    <el-icon><Plus /></el-icon>                  <!-- 上传按钮中的加号图标 -->
     </el-upload>
-    <el-dialog v-model="dialogVisible">
+
+    <!-- 预览对话框 -->
+    <el-dialog v-model="dialogVisible">            <!-- 对话框的显示状态由dialogVisible控制 -->
       <img
-        width="100%"
-        :src="dialogImageUrl"
-        alt=""
+        width="100%"                               <!-- 图片宽度为100%，适应对话框大小 -->
+      :src="dialogImageUrl"                      <!-- 动态绑定预览图片的URL -->
+      alt=""
       >
     </el-dialog>
   </div>
 </template>
 
 <script setup>
-import $cookie from 'vue-cookies'
-import { ElMessage } from 'element-plus'
+import $cookie from 'vue-cookies'                   // 导入vue-cookies用于获取存储在客户端的token
+import { ElMessage } from 'element-plus'            // 导入Element Plus的消息提示组件
+import { computed, ref } from 'vue'                // 导入Vue的响应式API
 
+// 定义上传请求头，包含从cookie中获取的Authorization令牌
 const uploadHeaders = { Authorization: $cookie.get('Authorization') }
+
+// 定义上传图片的服务器地址
 const uploadAction = http.adornUrl('/admin/file/upload/element')
+
+// 定义父组件传递的属性
 const props = defineProps({
   modelValue: {
-    default: '',
-    type: String
+    default: '',                                   // 默认值为空字符串
+    type: String                                   // 类型为字符串
   }
 })
+
+// 定义emit函数，用于向父组件发送更新
 const emit = defineEmits(['update:modelValue'])
+
+// 存储资源的基础URL
+const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
+
+// 存储预览对话框的可见性状态和图片URL
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
-const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
 
+// 计算属性：根据父组件传入的modelValue生成图片列表
 const imageList = computed(() => {
   const res = []
   if (props.modelValue) {
-    const imageArray = props.modelValue?.split(',')
+    const imageArray = props.modelValue?.split(',') // 将modelValue按逗号分割成数组
     for (let i = 0; i < imageArray.length; i++) {
       res.push({ url: resourcesUrl + imageArray[i], response: imageArray[i] })
     }
   }
-  emit('update:modelValue', props.modelValue)
+  emit('update:modelValue', props.modelValue) // 更新父组件的modelValue
   return res
 })
 
 /**
- * 图片上传
+ * 图片上传成功的处理函数
  */
-// eslint-disable-next-line no-unused-vars
 const handleUploadSuccess = (response, file, fileList) => {
   const pics = fileList.map(file => {
     if (typeof file.response === 'string') {
@@ -62,25 +77,29 @@ const handleUploadSuccess = (response, file, fileList) => {
     }
     return file.response.data
   }).join(',')
-  emit('update:modelValue', pics)
+  emit('update:modelValue', pics) // 更新父组件的modelValue
 }
 
 /**
- * 限制图片上传大小
+ * 上传前的钩子函数，用于限制图片上传的格式和大小
  */
 const beforeAvatarUpload = (file) => {
   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
   if (!isJPG) {
-    ElMessage.error('上传图片只能是jpeg/jpg/png/gif 格式!')
+    ElMessage.error('上传图片只能是jpeg/jpg/png/gif 格式!') // 提示错误信息
+    return false
   }
   const isLt2M = file.size / 1024 / 1024 < 2
   if (!isLt2M) {
-    ElMessage.error('上传图片大小不能超过 2MB!')
+    ElMessage.error('上传图片大小不能超过 2MB!') // 提示错误信息
+    return false
   }
   return isLt2M && isJPG
 }
 
-// eslint-disable-next-line no-unused-vars
+/**
+ * 处理移除图片的操作
+ */
 const handleRemove = (file, fileList) => {
   const pics = fileList.map(file => {
     if (typeof file.response === 'string') {
@@ -88,12 +107,14 @@ const handleRemove = (file, fileList) => {
     }
     return file.response.data
   }).join(',')
-  emit('update:modelValue', pics)
+  emit('update:modelValue', pics) // 更新父组件的modelValue
 }
 
+/**
+ * 处理图片预览操作
+ */
 const handlePictureCardPreview = (file) => {
-  dialogImageUrl.value = file.url
-  dialogVisible.value = true
+  dialogImageUrl.value = file.url // 设置要预览的图片URL
+  dialogVisible.value = true      // 打开预览对话框
 }
-
 </script>
diff --git a/front-end/mall4v/src/components/pic-upload/index.vue b/front-end/mall4v/src/components/pic-upload/index.vue
index ed275c1..44ecd17 100644
--- a/front-end/mall4v/src/components/pic-upload/index.vue
+++ b/front-end/mall4v/src/components/pic-upload/index.vue
@@ -1,96 +1,109 @@
 <template>
   <div>
+    <!-- 图片上传组件 -->
     <el-upload
-      class="pic-uploader-component"
-      :action="uploadAction"
-      :headers="uploadHeaders"
-      accept=".png,.jpg,.jpeg,.gif"
-      :show-file-list="false"
-      :on-success="handleUploadSuccess"
-      :before-upload="beforeAvatarUpload"
+      class="pic-uploader-component"               <!-- 自定义类名用于样式控制 -->
+    :action="uploadAction"                       <!-- 设置上传的服务器地址 -->
+    :headers="uploadHeaders"                     <!-- 设置上传请求头，包含认证信息 -->
+    accept=".png,.jpg,.jpeg,.gif"                <!-- 限制可接受的文件类型 -->
+    :show-file-list="false"                      <!-- 不显示上传文件列表 -->
+    :on-success="handleUploadSuccess"            <!-- 文件上传成功后的回调 -->
+    :before-upload="beforeAvatarUpload"          <!-- 上传前的钩子函数，用于限制文件类型和大小 -->
     >
-      <img
-        v-if="modelValue"
-        alt=""
-        :src="checkFileUrl(modelValue)"
-        class="pic"
-      >
-      <el-icon
-        v-else
-        color="#8c939d"
-        size="28"
-      >
-        <Plus />
-      </el-icon>
+    <!-- 如果有图片，则显示图片；否则显示加号图标 -->
+    <img
+      v-if="modelValue"
+      alt=""
+      :src="checkFileUrl(modelValue)"            <!-- 动态绑定图片源 -->
+    class="pic"                                <!-- 自定义类名用于样式控制 -->
+    >
+    <el-icon
+      v-else                                     <!-- 如果没有图片则显示加号图标 -->
+    color="#8c939d"
+    size="28"
+    >
+    <Plus />                                   <!-- 加号图标 -->
+    </el-icon>
     </el-upload>
   </div>
 </template>
 
 <script setup>
-import { checkFileUrl } from '@/utils'
-import $cookie from 'vue-cookies'
-import { ElMessage } from 'element-plus'
+import { checkFileUrl } from '@/utils'             // 导入用于检查文件URL的工具函数
+import $cookie from 'vue-cookies'                  // 导入vue-cookies用于获取存储在客户端的token
+import { ElMessage } from 'element-plus'           // 导入Element Plus的消息提示组件
+import { defineEmits, defineProps } from 'vue'     // 导入Vue的响应式API
+
+// 定义上传请求头，包含从cookie中获取的Authorization令牌
 const uploadHeaders = { Authorization: $cookie.get('Authorization') }
+
+// 定义上传图片的服务器地址
 const uploadAction = http.adornUrl('/admin/file/upload/element')
+
+// 定义emit函数，用于向父组件发送更新
 const emit = defineEmits(['update:modelValue'])
-// eslint-disable-next-line no-unused-vars
+
+// 定义父组件传递的属性
 const props = defineProps({
   modelValue: {
-    default: '',
-    type: String
+    default: '',                                   // 默认值为空字符串
+    type: String                                   // 类型为字符串
   }
 })
+
 /**
- * 图片上传
+ * 图片上传成功的处理函数
  */
-// eslint-disable-next-line no-unused-vars
 const handleUploadSuccess = (response, file) => {
-  emit('update:modelValue', file.response.data)
+  emit('update:modelValue', file.response.data) // 更新父组件的modelValue
 }
 
 /**
- * 限制图片上传大小
+ * 上传前的钩子函数，用于限制图片上传的格式和大小
  */
 const beforeAvatarUpload = (file) => {
-  const isLt2M = file.size / 1024 / 1024 < 2
+  const isLt2M = file.size / 1024 / 1024 < 2       // 检查文件大小是否小于2MB
   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
   if (!isJPG) {
-    ElMessage.error('上传图片只能是jpeg/jpg/png/gif 格式!')
+    ElMessage.error('上传图片只能是jpeg/jpg/png/gif 格式!') // 提示错误信息
+    return false
   }
   if (!isLt2M) {
-    ElMessage.error('上传图片大小不能超过 2MB!')
+    ElMessage.error('上传图片大小不能超过 2MB!') // 提示错误信息
+    return false
   }
-  return isLt2M && isJPG
+  return isLt2M && isJPG                           // 返回布尔值，决定是否允许上传
 }
 
 </script>
 
 <style lang="scss" scoped>
+/* 使用SCSS编写样式，并且只应用于当前组件 */
 .pic-uploader-component :deep(.el-upload) {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
+  border: 1px dashed #d9d9d9;                     /* 边框样式 */
+  border-radius: 6px;                             /* 圆角边框 */
+  cursor: pointer;                                /* 鼠标悬停时指针样式 */
+  position: relative;                             /* 相对定位 */
+  overflow: hidden;                               /* 超出内容隐藏 */
   .pic-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
+    font-size: 28px;                              /* 字体大小 */
+    color: #8c939d;                               /* 字体颜色 */
     width: 178px;
     height: 178px;
-    line-height: 178px;
-    text-align: center;
+    line-height: 178px;                           /* 行高 */
+    text-align: center;                           /* 文本居中 */
   }
   .pic {
-    width: 178px;
-    height: 178px;
-    display: block;
+    width: 178px;                                 /* 图片宽度 */
+    height: 178px;                                /* 图片高度 */
+    display: block;                               /* 块级元素 */
   }
 }
 .pic-uploader-component :deep(.el-upload:hover) {
-  border-color: #409EFF;
+  border-color: #409EFF;                          /* 悬停时边框颜色 */
 }
 :deep(.el-upload) {
-  width: 148px;
-  height: 148px;
+  width: 148px;                                   /* 元素宽度 */
+  height: 148px;                                  /* 元素高度 */
 }
 </style>
diff --git a/front-end/mall4v/src/components/prods-select/index.vue b/front-end/mall4v/src/components/prods-select/index.vue
index c50bad4..8e50f25 100644
--- a/front-end/mall4v/src/components/prods-select/index.vue
+++ b/front-end/mall4v/src/components/prods-select/index.vue
@@ -1,205 +1,229 @@
 <template>
   <el-dialog
-    v-model="visible"
-    title="选择商品"
-    :modal="false"
-    :close-on-click-modal="false"
+    v-model="visible"                              <!-- 对话框的显示状态 -->
+  title="选择商品"                               <!-- 对话框标题 -->
+  :modal="false"                                 <!-- 是否需要遮罩层 -->
+  :close-on-click-modal="false"                  <!-- 点击模态框是否关闭对话框 -->
   >
-    <el-table
-      ref="prodTableRef"
-      v-loading="dataListLoading"
-      :data="dataList"
-      border
-      style="width: 100%;"
-      @selection-change="selectChangeHandle"
-    >
-      <el-table-column
-        v-if="isSingle"
-        width="50"
-        header-align="center"
-        align="center"
-      >
-        <template #default="scope">
-          <div>
-            <el-radio
-              v-model="singleSelectProdId"
-              :label="scope.row.prodId"
-              @change="getSelectProdRow(scope.row)"
-            >
-              &nbsp;
-            </el-radio>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column
-        v-if="!isSingle"
-        type="selection"
-        header-align="center"
-        align="center"
-        width="50"
-      />
-      <el-table-column
-        prop="prodName"
-        header-align="center"
-        align="center"
-        label="产品名称"
-      />
-      <el-table-column
-        align="center"
-        width="140"
-        label="产品图片"
+  <el-table
+    ref="prodTableRef"                           <!-- 表格引用 -->
+  v-loading="dataListLoading"                  <!-- 加载状态 -->
+  :data="dataList"                             <!-- 数据源 -->
+  border                                      <!-- 显示边框 -->
+  style="width: 100%;"                         <!-- 表格宽度 -->
+  @selection-change="selectChangeHandle"       <!-- 多选变化事件处理函数 -->
+  >
+  <!-- 单选列 -->
+  <el-table-column
+    v-if="isSingle"                            <!-- 根据props.isSingle决定是否显示 -->
+  width="50"
+  header-align="center"
+  align="center"
+  >
+  <template #default="scope">
+    <div>
+      <el-radio
+        v-model="singleSelectProdId"         <!-- 绑定单选值 -->
+      :label="scope.row.prodId"            <!-- 单选标签为商品ID -->
+      @change="getSelectProdRow(scope.row)"<!-- 单选变化事件处理函数 -->
       >
-        <template #default="scope">
-          <img
-            alt=""
-            :src="scope.row.pic"
-            width="100"
-            height="100"
-          >
-        </template>
-      </el-table-column>
-    </el-table>
-    <el-pagination
-      :current-page="pageIndex"
-      :page-sizes="[10, 20, 50, 100]"
-      :page-size="pageSize"
-      :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper"
-      @size-change="sizeChangeHandle"
-      @current-change="currentChangeHandle"
-    />
-    <template #footer>
+      &nbsp;
+      </el-radio>
+    </div>
+  </template>
+  </el-table-column>
+
+  <!-- 多选列 -->
+  <el-table-column
+    v-if="!isSingle"                           <!-- 根据props.isSingle决定是否显示 -->
+  type="selection"                           <!-- 多选类型 -->
+  header-align="center"
+  align="center"
+  width="50"
+  />
+
+  <!-- 产品名称列 -->
+  <el-table-column
+    prop="prodName"                            <!-- 数据字段 -->
+  header-align="center"
+  align="center"
+  label="产品名称"                           <!-- 列标题 -->
+  />
+
+  <!-- 产品图片列 -->
+  <el-table-column
+    align="center"
+    width="140"
+    label="产品图片"                          <!-- 列标题 -->
+  >
+  <template #default="scope">
+    <img
+      alt=""
+      :src="scope.row.pic"                   <!-- 动态绑定图片源 -->
+    width="100"
+    height="100"
+    >
+  </template>
+  </el-table-column>
+  </el-table>
+
+  <!-- 分页组件 -->
+  <el-pagination
+    :current-page="pageIndex"                    <!-- 当前页码 -->
+  :page-sizes="[10, 20, 50, 100]"              <!-- 可选每页条数 -->
+  :page-size="pageSize"                        <!-- 默认每页条数 -->
+  :total="totalPage"                           <!-- 总记录数 -->
+  layout="total, sizes, prev, pager, next, jumper" <!-- 分页布局 -->
+  @size-change="sizeChangeHandle"              <!-- 每页条数变化事件处理函数 -->
+  @current-change="currentChangeHandle"        <!-- 当前页码变化事件处理函数 -->
+  />
+
+  <!-- 对话框底部操作按钮 -->
+  <template #footer>
       <span>
-        <el-button @click="visible = false">取消</el-button>
+        <el-button @click="visible = false">取消</el-button> <!-- 关闭对话框 -->
         <el-button
           type="primary"
-          @click="submitProds()"
+          @click="submitProds()"                   <!-- 提交选择的商品 -->
         >确定</el-button>
       </span>
-    </template>
+  </template>
   </el-dialog>
 </template>
 
 <script setup>
-import { ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus'           // 导入Element Plus的消息提示组件
+import { defineEmits, defineProps, ref, reactive, onMounted, nextTick } from 'vue'
+import http from '@/utils/http'
+
+// 定义emit函数，用于向父组件发送更新
 const emit = defineEmits(['refreshSelectProds'])
-// eslint-disable-next-line no-unused-vars
+
+// 定义父组件传递的属性
 const props = defineProps({
   isSingle: {
-    default: false,
-    type: Boolean
+    default: false,                                // 默认值为false，表示多选
+    type: Boolean                                  // 类型为布尔值
   }
 })
-const visible = ref(false)
-const dataForm = reactive({
-  product: ''
-})
-const singleSelectProdId = ref(0)
-const selectProds = ref([])
-const dataList = ref([])
-const pageIndex = ref(1)
-const pageSize = ref(10)
-const totalPage = ref(0)
-const dataListLoading = ref(false)
-const dataListSelections = ref([])
 
+// 定义响应式变量
+const visible = ref(false)                         // 控制对话框的显示/隐藏
+const dataForm = reactive({ product: '' })         // 表单数据对象
+const singleSelectProdId = ref(0)                  // 单选商品ID
+const selectProds = ref([])                        // 已选择的商品列表
+const dataList = ref([])                           // 商品列表数据
+const pageIndex = ref(1)                           // 当前页码
+const pageSize = ref(10)                           // 每页条数
+const totalPage = ref(0)                           // 总记录数
+const dataListLoading = ref(false)                 // 加载状态
+const dataListSelections = ref([])                 // 当前选择的商品
+
+// 在组件挂载时获取数据列表
 onMounted(() => {
   getDataList()
 })
 
 /**
- * 获取数据列表
+ * 初始化并打开对话框
+ * @param selectProdParam - 已选择的商品参数
  */
 const init = (selectProdParam) => {
-  selectProds.value = selectProdParam
-  visible.value = true
-  dataListLoading.value = true
-  if (selectProds.value) {
-    selectProds.value?.forEach(row => {
-      dataListSelections.value.push(row)
+  selectProds.value = selectProdParam || []        // 设置已选择的商品
+  visible.value = true                             // 打开对话框
+  dataListLoading.value = true                     // 开启加载状态
+  if (selectProds.value.length) {
+    selectProds.value.forEach(row => {
+      dataListSelections.value.push(row)           // 将已选择的商品添加到选择列表
     })
   }
-  getDataList()
+  getDataList()                                    // 获取商品列表数据
 }
-defineExpose({ init })
+defineExpose({ init })                             // 将init方法暴露给父组件调用
 
+// 表格引用
 const prodTableRef = ref(null)
+
+/**
+ * 获取数据列表
+ */
 const getDataList = () => {
   http({
-    url: http.adornUrl('/prod/prod/page'),
-    method: 'get',
+    url: http.adornUrl('/prod/prod/page'),         // 请求URL
+    method: 'get',                                 // 请求方法
     params: http.adornParams(
       Object.assign(
         {
-          current: pageIndex.value,
-          size: pageSize.value
+          current: pageIndex.value,                // 当前页码
+          size: pageSize.value                     // 每页条数
         },
         {
-          prodName: dataForm.prodName
+          prodName: dataForm.product               // 查询条件（产品名称）
         }
       )
     )
-  })
-    .then(({ data }) => {
-      dataList.value = data.records
-      totalPage.value = data.total
-      dataListLoading.value = false
-      if (selectProds.value) {
-        nextTick(() => {
-          selectProds.value?.forEach(row => {
-            const index = dataList.value?.findIndex((prodItem) => prodItem.prodId === row.prodId)
-            prodTableRef.value?.toggleRowSelection(dataList.value[index])
-          })
+  }).then(({ data }) => {
+    dataList.value = data.records                  // 更新商品列表数据
+    totalPage.value = data.total                   // 更新总记录数
+    dataListLoading.value = false                  // 关闭加载状态
+    if (selectProds.value.length) {
+      nextTick(() => {
+        selectProds.value.forEach(row => {
+          const index = dataList.value.findIndex(prodItem => prodItem.prodId === row.prodId)
+          if (index !== -1) {
+            prodTableRef.value.toggleRowSelection(dataList.value[index], true) // 自动选中已选择的商品
+          }
         })
-      }
-    })
+      })
+    }
+  })
 }
+
 /**
- * 每页数
- * @param val
+ * 每页条数变化事件处理函数
+ * @param val - 新的每页条数
  */
 const sizeChangeHandle = (val) => {
-  pageSize.value = val
-  pageIndex.value = 1
-  getDataList()
+  pageSize.value = val                             // 更新每页条数
+  pageIndex.value = 1                              // 重置当前页码为第一页
+  getDataList()                                    // 重新获取数据
 }
+
 /**
- * 当前页
- * @param val
+ * 当前页码变化事件处理函数
+ * @param val - 新的当前页码
  */
 const currentChangeHandle = (val) => {
-  pageIndex.value = val
-  getDataList()
+  pageIndex.value = val                            // 更新当前页码
+  getDataList()                                    // 重新获取数据
 }
+
 /**
- * 单选商品事件
- * @param row
+ * 单选商品事件处理函数
+ * @param row - 被选择的商品行数据
  */
 const getSelectProdRow = (row) => {
-  dataListSelections.value = [row]
+  dataListSelections.value = [row]                 // 更新选择列表为当前单选商品
 }
+
 /**
- * 多选点击事件
- * @param selection
+ * 多选变化事件处理函数
+ * @param selection - 当前选择的商品列表
  */
 const selectChangeHandle = (selection) => {
-  dataList.value?.forEach((tableItem) => {
-    const selectedProdIndex = selection.findIndex((selectedProd) => {
-      if (!selectedProd) {
-        return false
-      }
-      return selectedProd.prodId === tableItem.prodId
-    })
-    const dataSelectedProdIndex = dataListSelections.value?.findIndex((dataSelectedProd) => dataSelectedProd.prodId === tableItem.prodId)
+  dataList.value.forEach(tableItem => {
+    const selectedProdIndex = selection.findIndex(selectedProd => selectedProd && selectedProd.prodId === tableItem.prodId)
+    const dataSelectedProdIndex = dataListSelections.value.findIndex(dataSelectedProd => dataSelectedProd.prodId === tableItem.prodId)
     if (selectedProdIndex > -1 && dataSelectedProdIndex === -1) {
-      dataListSelections.value.push(tableItem)
+      dataListSelections.value.push(tableItem)     // 如果新选中则添加到选择列表
     } else if (selectedProdIndex === -1 && dataSelectedProdIndex > -1) {
-      dataListSelections.value.splice(dataSelectedProdIndex, 1)
+      dataListSelections.value.splice(dataSelectedProdIndex, 1) // 如果取消选中则从选择列表移除
     }
   })
 }
+
 /**
- * 确定事件
+ * 确定事件处理函数
  */
 const submitProds = () => {
   if (!dataListSelections.value.length) {
@@ -213,14 +237,14 @@ const submitProds = () => {
   }
   const prods = []
   dataListSelections.value.forEach(item => {
-    const prodIndex = prods.findIndex((prod) => prod.prodId === item.prodId)
+    const prodIndex = prods.findIndex(prod => prod.prodId === item.prodId)
     if (prodIndex === -1) {
-      prods.push({ prodId: item.prodId, prodName: item.prodName, pic: item.pic })
+      prods.push({ prodId: item.prodId, prodName: item.prodName, pic: item.pic }) // 添加选择的商品到提交列表
     }
   })
-  emit('refreshSelectProds', prods)
-  dataListSelections.value = []
-  visible.value = false
+  emit('refreshSelectProds', prods)                // 发送选择的商品给父组件
+  dataListSelections.value = []                    // 清空选择列表
+  visible.value = false                            // 关闭对话框
 }
 
 </script>
diff --git a/front-end/mall4v/src/components/tiny-mce/dynamicLoadScript.js b/front-end/mall4v/src/components/tiny-mce/dynamicLoadScript.js
index 9b28e5a..3c1a8fd 100644
--- a/front-end/mall4v/src/components/tiny-mce/dynamicLoadScript.js
+++ b/front-end/mall4v/src/components/tiny-mce/dynamicLoadScript.js
@@ -1,58 +1,85 @@
+// 定义一个数组来存储所有的回调函数，以便在脚本加载完成后依次调用它们。
 let callbacks = []
 
-function loadedTinymce () {
-  // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
-  // check is successfully downloaded script
-  return window.tinymce
+/**
+ * 检查是否已成功加载TinyMCE编辑器。
+ *
+ * @returns {boolean} 如果window对象存在tinymce属性，则返回true，表示TinyMCE已加载；否则返回false。
+ */
+function loadedTinymce() {
+  // 解决 https://github.com/PanJiaChen/vue-element-admin/issues/2144 的问题
+  // 检查是否成功下载了脚本
+  return window.tinymce !== undefined
 }
 
+/**
+ * 动态加载指定URL的脚本文件，并在加载完成或发生错误时调用提供的回调函数。
+ *
+ * @param {string} src - 脚本文件的URL。
+ * @param {Function} [callback] - 可选参数，当脚本加载完成或出错时将被调用的回调函数。
+ */
 const dynamicLoadScript = (src, callback) => {
   const existingScript = document.getElementById(src)
-  const cb = callback || function () {}
+  const cb = callback || function () {} // 如果没有提供回调，则创建一个空函数作为默认值
 
   if (!existingScript) {
+    // 创建新的<script>元素，并设置其src属性为传入的src参数。
     const script = document.createElement('script')
-    script.src = src // src url for the third-party library being loaded.
-    script.id = src
-    document.body.appendChild(script)
-    callbacks.push(cb)
+    script.src = src
+    script.id = src // 使用src作为ID以避免重复加载同一脚本
+    document.body.appendChild(script) // 将新创建的<script>元素添加到DOM中
+    callbacks.push(cb) // 将回调添加到callbacks数组中，等待脚本加载完成后再执行
+
+    // 根据浏览器支持选择合适的事件监听方式
     const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
     onEnd(script)
   }
 
   if (existingScript && cb) {
+    // 如果脚本已经存在于页面中并且提供了回调
     if (loadedTinymce()) {
+      // 如果TinyMCE已加载，则立即调用回调
       cb(null, existingScript)
     } else {
+      // 否则将回调添加到队列中，等待TinyMCE加载完成
       callbacks.push(cb)
     }
   }
 
-  function stdOnEnd (script) {
+  /**
+   * 处理标准浏览器中的脚本加载结束事件（包括成功和失败）。
+   *
+   * @param {HTMLScriptElement} script - 当前的<script>元素。
+   */
+  function stdOnEnd(script) {
     script.onload = function () {
-      // this.onload = null here is necessary
-      // because even IE9 works not like others
+      // 在IE9及以下版本中，this.onerror = this.onload = null 是必要的
       this.onerror = this.onload = null
       for (const cb of callbacks) {
         cb(null, script)
       }
-      callbacks = null
+      callbacks = null // 清除回调列表以释放内存
     }
     script.onerror = function () {
-      document.body.removeChild(script)
+      document.body.removeChild(script) // 移除加载失败的脚本元素
       this.onerror = this.onload = null
-      cb(new Error('Failed to load ' + src), script)
+      cb(new Error('Failed to load ' + src), script) // 执行回调并传递错误信息
     }
   }
 
-  function ieOnEnd (script) {
+  /**
+   * 处理IE8等不支持onload事件的旧版浏览器中的脚本加载结束事件。
+   *
+   * @param {HTMLScriptElement} script - 当前的<script>元素。
+   */
+  function ieOnEnd(script) {
     script.onreadystatechange = function () {
       if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
       this.onreadystatechange = null
       for (const cb of callbacks) {
-        cb(null, script) // there is no way to catch loading errors in IE8
+        cb(null, script) // IE8中无法捕获加载错误
       }
-      callbacks = null
+      callbacks = null // 清除回调列表以释放内存
     }
   }
 }
diff --git a/front-end/mall4v/src/components/tiny-mce/index.vue b/front-end/mall4v/src/components/tiny-mce/index.vue
index 7bce9d0..4ab16d6 100644
--- a/front-end/mall4v/src/components/tiny-mce/index.vue
+++ b/front-end/mall4v/src/components/tiny-mce/index.vue
@@ -1,47 +1,54 @@
 <template>
   <div class="components-tiny-mce">
+    <!-- 富文本编辑器容器 -->
     <div
       class="tinymce-container"
-      :class="{ 'tox-fullscreen': toxFullscreen }"
+      :class="{ 'tox-fullscreen': toxFullscreen }"  <!-- 根据是否全屏调整样式 -->
     >
-      <textarea
-        :id="id"
-        class="tinymce-textarea"
-      />
-      <!-- 增加图片区域 -->
-      <div
-        class="add-or-upload"
+    <!-- 编辑器的textarea元素，用于初始化TinyMCE -->
+    <textarea
+      :id="id"
+      class="tinymce-textarea"
+    />
+    <!-- 图片上传区域 -->
+    <div
+      class="add-or-upload"
+    >
+      <!-- 使用Element Plus的el-upload组件实现图片上传 -->
+      <el-upload
+        class="upload-demo"
+        list-type="picture"                      <!-- 列表类型为图片 -->
+      :action="uploadAction"                   <!-- 图片上传的目标URL -->
+      :headers="uploadHeaders"                 <!-- 自定义请求头，例如包含授权信息 -->
+      :on-success="imageSuccessCBK"            <!-- 图片上传成功后的回调函数 -->
+      :show-file-list="false"                  <!-- 是否显示已上传文件列表 -->
+      :before-upload="beforeAvatarUpload"      <!-- 文件上传前的钩子函数 -->
+      >
+      <!-- 上传按钮 -->
+      <el-button
+        size="small"
+        type="primary"
       >
-        <el-upload
-          class="upload-demo"
-          list-type="picture"
-          :action="uploadAction"
-          :headers="uploadHeaders"
-          :on-success="imageSuccessCBK"
-          :show-file-list="false"
-          :before-upload="beforeAvatarUpload"
-        >
-          <el-button
-            size="small"
-            type="primary"
-          >
-            点击上传图片
-          </el-button>
-        </el-upload>
-      </div>
+        点击上传图片
+      </el-button>
+      </el-upload>
     </div>
   </div>
+  </div>
 </template>
 
 <script setup>
-import $cookie from 'vue-cookies'
-import plugins from './plugins'
-import toolbarPar from './toolbar'
-import load from './dynamicLoadScript'
+import $cookie from 'vue-cookies'                    // 导入vue-cookies库，用于操作cookie
+import plugins from './plugins'                      // 导入TinyMCE插件配置
+import toolbarPar from './toolbar'                   // 导入TinyMCE工具栏配置
+import load from './dynamicLoadScript'               // 动态加载脚本的辅助函数
 
+// 设置上传接口的请求头，使用Authorization从cookie中获取
 const uploadHeaders = { Authorization: $cookie.get('Authorization') }
+// 设置上传图片的API地址
 const uploadAction = http.adornUrl('/admin/file/upload/element')
 
+// 定义组件接收的属性（props）
 const props = defineProps({
   modelValue: {
     type: String,
@@ -76,44 +83,52 @@ const props = defineProps({
   }
 })
 
+// 定义响应式变量
 const toxFullscreen = ref(false)
 let hasInit = false
 let hasChange = false
+
+// 监听modelValue的变化，并在条件满足时更新编辑器内容
 watch(() => props.modelValue, (val) => {
   if (!hasChange && hasInit) {
     setContent(val)
   }
 })
 
+// 计算当前语言设置
 const language = computed(() => {
   return localStorage.getItem('b2cLang') || 'zh_CN'
 })
+// 当语言变化时，销毁并重新初始化TinyMCE实例
 watch(() => language.value, () => {
   destroyTinymce()
   nextTick(() => initTinymce())
 })
 
+// 生命周期钩子
 onMounted(() => {
   init()
 })
-
 onActivated(() => {
   if (window.tinymce) {
     initTinymce()
   }
 })
-
 onDeactivated(() => {
   destroyTinymce()
 })
-
 onUnmounted(() => {
   destroyTinymce()
 })
+
+// 定义事件发射器
 const emit = defineEmits(['update:modelValue'])
+
+// TinyMCE资源CDN路径
 const resourceCdn1 = new URL('/static/js/tinymce/js/tinymce/tinymce.min.js', import.meta.url).href
+
+// 初始化函数，负责动态加载TinyMCE并初始化编辑器实例
 const init = () => {
-  // dynamic load tinymce from cdn
   load(resourceCdn1, (err) => {
     if (!err) {
       initTinymce()
@@ -121,95 +136,106 @@ const init = () => {
   })
 }
 
+// 绑定到编辑器实例的ID
 const tinymceId = ref(props.id)
+
+// 全屏状态标识
 const fullscreen = ref(false)
+
+// 初始化TinyMCE编辑器配置
 const initTinymce = () => {
   window.tinymce.init({
-    language: language.value,
-    selector: `#${tinymceId.value}`,
-    height: props.height,
-    body_class: 'panel-body ',
-    object_resizing: false,
-    toolbar: props.toolbar.length > 0 ? props.toolbar : toolbarPar,
-    menubar: props.menubar,
-    plugins,
-    end_container_on_empty_block: true,
-    powerpaste_word_import: 'clean',
-    paste_enable_default_filters: false, // 从word复制的内容保持原格式到富文本
-    code_dialog_height: 450,
-    code_dialog_width: 1000,
-    content_style: 'body {-webkit-user-modify: read-write;overflow-wrap: break-word;-webkit-line-break: after-white-space;}img {max-width: 100%;vertical-align:initial}',
-    advlist_bullet_styles: 'square',
-    advlist_number_styles: 'default',
-    imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
-    default_link_target: '_blank',
-    link_title: false,
-    nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
-    init_instance_callback: (editor) => {
+    language: language.value,                       // 语言设置
+    selector: `#${tinymceId.value}`,                // 编辑器绑定的DOM选择器
+    height: props.height,                           // 编辑器高度
+    body_class: 'panel-body ',                      // 编辑器body类名
+    object_resizing: false,                         // 禁用对象大小调整
+    toolbar: props.toolbar.length > 0 ? props.toolbar : toolbarPar, // 工具栏配置
+    menubar: props.menubar,                         // 菜单栏配置
+    plugins,                                        // 插件配置
+    end_container_on_empty_block: true,             // 在空块后结束容器
+    powerpaste_word_import: 'clean',                // 清理从Word粘贴的内容
+    paste_enable_default_filters: false,            // 粘贴时禁用默认过滤器
+    code_dialog_height: 450,                        // 代码编辑对话框高度
+    code_dialog_width: 1000,                        // 代码编辑对话框宽度
+    content_style: 'body {-webkit-user-modify: read-write;overflow-wrap: break-word;-webkit-line-break: after-white-space;}img {max-width: 100%;vertical-align:initial}', // 内容样式
+    advlist_bullet_styles: 'square',                // 高级列表项目符号样式
+    advlist_number_styles: 'default',               // 高级列表编号样式
+    imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'], // 图像工具CORS主机
+    default_link_target: '_blank',                  // 默认链接目标
+    link_title: false,                              // 链接标题
+    nonbreaking_force_tab: true,                    // 强制Tab键插入不间断空格
+    init_instance_callback: (editor) => {           // 编辑器实例初始化回调
       if (props.modelValue) {
-        editor.setContent(props.modelValue)
+        editor.setContent(props.modelValue)         // 如果有初始值，则设置编辑器内容
       }
       hasInit = true
       editor.on('NodeChange Change KeyUp SetContent', () => {
         hasChange = true
-        emit('update:modelValue', editor.getContent())
+        emit('update:modelValue', editor.getContent()) // 发射内容更新事件
       })
     },
-    setup: (editor) => {
+    setup: (editor) => {                            // 编辑器初始化设置
       editor.on('FullscreenStateChanged', (e) => {
-        fullscreen.value = e.state
+        fullscreen.value = e.state                  // 更新全屏状态
       })
     },
-    convert_urls: false
+    convert_urls: false                             // 不转换URL
   })
 }
 
+// 销毁TinyMCE编辑器实例
 const destroyTinymce = () => {
   try {
     const tinymce = window.tinymce.get(tinymceId.value)
     if (fullscreen.value) {
-      tinymce.execCommand('mceFullScreen')
+      tinymce.execCommand('mceFullScreen')          // 如果处于全屏模式，退出全屏
     }
     if (tinymce) {
-      tinymce.destroy()
+      tinymce.destroy()                             // 销毁编辑器实例
     }
   } catch (e) { }
 }
+
+// 设置编辑器内容
 const setContent = (value) => {
   if (window.tinymce) {
-    window.tinymce.get(tinymceId.value).setContent(value || '')
+    window.tinymce.get(tinymceId.value).setContent(value || '') // 设置编辑器内容
   }
 }
+
+// 获取资源URL前缀
 const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
-// eslint-disable-next-line no-unused-vars
+
+// 图片上传成功的回调函数
 const imageSuccessCBK = (response, file, fileList) => {
-  window.tinymce.get(props.id).insertContent(`<img alt="" src="${resourcesUrl + file.response.data}" >`)
+  window.tinymce.get(props.id).insertContent(`<img alt="" src="${resourcesUrl + file.response.data}" >`) // 将上传成功的图片插入到编辑器中
 }
 
 /**
- * 限制图片上传大小
+ * 限制图片上传大小及格式
  */
 const beforeAvatarUpload = (file) => {
   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
   if (!isJPG) {
-    this.$message.error('上传图片只能是jpeg/jpg/png/gif 格式!')
+    this.$message.error('上传图片只能是jpeg/jpg/png/gif 格式!') // 提示用户只能上传特定格式的图片
   }
   const isLt2M = file.size / 1024 / 1024 < 2
   if (!isLt2M) {
-    this.$message.error('上传图片大小不能超过 2MB!')
+    this.$message.error('上传图片大小不能超过 2MB!') // 提示用户图片大小限制
   }
-  return isLt2M && isJPG
+  return isLt2M && isJPG // 返回验证结果，控制是否允许上传
 }
 </script>
-<!--eslint-disable-next-line vue-scoped-css/enforce-style-type -->
+
 <style lang="scss">
+/* 定义组件的样式 */
 .components-tiny-mce {
   .tox-fullscreen .add-or-upload {
     z-index: 9999 !important;
-    position:fixed !important;
+    position: fixed !important;
     right: 0;
     top: 0;
-
   }
   .tinymce-container {
     position: relative;
diff --git a/front-end/mall4v/src/components/tiny-mce/plugins.js b/front-end/mall4v/src/components/tiny-mce/plugins.js
index 09e61fd..d4c18f1 100644
--- a/front-end/mall4v/src/components/tiny-mce/plugins.js
+++ b/front-end/mall4v/src/components/tiny-mce/plugins.js
@@ -1,7 +1,33 @@
-// Any plugins you want to use has to be imported
-// Detail plugins list see https://www.tinymce.com/docs/plugins/
-// Custom builds see https://www.tinymce.com/download/custom-builds/
-
-const plugins = ['paste preview anchor autolink  codesample emoticons image link lists media searchreplace table visualblocks wordcount  pagebreak insertdatetime fullscreen code']
+/**
+ * 定义TinyMCE编辑器中将要使用的插件。
+ *
+ * 注意：任何想要使用的插件都必须在此处列出。
+ * 有关可用插件的完整列表，请参阅官方文档：
+ * - 插件详情：https://www.tiny.cloud/docs/plugins/
+ * - 自定义构建：https://www.tiny.cloud/docs/download/custom-builds/
+ *
+ * 每个插件名称代表一个功能模块，它们可以单独或组合使用来增强编辑器的功能。
+ */
+const plugins = [
+  'paste',         // 允许用户从其他应用程序（如Word）粘贴内容，并控制粘贴行为。例如，可以选择保留或清理格式。
+  'preview',       // 提供预览功能，允许用户在不离开编辑器的情况下查看最终渲染的内容，确保内容看起来是预期的样子。
+  'anchor',        // 添加创建和编辑锚点的功能，用于在同一页面内创建可点击的链接，直接跳转到特定位置。
+  'autolink',      // 自动检测文本中的URL并将其转换为超链接，无需手动添加<a>标签。
+  'codesample',    // 支持插入代码示例，包括语法高亮，用户可以选择不同的编程语言以应用相应的样式。
+  'emoticons',     // 提供插入表情符号的功能，增加内容的情感表达。
+  'image',         // 允许插入和编辑图片，支持上传、调整大小、对齐等操作。
+  'link',          // 提供插入和编辑超链接的功能，用户可以轻松地向文本添加链接或修改现有链接。
+  'lists',         // 支持有序（编号）和无序（项目符号）列表的创建和编辑。
+  'media',         // 允许插入和编辑多媒体元素，如嵌入视频或音频文件。
+  'searchreplace', // 提供查找和替换文本的功能，方便用户快速修改文档内容。
+  'table',         // 提供创建和编辑表格的功能，支持行、列的操作以及样式调整。
+  'visualblocks',  // 显示HTML元素的边界框，帮助用户可视化编辑器中的块级元素结构。
+  'wordcount',     // 实时显示当前编辑器中字符数和字数统计，适用于需要遵循长度限制的内容。
+  'pagebreak',     // 插入分页符，特别适用于打印长文档时，可以在适当的位置进行分页。
+  'insertdatetime',// 插入当前日期和时间，便于记录内容创建或更新的时间戳。
+  'fullscreen',    // 允许切换到全屏模式进行编辑，提供更加沉浸式的编辑体验。
+  'code'           // 显示和编辑原始HTML源代码，适合高级用户或需要对生成的HTML有更多的控制权。
+]
 
+// 导出插件列表，以便在初始化TinyMCE编辑器时引用。
 export default plugins
diff --git a/front-end/mall4v/src/components/tiny-mce/toolbar.js b/front-end/mall4v/src/components/tiny-mce/toolbar.js
index e261c32..1a7064e 100644
--- a/front-end/mall4v/src/components/tiny-mce/toolbar.js
+++ b/front-end/mall4v/src/components/tiny-mce/toolbar.js
@@ -1,6 +1,47 @@
-// Here is a list of the toolbar
-// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
-
-const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample hr numlist link image  preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen']
+/**
+ * 定义TinyMCE编辑器工具栏中将要显示的按钮列表。
+ *
+ * 注意：工具栏中的每一个条目代表一个功能按钮或命令，
+ * 用户可以通过点击这些按钮来执行相应的操作。
+ * 有关可用工具栏控件的完整列表，请参阅官方文档：
+ * - 工具栏控件详情：https://www.tiny.cloud/docs/advanced/editor-control-identifiers/#toolbarcontrols
+ *
+ * 每个工具栏控件名称代表一个特定的功能模块，它们可以单独或组合使用来增强编辑器的功能。
+ */
+const toolbar = [
+  'searchreplace',      // 提供查找和替换文本的功能，方便用户快速修改文档内容。
+  'bold',               // 加粗选中的文本。
+  'italic',             // 斜体选中的文本。
+  'underline',          // 下划线选中的文本。
+  'strikethrough',      // 删除线选中的文本。
+  'alignleft',          // 将选中的文本左对齐。
+  'aligncenter',        // 将选中的文本居中对齐。
+  'alignright',         // 将选中的文本右对齐。
+  'outdent',            // 减少选中文本的缩进级别。
+  'indent',             // 增加选中文本的缩进级别。
+  'blockquote',         // 创建或移除引用块（通常用于引用其他来源的内容）。
+  'undo',               // 撤销上一步操作。
+  'redo',               // 重做已撤销的操作。
+  'removeformat',       // 移除选中文本的所有格式。
+  'subscript',          // 设置选中的文本为下标。
+  'superscript',        // 设置选中的文本为上标。
+  'code',               // 切换到代码视图，允许直接编辑HTML源代码。
+  'codesample',         // 插入代码示例，支持多种编程语言的语法高亮。
+  'hr',                 // 插入水平线，用于分隔内容。
+  'numlist',            // 插入有序列表（编号列表）。
+  'link',               // 插入或编辑超链接。
+  'image',              // 插入或编辑图片。
+  'preview',            // 预览编辑器内容，确保最终效果符合预期。
+  'anchor',             // 插入锚点，用于在同一页面内创建可点击的链接。
+  'pagebreak',          // 插入分页符，特别适用于打印长文档时进行分页。
+  'insertdatetime',     // 插入当前日期和时间。
+  'media',              // 插入多媒体元素，如视频或音频文件。
+  'table',              // 插入或编辑表格。
+  'emoticons',          // 插入表情符号，增加内容的情感表达。
+  'forecolor',          // 更改选中文本的颜色。
+  'backcolor',          // 更改选中文本背景颜色。
+  'fullscreen'          // 切换到全屏模式进行编辑，提供更加沉浸式的编辑体验。
+]
 
+// 导出工具栏配置，以便在初始化TinyMCE编辑器时引用。
 export default toolbar
diff --git a/front-end/mall4v/vite.config.js b/front-end/mall4v/vite.config.js
index e219ab1..e6c57c0 100644
--- a/front-end/mall4v/vite.config.js
+++ b/front-end/mall4v/vite.config.js
@@ -1,91 +1,92 @@
-import { defineConfig, loadEnv } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import path from 'path'
-import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components/vite'
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
-import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
-import viteCompression from 'vite-plugin-compression'
+import { defineConfig, loadEnv } from 'vite'; // 导入 Vite 的定义配置函数和环境变量加载函数
+import vue from '@vitejs/plugin-vue'; // 导入 Vue 插件，使 Vite 支持 .vue 文件
+import path from 'path'; // Node.js 标准库，用于处理和转换文件路径
+import AutoImport from 'unplugin-auto-import/vite'; // 自动导入 API 插件
+import Components from 'unplugin-vue-components/vite'; // 自动注册组件插件
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; // 组件解析器，用于自动导入 Element Plus 组件
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // SVG 图标插件，将 SVG 文件转化为 Vue 组件
+import viteCompression from 'vite-plugin-compression'; // 压缩构建输出文件的插件
 
-// eslint
-import eslintPlugin from 'vite-plugin-eslint'
+// ESLint 插件，用于在开发期间进行代码检查
+import eslintPlugin from 'vite-plugin-eslint';
 
-// https://vitejs.dev/config/
-export default defineConfig(({ command })=> {
-  return {
-    plugins: [
-      vue(),
-      createSvgIconsPlugin({
-        iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
-        symbolId: 'icon-[dir]-[name]'
-      }),
-      // 自动引入内容
-      AutoImport({
-        imports: [
-          'vue',
-          'vue-router'
-        ],
-        dirs: [
-          'src/hooks/**',
-          'src/stores/**',
-          'src/utils/**'
-        ],
-        resolvers: command === 'build' ? [ElementPlusResolver()] : [],
-        dts: 'src/auto-import/imports.d.ts',
-        eslintrc: {
-          enabled: false
-        }
-      }),
-      // 自动引入组件
-      Components({
-        dirs: [
-          'src/components'
-        ],
-        resolvers: command === 'build' ? [ElementPlusResolver()] : [],
-        dts: 'src/auto-import/components.d.ts'
-      }),
-      // 对大于 1k 的文件进行压缩
-      viteCompression({
-        threshold: 1000,
-      })
-    ].concat(
-      // eslint
-      command !== 'build' ? [eslintPlugin({ include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'] })] : []
-    ),
-    server: {
-      host: true,
-      port: 9527,
-      open: true
-    },
-    resolve: {
-      alias: {
-        '@': path.resolve(__dirname, 'src'),
-        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
+export default defineConfig(({ command }) => ({
+  plugins: [
+    vue(), // 启用 Vue 插件
+
+    // 创建 SVG 图标插件实例，配置图标目录和生成的 symbol ID 模板
+    createSvgIconsPlugin({
+      iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
+      symbolId: 'icon-[dir]-[name]'
+    }),
+
+    // 配置 AutoImport 插件以自动导入指定模块中的内容
+    AutoImport({
+      imports: ['vue', 'vue-router'], // 指定要自动导入的模块
+      dirs: ['src/hooks/**', 'src/stores/**', 'src/utils/**'], // 包含自定义钩子、状态管理、工具函数的目录
+      resolvers: command === 'build' ? [ElementPlusResolver()] : [], // 构建时使用 ElementPlusResolver 解析器
+      dts: 'src/auto-import/imports.d.ts', // 自动生成类型声明文件的位置
+      eslintrc: {
+        enabled: false // 禁用对 .eslintrc 文件的自动更新
       }
-    },
-    build: {
-      base: './',
-      rollupOptions: {
-        // 静态资源分类打包
-        output: {
-          chunkFileNames: 'static/js/[name]-[hash].js',
-          entryFileNames: 'static/js/[name]-[hash].js',
-          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
-          // 静态资源分拆打包
-          manualChunks (id) {
-            if (id.includes('node_modules')) {
-              if (id.toString().indexOf('.pnpm/') !== -1) {
-                return id.toString().split('.pnpm/')[1].split('/')[0].toString();
-              } else if (id.toString().indexOf('node_modules/') !== -1) {
-                return id.toString().split('node_modules/')[1].split('/')[0].toString();
-              }
+    }),
+
+    // 自动注册来自特定目录的 Vue 组件，并可选地使用解析器来处理第三方库中的组件
+    Components({
+      dirs: ['src/components'], // 包含组件的目录
+      resolvers: command === 'build' ? [ElementPlusResolver()] : [], // 构建时使用 ElementPlusResolver 解析器
+      dts: 'src/auto-import/components.d.ts' // 自动生成类型声明文件的位置
+    }),
+
+    // 使用 ESLint 插件检查 JavaScript 和 Vue 文件
+    eslintPlugin({
+      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'] // 指定要检查的文件模式
+    }),
+
+    // 对超过 1KB 的文件启用 gzip 或 brotli 压缩
+    viteCompression({
+      threshold: 1000,
+    })
+  ],
+
+  // 开发服务器配置
+  server: {
+    host: true, // 允许外部访问
+    port: 9527, // 设置服务端口
+    open: true // 在启动时自动打开浏览器
+  },
+
+  // 路径别名配置
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'), // 将 @ 替换为 src 目录的绝对路径
+      'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' // 强制使用兼容性更好的 vue-i18n 版本
+    }
+  },
+
+  // 构建选项
+  build: {
+    base: './', // 构建后的资源基础路径
+    rollupOptions: {
+      output: {
+        chunkFileNames: 'static/js/[name]-[hash].js', // 动态导入的代码分割块命名规则
+        entryFileNames: 'static/js/[name]-[hash].js', // 入口文件命名规则
+        assetFileNames: 'static/[ext]/[name]-[hash].[ext]', // 静态资源（如图片、字体等）命名规则
+
+        // 手动拆分 chunks，通常用于优化包大小和缓存策略
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            if (id.toString().indexOf('.pnpm/') !== -1) {
+              return id.toString().split('.pnpm/')[1].split('/')[0].toString();
+            } else if (id.toString().indexOf('node_modules/') !== -1) {
+              return id.toString().split('node_modules/')[1].split('/')[0].toString();
             }
           }
         }
-      },
-      sourcemap: false,
-      target: 'es2015',
-      reportCompressedSize: false
-    }
+      }
+    },
+    sourcemap: false, // 是否生成 source map 文件
+    target: 'es2015', // 设置打包后代码的目标浏览器或 Node.js 版本
+    reportCompressedSize: false // 不报告压缩后的包大小
   }
-})
+}));