super/crawler-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
黄自达
2026-09-06 23:05:51 +08:00
parent 35ecceacb4
commit f324c6bd3d
6 changed files with 664 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-frontend-vue/src/pages/shop/ShopKeysPage.vue
+305 -63
View File
@@ -1,8 +1,9 @@
<script setup lang="ts">
import { formatDateTime } from '@/utils/datetime'
/** 店铺密钥管理页：分页 + 新增/编辑/删除；紫鸟令牌仅掩码展示。 */
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
/** 店铺密钥管理页 · 像素复刻旧版 admin.html panel-shop-keys（自绘：面板头+新增店铺密钥、序号列、令牌掩码、白名单状态药丸+悬停详情、旧式分页）。
* script 逻辑沿用现有 Vue 实现（编辑留空令牌=沿用）；弹窗保留现有组件。 */
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { fetchShopKeyList, submitCreateShopKey, updateShopKey, deleteShopKey } from './shop-key-api.ts'
import { emptyShopKeyForm, normalizeZiniaoToken } from './shop-key-form-model.ts'
import type { ShopKeyItem } from './shop-dto.ts'
@@ -12,7 +13,9 @@ const loading = ref(false)
const rows = ref<ShopKeyItem[]>([])
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 dialogVisible = ref(false)
const editingId = ref<number | null>(null)
@@ -20,7 +23,7 @@ const saving = ref(false)
const form = reactive(emptyShopKeyForm())
function maskToken(token: string): string {
const value = (token || '')
const value = token || ''
if (value.length <= 8) return '••••••••'
return `${value.slice(0, 4)}••••••••${value.slice(-4)}`
}
@@ -40,7 +43,7 @@ function whitelistTooltip(row: ShopKeyItem): string {
async function load() {
loading.value = true
try {
const result = await fetchShopKeyList({ page: page.value, pageSize: pageSize.value })
const result = await fetchShopKeyList({ page: page.value, pageSize })
rows.value = result.items
total.value = result.total
page.value = result.page
@@ -97,11 +100,8 @@ async function submit() {
}
async function remove(row: ShopKeyItem) {
try {
await ElMessageBox.confirm(`确定删除店铺密钥“${row.ziniaoAccountName}”吗？`, '删除确认', { type: 'warning' })
} catch {
return
}
// 对齐旧版：原生 confirm。
if (!window.confirm(`确定删除店铺密钥“${row.ziniaoAccountName}”吗？`)) return
try {
await deleteShopKey(row.id)
ElMessage.success('已删除')
@@ -111,61 +111,99 @@ async function remove(row: ShopKeyItem) {
}
}
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))
}
onMounted(load)
</script>
<template>
<div class="page-stack">
<div class="page-heading">
<div>
<h2>店铺密钥管理</h2>
<p>管理各店铺的紫鸟浏览器账号与令牌。</p>
<div class="keys-view">
<section class="panel-box">
<div class="keys-head">
<h3>店铺密钥列表</h3>
<button class="btn" type="button" @click="openCreate">新增店铺密钥</button>
</div>
</div>
<el-card shadow="never">
<div class="table-toolbar">
<el-button type="primary" @click="openCreate">新增密钥</el-button>
<div class="shop-key-table-scroll">
<table>
<thead>
<tr>
<th style="width: 58px">序号</th>
<th style="width: 150px">备注名</th>
<th style="width: 160px">紫鸟账号名称</th>
<th style="width: 220px">紫鸟令牌</th>
<th style="width: 150px">白名单状态 <span class="table-help" aria-hidden="true">?</span></th>
<th style="width: 170px">创建时间</th>
<th style="width: 170px">修改时间</th>
<th style="width: 160px">操作</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>{{ row.remarkName || '—' }}</td>
<td>{{ row.ziniaoAccountName }}</td>
<td>
<span class="mono-mask" :title="row.ziniaoToken">{{ maskToken(row.ziniaoToken) }}</span>
</td>
<td>
<span
class="wh-pill"
:class="{
'is-allowed': whitelistStatusMeta(row.ipWhitelistStatus).tag === 'success',
'is-blocked': whitelistStatusMeta(row.ipWhitelistStatus).tag === 'danger',
'is-unknown': whitelistStatusMeta(row.ipWhitelistStatus).tag === 'info',
}"
:title="whitelistTooltip(row)"
>
{{ whitelistStatusMeta(row.ipWhitelistStatus).label }}
</span>
</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-danger" type="button" @click="remove(row)">删除</button>
</td>
</tr>
</template>
<tr v-else-if="loading">
<td colspan="8" class="empty-tip">加载中...</td>
</tr>
<tr v-else>
<td colspan="8" class="empty-tip">暂无店铺密钥</td>
</tr>
</tbody>
</table>
</div>
<el-table v-loading="loading" :data="rows" stripe border>
<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 label="紫鸟令牌" min-width="200">
<template #default="{ row }">
<el-tooltip :content="(row as ShopKeyItem).ziniaoToken" placement="top">
<code class="mono-mask">{{ maskToken((row as ShopKeyItem).ziniaoToken) }}</code>
</el-tooltip>
</template>
</el-table-column>
<el-table-column label="白名单状态" min-width="150" align="center">
<template #default="{ row }">
<el-tooltip :content="whitelistTooltip(row as ShopKeyItem)" placement="top">
<el-tag :type="whitelistStatusMeta((row as ShopKeyItem).ipWhitelistStatus).tag" size="small">
{{ 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="操作" min-width="160" fixed="right">
<template #default="{ row }">
<el-button type="primary" size="small" @click="openEdit(row as ShopKeyItem)">编辑</el-button>
<el-button type="danger" size="small" @click="remove(row as ShopKeyItem)">删除</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 ? '新增密钥' : '编辑密钥'" width="560px">
<el-form label-width="110px">
@@ -193,9 +231,213 @@ onMounted(load)
</template>
<style scoped>
.page-heading { display: flex; justify-content: space-between; align-items: center; }
.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); }
.mono-mask { font-family: Consolas, monospace; font-size: 12px; background: var(--el-fill-color-light); padding: 2px 6px; border-radius: 4px; }
/* 像素复刻旧版 admin.html panel-shop-keys（蓝白末层）。 */
.keys-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;
}
.keys-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.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;
}
.shop-key-table-scroll {
width: 100%;
min-width: 0;
overflow-x: auto;
border: 1px solid #dbe5ee;
border-radius: 10px;
background: #ffffff;
}
.shop-key-table-scroll table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
min-width: 1000px;
}
.shop-key-table-scroll th,
.shop-key-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;
}
.shop-key-table-scroll th {
background: #edf4fa;
color: #4e6479;
border-bottom-color: #d5e1eb;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.4px;
}
.shop-key-table-scroll tbody tr:hover td {
background: #f1f7fb;
}
.shop-key-table-scroll tbody tr:last-child td {
border-bottom: 0;
}
.table-help {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
margin-left: 3px;
border-radius: 50%;
background: #c7d7e5;
color: #fff;
font-size: 10px;
line-height: 1;
}
.mono-mask {
font-family: Consolas, "Cascadia Mono", monospace;
font-size: 12.5px;
letter-spacing: 0.5px;
}
.wh-pill {
display: inline-flex;
align-items: center;
padding: 2px 10px;
border-radius: 999px;
border: 1px solid;
font-size: 12px;
line-height: 1.7;
}
.wh-pill.is-allowed {
color: #3d7158;
background: #e8f2eb;
border-color: #bdd7c5;
}
.wh-pill.is-blocked {
color: #91474f;
background: #f8ebeb;
border-color: #e4c2c5;
}
.wh-pill.is-unknown,
.wh-pill.is-pending,
.wh-pill.is-notchecked {
color: #5b6f83;
background: #f1f6fa;
border-color: #d6e2ec;
}
.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>