From c200fa4f32e054769d0596ad51e2672a2d13e7bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E8=87=AA=E8=BE=BE?= <980324341@qq.com>
Date: Sun, 6 Sep 2026 22:28:26 +0800
Subject: [PATCH] =?UTF-8?q?align(=E5=8E=BB=E9=87=8D=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=B1=87=E6=80=BB=C2=B7=E5=83=8F=E7=B4=A0=E5=A4=8D=E5=88=BB?=
 =?UTF-8?q?=E6=A0=B7=E5=8A=9E2):=20DedupeRegistryPage=20=E9=87=8D=E5=86=99?=
 =?UTF-8?q?=E4=B8=BA=E8=87=AA=E7=BB=98=E5=A4=8D=E5=88=BB=20admin=20panel-d?=
 =?UTF-8?q?edupe-total-data(=E5=88=86=E7=BB=84=E6=91=98=E8=A6=81chips/?=
 =?UTF-8?q?=E5=8F=8C=E8=A1=8C=E7=AD=9B=E9=80=89grid/=E9=A1=B5=E5=A4=B4?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E7=BB=84/=E6=97=A7=E5=BC=8F=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BCbtn-sm=E8=A1=8C=E6=93=8D=E4=BD=9C/=E7=BC=96=E8=BE=91+?=
 =?UTF-8?q?=E5=AF=BC=E5=85=A5modal/=E5=AF=BC=E5=87=BA=E7=AD=89=E5=BE=85?=
 =?UTF-8?q?=E9=81=AE=E7=BD=A9/=E6=97=A7=E5=BC=8F=E5=88=86=E9=A1=B5)?=
 =?UTF-8?q?=EF=BC=9B=E5=88=A0=E9=99=A4=E7=A1=AE=E8=AE=A4=E6=94=B9=E5=8E=9F?=
 =?UTF-8?q?=E7=94=9Fconfirm=E5=AF=B9=E9=BD=90=E6=97=A7=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/asin/DedupeRegistryPage.vue     | 777 +++++++++++++-----
 .../tests/align-asin-row-buttons.test.ts      |   8 +-
 .../tests/align-column-width.test.ts          |   4 +-
 3 files changed, 585 insertions(+), 204 deletions(-)

