align(account·像素复刻): 用户管理/菜单权限配置/分组管理 三页自绘复刻旧版(panel-users/columns/group-manage)——原生表格+btn-sm行操作+原生confirm删除+旧式分页(菜单/分组全量无分页同旧版)+分组摘要chips；创建/编辑/菜单树弹窗保留现有组件

admin-frontend-vue/src/pages/account/GroupsPage.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import { formatDateTime } from '@/utils/datetime'
+/** 分组管理页 · 像素复刻旧版 admin.html panel-group-manage（自绘：顶部数据权限分组摘要 chips + 分组列表表格 + 新建分组；全量无分页同旧版）。
+ *   script 逻辑沿用现有 Vue 实现；编辑器保留现有组件。 */
 import { computed, onMounted, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useAdminSessionStore } from '@/stores/admin-session'
 import { openAdminConfirm } from '@/components/admin-confirm'
 import { deleteShopGroup, fetchShopGroups } from './shop-group-api'
 import { shopGroupSummary, type ShopGroupItem } from './shop-group-model'
+import { dedupeGroupSummaryOf } from '@/pages/asin/dedupe-total-model'
 import GroupEditorDialog from './GroupEditorDialog.vue'
 
 const session = useAdminSessionStore()
@@ -16,20 +19,14 @@ const editingGroup = ref<ShopGroupItem | null>(null)
 const summary = computed(() => shopGroupSummary(rows.value))
 const isSuperAdmin = computed(() => session.isSuperAdmin)
 const currentUserId = computed(() => session.user?.id ?? null)
