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 {
+22 -1
View File
@@ -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>
+28
View File
@@ -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 无路由)——需产品决策,另行确认。