diff --git a/admin-frontend-vue/src/pages/asin/DedupeRegistryPage.vue b/admin-frontend-vue/src/pages/asin/DedupeRegistryPage.vue
index c0efe07d..e0d7e1c7 100644
--- a/admin-frontend-vue/src/pages/asin/DedupeRegistryPage.vue
+++ b/admin-frontend-vue/src/pages/asin/DedupeRegistryPage.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { formatDateTime } from '@/utils/datetime'
-/** 数据去重总数据(registry)：对齐 admin panel-dedupe-total-data —— 顶部数据权限分组汇总卡、扩充筛选(用户名/日期/分组)、
- *  行编辑/删除、新增/删除导入(轮询)、导出(等待遮罩+已等待秒数)。 */
+/** 数据去重总数据(registry) · 像素复刻旧版 admin.html panel-dedupe-total-data（自绘：分组摘要 + 双行筛选 + 旧式表格/分页 + 编辑/导入弹窗 + 导出等待遮罩）。
+ *   script 逻辑沿用现有 Vue 实现（查询/编辑/删除/导入轮询/导出秒表）。 */
 import { computed, onMounted, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import { useAdminSessionStore } from '@/stores/admin-session'
 import {
   fetchDedupeTotalList,
@@ -30,14 +30,16 @@ const loading = ref(false)
 const rows = ref<DedupeTotalItem[]>([])
 const total = ref(0)
 const page = ref(1)
-const pageSize = ref(10)
+const pageSize = 15
 const filter = reactive(createDedupeTotalFilterState())
 const groups = ref<DedupeGroupOption[]>([])
+const jumpPage = ref('')
 
 /** 页顶数据权限分组汇总（对齐 admin.js renderDedupeGroupSummary）。 */
 const groupSummary = computed(() =>
   dedupeGroupSummaryOf(groups.value, session.user?.id ?? null, session.user?.role || ''),
 )
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
 
 const editVisible = ref(false)
 const editSaving = ref(false)
@@ -78,7 +80,7 @@ function stopExportWait(): void {
 async function load(): Promise<void> {
   loading.value = true
   try {
-    const result = await fetchDedupeTotalList(toDedupeListParams(filter, page.value, pageSize.value))
+    const result = await fetchDedupeTotalList(toDedupeListParams(filter, page.value, pageSize))
     rows.value = result.items
     total.value = result.total
     if (result.page >= 1) page.value = result.page
@@ -94,12 +96,21 @@ function apply(): void {
   void load()
 }
 
-function reset(): void {
-  Object.assign(filter, createDedupeTotalFilterState())
-  page.value = 1
+function changePage(next: number): void {
+  if (next < 1 || next > totalPages.value) return
+  page.value = next
   void load()
 }
 
+function goJump(): void {
+  const n = Number.parseInt(jumpPage.value, 10)
+  if (Number.isNaN(n)) {
+    ElMessage.warning('请输入页码')
+    return
+  }
+  changePage(n)
+}
+
 function openEdit(row: DedupeTotalItem): void {
   editTarget.value = row
   editValue.value = row.dataValue
@@ -133,19 +144,14 @@ async function saveEdit(): Promise<void> {
 }
 
 async function removeRow(row: DedupeTotalItem): Promise<void> {
+  // 对齐旧版：浏览器原生 confirm 确认后删除。
+  if (!window.confirm(`确定删除总数据“${row.dataValue}”吗？`)) return
   try {
-    await ElMessageBox.confirm(`确定删除总数据“${row.dataValue}”吗？`, '删除总数据', {
-      type: 'warning',
-      confirmButtonText: '确定删除',
-      cancelButtonText: '取消',
-    })
     await deleteDedupeTotal(row.id)
     ElMessage.success('删除成功')
     await load()
   } catch (error) {
-    if (error !== 'cancel' && error !== 'close') {
-      ElMessage.error(error instanceof Error ? error.message : '删除失败')
-    }
+    ElMessage.error(error instanceof Error ? error.message : '删除失败')
   }
 }
 
@@ -208,15 +214,7 @@ async function submitImport(): Promise<void> {
   const file = importFile.value as File
   const groupId = importGroupId.value as number
   if (importMode.value === 'delete') {
-    try {
-      await ElMessageBox.confirm('确定按 Excel 中的 ASIN 批量删除匹配的总数据吗？', '删除导入', {
-        type: 'warning',
-        confirmButtonText: '确定删除',
-        cancelButtonText: '取消',
-      })
-    } catch {
-      return
-    }
+    if (!window.confirm('确定按 Excel 中的 ASIN 批量删除匹配的总数据吗？')) return
   }
   const mode = importMode.value
   importRunning.value = true
@@ -288,153 +286,193 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page-stack">
-    <div class="page-heading">
-      <div>
-        <h2>数据去重总数据</h2>
-        <p>去重总数据的 ASIN 值台账，可按 ASIN/用户名/分组/国家/日期筛选，支持 Excel 导入与导出。</p>
+  <div class="dedupe-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="groupSummary.kind === 'all'">
+              <span class="dedupe-group-summary-chip">全部分组 · {{ groupSummary.count }} 个</span>
+            </template>
+            <span v-else-if="groupSummary.kind === 'none'" class="no-group">未加入分组</span>
+            <template v-else>
+              <span v-for="chip in groupSummary.chips" :key="chip.name" class="dedupe-group-summary-chip" :title="chip.name">
+                {{ chip.name }} · {{ chip.relation }}
+              </span>
+              <span v-if="groupSummary.extra > 0" class="extra-groups">另 {{ groupSummary.extra }} 个</span>
+            </template>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="panel-box">
+      <div class="dedupe-panel-head">
+        <h3>ASIN列表</h3>
+        <div class="dedupe-head-actions">
+          <button class="btn" type="button" @click="openImportAdd">新增导入</button>
+          <button class="btn" type="button" @click="openImportDelete">删除导入</button>
+        </div>
+      </div>
+
+      <div class="dedupe-filter-row">
+        <div class="form-group">
+          <label>ASIN</label>
+          <input v-model="filter.keyword" type="text" placeholder="输入 ASIN" @keyup.enter="apply" />
+        </div>
+        <div class="form-group">
+          <label>用户名（模糊搜索）</label>
+          <input v-model="filter.username" type="text" placeholder="输入用户名" @keyup.enter="apply" />
+        </div>
+        <div class="form-group">
+          <label>分组</label>
+          <select v-model="filter.groupId">
+            <option :value="null">全部分组</option>
+            <option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label>国家</label>
+          <select v-model="filter.country">
+            <option value="">全部国家</option>
+            <option v-for="code in ASIN_COUNTRY_CODES" :key="code" :value="code">{{ asinCountryLabel(code) }}</option>
+          </select>
+        </div>
+        <div class="dedupe-filter-actions">
+          <button class="btn" type="button" @click="apply">查询</button>
+        </div>
+      </div>
+
+      <div class="dedupe-filter-date-row">
+        <div class="form-group">
+          <label>开始日期</label>
+          <input v-model="filter.startDate" type="date" />
+        </div>
+        <div class="form-group">
+          <label>结束日期</label>
+          <input v-model="filter.endDate" type="date" />
+        </div>
+        <div class="dedupe-filter-actions">
+          <button class="btn btn-secondary" type="button" :disabled="exporting" @click="doExport">
+            {{ exporting ? '导出中...' : '导出 XLSX' }}
+          </button>
+        </div>
+      </div>
+
+      <div class="table-scroll dedupe-table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>ASIN</th>
+              <th>国家</th>
+              <th>用户名</th>
+              <th>分组</th>
+              <th>创建时间</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="rows.length">
+              <tr v-for="row in rows" :key="row.id">
+                <td>{{ row.id }}</td>
+                <td class="mono-cell">{{ row.dataValue }}</td>
+                <td>{{ asinCountryLabel(row.country || '') }}</td>
+                <td>{{ row.username || '-' }}</td>
+                <td>{{ row.groupName || '未分组' }}</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" @click="removeRow(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>
+
+      <div class="pagination">
+        <span class="page-total">共 {{ total }} 条</span>
+        <button type="button" :disabled="page <= 1" @click="changePage(page - 1)">上一页</button>
+        <span class="page-cur">第 {{ page }} / {{ totalPages }} 页</span>
+        <button type="button" :disabled="page >= totalPages" @click="changePage(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>
+
+    <div v-if="editVisible" class="modal-mask" @click.self="editVisible = false">
+      <div class="modal">
+        <h3>编辑ASIN</h3>
+        <div class="form-group">
+          <label>ASIN</label>
+          <input v-model="editValue" type="text" placeholder="请输入总数据值" />
+        </div>
+        <div class="form-group">
+          <label>分组</label>
+          <select v-model="editGroupId">
+            <option disabled :value="null">请选择分组</option>
+            <option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</option>
+          </select>
+        </div>
+        <div class="modal-actions">
+          <button class="btn" type="button" :disabled="editSaving" @click="saveEdit">保存</button>
+          <button class="btn btn-secondary" type="button" @click="editVisible = false">取消</button>
+        </div>
       </div>
     </div>
 
-    <el-card shadow="never" class="group-summary-card">
-      <div class="group-summary">
-        <span class="group-summary-title">数据权限分组</span>
-        <div class="group-summary-body">
-          <template v-if="groupSummary.kind === 'all'">
-            <span class="summary-chip">全部分组 · {{ groupSummary.count }} 个</span>
-          </template>
-          <span v-else-if="groupSummary.kind === 'none'" class="dim">未加入分组</span>
-          <template v-else>
-            <span v-for="chip in groupSummary.chips" :key="chip.name" class="summary-chip" :title="chip.name">
-              {{ chip.name }} · {{ chip.relation }}
-            </span>
-            <span v-if="groupSummary.extra > 0" class="dim">另 {{ groupSummary.extra }} 个</span>
-          </template>
-        </div>
-      </div>
-    </el-card>
-
-    <el-card shadow="never">
-      <div class="filter-grid">
-        <div class="f-item">
-          <label>ASIN / 关键字</label>
-          <el-input v-model="filter.keyword" placeholder="模糊搜索值" clearable @keyup.enter="apply" />
-        </div>
-        <div class="f-item">
-          <label>用户名（上传人）</label>
-          <el-input v-model="filter.username" placeholder="输入用户名关键字" clearable @keyup.enter="apply" />
-        </div>
-        <div class="f-item">
-          <label>分组</label>
-          <el-select v-model="filter.groupId" placeholder="全部分组" clearable>
-            <el-option v-for="group in groups" :key="group.id" :label="group.name" :value="group.id" />
-          </el-select>
-        </div>
-        <div class="f-item">
-          <label>国家</label>
-          <el-select v-model="filter.country" placeholder="全部" clearable>
-            <el-option v-for="code in ASIN_COUNTRY_CODES" :key="code" :label="asinCountryLabel(code)" :value="code" />
-          </el-select>
-        </div>
-        <div class="f-item">
-          <label>开始日期</label>
-          <el-date-picker v-model="filter.startDate" type="date" value-format="YYYY-MM-DD" placeholder="开始日期" style="width: 100%" />
-        </div>
-        <div class="f-item">
-          <label>结束日期</label>
-          <el-date-picker v-model="filter.endDate" type="date" value-format="YYYY-MM-DD" placeholder="结束日期" style="width: 100%" />
-        </div>
-        <div class="f-item btn-row">
-          <el-button type="primary" @click="apply">查询</el-button>
-          <el-button @click="reset">重置</el-button>
-        </div>
-      </div>
-    </el-card>
-
-    <el-card shadow="never">
-      <div class="table-toolbar">
-        <el-button type="primary" @click="openImportAdd">新增导入</el-button>
-        <el-button @click="openImportDelete">删除导入</el-button>
-        <el-button :loading="exporting" @click="doExport">导出</el-button>
-      </div>
-      <el-table v-loading="loading" :data="rows" stripe border>
-        <el-table-column prop="dataValue" label="ASIN" min-width="170" />
-        <el-table-column label="国家" min-width="100" align="center">
-          <template #default="{ row }">{{ asinCountryLabel((row as DedupeTotalItem).country || '') }}</template>
-        </el-table-column>
-        <el-table-column prop="username" label="用户名" min-width="140" />
-        <el-table-column label="分组" min-width="150">
-          <template #default="{ row }">{{ (row as DedupeTotalItem).groupName || '未分组' }}</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 label="操作" min-width="150" fixed="right">
-          <template #default="{ row }">
-            <el-button size="small" type="primary" @click="openEdit(row as DedupeTotalItem)">编辑</el-button>
-            <el-button size="small" type="danger" @click="removeRow(row as DedupeTotalItem)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="table-footer">
-        <span>共 {{ total.toLocaleString() }} 条</span>
-        <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="(p: number) => { page = p; void load() }"
-          @size-change="() => { page = 1; void load() }"
-        />
-      </div>
-    </el-card>
-
-    <el-dialog v-model="editVisible" title="编辑总数据" width="480px">
-      <el-form label-position="top">
-        <el-form-item label="总数据值（ASIN）">
-          <el-input v-model="editValue" placeholder="请输入总数据值" />
-        </el-form-item>
-        <el-form-item label="分组">
-          <el-select v-model="editGroupId" placeholder="请选择分组" style="width: 100%">
-            <el-option v-for="group in groups" :key="group.id" :label="group.name" :value="group.id" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="editVisible = false">取消</el-button>
-        <el-button type="primary" :loading="editSaving" @click="saveEdit">保存</el-button>
-      </template>
-    </el-dialog>
-
-    <el-dialog v-model="importVisible" :title="importMode === 'add' ? '导入去重数据' : '删除导入（按 Excel 批量删除）'" width="520px">
-      <el-form label-position="top">
-        <el-form-item label="数据权限分组">
-          <el-select v-model="importGroupId" placeholder="请选择分组" style="width: 100%">
-            <el-option v-for="group in groups" :key="group.id" :label="group.name" :value="group.id" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="Excel 文件">
+    <div v-if="importVisible" class="modal-mask" @click.self="importVisible = false">
+      <div class="modal">
+        <h3>{{ importMode === 'add' ? '新增导入' : '删除导入' }}</h3>
+        <div class="form-group">
+          <label>{{ importMode === 'add' ? '上传 Excel 文件（读取 ASIN 列，可选 国家 列）' : '上传 Excel 文件（读取 ASIN 列）' }}</label>
           <input type="file" accept=".xlsx,.xls" :disabled="importRunning" @change="onPickFile" />
-          <p class="import-tip">{{ importMode === 'add' ? '上传 Excel 按 ASIN 新增到所选分组，仅支持 .xlsx/.xls。' : 'Excel 第一列 ASIN 将按分组批量删除匹配总数据，仅支持 .xlsx/.xls。' }}</p>
-        </el-form-item>
-        <el-alert v-if="importProgress" :title="importProgress" type="info" :closable="false" show-icon />
-      </el-form>
-      <template #footer>
-        <el-button :disabled="importRunning" @click="importVisible = false">取消</el-button>
-        <el-button type="primary" :loading="importRunning" @click="submitImport">
-          {{ importMode === 'add' ? '开始导入' : '开始删除导入' }}
-        </el-button>
-      </template>
-    </el-dialog>
+        </div>
+        <div class="form-group">
+          <label>分组</label>
+          <select v-model="importGroupId" :disabled="importRunning">
+            <option disabled :value="null">请选择分组</option>
+            <option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</option>
+          </select>
+        </div>
+        <div v-if="importProgress" class="progress-wrap">
+          <div class="progress-text">{{ importProgress }}</div>
+        </div>
+        <div class="modal-actions">
+          <button
+            class="btn"
+            :class="{ 'btn-danger': importMode === 'delete' }"
+            type="button"
+            :disabled="importRunning"
+            @click="submitImport"
+          >
+            {{ importMode === 'add' ? '上传并导入' : '上传并删除' }}
+          </button>
+          <button class="btn btn-secondary" type="button" :disabled="importRunning" @click="importVisible = false">取消</button>
+        </div>
+      </div>
+    </div>
 
-    <div v-if="exportWaitVisible" class="export-wait-mask" role="dialog" aria-modal="true" aria-labelledby="dedupe-export-wait-title">
-      <div class="export-wait">
-        <span class="wait-spinner" aria-hidden="true"></span>
+    <div v-if="exportWaitVisible" class="dedupe-export-wait-mask" role="dialog" aria-modal="true" aria-labelledby="dedupe-export-wait-title">
+      <div class="dedupe-export-wait">
+        <span class="request-spinner" aria-hidden="true"></span>
         <div>
-          <div class="export-wait-title" id="dedupe-export-wait-title">正在生成导出文件</div>
-          <div class="export-wait-detail">数据量较大，请耐心等待并保持页面打开。已等待 {{ exportWaitSeconds }} 秒</div>
+          <div class="dedupe-export-wait-title" id="dedupe-export-wait-title">正在生成导出文件</div>
+          <div class="dedupe-export-wait-detail">
+            数据量较大，请耐心等待并保持页面打开。已等待 <span>{{ exportWaitSeconds }}</span> 秒
+          </div>
         </div>
       </div>
     </div>
@@ -442,60 +480,399 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.page-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
-.heading-actions { display: flex; gap: 8px; flex: none; }
-.group-summary-card { margin-bottom: 12px; }
-.group-summary { display: flex; align-items: flex-start; gap: 14px; }
-.group-summary-title { flex: none; color: var(--el-text-color-secondary); font-size: 12.5px; line-height: 24px; }
-.group-summary-body { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
-.summary-chip {
-  display: inline-block;
-  padding: 2px 10px;
-  border-radius: 999px;
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-  font-size: 12.5px;
-  line-height: 20px;
+/* 像素复刻旧版 admin.html panel-dedupe-total-data（蓝白末层样式）。 */
+.dedupe-view {
+  font-family: inherit;
+  color: var(--c-text, #24384d);
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
 }
-.dim { color: var(--el-text-color-secondary); font-size: 12.5px; }
-.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
-.f-item { display: flex; flex-direction: column; gap: 6px; width: 200px; }
-.f-item label { color: var(--el-text-color-secondary); font-size: 12px; }
-.f-item.btn-row { flex-direction: row; align-items: flex-end; gap: 8px; width: auto; }
-.table-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; }
-.table-footer span { color: var(--el-text-color-secondary); font-size: 12.5px; }
-.import-tip { margin: 6px 0 0; color: var(--el-text-color-secondary); font-size: 12px; line-height: 1.6; }
-.export-wait-mask {
+.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);
+}
+h3 {
+  margin: 0 0 16px;
+  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: 18px;
+  padding: 0 0 14px;
+  border-bottom: 1px solid #edf0f5;
+}
+.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;
+  color: #24384d;
+}
+.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;
+}
+.dedupe-panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.dedupe-panel-head h3 {
+  margin: 0;
+}
+.dedupe-head-actions {
+  display: flex;
+  gap: 10px;
+}
+.dedupe-filter-row {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(160px, 1fr)) auto;
+  gap: 12px;
+  align-items: end;
+  margin-bottom: 16px;
+}
+.dedupe-filter-row .form-group {
+  min-width: 0;
+}
+.dedupe-filter-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  white-space: nowrap;
+}
+.dedupe-filter-date-row {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+.dedupe-filter-date-row .form-group {
+  flex: 0 0 200px;
+  min-width: 0;
+}
+.dedupe-filter-date-row .dedupe-filter-actions {
+  margin-left: auto;
+}
+.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);
+}
+.form-group input[type="file"] {
+  background: #ffffff;
+  padding: 6px 10px;
+}
+.form-group input[type="date"] {
+  color-scheme: light;
+}
+.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.6;
+}
+.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;
+}
+.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;
+}
+.dedupe-table-scroll > table {
+  min-width: 900px;
+}
+.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;
+}
+.mono-cell {
+  font-family: "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;
+  font-size: 12.5px;
+}
+.ops-cell {
+  white-space: nowrap;
+  text-align: right;
+}
+.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-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;
+}
+.modal-mask {
   position: fixed;
   inset: 0;
   z-index: 3000;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(24, 29, 43, 0.45);
-  backdrop-filter: blur(3px);
+  padding: 40px 20px;
+  background: rgba(45, 66, 86, 0.36);
+  backdrop-filter: blur(6px);
 }
