diff --git a/front-end/mall4v/src/views/modules/shop/hotSearch/add-or-update.vue b/front-end/mall4v/src/views/modules/shop/hotSearch/add-or-update.vue
index 4dd8eb5..f8733ec 100644
--- a/front-end/mall4v/src/views/modules/shop/hotSearch/add-or-update.vue
+++ b/front-end/mall4v/src/views/modules/shop/hotSearch/add-or-update.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="mod-hotSearch-add-or-update">
+    <!-- 对话框 -->
     <el-dialog
       v-model="visible"
       :title="!dataForm.hotSearchId ? '新增' : '修改'"
       :close-on-click-modal="false"
     >
+      <!-- 表单 -->
       <el-form
         ref="dataFormRef"
         :model="dataForm"
@@ -12,10 +14,8 @@
         label-width="80px"
         @keyup.enter="onSubmit()"
       >
-        <el-form-item
-          label="标题"
-          prop="title"
-        >
+        <!-- 标题输入框 -->
+        <el-form-item label="标题" prop="title">
           <el-input
             v-model="dataForm.title"
             controls-position="right"
@@ -26,10 +26,8 @@
           />
         </el-form-item>
 
-        <el-form-item
-          label="内容"
-          prop="content"
-        >
+        <!-- 内容文本区域 -->
+        <el-form-item label="内容" prop="content">
           <el-input
             v-model="dataForm.content"
             controls-position="right"
@@ -40,10 +38,9 @@
             label="内容"
           />
         </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"
@@ -51,31 +48,21 @@
             label="排序号"
           />
         </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="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>
+
+      <!-- 对话框底部按钮 -->
       <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>
@@ -85,7 +72,12 @@
 <script setup>
 import { ElMessage } from 'element-plus'
 import { Debounce } from '@/utils/debounce'
+import { ref, reactive, nextTick, defineEmits, defineExpose } from 'vue'
+
+// 定义事件发射器，用于向父组件发送事件
 const emit = defineEmits(['refreshDataList'])
+
+// 表单数据对象，初始化默认值
 const dataForm = ref({
   hotSearchId: 0,
   title: '',
@@ -94,12 +86,18 @@ const dataForm = ref({
   seq: 0,
   status: 0
 })
+
+// 分页信息（此处未在代码中使用）
 const page = reactive({
   total: 0, // 总页数
   currentPage: 1, // 当前页数
   pageSize: 10 // 每页显示多少条
 })
+
+// 控制对话框显示/隐藏的布尔值
 const visible = ref(false)
+
+// 表单验证规则
 const dataRule = {
   title: [
     { required: true, message: '标题不能为空', trigger: 'blur' },
@@ -113,7 +111,13 @@ const dataRule = {
   ]
 }
 
+// 表单引用
 const dataFormRef = ref(null)
+
+/**
+ * 初始化方法，接受可选的ID作为参数
+ * @param id - 热门搜索条目ID，如果存在则为编辑模式
+ */
 const init = (id) => {
   dataForm.value.hotSearchId = id || 0
   visible.value = true
@@ -159,5 +163,4 @@ const onSubmit = Debounce(() => {
     }
   })
 })
-
 </script>
diff --git a/front-end/mall4v/src/views/modules/shop/hotSearch/index.vue b/front-end/mall4v/src/views/modules/shop/hotSearch/index.vue
index a406211..ae4b61e 100644
--- a/front-end/mall4v/src/views/modules/shop/hotSearch/index.vue
+++ b/front-end/mall4v/src/views/modules/shop/hotSearch/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="mod-hotSearcch">
+    <!-- 使用avue-crud构建CRUD表格 -->
     <avue-crud
       ref="crudRef"
       :page="page"
@@ -11,6 +12,7 @@
       @refresh-change="refreshChange"
       @selection-change="selectionChange"
     >
+      <!-- 自定义左侧菜单按钮 -->
       <template #menu-left>
         <el-button
           v-if="isAuth('admin:hotSearch:save')"
@@ -29,18 +31,13 @@
         </el-button>
       </template>
 
+      <!-- 自定义状态列内容 -->
       <template #status="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>
 
+      <!-- 自定义行操作菜单 -->
       <template #menu="scope">
         <el-button
           v-if="isAuth('admin:hotSearch:update')"
@@ -54,14 +51,14 @@
           v-if="isAuth('admin:hotSearch:deconste')"
           type="danger"
           icon="el-icon-deconste"
-          @click.stop="onDeconste(scope.row,scope.index)"
+          @click.stop="onDeconste(scope.row, scope.index)"
         >
           删除
         </el-button>
       </template>
     </avue-crud>
 
-    <!-- 弹窗, 新增 / 修改 -->
+    <!-- 引入用于添加或更新记录的子组件 -->
     <add-or-update
       v-if="addOrUpdateVisible"
       ref="addOrUpdateRef"
@@ -75,15 +72,23 @@ import { isAuth } from '@/utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { tableOption } from '@/crud/shop/hotSearch.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 // 每页显示多少条
 })
+
+// 表格加载状态
 const dataListLoading = ref(false)
+
 /**
- * 获取数据列表
+ * 获取数据列表方法
  */
 const getDataList = (pageParam, params, done) => {
   dataListLoading.value = true
@@ -104,20 +109,25 @@ const getDataList = (pageParam, params, done) => {
       if (done) done()
     })
 }
+
+// 多选框选中的数据
 const dataListSelections = ref([])
+
 /**
  * 多选回调
- * @param list
+ * @param list - 用户选择的数据列表
  */
 const selectionChange = (list) => {
   dataListSelections.value = list
 }
 
+// 控制添加或更新对话框显示/隐藏
 const addOrUpdateVisible = ref(false)
 const addOrUpdateRef = ref(null)
+
 /**
- * 新增 / 修改
- * @param id
+ * 新增或修改热门搜索条目
+ * @param id - 如果存在则为编辑模式，否则为新增模式
  */
 const onAddOrUpdate = (id) => {
   addOrUpdateVisible.value = true
@@ -127,19 +137,20 @@ const onAddOrUpdate = (id) => {
 }
 
 /**
- * 点击查询
+ * 条件查询触发的数据获取
+ * @param params - 查询参数
+ * @param done - 完成回调
  */
 const onSearch = (params, done) => {
   getDataList(page, params, done)
 }
 
 /**
- * 删除
+ * 删除单个或多个热门搜索条目
+ * @param row - 如果传入row则删除单个条目，否则批量删除选中项
  */
 const onDeconste = (row) => {
-  const ids = row.hotSearchId ? [row.hotSearchId] : dataListSelections.value?.map(item => {
-    return item.hotSearchId
-  })
+  const ids = row.hotSearchId ? [row.hotSearchId] : dataListSelections.value?.map(item => item.hotSearchId)
   ElMessageBox.confirm(`确定进行[${row.hotSearchId ? '删除' : '批量删除'}]操作?`, '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
@@ -161,10 +172,13 @@ const onDeconste = (row) => {
             }
           })
         })
