From a2bfb08122b819abafcccbff4ba378b408f2ddea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E8=87=AA=E8=BE=BE?= <980324341@qq.com>
Date: Sat, 5 Sep 2026 23:35:38 +0800
Subject: [PATCH] =?UTF-8?q?align(=E5=BA=97=E9=93=BA=E5=AF=86=E9=92=A5/?=
 =?UTF-8?q?=E5=BA=97=E9=93=BA=E7=AE=A1=E7=90=86):=20=E9=A6=96=E5=88=97ID?=
 =?UTF-8?q?=E6=94=B9=E5=BA=8F=E5=8F=B7(=E5=85=A8=E5=B1=80=E8=A1=8C?=
 =?UTF-8?q?=E5=8F=B7)=E3=80=81=E5=AF=86=E9=92=A5=E5=88=97=E5=90=8D?=
 =?UTF-8?q?=E7=B4=AB=E9=B8=9F=E8=B4=A6=E5=8F=B7=E5=90=8D=E7=A7=B0=E3=80=81?=
 =?UTF-8?q?=E5=BA=97=E9=93=BA=E7=AE=A1=E7=90=86=E5=88=97=E5=BA=8F=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90(=E5=BA=8F=E5=8F=B7|=E5=88=86=E7=BB=84|=E5=BA=97?=
 =?UTF-8?q?=E9=93=BA=E5=90=8D|=E5=BA=97=E9=93=BA=E5=95=86=E5=9F=8E?=
 =?UTF-8?q?=E5=90=8D|=E8=87=AA=E5=8A=A8=E5=8C=96=E8=B4=A6=E5=8F=B7|?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=B7|=E5=AF=86=E7=A0=81)=E5=B9=B6=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E8=A1=A8=E5=8D=95/=E7=AD=9B=E9=80=89/=E5=87=AD?=
 =?UTF-8?q?=E6=8D=AE=E6=A0=87=E7=AD=BE=E6=96=87=E6=A1=88=EF=BC=88=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90=20admin.html:5298-5300/5339-5348/6038=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/shop/ShopKeysPage.vue           |  4 +--
 .../src/pages/shop/ShopManagePage.vue         | 26 +++++++++----------
 .../tests/align-shop-columns.test.ts          | 25 ++++++++++++++++++
 admin-frontend-vue/tests/task-263.test.ts     |  3 ++-
 4 files changed, 42 insertions(+), 16 deletions(-)
 create mode 100644 admin-frontend-vue/tests/align-shop-columns.test.ts

diff --git a/admin-frontend-vue/src/pages/shop/ShopKeysPage.vue b/admin-frontend-vue/src/pages/shop/ShopKeysPage.vue
index 3e3d285c..ebb24564 100644
--- a/admin-frontend-vue/src/pages/shop/ShopKeysPage.vue
+++ b/admin-frontend-vue/src/pages/shop/ShopKeysPage.vue
@@ -126,11 +126,11 @@ onMounted(load)
 
     <el-card shadow="never">
       <el-table v-loading="loading" :data="rows" stripe border>
-        <el-table-column prop="id" label="ID" width="80" />
+        <el-table-column type="index" label="序号" width="80" :index="(i: number) => (page - 1) * pageSize + i + 1" />
         <el-table-column prop="remarkName" label="备注名" min-width="140">
           <template #default="{ row }">{{ (row as ShopKeyItem).remarkName || '—' }}</template>
         </el-table-column>
-        <el-table-column prop="ziniaoAccountName" label="紫鸟账号" min-width="160" />
+        <el-table-column prop="ziniaoAccountName" label="紫鸟账号名称" min-width="160" />
         <el-table-column label="紫鸟令牌" min-width="200">
           <template #default="{ row }">
             <el-tooltip :content="(row as ShopKeyItem).ziniaoToken" placement="top">
