From 5e8183c220d01ce5b164b973f3968a9f8feaaf53 Mon Sep 17 00:00:00 2001
From: yeuimu <2197651308@qq.com>
Date: Fri, 28 Aug 2026 23:22:04 +0800
Subject: [PATCH 1/3] feat(admin): family-folded left tree, toolbar regroup,
 sync log humanize
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

视觉走查驱动的后台优化（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 | 127 +++++++++++++++++++----
 apps/admin/src/views/sync/SyncView.vue   | 119 ++++++++++++---------
 plans/feature/admin-ui-polish-feature.md |  28 +++++
 3 files changed, 203 insertions(+), 71 deletions(-)
 create mode 100644 plans/feature/admin-ui-polish-feature.md

diff --git a/apps/admin/src/views/goods/GoodsView.vue b/apps/admin/src/views/goods/GoodsView.vue
index de1f200..0f607de 100644
--- a/apps/admin/src/views/goods/GoodsView.vue
+++ b/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 {
diff --git a/apps/admin/src/views/sync/SyncView.vue b/apps/admin/src/views/sync/SyncView.vue
index 82864f3..1aad014 100644
--- a/apps/admin/src/views/sync/SyncView.vue
+++ b/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>
diff --git a/plans/feature/admin-ui-polish-feature.md b/plans/feature/admin-ui-polish-feature.md
new file mode 100644
index 0000000..c2558f2
--- /dev/null
+++ b/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 无路由）——需产品决策，另行确认。

From 6f2d836ef5a5cbd02d93bc010c786ca19661cb4f Mon Sep 17 00:00:00 2001
From: yeuimu <2197651308@qq.com>
Date: Sat, 29 Aug 2026 01:53:09 +0800
Subject: [PATCH 2/3] fix(admin): one row per family on left tree; restore
 right-tree config entry
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

按用户反馈调整上一批优化：
- 左树撤回族组展开层（虚线层+重复名称行）：改为一族只显示一行（排序最前的
  代表商品），行内「N 个配置」徽标悬浮列出该族全部配置（名称/国家·分类/打开
  按钮），不再有额外层级与重复名称
- 右树恢复配置入口：撤回「族已配置拦截」，本链接未单独建商品即显示「配置」
  按钮（含族已配置情形，供调整归族/重新配置），拖拽路径同步解除拦截
- 国家模式拖拽排序回退为分组内简单排序（族组节点已不存在）
- 文档同步更新徽标/入口语义

验证：admin typecheck + 22/22 + 构建绿；浏览器实测美国分组 25 行一族一行、
「8 个配置」徽标悬浮列表可打开、国内工厂深层成族链接显示「配置」按钮
---
 apps/admin/src/views/goods/GoodsView.vue | 144 ++++++++++-------------
 docs/references/product-center.md        |   6 +-
 2 files changed, 65 insertions(+), 85 deletions(-)

diff --git a/apps/admin/src/views/goods/GoodsView.vue b/apps/admin/src/views/goods/GoodsView.vue
index 0f607de..847aca4 100644
--- a/apps/admin/src/views/goods/GoodsView.vue
+++ b/apps/admin/src/views/goods/GoodsView.vue
@@ -214,41 +214,32 @@ 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) {
+/** 左树一族只显示一行：同款（同 familyId）多条配置保留代表行（排序最前），
+ *  其余配置计数挂在 configCount，悬浮徽标可查看并打开 */
+function distinctByFamily(nodes: any[]): any[] {
+  const seen = new Set<string>()
+  return nodes.map(n => {
     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,
-  )
+    if (!fid) return n
+    if (seen.has(fid)) return null
+    seen.add(fid)
+    const siblings = nodes.filter(m =>
+      String(m.raw?.originGood?.family?.familyId ?? '') === fid)
+    n.configCount = siblings.length
+    n.familyConfigs = siblings
+    return n
+  }).filter(Boolean)
 }
 
 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, ...foldByFamily(myGoods)]
-    const goodCount = children.reduce((sum: number, c: any) => sum + (c.goodCount ?? (c.isGood ? 1 : 0)), 0)
+    const children = [...childNodes, ...distinctByFamily(myGoods)]
+    const goodCount = children.reduce((sum: number, c: any) =>
+      sum + (c.isGood ? 1 + (c.configCount ? c.configCount - 1 : 0) : (c.goodCount ?? 0)), 0)
     return {
       id: n.id,
       label: n.categoryName,
@@ -276,7 +267,7 @@ const leftTreeData = computed(() => {
         isCat: true,
         raw: c,
         goodCount: cGoods.length,
-        children: foldByFamily(cGoods.map(goodToNode)),
+        children: distinctByFamily(cGoods.map(goodToNode)),
       }
     })
   }
