fix(admin): 后台时间统一展示为 YYYY-MM-DD HH:mm:ss（formatDateTime 全页接入）
This commit is contained in:
@@ -0,0 +1,169 @@
|
||||
<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 } from './shop-key-form-model.ts'
|
||||
import type { ShopKeyItem } from './shop-dto.ts'
|
||||
import { toSensitiveString, type IpWhitelistStatus } from './shop-dto.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)}`
|
||||
}
|
||||
|
||||
function statusText(status: IpWhitelistStatus): string {
|
||||
return status === 'ALLOWED' ? '已白名单' : status === 'BLOCKED' ? '被拦截' : '未知'
|
||||
}
|
||||
|
||||
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
|
||||
Object.assign(form, emptyShopKeyForm())
|
||||
form.remarkName = row.remarkName
|
||||
form.ziniaoAccountName = row.ziniaoAccountName
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
saving.value = true
|
||||
try {
|
||||
if (editingId.value == null) {
|
||||
await submitCreateShopKey({ ...form })
|
||||
} else {
|
||||
await updateShopKey(editingId.value, { ...form })
|
||||
}
|
||||
ElMessage.success(editingId.value == null ? '已新增' : '已保存')
|
||||
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="IP白名单" width="130" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="(row as ShopKeyItem).ipWhitelistStatus === 'ALLOWED' ? 'success' : (row as ShopKeyItem).ipWhitelistStatus === 'BLOCKED' ? 'danger' : 'info'" size="small">
|
||||
{{ statusText((row as ShopKeyItem).ipWhitelistStatus) }}
|
||||
</el-tag>
|
||||
</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 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="粘贴紫鸟令牌（将自动去除 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>
|
||||
@@ -0,0 +1,270 @@
|
||||
<script setup lang="ts">
|
||||
import { formatDateTime } from '@/utils/datetime'
|
||||
/** 店铺管理页：分组/关键字筛选 + 分页 + 新增/编辑/凭证明文/删除。 */
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useAdminSessionStore } from '@/stores/admin-session'
|
||||
import {
|
||||
deleteShopManage,
|
||||
fetchShopCredential,
|
||||
fetchShopManageGroups,
|
||||
fetchShopManageList,
|
||||
submitCreateShopManage,
|
||||
submitUpdateShopManage,
|
||||
} from './shop-manage-api.ts'
|
||||
import { emptyShopManageForm } from './shop-manage-form-model.ts'
|
||||
import type { ShopCredential, ShopGroupOption, ShopSummary } from './shop-dto.ts'
|
||||
|
||||
const session = useAdminSessionStore()
|
||||
const loading = ref(false)
|
||||
const rows = ref<ShopSummary[]>([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const pageSize = 15
|
||||
|
||||
const groups = ref<ShopGroupOption[]>([])
|
||||
const filter = reactive({ shopName: '', groupId: null as number | null })
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const editingId = ref<number | null>(null)
|
||||
const saving = ref(false)
|
||||
const form = reactive(emptyShopManageForm())
|
||||
|
||||
const credentialVisible = ref(false)
|
||||
const credential = ref<ShopCredential | null>(null)
|
||||
|
||||
const groupOptions = computed(() => groups.value)
|
||||
|
||||
async function loadGroups() {
|
||||
try {
|
||||
groups.value = await fetchShopManageGroups()
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '分组加载失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await fetchShopManageList({
|
||||
page: page.value,
|
||||
pageSize,
|
||||
groupId: filter.groupId,
|
||||
shopName: filter.shopName.trim() || undefined,
|
||||
})
|
||||
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 apply() {
|
||||
page.value = 1
|
||||
load()
|
||||
}
|
||||
|
||||
function reset() {
|
||||
filter.shopName = ''
|
||||
filter.groupId = null
|
||||
page.value = 1
|
||||
load()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editingId.value = null
|
||||
Object.assign(form, emptyShopManageForm())
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row: ShopSummary) {
|
||||
editingId.value = row.id
|
||||
Object.assign(form, {
|
||||
groupId: row.groupId,
|
||||
shopName: row.shopName,
|
||||
mallName: row.mallName,
|
||||
znUsername: row.znUsername,
|
||||
account: row.account,
|
||||
password: '',
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
saving.value = true
|
||||
try {
|
||||
const createdById = session.user?.id ?? 0
|
||||
if (editingId.value == null) {
|
||||
await submitCreateShopManage({ ...form }, createdById)
|
||||
ElMessage.success('已新增店铺')
|
||||
} else {
|
||||
await submitUpdateShopManage(editingId.value, { ...form })
|
||||
ElMessage.success('已保存')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
load()
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '保存失败')
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function showCredential(row: ShopSummary) {
|
||||
try {
|
||||
credential.value = await fetchShopCredential(row.id, row.shopName)
|
||||
credentialVisible.value = true
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '读取凭证失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function remove(row: ShopSummary) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确认删除店铺「${row.shopName}」？`, '删除店铺', { type: 'warning' })
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await deleteShopManage(row.id)
|
||||
ElMessage.success('已删除')
|
||||
load()
|
||||
} catch (error) {
|
||||
ElMessage.error(error instanceof Error ? error.message : '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function copyCredential(text: string) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
ElMessage.success('已复制')
|
||||
} catch {
|
||||
ElMessage.warning('复制失败，请手动选择复制')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadGroups()
|
||||
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" style="margin-bottom: 14px">
|
||||
<div class="filter-grid">
|
||||
<div class="f-item">
|
||||
<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>
|
||||
</div>
|
||||
<div class="f-item">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<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="shopName" label="店铺名称" min-width="160" />
|
||||
<el-table-column prop="mallName" label="商城" min-width="120" />
|
||||
<el-table-column prop="groupName" label="分组" min-width="120" />
|
||||
<el-table-column prop="account" label="账号" min-width="140" />
|
||||
<el-table-column label="密码" width="140">
|
||||
<template #default="{ row }">{{ (row as ShopSummary).passwordMasked || '—' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="znUsername" label="自动化账号" min-width="140">
|
||||
<template #default="{ row }">{{ (row as ShopSummary).znUsername || '—' }}</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 label="操作" width="220" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button text type="primary" size="small" @click="openEdit(row as ShopSummary)">编辑</el-button>
|
||||
<el-button text type="warning" size="small" @click="showCredential(row as ShopSummary)">凭证</el-button>
|
||||
<el-button text 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="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="600px">
|
||||
<el-form label-width="120px">
|
||||
<el-form-item label="所属分组" required>
|
||||
<el-select v-model="form.groupId" placeholder="选择分组">
|
||||
<el-option v-for="group in groupOptions" :key="group.id" :label="group.groupName" :value="group.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="店铺名称" required>
|
||||
<el-input v-model="form.shopName" placeholder="店铺名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商城名称" required>
|
||||
<el-input v-model="form.mallName" placeholder="如 amazon" />
|
||||
</el-form-item>
|
||||
<el-form-item label="账号" required>
|
||||
<el-input v-model="form.account" placeholder="登录账号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" required>
|
||||
<el-input v-model="form.password" type="password" show-password :placeholder="editingId == null ? '登录密码' : '留空则不修改？(后端必填，编辑需重填)'" />
|
||||
</el-form-item>
|
||||
<el-form-item label="自动化账号">
|
||||
<el-input v-model="form.znUsername" placeholder="可选，紫鸟自动化账号" />
|
||||
</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>
|
||||
|
||||
<el-dialog v-model="credentialVisible" title="店铺明文凭据" width="560px">
|
||||
<el-descriptions v-if="credential" :column="1" border>
|
||||
<el-descriptions-item label="店铺名称">{{ credential.shopName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="分组">{{ credential.groupName || '—' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="商城">{{ credential.mallName || '—' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="账号">{{ credential.account }}</el-descriptions-item>
|
||||
<el-descriptions-item label="密码">
|
||||
<code>{{ credential.password }}</code>
|
||||
<el-button text type="primary" size="small" @click="copyCredential(credential.password)">复制</el-button>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="自动化账号">{{ credential.znUsername || '—' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<p class="dim">明文凭据仅在本窗口临时显示，请勿外泄。</p>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</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; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user