diff --git a/admin-frontend-vue/src/pages/asin/AsinInvalidPage.vue b/admin-frontend-vue/src/pages/asin/AsinInvalidPage.vue
index a1aff63e..51a5d249 100644
--- a/admin-frontend-vue/src/pages/asin/AsinInvalidPage.vue
+++ b/admin-frontend-vue/src/pages/asin/AsinInvalidPage.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { formatDateTime } from '@/utils/datetime'
-/** 不符合 ASIN（品牌数据库）：分页 + 手动新增/编辑/删除。 */
-import { computed, onMounted, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+/** 品牌数据库(不符合ASIN)页 · 像素复刻旧版 admin.html panel-invalid-asin-data（自绘：面板头+新增、筛选、旧式表格/分页、原生 confirm 删除）。
+ *   script 逻辑沿用现有 Vue 实现（分组锁定/来源 AUTO 编辑隐藏分组）；弹窗保留现有组件。 */
+import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
 import { useAdminSessionStore } from '@/stores/admin-session'
 import { createInvalidAsin, deleteInvalidAsin, fetchInvalidAsinPage, updateInvalidAsin } from '../invalidasin/invalid-asin-api.ts'
 import type { InvalidAsinItem } from '../invalidasin/invalid-asin-model.ts'
@@ -16,8 +17,10 @@ const loading = ref(false)
 const rows = ref<InvalidAsinItem[]>([])
 const total = ref(0)
 const page = ref(1)
-const pageSize = ref(10)
+const pageSize = 15
 const groups = ref<ShopGroupOption[]>([])
+const jumpPage = ref('')
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
 
 const filter = reactive({ dataValue: '', brand: '', groupId: null as number | null })
 
@@ -55,7 +58,7 @@ async function load() {
   try {
     const result = await fetchInvalidAsinPage({
       page: page.value,
-      pageSize: pageSize.value,
+      pageSize,
       dataValue: filter.dataValue.trim() || undefined,
       brand: filter.brand.trim() || undefined,
       groupId: filter.groupId,
@@ -75,15 +78,21 @@ function apply() {
   load()
 }
 
-function reset() {
-  filter.dataValue = ''
-  filter.brand = ''
-  // 非超管重置不解除分组锁定。
-  filter.groupId = isSuperAdmin.value ? null : lockedGroupId.value
-  page.value = 1
+function changePage(next: number) {
+  if (next < 1 || next > totalPages.value) return
+  page.value = next
   load()
 }
 
+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))
+}
+
 function openCreate() {
   editingId.value = null
   editingSource.value = ''
@@ -128,11 +137,8 @@ async function submit() {
 }
 
 async function remove(row: InvalidAsinItem) {
-  try {
-    await ElMessageBox.confirm(invalidAsinDeleteText(row), '删除', { type: 'warning' })
-  } catch {
-    return
-  }
+  // 对齐旧版：原生 confirm。
+  if (!window.confirm(invalidAsinDeleteText(row))) return
   try {
     await deleteInvalidAsin(row.id)
     ElMessage.success('已删除')
@@ -142,6 +148,10 @@ async function remove(row: InvalidAsinItem) {
   }
 }
 
+watch(isSuperAdmin, () => {
+  if (isSuperAdmin.value) filter.groupId = null
+})
+
 onMounted(() => {
   loadGroups()
   load()
@@ -149,69 +159,87 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page-stack">
-    <div class="page-heading">
-      <div>
-        <h2>不符合 ASIN 数据</h2>
-        <p>管理命中"不符合 ASIN"的品牌数据库记录。</p>
+  <div class="invalid-view">
+    <section class="panel-box">
+      <div class="invalid-head">
+        <h3>品牌数据列表</h3>
+        <button class="btn" type="button" @click="openCreate">新增</button>
       </div>
-    </div>
 
-    <el-card shadow="never" style="margin-bottom: 14px">
-      <div class="filter-grid">
-        <div class="f-item">
+      <div class="form-row invalid-filter-row">
+        <div class="form-group" style="min-width: 200px">
           <label>ASIN</label>
-          <el-input v-model="filter.dataValue" placeholder="精确/模糊搜索ASIN" clearable @keyup.enter="apply" />
+          <input v-model="filter.dataValue" type="text" placeholder="输入 ASIN" @keyup.enter="apply" />
         </div>
-        <div class="f-item">
+        <div class="form-group" style="min-width: 200px">
           <label>品牌</label>
-          <el-input v-model="filter.brand" placeholder="品牌模糊" clearable @keyup.enter="apply" />
+          <input v-model="filter.brand" type="text" placeholder="输入品牌" @keyup.enter="apply" />
         </div>
-        <div class="f-item">
+        <div class="form-group" style="min-width: 180px">
           <label>分组</label>
-          <el-select v-model="filter.groupId" placeholder="全部分组" clearable :disabled="!isSuperAdmin">
-            <el-option v-for="group in groupOptions" :key="group.id" :label="group.groupName" :value="group.id" />
-          </el-select>
-        </div>
-        <div class="f-item btn-row">
-          <el-button type="primary" @click="apply">查询</el-button>
-          <el-button @click="reset">重置</el-button>
+          <select v-model="filter.groupId" :disabled="!isSuperAdmin">
+            <option :value="null">全部分组</option>
+            <option v-for="group in groupOptions" :key="group.id" :value="group.id">{{ group.groupName }}</option>
+          </select>
         </div>
+        <button class="btn" type="button" @click="apply">查询</button>
       </div>
-    </el-card>
 
-    <el-card shadow="never">
-      <div class="table-toolbar">
-        <el-button type="primary" @click="openCreate">新增</el-button>
+      <div class="table-scroll invalid-asin-table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 70px">ID</th>
+              <th style="width: 170px">ASIN</th>
+              <th style="width: 150px">品牌</th>
+              <th style="width: 140px">分组</th>
+              <th style="width: 110px">来源</th>
+              <th style="width: 170px">创建时间</th>
+              <th style="width: 150px">操作</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>{{ row.brand || '—' }}</td>
+                <td>{{ row.groupName || '未分组' }}</td>
+                <td>
+                  <span class="source-text" :class="{ 'is-auto': row.recordSource !== 'MANUAL' }">
+                    {{ recordSourceLabel(row.recordSource) }}
+                  </span>
+                </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="remove(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="rows" stripe border>
-        <el-table-column prop="dataValue" label="ASIN" min-width="160" />
-        <el-table-column prop="brand" label="品牌" min-width="140">
-          <template #default="{ row }">{{ (row as InvalidAsinItem).brand || '—' }}</template>
-        </el-table-column>
-        <el-table-column prop="groupName" label="分组" min-width="130" />
-        <el-table-column label="来源" min-width="110">
-          <template #default="{ row }">
-            <el-tag size="small" effect="light" :type="(row as InvalidAsinItem).recordSource !== 'MANUAL' ? 'info' : undefined">
-              {{ recordSourceLabel((row as InvalidAsinItem).recordSource) }}
-            </el-tag>
-          </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 type="primary" size="small" @click="openEdit(row as InvalidAsinItem)">编辑</el-button>
-            <el-button type="danger" size="small" @click="remove(row as InvalidAsinItem)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="table-footer">
-        <span>共 <b>{{ total.toLocaleString() }}</b> 条</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; load() }" @size-change="() => { page = 1; load() }" />
+
+      <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>
-    </el-card>
+    </section>
 
     <el-dialog v-model="dialogVisible" :title="editingId == null ? '新增不符合ASIN' : '编辑不符合ASIN'" width="520px">
       <el-form label-width="110px">
@@ -236,12 +264,231 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.page-heading { display: flex; justify-content: space-between; align-items: center; }
-.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; }
-.table-footer b { color: var(--el-text-color-primary); }
+/* 像素复刻旧版 admin.html panel-invalid-asin-data（蓝白末层）。 */
+.invalid-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;
+}
+.invalid-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.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-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;
+}
+.invalid-asin-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;
+}
+.mono-cell {
+  font-family: "Cascadia Mono", "SF Mono", Consolas, "Courier New", monospace;
+  font-size: 12.5px;
+}
+.source-text {
+  padding: 2px 8px;
+  border-radius: 6px;
+  border: 1px solid #cbd9e6;
+  background: #fff;
+  color: #5b6f83;
+  font-size: 12px;
+}
+.source-text.is-auto {
+  background: #e7f0f8;
+  border-color: #c2d5e6;
+  color: #2f5d8b;
+}
+.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-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>
diff --git a/admin-frontend-vue/src/pages/asin/ProductCategoryPage.vue b/admin-frontend-vue/src/pages/asin/ProductCategoryPage.vue
index 93e98884..4005c31a 100644
--- a/admin-frontend-vue/src/pages/asin/ProductCategoryPage.vue
+++ b/admin-frontend-vue/src/pages/asin/ProductCategoryPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-/** 商品类目：对齐 admin panel-product-categories —— 树节点带 来源/排序/备注 + 行内编辑删除(有子禁用)、
- *  按需懒加载子级(「加载更多 已加载 x/y」)、搜索态独立分页/加载更多、导出、新增/编辑弹窗语义。 */
+/** 商品类目 · 像素复刻旧版 admin.html panel-product-categories（自绘：面板头搜索框组+新增类目 同行、原生树表格[+/−]折叠+懒加载「加载更多 已加载 x/y」、搜索态旧式分页）。
+ *   script 逻辑沿用现有 Vue 实现（懒加载树/编辑删除/导出/弹窗）。 */
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { fetchProductCategoryChildren, searchProductCategories } from './product-category-api.ts'
@@ -54,6 +54,7 @@ function flatten(nodes: ProductCategoryNode[]): ProductCategoryNode[] {
 const allNodes = computed(() => flatten(tree.value))
 const searching = computed(() => (keyword.value || '').trim().length > 0)
 const dialogTitle = computed(() => (editingId.value == null ? '新增商品类目' : '编辑商品类目'))
+const searchTotalPages = computed(() => Math.max(1, Math.ceil(searchTotal.value / PRODUCT_CATEGORY_DEFAULT_PAGE_SIZE)))
 
 /** 拉取根级第一页（对齐 admin.js loadProductCategoryChildren(null) 懒加载根）。 */
 async function loadTree(): Promise<void> {
@@ -171,7 +172,6 @@ async function runSearch(page: number): Promise<void> {
   searchLoading.value = true
   try {
     const result = await searchProductCategories(keyword.value, page, PRODUCT_CATEGORY_DEFAULT_PAGE_SIZE)
-    // 分页换页模式：每页独立展示当前页结果（对齐列表统一分页交互）。
     searchRows.value = result.items
     searchTotal.value = result.total
     searchPage.value = result.page
@@ -197,10 +197,6 @@ function reset(): void {
   void loadTree()
 }
 
-function searchChangePage(p: number): void {
-  void runSearch(p)
-}
-
 function openCreate(parent: ProductCategoryNode | null) {
   editingId.value = null
   Object.assign(draft, createProductCategoryDraft())
@@ -236,21 +232,16 @@ async function removeCategory(node: ProductCategoryNode): Promise<void> {
     ElMessage.warning('存在子类目，不能删除')
     return
   }
+  // 对齐旧版：原生 confirm。
+  if (!window.confirm(`确定删除“${node.name}”？`)) return
   try {
-    await ElMessageBox.confirm(`确定删除“${node.name}”？`, '删除类目', {
-      type: 'warning',
-      confirmButtonText: '确定删除',
-      cancelButtonText: '取消',
-    })
     await deleteProductCategory(node.id)
     ElMessage.success('已删除')
     if (selected.value?.id === node.id) selected.value = null
     if (searching.value) void runSearch(1)
     else void loadTree()
   } catch (error) {
-    if (error !== 'cancel' && error !== 'close') {
-      ElMessage.error(error instanceof Error ? error.message : '删除失败')
-    }
+    ElMessage.error(error instanceof Error ? error.message : '删除失败')
   }
 }
 
@@ -293,169 +284,327 @@ onMounted(loadTree)
 </script>
 
 <template>
-  <div class="page-stack">
-    <div class="page-heading">
-      <div>
-        <h2>商品类目</h2>
-        <p>维护商品类目树与类目名称/说明；有子类目节点不可删除。</p>
-      </div>
-    </div>
-
-    <el-card shadow="never" style="margin-bottom: 14px">
-      <div class="filter-row">
-        <el-input v-model="keyword" placeholder="搜索类目名称、编码或备注" clearable style="width: 280px" @keyup.enter="apply" />
-        <el-button type="primary" @click="apply">搜索</el-button>
-        <el-button @click="reset">清空</el-button>
-      </div>
-    </el-card>
-
-    <el-card v-if="!searching" shadow="never">
-      <div class="table-toolbar">
-        <div class="tb-buttons">
-          <el-button type="primary" @click="openCreate(null)">新增类目</el-button>
-          <el-button :disabled="!selected" @click="openCreate(selected)">新增子类目</el-button>
-          <el-button @click="exportCategories">导出</el-button>
+  <div class="category-view">
+    <section class="panel-box">
+      <div class="category-head">
+        <h3>商品类目</h3>
+        <div class="category-head-tools">
+          <input v-model="keyword" type="text" placeholder="搜索类目名称、编码或备注" class="category-keyword" @keyup.enter="apply" />
+          <button class="btn btn-sm" type="button" @click="apply">搜索</button>
+          <button class="btn btn-sm btn-secondary" type="button" @click="reset">清空</button>
+          <button class="btn btn-sm btn-secondary" type="button" @click="exportCategories">导出</button>
+          <button v-if="selected && !searching" class="btn btn-sm" type="button" @click="openCreate(selected)">新增子类目</button>
+          <button class="btn" type="button" @click="openCreate(null)">新增类目</button>
         </div>
-        <span class="dim">{{ selected ? `已选：${selected.path || selected.name}` : '未选中节点' }}</span>
       </div>
-      <el-table v-loading="loading" :data="treeRows" row-key="node.id" :class="{ 'tree-table': true }">
-        <el-table-column label="类目名称" min-width="320">
-          <template #default="{ row }">
-            <template v-if="isCategoryLoadMoreNode(row.node)">
-              <div class="tree-name-cell">
-                <span class="tree-indent" :style="{ '--indent': `${(row.depth + 1) * 24}px` }"></span>
-                <el-button link size="small" type="primary" :loading="moreLoading(row.node)" @click="loadMoreChildren(row.node)">加载更多</el-button>
-                <span class="dim">已加载 {{ row.node.loadedCount }} / {{ row.node.totalCount }}</span>
-              </div>
-            </template>
-            <div v-else class="tree-name-cell" @click="onNodeClick(row.node as ProductCategoryNode)">
-              <span class="tree-indent" :style="{ '--indent': `${row.depth * 24}px` }"></span>
-              <button
-                type="button"
-                class="tree-node-mark"
-                :class="{ 'is-leaf': (row.node as ProductCategoryNode).childCount <= 0 }"
-                :disabled="(row.node as ProductCategoryNode).childCount <= 0"
-                :title="expandedIds.has((row.node as ProductCategoryNode).id) ? '折叠' : '展开'"
-                @click.stop="toggleExpand(row.node as ProductCategoryNode)"
-              >
-                {{ (row.node as ProductCategoryNode).childCount > 0 ? (expandedIds.has((row.node as ProductCategoryNode).id) ? '−' : '+') : '' }}
-              </button>
-              <strong class="node-name">{{ (row.node as ProductCategoryNode).name }}</strong>
-              <el-tag size="small" effect="plain" :type="(row.node as ProductCategoryNode).isBuiltin ? 'info' : 'success'">
-                {{ productCategorySourceLabel(row.node as ProductCategoryNode) }}
-              </el-tag>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column label="层级路径" min-width="220">
-          <template #default="{ row }">
-            <span class="dim" :title="(row.node as ProductCategoryNode).path">{{ (row.node as ProductCategoryNode).path || (row.node as ProductCategoryNode).name }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="排序" min-width="80">
-          <template #default="{ row }">{{ (row.node as ProductCategoryNode).sortOrder ?? 0 }}</template>
-        </el-table-column>
-        <el-table-column label="来源" min-width="90">
-          <template #default="{ row }">
-            <el-tag size="small" effect="plain" :type="(row.node as ProductCategoryNode).isBuiltin ? 'info' : 'success'">
-              {{ productCategorySourceLabel(row.node as ProductCategoryNode) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="说明" min-width="180">
-          <template #default="{ row }">
-            <span v-if="(row.node as ProductCategoryNode).description" class="node-desc" :title="(row.node as ProductCategoryNode).description">{{ (row.node as ProductCategoryNode).description }}</span>
-            <span v-else class="dim">—</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" min-width="140" fixed="right">
-          <template #default="{ row }">
-            <template v-if="!isCategoryLoadMoreNode(row.node)">
-              <el-button size="small" type="primary" @click="openEdit(row.node as ProductCategoryNode)">编辑</el-button>
-              <el-button
-                size="small"
-                type="danger"
-                :disabled="!canDelete(row.node as ProductCategoryNode)"
-                @click="removeCategory(row.node as ProductCategoryNode)"
-              >删除</el-button>
-            </template>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
 
-    <el-card v-else shadow="never">
-      <div class="table-toolbar">
-        <div class="tb-buttons">
-          <el-button type="primary" @click="openCreate(null)">新增类目</el-button>
-          <el-button @click="exportCategories">导出</el-button>
-        </div>
-        <span class="dim">搜索结果：共 {{ searchTotal.toLocaleString() }} 条{{ keyword ? ` · ${keyword}` : '' }}</span>
+      <div class="table-scroll category-table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 34%">类目</th>
+              <th>层级路径</th>
+              <th style="width: 90px">排序</th>
+              <th style="width: 120px">来源</th>
+              <th>备注</th>
+              <th style="width: 150px">操作</th>
+            </tr>
+          </thead>
+          <tbody v-if="!searching">
+            <template v-if="treeRows.length">
+              <template v-for="row in treeRows" :key="String(row.node.id)">
+                <tr v-if="isCategoryLoadMoreNode(row.node)" class="load-more-row">
+                  <td colspan="6">
+                    <div class="load-more-cell">
+                      <span class="tree-indent" :style="{ width: `${(row.depth + 1) * 24}px` }"></span>
+                      <button class="btn btn-sm btn-secondary" type="button" :disabled="moreLoading(row.node)" @click="loadMoreChildren(row.node)">
+                        {{ moreLoading(row.node) ? '加载中...' : '加载更多' }}
+                      </button>
+                      <span class="loaded-count">已加载 {{ row.node.loadedCount }} / {{ row.node.totalCount }}</span>
+                    </div>
+                  </td>
+                </tr>
+                <tr v-else>
+                  <td>
+                    <div class="tree-name-cell" @click="onNodeClick(row.node)">
+                      <span class="tree-indent" :style="{ width: `${row.depth * 24}px` }"></span>
+                      <button
+                        type="button"
+                        class="tree-node-mark"
+                        :class="{ 'is-leaf': row.node.childCount <= 0 }"
+                        :disabled="row.node.childCount <= 0"
+                        :title="expandedIds.has(row.node.id) ? '折叠' : '展开'"
+                        @click.stop="toggleExpand(row.node)"
+                      >
+                        {{ row.node.childCount > 0 ? (expandedIds.has(row.node.id) ? '−' : '+') : '' }}
+                      </button>
+                      <strong class="node-name">{{ row.node.name }}</strong>
+                      <span v-if="selected?.id === row.node.id" class="selected-flag">已选</span>
+                    </div>
+                  </td>
+                  <td>
+                    <span class="category-path-value" :title="row.node.path || row.node.name">{{ row.node.path || row.node.name }}</span>
+                  </td>
+                  <td>{{ row.node.sortOrder ?? 0 }}</td>
+                  <td>
+                    <span class="category-tag" :class="{ 'is-custom': !row.node.isBuiltin }">{{ productCategorySourceLabel(row.node) }}</span>
+                  </td>
+                  <td>
+                    <span v-if="row.node.description" class="node-desc" :title="row.node.description">{{ row.node.description }}</span>
+                    <span v-else class="dim">—</span>
+                  </td>
+                  <td class="ops-cell">
+                    <button class="btn btn-sm" type="button" @click="openEdit(row.node)">编辑</button>
+                    <button
+                      class="btn btn-sm btn-danger"
+                      type="button"
+                      :disabled="!canDelete(row.node)"
+                      :title="!canDelete(row.node) ? '存在子类目，不能删除' : undefined"
+                      @click="removeCategory(row.node)"
+                    >
+                      删除
+                    </button>
+                  </td>
+                </tr>
+              </template>
+            </template>
+            <tr v-else-if="loading">
+              <td colspan="6" class="empty-tip">加载中...</td>
+            </tr>
+            <tr v-else>
+              <td colspan="6" class="empty-tip">暂无商品类目</td>
+            </tr>
+          </tbody>
+          <tbody v-else>
+            <template v-if="searchRows.length">
+              <tr v-for="row in searchRows" :key="row.id">
+                <td><strong class="node-name">{{ row.name }}</strong></td>
+                <td><span class="category-path-value" :title="row.path || row.name">{{ row.path || row.name }}</span></td>
+                <td>{{ row.sortOrder ?? '—' }}</td>
+                <td>
+                  <span class="category-tag" :class="{ 'is-custom': !row.isBuiltin }">{{ productCategorySourceLabel(row) }}</span>
+                </td>
+                <td>
+                  <span v-if="row.description" class="node-desc" :title="row.description">{{ row.description }}</span>
+                  <span v-else class="dim">—</span>
+                </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="!canDelete(row)"
+                    :title="!canDelete(row) ? '存在子类目，不能删除' : undefined"
+                    @click="removeCategory(row)"
+                  >
+                    删除
+                  </button>
+                </td>
+              </tr>
+            </template>
+            <tr v-else-if="searchLoading">
+              <td colspan="6" class="empty-tip">搜索中...</td>
+            </tr>
+            <tr v-else>
+              <td colspan="6" class="empty-tip">暂无搜索结果</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <el-table v-loading="searchLoading" :data="searchRows" stripe border>
-        <el-table-column prop="name" label="类目名称" min-width="180" />
-        <el-table-column label="层级路径" min-width="240">
-          <template #default="{ row }">{{ (row as ProductCategoryNode).path || (row as ProductCategoryNode).name }}</template>
-        </el-table-column>
-        <el-table-column label="排序" min-width="90">
-          <template #default="{ row }">{{ (row as ProductCategoryNode).sortOrder ?? '—' }}</template>
-        </el-table-column>
-        <el-table-column label="来源" min-width="100">
-          <template #default="{ row }">
-            <el-tag size="small" effect="plain" :type="(row as ProductCategoryNode).isBuiltin ? 'info' : 'success'">
-              {{ productCategorySourceLabel(row as ProductCategoryNode) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="说明" min-width="180">
-          <template #default="{ row }">{{ (row as ProductCategoryNode).description || '—' }}</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 ProductCategoryNode)">编辑</el-button>
-            <el-button size="small" type="danger" :disabled="!canDelete(row as ProductCategoryNode)" @click="removeCategory(row as ProductCategoryNode)">删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="table-footer">
-        <el-pagination background layout="prev, pager, next, jumper" :total="searchTotal" :page-size="PRODUCT_CATEGORY_DEFAULT_PAGE_SIZE" :current-page="searchPage" @current-change="searchChangePage" />
+
+      <div v-if="searching" class="pagination">
+        <span class="page-total">共 {{ searchTotal }} 条 · 搜索结果</span>
+        <button type="button" :disabled="searchPage <= 1" @click="runSearch(searchPage - 1)">上一页</button>
+        <span class="page-cur">第 {{ searchPage }} / {{ searchTotalPages }} 页</span>
+        <button type="button" :disabled="searchPage >= searchTotalPages" @click="runSearch(searchPage + 1)">下一页</button>
       </div>
-    </el-card>
+    </section>
 
     <el-dialog v-model="dialogVisible" :title="dialogTitle" width="560px">
       <el-form label-width="110px">
         <el-form-item label="父级类目">
           <el-select v-model="draft.parentId" placeholder="无（根级）" clearable filterable>
-            <el-option v-for="node in allNodes" :key="node.id" :label="node.path || node.name" :value="node.id" />
+            <el-option
+              v-for="node in allNodes"
+              :key="node.id"
+              :label="node.path || node.name"
+              :value="node.id"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="类目名称" required>
-          <el-input v-model="draft.name" placeholder="类目名称" />
+          <el-input v-model="draft.name" placeholder="如：洁面" />
         </el-form-item>
         <el-form-item label="排序">
-          <el-input v-model="draft.sortOrder" placeholder="非负整数，可选" />
+          <el-input v-model="draft.sortOrder" placeholder="如 10" />
         </el-form-item>
-        <el-form-item label="说明">
-          <el-input v-model="draft.description" type="textarea" :rows="2" placeholder="可选" />
+        <el-form-item label="备注">
+          <el-input v-model="draft.description" type="textarea" :rows="3" placeholder="可选" />
         </el-form-item>
       </el-form>
       <template #footer>
         <el-button @click="dialogVisible = false">{{ editingId == null ? '取消' : '取消编辑' }}</el-button>
-        <el-button type="primary" :loading="saving" @click="submit">保存类目</el-button>
+        <el-button type="primary" :loading="saving" @click="submit">{{ editingId == null ? '保存' : '保存类目' }}</el-button>
       </template>
     </el-dialog>
   </div>
 </template>
 
 <style scoped>
-.page-heading { display: flex; justify-content: space-between; align-items: center; }
-.table-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
-.tb-buttons { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
-.filter-row { display: flex; gap: 10px; align-items: center; }
-.dim { color: var(--el-text-color-secondary); font-size: 12px; }
-/* 树形表格（对齐旧版 panel-product-categories）：缩进 + [+/−] 折叠标记 + 粗体名称。 */
-.tree-name-cell { display: flex; align-items: center; gap: 8px; min-height: 24px; }
-.tree-indent { flex: 0 0 auto; width: var(--indent, 0px); }
+/* 像素复刻旧版 admin.html panel-product-categories（蓝白末层）。 */
+.category-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;
+}
+.category-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.category-head-tools {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.category-keyword {
+  width: 240px;
+  min-height: 36px;
+  padding: 6px 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;
+}
+.category-keyword:hover {
+  border-color: #9fb7cd;
+}
+.category-keyword: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;
+}
+.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;
+}
+.category-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;
+}
+.tree-name-cell {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 24px;
+  cursor: pointer;
+}
+.tree-indent {
+  flex: 0 0 auto;
+  display: inline-block;
+}
 .tree-node-mark {
   width: 20px;
   height: 20px;
@@ -474,9 +623,114 @@ onMounted(loadTree)
   flex: none;
   transition: background 0.12s ease, color 0.12s ease;
 }
-.tree-node-mark:not(.is-leaf):hover { background: var(--admin-primary-strong, #2f5d8b); color: #fff; }
-.tree-node-mark.is-leaf { background: transparent; cursor: default; }
-.node-name { font-weight: 600; color: var(--el-text-color-primary); white-space: nowrap; }
-.node-desc { color: var(--el-text-color-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; display: inline-block; vertical-align: middle; }
-.tree-table .el-table__row { cursor: pointer; }
+.tree-node-mark:not(.is-leaf):hover {
+  background: var(--admin-primary-strong, #2f5d8b);
+  color: #ffffff;
+}
+.tree-node-mark.is-leaf {
+  background: transparent;
+  cursor: default;
+}
+.node-name {
+  font-weight: 600;
+  color: #24384d;
+  white-space: nowrap;
+}
+.selected-flag {
+  padding: 1px 8px;
+  border-radius: 999px;
+  background: #e7f0f8;
+  color: #2f5d8b;
+  font-size: 11px;
+}
+.category-tag {
+  padding: 2px 8px;
+  border-radius: 6px;
+  border: 1px solid #c2d5e6;
+  background: #e7f0f8;
+  color: #2f5d8b;
+  font-size: 12px;
+}
+.category-tag.is-custom {
+  border-color: #bcd9c6;
+  background: #eef7f0;
+  color: #3d7158;
+}
+.category-path-value {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.node-desc {
+  color: #5b6f83;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 320px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.dim {
+  color: #8293a5;
+}
+.ops-cell {
+  white-space: nowrap;
+}
+.ops-cell .btn + .btn {
+  margin-left: 8px;
+}
+.load-more-row td {
+  background: #fbfdfe;
+}
+.load-more-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.loaded-count {
+  color: #8293a5;
+  font-size: 12.5px;
+}
+.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;
+}
 </style>
diff --git a/admin-frontend-vue/src/pages/asin/QueryAsinPage.vue b/admin-frontend-vue/src/pages/asin/QueryAsinPage.vue
index ac278dfd..221b09e7 100644
--- a/admin-frontend-vue/src/pages/asin/QueryAsinPage.vue
+++ b/admin-frontend-vue/src/pages/asin/QueryAsinPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-/** 查询 ASIN：对齐 admin panel-query-asin —— 纵向 rowspan 展示(序号/分组/店铺合并 + 逐国 ASIN 行可点击复制) +
- *  新增 ASIN 弹窗(分组→店铺联动→国家→ASIN) + 行内「配置」抽屉 + 导入添加/删除导入/导出。 */
+/** 查询 ASIN · 像素复刻旧版 admin.html panel-query-asin（自绘：面板头操作组、筛选+导出 XLSX、原生 rowspan 表格+可复制 ASIN、旧式分页）。
+ *   script 逻辑沿用现有 Vue 实现（新增级联/配置抽屉/导入轮询/导出）。 */
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import CopyText from '@/components/CopyText.vue'
@@ -19,20 +19,14 @@ const loading = ref(false)
 const rows = ref<QueryAsinItem[]>([])
 const total = ref(0)
 const page = ref(1)
-const pageSize = ref(10)
+const pageSize = 15
 const groups = ref<ShopGroupOption[]>([])
 const filter = reactive<QueryAsinFilterState>(createQueryAsinFilterState())
+const jumpPage = ref('')
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
 
 /** 纵向展示行：分组/店铺/操作 按 rowspan 合并，逐国一行（对齐 admin.js renderQueryAsinRows）。 */
-const displayRows = computed(() => queryAsinDisplayRows(rows.value, (page.value - 1) * pageSize.value + 1))
-
-/** rowspan 合并（去序号后列序 分组0/店铺1/ASIN2/国家3/操作4）：分组(0)/店铺(1)/操作(4) 仅首行占位，其余合并。 */
-function spanMethod({ row, columnIndex }: { row: { isFirst: boolean; rowspan: number }; columnIndex: number }): [number, number] {
-  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 4) {
-    return row.isFirst ? [row.rowspan, 1] : [0, 0]
-  }
-  return [1, 1]
-}
+const displayRows = computed(() => queryAsinDisplayRows(rows.value, (page.value - 1) * pageSize + 1))
 
 function asinOf(row: QueryAsinItem, country: string): string {
   const map: Record<string, string> = { DE: row.asinDe, UK: row.asinUk, FR: row.asinFr, IT: row.asinIt, ES: row.asinEs }
@@ -216,15 +210,7 @@ async function submitImport(): Promise<void> {
     return
   }
   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
   const groupId = importGroupId.value ?? undefined
@@ -282,7 +268,7 @@ async function load() {
   try {
     const result = await fetchQueryAsinList({
       page: page.value,
-      pageSize: pageSize.value,
+      pageSize,
       groupId: filter.groupId,
       shopName: filter.shopName.trim() || undefined,
       asin: filter.asin.trim() || undefined,
@@ -303,12 +289,21 @@ function apply() {
   void load()
 }
 
-function reset() {
-  Object.assign(filter, createQueryAsinFilterState())
-  page.value = 1
+function changePage(next: number) {
+  if (next < 1 || next > totalPages.value) return
+  page.value = next
   void load()
 }
 
+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(() => {
   void loadGroups()
   void load()
@@ -316,89 +311,101 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page-stack">
-    <div class="page-heading">
-      <div>
-        <h2>查询 ASIN</h2>
-        <p>每店铺在 5 个站点查询到的 ASIN 清单；行内可逐站配置 ASIN。</p>
+  <div class="query-view">
+    <section class="panel-box">
+      <div class="query-head">
+        <h3>店铺列表</h3>
+        <div class="query-head-actions">
+          <button class="btn" type="button" @click="openCreate">新增 ASIN</button>
+          <button class="btn btn-secondary" type="button" @click="openImportAdd">导入添加</button>
+          <button class="btn" type="button" @click="openImportDelete">导入删除</button>
+        </div>
       </div>
-    </div>
 
-    <el-card shadow="never">
-      <div class="filter-grid">
-        <div class="f-item">
+      <div class="form-row query-filter-row">
+        <div class="form-group">
           <label>分组</label>
-          <el-select v-model="filter.groupId" placeholder="全部分组" clearable filterable>
-            <el-option v-for="group in groups" :key="group.id" :label="group.groupName" :value="group.id" />
-          </el-select>
+          <select v-model="filter.groupId">
+            <option :value="null">全部分组</option>
+            <option v-for="group in groups" :key="group.id" :value="group.id">{{ group.groupName }}</option>
+          </select>
         </div>
-        <div class="f-item">
+        <div class="form-group">
           <label>店铺名</label>
-          <el-input v-model="filter.shopName" placeholder="请输入店铺名" clearable @keyup.enter="apply" />
+          <input v-model="filter.shopName" type="text" placeholder="请输入店铺名" @keyup.enter="apply" />
         </div>
-        <div class="f-item">
-          <label>ASIN</label>
-          <el-input v-model="filter.asin" placeholder="请输入 ASIN" clearable @keyup.enter="apply" />
-        </div>
-        <div class="f-item">
+        <div class="form-group">
           <label>国家</label>
-          <el-select v-model="filter.country" placeholder="全部国家" clearable>
-            <el-option v-for="code in QUERY_ASIN_COUNTRIES" :key="code" :label="asinCountryLabel(code)" :value="code" />
-          </el-select>
+          <select v-model="filter.country">
+            <option value="">全部国家</option>
+            <option v-for="code in QUERY_ASIN_COUNTRIES" :key="code" :value="code">{{ asinCountryLabel(code) }}</option>
+          </select>
         </div>
-        <div class="f-item btn-row">
-          <el-button type="primary" @click="apply">查询</el-button>
-          <el-button @click="reset">重置</el-button>
+        <div class="form-group">
+          <label>ASIN</label>
+          <input v-model="filter.asin" type="text" placeholder="请输入 ASIN" @keyup.enter="apply" />
         </div>
+        <button class="btn" type="button" @click="apply">查询</button>
+        <button class="btn btn-secondary" type="button" @click="doExport">导出 XLSX</button>
       </div>
-    </el-card>
 
-    <el-card shadow="never">
-      <div class="table-toolbar">
-        <el-button type="primary" @click="openCreate">新增 ASIN</el-button>
-        <el-button @click="openImportAdd">导入添加</el-button>
-        <el-button @click="openImportDelete">导入删除</el-button>
-        <el-button @click="doExport">导出</el-button>
+      <div class="table-scroll query-asin-table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 6%">序号</th>
+              <th style="width: 13%">分组</th>
+              <th style="width: 15%">店铺名</th>
+              <th style="width: 24%">ASIN</th>
+              <th style="width: 12%">国家</th>
+              <th style="width: 9%">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="displayRows.length">
+              <tr v-for="row in displayRows" :key="`${row.item.id}-${row.country}`">
+                <template v-if="row.isFirst">
+                  <td :rowspan="row.rowspan">{{ row.rowNo }}</td>
+                  <td :rowspan="row.rowspan">{{ row.item.groupName || '—' }}</td>
+                  <td :rowspan="row.rowspan">{{ row.item.shopName }}</td>
+                </template>
+                <td>
+                  <template v-if="row.asin">
+                    <CopyText :text="row.asin" class="asin-cell" />
+                  </template>
+                  <span v-else class="asin-empty">-</span>
+                </td>
+                <td>{{ asinCountryLabel(row.country || '') }}</td>
+                <template v-if="row.isFirst">
+                  <td :rowspan="row.rowspan" class="asin-col-actions">
+                    <button class="btn btn-sm" type="button" @click="openConfig(row.item as QueryAsinItem)">配置</button>
+                  </td>
+                </template>
+              </tr>
+            </template>
+            <tr v-else-if="loading">
+              <td colspan="6" class="empty-tip">加载中...</td>
+            </tr>
+            <tr v-else>
+              <td colspan="6" class="empty-tip">暂无数据</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <el-table v-loading="loading" :data="displayRows" :span-method="spanMethod" stripe border>
-        <el-table-column label="分组" min-width="130">
-          <template #default="{ row }">{{ row.item.groupName || '—' }}</template>
-        </el-table-column>
-        <el-table-column label="店铺" min-width="150">
-          <template #default="{ row }">{{ row.item.shopName }}</template>
-        </el-table-column>
-        <el-table-column label="ASIN" min-width="150">
-          <template #default="{ row }">
-            <CopyText v-if="row.asin" :text="row.asin" class="asin-cell" />
-            <span v-else class="dim">-</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="国家" min-width="110">
-          <template #default="{ row }">
-            <span v-if="row.country">{{ asinCountryLabel(row.country) }}</span>
-            <span v-else class="dim">-</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" min-width="90" fixed="right">
-          <template #default="{ row }">
-            <el-button v-if="row.isFirst" size="small" type="primary" @click="openConfig(row.item as QueryAsinItem)">配置</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 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>
-    </el-card>
+    </section>
 
     <el-dialog v-model="createVisible" title="新增查询 ASIN" width="560px" :close-on-click-modal="false">
       <el-form label-position="top" @submit.prevent>
@@ -476,16 +483,270 @@ 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; flex-wrap: wrap; justify-content: flex-end; }
-.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; }
-.asin-cell { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
-.dim { color: var(--el-text-color-placeholder); }
-.drawer-tip { color: var(--el-text-color-secondary); font-size: 12px; margin: 0 0 12px; }
-.import-tip { margin: 6px 0 0; color: var(--el-text-color-secondary); font-size: 12px; }
+/* 像素复刻旧版 admin.html panel-query-asin（蓝白末层）。 */
+.query-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;
+}
+.query-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.query-head-actions {
+  display: flex;
+  gap: 10px;
+}
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 14px 12px;
+  margin-bottom: 16px;
+}
+.query-filter-row > .form-group {
+  flex: 1 1 140px;
+  min-width: 0;
+}
+.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;
+}
+.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;
+}
+.query-asin-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;
+}
+.table-scroll td {
+  vertical-align: top;
+}
+.asin-cell {
+  display: block;
+  max-width: 100%;
+  margin: -3px 0 -3px -7px;
+  padding: 3px 7px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: none;
+  color: inherit;
+  font-size: 13.5px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.5;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.asin-cell:hover {
+  border-color: #c7d7e5;
+  background: #eef4fa;
+  color: #2f5d8b;
+}
+.asin-empty {
+  color: #8b9aaa;
+}
+.asin-col-actions {
+  text-align: right;
+  background: #ffffff;
+  box-shadow: -9px 0 12px -10px rgba(31, 48, 66, 0.45);
+}
+.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;
+}
+.drawer-tip {
+  color: #5b6f83;
+  font-size: 12px;
+  margin: 0 0 12px;
+}
+.import-tip {
+  margin: 6px 0 0;
+  color: #5b6f83;
+  font-size: 12px;
+}
 </style>
diff --git a/admin-frontend-vue/src/pages/asin/SkipPricePage.vue b/admin-frontend-vue/src/pages/asin/SkipPricePage.vue
index 962476bd..0fd4ec4e 100644
--- a/admin-frontend-vue/src/pages/asin/SkipPricePage.vue
+++ b/admin-frontend-vue/src/pages/asin/SkipPricePage.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-/** 最低价 ASIN（跳过跟价）：对齐 admin panel-skip-price-asin —— 纵向 rowspan 展示(序号/分组/店铺合并 + 逐国
- *  ASIN 可点击复制 + 最低价两位小数)、新增 ASIN 弹窗(分组→店铺联动→国家→ASIN+最低价)、价格范围筛选、
- *  行内「配置」抽屉(逐国 ASIN+最低价，留空=删除该站点、低价必带 ASIN)、导入添加/删除导入/导出。 */
+/** 最低价 ASIN（跳过跟价）· 像素复刻旧版 admin.html panel-skip-price-asin（自绘：面板头操作组、筛选(分组/店铺/国家/ASIN/最低价≥≤)+导出 XLSX、原生 rowspan 表格、旧式分页）。
+ *   script 逻辑沿用现有 Vue 实现（新增级联+最低价、配置抽屉双列、导入轮询、导出）。 */
 import { computed, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import CopyText from '@/components/CopyText.vue'
@@ -20,9 +19,11 @@ const loading = ref(false)
 const rows = ref<SkipPriceItem[]>([])
 const total = ref(0)
 const page = ref(1)
-const pageSize = ref(10)
+const pageSize = 15
 const groups = ref<ShopGroupOption[]>([])
 const filter = reactive<SkipPriceFilterState>(createSkipPriceFilterState())
+const jumpPage = ref('')
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
 
 const COUNTRIES = ['DE', 'UK', 'FR', 'IT', 'ES'] as const
 const ASIN_MAP: Record<string, keyof SkipPriceItem> = { DE: 'asinDe', UK: 'asinUk', FR: 'asinFr', IT: 'asinIt', ES: 'asinEs' }
@@ -38,15 +39,7 @@ function priceOf(row: SkipPriceItem, code: string): number | null {
 }
 
 /** 纵向展示行：分组/店铺/操作 按 rowspan 合并，逐国一行（对齐 admin.js renderSkipPriceAsinRows）。 */
-const displayRows = computed(() => skipPriceDisplayRows(rows.value, (page.value - 1) * pageSize.value + 1))
-
-/** rowspan 合并（去序号后列序 分组0/店铺1/ASIN2/国家3/最低价4/操作5）：分组(0)/店铺(1)/操作(5) 仅首行占位，其余合并。 */
-function spanMethod({ row, columnIndex }: { row: { isFirst: boolean; rowspan: number }; columnIndex: number }): [number, number] {
-  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 5) {
-    return row.isFirst ? [row.rowspan, 1] : [0, 0]
-  }
-  return [1, 1]
-}
+const displayRows = computed(() => skipPriceDisplayRows(rows.value, (page.value - 1) * pageSize + 1))
 
 // ---- 新增 ASIN 弹窗（对齐 admin.js btnOpenCreateSkipPriceAsin/btnCreateSkipPriceAsin） ----
 const createVisible = ref(false)
@@ -262,15 +255,7 @@ async function submitImport(): Promise<void> {
     return
   }
   if (importMode.value === 'delete') {
-    try {
-      await ElMessageBox.confirm('确定按 Excel 中的删除ASIN批量删除该店铺跳过跟价 ASIN 吗？', '删除导入', {
-        type: 'warning',
-        confirmButtonText: '确定删除',
-        cancelButtonText: '取消',
-      })
-    } catch {
-      return
-    }
+    if (!window.confirm('确定按 Excel 中的删除ASIN批量删除该店铺跳过跟价 ASIN 吗？')) return
   }
   const mode = importMode.value
   const groupId = importGroupId.value as number
@@ -325,7 +310,7 @@ async function loadGroups() {
 async function load() {
   loading.value = true
   try {
-    const result = await fetchSkipPriceList(toSkipPriceParams(filter, page.value, pageSize.value))
+    const result = await fetchSkipPriceList(toSkipPriceParams(filter, page.value, pageSize))
     rows.value = result.items
     total.value = result.total
     page.value = result.page
@@ -341,12 +326,21 @@ function apply() {
   void load()
 }
 
-function reset() {
-  Object.assign(filter, createSkipPriceFilterState())
-  page.value = 1
+function changePage(next: number) {
+  if (next < 1 || next > totalPages.value) return
+  page.value = next
   void load()
 }
 
+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(() => {
   void loadGroups()
   void load()
@@ -354,103 +348,111 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page-stack">
-    <div class="page-heading">
-      <div>
-        <h2>最低价 ASIN / 跳过跟价</h2>
-        <p>每店铺在 5 个站点设定的最低价 ASIN 清单；行内可逐站配置 ASIN 与最低价。</p>
+  <div class="skip-view">
+    <section class="panel-box">
+      <div class="skip-head">
+        <h3>店铺列表</h3>
+        <div class="skip-head-actions">
+          <button class="btn" type="button" @click="openCreate">新增 ASIN</button>
+          <button class="btn btn-secondary" type="button" @click="openImportAdd">导入文件新增</button>
+          <button class="btn" type="button" @click="openImportDelete">导入文件删除</button>
+        </div>
       </div>
-    </div>
 
-    <el-card shadow="never">
-      <div class="filter-grid">
-        <div class="f-item">
+      <div class="form-row skip-filter-row">
+        <div class="form-group">
           <label>分组</label>
-          <el-select v-model="filter.groupId" placeholder="全部分组" clearable filterable>
-            <el-option v-for="group in groups" :key="group.id" :label="group.groupName" :value="group.id" />
-          </el-select>
+          <select v-model="filter.groupId">
+            <option :value="null">全部分组</option>
+            <option v-for="group in groups" :key="group.id" :value="group.id">{{ group.groupName }}</option>
+          </select>
         </div>
-        <div class="f-item">
-          <label>店铺</label>
-          <el-input v-model="filter.shopName" placeholder="店铺名模糊" clearable @keyup.enter="apply" />
+        <div class="form-group">
+          <label>店铺名</label>
+          <input v-model="filter.shopName" type="text" placeholder="请输入店铺名" @keyup.enter="apply" />
         </div>
-        <div class="f-item">
-          <label>ASIN</label>
-          <el-input v-model="filter.asin" placeholder="ASIN 搜索" clearable @keyup.enter="apply" />
-        </div>
-        <div class="f-item">
+        <div class="form-group">
           <label>国家</label>
-          <el-select v-model="filter.country" placeholder="全部" clearable>
-            <el-option v-for="code in COUNTRIES" :key="code" :label="asinCountryLabel(code)" :value="code" />
-          </el-select>
+          <select v-model="filter.country">
+            <option value="">全部国家</option>
+            <option v-for="code in COUNTRIES" :key="code" :value="code">{{ asinCountryLabel(code) }}</option>
+          </select>
         </div>
-        <div class="f-item price-range">
-          <label>最低价</label>
+        <div class="form-group">
+          <label>ASIN</label>
+          <input v-model="filter.asin" type="text" placeholder="请输入 ASIN" @keyup.enter="apply" />
+        </div>
+        <div class="form-group price-range">
+          <label>最低价范围</label>
           <div class="price-range-row">
-            <el-input v-model="filter.minimumPriceFrom" placeholder="≥ 最低值" clearable @keyup.enter="apply" />
-            <span class="range-sep">至</span>
-            <el-input v-model="filter.minimumPriceTo" placeholder="≤ 最高值" clearable @keyup.enter="apply" />
+            <input v-model="filter.minimumPriceFrom" type="number" min="0" step="0.01" placeholder="最低价 ≥" @keyup.enter="apply" />
+            <span class="range-sep">-</span>
+            <input v-model="filter.minimumPriceTo" type="number" min="0" step="0.01" placeholder="最高价 ≤" @keyup.enter="apply" />
           </div>
         </div>
-        <div class="f-item btn-row">
-          <el-button type="primary" @click="apply">查询</el-button>
-          <el-button @click="reset">重置</el-button>
-        </div>
+        <button class="btn" type="button" @click="apply">查询</button>
+        <button class="btn btn-secondary" type="button" @click="doExport">导出 XLSX</button>
       </div>
-    </el-card>
 
-    <el-card shadow="never">
-      <div class="table-toolbar">
-        <el-button type="primary" @click="openCreate">新增 ASIN</el-button>
-        <el-button @click="openImportAdd">导入添加</el-button>
-        <el-button @click="openImportDelete">导入删除</el-button>
-        <el-button @click="doExport">导出</el-button>
+      <div class="table-scroll skip-price-asin-table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 6%">序号</th>
+              <th style="width: 13%">分组</th>
+              <th style="width: 15%">店铺名</th>
+              <th style="width: 24%">ASIN</th>
+              <th style="width: 12%">国家</th>
+              <th style="width: 10%">最低价</th>
+              <th style="width: 9%">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="displayRows.length">
+              <tr v-for="row in displayRows" :key="`${row.item.id}-${row.country}`">
+                <template v-if="row.isFirst">
+                  <td :rowspan="row.rowspan">{{ row.rowNo }}</td>
+                  <td :rowspan="row.rowspan">{{ row.item.groupName || '—' }}</td>
+                  <td :rowspan="row.rowspan">{{ row.item.shopName }}</td>
+                </template>
+                <td>
+                  <template v-if="row.asin">
+                    <CopyText :text="row.asin" class="asin-cell" />
+                  </template>
+                  <span v-else class="asin-empty">-</span>
+                </td>
+                <td>{{ asinCountryLabel(row.country || '') }}</td>
+                <td class="price-cell">{{ row.minimumPrice !== '' ? row.minimumPrice : '-' }}</td>
+                <template v-if="row.isFirst">
+                  <td :rowspan="row.rowspan" class="asin-col-actions">
+                    <button class="btn btn-sm" type="button" @click="openConfig(row.item as SkipPriceItem)">配置</button>
+                  </td>
+                </template>
+              </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="displayRows" :span-method="spanMethod" stripe border>
-        <el-table-column label="分组" min-width="130">
-          <template #default="{ row }">{{ row.item.groupName || '—' }}</template>
-        </el-table-column>
-        <el-table-column label="店铺" min-width="150">
-          <template #default="{ row }">{{ row.item.shopName }}</template>
-        </el-table-column>
-        <el-table-column label="ASIN" min-width="150">
-          <template #default="{ row }">
-            <CopyText v-if="row.asin" :text="row.asin" class="asin-cell" />
-            <span v-else class="dim">-</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="国家" min-width="110">
-          <template #default="{ row }">
-            <span v-if="row.country">{{ asinCountryLabel(row.country) }}</span>
-            <span v-else class="dim">-</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="最低价" min-width="110" align="right">
-          <template #default="{ row }">
-            <span v-if="row.minimumPrice !== ''">{{ row.minimumPrice }}</span>
-            <span v-else class="dim">-</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" min-width="90" fixed="right">
-          <template #default="{ row }">
-            <el-button v-if="row.isFirst" size="small" type="primary" @click="openConfig(row.item as SkipPriceItem)">配置</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 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>
-    </el-card>
+    </section>
 
     <el-dialog v-model="createVisible" title="新增 ASIN" width="560px" :close-on-click-modal="false">
       <el-form label-position="top" @submit.prevent>
@@ -534,22 +536,297 @@ 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; }
-.filter-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }
-.f-item { display: flex; flex-direction: column; gap: 6px; width: 190px; }
-.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; }
-/* 最低价范围筛选：≥ 与 ≤ 并排同一行。 */
-.f-item.price-range { width: 300px; }
-.price-range-row { display: flex; align-items: center; gap: 8px; width: 100%; }
-.price-range-row .el-input { flex: 1; }
-.range-sep { color: var(--el-text-color-secondary); font-size: 12px; flex: none; }
-.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; }
-.asin-cell { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }
-.dim { color: var(--el-text-color-placeholder); }
-.drawer-tip { color: var(--el-text-color-secondary); font-size: 12px; margin: 0 0 12px; }
-.country-cell { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
-.import-tip { margin: 6px 0 0; color: var(--el-text-color-secondary); font-size: 12px; }
+/* 像素复刻旧版 admin.html panel-skip-price-asin（蓝白末层）。 */
+.skip-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;
+}
+.skip-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+.skip-head-actions {
+  display: flex;
+  gap: 10px;
+}
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 14px 12px;
+  margin-bottom: 16px;
+}
+.skip-filter-row > .form-group {
+  flex: 1 1 130px;
+  min-width: 0;
+}
+.skip-filter-row .form-group.price-range {
+  flex: 1 1 220px;
+}
+.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);
+}
+.price-range-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.price-range-row input {
+  flex: 1;
+  min-width: 0;
+}
+.price-range-row .range-sep {
+  color: #8293a5;
+  flex: none;
+}
+.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;
+}
+.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;
+}
+.skip-price-asin-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;
+}
+.table-scroll td {
+  vertical-align: top;
+}
+.asin-cell {
+  display: block;
+  max-width: 100%;
+  margin: -3px 0 -3px -7px;
+  padding: 3px 7px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: none;
+  color: inherit;
+  font-size: 13.5px;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.5;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.asin-cell:hover {
+  border-color: #c7d7e5;
+  background: #eef4fa;
+  color: #2f5d8b;
+}
+.asin-empty {
+  color: #8b9aaa;
+}
+.price-cell {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.asin-col-actions {
+  text-align: right;
+  background: #ffffff;
+  box-shadow: -9px 0 12px -10px rgba(31, 48, 66, 0.45);
+}
+.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;
+}
+.drawer-tip {
+  color: #5b6f83;
+  font-size: 12px;
+  margin: 0 0 12px;
+}
+.country-cell {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  width: 100%;
+}
+.import-tip {
+  margin: 6px 0 0;
+  color: #5b6f83;
+  font-size: 12px;
+}
 </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 41d83f08..01d67b3b 100644
--- a/admin-frontend-vue/tests/align-asin-row-buttons.test.ts
+++ b/admin-frontend-vue/tests/align-asin-row-buttons.test.ts
@@ -2,45 +2,42 @@ import test from 'node:test'
 import assert from 'node:assert/strict'
 import { readSource } from './helpers.ts'
 
-/** 对齐旧版 .btn-sm：asin 域 5 页表格行内操作（编辑/删除/配置）统一为实心小按钮（type primary/danger + size small），不再用 link/text；类目树折叠钮由靛蓝改为蓝白 token。 */
+/** 对齐旧版 .btn-sm：asin 域 5 页已像素复刻，行内操作（编辑/删除/配置）用原生 btn btn-sm 实心小按钮（非 EP 按钮）。 */
 
-// 实心小按钮：同一 el-button 内同时含 size="small" 与 @click="<action>"，且不含 link/text 修饰。
-const SOLID_ACTION = (action: string) => new RegExp(`<el-button[^>]*size="small"[^>]*@click="${action}`)
-const NO_MODIFIER = (action: string, mod: 'link' | 'text') =>
-  new RegExp(`<el-button[^>]*${mod}[^>]*@click="${action}`)
+// 断言单个 el-button 标签同时含 btn-sm 与目标 @click，且不含 link/text 修饰（action 含正则元字符需转义）。
+const escapeRe = (text: string) => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+const OLD_BTN = (action: string) => new RegExp(`class="btn btn-sm[^"]*"[^>]*@click="${escapeRe(action)}`)
+const NO_LINK = (action: string) => new RegExp(`<el-button[^>]*link[^>]*@click="${escapeRe(action)}`)
+const NO_TEXT = (action: string) => new RegExp(`<el-button[^>]*text[^>]*@click="${escapeRe(action)}`)
+const NO_EL = (action: string) => new RegExp(`<el-button[^>]*@click="${escapeRe(action)}`)
 
-function assertRowButtonSolid(source: string, action: string) {
-  assert.match(source, SOLID_ACTION(action), `${action} 为 size=small 实心按钮`)
-  assert.doesNotMatch(source, NO_MODIFIER(action, 'link'), `${action} 不再 link`)
-  assert.doesNotMatch(source, NO_MODIFIER(action, 'text'), `${action} 不再 text`)
+function assertOldRowButton(source: string, action: string, page: string) {
+  assert.match(source, OLD_BTN(action), `${page} ${action} 为 btn-sm 实心按钮`)
+  assert.doesNotMatch(source, NO_LINK(action), `${page} ${action} 不再 link`)
+  assert.doesNotMatch(source, NO_TEXT(action), `${page} ${action} 不再 text`)
+  assert.doesNotMatch(source, NO_EL(action), `${page} ${action} 不再用 EP 按钮`)
 }
 
-test('align_dedupe_registry_row_buttons_old_btn', () => {
-  const s = readSource('src/pages/asin/DedupeRegistryPage.vue')
-  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', () => {
+test('align_invalid_asin_row_buttons_old_btn', () => {
   const s = readSource('src/pages/asin/AsinInvalidPage.vue')
-  assertRowButtonSolid(s, 'openEdit')
-  assertRowButtonSolid(s, 'remove')
+  assertOldRowButton(s, 'openEdit(row)', '不符合ASIN')
+  assertOldRowButton(s, 'remove(row)', '不符合ASIN')
+  assert.match(s, /window\.confirm\(invalidAsinDeleteText\(row\)\)/, '删除确认原生 confirm 对齐旧版')
 })
 
-test('align_query_asin_config_solid', () => {
-  assertRowButtonSolid(readSource('src/pages/asin/QueryAsinPage.vue'), 'openConfig')
+test('align_query_asin_config_old_btn', () => {
+  assertOldRowButton(readSource('src/pages/asin/QueryAsinPage.vue'), 'openConfig(row.item as QueryAsinItem)', '查询ASIN')
 })
 
-test('align_skip_price_config_solid', () => {
-  assertRowButtonSolid(readSource('src/pages/asin/SkipPricePage.vue'), 'openConfig')
+test('align_skip_price_config_old_btn', () => {
+  assertOldRowButton(readSource('src/pages/asin/SkipPricePage.vue'), 'openConfig(row.item as SkipPriceItem)', '最低价ASIN')
 })
 
-test('align_product_category_tree_row_buttons_solid', () => {
+test('align_product_category_row_buttons_old_btn', () => {
   const s = readSource('src/pages/asin/ProductCategoryPage.vue')
-  assertRowButtonSolid(s, 'openEdit')
-  assertRowButtonSolid(s, 'removeCategory')
+  assertOldRowButton(s, 'openEdit(row.node)', '商品类目树视图')
+  assertOldRowButton(s, 'openEdit(row)', '商品类目搜索视图')
+  assert.match(s, /btn-sm btn-danger"[^>]*@click="removeCategory/, '删除为 btn-sm btn-danger')
 })
 
 test('align_product_category_no_indigo_left', () => {
@@ -49,14 +46,16 @@ test('align_product_category_no_indigo_left', () => {
   assert.match(s, /--admin-primary-soft/, '折叠钮改用蓝白主色 soft token')
 })
 
-test('align_product_category_search_and_tree_edits_both_solid', () => {
+test('align_product_category_load_more_old_class', () => {
+  // 类目「加载更多」行按钮沿用 btn-sm btn-secondary（旧版小组按钮样式）。
   const s = readSource('src/pages/asin/ProductCategoryPage.vue')
-  const opens = s.match(/<el-button[^>]*size="small"[^>]*@click="openEdit/g) || []
-  assert.ok(opens.length >= 2, `树/搜索两处编辑均实心（${opens.length}）`)
+  assert.match(s, /class="btn btn-sm btn-secondary"[^>]*loadMoreChildren/, '加载更多为旧版 btn-sm btn-secondary')
 })
 
-test('align_product_category_load_more_kept_link', () => {
-  // 类目"加载更多"是非行内操作的树加载行，保留 link 不误伤。
-  const s = readSource('src/pages/asin/ProductCategoryPage.vue')
-  assert.match(s, /link size="small" type="primary"[^>]*loadMoreChildren/, '加载更多保留 link')
+test('align_dedupe_registry_row_buttons_old_btn', () => {
+  const s = readSource('src/pages/asin/DedupeRegistryPage.vue')
+  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）')
 })
diff --git a/admin-frontend-vue/tests/align-category-tree.test.ts b/admin-frontend-vue/tests/align-category-tree.test.ts
index da62d3b4..14041f3e 100644
--- a/admin-frontend-vue/tests/align-category-tree.test.ts
+++ b/admin-frontend-vue/tests/align-category-tree.test.ts
@@ -16,9 +16,9 @@ test('align_category_tree_table_normal_primary_path', () => {
 test('align_category_tree_table_normal_variant_input', () => {
   const page = readSource('src/pages/asin/ProductCategoryPage.vue')
   assert.match(page, /expandedIds/, '客户端展开状态集合')
-  assert.match(page, /flatRows|treeRows/, '按展开状态扁平化行集')
-  for (const col of ['层级路径', '排序', '来源', '说明']) {
-    assert.match(page, new RegExp(col), `树形表格含「${col}」列`)
+  assert.match(page, /treeRows/, '按展开状态扁平化行集')
+  for (const col of ['层级路径', '排序', '来源', '备注']) {
+    assert.match(page, new RegExp(col), `树形表格含「${col}」列（旧版列名为备注）`)
   }
 })
 
@@ -46,8 +46,8 @@ test('align_category_tree_table_repeated_operation_is_idempotent', () => {
 })
 
 test('align_category_tree_table_dependency_failure_returns_actionable_message', () => {
-  // 视觉复刻旧版：20px 圆角方块标记、缩进宽度变量、名称加粗。
+  // 视觉复刻旧版：圆角方块标记、层级缩进(24px/级)、名称加粗。
   const page = readSource('src/pages/asin/ProductCategoryPage.vue')
   assert.match(page, /tree-node-mark/, '展开标记样式存在')
-  assert.match(page, /var\(--indent|--indent/, '缩进变量')
+  assert.match(page, /row\.depth \* 24/, '缩进 24px/级')
 })
diff --git a/admin-frontend-vue/tests/align-column-width.test.ts b/admin-frontend-vue/tests/align-column-width.test.ts
index b520799c..b78de4a8 100644
--- a/admin-frontend-vue/tests/align-column-width.test.ts
+++ b/admin-frontend-vue/tests/align-column-width.test.ts
@@ -7,14 +7,10 @@ import { readSource } from './helpers.ts'
 // 例外：DuplicateCheckPage 不动；dialog/表单的 width 不属于表格列。
 
 const PAGES = [
-  'src/pages/asin/AsinInvalidPage.vue',
-  'src/pages/asin/ProductCategoryPage.vue',
-  'src/pages/asin/QueryAsinPage.vue',
-  'src/pages/asin/SkipPricePage.vue',
-  'src/pages/records/RecordsDigitalHumanVersionPage.vue',
-  'src/pages/records/RecordsSoftwareVersionPage.vue',
   'src/pages/shop/ShopKeysPage.vue',
   'src/pages/shop/ShopManagePage.vue',
+  'src/pages/records/RecordsDigitalHumanVersionPage.vue',
+  'src/pages/records/RecordsSoftwareVersionPage.vue',
   'src/pages/tasks/ImageVideoTasksPage.vue',
   'src/pages/tasks/ShopDataTasksPage.vue',
 ]
@@ -62,6 +58,16 @@ test('align_column_width_boundary_empty_input', () => {
   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 表格')
+  for (const [page, cls] of [
+    ['src/pages/asin/AsinInvalidPage.vue', 'invalid-asin-table-scroll'],
+    ['src/pages/asin/QueryAsinPage.vue', 'query-asin-table-scroll'],
+    ['src/pages/asin/SkipPricePage.vue', 'skip-price-asin-table-scroll'],
+    ['src/pages/asin/ProductCategoryPage.vue', 'category-table-scroll'],
+  ]) {
+    const src = readSource(page)
+    assert.equal(/el-table-column/.test(src), false, `${page} 已像素复刻原生表格，不再有 el-table-column`)
+    assert.match(src, new RegExp(cls), `${page} 用原生 .table-scroll 表格`)
+  }
 })
 
 test('align_column_width_dependency_failure_returns_actionable_message', () => {
diff --git a/admin-frontend-vue/tests/align-pagination.test.ts b/admin-frontend-vue/tests/align-pagination.test.ts
index 6aa19ef5..199bbc4e 100644
--- a/admin-frontend-vue/tests/align-pagination.test.ts
+++ b/admin-frontend-vue/tests/align-pagination.test.ts
@@ -7,10 +7,9 @@ import { readSource } from './helpers.ts'
 // 菜单管理是树结构（非列表），商品类目树用懒加载+加载更多节点，均豁免。
 
 test('align_pagination_normal_primary_path', () => {
-  // 分组管理已像素复刻旧版(panel-group-manage 无分页)，豁免；其余列表保留分页。
+  // 商品类目已像素复刻旧版(搜索态旧式分页)；保留 EP 分页的剩余列表。
   for (const page of [
     'src/pages/records/RecordsSoftwareVersionPage.vue',
-    'src/pages/asin/ProductCategoryPage.vue',
   ]) {
     const src = readSource(page)
     assert.match(src, /el-pagination/, `${page} 应包含分页组件`)
@@ -21,7 +20,6 @@ test('align_pagination_normal_variant_input', () => {
   // 分页组件需含上一页/下一页（prev/next），中文文案由全局 zh-cn locale 渲染。
   for (const page of [
     'src/pages/records/RecordsSoftwareVersionPage.vue',
-    'src/pages/asin/ProductCategoryPage.vue',
   ]) {
     const src = readSource(page)
     assert.match(src, /el-pagination[^>]*layout="[^"]*prev[^"]*next/, `${page} 分页 layout 需含 prev/next`)
@@ -45,9 +43,8 @@ test('align_pagination_boundary_single_item', () => {
 })
 
 test('align_pagination_repeated_operation_is_idempotent', () => {
-  // 已有分页的页面保持原样，不被破坏；已像素复刻(自绘旧式分页)的页单独断言。
+  // 已有分页的页面保持原样，不被破坏；已像素复刻(自绘旧式分页/原生表格)的页单独断言。
   for (const page of [
-    'src/pages/asin/AsinInvalidPage.vue',
     'src/pages/shop/ShopManagePage.vue',
   ]) {
     const src = readSource(page)
@@ -59,4 +56,7 @@ test('align_pagination_repeated_operation_is_idempotent', () => {
   const groups = readSource('src/pages/account/GroupsPage.vue')
   assert.doesNotMatch(groups, /el-pagination/, '分组管理已像素复刻旧版(panel-group-manage 无分页)')
   assert.doesNotMatch(groups, /pagedRows/, '分组管理全量渲染无客户端切片')
+  const invalid = readSource('src/pages/asin/AsinInvalidPage.vue')
+  assert.match(invalid, /class="pagination"/, '品牌库已像素复刻，用旧式分页容器')
+  assert.doesNotMatch(invalid, /el-pagination/, '品牌库不再用 EP 分页')
 })
diff --git a/admin-frontend-vue/tests/align-query-asin.test.ts b/admin-frontend-vue/tests/align-query-asin.test.ts
index 5cf98a49..7e41206a 100644
--- a/admin-frontend-vue/tests/align-query-asin.test.ts
+++ b/admin-frontend-vue/tests/align-query-asin.test.ts
@@ -80,7 +80,7 @@ test('align_query_asin_create_api_wiring', () => {
 test('align_query_asin_page_layout_wiring', () => {
   const page = readSource('src/pages/asin/QueryAsinPage.vue')
   assert.match(page, /新增 ASIN/, '顶栏补新增 ASIN 按钮')
-  assert.match(page, /span-method/, '表格用 span-method 做 rowspan 合并')
+  assert.match(page, /:rowspan="row\.rowspan"/, '表格用原生 rowspan 合并（像素复刻旧版）')
   assert.match(page, /CopyText/, 'ASIN 单元格点击复制')
   assert.doesNotMatch(page, /更新时间/, '去掉更新时间列（参考无此列）')
   assert.match(page, /queryAsinDisplayRows/, '行展开走纯模型')
diff --git a/admin-frontend-vue/tests/align-skip-price.test.ts b/admin-frontend-vue/tests/align-skip-price.test.ts
index 85b4b5f0..b5d335d5 100644
--- a/admin-frontend-vue/tests/align-skip-price.test.ts
+++ b/admin-frontend-vue/tests/align-skip-price.test.ts
@@ -80,7 +80,7 @@ test('align_skip_price_create_api_wiring', () => {
 test('align_skip_price_page_layout_wiring', () => {
   const page = readSource('src/pages/asin/SkipPricePage.vue')
   assert.match(page, /新增 ASIN/, '顶栏补新增 ASIN 按钮')
-  assert.match(page, /span-method/, '表格用 span-method 做 rowspan 合并')
+  assert.match(page, /:rowspan="row\.rowspan"/, '表格用原生 rowspan 合并（像素复刻旧版）')
   assert.match(page, /CopyText/, 'ASIN 单元格点击复制')
   assert.doesNotMatch(page, /更新时间/, '去掉更新时间列（参考无此列）')
   assert.match(page, /skipPriceDisplayRows/, '行展开走纯模型')
@@ -93,7 +93,7 @@ test('align_skip_price_filter_price_range_same_row', () => {
   // 验收反馈：筛选条件「最低价」的 ≥/≤ 输入并排同一排（price-range-row），不换行拆开。
   const page = readSource('src/pages/asin/SkipPricePage.vue')
   assert.match(page, /price-range-row/, '最低价范围筛选并排容器存在')
-  assert.match(page, /placeholder="≥ 最低值"/, '下限占位文案')
-  assert.match(page, /placeholder="≤ 最高值"/, '上限占位文案')
+  assert.match(page, /placeholder="最低价 ≥"/, '下限占位文案(旧版)')
+  assert.match(page, /placeholder="最高价 ≤"/, '上限占位文案(旧版)')
   assert.ok(!page.includes('label="最低价 ≥"'), '不再有独立的最低价 ≥ 筛选项')
 })
diff --git a/admin-frontend-vue/tests/task-255.test.ts b/admin-frontend-vue/tests/task-255.test.ts
index 8cbd594d..10f4bcca 100644
--- a/admin-frontend-vue/tests/task-255.test.ts
+++ b/admin-frontend-vue/tests/task-255.test.ts
@@ -9,7 +9,7 @@ test('test_task_255_invalidasin_normal_primary_path', () => {
   const page = readSource('src/pages/asin/AsinInvalidPage.vue')
   assert.match(page, /分组/, '筛选需含分组下拉')
   assert.match(page, /recordSourceLabel/, '来源列需用 recordSourceLabel 文案')
-  assert.match(page, /el-tag/, '来源宜用 tag 形态')
+  assert.match(page, /source-text/, '来源用旧版源样式(自绘)')
 })
 
 test('test_task_255_invalidasin_normal_variant_input', () => {
diff --git a/admin-frontend-vue/tests/task-258.test.ts b/admin-frontend-vue/tests/task-258.test.ts
index 134592ba..a127592f 100644
--- a/admin-frontend-vue/tests/task-258.test.ts
+++ b/admin-frontend-vue/tests/task-258.test.ts
@@ -17,9 +17,9 @@ test('test_task_258_skipprice_normal_variant_input', () => {
   const page = readSource('src/pages/asin/SkipPricePage.vue')
   assert.match(page, /填写最低价时必须填写 ASIN/, '低价必带 ASIN 校验文案')
   assert.match(page, /最低价格式不正确/, '低价格式校验文案')
-  assert.match(page, /导入添加/, '页头导入添加')
-  assert.match(page, /导入删除/, '页头删除导入')
-  assert.match(page, /导出/, '页头导出')
+  assert.match(page, /导入文件新增/, '页头导入文件新增(旧版文案)')
+  assert.match(page, /导入文件删除/, '页头导入文件删除(旧版文案)')
+  assert.match(page, /导出 XLSX/, '页头导出 XLSX(旧版文案)')
 })
 
 test('test_task_258_skipprice_normal_repeated_operation_is_idempotent', () => {