20260810223432

2026-08-10 22:34:33 +08:00
1 parent ed5ab3885d
commit 5adbf59425
@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { toast } from "vue-sonner";
+import FmsTree from "@/components/FmsTree.vue";
+import type { TreeNode, ContextMenuItemDef } from "@/components/FmsTreeNode.vue";
+
+const expandedKeys = ref<string[]>(["__fms_root__"]);
+const selectedKeys = ref<string[]>([]);
+const selectedNode = ref<TreeNode | null>(null);
+
+const treeData: TreeNode[] = [
+  {
+    key: "sys",
+    title: "系统管理",
+    children: [
+      {
+        key: "sys_user",
+        title: "用户管理",
+        children: [
+          { key: "sys_user_list", title: "用户列表" },
+          { key: "sys_user_role", title: "角色配置" },
+        ],
+      },
+      {
+        key: "sys_log",
+        title: "日志管理",
+        children: [
+          { key: "sys_log_login", title: "登录日志" },
+          { key: "sys_log_op", title: "操作日志" },
+        ],
+      },
+      { key: "sys_i18n", title: "国际化管理" },
+    ],
+  },
+  {
+    key: "biz",
+    title: "业务模块",
+    children: [
+      {
+        key: "biz_order",
+        title: "订单管理",
+        children: [
+          { key: "biz_order_list", title: "订单列表" },
+          { key: "biz_order_setting", title: "订单配置" },
+        ],
+      },
+      { key: "biz_product", title: "产品管理" },
+    ],
+  },
+  {
+    key: "report",
+    title: "报表中心",
+    children: [
+      { key: "report_daily", title: "日报" },
+      { key: "report_monthly", title: "月报" },
+    ],
+  },
+];
+
+function buildContextMenu(node: TreeNode): ContextMenuItemDef[] {
+  return [
+    { key: "add_child", label: "新增子节点" },
+    { key: "edit", label: "编辑" },
+    { key: "delete", label: "删除" },
+  ];
+}
+
+function onSelect(_keys: string[], info: { node: TreeNode }) {
+  selectedNode.value = info.node;
+}
+
+function onMenuClick({ key, node }: { key: string; node: TreeNode }) {
+  switch (key) {
+    case "add_child":
+      toast.info(`新增子节点 — 父节点: ${node.title}`);
+      break;
+    case "edit":
+      toast.info(`编辑节点: ${node.title}`);
+      break;
+    case "delete":
+      toast.warning(`删除节点: ${node.title}`);
+      break;
+  }
+}
+</script>
+
+<template>
+  <div class="flex h-full gap-4 p-6">
+    <!-- 左侧树 -->
+    <div class="w-72 shrink-0 rounded-xl border bg-card p-4">
+      <h2 class="mb-3 text-sm font-semibold text-foreground">模块树</h2>
+      <FmsTree
+        v-model:expanded-keys="expandedKeys"
+        v-model:selected-keys="selectedKeys"
+        :tree-data="treeData"
+        :context-menu="buildContextMenu"
+        @select="onSelect"
+        @menu-click="onMenuClick"
+      >
+        <template #title="{ node }">
+          <span class="text-sm">{{ node.title }}</span>
+        </template>
+      </FmsTree>
+    </div>
+
+    <!-- 右侧详情 -->
+    <div class="flex-1 rounded-xl border bg-card p-4">
+      <h2 class="mb-3 text-sm font-semibold text-foreground">节点详情</h2>
+      <div v-if="selectedNode" class="space-y-2 text-sm text-muted-foreground">
+        <div>
+          <span class="font-medium text-foreground">Key: </span>
+          <code class="rounded bg-muted px-1.5 py-0.5 text-xs">{{ selectedNode.key }}</code>
+        </div>
+        <div>
+          <span class="font-medium text-foreground">Title: </span>
+          {{ selectedNode.title }}
+        </div>
+        <div>
+          <span class="font-medium text-foreground">子节点数: </span>
+          {{ selectedNode.children?.length ?? 0 }}
+        </div>
+      </div>
+      <div v-else class="flex h-40 items-center justify-center text-sm text-muted-foreground">
+        请在左侧树中选择一个节点
+      </div>
+    </div>
+  </div>
+</template>