feat(manager): 优化列表操作列规范、会员分组统计、漏斗图重构与订单交互

1. 订单交互：移除 orderList 缓存机制修复默认带入订单号问题，支持 query 联动；

2. 会员模块：会员分组新增人数统计与联动，全量规范会员提现、充值、日志等操作列样式；

3. 商品与销量：虚拟销量优化首列缩略图与对齐方式，规范品牌与商品分组操作；

4. 数据统计：重构交易转化漏斗图为自适应 SVG 渐变图与指标卡片；

5. 系统与营销：统一菜单/部门操作列样式，优化 OSS 模块、营销活动与首页待办对齐。

manager/src/views/member/group/index.vue

@@ -1,29 +1,102 @@
 <template>
-  <div class="search">
-    <el-card>
-      <div class="operation padding-row">
-        <el-button type="primary" @click="openAdd">添加分组</el-button>
+  <div class="member-group-page search">
+    <!-- 顶部筛选与操作栏 -->
+    <el-card shadow="never" class="filter-card">
+      <div class="card-toolbar">
+        <el-form inline :model="searchForm" class="filter-form" @keyup.enter="handleSearch">
+          <el-form-item label="分组名称">
+            <el-input
+              v-model="searchForm.groupName"
+              placeholder="请输入分组名称"
+              clearable
+              style="width: 220px"
+              @clear="handleSearch"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">搜索</el-button>
+            <el-button @click="handleReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <div class="toolbar-right">
+          <el-button type="primary" @click="openAdd">添加分组</el-button>
+        </div>
       </div>
     </el-card>
 
-    <el-card>
-      <el-table ref="table" v-loading="loading" :data="data" border class="mt_10" style="width: 100%">
+    <!-- 分组数据表格 -->
+    <el-card shadow="never" class="table-card mt_10">
+      <template #header>
+        <div class="card-header-bar">
+          <div class="header-title">
+            <span>会员分组列表</span>
+          </div>
+          <div class="header-actions">
+            <el-button size="small" @click="getData">刷新</el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-table
+        ref="table"
+        v-loading="loading"
+        :data="data"
+        border
+        stripe
+        style="width: 100%"
+        class="custom-group-table"
+      >
+        <!-- 分组ID -->
+        <el-table-column prop="id" label="分组ID" min-width="190" />
+
+        <!-- 分组名称 -->
         <el-table-column prop="groupName" label="分组名称" min-width="160" show-overflow-tooltip />
-        <el-table-column prop="description" label="分组描述" min-width="240" show-overflow-tooltip />
-        <el-table-column prop="createTime" label="创建时间" min-width="180" />
-        <el-table-column prop="updateTime" label="更新时间" min-width="180" />
-        <el-table-column label="操作" width="200" align="center" fixed="right">
+
+        <!-- 分组人数 -->
+        <el-table-column prop="memberCount" label="分组人数" width="110" align="center">
           <template #default="{ row }">
-            <div v-if="row" class="ops" style="display: flex; justify-content: center">
+            <template v-if="row">
+              <a
+                v-if="row.memberCount > 0"
+                class="link-text"
+                @click="viewGroupMembers(row)"
+              >
+                {{ row.memberCount }}
+              </a>
+              <span v-else>{{ row.memberCount ?? 0 }}</span>
+            </template>
+          </template>
+        </el-table-column>
+
+        <!-- 分组描述 -->
+        <el-table-column prop="description" label="分组描述" min-width="240" show-overflow-tooltip>
+          <template #default="{ row }">
+            {{ row ? row.description || "-" : "-" }}
+          </template>
+        </el-table-column>
+
+        <!-- 创建时间 -->
+        <el-table-column prop="createTime" label="创建时间" min-width="170" align="center" />
+
+        <!-- 更新时间 -->
+        <el-table-column prop="updateTime" label="更新时间" min-width="170" align="center" />
+
+        <!-- 操作栏 -->
+        <el-table-column label="操作" width="180" align="center" fixed="right">
+          <template #default="{ row }">
+            <template v-if="row">
+              <a class="link-text" @click="viewGroupMembers(row)">查看会员</a>
+              <span class="op-split">|</span>
               <a class="link-text" @click="openEdit(row)">编辑</a>
               <span class="op-split">|</span>
-              <a class="link-text" @click="remove(row)">删除</a>
-            </div>
+              <a class="link-text error-text" @click="remove(row)">删除</a>
+            </template>
           </template>
         </el-table-column>
       </el-table>
 
-      <div class="mt_10" style="display: flex; justify-content: flex-end">
+      <!-- 底部分页 -->
+      <div class="pagination-wrap mt_10">
         <el-pagination
           v-model:current-page="searchForm.pageNumber"
           v-model:page-size="searchForm.pageSize"
@@ -37,34 +110,78 @@
       </div>
     </el-card>
 
