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
2026-08-28 23:22:04 +08:00
parent 4ddbf486bd
commit 5e8183c220
3 changed files with 203 additions and 71 deletions
+105 -22
View File
@@ -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 {