layers tree I

src/App.tsx

@@ -1,42 +1,83 @@
-import React, { createContext, useEffectEvent, useState } from 'react';
-import { Layout, theme, Breadcrumb } from 'antd';
+import React, { createContext, useEffect, useEffectEvent, useState } from 'react';
+import { Layout, theme, Breadcrumb, Button, Space, Tree, type TreeDataNode } from 'antd';
 import Graph, { GraphModel } from './components/Graph';
 import type { BreadcrumbItemType } from 'antd/es/breadcrumb/Breadcrumb';
 import { useKeysdownStore } from './stores/ArrayStore';
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined
+} from '@ant-design/icons';
+import { useGraphLayersTreeStore } from './stores/TreeStore';
 
-const { Content } = Layout;
+const { Header, Content, Sider } = Layout;
 
 const App: React.FC = () => {
   const {
-    token: { colorBgContainer, borderRadiusLG },
+    token: { colorBgContainer },
   } = theme.useToken();
   const [graphLevel, setGraphLevel] = useState<BreadcrumbItemType[]>([])
+  const [collapsed, setCollapsed] = useState(true);
   const addKey = useKeysdownStore(state => state.add);
   const removeKey = useKeysdownStore(state => state.remove);
   const onKeydown = useEffectEvent((key: string) => {
-    addKey(key);    
+    addKey(key);
   });
   const onKeyUp = useEffectEvent((key: string) => {
     removeKey(key);
   })
-  document.addEventListener('keydown', (ev) => {    
+  document.addEventListener('keydown', (ev) => {
     onKeydown(ev.key)
   });
-  document.addEventListener('keyup', (ev) =>  {
+  document.addEventListener('keyup', (ev) => {
     onKeyUp(ev.key);
-  })
+  });
+  const treeData = useGraphLayersTreeStore(store => store.tree);
+
+  useEffect(() => {
+    console.info(treeData);
+  }, [treeData])
 
   return (
     <Layout>
+      <Sider trigger={null} collapsible collapsed={collapsed} collapsedWidth={0} style={{
+        background: colorBgContainer,
+      }}>
+        <Header style={{ padding: 0 }}></Header>
+        <Tree
+          checkable
+          treeData={treeData}
+          defaultExpandAll={true}
+          style={{
+            borderRadius: 0
+          }}
+        />
+      </Sider>
       <Layout>
-        <Breadcrumb style={{ margin: '8px 0 0 16px' }} items={graphLevel} />
+        <Header style={{ padding: 0, background: colorBgContainer }}>
+          <Space>
+            <div style={{ background: '#001529' }}>
+              <Button
+                type="text"
+                icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+                onClick={() => setCollapsed(!collapsed)}
+                style={{
+                  fontSize: '16px',
+                  width: 32,
+                  height: 32,
+                  color: colorBgContainer,
+                }}
+              />
+            </div>
+            <Breadcrumb items={graphLevel} />
+          </Space>
+        </Header>
         <Content
           style={{
             margin: '8px 16px',
             padding: 24,
             minHeight: 280,
             background: colorBgContainer,
-            borderRadius: borderRadiusLG,
+            borderRadius: '6px'
           }}
         >
           <Graph setGraphPath={setGraphLevel} />