-    <el-dialog v-model="addFlag" title="添加分组" width="500px" :close-on-click-modal="false" destroy-on-close>
+    <!-- 添加分组弹窗 -->
+    <el-dialog
+      v-model="addFlag"
+      title="添加分组"
+      width="520px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
       <el-form ref="addForm" :model="formAdd" :rules="rulesAdd" label-width="90px">
-        <el-form-item label="分组名称" prop="groupName" style="width: 90%">
-          <el-input v-model="formAdd.groupName" maxlength="30" placeholder="请输入分组名称" />
+        <el-form-item label="分组名称" prop="groupName">
+          <el-input
+            v-model="formAdd.groupName"
+            maxlength="30"
+            show-word-limit
+            placeholder="请输入分组名称"
+          />
         </el-form-item>
-        <el-form-item label="分组描述" prop="description" style="width: 90%">
-          <el-input v-model="formAdd.description" maxlength="200" placeholder="请输入分组描述" />
+        <el-form-item label="分组描述" prop="description">
+          <el-input
+            v-model="formAdd.description"
+            type="textarea"
+            :rows="3"
+            maxlength="200"
+            show-word-limit
+            placeholder="请输入分组描述信息"
+          />
         </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="addFlag = false">取消</el-button>
-        <el-button type="primary" :loading="submitAddLoading" @click="submitAdd">确定</el-button>
+        <el-button type="primary" :loading="submitAddLoading" @click="submitAdd">
+          确定
+        </el-button>
       </template>
     </el-dialog>
 
-    <el-dialog v-model="editFlag" title="编辑分组" width="500px" :close-on-click-modal="false" destroy-on-close>
+    <!-- 编辑分组弹窗 -->
+    <el-dialog
+      v-model="editFlag"
+      title="编辑分组"
+      width="520px"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
       <el-form ref="editForm" :model="formEdit" :rules="rulesEdit" label-width="90px">
-        <el-input v-model="formEdit.id" style="display: none" />
-        <el-form-item label="分组名称" prop="groupName" style="width: 90%">
-          <el-input v-model="formEdit.groupName" maxlength="30" placeholder="请输入分组名称" />
+        <el-form-item label="分组ID">
+          <span>{{ formEdit.id }}</span>
         </el-form-item>
-        <el-form-item label="分组描述" prop="description" style="width: 90%">
-          <el-input v-model="formEdit.description" maxlength="200" placeholder="请输入分组描述" />
+        <el-form-item label="分组名称" prop="groupName">
+          <el-input
+            v-model="formEdit.groupName"
+            maxlength="30"
+            show-word-limit
+            placeholder="请输入分组名称"
+          />
+        </el-form-item>
+        <el-form-item label="分组描述" prop="description">
+          <el-input
+            v-model="formEdit.description"
+            type="textarea"
+            :rows="3"
+            maxlength="200"
+            show-word-limit
+            placeholder="请输入分组描述信息"
+          />
         </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="editFlag = false">取消</el-button>
-        <el-button type="primary" :loading="submitEditLoading" @click="submitEdit">确定</el-button>
+        <el-button type="primary" :loading="submitEditLoading" @click="submitEdit">
+          确定
+        </el-button>
       </template>
     </el-dialog>
   </div>
@@ -72,11 +189,21 @@
 
 <script setup>
 import { nextTick, onMounted, reactive, ref } from "vue";
+import { useRouter } from "vue-router";
 import * as API_Member from "@/api/member.js";
 import { ElMessage, ElMessageBox } from "element-plus";
 
 defineOptions({ name: "memberGroup" });
 
+const router = useRouter();
+
+function viewGroupMembers(row) {
+  router.push({
+    name: "memberList",
+    query: { groupId: row.id },
+  });
+}
+
 const addForm = ref(null);
 const editForm = ref(null);
 
@@ -84,6 +211,7 @@ const loading = ref(true);
 const searchForm = reactive({
   pageNumber: 1,
   pageSize: 20,
+  groupName: "",
 });
 const data = ref([]);
 const total = ref(0);
@@ -91,44 +219,81 @@ const addFlag = ref(false);
 const editFlag = ref(false);
 const submitAddLoading = ref(false);
 const submitEditLoading = ref(false);
+
 const formAdd = ref({
   groupName: "",
   description: "",
 });
+
 const formEdit = ref({
   id: "",
   groupName: "",
   description: "",
 });
+
 const rulesAdd = reactive({
   groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
 });
+
 const rulesEdit = reactive({
   groupName: [{ required: true, message: "请输入分组名称", trigger: "blur" }],
 });
 
