refactor(seller): 列表页抽离 useTable 重构与通用 UI 规范优化

- 抽离通用 useTable composable，并迁移 13 个典型列表页（采购/报损/订单/售后/统计/营销等） - 增加表格与树组件全局空状态 (el-empty) 样式规范 - 补齐视图图片语义化 alt，并添加全局图片加载异常 SVG 占位兜底 - 替换遗留的 $Message 兼容语法为 ElMessage - 将 WAP 店铺装修模板的 Options API 统一为 defineOptions - 优化数据报表卡片视觉样式，并移除失效的品牌筛选选项 - 清理冗余依赖 vuex，将 sass-loader 调整至 devDependencies
2026-11-11 03:18:56 +08:00 · 2026-10-20 13:51:04 +08:00
parent 7d9bf776db
commit 3cb60139d5
49 changed files with 543 additions and 479 deletions
--- a/seller/src/views/shop/floorList.vue
+++ b/seller/src/views/shop/floorList.vue
@@ -13,11 +13,12 @@
        <el-button type="primary" @click="createTemp">添加页面</el-button>
      </div>
      <el-table v-loading="loading" :data="list" style="width: 100%">
-        <el-table-column prop="name" label="页面名称" min-width="200" show-overflow-tooltip>
+        <el-table-column prop="name" label="页面名称" min-width="180" show-overflow-tooltip>
          <template #default="{ row }">
            <span v-if="row">{{ row.name || "暂无模板昵称" }}</span>
          </template>
        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
        <el-table-column
          v-if="searchForm.pageType !== 'SPECIAL'"
          label="状态"
--- a/seller/src/views/shop/hotzone/components/Hotzone.vue
+++ b/seller/src/views/shop/hotzone/components/Hotzone.vue
@@ -2,7 +2,7 @@
  <div class="hotzone-box">
    <div class="hotzone-item">
      <div ref="content" class="hz-m-wrap">
-        <img class="hz-u-img" :src="image" />
+        <img alt="热区背景图" class="hz-u-img" :src="image" />
        <ul class="hz-m-area" v-add-item>
          <zone
            class="hz-m-item"
--- a/seller/src/views/shop/hotzone/components/Zone.vue
+++ b/seller/src/views/shop/hotzone/components/Zone.vue
@@ -36,10 +36,10 @@
        @mouseup.stop
        @mousemove.stop
      >
-        <img width="17" height="17" src="../assets/styles/icons8-edit-64.png" />
+        <img alt="编辑" width="17" height="17" src="../assets/styles/icons8-edit-64.png" />
      </li>
      <li class="hz-flex-img">
-        <img class="hz-u-img" :src="zoneForm.img" />
+        <img alt="热区图片" class="hz-u-img" :src="zoneForm.img" />
      </li>
      <li class="hz-u-square hz-u-square-tl" data-pointer="dealTL"></li>
      <li class="hz-u-square hz-u-square-tc" data-pointer="dealTC"></li>
--- a/seller/src/views/shop/modelList/carousel.vue
+++ b/seller/src/views/shop/modelList/carousel.vue
@@ -8,7 +8,7 @@
        <el-carousel autoplay height="340px">
          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
            <div style="overflow: hidden">
-              <img :src="item.img" width="790" height="340" />
+              <img alt="轮播图" :src="item.img" width="790" height="340" />
            </div>
          </el-carousel-item>
        </el-carousel>
--- a/seller/src/views/shop/modelList/carousel1.vue
+++ b/seller/src/views/shop/modelList/carousel1.vue
@@ -8,7 +8,7 @@
        <el-carousel autoplay @change="autoChange">
          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
            <div style="overflow: hidden">
-              <img :src="item.img" width="1200" height="470" />
+              <img alt="轮播图" :src="item.img" width="1200" height="470" />
            </div>
          </el-carousel-item>
        </el-carousel>
--- a/seller/src/views/shop/modelList/carousel2.vue
+++ b/seller/src/views/shop/modelList/carousel2.vue
@@ -8,7 +8,7 @@
        <el-carousel autoplay height="340px">
          <el-carousel-item v-for="(item, index) in data.options.list" :key="index">
            <div style="overflow: hidden">
-              <img :src="item.img" width="590" height="470" />
+              <img alt="轮播图" :src="item.img" width="590" height="470" />
            </div>
          </el-carousel-item>
        </el-carousel>
@@ -26,13 +26,13 @@
            :key="index"
          >
            <div class="mb_10">