-    }).catch(() => { })
+    }).catch(() => {})
 }
+
+/**
+ * 刷新页面数据
+ */
 const refreshChange = () => {
   getDataList(page)
 }
-
 </script>
diff --git a/front-end/mall4v/src/views/modules/shop/notice/add-or-update.vue b/front-end/mall4v/src/views/modules/shop/notice/add-or-update.vue
index 86c95c4..6f7e4b5 100644
--- a/front-end/mall4v/src/views/modules/shop/notice/add-or-update.vue
+++ b/front-end/mall4v/src/views/modules/shop/notice/add-or-update.vue
@@ -4,6 +4,7 @@
     :title="!dataForm.id ? '新增' : '修改'"
     :close-on-click-modal="false"
   >
+    <!-- 表单 -->
     <el-form
       ref="dataFormRef"
       :model="dataForm"
@@ -11,58 +12,38 @@
       label-width="80px"
       @keyup.enter="onSubmit()"
     >
-      <el-form-item
-        label="公告标题"
-        prop="title"
-      >
+      <!-- 公告标题 -->
+      <el-form-item label="公告标题" 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="isTop"
-      >
+
+      <!-- 置顶选项 -->
+      <el-form-item label="置顶" prop="isTop">
         <el-radio-group v-model="dataForm.isTop">
-          <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="content"
-      >
-        <TinyMce
-          ref="contentEnRef"
-          v-model="dataForm.content"
-        />
+
+      <!-- 公告内容 -->
+      <el-form-item label="公告内容" prop="content">
+        <TinyMce ref="contentEnRef" v-model="dataForm.content" />
       </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>
@@ -71,11 +52,20 @@
 <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)
+
+// TinyMce组件引用
 const contentEnRef = ref(null)
 
-// eslint-disable-next-line no-unused-vars
+/**
+ * 自定义验证规则：确保公告标题不为空白字符
+ */
 const validateTitle = (rule, value, callback) => {
   if (!value.trim()) {
     dataForm.value.title = ''
@@ -84,6 +74,8 @@ const validateTitle = (rule, value, callback) => {
     callback()
   }
 }
+
+// 表单验证规则
 const dataRule = {
   title: [
     { required: true, message: '公告标题不能为空', trigger: 'blur' },
@@ -91,6 +83,7 @@ const dataRule = {
   ]
 }
 
+// 表单数据对象，初始化默认值
 const dataForm = ref({
   title: null,
   content: null,
@@ -98,7 +91,14 @@ const dataForm = ref({
   status: 1,
   isTop: 0
 })
+
+// 表单引用
 const dataFormRef = ref(null)
+
+/**
+ * 初始化方法，接受可选的ID作为参数
+ * @param id - 公告条目ID，如果存在则为编辑模式
+ */
 const init = (id) => {
   dataForm.value.id = id || 0
   visible.value = true
@@ -144,5 +144,4 @@ const onSubmit = Debounce(() => {
     }
   })
 })
-
 </script>
diff --git a/front-end/mall4v/src/views/modules/shop/notice/index.vue b/front-end/mall4v/src/views/modules/shop/notice/index.vue
index a2999df..e1f805e 100644
--- a/front-end/mall4v/src/views/modules/shop/notice/index.vue
+++ b/front-end/mall4v/src/views/modules/shop/notice/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="mod-shop-notice">
+    <!-- 使用avue-crud构建CRUD表格 -->
     <avue-crud
       ref="crudRef"
       :page="page"
@@ -10,25 +11,19 @@
       @on-load="getDataList"
       @refresh-change="refreshChange"
     >
+      <!-- 自定义状态列内容 -->
       <template #status="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>
+
+      <!-- 自定义置顶列内容 -->
       <template #isTop="scope">
-        <el-tag v-if="scope.row.isTop === 0">
-          否
-        </el-tag>
-        <el-tag v-else>
-          是
-        </el-tag>
+        <el-tag v-if="scope.row.isTop === 0">否</el-tag>
+        <el-tag v-else>是</el-tag>
       </template>
+
+      <!-- 自定义左侧菜单按钮 -->
       <template #menu-left>
         <el-button
           v-if="isAuth('shop:notice:save')"
@@ -39,6 +34,8 @@
           新增
         </el-button>
       </template>
+
+      <!-- 自定义行操作菜单 -->
       <template #menu="scope">
         <el-button
           v-if="isAuth('shop:notice:update')"
@@ -58,6 +55,8 @@
         </el-button>
       </template>
     </avue-crud>
+
+    <!-- 引入用于添加或更新记录的子组件 -->
     <add-or-update
       v-if="addOrUpdateVisible"
       ref="addOrUpdateRef"
@@ -72,16 +71,25 @@ import { isAuth } from '@/utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { tableOption } from '@/crud/shop/notice'
 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 // 每页显示多少条
 })
+
+// 表格加载状态
 const dataListLoading = ref(false)
+
+// 控制添加或更新对话框显示/隐藏
 const addOrUpdateVisible = ref(false)
 
+// 获取数据列表方法
 const getDataList = (pageParam, params, done) => {
   dataListLoading.value = true
   http({
@@ -100,10 +108,12 @@ const getDataList = (pageParam, params, done) => {
     })
 }
 
+// 添加或更新引用
 const addOrUpdateRef = ref(null)
+
 /**
  * 新增 / 修改
- * @param id
+ * @param id - 如果存在则为编辑模式，否则为新增模式
  */
 const onAddOrUpdate = (id) => {
   addOrUpdateVisible.value = true
@@ -112,6 +122,10 @@ const onAddOrUpdate = (id) => {
   })
 }
 
+/**
+ * 删除公告条目
+ * @param id - 公告条目的ID
+ */
 const onDelete = (id) => {
   ElMessageBox.confirm('确定进行删除操作?', '提示', {
     confirmButtonText: '确定',
@@ -134,7 +148,7 @@ const onDelete = (id) => {
             }
           })
         })
