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
|
||||
})
|
||||
|
||||
/** 左树同族折叠:同款(同 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[] {
|
||||
return nodes.map(n => {
|
||||
const childNodes = n.children?.length ? mapCatNodes(n.children, goods) : []
|
||||
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)
|
||||
return {
|
||||
id: n.id,
|
||||
@@ -247,7 +276,7 @@ const leftTreeData = computed(() => {
|
||||
isCat: true,
|
||||
raw: c,
|
||||
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)
|
||||
if (node) node.expanded = true
|
||||
}
|
||||
// 族折叠后商品嵌套在族组节点下:沿父链全部展开(两种模式通用)
|
||||
let anc = tree.getNode(targetKey)?.parent as any
|
||||
while (anc?.data) {
|
||||
anc.expanded = true
|
||||
anc = anc.parent
|
||||
}
|
||||
setTimeout(() => {
|
||||
tree.setCurrentKey(targetKey)
|
||||
// 闪烁高亮定位行(2.4s 后自动消失)
|
||||
@@ -703,6 +738,28 @@ function onTreeGoodDragLeave(_event: DragEvent, data: any) {
|
||||
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) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
@@ -713,25 +770,30 @@ async function onTreeGoodDrop(event: DragEvent, data: any) {
|
||||
if (mode.value !== 'country' || !draggedId || !target) return
|
||||
if (target.id !== data.goodId || draggedId === data.goodId) return
|
||||
|
||||
// 目标所在国家分组的商品(新顺序)
|
||||
const group = leftTreeData.value.find((c: any) =>
|
||||
(c.children ?? []).some((g: any) => g.goodId === target.id),
|
||||
)
|
||||
// 目标所在国家分组
|
||||
const group = leftTreeData.value.find((c: any) => findContainingArray(c, target.id))
|
||||
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)
|
||||
if (fromIdx === -1) return // 跨国拖动不支持(商品归属固定国家)
|
||||
const [moved] = nodes.splice(fromIdx, 1)
|
||||
let insertIdx = nodes.findIndex(n => n.goodId === target.id)
|
||||
if (target.pos === 'after') insertIdx++
|
||||
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'
|
||||
try {
|
||||
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('排序已保存')
|
||||
await refreshLeftTree()
|
||||
@@ -972,6 +1034,11 @@ onMounted(() => loadAll())
|
||||
<div class="gv-root" v-loading="loading">
|
||||
<!-- Filter Bar -->
|
||||
<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-option v-for="opt in SORT_OPTIONS" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
@@ -996,14 +1063,8 @@ onMounted(() => loadAll())
|
||||
<template #prefix><el-icon><Search /></el-icon></template>
|
||||
</el-input>
|
||||
<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" />
|
||||
<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-button size="small" type="success" :icon="Plus" @click="openCustomCreate">新增自定义商品</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 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)" />
|
||||
</span>
|
||||
</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 -->
|
||||
<div
|
||||
v-else-if="data.isGood"
|
||||
@@ -1155,7 +1221,7 @@ onMounted(() => loadAll())
|
||||
:expand-on-click-node="true"
|
||||
>
|
||||
<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" />
|
||||
<div v-else class="og-thumb og-thumb-placeholder" />
|
||||
<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-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); }
|
||||
.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 {
|
||||
width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
@@ -1526,7 +1609,7 @@ onMounted(() => loadAll())
|
||||
overflow: hidden;
|
||||
}
|
||||
.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;
|
||||
flex-shrink: 0; white-space: nowrap;
|
||||
}
|
||||
@@ -1536,9 +1619,9 @@ onMounted(() => loadAll())
|
||||
flex-shrink: 0; white-space: nowrap;
|
||||
}
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
.good-tag::before {
|
||||
|
||||
@@ -115,6 +115,27 @@ const stats = computed(() => {
|
||||
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)
|
||||
@@ -229,7 +250,7 @@ onUnmounted(() => {
|
||||
{{ formatDuration(log.startedAt, log.finishedAt || undefined) }}
|
||||
</span>
|
||||
</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>
|
||||
</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