-function init() {
+function handleSearch() {
+  searchForm.pageNumber = 1;
   getData();
 }
+
+function handleReset() {
+  searchForm.pageNumber = 1;
+  searchForm.groupName = "";
+  getData();
+}
+
 function changePage(v) {
   searchForm.pageNumber = v;
   getData();
 }
+
 function changePageSize(v) {
   searchForm.pageNumber = 1;
   searchForm.pageSize = v;
   getData();
 }
+
 function getData() {
   loading.value = true;
-  API_Member.getMemberGroupByPage(searchForm).then((res) => {
-    loading.value = false;
-    if (res && res.success && res.result) {
-      data.value = res.result.records || [];
-      total.value = res.result.total || 0;
-    }
-  });
+  API_Member.getMemberGroupByPage(searchForm)
+    .then((res) => {
+      loading.value = false;
+      if (res && res.success && res.result) {
+        const records = res.result.records || [];
+        data.value = records;
+        total.value = res.result.total || 0;
+
+        // 异步获取各分组的会员总数
+        records.forEach((row) => {
+          if (row.memberCount == null) {
+            API_Member.getMemberGroupUsers(row.id, { pageNumber: 1, pageSize: 1 })
+              .then((userRes) => {
+                if (userRes && userRes.success && userRes.result) {
+                  row.memberCount = userRes.result.total || 0;
+                } else {
+                  row.memberCount = 0;
+                }
+              })
+              .catch(() => {
+                row.memberCount = 0;
+              });
+          }
+        });
+      }
+    })
+    .catch(() => {
+      loading.value = false;
+    });
 }
+
 function openAdd() {
   addFlag.value = true;
   nextTick(() => {
@@ -136,20 +301,26 @@ function openAdd() {
     formAdd.value = { groupName: "", description: "" };
   });
 }
+
 function submitAdd() {
   addForm.value.validate((valid) => {
     if (!valid) return;
     submitAddLoading.value = true;
-    API_Member.addMemberGroup(formAdd.value).then((res) => {
-      submitAddLoading.value = false;
-      if (res && res.success) {
-        ElMessage.success("添加成功");
-        addFlag.value = false;
-        getData();
-      }
-    });
+    API_Member.addMemberGroup(formAdd.value)
+      .then((res) => {
+        submitAddLoading.value = false;
+        if (res && res.success) {
+          ElMessage.success("添加成功");
+          addFlag.value = false;
+          getData();
+        }
+      })
+      .catch(() => {
+        submitAddLoading.value = false;
+      });
   });
 }
+
 function openEdit(row) {
   editFlag.value = true;
   submitEditLoading.value = false;
@@ -169,48 +340,120 @@ function openEdit(row) {
     }
   });
 }
+
 function submitEdit() {
   editForm.value.validate((valid) => {
     if (!valid) return;
     submitEditLoading.value = true;
     const { id, groupName, description } = formEdit.value;
-    API_Member.updateMemberGroup(id, { groupName, description }).then((res) => {
-      submitEditLoading.value = false;
-      if (res && res.success) {
-        ElMessage.success("修改成功");
-        editFlag.value = false;
-        getData();
-      }
-    });
+    API_Member.updateMemberGroup(id, { groupName, description })
+      .then((res) => {
+        submitEditLoading.value = false;
+        if (res && res.success) {
+          ElMessage.success("修改成功");
+          editFlag.value = false;
+          getData();
+        }
+      })
+      .catch(() => {
+        submitEditLoading.value = false;
+      });
   });
 }
+
 function remove(row) {
-  ElMessageBox.confirm("确定删除该分组？", "提示", { type: "warning" }).then(() => {
-    API_Member.deleteMemberGroup(row.id).then((res) => {
-      if (res && res.success) {
-        ElMessage.success("删除成功");
-        getData();
-      } else if (res && res.message) {
-        ElMessage.error(res.message);
-      }
-    });
-  }).catch(() => {});
+  ElMessageBox.confirm(`确定删除分组 "${row.groupName || "该分组"}" 吗？`, "删除确认", {
+    type: "warning",
+    confirmButtonText: "确定删除",
+    cancelButtonText: "取消",
+  })
+    .then(() => {
+      API_Member.deleteMemberGroup(row.id).then((res) => {
+        if (res && res.success) {
+          ElMessage.success("删除成功");
+          getData();
+        } else if (res && res.message) {
+          ElMessage.error(res.message);
+        }
+      });
+    })
+    .catch(() => {});
 }
 
 onMounted(() => {
-  init();
+  getData();
 });
 </script>
 
-<style scoped>
-.ops a {
+<style scoped lang="scss">
+.member-group-page {
+  .card-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 12px;
+
+    .filter-form {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin-bottom: 0;
+
+      :deep(.el-form-item) {
+        margin-bottom: 0;
+        margin-right: 16px;
+      }
+    }
+
+    .toolbar-right {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .card-header-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-title {
+      font-size: 15px;
+      font-weight: 600;
+      color: #303133;
+    }
+  }
+
+  .pagination-wrap {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+.link-text {
   color: #2d8cf0;
   cursor: pointer;
   text-decoration: none;
-}
-.ops span {
+  font-size: 14px;
+  line-height: 1;
   display: inline-block;
+
+  &:hover {
+    color: #57a3f3;
+  }
+
+  &.error-text {
+    color: #ed4014;
+
+    &:hover {
+      color: #f16643;
+    }
+  }
+}
+
+.op-split {
   margin: 0 8px;
   color: #dcdee2;
+  font-size: 14px;
 }
 </style>