-              <img :src="item[0].img" width="190" height="150" />
+              <img alt="轮播图" :src="item[0].img" width="190" height="150" />
            </div>
            <div class="mb_10">
-              <img :src="item[1].img" width="190" height="150" />
+              <img alt="轮播图" :src="item[1].img" width="190" height="150" />
            </div>
            <div>
-              <img :src="item[2].img" width="190" height="150" />
+              <img alt="轮播图" :src="item[2].img" width="190" height="150" />
            </div>
          </el-carousel-item>
        </el-carousel>
--- a/seller/src/views/shop/modelList/forYour.vue
+++ b/seller/src/views/shop/modelList/forYour.vue
@@ -100,7 +100,7 @@
              class="draggable"
            >
              <div class="flex">
-                <img :src="item.img" class="column-img" />
+                <img alt="楼层图片" :src="item.img" class="column-img" />
                <div class="column-goods-list">
                  <div><el-input v-model="item.title" /></div>
                  <div><el-input v-model="item.desc" /></div>
@@ -139,7 +139,7 @@
              class="draggable"
            >
              <div class="flex">
-                <img :src="item.img" class="column-img" />
+                <img alt="楼层图片" :src="item.img" class="column-img" />
                <div class="column-goods-list">
                  <el-button
                    size="small"
--- a/seller/src/views/shop/modelList/goodsAndType.vue
+++ b/seller/src/views/shop/modelList/goodsAndType.vue
@@ -25,7 +25,7 @@
        :key="index"
      >
        <div class="goods-img">
-          <img :src="item.img" />
+          <img alt="楼层图片" :src="item.img" />
        </div>
        <div>
          <div class="goods-name wes-2">{{ item.title }}</div>
@@ -93,7 +93,7 @@
              class="draggable"
            >
              <div class="flex">
-                <img :src="item.img" class="column-img" />
+                <img alt="楼层图片" :src="item.img" class="column-img" />
                <div class="flex column-goods-config">
                  <div class="column-config">
                    <div>
--- a/seller/src/views/shop/modelList/mixModel.vue
+++ b/seller/src/views/shop/modelList/mixModel.vue
@@ -102,7 +102,7 @@
              class="draggable"
            >
              <div class="flex">
-                <img :src="item.img" class="column-img" />
+                <img alt="楼层图片" :src="item.img" class="column-img" />
                <el-button
                  size="small"
                  class="ml_10"
--- a/seller/src/views/shop/modelList/oneRowThreeColumns.vue
+++ b/seller/src/views/shop/modelList/oneRowThreeColumns.vue
@@ -2,7 +2,7 @@
  <div class="line flex flex-j-sb">
    <div class="column" v-for="(item,index) in data.options.list" :key="index">
      <div v-if="!item.img" class="placeholder">占位符</div>
-      <img v-else :src="item.img" class="three-column-img">
+      <img alt="楼层图片" v-else :src="item.img" class="three-column-img">
    </div>
    <div class="setup-box">
      <div>
@@ -23,7 +23,7 @@
     append-to-body destroy-on-close>
      <div class="modal-tab-bar">
        <div v-for="(item,index) in data.options.list" :key="index">
-          <img :src="item.img" class="three-column-img">
+          <img alt="楼层图片" :src="item.img" class="three-column-img">
          <div>推荐尺寸：{{item.size}}</div>
          <el-button
            size="small"
--- a/seller/src/views/shop/modelList/onlyGoodsModel.vue
+++ b/seller/src/views/shop/modelList/onlyGoodsModel.vue
@@ -12,7 +12,7 @@
          <div class="goods-desc">{{ item.desc }}</div>
        </div>
        <div class="goods-img">
-          <img :src="item.img" />
+          <img alt="楼层图片" :src="item.img" />
        </div>
      </div>
      <div class="setup-box">
@@ -47,7 +47,7 @@
              class="draggable"
            >
              <div class="flex">
-                <img :src="item.img" class="column-img" />
+                <img alt="楼层图片" :src="item.img" class="column-img" />
                <div class="flex column-goods-config">
                  <div class="column-config">
                    <div>
--- a/seller/src/views/shop/wap/template/tpl_banner.vue
+++ b/seller/src/views/shop/wap/template/tpl_banner.vue
@@ -3,7 +3,7 @@
    <el-carousel class="carousel" v-if="res" autoplay :interval="5000" height="150px">
      <el-carousel-item v-for="(item, index) in res.list" :key="index">
        <div>
-          <img class="image-mode" :src="item.img" />
+          <img alt="轮播图" class="image-mode" :src="item.img" />
        </div>
      </el-carousel-item>
    </el-carousel>
