align(shop·像素复刻): 店铺密钥/店铺管理 两页自绘复刻旧版(panel-shop-keys/shop-manage)——序号列+令牌掩码+白名单状态药丸(正常绿/未加白名单红/未检测灰)+悬停详情、密码列******+眼睛实时读明文、btn-sm行操作+原生confirm删除+旧式分页

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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { formatDateTime } from '@/utils/datetime'
-/** 店铺管理页：分组/关键字筛选 + 分页 + 新增/编辑/凭证明文/删除。 */
+/** 店铺管理页 · 像素复刻旧版 admin.html panel-shop-manage（自绘：面板头+新增店铺、筛选、密码列 ******+眼睛实时读明文、旧式表格/分页、原生 confirm 删除）。
+ *   script 逻辑沿用现有 Vue 实现（凭证明文 dialog/编辑弹窗/分组筛选）。 */
 import { computed, onMounted, reactive, ref } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import { useAdminSessionStore } from '@/stores/admin-session'
 import {
   deleteShopManage,
@@ -20,7 +21,9 @@ const loading = ref(false)
 const rows = ref<ShopSummary[]>([])
 const total = ref(0)
 const page = ref(1)
-const pageSize = ref(10)
+const pageSize = 15
+const jumpPage = ref('')
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize)))
 
 const groups = ref<ShopGroupOption[]>([])
 const filter = reactive({ shopName: '', groupId: null as number | null })
