align(shop·像素复刻): 店铺密钥/店铺管理 两页自绘复刻旧版(panel-shop-keys/shop-manage)——序号列+令牌掩码+白名单状态药丸(正常绿/未加白名单红/未检测灰)+悬停详情、密码列******+眼睛实时读明文、btn-sm行操作+原生confirm删除+旧式分页
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -7,8 +7,6 @@ import { readSource } from './helpers.ts'
|
||||
// 例外：DuplicateCheckPage 不动；dialog/表单的 width 不属于表格列。
|
||||
|
||||
const PAGES = [
|
||||
'src/pages/shop/ShopKeysPage.vue',
|
||||
'src/pages/shop/ShopManagePage.vue',
|
||||
'src/pages/records/RecordsDigitalHumanVersionPage.vue',
|
||||
'src/pages/records/RecordsSoftwareVersionPage.vue',
|
||||
'src/pages/tasks/ImageVideoTasksPage.vue',
|
||||
@@ -63,6 +61,8 @@ test('align_column_width_boundary_empty_input', () => {
|
||||
['src/pages/asin/QueryAsinPage.vue', 'query-asin-table-scroll'],
|
||||
['src/pages/asin/SkipPricePage.vue', 'skip-price-asin-table-scroll'],
|
||||
['src/pages/asin/ProductCategoryPage.vue', 'category-table-scroll'],
|
||||
['src/pages/shop/ShopKeysPage.vue', 'shop-key-table-scroll'],
|
||||
['src/pages/shop/ShopManagePage.vue', 'shop-manage-table-scroll'],
|
||||
]) {
|
||||
const src = readSource(page)
|
||||
assert.equal(/el-table-column/.test(src), false, `${page} 已像素复刻原生表格，不再有 el-table-column`)
|
||||
|
||||
@@ -43,13 +43,7 @@ test('align_pagination_boundary_single_item', () => {
|
||||
})
|
||||
|
||||
test('align_pagination_repeated_operation_is_idempotent', () => {
|
||||
// 已有分页的页面保持原样，不被破坏；已像素复刻(自绘旧式分页/原生表格)的页单独断言。
|
||||
for (const page of [
|
||||
'src/pages/shop/ShopManagePage.vue',
|
||||
]) {
|
||||
const src = readSource(page)
|
||||
assert.match(src, /el-pagination/, `${page} 既有分页保留`)
|
||||
}
|
||||
// 已像素复刻(自绘旧式分页/原生表格)的页单独断言。
|
||||
const users = readSource('src/pages/account/UsersPage.vue')
|
||||
assert.match(users, /class="pagination"/, '用户页已像素复刻，用旧式分页容器')
|
||||
assert.doesNotMatch(users, /el-pagination/, '用户页不再用 EP 分页')
|
||||
@@ -59,4 +53,10 @@ test('align_pagination_repeated_operation_is_idempotent', () => {
|
||||
const invalid = readSource('src/pages/asin/AsinInvalidPage.vue')
|
||||
assert.match(invalid, /class="pagination"/, '品牌库已像素复刻，用旧式分页容器')
|
||||
assert.doesNotMatch(invalid, /el-pagination/, '品牌库不再用 EP 分页')
|
||||
const shops = readSource('src/pages/shop/ShopManagePage.vue')
|
||||
assert.match(shops, /class="pagination"/, '店铺管理已像素复刻，用旧式分页容器')
|
||||
assert.doesNotMatch(shops, /el-pagination/, '店铺管理不再用 EP 分页')
|
||||
const keys = readSource('src/pages/shop/ShopKeysPage.vue')
|
||||
assert.match(keys, /class="pagination"/, '店铺密钥已像素复刻，用旧式分页容器')
|
||||
assert.doesNotMatch(keys, /el-pagination/, '店铺密钥不再用 EP 分页')
|
||||
})
|
||||
|
||||
@@ -15,12 +15,13 @@ test('align_shop_keys_columns', () => {
|
||||
|
||||
test('align_shop_manage_columns_order_and_labels', () => {
|
||||
const page = readSource('src/pages/shop/ShopManagePage.vue')
|
||||
assert.doesNotMatch(page, /label="序号"/, '不再展示序号列')
|
||||
// 像素复刻旧版 panel-shop-manage：序号列保留(admin.html:5339)。
|
||||
assert.match(page, /序号/, '按旧版展示序号列')
|
||||
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)
|
||||
// 列序：序号 → 分组 → 店铺名 → 店铺商城名 → 自动化账号 → 账号 → 密码（对齐 admin.html:5339-5348）。
|
||||
const table = page.slice(page.indexOf('<table'))
|
||||
const orderMatch = /序号[\s\S]*?分组[\s\S]*?店铺名[\s\S]*?店铺商城名[\s\S]*?自动化账号[\s\S]*?账号[\s\S]*?密码/.exec(table)
|
||||
assert.ok(orderMatch, '店铺管理列序对齐参考')
|
||||
assert.doesNotMatch(table, /店铺名称/, '列名对齐「店铺名」')
|
||||
assert.doesNotMatch(table, /label="商城"/, '列名对齐「店铺商城名」')
|
||||
assert.doesNotMatch(table, />商城</, '列名对齐「店铺商城名」')
|
||||
})
|
||||
|
||||
@@ -10,17 +10,20 @@ function assertRowButtonSolid(source: string, action: string) {
|
||||
assert.doesNotMatch(source, new RegExp(`<el-button[^>]*text[^>]*@click="${action}`), `${action} 不再 text`)
|
||||
}
|
||||
|
||||
test('align_shop_manage_row_buttons_solid', () => {
|
||||
test('align_shop_manage_row_buttons_old_btn', () => {
|
||||
const s = readSource('src/pages/shop/ShopManagePage.vue')
|
||||
assertRowButtonSolid(s, 'openEdit')
|
||||
assertRowButtonSolid(s, 'showCredential')
|
||||
assertRowButtonSolid(s, 'remove')
|
||||
assert.match(s, /class="btn btn-sm"[^>]*@click="openEdit\(row\)"/, '编辑用旧版 btn-sm 实心小按钮')
|
||||
assert.match(s, /class="btn btn-sm btn-secondary"[^>]*@click="showCredential\(row\)"/, '凭证用旧版 btn-sm btn-secondary')
|
||||
assert.match(s, /class="btn btn-sm btn-danger"[^>]*@click="remove\(row\)"/, '删除用旧版 btn-sm btn-danger')
|
||||
assert.doesNotMatch(s, /el-button[^>]*@click="openEdit/, '行内不再用 EP 按钮')
|
||||
assert.match(s, /window\.confirm\(`确定删除店铺/, '删除确认原生 confirm 对齐旧版')
|
||||
})
|
||||
|
||||
test('align_shop_keys_row_buttons_solid', () => {
|
||||
test('align_shop_keys_row_buttons_old_btn', () => {
|
||||
const s = readSource('src/pages/shop/ShopKeysPage.vue')
|
||||
assertRowButtonSolid(s, 'openEdit')
|
||||
assertRowButtonSolid(s, 'remove')
|
||||
assert.match(s, /class="btn btn-sm"[^>]*@click="openEdit\(row\)"/, '编辑用旧版 btn-sm 实心小按钮')
|
||||
assert.match(s, /class="btn btn-sm btn-danger"[^>]*@click="remove\(row\)"/, '删除用旧版 btn-sm btn-danger')
|
||||
assert.doesNotMatch(s, /el-button[^>]*@click="openEdit/, '行内不再用 EP 按钮')
|
||||
})
|
||||
|
||||
test('align_records_history_thumb_click_opens_preview', () => {
|
||||
|
||||
Reference in New Issue
Block a user