task-262(admin.html观感对齐): 店铺密钥页对齐（三态白名单药丸+悬停详情/修改时间列/编辑令牌留空沿用/删除文案）

admin-frontend-vue/src/pages/shop/ShopKeysPage.vue

@@ -4,9 +4,9 @@ import { formatDateTime } from '@/utils/datetime'
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { fetchShopKeyList, submitCreateShopKey, updateShopKey, deleteShopKey } from './shop-key-api.ts'
-import { emptyShopKeyForm } from './shop-key-form-model.ts'
+import { emptyShopKeyForm, normalizeZiniaoToken } from './shop-key-form-model.ts'
 import type { ShopKeyItem } from './shop-dto.ts'
-import { toSensitiveString, type IpWhitelistStatus } from './shop-dto.ts'
+import { whitelistStatusMeta } from './shop-key-model.ts'
 
 const loading = ref(false)
 const rows = ref<ShopKeyItem[]>([])
@@ -25,8 +25,16 @@ function maskToken(token: string): string {
   return `${value.slice(0, 4)}••••••••${value.slice(-4)}`
 }
 
-function statusText(status: IpWhitelistStatus): string {
+/** 编辑时保留原令牌的内存引用：令牌不落页面明文展示，留空提交则沿用原令牌。 */
-  return status === 'ALLOWED' ? '已白名单' : status === 'BLOCKED' ? '被拦截' : '未知'
+const originalToken = ref('')
+
+/** 白名单状态药丸悬停详情：检测时间 + 检测消息（对齐 admin）。 */
+function whitelistTooltip(row: ShopKeyItem): string {
+  const parts: string[] = []
+  if (row.ipWhitelistCheckedAt) parts.push(`检测时间：${formatDateTime(row.ipWhitelistCheckedAt)}`)
+  if (row.ipWhitelistMessage) parts.push(row.ipWhitelistMessage)
+  if (parts.length === 0) parts.push(`白名单状态：${whitelistStatusMeta(row.ipWhitelistStatus).label}`)
+  return parts.join('\n')
 }
 
 async function load() {
@@ -51,6 +59,7 @@ function openCreate() {
 
 function openEdit(row: ShopKeyItem) {
   editingId.value = row.id
+  originalToken.value = row.ziniaoToken
   Object.assign(form, emptyShopKeyForm())
   form.remarkName = row.remarkName
   form.ziniaoAccountName = row.ziniaoAccountName
@@ -58,14 +67,26 @@ function openEdit(row: ShopKeyItem) {
 }
 
 async function submit() {
+  const token = normalizeZiniaoToken(form.ziniaoToken)
+  const creating = editingId.value == null
+  if (creating && !token) {
+    ElMessage.warning('请完整填写紫鸟账号名称、紫鸟令牌')
+    return
+  }
+  if (!(form.ziniaoAccountName || '').trim()) {
+    ElMessage.warning('请完整填写紫鸟账号名称、紫鸟令牌')
+    return
+  }
+  // 编辑留空令牌 = 沿用原令牌（令牌不明文展示）。
+  form.ziniaoToken = creating ? token : token || originalToken.value
   saving.value = true
   try {
-    if (editingId.value == null) {
+    if (creating) {
       await submitCreateShopKey({ ...form })
     } else {
-      await updateShopKey(editingId.value, { ...form })
+      await updateShopKey(editingId.value as number, { ...form })
     }
-    ElMessage.success(editingId.value == null ? '已新增' : '已保存')
+    ElMessage.success(creating ? '已新增' : '已保存')
     dialogVisible.value = false
     load()
   } catch (error) {
@@ -77,7 +98,7 @@ async function submit() {
 
 async function remove(row: ShopKeyItem) {
   try {
-    await ElMessageBox.confirm(`确认删除密钥「${row.ziniaoAccountName}」？`, '删除密钥', { type: 'warning' })
+    await ElMessageBox.confirm(`确定删除店铺密钥“${row.ziniaoAccountName}”吗？`, '删除确认', { type: 'warning' })
   } catch {
     return
   }
@@ -117,16 +138,21 @@ onMounted(load)
             </el-tooltip>
           </template>
         </el-table-column>
-        <el-table-column label="IP白名单" width="130" align="center">
+        <el-table-column label="白名单状态" width="150" align="center">
           <template #default="{ row }">
-            <el-tag :type="(row as ShopKeyItem).ipWhitelistStatus === 'ALLOWED' ? 'success' : (row as ShopKeyItem).ipWhitelistStatus === 'BLOCKED' ? 'danger' : 'info'" size="small">
+            <el-tooltip :content="whitelistTooltip(row as ShopKeyItem)" placement="top">
-              {{ statusText((row as ShopKeyItem).ipWhitelistStatus) }}
+              <el-tag :type="whitelistStatusMeta((row as ShopKeyItem).ipWhitelistStatus).tag" size="small">
-            </el-tag>
+                {{ whitelistStatusMeta((row as ShopKeyItem).ipWhitelistStatus).label }}
+              </el-tag>
+            </el-tooltip>
           </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 prop="updatedAt" label="修改时间" min-width="170">
+          <template #default="{ row }">{{ formatDateTime(row.updatedAt) }}</template>
+        </el-table-column>
         <el-table-column label="操作" width="160" fixed="right">
           <template #default="{ row }">
             <el-button text type="primary" size="small" @click="openEdit(row as ShopKeyItem)">编辑</el-button>
@@ -149,7 +175,12 @@ onMounted(load)
           <el-input v-model="form.ziniaoAccountName" placeholder="紫鸟浏览器账号名称" />
         </el-form-item>
         <el-form-item label="紫鸟令牌" required>
-          <el-input v-model="form.ziniaoToken" type="textarea" :rows="3" placeholder="粘贴紫鸟令牌（将自动去除 Bearer 前缀）" />
+          <el-input
+            v-model="form.ziniaoToken"
+            type="textarea"
+            :rows="3"
+            :placeholder="editingId == null ? '粘贴紫鸟令牌（将自动去除 Bearer 前缀）' : '留空则沿用原令牌；如需更换请粘贴新令牌（将自动去除 Bearer 前缀）'"
+          />
         </el-form-item>
       </el-form>
       <template #footer>

admin-frontend-vue/src/pages/shop/shop-key-model.ts

@@ -24,6 +24,26 @@ export function normalizeIpWhitelistStatus(value: unknown): IpWhitelistStatus {
   return (IP_WHITELIST_VALUES.includes(textValue) ? textValue : 'UNKNOWN') as IpWhitelistStatus
 }
 
+export interface WhitelistStatusMeta {
+  /** 展示文案（对齐 admin：正常/未加白名单/未检测）。 */
+  label: string
+  /** Element tag 语义色。 */
+  tag: 'success' | 'danger' | 'info'
+}
+
+/** admin 三态文案：ALLOWED→正常、BLOCKED→未加白名单、UNKNOWN→未检测。 */
+const SHOP_KEY_STATUS_META: Record<IpWhitelistStatus, WhitelistStatusMeta> = {
+  ALLOWED: { label: '正常', tag: 'success' },
+  BLOCKED: { label: '未加白名单', tag: 'danger' },
+  UNKNOWN: { label: '未检测', tag: 'info' },
+}
+
+/** 白名单状态 → 展示元数据；未知回「未检测」。 */
+export function whitelistStatusMeta(status: IpWhitelistStatus | null | undefined): WhitelistStatusMeta {
+  const key = normalizeIpWhitelistStatus(status)
+  return SHOP_KEY_STATUS_META[key] || SHOP_KEY_STATUS_META.UNKNOWN
+}
+
 /** 解析单条店铺密钥行；缺 id 视为无效。 */
 export function toShopKeyItem(raw: unknown): ShopKeyItem | null {
   if (!raw || typeof raw !== 'object') return null

admin-frontend-vue/tests/task-262.test.ts

@@ -0,0 +1,61 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { readSource } from './helpers.ts'
+import { whitelistStatusMeta } from '../src/pages/shop/shop-key-model.ts'
+
+// module 13 task 262：店铺密钥页对齐 admin panel-shop-keys（三态白名单药丸+悬停详情、
+// 修改时间列、编辑令牌留空沿用原令牌、创建/删除文案）。
+
+test('test_task_262_shop_keys_normal_primary_path', () => {
+  // 正常主路径：白名单三态文案对齐 admin（ALLOWED 正常 / BLOCKED 未加白名单 / UNKNOWN 未检测）。
+  assert.equal(whitelistStatusMeta('ALLOWED').label, '正常')
+  assert.equal(whitelistStatusMeta('BLOCKED').label, '未加白名单')
+  assert.equal(whitelistStatusMeta('UNKNOWN').label, '未检测')
+  assert.equal(whitelistStatusMeta('ALLOWED').tag, 'success')
+  assert.equal(whitelistStatusMeta('BLOCKED').tag, 'danger')
+  assert.equal(whitelistStatusMeta('UNKNOWN').tag, 'info')
+})
+
+test('test_task_262_shop_keys_normal_variant_input', () => {
+  // 正常变体：未知/空状态兜底为「未检测」。
+  assert.equal(whitelistStatusMeta('X').label, '未检测')
+  assert.equal(whitelistStatusMeta(undefined as never).label, '未检测')
+})
+
+test('test_task_262_shop_keys_normal_repeated_operation_is_idempotent', () => {
+  assert.deepEqual(whitelistStatusMeta('ALLOWED'), whitelistStatusMeta('ALLOWED'))
+  assert.deepEqual(whitelistStatusMeta('UNKNOWN'), whitelistStatusMeta(null as never))
+})
+
+test('test_task_262_shop_keys_boundary_empty_input', () => {
+  const page = readSource('src/pages/shop/ShopKeysPage.vue')
+  assert.match(page, /whitelistStatusMeta|whitelistStatus/, '页面需用统一白名单状态元数据')
+  assert.match(page, /ipWhitelistCheckedAt|ipWhitelistMessage/, '悬停详情需展示检测时间/消息')
+  assert.match(page, /formatDateTime/, '修改/创建时间走统一时间格式')
+})
+
+test('test_task_262_shop_keys_boundary_single_item', () => {
+  // 编辑令牌留空语义：打开编辑不泄露明文，留空提交沿用原令牌。
+  const page = readSource('src/pages/shop/ShopKeysPage.vue')
+  assert.match(page, /originalToken|沿用|留空/, '编辑应有“留空沿用原令牌”语义')
+})
+
+test('test_task_262_shop_keys_boundary_limit_or_missing_field', () => {
+  const page = readSource('src/pages/shop/ShopKeysPage.vue')
+  assert.match(page, /updatedAt/, '需含修改时间列')
+  assert.match(page, /创建时间|创建/, '保留创建时间列')
+})
+
+test('test_task_262_shop_keys_invalid_input_rejected', () => {
+  // 删除/创建校验文案对齐 admin。
+  const page = readSource('src/pages/shop/ShopKeysPage.vue')
+  assert.match(page, /确定删除店铺密钥/, '删除确认需含“确定删除店铺密钥”')
+  assert.match(page, /请完整填写紫鸟账号名称、紫鸟令牌|紫鸟令牌不能为空/, '需有创建校验提示')
+})
+
+test('test_task_262_shop_keys_dependency_failure_returns_actionable_message', () => {
+  // 掩码展示不泄露全量；令牌输入归一（去 Bearer）。
+  const page = readSource('src/pages/shop/ShopKeysPage.vue')
+  assert.match(page, /mask|maskToken|掩码/, '令牌列需掩码展示')
+  assert.match(page, /normalizeZiniaoToken|Bearer/, '令牌提交前去除 Bearer 前缀')
+})