align(asin·像素复刻): 品牌库/查询ASIN/最低价ASIN/商品类目 四页自绘复刻旧版(panel-invalid-asin-data/query-asin/skip-price-asin/product-categories)——原生rowspan表格+可复制ASIN+btn-sm行操作+原生confirm删除+旧式分页(类目15/页/搜索态)+面板头搜索组/操作组+树[+/−]折叠/懒加载/编辑态按钮文案；编辑弹窗父级只读

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>