菜单管理列表页更新为按父子关系展示

frontend/src/views/settings/MenuManager.vue

@@ -22,7 +22,7 @@
 
         <n-data-table 
           :columns="columns" 
-          :data="draggedItem ? previewItems : menuStore.items" 
+          :data="tableData" 
           :bordered="false"
           :row-key="(row: AppMenuItem) => row.id"
           :row-props="getRowProps"
@@ -138,6 +138,32 @@ import IconPicker from '../../core/components/IconPicker.vue'
 import { t } from '../../shared/i18n'
 
 const menuStore = useMenuStore()
+// 将扁平 items 构造成树形（不修改原数据）
+function buildTree(items: AppMenuItem[]) {
+  const byId: Record<string, AppMenuItem & { children?: AppMenuItem[] }> = {}
+  items.forEach((i) => (byId[i.id] = { ...i, children: [] }))
+  const roots: (AppMenuItem & { children?: AppMenuItem[] })[] = []
+  items.forEach((i) => {
+    const pid = (i as any).parentId as string | null | undefined
+    if (pid && byId[pid]) {
+      byId[pid].children!.push(byId[i.id])
+    } else {
+      roots.push(byId[i.id])
+    }
+  })
+  // 清理空 children，Naive UI 会根据 children 是否存在渲染树
+  const prune = (nodes: (AppMenuItem & { children?: AppMenuItem[] })[]) => {
+    nodes.forEach((n) => {
+      if (n.children && n.children.length) prune(n.children)
+      else delete n.children
+    })
+  }
+  prune(roots)
+  return roots
+}
+
+const displayItems = computed(() => (draggedItem.value ? previewItems.value : menuStore.items))
+const tableData = computed(() => buildTree(displayItems.value))
 const dialog = useDialog()
 
 const columns = [