--- a/seller/src/views/shop/wap/template/tpl_flex_five.vue
+++ b/seller/src/views/shop/wap/template/tpl_flex_five.vue
@@ -9,13 +9,8 @@
  </div>
 </template>

-<script>
-export default {
-  title: "五列单行图片模块",
-};
-</script>
-
 <script setup>
+defineOptions({ title: "五列单行图片模块" });
 defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
--- a/seller/src/views/shop/wap/template/tpl_flex_two.vue
+++ b/seller/src/views/shop/wap/template/tpl_flex_two.vue
@@ -10,13 +10,8 @@
    </div>
  </div>
 </template>
-<script>
-// 自定义选项（组件在 <component :is> 场景下按 title 展示名称），需保留在普通 script 块
-export default {
-  title: "两张横图",
-};
-</script>
 <script setup>
+defineOptions({ title: "两张横图" });
 defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
--- a/seller/src/views/shop/wap/template/tpl_left_one_right_two.vue
+++ b/seller/src/views/shop/wap/template/tpl_left_one_right_two.vue
@@ -2,7 +2,7 @@
 <template>
  <div class="layout">
    <div class="view-height-150">
-      <img class="image-mode" :src="res.list[0].img" />
+      <img alt="模板图片" class="image-mode" :src="res.list[0].img" />
    </div>
    <div class="view-height-150">
      <div class="view-height-75">
--- a/seller/src/views/shop/wap/template/tpl_left_two_right_one.vue
+++ b/seller/src/views/shop/wap/template/tpl_left_two_right_one.vue
@@ -10,7 +10,7 @@
      </div>
    </div>
    <div class="view-height-150">
-      <img class="image-mode" style="height:150px;" :src="res.list[2].img" />
+      <img alt="模板图片" class="image-mode" style="height:150px;" :src="res.list[2].img" />
    </div>
  </div>
 </template>
--- a/seller/src/views/shop/wap/template/tpl_text_picture.vue
+++ b/seller/src/views/shop/wap/template/tpl_text_picture.vue
@@ -32,13 +32,8 @@
  </div>
 </template>

-<script>
-// 自定义选项（组件在 <component :is> 场景下按 title 展示名称），需保留在普通 script 块
-export default {
-  title: "文字图片模板",
-};
-</script>
 <script setup>
+defineOptions({ title: "文字图片模板" });
 defineProps(["res"]);
 </script>
 <style lang="scss" scoped>
--- a/seller/src/views/shop/wap/template/tpl_top_one_bottom_two.vue
+++ b/seller/src/views/shop/wap/template/tpl_top_one_bottom_two.vue
@@ -2,7 +2,7 @@
 <template>
  <div class="layout">
    <div class="view-width-100">
-      <img class="image-mode" :src="res.list[0].img" />
+      <img alt="模板图片" class="image-mode" :src="res.list[0].img" />
    </div>
    <div class="view-width-100">
      <div class="view-height-85">
--- a/seller/src/views/shop/wap/template/tpl_top_two_bottom_one.vue
+++ b/seller/src/views/shop/wap/template/tpl_top_two_bottom_one.vue
@@ -9,7 +9,7 @@
      </div>
    </div>
    <div class="view-width-100">
-      <img class="image-mode" :src="res.list[2].img" />
+      <img alt="模板图片" class="image-mode" :src="res.list[2].img" />
    </div>
  </div>
 </template>
--- a/seller/src/views/shop/wap/wapList.vue
+++ b/seller/src/views/shop/wap/wapList.vue
@@ -13,11 +13,12 @@
        <el-button type="primary" @click="handleAdd()">添加页面</el-button>
      </div>
      <el-table v-loading="loading" :data="list" style="width: 100%">
-        <el-table-column prop="name" label="页面名称" min-width="200" show-overflow-tooltip>
+        <el-table-column prop="name" label="页面名称" min-width="180" show-overflow-tooltip>
          <template #default="{ row }">
            <span v-if="row">{{ row.name || "暂无模板昵称" }}</span>
          </template>
        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180" align="center" />
        <el-table-column label="状态" width="120" align="center">
          <template #default="{ row }">
            <el-switch
@@ -30,7 +31,7 @@
            />
          </template>
        </el-table-column>
-        <el-table-column label="操作" width="140" align="center" fixed="right">
+        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template #default="{ row }">
            <template v-if="row">
              <a class="link-text" @click="handleEdit(row)">修改</a>