-.export-wait {
+.modal {
+  display: flex;
+  flex-direction: column;
+  width: min(560px, 100%);
+  max-height: 84vh;
+  padding: 22px 24px;
+  border: 1px solid #c7d7e5;
+  border-radius: 14px;
+  background: #ffffff;
+  box-shadow: 0 22px 60px rgba(39, 67, 94, 0.2);
+  overflow-y: auto;
+}
+.modal .form-group {
+  margin-bottom: 14px;
+}
+.modal-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 16px;
+}
+.progress-wrap {
+  margin-top: 12px;
+}
+.progress-text {
+  font-size: 12.5px;
+  color: #5b6f83;
+  line-height: 1.6;
+}
+.dedupe-export-wait-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 3100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(45, 66, 86, 0.36);
+  backdrop-filter: blur(6px);
+}
+.dedupe-export-wait {
   display: flex;
   align-items: center;
   gap: 14px;
-  background: var(--el-bg-color);
-  border-radius: 14px;
   padding: 22px 28px;
-  box-shadow: 0 12px 40px -12px rgba(39, 67, 94, 0.35);
+  border: 1px solid #c7d7e5;
+  border-radius: 14px;
+  background: #ffffff;
+  box-shadow: 0 22px 60px rgba(39, 67, 94, 0.2);
 }
