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:
@@ -214,11 +214,40 @@ const filteredGoods = computed(() => {
|
|||||||
return sorted
|
return sorted
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/** 左树同族折叠:同款(同 familyId)多条官网商品折叠为一个"族组"节点,children 为各行明细 */
|
||||||
|
function foldByFamily(nodes: any[]): any[] {
|
||||||
|
const out: any[] = []
|
||||||
|
const byFamily = new Map<string, any[]>()
|
||||||
|
for (const n of nodes) {
|
||||||
|
const fid = n.raw?.originGood?.family?.familyId
|
||||||
|
? String(n.raw.originGood.family.familyId)
|
||||||
|
: null
|
||||||
|
if (!fid) { out.push(n); continue }
|
||||||
|
if (!byFamily.has(fid)) {
|
||||||
|
const bucket: any[] = []
|
||||||
|
byFamily.set(fid, bucket)
|
||||||
|
out.push(bucket)
|
||||||
|
}
|
||||||
|
;(byFamily.get(fid) as any[]).push(n)
|
||||||
|
}
|
||||||
|
return out.map(n =>
|
||||||
|
Array.isArray(n)
|
||||||
|
? {
|
||||||
|
id: 'fam-' + String(n[0].raw.originGood.family.familyId),
|
||||||
|
label: n[0].goodName,
|
||||||
|
isFamilyGroup: true,
|
||||||
|
goodCount: n.length,
|
||||||
|
children: n,
|
||||||
|
}
|
||||||
|
: n,
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
function mapCatNodes(nodes: CategoryTree[], goods: Good[]): any[] {
|
function mapCatNodes(nodes: CategoryTree[], goods: Good[]): any[] {
|
||||||
return nodes.map(n => {
|
return nodes.map(n => {
|
||||||
const childNodes = n.children?.length ? mapCatNodes(n.children, goods) : []
|
const childNodes = n.children?.length ? mapCatNodes(n.children, goods) : []
|
||||||
const myGoods = goods.filter(g => g.categoryId === n.id).map(goodToNode)
|
const myGoods = goods.filter(g => g.categoryId === n.id).map(goodToNode)
|
||||||
const children = [...childNodes, ...myGoods]
|
const children = [...childNodes, ...foldByFamily(myGoods)]
|
||||||
const goodCount = children.reduce((sum: number, c: any) => sum + (c.goodCount ?? (c.isGood ? 1 : 0)), 0)
|
const goodCount = children.reduce((sum: number, c: any) => sum + (c.goodCount ?? (c.isGood ? 1 : 0)), 0)
|
||||||
return {
|
return {
|
||||||
id: n.id,
|
id: n.id,
|
||||||
@@ -247,7 +276,7 @@ const leftTreeData = computed(() => {
|
|||||||
isCat: true,
|
isCat: true,
|
||||||
raw: c,
|
raw: c,
|
||||||
goodCount: cGoods.length,
|
goodCount: cGoods.length,
|
||||||
children: cGoods.map(goodToNode),
|
children: foldByFamily(cGoods.map(goodToNode)),
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -575,6 +604,12 @@ function locateInLeftTree(originGoodId: string) {
|
|||||||
const node = tree.getNode(keyId)
|
const node = tree.getNode(keyId)
|
||||||
if (node) node.expanded = true
|
if (node) node.expanded = true
|
||||||
}
|
}
|
||||||
|
// 族折叠后商品嵌套在族组节点下:沿父链全部展开(两种模式通用)
|
||||||
|
let anc = tree.getNode(targetKey)?.parent as any
|
||||||
|
while (anc?.data) {
|
||||||
|
anc.expanded = true
|
||||||
|
anc = anc.parent
|
||||||
|
}
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
tree.setCurrentKey(targetKey)
|
tree.setCurrentKey(targetKey)
|
||||||
// 闪烁高亮定位行(2.4s 后自动消失)
|
// 闪烁高亮定位行(2.4s 后自动消失)
|
||||||
@@ -703,6 +738,28 @@ function onTreeGoodDragLeave(_event: DragEvent, data: any) {
|
|||||||
if (treeDragOver.value?.id === data.goodId) treeDragOver.value = null
|
if (treeDragOver.value?.id === data.goodId) treeDragOver.value = null
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 国家分组内:找商品所在容器数组(国家根 or 族组 children) */
|
||||||
|
function findContainingArray(group: any, goodId: string): any[] | null {
|
||||||
|
for (const c of group.children ?? []) {
|
||||||
|
if (c.isFamilyGroup) {
|
||||||
|
if ((c.children ?? []).some((g: any) => g.goodId === goodId)) return c.children
|
||||||
|
} else if (c.isGood && c.goodId === goodId) {
|
||||||
|
return group.children
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 国家分组内商品的折叠后展示顺序(族组按位置展开计入) */
|
||||||
|
function flattenCountryGoods(group: any): any[] {
|
||||||
|
const out: any[] = []
|
||||||
|
for (const c of group.children ?? []) {
|
||||||
|
if (c.isFamilyGroup) out.push(...(c.children ?? []))
|
||||||
|
else if (c.isGood) out.push(c)
|
||||||
|
}
|
||||||
|
return out
|
||||||
|
}
|
||||||
|
|
||||||
async function onTreeGoodDrop(event: DragEvent, data: any) {
|
async function onTreeGoodDrop(event: DragEvent, data: any) {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
@@ -713,25 +770,30 @@ async function onTreeGoodDrop(event: DragEvent, data: any) {
|
|||||||
if (mode.value !== 'country' || !draggedId || !target) return
|
if (mode.value !== 'country' || !draggedId || !target) return
|
||||||
if (target.id !== data.goodId || draggedId === data.goodId) return
|
if (target.id !== data.goodId || draggedId === data.goodId) return
|
||||||
|
|
||||||
// 目标所在国家分组的商品(新顺序)
|
// 目标所在国家分组
|
||||||
const group = leftTreeData.value.find((c: any) =>
|
const group = leftTreeData.value.find((c: any) => findContainingArray(c, target.id))
|
||||||
(c.children ?? []).some((g: any) => g.goodId === target.id),
|
|
||||||
)
|
|
||||||
if (!group) return
|
if (!group) return
|
||||||
const nodes = [...group.children]
|
const fromArr = findContainingArray(group, draggedId)
|
||||||
|
const toArr = findContainingArray(group, target.id)
|
||||||
|
if (!fromArr || fromArr !== toArr) {
|
||||||
|
ElMessage.info('暂只支持同一分组(或同一族)内拖拽排序')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const nodes = [...fromArr]
|
||||||
const fromIdx = nodes.findIndex(n => n.goodId === draggedId)
|
const fromIdx = nodes.findIndex(n => n.goodId === draggedId)
|
||||||
if (fromIdx === -1) return // 跨国拖动不支持(商品归属固定国家)
|
|
||||||
const [moved] = nodes.splice(fromIdx, 1)
|
const [moved] = nodes.splice(fromIdx, 1)
|
||||||
let insertIdx = nodes.findIndex(n => n.goodId === target.id)
|
let insertIdx = nodes.findIndex(n => n.goodId === target.id)
|
||||||
if (target.pos === 'after') insertIdx++
|
if (target.pos === 'after') insertIdx++
|
||||||
nodes.splice(insertIdx, 0, moved)
|
nodes.splice(insertIdx, 0, moved)
|
||||||
|
fromArr.splice(0, fromArr.length, ...nodes)
|
||||||
|
|
||||||
// 保序重排:该国家现有优先级集合不变,按新顺序重新分配(尽量少扰动全局/品类排序)
|
// 保序重排:该国家现有优先级集合不变,按折叠后展示顺序重新分配(尽量少扰动全局/品类排序)
|
||||||
const priorities = nodes.map(n => Number(n.priority || 0)).sort((a, b) => b - a)
|
const flat = flattenCountryGoods(group)
|
||||||
|
const priorities = flat.map(n => Number(n.priority || 0)).sort((a, b) => b - a)
|
||||||
moveTopLoading.value = 'drag'
|
moveTopLoading.value = 'drag'
|
||||||
try {
|
try {
|
||||||
await goodsApi.batchUpdatePriority({
|
await goodsApi.batchUpdatePriority({
|
||||||
items: nodes.map((n, i) => ({ id: Number(n.goodId), priority: priorities[i] ?? 0 })),
|
items: flat.map((n, i) => ({ id: Number(n.goodId), priority: priorities[i] ?? 0 })),
|
||||||
})
|
})
|
||||||
ElMessage.success('排序已保存')
|
ElMessage.success('排序已保存')
|
||||||
await refreshLeftTree()
|
await refreshLeftTree()
|
||||||
@@ -972,6 +1034,11 @@ onMounted(() => loadAll())
|
|||||||
<div class="gv-root" v-loading="loading">
|
<div class="gv-root" v-loading="loading">
|
||||||
<!-- Filter Bar -->
|
<!-- Filter Bar -->
|
||||||
<div class="gv-filter">
|
<div class="gv-filter">
|
||||||
|
<el-radio-group v-model="mode" size="small" @change="onModeChange">
|
||||||
|
<el-radio-button value="category">品类</el-radio-button>
|
||||||
|
<el-radio-button value="country">国家</el-radio-button>
|
||||||
|
<el-radio-button value="global">全局</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
<el-select v-model="sortBy" size="small" style="width: 140px">
|
<el-select v-model="sortBy" size="small" style="width: 140px">
|
||||||
<el-option v-for="opt in SORT_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
|
<el-option v-for="opt in SORT_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
@@ -996,14 +1063,8 @@ onMounted(() => loadAll())
|
|||||||
<template #prefix><el-icon><Search /></el-icon></template>
|
<template #prefix><el-icon><Search /></el-icon></template>
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-button size="small" type="primary" :icon="Search" @click="onSearch">搜索</el-button>
|
<el-button size="small" type="primary" :icon="Search" @click="onSearch">搜索</el-button>
|
||||||
<el-button size="small" type="success" :icon="Plus" @click="openCustomCreate">新增自定义商品</el-button>
|
|
||||||
|
|
||||||
<div class="gv-filter-spacer" />
|
<div class="gv-filter-spacer" />
|
||||||
<el-radio-group v-model="mode" size="small" @change="onModeChange">
|
<el-button size="small" type="success" :icon="Plus" @click="openCustomCreate">新增自定义商品</el-button>
|
||||||
<el-radio-button value="category">品类</el-radio-button>
|
|
||||||
<el-radio-button value="country">国家</el-radio-button>
|
|
||||||
<el-radio-button value="global">全局</el-radio-button>
|
|
||||||
</el-radio-group>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Dual Tree (hidden in global mode) -->
|
<!-- Dual Tree (hidden in global mode) -->
|
||||||
@@ -1046,6 +1107,11 @@ onMounted(() => loadAll())
|
|||||||
<el-button size="small" link type="danger" :icon="Delete" @click="mode === 'category' ? handleCatDelete(data) : handleCountryDelete(data)" />
|
<el-button size="small" link type="danger" :icon="Delete" @click="mode === 'category' ? handleCatDelete(data) : handleCountryDelete(data)" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- 族组节点:同款多配置折叠行(展开为各行明细) -->
|
||||||
|
<div v-else-if="data.isFamilyGroup" class="fam-node" @click.stop>
|
||||||
|
<span class="fam-label" :title="data.label">{{ cleanLinkName(data.label) }}</span>
|
||||||
|
<span class="fam-badge" :title="`同款共 ${data.goodCount} 个配置,点击箭头展开`">{{ data.goodCount }} 个配置</span>
|
||||||
|
</div>
|
||||||
<!-- Good node: two-line with meta -->
|
<!-- Good node: two-line with meta -->
|
||||||
<div
|
<div
|
||||||
v-else-if="data.isGood"
|
v-else-if="data.isGood"
|
||||||
@@ -1155,7 +1221,7 @@ onMounted(() => loadAll())
|
|||||||
:expand-on-click-node="true"
|
:expand-on-click-node="true"
|
||||||
>
|
>
|
||||||
<template #default="{ data }">
|
<template #default="{ data }">
|
||||||
<div v-if="data.isOG" class="og-node" draggable="true" @dragstart="onOGDragStart($event, data)">
|
<div v-if="data.isOG" class="og-node" draggable="true" title="拖到左侧分类/国家可配置为官网商品" @dragstart="onOGDragStart($event, data)">
|
||||||
<el-image v-if="data.goodImage" :src="data.goodImage" fit="cover" class="og-thumb" />
|
<el-image v-if="data.goodImage" :src="data.goodImage" fit="cover" class="og-thumb" />
|
||||||
<div v-else class="og-thumb og-thumb-placeholder" />
|
<div v-else class="og-thumb og-thumb-placeholder" />
|
||||||
<span class="og-name" :title="data.goodName">{{ data.label }}</span>
|
<span class="og-name" :title="data.goodName">{{ data.label }}</span>
|
||||||
@@ -1490,6 +1556,23 @@ onMounted(() => loadAll())
|
|||||||
.good-node.is-dragging { opacity: 0.5; }
|
.good-node.is-dragging { opacity: 0.5; }
|
||||||
.good-node.is-drop-before { box-shadow: inset 0 2px 0 var(--el-color-primary); }
|
.good-node.is-drop-before { box-shadow: inset 0 2px 0 var(--el-color-primary); }
|
||||||
.good-node.is-drop-after { box-shadow: inset 0 -2px 0 var(--el-color-primary); }
|
.good-node.is-drop-after { box-shadow: inset 0 -2px 0 var(--el-color-primary); }
|
||||||
|
.fam-node {
|
||||||
|
display: flex; align-items: center; gap: 8px;
|
||||||
|
flex: 1; min-width: 0;
|
||||||
|
padding: 4px 8px; margin: 2px 0;
|
||||||
|
border-radius: 6px; cursor: default;
|
||||||
|
background: #fafafa; border: 1px dashed #dcdfe6;
|
||||||
|
}
|
||||||
|
.fam-label {
|
||||||
|
font-weight: 600; font-size: 13px; color: #303133;
|
||||||
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||||
|
}
|
||||||
|
.fam-badge {
|
||||||
|
font-size: 11px; line-height: 1; padding: 3px 7px; border-radius: 8px;
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
background: var(--el-color-primary-light-9);
|
||||||
|
flex-shrink: 0; white-space: nowrap;
|
||||||
|
}
|
||||||
.good-thumb {
|
.good-thumb {
|
||||||
width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
|
width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
@@ -1526,7 +1609,7 @@ onMounted(() => loadAll())
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.good-country {
|
.good-country {
|
||||||
font-size: 11px; color: #909399; line-height: 1;
|
font-size: 11px; color: #606266; line-height: 1;
|
||||||
background: #f5f7fa; padding: 2px 6px; border-radius: 8px;
|
background: #f5f7fa; padding: 2px 6px; border-radius: 8px;
|
||||||
flex-shrink: 0; white-space: nowrap;
|
flex-shrink: 0; white-space: nowrap;
|
||||||
}
|
}
|
||||||
@@ -1536,9 +1619,9 @@ onMounted(() => loadAll())
|
|||||||
flex-shrink: 0; white-space: nowrap;
|
flex-shrink: 0; white-space: nowrap;
|
||||||
}
|
}
|
||||||
.good-tag {
|
.good-tag {
|
||||||
font-size: 11px; color: #606266; line-height: 1;
|
font-size: 11px; color: #454545; line-height: 1;
|
||||||
padding: 2px 6px 2px 12px; border-radius: 8px;
|
padding: 2px 6px 2px 12px; border-radius: 8px;
|
||||||
background: #fafafa; position: relative; flex-shrink: 0;
|
background: #f5f7fa; position: relative; flex-shrink: 0;
|
||||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px;
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px;
|
||||||
}
|
}
|
||||||
.good-tag::before {
|
.good-tag::before {
|
||||||
|
|||||||
@@ -115,6 +115,27 @@ const stats = computed(() => {
|
|||||||
return { total, success, failed, lastLog }
|
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(() => {
|
onMounted(() => {
|
||||||
refreshLogs()
|
refreshLogs()
|
||||||
timer = setInterval(refreshLogs, 60_000)
|
timer = setInterval(refreshLogs, 60_000)
|
||||||
@@ -229,7 +250,7 @@ onUnmounted(() => {
|
|||||||
{{ formatDuration(log.startedAt, log.finishedAt || undefined) }}
|
{{ formatDuration(log.startedAt, log.finishedAt || undefined) }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p v-if="log.message" class="timeline-message">{{ log.message }}</p>
|
<p v-if="log.message" class="timeline-message" :title="log.message">{{ humanizeSyncMessage(log.message) }}</p>
|
||||||
<span class="timeline-time">{{ formatTime(log.startedAt) }}</span>
|
<span class="timeline-time">{{ formatTime(log.startedAt) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,28 @@
|
|||||||
|
# 后台 UI/交互优化(视觉走查驱动)
|
||||||
|
|
||||||
|
基于 2026-08-28 浏览器实机走查(品类/国家模式、编辑弹窗、数据同步页)。
|
||||||
|
**分支约定:完成后停留在本分支,经用户确认后才合并 develop。**
|
||||||
|
|
||||||
|
## 修正一项误报
|
||||||
|
|
||||||
|
右树分组计数 "墨西哥 29/3" 为截图拼贴伪影裁切尾数,DOM 实际渲染 29/33,
|
||||||
|
计数口径无 bug —— 不做修改。
|
||||||
|
|
||||||
|
## 改动项
|
||||||
|
|
||||||
|
1. **左树同族折叠**:国家/品类模式下,同款(同 familyId)的多条官网商品
|
||||||
|
折叠为一行「族组」节点(显示代表名 + "N 个配置"徽标),展开看各行。
|
||||||
|
- locateInLeftTree 增加父链展开(族组嵌套后定位仍有效)
|
||||||
|
- 国家模式拖拽排序适配:仅允许同一容器(国家根/同一族组)内排序,
|
||||||
|
优先级按该国家折叠后展示顺序保序重分配
|
||||||
|
2. **工具栏分区重排**:模式切换(品类/国家/全局)移到最左,筛选组居中,
|
||||||
|
「新增自定义商品」靠右 —— 消除 1680 宽下的折行错乱
|
||||||
|
3. **对比度**:商品行属性小字/国家徽标颜色加深(#606266→#454545 等)
|
||||||
|
4. **拖拽可发现性**:右树 og 行加 title 提示"拖到左侧分类/国家可配置"
|
||||||
|
5. **同步日志人话化**:后端 `inserted=0 updated=536 ...` 报文渲染为
|
||||||
|
「新增 0 · 更新 536 · 共 536 条」,原文放 tooltip
|
||||||
|
|
||||||
|
## 不做(backlog)
|
||||||
|
|
||||||
|
右树按分类/工厂切换、面板高度自适应、批量补详情、重复配置体检入口、
|
||||||
|
首页位管理入口缺失(PositionsView 无路由)——需产品决策,另行确认。
|
||||||
Reference in New Issue
Block a user