docs: base usage of tree data

Author: phphe

docs/zh/v1/guide.md

@@ -68,3 +68,8 @@ export default function App() {
 
 <<< @/../src/pages/base_flat_data.tsx
 <DemoIframe url="/base_flat_data" />
+
+## 基础使用-树形数据
+
+<<< @/../src/pages/base_tree_data.tsx
+<DemoIframe url="/base_tree_data" />

src/PageLayout.tsx

@@ -59,6 +59,9 @@ export default function PageLayout(props: {}) {
       .main-menu a{
         text-decoration: none;
       }
+      .main-menu a.active{
+        font-weight: bold;
+      }
       .main-menu a:hover{
         text-decoration: underline;
       }

src/pages/base_flat_data.tsx

@@ -1,10 +1,55 @@
-import { createFlatData } from './_data'
 import { useHeTree, sortFlatData } from "he-tree-react";
 import { useState } from 'react';
 
 export default function BasePage() {
   const keys = { idKey: 'id', parentIdKey: 'parent_id' };
-  const [data, setdata] = useState(() => sortFlatData(createFlatData(), keys));
+  const [data, setdata] = useState(() => sortFlatData([
+    {
+      id: 1,
+      parent_id: null,
+      name: "Root Category",
+    },
+    {
+      id: 2,
+      parent_id: 1,
+      name: "Technology",
+    },
+    {
+      id: 5,
+      parent_id: 2,
+      name: "Hardware",
+    },
+    {
+      id: 10,
+      parent_id: 5,
+      name: "Computer Components",
+    },
+    {
+      id: 4,
+      parent_id: 2,
+      name: "Programming",
+    },
+    {
+      id: 8,
+      parent_id: 4,
+      name: "Python",
+    },
+    {
+      id: 3,
+      parent_id: 1,
+      name: "Science",
+    },
+    {
+      id: 7,
+      parent_id: 3,
+      name: "Biology",
+    },
+    {
+      id: 6,
+      parent_id: 3,
+      name: "Physics",
+    },
+  ], keys));
   const { renderHeTree } = useHeTree({
     ...keys,
     data,
@@ -14,7 +59,7 @@ export default function BasePage() {
       {node.name}
     </div>,
   })
-  return <div style={{ width: '300px', border: '1px solid #ccc', padding: '10px' }}>
-    {renderHeTree()}
+  return <div>
+    {renderHeTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
   </div>
 }

src/pages/base_tree_data.tsx

@@ -1,9 +1,59 @@
-import { createTreeData } from './_data'
-import { useHeTree } from "../../lib/index";
+import { useHeTree } from "he-tree-react";
 import { useState } from 'react';
 
 export default function BasePage() {
-  const [data, setdata] = useState(createTreeData);
+  const [data, setdata] = useState(() => [
+    {
+      id: 1,
+      name: "Root Category",
+      children: [
+        {
+          id: 2,
+          name: "Technology",
+          children: [
+            {
+              id: 5,
+              name: "Hardware",
+              children: [
+                {
+                  id: 10,
+                  name: "Computer Components",
+                  children: [],
+                },
+              ],
+            },
+            {
+              id: 4,
+              name: "Programming",
+              children: [
+                {
+                  id: 8,
+                  name: "Python",
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: 3,
+          name: "Science",
+          children: [
+            {
+              id: 7,
+              name: "Biology",
+              children: [],
+            },
+            {
+              id: 6,
+              name: "Physics",
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  ]);
   const { renderHeTree } = useHeTree({
     data,
     dataType: 'tree',
@@ -14,6 +64,6 @@ export default function BasePage() {
     </div>,
   })
   return <div>
-    {renderHeTree()}
+    {renderHeTree({ style: { width: '300px', border: '1px solid #555', padding: '20px' } })}
   </div>
 }