201 lines
7.9 KiB
Vue
201 lines
7.9 KiB
Vue
<script setup lang="ts">
|
|
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, normalizeZiniaoToken } from './shop-key-form-model.ts'
|
|
import type { ShopKeyItem } from './shop-dto.ts'
|
|
import { whitelistStatusMeta } from './shop-key-model.ts'
|
|
|
|
const loading = ref(false)
|
|
const rows = ref<ShopKeyItem[]>([])
|
|
const total = ref(0)
|
|
const page = ref(1)
|
|
const pageSize = 15
|
|
|
|
const dialogVisible = ref(false)
|
|
const editingId = ref<number | null>(null)
|
|
const saving = ref(false)
|
|
const form = reactive(emptyShopKeyForm())
|
|
|
|
function maskToken(token: string): string {
|
|
const value = (token || '')
|
|
if (value.length <= 8) return '••••••••'
|
|
return `${value.slice(0, 4)}••••••••${value.slice(-4)}`
|
|
}
|
|
|
|
/** 编辑时保留原令牌的内存引用：令牌不落页面明文展示，留空提交则沿用原令牌。 */
|
|
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() {
|
|
loading.value = true
|
|
try {
|
|
const result = await fetchShopKeyList({ page: page.value, pageSize })
|
|
rows.value = result.items
|
|
total.value = result.total
|
|
page.value = result.page
|
|
} catch (error) {
|
|
ElMessage.error(error instanceof Error ? error.message : '密钥列表加载失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function openCreate() {
|
|
editingId.value = null
|
|
Object.assign(form, emptyShopKeyForm())
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
function openEdit(row: ShopKeyItem) {
|
|
editingId.value = row.id
|
|
originalToken.value = row.ziniaoToken
|
|
Object.assign(form, emptyShopKeyForm())
|
|
form.remarkName = row.remarkName
|
|
form.ziniaoAccountName = row.ziniaoAccountName
|
|
dialogVisible.value = true
|
|
}
|
|
|
|
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 (creating) {
|
|
await submitCreateShopKey({ ...form })
|
|
} else {
|
|
await updateShopKey(editingId.value as number, { ...form })
|
|
}
|
|
ElMessage.success(creating ? '已新增' : '已保存')
|
|
dialogVisible.value = false
|
|
load()
|
|
} catch (error) {
|
|
ElMessage.error(error instanceof Error ? error.message : '保存失败')
|
|
} finally {
|
|
saving.value = false
|
|
}
|
|
}
|
|
|
|
async function remove(row: ShopKeyItem) {
|
|
try {
|
|
await ElMessageBox.confirm(`确定删除店铺密钥“${row.ziniaoAccountName}”吗？`, '删除确认', { type: 'warning' })
|
|
} catch {
|
|
return
|
|
}
|
|
try {
|
|
await deleteShopKey(row.id)
|
|
ElMessage.success('已删除')
|
|
load()
|
|
} catch (error) {
|
|
ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
|
}
|
|
}
|
|
|
|
onMounted(load)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-stack">
|
|
<div class="page-heading">
|
|
<div>
|
|
<h2>店铺密钥管理</h2>
|
|
<p>管理各店铺的紫鸟浏览器账号与令牌。</p>
|
|
</div>
|
|
<el-button type="primary" @click="openCreate">新增密钥</el-button>
|
|
</div>
|
|
|
|
<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="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="白名单状态" 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="操作" width="160" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button text type="primary" size="small" @click="openEdit(row as ShopKeyItem)">编辑</el-button>
|
|
<el-button text 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="prev, pager, next, jumper" :total="total" :page-size="pageSize" :current-page="page" @current-change="(p: number) => { page = p; load() }" />
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-dialog v-model="dialogVisible" :title="editingId == null ? '新增密钥' : '编辑密钥'" width="560px">
|
|
<el-form label-width="110px">
|
|
<el-form-item label="备注名">
|
|
<el-input v-model="form.remarkName" placeholder="可选" />
|
|
</el-form-item>
|
|
<el-form-item label="紫鸟账号" required>
|
|
<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="editingId == null ? '粘贴紫鸟令牌（将自动去除 Bearer 前缀）' : '留空则沿用原令牌；如需更换请粘贴新令牌（将自动去除 Bearer 前缀）'"
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="dialogVisible = false">取消</el-button>
|
|
<el-button type="primary" :loading="saving" @click="submit">保存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</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; }
|
|
</style>
|