task-282(验收反馈): 类目改回旧版树形表格(缩进+[+-]折叠标记+名称/层级路径/排序/来源/说明/操作列,懒加载与加载更多保留)

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

@@ -8,10 +8,8 @@ import { createProductCategory, deleteProductCategory, updateProductCategory } f
 import {
   appendCategoryChildren,
   isCategoryLoadMoreNode,
-  isCategoryPlaceholderNode,
   makeCategoryLoadMoreNode,
   PRODUCT_CATEGORY_DEFAULT_PAGE_SIZE,
-  productCategoryNodeMeta,
   productCategorySourceLabel,
   type ProductCategoryNode,
 } from './product-category-model.ts'
@@ -45,7 +43,7 @@ function stateKeyOf(parentId: number | null): string {
 function flatten(nodes: ProductCategoryNode[]): ProductCategoryNode[] {
   const out: ProductCategoryNode[] = []
   for (const node of nodes || []) {
-    if (!isCategoryLoadMoreNode(node) && !isCategoryPlaceholderNode(node)) {
+    if (!isCategoryLoadMoreNode(node)) {
       out.push(node)
       out.push(...flatten(node.children))
     }
@@ -74,12 +72,49 @@ async function loadTree(): Promise<void> {
   }
 }
 
-/** 节点展开时按需加载子级第一页（childCount>0 且未加载过真实子级才拉取；占位子级不算已加载）。 */
-async function onNodeExpand(node: ProductCategoryNode): Promise<void> {
-  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)
+/** 树形表格（对齐旧版 panel-product-categories）：客户端展开状态 + 按展开扁平化行集。 */
+interface TreeRow {
+  node: ProductCategoryNode
+  depth: number
+}
+
+const expandedIds = ref<Set<number>>(new Set())
+
+function collectRows(nodes: ProductCategoryNode[], depth: number, out: TreeRow[]): void {
+  for (const node of nodes || []) {
+    out.push({ node, depth })
+    if (!isCategoryLoadMoreNode(node) && expandedIds.value.has(node.id)) {
+      collectRows(node.children, depth + 1, out)
+    }
+  }
+}
+
+const treeRows = computed<TreeRow[]>(() => {
+  const out: TreeRow[] = []
+  collectRows(tree.value, 0, out)
+  return out
+})
+
+/** 展开/折叠：未加载过子级的先拉取第一页（懒加载），加载更多行点击翻页。 */
+async function toggleExpand(node: ProductCategoryNode): Promise<void> {
+  if (isCategoryLoadMoreNode(node)) {
+    void loadMoreChildren(node)
+    return
+  }
+  if (node.childCount <= 0) return
+  if (expandedIds.value.has(node.id)) {
+    const next = new Set(expandedIds.value)
+    next.delete(node.id)
+    expandedIds.value = next
+    return
+  }
+  const hasRealChildren = node.children.some((child) => !isCategoryLoadMoreNode(child))
+  if (!hasRealChildren) {
+    await loadChildrenPage(node, 1, false)
+  }
+  const next = new Set(expandedIds.value)
+  next.add(node.id)
+  expandedIds.value = next
 }
 
 /** 加载某父级一页子级（append=false 重置；append=true 追加并重建「加载更多」节点）。 */
@@ -279,45 +314,71 @@ onMounted(loadTree)
     </el-card>
 
     <el-card v-if="!searching" shadow="never">
-      <el-tree
-        v-loading="loading"
-        :data="tree"
-        node-key="id"
-        :props="{ label: 'name', children: 'children' }"
-        :expand-on-click-node="false"
-        :indent="28"
-        highlight-current
-        @node-click="onNodeClick"
-        @node-expand="onNodeExpand"
-      >
-        <template #default="{ data }">
-          <template v-if="isCategoryLoadMoreNode(data)">
-            <span class="node-more" @click.stop="loadMoreChildren(data)">
-              <el-button link size="small" :loading="moreLoading(data)">加载更多</el-button>
-              <span class="dim">已加载 {{ data.loadedCount }} / {{ data.totalCount }}</span>
-            </span>
+      <el-table v-loading="loading" :data="treeRows" row-key="node.id" :class="{ 'tree-table': true }">
+        <el-table-column label="类目名称" min-width="320">
+          <template #default="{ row }">
+            <template v-if="isCategoryLoadMoreNode(row.node)">
+              <div class="tree-name-cell">
+                <span class="tree-indent" :style="{ '--indent': `${(row.depth + 1) * 24}px` }"></span>
+                <el-button link size="small" type="primary" :loading="moreLoading(row.node)" @click="loadMoreChildren(row.node)">加载更多</el-button>
+                <span class="dim">已加载 {{ row.node.loadedCount }} / {{ row.node.totalCount }}</span>
+              </div>
+            </template>
+            <div v-else class="tree-name-cell" @click="onNodeClick(row.node as ProductCategoryNode)">
+              <span class="tree-indent" :style="{ '--indent': `${row.depth * 24}px` }"></span>
+              <button
+                type="button"
+                class="tree-node-mark"
+                :class="{ 'is-leaf': (row.node as ProductCategoryNode).childCount <= 0 }"
+                :disabled="(row.node as ProductCategoryNode).childCount <= 0"
+                :title="expandedIds.has((row.node as ProductCategoryNode).id) ? '折叠' : '展开'"
+                @click.stop="toggleExpand(row.node as ProductCategoryNode)"
+              >
+                {{ (row.node as ProductCategoryNode).childCount > 0 ? (expandedIds.has((row.node as ProductCategoryNode).id) ? '−' : '+') : '' }}
+              </button>
+              <strong class="node-name">{{ (row.node as ProductCategoryNode).name }}</strong>
+              <el-tag size="small" effect="plain" :type="(row.node as ProductCategoryNode).isBuiltin ? 'info' : 'success'">
+                {{ productCategorySourceLabel(row.node as ProductCategoryNode) }}
+              </el-tag>
+            </div>
           </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>
-              <el-tag size="small" effect="plain" :type="data.isBuiltin ? 'info' : 'success'">{{ productCategorySourceLabel(data) }}</el-tag>
-              <span class="node-meta">{{ productCategoryNodeMeta(data) }}</span>
-              <span v-if="data.description" class="node-desc" :title="data.description">{{ data.description }}</span>
-            </span>
-            <span class="node-ops" @click.stop>
-              <el-button link size="small" type="primary" @click="openEdit(data as ProductCategoryNode)">编辑</el-button>
+        </el-table-column>
+        <el-table-column label="层级路径" min-width="220">
+          <template #default="{ row }">
+            <span class="dim" :title="(row.node as ProductCategoryNode).path">{{ (row.node as ProductCategoryNode).path || (row.node as ProductCategoryNode).name }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="排序" min-width="80">
+          <template #default="{ row }">{{ (row.node as ProductCategoryNode).sortOrder ?? 0 }}</template>
+        </el-table-column>
+        <el-table-column label="来源" min-width="90">
+          <template #default="{ row }">
+            <el-tag size="small" effect="plain" :type="(row.node as ProductCategoryNode).isBuiltin ? 'info' : 'success'">
+              {{ productCategorySourceLabel(row.node as ProductCategoryNode) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="说明" min-width="180">
+          <template #default="{ row }">
+            <span v-if="(row.node as ProductCategoryNode).description" class="node-desc" :title="(row.node as ProductCategoryNode).description">{{ (row.node as ProductCategoryNode).description }}</span>
+            <span v-else class="dim">—</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="140" fixed="right">
+          <template #default="{ row }">
+            <template v-if="!isCategoryLoadMoreNode(row.node)">
+              <el-button link size="small" type="primary" @click="openEdit(row.node as ProductCategoryNode)">编辑</el-button>
               <el-button
                 link
                 size="small"
                 type="danger"
-                :disabled="!canDelete(data as ProductCategoryNode)"
-                @click="removeCategory(data as ProductCategoryNode)"
+                :disabled="!canDelete(row.node as ProductCategoryNode)"
+                @click="removeCategory(row.node as ProductCategoryNode)"
               >删除</el-button>
-            </span>
-          </span>
-        </template>
-      </el-tree>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
       <div class="tree-actions">
         <span class="dim">{{ selected ? `已选：${selected.path || selected.name}` : '未选中节点' }}</span>
         <span class="btn-group">
@@ -395,22 +456,30 @@ 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; }
+/* 树形表格（对齐旧版 panel-product-categories）：缩进 + [+/−] 折叠标记 + 粗体名称。 */
+.tree-name-cell { display: flex; align-items: center; gap: 8px; min-height: 24px; }
+.tree-indent { flex: 0 0 auto; width: var(--indent, 0px); }
+.tree-node-mark {
+  width: 20px;
+  height: 20px;
+  border: 0;
+  border-radius: 5px;
+  background: #eef0fe;
+  color: #6366f1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  flex: none;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+.tree-node-mark:not(.is-leaf):hover { background: #6366f1; color: #fff; }
+.tree-node-mark.is-leaf { background: transparent; cursor: default; }
 .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;
-}
+.node-desc { color: var(--el-text-color-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; display: inline-block; vertical-align: middle; }
+.tree-table .el-table__row { cursor: pointer; }
 </style>

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

@@ -77,10 +77,6 @@ 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
 }
 
@@ -134,32 +130,6 @@ 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,