-.wait-spinner {
+.request-spinner {
   width: 26px;
   height: 26px;
   flex: none;
-  border: 3px solid var(--el-color-primary-light-7);
-  border-top-color: var(--el-color-primary);
+  border: 3px solid #d5e3ef;
+  border-top-color: #5f85ad;
   border-radius: 50%;
   animation: dedupe-spin 0.9s linear infinite;
 }
 @keyframes dedupe-spin {
   to { transform: rotate(360deg); }
 }
-.export-wait-title { font-size: 15px; font-weight: 600; }
-.export-wait-detail { margin-top: 4px; color: var(--el-text-color-secondary); font-size: 12.5px; }
+.dedupe-export-wait-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #24384d;
+}
+.dedupe-export-wait-detail {
+  margin-top: 4px;
+  font-size: 12.5px;
+  color: #5b6f83;
+}
 </style>
diff --git a/admin-frontend-vue/tests/align-asin-row-buttons.test.ts b/admin-frontend-vue/tests/align-asin-row-buttons.test.ts
index b9ad2ded..41d83f08 100644
--- a/admin-frontend-vue/tests/align-asin-row-buttons.test.ts
+++ b/admin-frontend-vue/tests/align-asin-row-buttons.test.ts
@@ -15,10 +15,12 @@ function assertRowButtonSolid(source: string, action: string) {
   assert.doesNotMatch(source, NO_MODIFIER(action, 'text'), `${action} 不再 text`)
 }
 
