feat(admin): family-folded left tree, toolbar regroup, sync log humanize
视觉走查驱动的后台优化（feature/admin-ui-polish-dev，确认后再合并）： - 左树（国家/品类模式）同款多配置折叠为一行族组节点：代表名 + "N 个配置" 徽标，展开看各行；locateInLeftTree 沿父链展开保证定位有效；国家模式 拖拽排序适配族嵌套（同容器内排序，按折叠后展示顺序保序重分配优先级） - 工具栏分区重排：模式切换（品类/国家/全局）移至最左，筛选组居中， 新增自定义商品靠右，消除 1680 宽下的折行错乱 - 商品行属性小字/国家徽标颜色加深提升对比度 - 右树原产品行加拖拽提示 title - 数据同步日志人话化：inserted/updated/total/delisted 等报文渲染为 "新增 0 · 更新 536 · 共计 536"，原始报文进 tooltip - 计划文档 plans/feature/admin-ui-polish-feature.md（含一项误报修正： 右树 29/3 计数为截图裁切误读，实际 29/33 无 bug） 验证：admin typecheck + 22/22 + 构建绿；浏览器实机复拍国家模式折叠、 族组展开、同步页文案均生效
This commit is contained in:
yeuimu
@@ -8,8 +8,8 @@ import { syncApi } from '@/api/sync'
|
||||
const logs = ref<SyncLog[]>([])
|
||||
const loading = ref(false)
|
||||
const syncing = ref(false)
|
||||
type SyncType = 'PRODUCTS' | 'CATEGORIES' | 'PRODUCT_DETAILS'
|
||||
const currentType = ref<SyncType>('PRODUCTS')
|
||||
type SyncType = 'PRODUCTS' | 'CATEGORIES' | 'PRODUCT_DETAILS'
|
||||
const currentType = ref<SyncType>('PRODUCTS')
|
||||
|
||||
let timer: ReturnType<typeof setInterval> | null = null
|
||||
let pollTimer: ReturnType<typeof setInterval> | null = null
|
||||
@@ -26,13 +26,13 @@ async function refreshLogs() {
|
||||
}
|
||||
}
|
||||
|
||||
function syncTypeLabel(type: SyncType): string {
|
||||
if (type === 'CATEGORIES') return '分类'
|
||||
if (type === 'PRODUCT_DETAILS') return '全部原产品详情'
|
||||
return '商品列表'
|
||||
}
|
||||
|
||||
async function pollUntilDone(type: SyncType) {
|
||||
function syncTypeLabel(type: SyncType): string {
|
||||
if (type === 'CATEGORIES') return '分类'
|
||||
if (type === 'PRODUCT_DETAILS') return '全部原产品详情'
|
||||
return '商品列表'
|
||||
}
|
||||
|
||||
async function pollUntilDone(type: SyncType) {
|
||||
if (pollTimer) clearInterval(pollTimer)
|
||||
pollTimer = setInterval(async () => {
|
||||
try {
|
||||
@@ -44,9 +44,9 @@ async function pollUntilDone(type: SyncType) {
|
||||
if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
|
||||
syncing.value = false
|
||||
if (top.status === 'SUCCESS') {
|
||||
ElMessage.success(`${syncTypeLabel(type)}同步完成`)
|
||||
ElMessage.success(`${syncTypeLabel(type)}同步完成`)
|
||||
} else {
|
||||
ElMessage.error(`${syncTypeLabel(type)}同步失败`)
|
||||
ElMessage.error(`${syncTypeLabel(type)}同步失败`)
|
||||
}
|
||||
await refreshLogs()
|
||||
}
|
||||
@@ -58,19 +58,19 @@ async function handleSyncProducts() {
|
||||
await doSync('PRODUCTS')
|
||||
}
|
||||
|
||||
async function handleSyncCategories() {
|
||||
async function handleSyncCategories() {
|
||||
await doSync('CATEGORIES')
|
||||
}
|
||||
|
||||
async function handleSyncProductDetails() {
|
||||
await doSync('PRODUCT_DETAILS')
|
||||
}
|
||||
|
||||
async function doSync(type: SyncType) {
|
||||
const label = syncTypeLabel(type)
|
||||
}
|
||||
|
||||
async function handleSyncProductDetails() {
|
||||
await doSync('PRODUCT_DETAILS')
|
||||
}
|
||||
|
||||
async function doSync(type: SyncType) {
|
||||
const label = syncTypeLabel(type)
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定立即执行${label}同步吗？${type === 'PRODUCT_DETAILS' ? '将同步全部有效原产品，耗时取决于原产品数量。' : type !== 'CATEGORIES' ? '此操作可能需要几分钟。' : ''}`,
|
||||
`确定立即执行${label}同步吗？${type === 'PRODUCT_DETAILS' ? '将同步全部有效原产品，耗时取决于原产品数量。' : type !== 'CATEGORIES' ? '此操作可能需要几分钟。' : ''}`,
|
||||
'确认',
|
||||
{ type: 'info', confirmButtonText: '执行', cancelButtonText: '取消' }
|
||||
)
|
||||
@@ -79,10 +79,10 @@ async function doSync(type: SyncType) {
|
||||
syncing.value = true
|
||||
currentType.value = type
|
||||
try {
|
||||
if (type === 'PRODUCTS') {
|
||||
await syncApi.syncProducts()
|
||||
} else if (type === 'PRODUCT_DETAILS') {
|
||||
await syncApi.syncProductDetails()
|
||||
if (type === 'PRODUCTS') {
|
||||
await syncApi.syncProducts()
|
||||
} else if (type === 'PRODUCT_DETAILS') {
|
||||
await syncApi.syncProductDetails()
|
||||
} else {
|
||||
await syncApi.syncCategories()
|
||||
}
|
||||
@@ -108,13 +108,34 @@ function formatDuration(start?: string, end?: string): string | null {
|
||||
}
|
||||
|
||||
const stats = computed(() => {
|
||||
const total = logs.value.length
|
||||
const success = logs.value.filter(l => l.status === 'SUCCESS').length
|
||||
const failed = logs.value.filter(l => l.status === 'FAILED').length
|
||||
const lastLog = logs.value[0]
|
||||
const total = logs.value.length
|
||||
const success = logs.value.filter(l => l.status === 'SUCCESS').length
|
||||
const failed = logs.value.filter(l => l.status === 'FAILED').length
|
||||
const lastLog = logs.value[0]
|
||||
return { total, success, failed, lastLog }
|
||||
})
|
||||
|
||||
const SYNC_KEY_ZH: Record<string, string> = {
|
||||
inserted: '新增',
|
||||
updated: '更新',
|
||||
total: '共计',
|
||||
delisted: '下架',
|
||||
reactivated: '恢复上架',
|
||||
leafCategories: '叶子分类',
|
||||
}
|
||||
|
||||
/** 后端报文（inserted=0 updated=536 ...）渲染为中文摘要；未知键原样保留 */
|
||||
function humanizeSyncMessage(message?: string | null): string {
|
||||
if (!message) return ''
|
||||
const prefixMatch = message.match(/^([^:：]+)[:：]\s*/)
|
||||
const prefix = prefixMatch ? prefixMatch[1] : ''
|
||||
const body = prefixMatch ? message.slice(prefixMatch[0].length) : message
|
||||
const pairs = [...body.matchAll(/(\w+)=([^\s=]+)/g)]
|
||||
if (!pairs.length) return message
|
||||
const text = pairs.map(([, k, v]) => `${SYNC_KEY_ZH[k] ?? k} ${v}`).join(' · ')
|
||||
return prefix ? `${prefix}：${text}` : text
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
refreshLogs()
|
||||
timer = setInterval(refreshLogs, 60_000)
|
||||
@@ -136,7 +157,7 @@ onUnmounted(() => {
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="sync-action-title">数据同步</h2>
|
||||
<p class="sync-action-desc">分类和产品每小时自动同步；全部 SDS 原产品详情每天 03:30 自动同步，也可手动执行</p>
|
||||
<p class="sync-action-desc">分类和产品每小时自动同步；全部 SDS 原产品详情每天 03:30 自动同步，也可手动执行</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sync-action-buttons">
|
||||
@@ -151,23 +172,23 @@ onUnmounted(() => {
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="syncing && currentType === 'PRODUCTS'"
|
||||
:loading="syncing && currentType === 'PRODUCTS'"
|
||||
:disabled="syncing"
|
||||
:icon="Refresh"
|
||||
@click="handleSyncProducts"
|
||||
>
|
||||
同步产品
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
size="large"
|
||||
:loading="syncing && currentType === 'PRODUCT_DETAILS'"
|
||||
:disabled="syncing"
|
||||
:icon="Refresh"
|
||||
@click="handleSyncProductDetails"
|
||||
>
|
||||
同步全部原产品详情
|
||||
</el-button>
|
||||
同步产品
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
size="large"
|
||||
:loading="syncing && currentType === 'PRODUCT_DETAILS'"
|
||||
:disabled="syncing"
|
||||
:icon="Refresh"
|
||||
@click="handleSyncProductDetails"
|
||||
>
|
||||
同步全部原产品详情
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -189,7 +210,7 @@ onUnmounted(() => {
|
||||
</div>
|
||||
<div class="stat-divider" />
|
||||
<div class="stat-item">
|
||||
<span class="stat-value stat-time">{{ stats.lastLog ? formatTime(stats.lastLog.startedAt) : '-' }}</span>
|
||||
<span class="stat-value stat-time">{{ stats.lastLog ? formatTime(stats.lastLog.startedAt) : '-' }}</span>
|
||||
<span class="stat-label">最近同步</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -220,17 +241,17 @@ onUnmounted(() => {
|
||||
</div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-header">
|
||||
<span class="timeline-type">{{ syncTypeLabel(log.type) }}</span>
|
||||
<span class="timeline-type">{{ syncTypeLabel(log.type) }}</span>
|
||||
<span class="timeline-status" :class="log.status === 'SUCCESS' ? 'is-success' : (log.status === 'RUNNING' ? 'is-running' : 'is-failed')">
|
||||
{{ log.status === 'SUCCESS' ? '成功' : log.status === 'RUNNING' ? '进行中' : '失败' }}
|
||||
</span>
|
||||
<span v-if="formatDuration(log.startedAt, log.finishedAt || undefined)" class="timeline-duration">
|
||||
<span v-if="formatDuration(log.startedAt, log.finishedAt || undefined)" class="timeline-duration">
|
||||
<el-icon :size="11"><Clock /></el-icon>
|
||||
{{ formatDuration(log.startedAt, log.finishedAt || undefined) }}
|
||||
{{ formatDuration(log.startedAt, log.finishedAt || undefined) }}
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="log.message" class="timeline-message">{{ log.message }}</p>
|
||||
<span class="timeline-time">{{ formatTime(log.startedAt) }}</span>
|
||||
<p v-if="log.message" class="timeline-message" :title="log.message">{{ humanizeSyncMessage(log.message) }}</p>
|
||||
<span class="timeline-time">{{ formatTime(log.startedAt) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user