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 + 构建绿；浏览器实机复拍国家模式折叠、族组展开、同步页文案均生效
2026-08-28 23:22:04 +08:00
parent 4ddbf486bd
commit 5e8183c220
3 changed files with 203 additions and 71 deletions
@@ -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 {
@@ -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>