@@ -449,11 +440,6 @@ function collectSiblings(ogNode: any): any[] {
 
 function openConfigModal(og: any, dropTarget: any) {
   const ogNode = findOgNodeById(og.rawId)
-  // 公开契约一族一款：族已配置后再配置成员只会产出官网不可见的重复商品
-  if ((ogNode?.familyConfiguredCount ?? 0) > 0 || (ogNode?.configuredCount ?? 0) > 0) {
-    ElMessage.info('该链接所属族已配置为官网商品，无需重复配置')
-    return
-  }
   configOG.value = { ...og, familyId: og.familyId ?? ogNode?.familyId ?? null }
   configDropTarget.value = dropTarget
   configSiblings.value = ogNode ? collectSiblings(ogNode) : []
@@ -738,26 +724,11 @@ function onTreeGoodDragLeave(_event: DragEvent, data: any) {
   if (treeDragOver.value?.id === data.goodId) treeDragOver.value = null
 }
 
-/** 国家分组内：找商品所在容器数组（国家根 or 族组 children） */
+/** 国家分组内：找商品所在容器数组（即国家根 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
+  return (group.children ?? []).some((c: any) => c.isGood && c.goodId === goodId)
+    ? group.children
+    : null
 }
 
 async function onTreeGoodDrop(event: DragEvent, data: any) {
@@ -770,30 +741,23 @@ 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) => findContainingArray(c, target.id))
   if (!group) return
-  const fromArr = findContainingArray(group, draggedId)
-  const toArr = findContainingArray(group, target.id)
-  if (!fromArr || fromArr !== toArr) {
-    ElMessage.info('暂只支持同一分组（或同一族）内拖拽排序')
-    return
-  }
-  const nodes = [...fromArr]
+  const nodes = [...group.children]
   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 flat = flattenCountryGoods(group)
-  const priorities = flat.map(n => Number(n.priority || 0)).sort((a, b) => b - a)
+  // 保序重排：该国家现有优先级集合不变，按新顺序重新分配（尽量少扰动全局/品类排序）
+  const priorities = nodes.map(n => Number(n.priority || 0)).sort((a, b) => b - a)
   moveTopLoading.value = 'drag'
   try {
     await goodsApi.batchUpdatePriority({
-      items: flat.map((n, i) => ({ id: Number(n.goodId), priority: priorities[i] ?? 0 })),
+      items: nodes.map((n, i) => ({ id: Number(n.goodId), priority: priorities[i] ?? 0 })),
     })
     ElMessage.success('排序已保存')
     await refreshLeftTree()
@@ -1107,11 +1071,6 @@ 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"
@@ -1169,6 +1128,24 @@ onMounted(() => loadAll())
                       <span class="good-name" :title="data.goodName">{{ cleanLinkName(data.goodName) }}</span>
                       <span v-if="data.mergedCount > 1" class="gv-merged-badge">×{{ data.mergedCount }}</span>
                     </el-tooltip>
+                    <el-popover
+                      v-if="data.configCount > 1"
+                      placement="bottom-start"
+                      :width="380"
+                      trigger="click"
+                      popper-class="cfg-pop-popper"
+                    >
+                      <template #reference>
+                        <span class="cfg-badge" :title="`同款共 ${data.configCount} 个配置`" @click.stop>{{ data.configCount }} 个配置</span>
+                      </template>
+                      <div class="cfg-pop-list">
+                        <div v-for="c in (data.familyConfigs || [])" :key="c.goodId" class="cfg-pop-row">
+                          <span class="cfg-pop-name" :title="c.goodName">{{ cleanLinkName(c.goodName) }}</span>
+                          <span class="cfg-pop-sub">{{ c.country }}{{ c.raw?.category?.categoryName ? ' · ' + c.raw.category.categoryName : '' }}</span>
+                          <el-button size="small" link type="primary" @click.stop="openEdit(c.raw)">打开</el-button>
+                        </div>
+                      </div>
+                    </el-popover>
                   </div>
                   <span class="good-actions" @click.stop>
                     <el-button v-if="!data.isCustom" size="small" link :icon="Aim" title="定位原产品" @click="locateInRightTree(data.originGoodId)" />
@@ -1266,8 +1243,9 @@ onMounted(() => loadAll())
                 @click.stop="locateInLeftTree(data.rawId)"
               />
               <el-button
-                v-if="!data.configuredCount && !data.familyConfiguredCount"
+                v-if="!data.configuredCount"
                 size="small" type="primary" link class="og-config-btn"
+                title="配置为官网商品（可勾选同款链接归入同一族）"
                 @click.stop="openConfigFromRightTree(data)"
               >配置</el-button>
             </div>
@@ -1556,23 +1534,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 {
+.cfg-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;
+  flex-shrink: 0; white-space: nowrap; cursor: pointer;
 }
+.cfg-pop-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow: auto; }
+.cfg-pop-row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 4px 6px; border-radius: 6px; background: #fafafa;
+}
+.cfg-pop-row:hover { background: #f0f2f5; }
+.cfg-pop-name {
+  flex-shrink: 0; max-width: 200px; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #303133;
+}
+.cfg-pop-sub { flex: 1; font-size: 11px; color: #909399; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .good-thumb {
   width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
   object-fit: cover;
diff --git a/docs/references/product-center.md b/docs/references/product-center.md
index 2964884..69bfac8 100644
--- a/docs/references/product-center.md
+++ b/docs/references/product-center.md
@@ -159,9 +159,11 @@ pnpm --filter @inkreach/api backfill:product-families
 - 右树徽标语义（**族感知**，公开契约一族一款）：**已配置 N**（绿，本链接已配置为官网商品，
   N=国数）/ **已配置**（绿，本链接未单独建商品但所属族已配置）/ **成族**（蓝，已归族且全族
   未配置）/ **未配置**（橙）；「定位到官网商品」在自身或同族已配置时出现（按 主链接 → 同族 →
-  旧副源顺序定位并高亮），「配置」仅在全族未配置时出现；把已配置族的链接拖拽/点击配置会被
-  拦截提示（避免产出官网不可见的重复商品）；
+  旧副源顺序定位并高亮），「配置」在本链接未单独建商品时可用（含族已配置的情形，供调整归族；
+  注意重复配置会产生官网不可见的冗余商品）；
 - 族分组头部计数与「仅未配置」筛选同样按族语义（族已配置 → 计入已配置）。
+- **左树一族一行**（国家/品类模式）：同款多条配置只显示排序最前的一条，名称旁
+  「N 个配置」徽标悬浮列出其余配置（可打开编辑），分组头部计数仍按全部商品统计。
 - 人工改价/自动成族等族管理 API（`/product-families/*`）保留，供脚本或后续界面使用；
 - 页面组件化：`GoodsView.vue` 拆出 `components/` 下的 GoodsEditDialog（编辑弹窗）、
   GoodsConfigDialog（配置弹窗）、CustomGoodDialog（自定义商品）、TagFilterPopover（标签筛选弹层）。

From d625b4087307a329d2f6b1f58d8b546dbf0adfc6 Mon Sep 17 00:00:00 2001
From: yeuimu <2197651308@qq.com>
Date: Sat, 29 Aug 2026 02:16:35 +0800
Subject: [PATCH 3/3] fix(admin): merge-candidates by SKU/family; config dialog
 merge block always shown; cfg badge adjacency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修正合并同名候选匹配：此前用名称 3 段组键（含工艺段），工艺写法不同的
  同款（如 光板不打印 vs 单面印花（前印））全部漏配导致候选为空、合并同名
  区块被 v-if 隐藏 —— 用户看到的"checkbox 和搜索框被吞"即此因。
  改为 族归属精确匹配 或 款号（名称第 2 段，如 BRTF004）一致，全局跨分类；
  区块常显，无候选时空态提示
- 修左树「N 个配置」徽标错位：good-name-col 改 flex 布局，徽标紧贴名称
- 验证：admin typecheck + 22/22 + 构建绿；DB 实测 BRTF004 光板链接候选池
  恢复（单面印花（前印），同族 857）
---
 apps/admin/src/views/goods/GoodsView.vue      | 33 ++++++++++++++-----
 .../goods/components/GoodsConfigDialog.vue    |  8 +++--
 docs/references/product-center.md             |  5 +--
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/apps/admin/src/views/goods/GoodsView.vue b/apps/admin/src/views/goods/GoodsView.vue
index 847aca4..898a356 100644
--- a/apps/admin/src/views/goods/GoodsView.vue
+++ b/apps/admin/src/views/goods/GoodsView.vue
@@ -418,18 +418,26 @@ function findOgNodeById(rawId: string | number): any {
   return found
 }
 
+/** 链接名的款号段（第 2 段，如 BRTF004）；同款号 = 同款 */
+function skuCodeOf(name: string | null | undefined): string {
+  return (name ?? '').split('-').map(s => s.trim())[1] ?? ''
+}
+
 function collectSiblings(ogNode: any): any[] {
   const result: any[] = []
+  const myFamily = ogNode.familyId ? String(ogNode.familyId) : null
+  const mySku = skuCodeOf(ogNode.goodName ?? ogNode.label)
   function traverse(nodes: any[]) {
     for (const n of nodes) {
-      // 全局同款链接（跨分类）：合并同名按名称组键匹配，
-      // 不局限于当前分类；含已配置的，勾选归族操作幂等
-      if (
-        n.isOG &&
-        String(n.rawId) !== String(ogNode.rawId) &&
-        sameOriginGroup(ogNode.goodName ?? ogNode.label, n.goodName ?? n.label)
-      ) {
-        result.push(n)
+      // 全局同款链接（跨分类/跨工艺/跨物流）：族归属精确匹配，或款号一致；
+      // 含已配置的，勾选归族操作幂等
+      if (n.isOG && String(n.rawId) !== String(ogNode.rawId)) {
+        const nFamily = n.familyId ? String(n.familyId) : null
+        const nSku = skuCodeOf(n.goodName ?? n.label)
+        const same = (myFamily && nFamily && myFamily === nFamily)
+          || (Boolean(mySku) && Boolean(nSku) && mySku === nSku)
+          || (!mySku && sameOriginGroup(ogNode.goodName ?? ogNode.label, n.goodName ?? n.label))
+        if (same) result.push(n)
       }
       if (n.children?.length) traverse(n.children)
     }
@@ -1566,7 +1574,14 @@ onMounted(() => loadAll())
   font-size: 13px; line-height: 1.4; cursor: pointer;
   max-width: calc(100% - 40px);
 }
-.good-name-col { flex: 1; min-width: 0; overflow: hidden; }
+.good-name-col {
+  flex: 1; min-width: 0; overflow: hidden;
+  display: flex; align-items: center; gap: 6px;
+}
+.good-name-col > .el-tooltip__trigger {
+  min-width: 0; overflow: hidden;
+  display: inline-flex; align-items: center; gap: 4px;
+}
 .gv-merged-badge {
   margin-left: 4px;
   padding: 0 5px;
diff --git a/apps/admin/src/views/goods/components/GoodsConfigDialog.vue b/apps/admin/src/views/goods/components/GoodsConfigDialog.vue
index cce5263..0326695 100644
--- a/apps/admin/src/views/goods/components/GoodsConfigDialog.vue
+++ b/apps/admin/src/views/goods/components/GoodsConfigDialog.vue
@@ -135,13 +135,13 @@ async function handleSubmit() {
         <el-cascader v-if="mode === 'country' || !dropTarget" v-model="form.cascaderCategory" :options="categoryCascader as any" :props="{ checkStrictly: true }" placeholder="请选择分类" @change="onCascaderChange" style="width:100%" />
         <el-tag v-else>{{ dropTarget?.label }}</el-tag>
       </el-form-item>
-      <el-form-item v-if="siblings.length" label="合并同名">
+      <el-form-item label="合并同名">
         <div class="config-merge-box">
           <el-input
             v-model="mergeKeyword"
             size="small"
             clearable
-            placeholder="搜索同分类链接…"
+            placeholder="搜索同款链接（全局，含已配置）…"
             style="margin-bottom:8px"
           />
           <el-checkbox-group v-model="checkedIds">
@@ -149,7 +149,9 @@ async function handleSubmit() {
               {{ s.goodName }}<template v-if="s.goodPrice"> · ¥{{ s.goodPrice }}</template>
             </el-checkbox>
           </el-checkbox-group>
-          <div v-if="!filteredSiblings.length" class="config-merge-empty">没有匹配的链接</div>
+          <div v-if="!filteredSiblings.length" class="config-merge-empty">
+            {{ siblings.length ? '没有匹配的链接' : '未找到同款链接（同款号或同族）' }}
+          </div>
         </div>
       </el-form-item>
       <el-form-item label="图片">
diff --git a/docs/references/product-center.md b/docs/references/product-center.md
index 69bfac8..251d880 100644
--- a/docs/references/product-center.md
+++ b/docs/references/product-center.md
@@ -154,8 +154,9 @@ pnpm --filter @inkreach/api backfill:product-families
   归并（同组合取最低价，「链接数」列显示来源数，人工价带标签），无需额外请求；
 - 编辑弹窗商品「名称」预填解析后的「品名 型号」，保存即采用解析名；右侧原产品库与配置弹窗
   始终显示**原始链接名**；
-- 配置弹窗「合并同名」候选为**全局同款链接**（按名称 3 段组键跨分类匹配，
-  含已配置链接），支持搜索过滤。
+- 配置弹窗「合并同名」区块**常显**，候选为**全局同款链接**：按 链接款号（名称第 2 段，
+  如 BRTF004）或族归属跨分类匹配，同款不同工艺/物流/仓库均在列（含已配置链接），
+  支持搜索过滤；无候选时显示空态提示。
 - 右树徽标语义（**族感知**，公开契约一族一款）：**已配置 N**（绿，本链接已配置为官网商品，
   N=国数）/ **已配置**（绿，本链接未单独建商品但所属族已配置）/ **成族**（蓝，已归族且全族
   未配置）/ **未配置**（橙）；「定位到官网商品」在自身或同族已配置时出现（按 主链接 → 同族 →