-    }).catch(() => { })
+    }).catch(() => {})
 }
 
 /**
@@ -144,10 +158,12 @@ 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/shop/pickAddr/add-or-update.vue b/front-end/mall4v/src/views/modules/shop/pickAddr/add-or-update.vue
index 48e28b2..75e0148 100644
--- a/front-end/mall4v/src/views/modules/shop/pickAddr/add-or-update.vue
+++ b/front-end/mall4v/src/views/modules/shop/pickAddr/add-or-update.vue
@@ -4,6 +4,7 @@
     :title="!dataForm.addrId ? '新增' : '修改'"
     :close-on-click-modal="false"
   >
+    <!-- 表单 -->
     <el-form
       ref="dataFormRef"
       :model="dataForm"
@@ -11,15 +12,12 @@
       label-width="80px"
       @keyup.enter="onSubmit()"
     >
-      <el-form-item
-        label="名称"
-        prop="addrName"
-      >
-        <el-input
-          v-model="dataForm.addrName"
-          placeholder="自提点名称"
-        />
+      <!-- 自提点名称 -->
+      <el-form-item label="名称" prop="addrName">
+        <el-input v-model="dataForm.addrName" placeholder="自提点名称" />
       </el-form-item>
+
+      <!-- 省份、城市、区县选择 -->
       <el-form-item label="省份">
         <el-col :span="8">
           <el-form-item prop="province">
@@ -55,10 +53,7 @@
         </el-col>
         <el-col :span="8">
           <el-form-item prop="area">
-            <el-select
-              v-model="dataForm.areaId"
-              placeholder="请选择"
-            >
+            <el-select v-model="dataForm.areaId" placeholder="请选择">
               <el-option
                 v-for="area in areaList"
                 :key="area.areaId"
@@ -69,35 +64,23 @@
           </el-form-item>
         </el-col>
       </el-form-item>
-      <el-form-item
-        label="地址"
-        prop="addr"
-      >
-        <el-input
-          v-model="dataForm.addr"
-          placeholder="地址"
-        />
+
+      <!-- 地址 -->
+      <el-form-item label="地址" prop="addr">
+        <el-input v-model="dataForm.addr" placeholder="地址" />
       </el-form-item>
-      <el-form-item
-        label="手机号"
-        prop="mobile"
-      >
-        <el-input
-          v-model="dataForm.mobile"
-          maxlength="11"
-          placeholder="手机号"
-        />
+
+      <!-- 手机号 -->
+      <el-form-item label="手机号" prop="mobile">
+        <el-input v-model="dataForm.mobile" maxlength="11" placeholder="手机号" />
       </el-form-item>
     </el-form>
+
+    <!-- 对话框底部按钮 -->
     <template #footer>
-      <span
-        class="dialog-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>
@@ -107,9 +90,15 @@
 import { ElMessage } from 'element-plus'
 import { isMobile } from '@/utils/validate'
 import { Debounce } from '@/utils/debounce'
+import { ref, reactive, nextTick, defineEmits, defineExpose } from 'vue'
+
+// 定义事件发射器，用于向父组件发送事件
 const emit = defineEmits(['refreshDataList'])
+
+// 控制对话框显示/隐藏的布尔值
 const visible = ref(false)
-// eslint-disable-next-line no-unused-vars
+
+// 验证手机号格式
 const validateMobile = (rule, value, callback) => {
   if (!isMobile(value)) {
     callback(new Error('手机号格式错误'))
@@ -117,6 +106,8 @@ const validateMobile = (rule, value, callback) => {
     callback()
   }
 }
+
+// 表单验证规则
 const dataRule = {
   addrName: [
     { required: true, message: '自提点名称不能为空', trigger: 'blur' },
@@ -136,10 +127,20 @@ const dataRule = {
     { validator: validateMobile, trigger: 'blur' }
   ]
 }
+
+// 省列表
 const provinceList = ref([])
+
+// 表单引用
 const dataFormRef = ref(null)
+
+// 城市列表
 const cityList = ref([])
+
+// 区/县列表
 const areaList = ref([])
+
+// 表单数据对象，初始化默认值
 const dataForm = reactive({
   addrId: 0,
   addr: '',
@@ -152,11 +153,18 @@ const dataForm = reactive({
   cityId: null,
   provinceId: null
 })
+
+// 分页信息
 const page = reactive({
   total: 0, // 总页数
   currentPage: 1, // 当前页数
   pageSize: 10 // 每页显示多少条
 })
+
+/**
+ * 初始化方法，接受可选的ID作为参数
+ * @param id - 自提点地址条目ID，如果存在则为编辑模式
+ */
 const init = (id) => {
   dataForm.addrId = id || 0
   visible.value = true
@@ -173,9 +181,7 @@ const init = (id) => {
   })
   if (dataForm.addrId) {
     http({
-      url: http.adornUrl(
-        `/shop/pickAddr/info/${dataForm.addrId}`
-      ),
+      url: http.adornUrl(`/shop/pickAddr/info/${dataForm.addrId}`),
       method: 'get',
       params: http.adornParams()
     })
@@ -197,6 +203,10 @@ const init = (id) => {
 }
 defineExpose({ init })
 
+/**
+ * 根据父级ID获取地区列表
+ * @param pid - 父级地区ID，默认为0表示获取省级列表
+ */
 const listAreaByParentId = (pid) => {
   if (!pid) pid = 0
   return http({
@@ -207,26 +217,26 @@ const listAreaByParentId = (pid) => {
 }
 
 /**
- * 选择省
- * @param val
+ * 选择省时触发
+ * @param val - 省ID
  */
 const selectProvince = (val) => {
   dataForm.cityId = null
   dataForm.city = ''
-  // 获取城市的select
+  dataForm.areaId = null
+  dataForm.area = ''
   listAreaByParentId(val).then(({ data }) => {
     cityList.value = data
   })
 }
 
 /**
- * 选择市
- * @param val
+ * 选择市时触发
+ * @param val - 市ID
  */
 const selectCity = (val) => {
   dataForm.areaId = null
   dataForm.area = ''
-  // 获取区的select
   listAreaByParentId(val).then(({ data }) => {
     areaList.value = data
   })
@@ -236,24 +246,23 @@ const selectCity = (val) => {
  * 表单提交
  */
 const onSubmit = Debounce(() => {
+  // 设置省市区的名字
   for (let i = 0; i < provinceList.value.length; i++) {
     if (provinceList.value[i].areaId === dataForm.provinceId) {
-      // 将省名字保存起来
       dataForm.province = provinceList.value[i].areaName
     }
   }
   for (let i = 0; i < cityList.value.length; i++) {
     if (cityList.value[i].areaId === dataForm.cityId) {
-      // 将市名字保存起来
       dataForm.city = cityList.value[i].areaName
     }
   }
   for (let i = 0; i < areaList.value.length; i++) {
     if (areaList.value[i].areaId === dataForm.areaId) {
-      // 将市名字保存起来
       dataForm.area = areaList.value[i].areaName
     }
   }
+
   dataFormRef.value?.validate(valid => {
     if (valid) {
       http({
diff --git a/front-end/mall4v/src/views/modules/shop/pickAddr/index.vue b/front-end/mall4v/src/views/modules/shop/pickAddr/index.vue
index 6024340..4dad1f1 100644
--- a/front-end/mall4v/src/views/modules/shop/pickAddr/index.vue
+++ b/front-end/mall4v/src/views/modules/shop/pickAddr/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="mod-pickAddr">
+    <!-- 使用avue-crud构建CRUD表格 -->
     <avue-crud
       ref="crudRef"
       :page="page"
@@ -10,6 +11,7 @@
       @selection-change="selectionChange"
       @on-load="getDataList"
     >
+      <!-- 自定义左侧菜单按钮 -->
       <template #menu-left>
         <el-button
           v-if="isAuth('shop:pickAddr:save')"
@@ -30,6 +32,7 @@
         </el-button>
       </template>
 
+      <!-- 自定义行操作菜单 -->
       <template #menu="scope">
         <el-button
           v-if="isAuth('shop:pickAddr:update')"
@@ -65,18 +68,28 @@ import { isAuth } from '@/utils'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import AddOrUpdate from './add-or-update.vue'
 import { tableOption } from '@/crud/shop/pickAddr.js'
+import { ref, reactive, nextTick } from 'vue'
+
+// 定义权限控制对象
 const permission = {
   delBtn: isAuth('prod:prod:delete')
 }
+
+// 数据列表引用
 const dataList = ref([])
+
+// 已选中的数据项
 const dataListSelections = ref([])
+
+// 分页信息
 const page = reactive({
   total: 0, // 总页数
   currentPage: 1, // 当前页数
   pageSize: 10 // 每页显示多少条
 })
+
 /**
- * 获取数据列表
+ * 获取数据列表方法
  */
 const getDataList = (pageParam, params, done) => {
   http({
@@ -99,11 +112,13 @@ const getDataList = (pageParam, params, done) => {
     })
 }
 
+// 控制添加或更新对话框显示/隐藏
 const addOrUpdateVisible = ref(false)
 const addOrUpdateRef = ref(null)
+
 /**
  * 新增 / 修改
- * @param id
+ * @param id - 如果存在则为编辑模式，否则为新增模式
  */
 const onAddOrUpdate = (id) => {
   addOrUpdateVisible.value = true
@@ -113,13 +128,11 @@ const onAddOrUpdate = (id) => {
 }
 
 /**
- * 删除
- * @param id
+ * 删除单个或多个自提点地址
+ * @param id - 单个自提点地址ID，若未提供则执行批量删除
  */
 const onDelete = (id) => {
-  const ids = id ? [id] : dataListSelections.value?.map(item => {
-    return item.addrId
-  })
+  const ids = id ? [id] : dataListSelections.value?.map(item => item.addrId)
   ElMessageBox.confirm(
     '确定进行删除操作?', '提示',
     {
@@ -145,20 +158,21 @@ const onDelete = (id) => {
           })
         })
     })
-    .catch(() => { })
+    .catch(() => {})
 }
 
 /**
- * 条件查询
- * @param params
- * @param done
+ * 条件查询触发的数据获取
+ * @param params - 查询参数
+ * @param done - 完成回调
  */
 const onSearch = (params, done) => {
   getDataList(page, params, done)
 }
+
 /**
- * 多选变化
- * @param val
+ * 多选变化时触发
+ * @param val - 当前选择的数据项数组
  */
 const selectionChange = (val) => {
   dataListSelections.value = val
diff --git a/front-end/mall4v/src/views/modules/shop/transport/add-or-update.vue b/front-end/mall4v/src/views/modules/shop/transport/add-or-update.vue
index e077e2c..0826721 100644
--- a/front-end/mall4v/src/views/modules/shop/transport/add-or-update.vue
+++ b/front-end/mall4v/src/views/modules/shop/transport/add-or-update.vue
@@ -1,326 +1,142 @@
 <template>
+  <!-- 使用Element Plus的el-dialog组件创建一个对话框 -->
   <el-dialog
     v-model="visible"
-    :title="!dataForm.transportId ? '新增' : '修改'"
-    :close-on-click-modal="false"
-    width="1400px"
-    class="transport-dialog"
+  :title="!dataForm.transportId ? '新增' : '修改'"
+  :close-on-click-modal="false"
+  width="1400px"
+  class="transport-dialog"
   >
-    <el-form
-      ref="dataFormRef"
-      :model="dataForm"
-      label-width="80px"
-      @keyup.enter="onSubmit()"
-    >
-      <el-form-item
-        label="模板名称"
-        prop="transName"
-        :rules="[
+  <!-- 表单元素，包含多个表单项和一个表格 -->
+  <el-form
+    ref="dataFormRef"
+  :model="dataForm"
+  label-width="80px"
+  @keyup.enter="onSubmit()"
+  >
+  <!-- 模板名称输入框 -->
+  <el-form-item
+    label="模板名称"
+    prop="transName"
+    :rules="[
           { required: true, message: '模板名称不能为空'},
-          { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的模板名称', trigger: 'blur' }
-        ]"
-      >
-        <el-input
-          v-model="dataForm.transName"
-          placeholder="模板名称"
-        />
-      </el-form-item>
-      <el-form-item
-        label="模板类型"
-        prop="isFreeFee"
-        required="required"
-      >
-        <el-radio-group
-          v-model="dataForm.isFreeFee"
-          @change="changeFreeFee"
-        >
-          <el-radio :label="0">
-            买家承担运费
-          </el-radio>
-          <el-radio :label="1">
-            卖家包邮
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item
-        label="收费方式"
-        prop="chargeType"
-      >
-        <el-radio-group
-          v-model="dataForm.chargeType"
-          :disabled="dataForm.isFreeFee == 1"
-        >
-          <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-table
-        :data="dataForm.transfees"
-        border
-        style="width: 100%;"
-        class="table-con"
-      >
-        <el-table-column
-          header-align="center"
-          align="center"
-          width="450"
-          label="可配送区域"
-        >
-          <template #default="scope">
-            <span v-if="scope.$index == 0">所有地区</span>
-            <span v-if="(!scope.row.cityList || !scope.row.cityList.length) && scope.$index > 0">请选择可配送区域</span>
-            <span v-if="scope.$index > 0">
-              <el-tag
-                v-for="city in scope.row.cityList"
-                :key="city.areaId"
-              >{{ city.areaName }}</el-tag>
+          { pattern: /\s\S+|S+\s|\S/, message: '请输入正确的模板名称', trigger: 'blur' }]"
+  >
+  <el-input v-model="dataForm.transName" placeholder="模板名称" />
+  </el-form-item>
+
+  <!-- 模板类型选择器 -->
+  <el-form-item label="模板类型" prop="isFreeFee" required>
+    <el-radio-group v-model="dataForm.isFreeFee" @change="changeFreeFee">
+      <el-radio :label="0">买家承担运费</el-radio>
+      <el-radio :label="1">卖家包邮</el-radio>
+    </el-radio-group>
+  </el-form-item>
+
+  <!-- 收费方式选择器 -->
+  <el-form-item label="收费方式" prop="chargeType">
+    <el-radio-group v-model="dataForm.chargeType" :disabled="dataForm.isFreeFee == 1">
+      <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-table
+    :data="dataForm.transfees"
+  border
+  style="width: 100%;"
+  class="table-con"
+  >
+  <!-- 可配送区域列 -->
+  <el-table-column header-align="center" align="center" width="450" label="可配送区域">
+    <template #default="scope">
+      <span v-if="scope.$index == 0">所有地区</span>
+      <span v-if="(!scope.row.cityList || !scope.row.cityList.length) && scope.$index > 0">请选择可配送区域</span>
+      <span v-if="scope.$index > 0">
+              <el-tag v-for="city in scope.row.cityList" :key="city.areaId">{{ city.areaName }}</el-tag>
             </span>
-            <el-button
-              v-if="isAuth('shop:transfee:update') && scope.$index > 0"
-              type="text"
-
-              @click="onAddOrUpdate(`${scope.$index}`)"
-            >
-              编辑
-            </el-button>
-            <el-button
-              v-if="isAuth('shop:transfee:delete') && scope.$index > 0"
-              type="text"
-
-              @click="onDelete(`${scope.$index}`)"
-            >
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="center"
-          width="180"
-          :label="tableTitle[0]"
-        >
-          <template #default="scope">
-            <el-form-item
-              :prop="`transfees.${scope.$index}.firstPiece`"
-              label-width="0px"
-              :rules="[{ required: true, message: `${tableTitle[0]}不能为空`}]"
-            >
-              <el-input
-                v-model="scope.row.firstPiece"
-                type="number"
-                :disabled="!scope.row.status && scope.$index === 0"
-                @change="checkNumber(scope.row, 1)"
-              />
-            </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="center"
-          :label="tableTitle[1]"
-        >
-          <template #default="scope">
-            <el-form-item
-              :prop="`transfees.${scope.$index}.firstFee`"
-              label-width="0px"
-              :rules="[{ required: true, message: `${tableTitle[1]}不能为空`}]"
-            >
-              <el-input
-                v-model="scope.row.firstFee"
-                type="number"
-                :min="0"
-                :disabled="!scope.row.status && scope.$index === 0"
-              />
-            </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="center"
-          :label="tableTitle[2]"
-        >
-          <template #default="scope">
-            <el-form-item
-              :prop="`transfees.${scope.$index}.continuousPiece`"
-              label-width="0px"
-              :rules="[{ required: true, message: `${tableTitle[2]}不能为空`}]"
-            >
-              <el-input
-                v-model="scope.row.continuousPiece"
-                type="number"
-                :disabled="!scope.row.status && scope.$index === 0"
-                @change="checkNumber(scope.row, 3)"
-              />
-            </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="center"
-          :label="tableTitle[3]"
-        >
-          <template #default="scope">
-            <el-form-item
-              :prop="`transfees.${scope.$index}.continuousFee`"
-              label-width="0px"
-              :rules="[{ required: true, message: `${tableTitle[3]}不能为空`}]"
-            >
-              <el-input
-                v-model="scope.row.continuousFee"
-                type="number"
-                :min="0"
-                :disabled="!scope.row.status && scope.$index === 0"
-              />
-            </el-form-item>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div
-        v-if="dataForm.isFreeFee == 0"
-        style="margin-top: 20px"
-      >
-        <el-button
-          type="primary"
-          icon="el-icon-location-outline"
-          @click="addTransfee()"
-        >
-          点击添加可配送的区域和运费
-        </el-button>
-      </div>
-      <el-checkbox
-        v-if="!dataForm.isFreeFee"
-        v-model="dataForm.hasFreeCondition"
-        style="margin-top:10px;font-size:50px"
-      >
-        指定条件包邮
-      </el-checkbox>
-      <el-table
-        v-if="dataForm.hasFreeCondition && !dataForm.isFreeFee"
-        :data="dataForm.transfeeFrees"
-        border
-        style="width: 100%;"
-      >
-        <el-table-column
-          header-align="center"
-          align="center"
-          width="350"
-          label="指定区域"
-        >
-          <template #default="scope">
-            <span v-if="!scope.row.freeCityList || !scope.row.freeCityList.length">请选择指定包邮城市</span>
-            <el-tag
-              v-for="city in scope.row.freeCityList"
-              :key="city.areaId"
-            >
-              {{ city.areaName }}
-            </el-tag>
-            <el-button
-              v-if="isAuth('shop:transfee:update')"
-              type="text"
-
-              @click="addOrUpdateTransfeeFree(`${scope.$index}`)"
-            >
-              编辑
-            </el-button>
-            <el-button
-              v-if="isAuth('shop:transfee:delete')"
-              type="text"
-
-              @click="deleteTransfeeFree(`${scope.$index}`)"
-            >
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="center"
-          width="600"
-          label="设置包邮条件"
-        >
-          <template #default="scope">
-            <el-radio-group v-model="scope.row.freeType">
-              <el-radio :label="0">
-                满件/重量/体积包邮
-              </el-radio>
-              <el-radio :label="1">
-                满金额包邮
-              </el-radio>
-              <el-radio :label="2">
-                满件/重量/体积且满金额包邮
-              </el-radio>
-            </el-radio-group>
-          </template>
-        </el-table-column>
-        <el-table-column
-          header-align="center"
-          align="left"
-        >
-          <template #default="scope">
-            <el-form-item
-              v-if="scope.row.freeType == 1 || scope.row.freeType == 2"
-              :prop="`transfeeFrees.${scope.$index}.amount`"
-              label-width="0px"
-              :rules="[{ required: true, message: `不能为空`}]"
-            >
-              满 <el-input
-                v-model="scope.row.amount"
-                style="width:100px"
-              /> 元包邮
-            </el-form-item>
-            <el-form-item
-              v-if="scope.row.freeType == 0 || scope.row.freeType == 2"
-              :prop="`transfeeFrees.${scope.$index}.piece`"
-              label-width="0px"
-              :rules="[{ required: true, message: `不能为空`}]"
-            >
-              满 <el-input
-                v-model="scope.row.piece"
-                style="width:100px"
-              /> 件/重量/体积包邮
-            </el-form-item>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div
-        v-if="dataForm.isFreeFee == 0"
-        style="margin-top: 20px"
-      >
-        <el-button
-          type="primary"
-          icon="el-icon-location-outline"
-          @click="addTransfeeFree()"
-        >
-          点击添加指定包邮条件
-        </el-button>
-      </div>
-    </el-form>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="visible = false">
-          取消
-        </el-button>
-        <el-button
-          type="primary"
-          @click="onSubmit()"
-        >
-          确定
-        </el-button>
-      </div>
+      <el-button v-if="isAuth('shop:transfee:update') && scope.$index > 0" type="text" @click="onAddOrUpdate(`${scope.$index}`)">编辑</el-button>
+      <el-button v-if="isAuth('shop:transfee:delete') && scope.$index > 0" type="text" @click="onDelete(`${scope.$index}`)">删除</el-button>
     </template>
-    <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update
-      v-if="addOrUpdateVisible"
-      ref="addOrUpdateRef"
-      @refresh-data-list="getDataList"
-    />
+  </el-table-column>
+
+  <!-- 动态生成的列，根据chargeType显示不同的标题 -->
+  <el-table-column v-for="(item, index) in tableTitle" :key="index" header-align="center" align="center" :label="item">
+    <template #default="scope">
+      <el-form-item :prop="`transfees.${scope.$index}.[${index}]`" label-width="0px" :rules="[{ required: true, message: `${item}不能为空`}]">
+        <el-input v-model="scope.row[index]" type="number" :min="0" :disabled="!scope.row.status && scope.$index === 0" @change="checkNumber(scope.row, index + 1)" />
+      </el-form-item>
+    </template>
+  </el-table-column>
+  </el-table>
+
+  <!-- 添加新的运费项按钮 -->
+  <div v-if="dataForm.isFreeFee == 0" style="margin-top: 20px">
+    <el-button type="primary" icon="el-icon-location-outline" @click="addTransfee()">点击添加可配送的区域和运费</el-button>
+  </div>
+
+  <!-- 指定条件包邮复选框 -->
+  <el-checkbox v-if="!dataForm.isFreeFee" v-model="dataForm.hasFreeCondition" style="margin-top:10px;font-size:50px">指定条件包邮</el-checkbox>
+
+  <!-- 包邮条件表格 -->
+  <el-table
+    v-if="dataForm.hasFreeCondition && !dataForm.isFreeFee"
+    :data="dataForm.transfeeFrees"
+    border
+    style="width: 100%;"
+  >
+    <!-- 指定区域列 -->
+    <el-table-column header-align="center" align="center" width="350" label="指定区域">
+      <template #default="scope">
+        <span v-if="!scope.row.freeCityList || !scope.row.freeCityList.length">请选择指定包邮城市</span>
+        <el-tag v-for="city in scope.row.freeCityList" :key="city.areaId">{{ city.areaName }}</el-tag>
+        <el-button v-if="isAuth('shop:transfee:update')" type="text" @click="addOrUpdateTransfeeFree(`${scope.$index}`)">编辑</el-button>
+        <el-button v-if="isAuth('shop:transfee:delete')" type="text" @click="deleteTransfeeFree(`${scope.$index}`)">删除</el-button>
+      </template>
+    </el-table-column>
+
+    <!-- 设置包邮条件列 -->
+    <el-table-column header-align="center" align="center" width="600" label="设置包邮条件">
+      <template #default="scope">
+        <el-radio-group v-model="scope.row.freeType">
+          <el-radio :label="0">满件/重量/体积包邮</el-radio>
+          <el-radio :label="1">满金额包邮</el-radio>
+          <el-radio :label="2">满件/重量/体积且满金额包邮</el-radio>
+        </el-radio-group>
+      </template>
+    </el-table-column>
+
+    <!-- 包邮条件详情列 -->
+    <el-table-column header-align="center" align="left">
+      <template #default="scope">
+        <el-form-item v-if="scope.row.freeType == 1 || scope.row.freeType == 2" :prop="`transfeeFrees.${scope.$index}.amount`" label-width="0px" :rules="[{ required: true, message: `不能为空`}]">
+          满 <el-input v-model="scope.row.amount" style="width:100px" /> 元包邮
+        </el-form-item>
+        <el-form-item v-if="scope.row.freeType == 0 || scope.row.freeType == 2" :prop="`transfeeFrees.${scope.$index}.piece`" label-width="0px" :rules="[{ required: true, message: `不能为空`}]">
+          满 <el-input v-model="scope.row.piece" style="width:100px" /> 件/重量/体积包邮
+        </el-form-item>
+      </template>
+    </el-table-column>
+  </el-table>
+
+  <!-- 添加新的包邮条件按钮 -->
+  <div v-if="dataForm.isFreeFee == 0" style="margin-top: 20px">
+    <el-button type="primary" icon="el-icon-location-outline" @click="addTransfeeFree()">点击添加指定包邮条件</el-button>
+  </div>
+  </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>
+
+  <!-- 子组件，用于添加或更新城市选择 -->
+  <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" @refresh-data-list="getDataList" />
   </el-dialog>
 </template>
 
@@ -329,10 +145,18 @@ import { isAuth } from '@/utils'
 import { ElMessage } from 'element-plus'
 import { Debounce } from '@/utils/debounce'
 import AddOrUpdate from './add-or-update.vue'
+import { ref, reactive, computed, watch, nextTick } from 'vue'
+
+// 定义一个事件发射器，允许子组件向父组件发送消息
 const emit = defineEmits(['refreshDataList'])
 
+// 是否有免费条件的标志
 const hasFreeCondition = ref(0)
+
+// 控制对话框的可见性
 const visible = ref(false)
+
+// 表单数据对象，包含运输模板的各项信息
 const dataForm = ref({
   hasFreeCondition: false,
   transName: '',
@@ -343,20 +167,28 @@ const dataForm = ref({
   transfees: [{ cityList: [], status: 1 }],
   transfeeFrees: [{ freeCityList: [], freeType: 0 }]
 })
+
+// 分页配置
 const page = reactive({
   total: 0, // 总页数
   currentPage: 1, // 当前页数
   pageSize: 10 // 每页显示多少条
 })
+
+// 根据chargeType计算表格标题
 const tableTitle = computed(() => {
-  const titles = [['首件(个)', '运费(元)', '续件(个)', '续费(元)'], ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'], ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']]
+  const titles = [
+    ['首件(个)', '运费(元)', '续件(个)', '续费(元)'],
+    ['首重(kg)', '运费(元)', '续重(kg)', '续费(元)'],
+    ['首体积(m³)', '运费(元)', '续体积(m³)', '续费(元)']
+  ]
   if (dataForm.value.chargeType) {
     return titles[dataForm.value.chargeType]
   }
   return titles[0]
 })
 
-// 如果当前对话框不可见，则关闭选择城市的对话框
+// 监听visible值的变化，如果对话框不可见则关闭选择城市的对话框
 watch(
   () => visible.value,
   (val) => {
@@ -366,11 +198,19 @@ watch(
   }
 )
 
+// 控制添加或更新对话框的可见性
 const addOrUpdateVisible = ref(false)
 const dataFormRef = ref(null)
+
+/**
+ * 初始化方法，根据ID加载或创建新的运输模板
+ * @param id - 运输模板ID，若不存在则为创建模式
+ */
 const init = (id) => {
   visible.value = true
   dataForm.value.transportId = id || 0
+
+  // 确保在DOM更新后重置表单字段
   nextTick(() => {
     dataFormRef.value?.resetFields()
     dataForm.value = {
@@ -384,9 +224,10 @@ const init = (id) => {
       transfeeFrees: [{ freeCityList: [], freeType: 0 }]
     }
   })
+
+  // 如果存在ID，则加载现有运输模板的数据
   if (dataForm.value.transportId) {
     http({
-      // 获取运费模板数据
       url: http.adornUrl(`/shop/transport/info/${dataForm.value.transportId}`),
       method: 'get'
     })
@@ -401,8 +242,16 @@ const init = (id) => {
       })
   }
 }
+
+// 将init方法暴露给父组件调用
 defineExpose({ init })
 
+/**
+ * 获取城市列表并填充到对应的运费项或包邮条件中
+ * @param row - 当前行索引
+ * @param cityList - 城市列表
+ * @param type - 类型标识符，0为普通运费项，1为包邮条件
+ */
 const getDataList = (row, cityList, type) => {
   if (type === 0) {
     dataForm.value.transfees[row].cityList = cityList
@@ -413,22 +262,25 @@ const getDataList = (row, cityList, type) => {
 }
 
 /**
- * 添加运费项
+ * 添加一个新的运费项
  */
 const addTransfee = () => {
   dataForm.value.transfees.push({ cityList: [], status: 1 })
 }
 
 /**
- * 删除运费项
+ * 删除指定的运费项
+ * @param rowIndex - 要删除的行索引
  */
 const onDelete = (rowIndex) => {
   dataForm.value.transfees.splice(rowIndex, 1)
 }
 
+// 引用添加或更新子组件实例
 const addOrUpdateRef = ref(null)
+
 /**
- * 可配送区域和运费编辑
+ * 可配送区域和运费编辑（当前功能未实现）
  */
 const onAddOrUpdate = () => {
   ElMessage({
@@ -448,14 +300,16 @@ const addTransfeeFree = () => {
 }
 
 /**
- * 删除指定包邮条件
+ * 删除指定的包邮条件
+ * @param rowIndex - 要删除的行索引
  */
 const deleteTransfeeFree = (rowIndex) => {
   dataForm.value.transfeeFrees?.splice(rowIndex, 1)
 }
 
 /**
- * 指定包邮条件编辑
+ * 编辑指定的包邮条件
+ * @param rowIndex - 要编辑的行索引
  */
 const addOrUpdateTransfeeFree = (rowIndex) => {
   addOrUpdateVisible.value = true
@@ -470,8 +324,8 @@ const addOrUpdateTransfeeFree = (rowIndex) => {
 }
 
 /**
- * 改变模板类型， 0 买家承担运费 1 卖家包邮
- * @param val
+ * 改变模板类型，0表示买家承担运费，1表示卖家包邮
+ * @param val - 新的选择值
  */
 const changeFreeFee = (val) => {
   dataForm.value.hasFreeCondition = false
@@ -484,7 +338,9 @@ const changeFreeFee = (val) => {
 }
 
 /**
- * 校验输入的数字
+ * 校验输入的数字，确保其为正整数且不小于零
+ * @param row - 当前行对象
+ * @param type - 需要校验的字段类型
  */
 const checkNumber = (row, type) => {
   if (type === 1) {
@@ -497,7 +353,9 @@ const checkNumber = (row, type) => {
 }
 
 /**
- * 保留整数并小于零的数设为0
+ * 保留整数并处理小于零的情况
+ * @param num - 输入的数字
+ * @returns 处理后的数字
  */
 const getNumber = (num) => {
   num = Math.round(num)
@@ -505,11 +363,12 @@ const getNumber = (num) => {
 }
 
 /**
- * 表单提交
+ * 提交表单，保存运输模板信息
  */
 const onSubmit = Debounce(() => {
   dataFormRef.value?.validate((valid) => {
     if (valid) {
+      // 检查每个运费项是否选择了可配送区域
       for (let i = 1; i < dataForm.value.transfees.length; i++) {
         const transfee = dataForm.value.transfees[i]
         if (transfee.cityList.length === 0) {
@@ -521,12 +380,18 @@ const onSubmit = Debounce(() => {
           return
         }
       }
+
+      // 设置是否有免费条件
       if (dataForm.value.hasFreeCondition) {
         hasFreeCondition.value = 1
       } else {
         hasFreeCondition.value = 0
       }
+
+      // 清空默认运费项的城市列表，因为它是全局性的
       dataForm.value.transfees[0].cityList = []
+
+      // 发起HTTP请求保存运输模板信息
       http({
         url: http.adornUrl('/shop/transport'),
         method: dataForm.value.transportId ? 'put' : 'post',
diff --git a/front-end/mall4v/src/views/modules/shop/transport/index.vue b/front-end/mall4v/src/views/modules/shop/transport/index.vue
index 3132cb9..8ae6cd1 100644
--- a/front-end/mall4v/src/views/modules/shop/transport/index.vue
+++ b/front-end/mall4v/src/views/modules/shop/transport/index.vue
@@ -1,91 +1,99 @@
 <template>
+  <!-- 使用avue-crud组件创建一个可编辑的数据表格 -->
   <div class="mod-transport">
     <avue-crud
       ref="crudRef"
-      :page="page"
-      :data="dataList"
-      :option="tableOption"
-      @search-change="onSearch"
-      @selection-change="selectionChange"
-      @on-load="getDataList"
+    :page="page"
+    :data="dataList"
+    :option="tableOption"
+    @search-change="onSearch"
+    @selection-change="selectionChange"
+    @on-load="getDataList"
     >
-      <template #prod-prop-values="scope">
-        <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:transport:save')"
-          type="primary"
-          icon="el-icon-plus"
-          @click.stop="onAddOrUpdate()"
-        >
-          新增
-        </el-button>
+    <!-- 自定义列内容：产品属性值 -->
+    <template #prod-prop-values="scope">
+      <el-tag v-for="item in scope.row.prodPropValues" :key="item.valueId">{{ item.propValue }}</el-tag>
+    </template>
 
-        <el-button
-          v-if="isAuth('shop:transport:delete')"
-          type="danger"
-          :disabled="dataListSelections.length <= 0"
-          @click="onDelete()"
-        >
-          批量删除
-        </el-button>
-      </template>
+    <!-- 左侧菜单按钮 -->
+    <template #menu-left>
+      <el-button
+        v-if="isAuth('shop:transport:save')"
+      type="primary"
+      icon="el-icon-plus"
+      @click.stop="onAddOrUpdate()"
+      >
+      新增
+      </el-button>
 
-      <template #menu="scope">
-        <el-button
-          v-if="isAuth('shop:transport:update')"
-          type="primary"
-          icon="el-icon-edit"
-          @click.stop="onAddOrUpdate(scope.row.transportId)"
-        >
-          修改
-        </el-button>
+      <el-button
+        v-if="isAuth('shop:transport:delete')"
+      type="danger"
+      :disabled="dataListSelections.length <= 0"
+      @click="onDelete()"
+      >
+      批量删除
+      </el-button>
+    </template>
 
-        <el-button
-          v-if="isAuth('shop:transport:delete')"
-          type="danger"
-          icon="el-icon-delete"
-          @click.stop="onDelete(scope.row.transportId)"
-        >
-          删除
-        </el-button>
-      </template>
+    <!-- 行内操作按钮 -->
+    <template #menu="scope">
+      <el-button
+        v-if="isAuth('shop:transport:update')"
+      type="primary"
+      icon="el-icon-edit"
+      @click.stop="onAddOrUpdate(scope.row.transportId)"
+      >
+      修改
+      </el-button>
+
+      <el-button
+        v-if="isAuth('shop:transport:delete')"
+      type="danger"
+      icon="el-icon-delete"
+      @click.stop="onDelete(scope.row.transportId)"
+      >
+      删除
+      </el-button>
+    </template>
     </avue-crud>
+
     <!-- 弹窗, 新增 / 修改 -->
     <add-or-update
       v-if="addOrUpdateVisible"
-      ref="addOrUpdateRef"
-      @refresh-data-list="getDataList"
+    ref="addOrUpdateRef"
+    @refresh-data-list="getDataList"
     />
   </div>
 </template>
 
 <script setup>
-import { isAuth } from '@/utils'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { tableOption } from '@/crud/shop/transport'
-import AddOrUpdate from './add-or-update.vue'
-const dataList = ref([])
-const dataListSelections = ref([])
+import { isAuth } from '@/utils'  // 导入权限验证工具函数
+import { ElMessage, ElMessageBox } from 'element-plus'  // 导入Element Plus的消息提示和消息框组件
+import { tableOption } from '@/crud/shop/transport'  // 导入表格配置选项
+import AddOrUpdate from './add-or-update.vue'  // 导入添加或更新对话框组件
+import { ref, nextTick } from 'vue'  // 导入Vue的响应式API
+import http from '@/api/http'  // 假设这是导入的HTTP请求模块
+
+// 定义响应式变量
+const dataList = ref([])  // 数据列表
+const dataListSelections = ref([])  // 多选框选中的数据项
 const page = ref({
   total: 0, // 总页数
-  currentPage: 1, // 当前页数
-  pageSize: 10 // 每页显示多少条
+  currentPage: 1, // 当前页码
+  pageSize: 10 // 每页大小
 })
 
 /**
  * 获取数据列表
+ * @param {Object} pageParam - 分页参数
+ * @param {Object} params - 查询参数
+ * @param {Function} done - 加载完成回调函数
  */
 const getDataList = (pageParam, params, done) => {
   http({
-    url: http.adornUrl('/shop/transport/page'),
-    method: 'get',
+    url: http.adornUrl('/shop/transport/page'),  // 请求URL
+    method: 'get',  // HTTP方法
     params: http.adornParams(
       Object.assign(
         {
@@ -94,34 +102,36 @@ const getDataList = (pageParam, params, done) => {
         },
         params
       )
-    )
+    )  // 请求参数
   })
     .then(({ data }) => {
-      dataList.value = data.records
-      page.value.total = data.total
-      if (done) done()
+      dataList.value = data.records  // 设置数据列表
+      page.value.total = data.total  // 设置总条目数
+      if (done) done()  // 如果有传入done函数，则执行
     })
 }
 
+// 控制添加或更新对话框的显示状态
 const addOrUpdateVisible = ref(false)
 const addOrUpdateRef = ref(null)
+
 /**
- * 新增 / 修改
- * @param id
+ * 新增或修改运输模板
+ * @param {Number} id - 运输模板ID，如果存在则是修改操作
  */
 const onAddOrUpdate = (id) => {
-  addOrUpdateVisible.value = true
+  addOrUpdateVisible.value = true  // 显示对话框
   nextTick(() => {
-    addOrUpdateRef.value?.init(id)
+    addOrUpdateRef.value?.init(id)  // 初始化子组件并传递ID
   })
 }
 
 /**
- * 删除
- * @param id
+ * 删除运输模板
+ * @param {Number} id - 单个运输模板ID，如果不存在则进行批量删除
  */
 const onDelete = (id) => {
-  const ids = id ? [id] : dataListSelections.value?.map(item => item.transportId)
+  const ids = id ? [id] : dataListSelections.value?.map(item => item.transportId)  // 确定要删除的ID列表
   ElMessageBox.confirm(
     `确定进行[${id ? '删除' : '批量删除'}]操作?`,
     '提示',
@@ -135,7 +145,7 @@ const onDelete = (id) => {
       http({
         url: http.adornUrl('/shop/transport'),
         method: 'delete',
-        data: http.adornData(ids, false)
+        data: http.adornData(ids, false)  // 请求体数据
       })
         .then(() => {
           ElMessage({
@@ -143,7 +153,7 @@ const onDelete = (id) => {
             type: 'success',
             duration: 1500,
             onClose: () => {
-              getDataList()
+              getDataList()  // 刷新数据列表
             }
           })
         })
@@ -152,16 +162,18 @@ const onDelete = (id) => {
 
 /**
  * 条件查询
+ * @param {Object} params - 查询参数
+ * @param {Function} done - 查询完成后回调
  */
 const onSearch = (params, done) => {
-  getDataList(page.value, params, done)
+  getDataList(page.value, params, done)  // 根据查询条件获取数据列表
 }
 
 /**
- * 多选变化
+ * 多选变化时触发
+ * @param {Array} val - 选中的数据项数组
  */
 const selectionChange = (val) => {
-  dataListSelections.value = val
+  dataListSelections.value = val  // 更新选中的数据项
 }
-
 </script>