add: 左边增加收缩切换按钮

src/pages/editor/Container.tsx

@@ -28,6 +28,7 @@ const { TabPane } = Tabs;
 
 const Container = (props: { history?: any; location?: any; pstate?: any; dispatch?: any }) => {
   const [scaleNum, setScale] = useState(1);
+  const [collapsed, setCollapsed] = useState(false);
 
   const { pstate, dispatch } = props;
   const pointData = pstate ? pstate.pointData : {};
@@ -39,6 +40,10 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc
     setScale(1);
   };
 
+  const toggleCollapsed = (checked: boolean) => {
+    setCollapsed(checked);
+  };
+
   const CpIcon = {
     base: <HighlightOutlined />,
     media: <PlayCircleOutlined />,
@@ -123,9 +128,10 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc
         pointData={pointData}
         clearData={clearData}
         location={props.location}
+        toggleCollapsed={toggleCollapsed}
       />
       <div className={styles.container}>
-        <div className={styles.list}>
+        <div className={!collapsed ? styles.list : styles.collapsed}>
           <div className={styles.searchBar}>
             <Alert
               banner
@@ -195,6 +201,7 @@ const Container = (props: { history?: any; location?: any; pstate?: any; dispatc
             canvasId={canvasId}
             allType={allType}
           />
+
           <div className={styles.resetBall}>
             <ReloadOutlined onClick={() => setDragState({ x: 0, y: 0 })} />
           </div>

src/pages/editor/components/Header/index.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, memo } from 'react';
-import { Button, Input, Popover, Modal } from 'antd';
+import { Button, Input, Popover, Modal, Switch } from 'antd';
 import {
   ArrowLeftOutlined,
   MobileOutlined,
@@ -28,10 +28,11 @@ interface HeaderComponentProps {
   clearData: any;
   undohandler: any;
   redohandler: any;
+  toggleCollapsed: any;
 }
 
 const HeaderComponent = memo((props: HeaderComponentProps) => {
-  const { pointData, location, clearData, undohandler, redohandler } = props;
+  const { pointData, location, clearData, undohandler, redohandler, toggleCollapsed } = props;
   const iptRef = useRef<Input>(null);
 
   const toPreview = () => {
@@ -135,6 +136,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
           <ArrowLeftOutlined />
         </div>
         <div className={styles.logo}>Dooring</div>
+        <Switch onChange={toggleCollapsed} style={{ marginLeft: '100px' }} />
       </div>
       <div className={styles.controlArea}>
         <Button type="primary" style={{ marginRight: '9px' }} onClick={useTemplate}>

src/pages/editor/index.less

@@ -1,6 +1,17 @@
 .layout {
   height: 100%;
   width: 100%;
+  div::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  div::-webkit-scrollbar-thumb {
+    background: #bfbfbf;
+    border-radius: 10px;
+  }
+  div::-webkit-scrollbar-thumb:hover {
+    background: #2f54eb;
+  }
   .editorWrap {
     background-color: rgba(245, 245, 245, 1);
     height: 100%;
@@ -194,6 +205,10 @@
         }
       }
     }
+    .collapsed {
+      .list;
+      height: calc(56px);
+    }
   }
 }
 

src/pages/home/index.less

@@ -3,11 +3,12 @@
   height: 100%;
   .leftArea {
     padding: 10px 0 10px 20px;
-    width: 320px;
+    // width: 320px;
     border-right: 1px solid #f0f0f0;
   }
   .contentArea {
     flex: 1;
+    margin-right: 60px;
     .logoTip {
       padding-top: 100px;
       text-align: center;

src/pages/home/index.tsx

@@ -6,6 +6,7 @@ import {
   ConsoleSqlOutlined,
   GithubOutlined,
   CodeOutlined,
+  IdcardOutlined,
 } from '@ant-design/icons';
 import styles from './index.less';
 
@@ -47,6 +48,17 @@ const Home = () => {
           >
             正在开发...
           </TabPane>
+          <TabPane
+            tab={
+              <span>
+                <IdcardOutlined />
+                我的可视化
+              </span>
+            }
+            key="3"
+          >
+            正在开发...
+          </TabPane>
         </Tabs>
       </div>
       <div className={styles.contentArea}>