task-277(验收反馈): 类目树优化(占位子级保证展开箭头/28px缩进/节点加间距/箭头放大加色)

admin-frontend-vue/src/pages/asin/ProductCategoryPage.vue

@@ -8,6 +8,7 @@ import { createProductCategory, deleteProductCategory, updateProductCategory } f
 import {
   appendCategoryChildren,
   isCategoryLoadMoreNode,
+  isCategoryPlaceholderNode,
   makeCategoryLoadMoreNode,
   PRODUCT_CATEGORY_DEFAULT_PAGE_SIZE,
   productCategoryNodeMeta,
@@ -44,7 +45,7 @@ function stateKeyOf(parentId: number | null): string {
 function flatten(nodes: ProductCategoryNode[]): ProductCategoryNode[] {
   const out: ProductCategoryNode[] = []
   for (const node of nodes || []) {
-    if (!isCategoryLoadMoreNode(node)) {
+    if (!isCategoryLoadMoreNode(node) && !isCategoryPlaceholderNode(node)) {
       out.push(node)
       out.push(...flatten(node.children))
     }
@@ -73,9 +74,11 @@ async function loadTree(): Promise<void> {
   }
 }
 
-/** 节点展开时按需加载子级第一页（childCount>0 且未加载过才拉取）。 */
+/** 节点展开时按需加载子级第一页（childCount>0 且未加载过真实子级才拉取；占位子级不算已加载）。 */
 async function onNodeExpand(node: ProductCategoryNode): Promise<void> {
-  if (isCategoryLoadMoreNode(node) || node.childCount <= 0 || node.children.length > 0) return
+  if (isCategoryLoadMoreNode(node) || isCategoryPlaceholderNode(node) || node.childCount <= 0) return
+  const hasRealChildren = node.children.some((child) => !isCategoryPlaceholderNode(child) && !isCategoryLoadMoreNode(child))
+  if (hasRealChildren) return
   await loadChildrenPage(node, 1, false)
 }
 
@@ -282,6 +285,7 @@ onMounted(loadTree)
         node-key="id"
         :props="{ label: 'name', children: 'children' }"
         :expand-on-click-node="false"
+        :indent="28"
         highlight-current
         @node-click="onNodeClick"
         @node-expand="onNodeExpand"
@@ -293,6 +297,7 @@ onMounted(loadTree)
               <span class="dim">已加载 {{ data.loadedCount }} / {{ data.totalCount }}</span>
             </span>
           </template>
+          <span v-else-if="isCategoryPlaceholderNode(data)" class="node-placeholder" @click.stop>加载子级中…</span>
           <span v-else class="node-row">
             <span class="node-main">
               <span class="node-name">{{ data.name }}</span>
@@ -390,4 +395,22 @@ onMounted(loadTree)
 .btn-group { display: inline-flex; gap: 6px; }
 .search-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
 .load-more-row { text-align: center; margin-top: 12px; }
+/* 类目树节点：加大间距不再紧凑，父子级缩进对齐旧版树形表格。 */
+.node-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; width: 100%; min-width: 0; }
+.node-main { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
+.node-name { font-weight: 600; color: var(--el-text-color-primary); white-space: nowrap; }
+.node-meta { color: var(--admin-muted); font-size: 12px; white-space: nowrap; }
+.node-desc { color: var(--el-text-color-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.node-ops { flex: none; }
+.node-placeholder { display: inline-block; padding: 7px 8px; color: var(--el-text-color-placeholder); font-size: 12px; }
+.node-more { display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; }
+/* 展开/折叠箭头放大加色（对齐旧版 +/- 折叠标记的可见度）。 */
+:deep(.el-tree-node__expand-icon) {
+  font-size: 18px;
+  color: var(--admin-primary);
+}
+:deep(.el-tree-node__content) {
+  height: auto;
+  min-height: 34px;
+}
 </style>

admin-frontend-vue/src/pages/asin/product-category-model.ts

@@ -58,6 +58,7 @@ export function toProductCategoryNode(raw: unknown): ProductCategoryNode | null
   const record = raw as Record<string, unknown>
   const id = int(record.id)
   if (id === null) return null
+  const childCount = int(record.childCount ?? record.child_count) ?? 0
   const node: ProductCategoryNode = {
     id,
     parentId: int(record.parentId ?? record.parent_id),
@@ -66,7 +67,7 @@ export function toProductCategoryNode(raw: unknown): ProductCategoryNode | null
     sortOrder: int(record.sortOrder ?? record.sort_order),
     description: text(record.description),
     isBuiltin: asBoolean(record.isBuiltin ?? record.builtin),
-    childCount: int(record.childCount ?? record.child_count) ?? 0,
+    childCount,
     level: int(record.level),
     path: text(record.path),
     children: [],
@@ -76,6 +77,10 @@ export function toProductCategoryNode(raw: unknown): ProductCategoryNode | null
       .map((child) => toProductCategoryNode(child))
       .filter((child): child is ProductCategoryNode => child !== null)
   }
+  // 有子级但未返回 children 数据：注入占位子级，让 el-tree 显示展开箭头（懒加载入口）。
+  if (node.children.length === 0 && childCount > 0) {
+    node.children = [makeCategoryPlaceholderNode(id)]
+  }
   return node
 }
 
@@ -129,6 +134,32 @@ export function isCategoryLoadMoreNode(node: ProductCategoryNode | null | undefi
   return !!node && (node as Partial<CategoryLoadMoreNode>).isLoadMore === true
 }
 
+/** 合成"占位"节点：childCount>0 但子级未加载时占位，保证 el-tree 显示展开箭头（懒加载入口）。 */
+export interface CategoryPlaceholderNode extends ProductCategoryNode {
+  isPlaceholder: true
+}
+
+export function isCategoryPlaceholderNode(node: ProductCategoryNode | null | undefined): node is CategoryPlaceholderNode {
+  return !!node && (node as Partial<CategoryPlaceholderNode>).isPlaceholder === true
+}
+
+export function makeCategoryPlaceholderNode(parentId: number | null): CategoryPlaceholderNode {
+  return {
+    id: -(parentId ?? 0) - 1_000_000,
+    parentId,
+    name: '…',
+    categoryKey: '',
+    sortOrder: null,
+    description: '',
+    isBuiltin: false,
+    childCount: 0,
+    level: null,
+    path: '',
+    children: [],
+    isPlaceholder: true,
+  }
+}
+
 export function makeCategoryLoadMoreNode(
   parentId: number | null,
   loadedCount: number,