diff --git a/admin-frontend-vue/src/pages/shop/ShopManagePage.vue b/admin-frontend-vue/src/pages/shop/ShopManagePage.vue
index 47f36a87..ae1e1792 100644
--- a/admin-frontend-vue/src/pages/shop/ShopManagePage.vue
+++ b/admin-frontend-vue/src/pages/shop/ShopManagePage.vue
@@ -208,7 +208,7 @@ onMounted(() => {
           </el-select>
         </div>
         <div class="f-item">
-          <label>店铺名称</label>
+          <label>店铺名</label>
           <el-input v-model="filter.shopName" placeholder="模糊搜索店铺名" clearable @keyup.enter="apply" />
         </div>
         <div class="f-item btn-row">
@@ -220,10 +220,13 @@ onMounted(() => {
 
     <el-card shadow="never">
       <el-table v-loading="loading" :data="rows" stripe border>
-        <el-table-column prop="id" label="ID" width="80" />
-        <el-table-column prop="shopName" label="店铺名称" min-width="160" />
-        <el-table-column prop="mallName" label="商城" min-width="120" />
+        <el-table-column type="index" label="序号" width="80" :index="(i: number) => (page - 1) * pageSize + i + 1" />
         <el-table-column prop="groupName" label="分组" min-width="120" />
+        <el-table-column prop="shopName" label="店铺名" min-width="160" />
+        <el-table-column prop="mallName" label="店铺商城名" min-width="120" />
+        <el-table-column prop="znUsername" label="自动化账号" min-width="140">
+          <template #default="{ row }">{{ (row as ShopSummary).znUsername || '—' }}</template>
+        </el-table-column>
         <el-table-column prop="account" label="账号" min-width="140" />
         <el-table-column label="密码" width="170">
           <template #default="{ row }">
@@ -239,9 +242,6 @@ onMounted(() => {
             </el-button>
           </template>
         </el-table-column>
-        <el-table-column prop="znUsername" label="自动化账号" min-width="140">
-          <template #default="{ row }">{{ (row as ShopSummary).znUsername || '—' }}</template>
-        </el-table-column>
         <el-table-column prop="createdAt" label="创建时间" min-width="170">
           <template #default="{ row }">{{ formatDateTime(row.createdAt) }}</template>
         </el-table-column>
@@ -269,11 +269,11 @@ onMounted(() => {
             <el-option v-for="group in groupOptions" :key="group.id" :label="group.groupName" :value="group.id" />
           </el-select>
         </el-form-item>
-        <el-form-item label="店铺名称" required>
-          <el-input v-model="form.shopName" placeholder="店铺名称" />
+        <el-form-item label="店铺名" required>
+          <el-input v-model="form.shopName" placeholder="店铺名" />
         </el-form-item>
-        <el-form-item label="商城名称" required>
-          <el-input v-model="form.mallName" placeholder="如 amazon" />
+        <el-form-item label="店铺商城名" required>
+          <el-input v-model="form.mallName" placeholder="店铺商城名" />
         </el-form-item>
         <el-form-item label="账号" required>
           <el-input v-model="form.account" placeholder="登录账号" />
@@ -293,9 +293,9 @@ onMounted(() => {
 
     <el-dialog v-model="credentialVisible" title="店铺明文凭据" width="560px">
       <el-descriptions v-if="credential" :column="1" border>
-        <el-descriptions-item label="店铺名称">{{ credential.shopName }}</el-descriptions-item>
+        <el-descriptions-item label="店铺名">{{ credential.shopName }}</el-descriptions-item>
         <el-descriptions-item label="分组">{{ credential.groupName || '—' }}</el-descriptions-item>
-        <el-descriptions-item label="商城">{{ credential.mallName || '—' }}</el-descriptions-item>
+        <el-descriptions-item label="店铺商城名">{{ credential.mallName || '—' }}</el-descriptions-item>
         <el-descriptions-item label="账号">{{ credential.account }}</el-descriptions-item>
         <el-descriptions-item label="密码">
           <code>{{ credential.password }}</code>
diff --git a/admin-frontend-vue/tests/align-shop-columns.test.ts b/admin-frontend-vue/tests/align-shop-columns.test.ts
new file mode 100644
index 00000000..fd013408
--- /dev/null
+++ b/admin-frontend-vue/tests/align-shop-columns.test.ts
@@ -0,0 +1,25 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readSource } from './helpers.ts'
+
+/** 对齐 admin.html:5298-5300(店铺密钥 序号/紫鸟账号名称) 与 5339-5348(店铺管理列序与列名)。 */
+
+test('align_shop_keys_columns', () => {
+  const page = readSource('src/pages/shop/ShopKeysPage.vue')
+  assert.match(page, /label="序号"/, '首列改序号')
+  assert.match(page, /type="index"/, '序号列按行号生成')
+  assert.match(page, /紫鸟账号名称/, '列名对齐「紫鸟账号名称」')
+  assert.doesNotMatch(page, /label="ID"/, '去掉 ID 列')
+})
+
+test('align_shop_manage_columns_order_and_labels', () => {
+  const page = readSource('src/pages/shop/ShopManagePage.vue')
+  assert.match(page, /label="序号"/, '首列改序号')
+  assert.doesNotMatch(page, /label="ID"/, '去掉 ID 列')
+  // 列序：分组 → 店铺名 → 店铺商城名 → 自动化账号 → 账号 → 密码（对齐 admin.html:5339-5348）。
+  const table = page.slice(page.indexOf('<el-table'))
+  const orderMatch = /label="分组"[\s\S]*?label="店铺名"[\s\S]*?label="店铺商城名"[\s\S]*?label="自动化账号"[\s\S]*?label="账号"[\s\S]*?label="密码"/.exec(table)
+  assert.ok(orderMatch, '店铺管理列序对齐参考')
+  assert.doesNotMatch(table, /店铺名称/, '列名对齐「店铺名」')
+  assert.doesNotMatch(table, /label="商城"/, '列名对齐「店铺商城名」')
+})
diff --git a/admin-frontend-vue/tests/task-263.test.ts b/admin-frontend-vue/tests/task-263.test.ts
index f5a16109..2954b7a0 100644
--- a/admin-frontend-vue/tests/task-263.test.ts
+++ b/admin-frontend-vue/tests/task-263.test.ts
@@ -8,7 +8,8 @@ import { readSource } from './helpers.ts'
 test('test_task_263_shop_manage_normal_primary_path', () => {
   const page = readSource('src/pages/shop/ShopManagePage.vue')
   assert.match(page, /分组/, '需有分组列/分组筛选')
-  assert.match(page, /店铺名称/, '需有店铺名称筛选')
+  // 对齐 admin.html:5330/6038 标签名「店铺名」。
+  assert.match(page, /店铺名/, '筛选标签对齐「店铺名」')
   assert.match(page, /shopName/, '店铺名筛选绑定 shopName')
 })