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 + 构建绿；浏览器实机复拍国家模式折叠、
族组展开、同步页文案均生效

apps/admin/src/views/goods/GoodsView.vue

@@ -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 {

apps/admin/src/views/sync/SyncView.vue

@@ -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>

plans/feature/admin-ui-polish-feature.md

@@ -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 无路由）——需产品决策，另行确认。