-test('align_dedupe_registry_row_buttons_solid', () => {
+test('align_dedupe_registry_row_buttons_old_btn', () => {
   const s = readSource('src/pages/asin/DedupeRegistryPage.vue')
-  assertRowButtonSolid(s, 'openEdit')
-  assertRowButtonSolid(s, 'removeRow')
+  assert.match(s, /class="btn btn-sm"[^>]*@click="openEdit\(row\)"/, '编辑用旧版 btn-sm 实心小按钮')
+  assert.match(s, /class="btn btn-sm btn-danger"[^>]*@click="removeRow\(row\)"/, '删除用旧版 btn-sm btn-danger')
+  assert.doesNotMatch(s, /el-button/, '去重汇总已自绘，无 EP 按钮')
+  assert.match(s, /window\.confirm\(`确定删除总数据/, '删除确认文案对齐旧版（原生 confirm）')
 })
 
 test('align_invalid_asin_row_buttons_solid', () => {
diff --git a/admin-frontend-vue/tests/align-column-width.test.ts b/admin-frontend-vue/tests/align-column-width.test.ts
index 9fce97bf..fb358593 100644
--- a/admin-frontend-vue/tests/align-column-width.test.ts
+++ b/admin-frontend-vue/tests/align-column-width.test.ts
@@ -11,7 +11,6 @@ const PAGES = [
   'src/pages/account/MenusPage.vue',
   'src/pages/account/UsersPage.vue',
   'src/pages/asin/AsinInvalidPage.vue',
-  'src/pages/asin/DedupeRegistryPage.vue',
   'src/pages/asin/ProductCategoryPage.vue',
   'src/pages/asin/QueryAsinPage.vue',
   'src/pages/asin/SkipPricePage.vue',
@@ -54,6 +53,9 @@ test('align_column_width_boundary_empty_input', () => {
   assert.equal(/el-table-column/.test(hist), false, '生成记录已像素复刻 admin panel-history 原生表格，不再有 el-table-column')
   assert.match(hist, /class="table-scroll history-table-scroll"/, '生成记录用原生 .table-scroll 表格')
   assert.match(hist, /<th[^>]*>结果预览<\/th>/, '原生表含结果预览列')
+  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 表格')
 })
 
 test('align_column_width_dependency_failure_returns_actionable_message', () => {