-// 客户端分页：全量拉取后按页切片展示。
-const page = ref(1)
-const pageSize = ref(10)
-const total = computed(() => rows.value.length)
-const pagedRows = computed(() => rows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
-
-function changePage(p: number) {
-  page.value = p
-}
-
-function changeSize(size: number) {
-  pageSize.value = size
-  page.value = 1
-}
+/** 顶部摘要 chips（对齐 admin.js renderShopManageGroupSummary；与去重汇总同构）。 */
+const groupChips = computed(() =>
+  dedupeGroupSummaryOf(
+    rows.value.map((g) => ({ id: g.id, name: g.name, leaderUserId: g.leaderUserId })),
+    currentUserId.value,
+    session.user?.role || '',
+  ),
+)
 
 function canEditOf(group: ShopGroupItem): boolean {
   if (isSuperAdmin.value) return true
@@ -74,64 +71,82 @@ onMounted(loadGroups)
 </script>
 
 <template>
-  <div class="page-stack">
-    <div class="page-heading">
-      <div>
-        <h2>数据权限分组</h2>
-        <p>管理店铺数据访问分组和组员范围。组长不可更改，组员为普通账号。</p>
-      </div>
-    </div>
-    <el-row :gutter="12" style="margin-bottom: 12px">
-      <el-col :span="8">
-        <el-card shadow="never">
-          <div class="stat-block">
-            <span class="stat-label">分组总数</span>
-            <span class="stat-value">{{ summary.groupCount }}</span>
-          </div>
-        </el-card>
-      </el-col>
-      <el-col :span="8">
-        <el-card shadow="never">
-          <div class="stat-block">
-            <span class="stat-label">组员总数</span>
-            <span class="stat-value">{{ summary.memberTotal }}</span>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-card shadow="never">
-      <div class="table-toolbar">
-        <el-button type="primary" @click="openCreate">新建分组</el-button>
-      </div>
-      <el-table v-loading="loading" :data="pagedRows" stripe>
-        <el-table-column prop="name" label="分组名称" min-width="180" />
-        <el-table-column prop="leaderUsername" label="组长" min-width="170" />
-        <el-table-column prop="memberCount" label="组员数量" min-width="100" />
-        <el-table-column label="组员" min-width="240">
-          <template #default="{ row }">
-            <template v-if="row.memberUsernames.length">
-              <el-tag v-for="name in row.memberUsernames" :key="name" size="small" class="member-tag">{{ name }}</el-tag>
+  <div class="groups-view">
+    <section class="form-box">
+      <div class="dedupe-group-access">
+        <div class="dedupe-group-access-main">
+          <span class="dedupe-group-access-title">数据权限分组</span>
+          <div class="dedupe-group-summary">
+            <template v-if="groupChips.kind === 'all'">
+              <span class="dedupe-group-summary-chip">全部分组 · {{ groupChips.count }} 个</span>
             </template>
-            <span v-else class="member-none">无</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" min-width="170">
-          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
-        </el-table-column>
-        <el-table-column prop="updatedAt" label="修改时间" min-width="170">
-          <template #default="{ row }">{{ formatDateTime(row.updatedAt || row.createdAt) }}</template>
-        </el-table-column>
-        <el-table-column label="操作" min-width="140" fixed="right">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" :disabled="!canEditOf(row)" @click="openEdit(row)">编辑</el-button>
-            <el-button size="small" type="danger" :disabled="!canEditOf(row)" @click="removeGroup(row)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="table-footer">
-        <el-pagination background layout="sizes, prev, pager, next, jumper" :total="total" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]" :current-page="page" @current-change="changePage" @size-change="changeSize" />
+            <span v-else-if="groupChips.kind === 'none'" class="no-group">未加入分组</span>
+            <template v-else>
+              <span v-for="chip in groupChips.chips" :key="chip.name" class="dedupe-group-summary-chip" :title="chip.name">
+                {{ chip.name }} · {{ chip.relation }}
+              </span>
+              <span v-if="groupChips.extra > 0" class="extra-groups">另 {{ groupChips.extra }} 个</span>
+            </template>
+          </div>
+        </div>
       </div>
-    </el-card>
+    </section>
+
+    <section class="panel-box">
+      <div class="groups-head">
+        <h3>分组列表</h3>
+        <button class="btn" type="button" @click="openCreate">新建分组</button>
+      </div>
+
+      <div class="table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 58px">序号</th>
+              <th style="width: 16%">分组名称</th>
+              <th style="width: 12%">组长</th>
+              <th style="width: 10%">组员数量</th>
+              <th>组员</th>
+              <th style="width: 16%">创建时间</th>
+              <th style="width: 16%">修改时间</th>
+              <th style="width: 124px">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="rows.length">
+              <tr v-for="(group, index) in rows" :key="group.id">
+                <td>{{ index + 1 }}</td>
+                <td>{{ group.name }}</td>
+                <td>{{ group.leaderUsername || '-' }}</td>
+                <td>{{ group.memberCount ?? (group.memberUsernames?.length ?? 0) }}</td>
+                <td>
+                  <div class="shop-group-members">
+                    <span v-for="name in group.memberUsernames" :key="name" class="shop-group-member-chip">{{ name }}</span>
+                    <span v-if="!group.memberUsernames.length" class="member-none">无</span>
+                  </div>
+                </td>
+                <td>{{ formatDateTime(group.createdAt) }}</td>
+                <td>{{ formatDateTime(group.updatedAt || group.createdAt) }}</td>
+                <td class="ops-cell">
+                  <template v-if="canEditOf(group)">
+                    <button class="btn btn-sm" type="button" @click="openEdit(group)">编辑</button>
+                    <button class="btn btn-sm btn-danger" type="button" @click="removeGroup(group)">删除</button>
+                  </template>
+                  <span v-else class="member-none">-</span>
+                </td>
+              </tr>
+            </template>
+            <tr v-else-if="loading">
+              <td colspan="8" class="empty-tip">加载中...</td>
+            </tr>
+            <tr v-else>
+              <td colspan="8" class="empty-tip">暂无分组</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
     <GroupEditorDialog
       v-model="editorVisible"
       :group="editingGroup"
@@ -142,29 +157,202 @@ onMounted(loadGroups)
 </template>
 
 <style scoped>
-.stat-block {
+/* 像素复刻旧版 admin.html panel-group-manage（蓝白末层）。 */
+.groups-view {
+  font-family: inherit;
+  color: #24384d;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 18px;
 }
-.stat-label {
-  color: var(--el-text-color-secondary);
-  font-size: 13px;
+.form-box,
+.panel-box {
+  width: 100%;
+  min-width: 0;
+  padding: 20px 22px 24px;
+  border: 1px solid #d8e3ee;
+  border-radius: 14px;
+  background: linear-gradient(145deg, #ffffff, #f9fbfd);
+  box-shadow: 0 1px 2px rgba(39, 67, 94, 0.04), 0 14px 30px -24px rgba(39, 67, 94, 0.28);
 }
-.stat-value {
-  font-size: 24px;
+h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+  color: #24384d;
+  letter-spacing: 0.2px;
+}
+.dedupe-group-access {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 0;
+  padding: 0 0 6px;
+  border-bottom: 0;
+}
+.dedupe-group-access-main {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.dedupe-group-access-title {
+  flex: 0 0 auto;
+  font-size: 14px;
   font-weight: 600;
-  line-height: 1.2;
+  color: #24384d;
 }
-.member-tag {
-  margin: 2px 4px 2px 0;
-}
-.member-more {
-  font-size: 12px;
-  color: var(--admin-muted);
-}
-.member-none {
-  color: var(--admin-muted);
+.dedupe-group-summary {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  color: #5b6f83;
   font-size: 13px;
 }
+.dedupe-group-summary-chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 220px;
+  padding: 4px 10px;
+  border: 1px solid #d8e3ee;
+  border-radius: 6px;
+  background: #f8f9fc;
+  color: #5b6f83;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.no-group,
+.extra-groups {
+  color: #8293a5;
+}
+.groups-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 9px 18px;
+  border: 1px solid #4f78a5;
+  border-radius: 9px;
+  background: linear-gradient(135deg, #5f85ad, #4f78a5);
+  color: #ffffff;
+  font-family: inherit;
+  font-size: 13.5px;
+  cursor: pointer;
+  box-shadow: 0 8px 18px -14px rgba(79, 120, 165, 0.72);
+  transition: background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
+}
+.btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, #7094ba, #5d83ac);
+  box-shadow: 0 11px 22px -14px rgba(79, 120, 165, 0.8);
+}
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.btn-danger {
+  background: linear-gradient(135deg, #c06d77, #b35f6a);
+  border-color: #b35f6a;
+}
+.btn-danger:hover:not(:disabled) {
+  background: linear-gradient(135deg, #cb7c84, #b96570);
+}
+.btn-sm {
+  min-height: 36px;
+  padding: 7px 12px;
+}
+.table-scroll {
+  width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  border: 1px solid #dbe5ee;
+  border-radius: 10px;
+  background: #ffffff;
+}
+.table-scroll table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.table-scroll th,
+.table-scroll td {
+  padding: 10px 12px;
+  text-align: left;
+  font-size: 13.5px;
+  line-height: 1.5;
+  border-bottom: 1px solid #e0e8ef;
+  vertical-align: middle;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.table-scroll th {
+  background: #edf4fa;
+  color: #4e6479;
+  border-bottom-color: #d5e1eb;
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0.4px;
+}
+.table-scroll tbody tr:hover td {
+  background: #f1f7fb;
+}
+.table-scroll tbody tr:last-child td {
+  border-bottom: 0;
+}
+.table-scroll td {
+  white-space: normal;
+  word-break: break-word;
+}
+.shop-group-members {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-height: 96px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+.shop-group-member-chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 150px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: #e7f0f8;
+  color: #2f5d8b;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.member-none,
+.member-more {
+  color: #8293a5;
+  font-size: 12.5px;
+}
+.ops-cell {
+  white-space: nowrap;
+}
+.ops-cell .btn + .btn {
+  margin-left: 8px;
+}
+.empty-tip {
+  padding: 44px 24px;
+  text-align: center;
+  color: #8293a5;
+  font-size: 13.5px;
+}
 </style>