tree

src/component/tree/index.tsx

@@ -0,0 +1,99 @@
+import * as React from "react";
+import {
+  FlatTree,
+  TreeItem,
+  // flattenTree_unstable,
+  // TreeItemProps,
+  TreeItemPersonaLayout,
+  TreeItemLayout,
+  useHeadlessFlatTree_unstable,
+  HeadlessFlatTreeItemProps,
+} from "@fluentui/react-components";
+import {
+  Button,
+  Menu,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+  useRestoreFocusTarget,
+} from "@fluentui/react-components";
+import { Edit20Regular, MoreHorizontal20Regular, CardUiFilled } from "@fluentui/react-icons";
+
+type FlatItem = HeadlessFlatTreeItemProps & { content: string };
+
+const flatTreeItems: FlatItem[] = [
+  { value: "1", content: "中联新技术工作室" },
+  { value: "1-1", parentValue: "1", content: "陈丹" },
+  { value: "1-2", parentValue: "1", content: "蔡青松" },
+  { value: "1-3", parentValue: "1", content: "唐渝林" },
+  { value: "1-4", parentValue: "1", content: "吴瑞强" },
+  { value: "1-5", parentValue: "1", content: "王华川" },
+  { value: "1-6", parentValue: "1", content: "涂建华" },
+  { value: "1-7", parentValue: "1", content: "杨东明" },
+  { value: "2", content: "中联敏捷" },
+  { value: "2-1", parentValue: "2", content: "范俊" },
+  { value: "2-2", parentValue: "2", content: "杨斌" },
+  { value: "2-2", parentValue: "2", content: "陈亮" },
+];
+
+const ActionsExample = () => (
+  <>
+    <Button aria-label="Edit" appearance="subtle" icon={<Edit20Regular />} />
+    <Menu>
+      <MenuTrigger disableButtonEnhancement>
+        <Button
+          aria-label="More options"
+          appearance="subtle"
+          icon={<MoreHorizontal20Regular />}
+        />
+      </MenuTrigger>
+
+      <MenuPopover>
+        <MenuList>
+          <MenuItem>新增</MenuItem>
+          <MenuItem>修改</MenuItem>
+          <MenuItem>删除</MenuItem>
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  </>
+);
+
+const UseHeadlessFlatTree = () => {
+  const flatTree = useHeadlessFlatTree_unstable(flatTreeItems);
+  const focusTargetAttribute = useRestoreFocusTarget();
+
+  return (
+    <FlatTree {...flatTree.getTreeProps()} aria-label="Flat Tree">
+      {Array.from(flatTree.items(), (flatTreeItem) => {
+        const { content, ...treeItemProps } = flatTreeItem.getTreeItemProps();
+        return (
+          <Menu key={flatTreeItem.value} positioning="below-end" openOnContext>
+            <MenuTrigger disableButtonEnhancement>
+              <TreeItem
+                aria-description="has actions"
+                {...focusTargetAttribute}
+                {...treeItemProps}
+              >
+                <TreeItemPersonaLayout
+                  actions={<ActionsExample />}>
+                  {content}
+                </TreeItemPersonaLayout>
+              </TreeItem>
+            </MenuTrigger>
+            <MenuPopover>
+              <MenuList>
+                <MenuItem>新增</MenuItem>
+                <MenuItem>修改</MenuItem>
+                <MenuItem>删除</MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+        );
+      })}
+    </FlatTree>
+  );
+};
+
+export default UseHeadlessFlatTree

src/pages/treepage/index.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import {
+  Tree,
+  TreeItem,
+  TreeItemLayout,
+  TreeItemPersonaLayout,
+} from "@fluentui/react-components";
+import { Avatar } from "@fluentui/react-components";
+
+const TreePage = () => {
+  return (
+    <>
+      <Tree aria-label="Default Layout">
+        <TreeItem itemType="branch">
+          <TreeItemLayout>Tree using TreeItemLayout</TreeItemLayout>
+          <Tree>
+            <TreeItem itemType="leaf">
+              <TreeItemLayout>level 2, item 1</TreeItemLayout>
+            </TreeItem>
+            <TreeItem itemType="leaf">
+              <TreeItemLayout>level 2, item 2</TreeItemLayout>
+            </TreeItem>
+            <TreeItem itemType="leaf">
+              <TreeItemLayout>level 2, item 3</TreeItemLayout>
+            </TreeItem>
+          </Tree>
+        </TreeItem>
+      </Tree>
+
+      <Tree aria-label="Persona Layout">
+        <TreeItem itemType="branch">
+          <TreeItemPersonaLayout media={<Avatar image={{ alt: "avatar" }} />}>
+            Tree using TreeItemPersonaLayout
+          </TreeItemPersonaLayout>
+          <Tree>
+            <TreeItem itemType="leaf">
+              <TreeItemPersonaLayout
+                media={<Avatar image={{ alt: "avatar" }} />}
+                description="with description"
+              >
+                level 2, item 1
+              </TreeItemPersonaLayout>
+            </TreeItem>
+            <TreeItem itemType="leaf">
+              <TreeItemPersonaLayout
+                media={<Avatar image={{ alt: "avatar" }} shape="square" />}
+                description="square shape media"
+              >
+                level 2, item 2
+              </TreeItemPersonaLayout>
+            </TreeItem>
+            <TreeItem itemType="leaf">
+              <TreeItemPersonaLayout description="without media">
+                level 2, item 3
+              </TreeItemPersonaLayout>
+            </TreeItem>
+          </Tree>
+        </TreeItem>
+      </Tree>
+    </>
+  );
+};
+
+export default TreePage;

src/router/index.js

@@ -3,6 +3,7 @@ import { App } from "../App";
 import Document from '../pages/document';
 import Home from '../pages/home';
 import ListNew from '../pages/listnew';
+import TreePage from "../component/tree";
 
 const router = createBrowserRouter([
     {
@@ -20,6 +21,10 @@ const router = createBrowserRouter([
             {
                 path: '/listnew',
                 element: <ListNew/>
+            },
+            {
+                path: '/tree',
+                element: <TreePage />
             }
         ]
     }