@@ -75,7 +78,7 @@ async function load() {
   try {
     const result = await fetchShopManageList({
       page: page.value,
-      pageSize: pageSize.value,
+      pageSize,
       groupId: filter.groupId,
       shopName: filter.shopName.trim() || undefined,
     })
@@ -94,17 +97,19 @@ function apply() {
   load()
 }
 
-function changeSize(size: number) {
-  pageSize.value = size
-  page.value = 1
-  load()
+function changePage(next: number) {
+  if (next < 1 || next > totalPages.value) return
+  page.value = next
+  void load()
 }
 
-function reset() {
-  filter.shopName = ''
-  filter.groupId = null
-  page.value = 1
-  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() {
@@ -166,11 +171,8 @@ async function showCredential(row: ShopSummary) {
 }
 
 async function remove(row: ShopSummary) {
-  try {
-    await ElMessageBox.confirm(`确定删除店铺“${row.shopName}”吗？`, '删除确认', { type: 'warning' })
-  } catch {
-    return
-  }
+  // 对齐旧版：原生 confirm。
+  if (!window.confirm(`确定删除店铺“${row.shopName}”吗？`)) return
   try {
     await deleteShopManage(row.id)
     ElMessage.success('已删除')
@@ -196,78 +198,96 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="page-stack">
-    <div class="page-heading">
-      <div>
-        <h2>店铺管理</h2>
-        <p>管理店铺账号、所属分组与自动化账号。</p>
+  <div class="shop-view">
+    <section class="panel-box">
+      <div class="shop-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 shop-filter-row">
+        <div class="form-group" style="min-width: 180px">
           <label>分组</label>
-          <el-select v-model="filter.groupId" placeholder="全部分组" clearable>
-            <el-option v-for="group in groupOptions" :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 groupOptions" :key="group.id" :value="group.id">{{ group.groupName }}</option>
+          </select>
         </div>
-        <div class="f-item">
+        <div class="form-group" style="min-width: 220px">
           <label>店铺名</label>
-          <el-input v-model="filter.shopName" placeholder="模糊搜索店铺名" clearable @keyup.enter="apply" />
-        </div>
-        <div class="f-item btn-row">
-          <el-button type="primary" @click="apply">查询</el-button>
-          <el-button @click="reset">重置</el-button>
+          <input v-model="filter.shopName" type="text" placeholder="请输入店铺名" @keyup.enter="apply" />
         </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 shop-manage-table-scroll">
+        <table>
+          <thead>
+            <tr>
+              <th style="width: 58px">序号</th>
+              <th style="width: 120px">分组</th>
+              <th style="width: 150px">店铺名</th>
+              <th style="width: 130px">店铺商城名</th>
+              <th style="width: 130px">自动化账号</th>
+              <th style="width: 130px">账号</th>
+              <th style="width: 170px">密码</th>
+              <th style="width: 170px">创建时间</th>
+              <th style="width: 170px">修改时间</th>
+              <th style="width: 220px">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <template v-if="rows.length">
+              <tr v-for="(row, index) in rows" :key="row.id">
+                <td>{{ (page - 1) * pageSize + index + 1 }}</td>
+                <td data-text :title="row.groupName || '—'">{{ row.groupName || '—' }}</td>
+                <td :title="row.shopName">{{ row.shopName }}</td>
+                <td :title="row.mallName || '—'">{{ row.mallName || '—' }}</td>
+                <td :title="row.znUsername || '—'">{{ row.znUsername || '—' }}</td>
+                <td :title="row.account">{{ row.account }}</td>
+                <td>
+                  <span class="pwd-cell">{{ shownPassword(row) }}</span>
+                  <button
+                    class="pwd-eye btn btn-sm btn-secondary"
+                    type="button"
+                    :aria-label="revealedRowId === row.id ? '隐藏密码' : '显示密码'"
+                    @click="togglePassword(row)"
+                  >
+                    {{ revealedRowId === row.id ? '隐藏' : '显示' }}
+                  </button>
+                </td>
+                <td>{{ formatDateTime(row.createdAt) }}</td>
+                <td>{{ formatDateTime(row.updatedAt) }}</td>
+                <td class="ops-cell">
+                  <button class="btn btn-sm" type="button" @click="openEdit(row)">编辑</button>
+                  <button class="btn btn-sm btn-secondary" type="button" @click="showCredential(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="10" class="empty-tip">加载中...</td>
+            </tr>
+            <tr v-else>
+              <td colspan="10" class="empty-tip">暂无店铺</td>
+            </tr>
+          </tbody>
+        </table>
       </div>
-      <el-table v-loading="loading" :data="rows" stripe border>
-        <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="密码" min-width="170">
-          <template #default="{ row }">
-            <span class="pwd-cell">{{ shownPassword(row as ShopSummary) }}</span>
-            <el-button
-              link
-              type="primary"
-              size="small"
-              :aria-label="revealedRowId === (row as ShopSummary).id ? '隐藏密码' : '显示密码'"
-              @click="togglePassword(row as ShopSummary)"
-            >
-              {{ revealedRowId === (row as ShopSummary).id ? '隐藏' : '显示' }}
-            </el-button>
-          </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="操作" min-width="220" fixed="right">
-          <template #default="{ row }">
-            <el-button type="primary" size="small" @click="openEdit(row as ShopSummary)">编辑</el-button>
-            <el-button type="warning" size="small" @click="showCredential(row as ShopSummary)">凭证</el-button>
-            <el-button type="danger" size="small" @click="remove(row as ShopSummary)">删除</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="changeSize" />
+
+      <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 ? '新增店铺' : '编辑店铺'" width="600px">
       <el-form label-width="120px">
@@ -316,14 +336,238 @@ 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); }
-.dim { color: var(--el-text-color-secondary); font-size: 12px; }
-.pwd-cell { font-family: Consolas, monospace; font-size: 12px; margin-right: 6px; }
+/* 像素复刻旧版 admin.html panel-shop-manage（蓝白末层）。 */
+.shop-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;
+}
+.shop-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-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;
+}
+.shop-manage-table-scroll > table {
+  min-width: 1200px;
+}
+.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;
+}
+.pwd-cell {
+  font-family: Consolas, monospace;
+  font-size: 12.5px;
+  margin-right: 6px;
+}
+.pwd-eye {
+  min-height: 28px;
+  padding: 3px 10px;
+  font-size: 12px;
+}
+.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;
+}
+.dim {
+  color: #8293a5;
+  font-size: 12px;
+}
 </style>