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)
-// 客户端分页：全量拉取后按页切片展示。
+/** 顶部摘要 chips（对齐 admin.js renderShopManageGroupSummary；与去重汇总同构）。 */
-const page = ref(1)
+const groupChips = computed(() =>
-const pageSize = ref(10)
+  dedupeGroupSummaryOf(
-const total = computed(() => rows.value.length)
+    rows.value.map((g) => ({ id: g.id, name: g.name, leaderUserId: g.leaderUserId })),
-const pagedRows = computed(() => rows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
+    currentUserId.value,
-
+    session.user?.role || '',
-function changePage(p: number) {
+  ),
-  page.value = p
+)
-}
-
-function changeSize(size: number) {
-  pageSize.value = size
-  page.value = 1
-}
 
 function canEditOf(group: ShopGroupItem): boolean {
   if (isSuperAdmin.value) return true
@@ -74,64 +71,82 @@ onMounted(loadGroups)
 </script>
 
 <template>
-  <div class="page-stack">
+  <div class="groups-view">
-    <div class="page-heading">
+    <section class="form-box">
-      <div>
+      <div class="dedupe-group-access">
-        <h2>数据权限分组</h2>
+        <div class="dedupe-group-access-main">
-        <p>管理店铺数据访问分组和组员范围。组长不可更改，组员为普通账号。</p>
+          <span class="dedupe-group-access-title">数据权限分组</span>
-      </div>
+          <div class="dedupe-group-summary">
-    </div>
+            <template v-if="groupChips.kind === 'all'">
-    <el-row :gutter="12" style="margin-bottom: 12px">
+              <span class="dedupe-group-summary-chip">全部分组 · {{ groupChips.count }} 个</span>
-      <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>
             </template>
-            <span v-else class="member-none">无</span>
+            <span v-else-if="groupChips.kind === 'none'" class="no-group">未加入分组</span>
-          </template>
+            <template v-else>
-        </el-table-column>
+              <span v-for="chip in groupChips.chips" :key="chip.name" class="dedupe-group-summary-chip" :title="chip.name">
-        <el-table-column prop="createdAt" label="创建时间" min-width="170">
+                {{ chip.name }} · {{ chip.relation }}
-          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
+              </span>
-        </el-table-column>
+              <span v-if="groupChips.extra > 0" class="extra-groups">另 {{ groupChips.extra }} 个</span>
-        <el-table-column prop="updatedAt" label="修改时间" min-width="170">
+            </template>
-          <template #default="{ row }">{{ formatDateTime(row.updatedAt || row.createdAt) }}</template>
+          </div>
-        </el-table-column>
+        </div>
-        <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" />
       </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 {
+.form-box,
-  color: var(--el-text-color-secondary);
+.panel-box {
-  font-size: 13px;
+  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 {
+h3 {
-  font-size: 24px;
+  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 {
+.dedupe-group-summary {
-  margin: 2px 4px 2px 0;
+  min-width: 0;
-}
+  display: flex;
-.member-more {
+  align-items: center;
-  font-size: 12px;
+  gap: 6px;
-  color: var(--admin-muted);
+  flex-wrap: wrap;
-}
+  color: #5b6f83;
-.member-none {
-  color: var(--admin-muted);
   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>

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { formatDateTime } from '@/utils/datetime'
+/** 菜单权限配置页 · 像素复刻旧版 admin.html panel-columns（自绘：面板头+新增菜单、拖拽手柄 ⠿、树形缩进+└、旧式表格、全量无分页同旧版）。
+ *   script 逻辑沿用现有 Vue 实现（拖拽分组/落点/重排保存、弹窗表单）。 */
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { createMenu, deleteMenu, loadMenuManageTree, reorderMenus, updateMenu } from './menu-manage-api'
@@ -20,22 +22,25 @@ import {
   type MenuManageNode,
 } from './menu-manage-model'
 
+/** 树行视图：展平 + 深度（缩进与 └ 前缀）。 */
+interface MenuRow extends MenuManageNode {
+  depth: number
+}
+
 const loading = ref(false)
 const rows = ref<MenuManageNode[]>([])
-// 客户端分页：列表展示统一带分页组件。
+/** 展平视图：前序 + depth。 */
-const page = ref(1)
+const menuRows = computed<MenuRow[]>(() => {
-const pageSize = ref(10)
+  const out: MenuRow[] = []
-const total = computed(() => rows.value.length)
+  const walk = (list: MenuManageNode[], depth: number) => {
-const pagedRows = computed(() => rows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
+    for (const node of list) {
-
+      out.push({ ...node, depth })
-function changePage(p: number) {
+      if (node.children?.length) walk(node.children, depth + 1)
-  page.value = p
+    }
-}
+  }
-
+  walk(rows.value, 0)
-function changeSize(size: number) {
+  return out
-  pageSize.value = size
+})
-  page.value = 1
-}
 const createVisible = ref(false)
 const saving = ref(false)
 const editingNode = ref<MenuManageNode | null>(null)
@@ -169,15 +174,14 @@ async function removeMenu(node: MenuManageNode) {
     ElMessage.warning(reason)
     return
   }
+  // 对齐旧版：原生 confirm。
+  if (!window.confirm(`确定删除菜单“${node.name}”吗？`)) return
   try {
-    await ElMessageBox.confirm(`确定删除菜单“${node.name}”吗？`, '删除确认', { type: 'warning' })
     await deleteMenu(node.id)
     ElMessage.success('删除成功')
     await loadMenus()
   } catch (error) {
-    if (error !== 'cancel' && error !== 'close') {
+    ElMessage.error(error instanceof Error ? error.message : '删除失败')
-      ElMessage.error(error instanceof Error ? error.message : '删除失败')
-    }
   }
 }
 
@@ -185,67 +189,78 @@ onMounted(loadMenus)
 </script>
 
 <template>
-  <div class="page-stack">
+  <div class="menus-view">
-    <div class="page-heading">
+    <section class="panel-box">
-      <div>
+      <div class="menus-head">
-        <h2>菜单管理</h2>
+        <h3>菜单列表</h3>
-        <p>维护后台菜单树和页面路由。权限粒度仅到菜单/页面。</p>
+        <button class="btn" type="button" @click="openCreate">新增菜单</button>
       </div>
-    </div>
+      <p class="columns-drag-tip">拖动每行左侧的手柄可调整同级菜单的显示顺序，松开后自动保存。</p>
-    <el-card shadow="never">
+
-      <p class="menu-drag-tip">拖动每行左侧的手柄可调整同级菜单的显示顺序，松开后自动保存。</p>
+      <div class="table-scroll columns-table-scroll">
-      <div class="table-toolbar">
+        <table>
-        <el-button type="primary" @click="openCreate">新增菜单</el-button>
+          <thead>
+            <tr>
+              <th class="column-drag-cell"><span class="visually-hidden">排序</span></th>
+              <th style="width: 60px">ID</th>
+              <th style="width: 200px">菜单名称</th>
+              <th style="width: 100px">菜单类型</th>
+              <th style="width: 120px">上级菜单</th>
+              <th style="width: 170px">创建时间</th>
+              <th style="width: 170px">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="menuRows.length">
+              <tr
+                v-for="row in menuRows"
+                :key="row.id"
+                :class="{ 'is-column-dragging': dragState?.id === row.id }"
+                @dragover="onDragOver($event, row)"
+                @drop="onDrop($event, row)"
+              >
+                <td class="column-drag-cell">
+                  <span
+                    class="column-drag-handle"
+                    draggable="true"
+                    role="button"
+                    :title="`拖动调整“${row.name}”的顺序`"
+                    @dragstart="onDragStart($event, row)"
+                    @dragend="onDragEnd"
+                  >⠿</span>
+                </td>
+                <td>{{ row.id }}</td>
+                <td class="name-cell">
+                  <span v-if="row.depth > 0" class="column-child-mark" :style="{ marginLeft: `${row.depth * 16}px` }">└</span>
+                  <span class="menu-name-text">{{ row.name }}</span>
+                </td>
+                <td><span class="menu-type-text">{{ menuTypeLabel(row.menuType) }}</span></td>
+                <td>{{ parentNameOf(row) }}</td>
+                <td>{{ formatDateTime(row.createdAt) }}</td>
+                <td class="ops-cell">
+                  <button class="btn btn-sm" type="button" @click="openEdit(row)">编辑</button>
+                  <button
+                    class="btn btn-sm btn-danger"
+                    type="button"
+                    :disabled="menuDeleteReason(row) !== undefined"
+                    :title="menuDeleteReason(row) || undefined"
+                    @click="removeMenu(row)"
+                  >
+                    删除
+                  </button>
+                </td>
+              </tr>
+            </template>
+            <tr v-else-if="loading">
+              <td colspan="7" class="empty-tip">加载中...</td>
+            </tr>
+            <tr v-else>
+              <td colspan="7" class="empty-tip">暂无菜单，请先在上方新增</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <el-table v-loading="loading" :data="pagedRows" row-key="id" default-expand-all stripe>
+    </section>
-        <el-table-column label="排序" min-width="64">
-          <template #default="{ row }">
-            <span
-              class="menu-drag-handle"
-              draggable="true"
-              role="button"
-              :title="`拖动调整“${(row as MenuManageNode).name}”的顺序`"
-              @dragstart="onDragStart($event, row as MenuManageNode)"
-              @dragend="onDragEnd"
-              @dragover="onDragOver($event, row as MenuManageNode)"
-              @drop="onDrop($event, row as MenuManageNode)"
-            >⠿</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="name" label="菜单名称" min-width="180" />
-        <el-table-column label="菜单类型" min-width="110">
-          <template #default="{ row }">
-            <el-tag size="small" :type="(row as MenuManageNode).menuType === 'app' ? 'info' : 'primary'">{{ menuTypeLabel((row as MenuManageNode).menuType) }}</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="上级菜单" min-width="120">
-          <template #default="{ row }">
-            {{ parentNameOf(row as MenuManageNode) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="createdAt" label="创建时间" min-width="150">
-          <template #default="{ row }">{{ formatDateTime((row as MenuManageNode).createdAt) }}</template>
-        </el-table-column>
-        <el-table-column label="操作" min-width="160" fixed="right">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" @click="openEdit(row as MenuManageNode)">编辑</el-button>
-            <el-button size="small" type="danger" :disabled="menuDeleteReason(row as MenuManageNode) !== undefined" @click="removeMenu(row as MenuManageNode)">删除</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"
-        />
-      </div>
-    </el-card>
 
     <el-dialog v-model="createVisible" :title="dialogTitle" width="520px">
       <el-form label-width="96px">
@@ -280,26 +295,177 @@ onMounted(loadMenus)
 </template>
 
 <style scoped>
-.menu-drag-tip {
+/* 像素复刻旧版 admin.html panel-columns（蓝白末层）。 */
-  margin: 0 0 10px;
+.menus-view {
-  font-size: 13px;
+  font-family: inherit;
-  color: var(--el-text-color-secondary);
+  color: #24384d;
 }
-.menu-drag-handle {
+.panel-box {
-  display: inline-block;
+  width: 100%;
-  cursor: grab;
+  min-width: 0;
-  color: var(--el-text-color-secondary);
+  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);
+}
+h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+  color: #24384d;
+  letter-spacing: 0.2px;
+}
+.menus-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.columns-drag-tip {
+  margin: 10px 0 16px;
+  font-size: 13px;
+  color: #5b6f83;
+}
+.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;
+}
+.columns-table-scroll > table {
+  min-width: 860px;
+}
+.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;
+}
+.column-drag-cell {
+  width: 48px;
+}
+.column-drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: none;
+  color: #93a6b8;
   font-size: 15px;
   line-height: 1;
-  padding: 4px 6px;
+  cursor: grab;
-  border-radius: 4px;
   user-select: none;
 }
-.menu-drag-handle:hover {
+.column-drag-handle:hover {
-  background: var(--el-fill-color-light);
+  border-color: #cbd9e6;
-  color: var(--el-text-color-primary);
+  background: #eef4fa;
+  color: #2f5d8b;
 }
-.menu-drag-handle:active {
+.column-drag-handle:active {
   cursor: grabbing;
 }
+tr.is-column-dragging td {
+  opacity: 0.45;
+}
+.column-child-mark {
+  margin-right: 6px;
+  color: #9fb1c2;
+}
+.menu-name-text {
+  font-weight: 500;
+}
+.menu-type-text {
+  color: #5b6f83;
+}
+.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;
+}
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+}
 </style>

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { formatDateTime } from '@/utils/datetime'
+/** 用户管理页 · 像素复刻旧版 admin.html panel-users（自绘：panel-box + 页头按钮 + 筛选 form-row + 旧式表格/分页 + 原生 confirm 删除）。
+ *   script 逻辑沿用现有 Vue 实现；创建/编辑弹窗保留现有组件（含用户菜单权限树）。 */
 import { computed, onMounted, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import type { AdminUser } from '@/types/admin'
 import { roleLabel } from '@/types/admin'
 import { useAdminSessionStore } from '@/stores/admin-session'
@@ -25,6 +27,8 @@ const filters = reactive<UserFilterState>(createUserFilterState())
 const isSuperAdmin = computed(() => session.isSuperAdmin)
 const currentUserId = computed(() => session.user?.id ?? null)
 const statePhase = computed(() => listPhaseOf({ loading: loading.value, error: loadError.value, items: rows.value, total: total.value }))
+const jumpPage = ref('')
+const totalPages = computed(() => Math.max(1, totalPageCount(total.value, filters.pageSize)))
 
 const createVisible = ref(false)
 const editVisible = ref(false)
@@ -85,17 +89,14 @@ async function removeUser(row: AdminUser) {
     ElMessage.warning(reason)
     return
   }
+  // 对齐旧版：浏览器原生 confirm 确认后删除。
+  if (!window.confirm(deleteConfirmMessage(row))) return
   try {
-    await ElMessageBox.confirm(deleteConfirmMessage(row), '删除用户', {
-      confirmButtonText: '删除',
-      cancelButtonText: '取消',
-      type: 'warning',
-    })
     await deleteUser(row.id)
     ElMessage.success('删除成功')
     await loadUsers()
   } catch (error) {
-    if (error !== 'cancel' && error !== 'close') ElMessage.error(error instanceof Error ? error.message : '删除失败')
+    ElMessage.error(error instanceof Error ? error.message : '删除失败')
   }
 }
 
@@ -110,106 +111,373 @@ function changeSize(size: number) {
   void loadUsers()
 }
 
+function goJump() {
+  const n = Number.parseInt(jumpPage.value, 10)
+  if (Number.isNaN(n)) {
+    ElMessage.warning('请输入页码')
+    return
+  }
+  changePage(Math.min(Math.max(n, 1), totalPages.value))
+}
+
 onMounted(loadUsers)
 </script>
 
 <template>
-  <div class="page-stack">
+  <div class="users-view">
-    <div class="page-heading">
+    <section class="panel-box">
-      <div>
+      <div class="users-head">
-        <h2>用户管理</h2>
+        <h3>用户列表</h3>
-        <p>当前没有开放注册入口，仅管理员可在此创建用户。层级关系：超级管理员 -&gt; 管理员 -&gt; 普通账号。</p>
+        <button class="btn" type="button" @click="openCreate">新建用户</button>
       </div>
-    </div>
+      <p class="users-desc">当前没有开放注册入口，仅管理员可在此创建用户。层级关系：超级管理员 -&gt; 管理员 -&gt; 普通账号。</p>
-    <el-card shadow="never" class="filter-card">
+
-      <el-form inline @submit.prevent="search">
+      <div class="form-row users-filter-row">
-        <el-form-item label="用户名（模糊搜索）">
+        <div class="form-group" style="min-width: 180px">
-          <el-input v-model="filters.keyword" clearable placeholder="输入用户名关键字" @keyup.enter="search" />
+          <label>用户名（模糊搜索）</label>
-        </el-form-item>
+          <input v-model="filters.keyword" type="text" placeholder="输入用户名关键字" @keyup.enter="search" />
-        <el-form-item v-if="isSuperAdmin" label="所属管理员">
+        </div>
-          <el-select
+        <div v-if="isSuperAdmin" class="form-group" style="min-width: 160px">
-            v-model="filters.createdByAdminId"
+          <label>所属管理员</label>
-            clearable
+          <select v-model="filters.createdByAdminId">
-            filterable
+            <option value="">全部</option>
-            placeholder="全部"
+            <option v-for="admin in admins" :key="admin.id" :value="admin.id">{{ admin.username }}</option>
-            style="width: 200px"
+          </select>
-            @change="search"
+        </div>
-          >
+        <button class="btn" type="button" @click="search">查询</button>
-            <el-option
-              v-for="admin in admins"
-              :key="admin.id"
-              :label="admin.username"
-              :value="admin.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="search">查询</el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-    <el-card shadow="never">
-      <el-alert
-        v-if="statePhase === 'error' && loadError"
-        :title="loadError"
-        type="error"
-        show-icon
-        :closable="false"
-        style="margin-bottom: 12px"
-      >
-        <template #default>
-          <el-button link type="primary" @click="retry">重试</el-button>
-        </template>
-      </el-alert>
-      <div class="table-toolbar">
-        <el-button type="primary" @click="openCreate">新建用户</el-button>
       </div>
-      <el-table v-loading="loading" :data="rows" stripe :empty-text="userListEmptyHint()">
+
-        <el-table-column prop="username" label="用户名" min-width="180" />
+      <div v-if="statePhase === 'error' && loadError" class="msg err">
-        <el-table-column label="角色" min-width="140">
+        <span>加载失败: {{ loadError }}</span>
-          <template #default="{ row }">
+        <button class="btn btn-sm btn-secondary" type="button" @click="retry">重试</button>
-            <span>{{ roleLabel(row.role) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="creatorUsername" label="所属管理员" min-width="160" />
-        <el-table-column prop="createdAt" label="创建时间" min-width="180">
-          <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
-        </el-table-column>
-        <el-table-column label="操作" min-width="160" fixed="right">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" :disabled="!editableOf(row)" @click="openEdit(row)">编辑</el-button>
-            <el-button
-              size="small"
-              type="danger"
-              :disabled="deleteBlockReason(row, currentUserId) !== undefined"
-              @click="removeUser(row)"
-            >
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="table-footer">
-        <span>共 {{ total }} 条</span>
-        <el-pagination
-          background
-          layout="sizes, prev, pager, next, jumper"
-          :page-size="filters.pageSize"
-          :current-page="filters.page"
-          :page-sizes="[10, 20, 50, 100]"
-          :total="total"
-          @current-change="changePage"
-          @size-change="changeSize"
-        />
       </div>
-    </el-card>
+
+      <div class="table-scroll user-table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 70px">ID</th>
+              <th style="width: 180px">用户名</th>
+              <th style="width: 140px">角色</th>
+              <th style="width: 160px">所属管理员</th>
+              <th style="width: 180px">创建时间</th>
+              <th style="width: 160px">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="rows.length">
+              <tr v-for="row in rows" :key="row.id">
+                <td>{{ row.id }}</td>
+                <td>{{ row.username }}</td>
+                <td>{{ roleLabel(row.role) }}</td>
+                <td>{{ row.creatorUsername || '-' }}</td>
+                <td>{{ formatDateTime(row.createdAt) }}</td>
+                <td class="ops-cell">
+                  <button
+                    class="btn btn-sm"
+                    type="button"
+                    :disabled="!editableOf(row)"
+                    :title="!editableOf(row) ? '该账号不可编辑' : undefined"
+                    @click="openEdit(row)"
+                  >
+                    编辑
+                  </button>
+                  <button
+                    class="btn btn-sm btn-danger"
+                    type="button"
+                    :disabled="deleteBlockReason(row, currentUserId) !== undefined"
+                    :title="deleteBlockReason(row, currentUserId) || undefined"
+                    @click="removeUser(row)"
+                  >
+                    删除
+                  </button>
+                </td>
+              </tr>
+            </template>
+            <tr v-else-if="loading">
+              <td colspan="6" class="empty-tip">加载中...</td>
+            </tr>
+            <tr v-else>
+              <td colspan="6" class="empty-tip">{{ userListEmptyHint() }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="pagination">
+        <span class="page-total">共 {{ total }} 条</span>
+        <select v-model="filters.pageSize" class="page-size-select" @change="changeSize(Number(filters.pageSize))">
+          <option :value="10">10条/页</option>
+          <option :value="20">20条/页</option>
+          <option :value="50">50条/页</option>
+          <option :value="100">100条/页</option>
+        </select>
+        <button type="button" :disabled="filters.page <= 1" @click="changePage(filters.page - 1)">上一页</button>
+        <span class="page-cur">第 {{ filters.page }} / {{ totalPages }} 页</span>
+        <button type="button" :disabled="filters.page >= totalPages" @click="changePage(filters.page + 1)">下一页</button>
+        <span class="page-jump">
+          跳至
+          <input v-model="jumpPage" type="text" inputmode="numeric" @keyup.enter="goJump" />
+          页
+          <button type="button" @click="goJump">跳转</button>
+        </span>
+      </div>
+    </section>
+
     <CreateUserDialog v-model="createVisible" :operator-super="isSuperAdmin" :admin-options="admins" @created="loadUsers" />
     <EditUserDialog v-model="editVisible" :user="editUser" :operator-super="isSuperAdmin" @updated="loadUsers" />
   </div>
 </template>
 
 <style scoped>
-.filter-card :deep(.el-form-item) {
+/* 像素复刻旧版 admin.html panel-users（蓝白末层）。 */
+.users-view {
+  font-family: inherit;
+  color: #24384d;
+}
+.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);
+}
+h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 650;
+  color: #24384d;
+  letter-spacing: 0.2px;
+}
+.users-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.users-desc {
+  margin: 10px 0 16px;
+  font-size: 13px;
+  color: #5b6f83;
+}
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 14px 18px;
+  margin-bottom: 16px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
   margin-bottom: 0;
 }
+.form-group label {
+  color: #5b6f83;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.form-group input,
+.form-group select {
+  min-width: 0;
+  min-height: 42px;
+  padding: 8px 12px;
+  border: 1px solid #cbd9e6;
+  border-radius: 9px;
+  background: #f8fbfd;
+  color: #24384d;
+  font-size: 13.5px;
+  font-family: inherit;
+  color-scheme: light;
+  outline: none;
+  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
+}
+.form-group input:hover,
+.form-group select:hover {
+  border-color: #9fb7cd;
+}
+.form-group input:focus,
+.form-group select:focus {
+  background: #ffffff;
+  border-color: #5f85ad;
+  box-shadow: 0 0 0 3px rgba(95, 133, 173, 0.16);
+}
+.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-secondary {
+  background: #ffffff;
+  color: #5b6f83;
+  border-color: #c7d7e5;
+}
+.btn-secondary:hover:not(:disabled) {
+  color: #2f5d8b;
+  border-color: #95b1cb;
+  background: #edf5fb;
+}
+.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;
+}
+.msg {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+  padding: 10px 12px;
+  border: 1px solid;
+  border-radius: 9px;
+  font-size: 13px;
+}
+.msg.err {
+  color: #91474f;
+  background: #f8ebeb;
+  border-color: #e4c2c5;
+}
+.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;
+}
+.user-table-scroll > table {
+  min-width: 860px;
+}
+.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;
+}
+.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;
+}
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 18px;
+  color: #5b6f83;
+  font-size: 13px;
+}
+.pagination button {
+  min-height: 30px;
+  padding: 4px 12px;
+  border: 1px solid #c7d7e5;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #5b6f83;
+  font-family: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.pagination button:hover:not(:disabled) {
+  background: #edf5fb;
+  border-color: #95b1cb;
+  color: #2f5d8b;
+}
+.pagination button:disabled {
+  background: #eef3f7;
+  color: #9baaba;
+  cursor: not-allowed;
+}
+.page-size-select {
+  min-height: 30px;
+  padding: 3px 8px;
+  border: 1px solid #cbd9e6;
+  border-radius: 8px;
+  background: #f8fbfd;
+  color: #24384d;
+  font-size: 13px;
+  font-family: inherit;
+}
+.page-total {
+  margin-right: 4px;
+}
+.page-jump {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.page-jump input {
+  width: 56px;
+  min-height: 30px;
+  padding: 4px 8px;
+  border: 1px solid #cbd9e6;
+  border-radius: 8px;
+  background: #f8fbfd;
+  color: #24384d;
+  font-size: 13px;
+  font-family: inherit;
+}
 </style>

admin-frontend-vue/tests/align-account-row-buttons.test.ts

@@ -10,20 +10,25 @@ function assertRowButtonSolid(source: string, action: string) {
   assert.doesNotMatch(source, new RegExp(`<el-button[^>]*text[^>]*@click="${action}`), `${action} 不再 text`)
 }
 
-test('align_users_row_buttons_solid', () => {
+test('align_users_row_buttons_old_btn', () => {
   const s = readSource('src/pages/account/UsersPage.vue')
-  assertRowButtonSolid(s, 'openEdit')
+  assert.match(s, /class="btn btn-sm"[^>]*@click="openEdit\(row\)"/, '编辑用旧版 btn-sm 实心小按钮')
-  assertRowButtonSolid(s, 'removeUser')
+  assert.match(s, /class="btn btn-sm btn-danger"[^>]*@click="removeUser\(row\)"/, '删除用旧版 btn-sm btn-danger')
+  assert.doesNotMatch(s, /el-button/, '用户页已自绘，无 EP 按钮')
+  assert.match(s, /window\.confirm\(deleteConfirmMessage\(row\)\)/, '删除确认走原生 confirm 对齐旧版')
 })
 
-test('align_groups_row_buttons_solid', () => {
+test('align_groups_row_buttons_old_btn', () => {
   const s = readSource('src/pages/account/GroupsPage.vue')
-  assertRowButtonSolid(s, 'openEdit')
+  assert.match(s, /class="btn btn-sm"[^>]*@click="openEdit\(group\)"/, '编辑用旧版 btn-sm 实心小按钮')
-  assertRowButtonSolid(s, 'removeGroup')
+  assert.match(s, /class="btn btn-sm btn-danger"[^>]*@click="removeGroup\(group\)"/, '删除用旧版 btn-sm btn-danger')
+  assert.doesNotMatch(s, /el-button[^>]*@click="openEdit/, '行内不再用 EP 按钮')
 })
 
-test('align_menus_row_buttons_solid', () => {
+test('align_menus_row_buttons_old_btn', () => {
   const s = readSource('src/pages/account/MenusPage.vue')
-  assertRowButtonSolid(s, 'openEdit')
+  assert.match(s, /class="btn btn-sm"[^>]*@click="openEdit\(row\)"/, '编辑用旧版 btn-sm 实心小按钮')
-  assertRowButtonSolid(s, 'removeMenu')
+  assert.match(s, /class="btn btn-sm btn-danger"[^>]*@click="removeMenu\(row\)"/, '删除用旧版 btn-sm btn-danger')
+  assert.doesNotMatch(s, /el-button[^>]*@click="openEdit/, '行内不再用 EP 按钮')
+  assert.match(s, /window\.confirm\(`确定删除菜单/, '删除确认走原生 confirm 对齐旧版')
 })

admin-frontend-vue/tests/align-column-width.test.ts

@@ -7,9 +7,6 @@ import { readSource } from './helpers.ts'
 // 例外：DuplicateCheckPage 不动；dialog/表单的 width 不属于表格列。
 
 const PAGES = [
-  'src/pages/account/GroupsPage.vue',
-  'src/pages/account/MenusPage.vue',
-  'src/pages/account/UsersPage.vue',
   'src/pages/asin/AsinInvalidPage.vue',
   'src/pages/asin/ProductCategoryPage.vue',
   'src/pages/asin/QueryAsinPage.vue',
@@ -56,6 +53,15 @@ test('align_column_width_boundary_empty_input', () => {
   const dedupe = readSource('src/pages/asin/DedupeRegistryPage.vue')
   assert.equal(/el-table-column/.test(dedupe), false, '去重汇总已像素复刻 admin panel-dedupe-total-data 原生表格，不再有 el-table-column')
   assert.match(dedupe, /class="table-scroll dedupe-table-scroll"/, '去重汇总用原生 .table-scroll 表格')
+  const users = readSource('src/pages/account/UsersPage.vue')
+  assert.equal(/el-table-column/.test(users), false, '用户管理已像素复刻 admin panel-users 原生表格，不再有 el-table-column')
+  assert.match(users, /class="table-scroll user-table-scroll"/, '用户管理用原生 .table-scroll 表格')
+  const menus = readSource('src/pages/account/MenusPage.vue')
+  assert.equal(/el-table-column/.test(menus), false, '菜单配置已像素复刻 admin panel-columns 原生表格，不再有 el-table-column')
+  assert.match(menus, /class="table-scroll columns-table-scroll"/, '菜单配置用原生 .table-scroll 表格')
+  const groups = readSource('src/pages/account/GroupsPage.vue')
+  assert.equal(/el-table-column/.test(groups), false, '分组管理已像素复刻 admin panel-group-manage 原生表格，不再有 el-table-column')
+  assert.match(groups, /class="table-scroll"/, '分组管理用原生 .table-scroll 表格')
 })
 
 test('align_column_width_dependency_failure_returns_actionable_message', () => {

admin-frontend-vue/tests/align-pagination.test.ts

@@ -7,8 +7,8 @@ import { readSource } from './helpers.ts'
 // 菜单管理是树结构（非列表），商品类目树用懒加载+加载更多节点，均豁免。
 
 test('align_pagination_normal_primary_path', () => {
+  // 分组管理已像素复刻旧版(panel-group-manage 无分页)，豁免；其余列表保留分页。
   for (const page of [
-    'src/pages/account/GroupsPage.vue',
     'src/pages/records/RecordsSoftwareVersionPage.vue',
     'src/pages/asin/ProductCategoryPage.vue',
   ]) {
@@ -20,7 +20,6 @@ test('align_pagination_normal_primary_path', () => {
 test('align_pagination_normal_variant_input', () => {
   // 分页组件需含上一页/下一页（prev/next），中文文案由全局 zh-cn locale 渲染。
   for (const page of [
-    'src/pages/account/GroupsPage.vue',
     'src/pages/records/RecordsSoftwareVersionPage.vue',
     'src/pages/asin/ProductCategoryPage.vue',
   ]) {
@@ -30,8 +29,8 @@ test('align_pagination_normal_variant_input', () => {
 })
 
 test('align_pagination_boundary_empty_input', () => {
-  // 分组/软件版本为全量拉取，走客户端切片分页（computed 按 page/pageSize 切）。
+  // 软件版本为全量拉取，走客户端切片分页（computed 按 page/pageSize 切）。
-  for (const page of ['src/pages/account/GroupsPage.vue', 'src/pages/records/RecordsSoftwareVersionPage.vue']) {
+  for (const page of ['src/pages/records/RecordsSoftwareVersionPage.vue']) {
     const src = readSource(page)
     assert.match(src, /pagedRows|pageRows|pageItems|pagedItems/, `${page} 应有客户端分页切片`)
     assert.match(src, /:data="paged/, `${page} 表格应绑定分页后的数据`)
@@ -46,13 +45,18 @@ test('align_pagination_boundary_single_item', () => {
 })
 
 test('align_pagination_repeated_operation_is_idempotent', () => {
-  // 已有分页的页面（12 页）保持原样，不被破坏。
+  // 已有分页的页面保持原样，不被破坏；已像素复刻(自绘旧式分页)的页单独断言。
   for (const page of [
-    'src/pages/account/UsersPage.vue',
     'src/pages/asin/AsinInvalidPage.vue',
     'src/pages/shop/ShopManagePage.vue',
   ]) {
     const src = readSource(page)
     assert.match(src, /el-pagination/, `${page} 既有分页保留`)
   }
+  const users = readSource('src/pages/account/UsersPage.vue')
+  assert.match(users, /class="pagination"/, '用户页已像素复刻，用旧式分页容器')
+  assert.doesNotMatch(users, /el-pagination/, '用户页不再用 EP 分页')
+  const groups = readSource('src/pages/account/GroupsPage.vue')
+  assert.doesNotMatch(groups, /el-pagination/, '分组管理已像素复刻旧版(panel-group-manage 无分页)')
+  assert.doesNotMatch(groups, /pagedRows/, '分组管理全量渲染无客户端切片')
 })