From 7fac78c30ab8591721acfea28077734e077365d9 Mon Sep 17 00:00:00 2001
From: ansgoo <haiven_123@163.com>
Date: Sun, 10 Sep 2023 16:04:25 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E7=A7=BB=E9=99=A4=E4=BA=86N-Layout?=
 =?UTF-8?q?=E7=B3=BB=E5=88=97=E7=BB=84=E4=BB=B6=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/data/rest/Pane.vue                        |  8 +-
 src/data/rest/RestDataView.vue                | 46 +++------
 src/data/websocket/WebsocketView.vue          | 45 ++-------
 src/designer/Pane/Toolbar/Toolbar.vue         |  2 +-
 src/designer/modules/backItem/BackItem.vue    | 10 +-
 .../modules/ruler/sketch-ruler/Index.vue      |  2 +-
 src/designer/pages/designer/Canvas.vue        | 93 ++++++++++---------
 src/designer/pages/designer/Designer.vue      | 86 +++++++----------
 src/ui/index.ts                               | 36 +------
 9 files changed, 114 insertions(+), 214 deletions(-)

diff --git a/src/data/rest/Pane.vue b/src/data/rest/Pane.vue
index cd365a7e..119833c1 100644
--- a/src/data/rest/Pane.vue
+++ b/src/data/rest/Pane.vue
@@ -3,7 +3,7 @@
     <o-input-group>
       <o-input v-model:value="formData.url" style="flex: 1" readonly>
         <template #prefix>
-          <span class="success-text" style="font-weight: 800">
+          <span class="accent-green-500" style="font-weight: 800">
             {{ formData.method }}
           </span>
         </template>
@@ -145,9 +145,3 @@ watch(
   { immediate: true }
 )
 </script>
-
-<style lang="less" scoped>
-.success-text {
-  color: #18a058;
-}
-</style>
diff --git a/src/data/rest/RestDataView.vue b/src/data/rest/RestDataView.vue
index 54ca5847..33ef3a4e 100644
--- a/src/data/rest/RestDataView.vue
+++ b/src/data/rest/RestDataView.vue
@@ -3,20 +3,23 @@
     <div class="rest-data">
       <slot name="data-select"></slot>
     </div>
-    <div class="api">
-      <o-select
-        v-model:value="formData['method']"
-        :options="requestMethodOptions"
-        class="method"
-        :show-arrow="true"
-        @update-value="formChange"
-      />
-      <o-input v-model:value="formData['url']" class="url" @update-value="formChange" />
-      <o-space>
+    <div class="flex flex-row mt-1">
+      <div class="w-1/4">
+        <o-select
+          v-model:value="formData['method']"
+          :options="requestMethodOptions"
+          :show-arrow="true"
+          @update-value="formChange"
+        />
+      </div>
+      <div class="flex-1">
+        <o-input v-model:value="formData['url']" @update-value="formChange" />
+      </div>
+      <div>
         <o-button-group class="send">
           <o-button type="primary" @click="send">调试</o-button>
         </o-button-group>
-      </o-space>
+      </div>
     </div>
     <div class="config">
       <o-tabs type="line" animated>
@@ -70,7 +73,6 @@ import {
   ODivider,
   OInput,
   OSelect,
-  OSpace,
   OTabPane,
   OTabs
 } from 'open-data-v/ui'
@@ -173,26 +175,6 @@ const formChange = () => {
 </script>
 
 <style scoped lang="less">
-.rest-data {
-  display: flex;
-  margin-bottom: 5px;
-  .selected {
-    flex: 4;
-  }
-  .title {
-    flex: 8;
-  }
-}
-.api {
-  display: flex;
-  .method {
-    min-width: 110px;
-    flex: 8;
-  }
-  .url {
-    flex: 90;
-  }
-}
 .response {
   .resp-fail {
     color: #f76560;
diff --git a/src/data/websocket/WebsocketView.vue b/src/data/websocket/WebsocketView.vue
index 3633fea2..2414ff18 100644
--- a/src/data/websocket/WebsocketView.vue
+++ b/src/data/websocket/WebsocketView.vue
@@ -1,16 +1,16 @@
 <template>
   <o-card>
-    <div class="rest-data">
+    <div class="flex">
       <slot name="data-select"></slot>
     </div>
-    <div class="api">
-      <o-input v-model:value="formData['url']" class="url" @update-value="formChange" />
-      <o-space>
+    <div class="flex flex-row">
+      <o-input v-model:value="formData['url']" class="flex-1" @update-value="formChange" />
+      <div>
         <o-button-group class="send">
           <o-button type="primary" @click="connect">链接</o-button>
           <o-button @click="send">发送</o-button>
         </o-button-group>
-      </o-space>
+      </div>
     </div>
     <div class="config">
       <o-tabs type="line" animated>
@@ -31,7 +31,7 @@
   </o-card>
 </template>
 <script setup lang="ts">
-import { OButton, OButtonGroup, OCard, OInput, OSpace, OTabPane, OTabs } from 'open-data-v/ui'
+import { OButton, OButtonGroup, OCard, OInput, OTabPane, OTabs } from 'open-data-v/ui'
 import { onUnmounted, reactive, ref } from 'vue'
 
 import { dataLogger } from '../utils'
@@ -101,36 +101,3 @@ onUnmounted(() => {
   close()
 })
 </script>
-
-<style scoped lang="less">
-.rest-data {
-  display: flex;
-  margin-bottom: 5px;
-  .selected {
-    flex: 4;
-  }
-  .title {
-    flex: 8;
-  }
-}
-.api {
-  display: flex;
-  .method {
-    min-width: 110px;
-    flex: 8;
-  }
-  .url {
-    flex: 90;
-  }
-}
-.response {
-  .resp-fail {
-    color: #f76560;
-    margin-left: 10px;
-  }
-  .resp-code.resp-success {
-    color: #18a058;
-    margin-left: 10px;
-  }
-}
-</style>
diff --git a/src/designer/Pane/Toolbar/Toolbar.vue b/src/designer/Pane/Toolbar/Toolbar.vue
index 86aa5345..223b4bf7 100644
--- a/src/designer/Pane/Toolbar/Toolbar.vue
+++ b/src/designer/Pane/Toolbar/Toolbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <ToolBar v-if="toolbars.length > 0" :bars="toolbars">
+  <ToolBar v-if="toolbars.length > 0" :bars="toolbars" class="w-full">
     <div class="tool-bar-title">{{ canvasState.name }}</div>
   </ToolBar>
 </template>
diff --git a/src/designer/modules/backItem/BackItem.vue b/src/designer/modules/backItem/BackItem.vue
index edfb5ae9..205df258 100644
--- a/src/designer/modules/backItem/BackItem.vue
+++ b/src/designer/modules/backItem/BackItem.vue
@@ -1,6 +1,6 @@
 <template>
-  <o-space vertical style="width: 100%">
-    <o-select v-model:value="selectOption" :options="options" />
+  <div class="flex flex-col flex-nowrap">
+    <o-select v-model:value="selectOption" :options="options" class="pb-2.5" />
 
     <o-color-picker
       v-if="selectOption === 'backgroundColor'"
@@ -16,13 +16,13 @@
     <div v-else-if="selectOption === 'backgroundGradient'">
       <linear-gradient v-model:value="backgroundGradient" @update:value="changeBackgroundImage" />
     </div>
-  </o-space>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { isNumber } from 'lodash-es'
 import type { SelectOption } from 'open-data-v/ui'
-import { OColorPicker, OSelect, OSpace } from 'open-data-v/ui'
+import { OColorPicker, OSelect } from 'open-data-v/ui'
 import { onMounted, ref } from 'vue'
 
 import { GlobalColorSwatches } from '../enum'
@@ -113,5 +113,3 @@ onMounted(() => {
   }
 })
 </script>
-
-<style lang="less" scoped></style>
diff --git a/src/designer/modules/ruler/sketch-ruler/Index.vue b/src/designer/modules/ruler/sketch-ruler/Index.vue
index 93684683..c2712ba3 100644
--- a/src/designer/modules/ruler/sketch-ruler/Index.vue
+++ b/src/designer/modules/ruler/sketch-ruler/Index.vue
@@ -143,7 +143,7 @@ const paletteCpu = computed<PaletteType>(() => {
 <style lang="less">
 .style-ruler {
   position: absolute;
-  z-index: 3; /* 需要比resizer高 */
+  //z-index: 3; /* 需要比resizer高 */
   width: 100%; /* scrollbar width */
   height: 100%;
   overflow: hidden;
diff --git a/src/designer/pages/designer/Canvas.vue b/src/designer/pages/designer/Canvas.vue
index fe30477e..45d39b32 100644
--- a/src/designer/pages/designer/Canvas.vue
+++ b/src/designer/pages/designer/Canvas.vue
@@ -1,19 +1,13 @@
 <template>
-  <o-layout ref="centerCanvas" v-resize="editorWindowResizeHandler">
-    <!-- 中间画布 -->
-    <o-layout-content class="content">
-      <o-scrollbar x-scrollable class="x-scrollable" :style="scrollbarStyle">
-        <Editor />
-      </o-scrollbar>
-    </o-layout-content>
-    <o-layout-footer position="absolute" class="footer">
-      <o-space justify="end" align="center" style="height: 100%; margin-right: 5px">
-        <o-el
-          tag="span"
-          :style="{ color: primaryColor, transition: `all 0.3s ${cubicBezierEaseInOut}` }"
-        >
-          画布缩放:
-        </o-el>
+  <div ref="centerCanvas" class="middle">
+    <div class="canvas overflow-auto">
+      <div class="edit" :style="scrollbarStyle">
+        <Editor v-resize="editorWindowResizeHandler" />
+      </div>
+    </div>
+    <div class="flex flex-row justify-end items-center ml-0.5 w-full">
+      <div class="flex-nowrap flex">
+        <span :style="{ transition: `all 0.3s ${cubicBezierEaseInOut}` }"> 缩放: </span>
         <o-slider
           :value="sliderValue"
           :min="10"
@@ -28,9 +22,9 @@
           style="width: 90px"
           @update:value="handleScale"
         />
-      </o-space>
-    </o-layout-footer>
-  </o-layout>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -38,23 +32,13 @@ import { debounce } from 'lodash-es'
 import { useThemeVars } from 'naive-ui'
 import { useCanvasState } from 'open-data-v/designer'
 import type { SelectOption } from 'open-data-v/ui'
-import {
-  OEl,
-  OLayout,
-  OLayoutContent,
-  OLayoutFooter,
-  OScrollbar,
-  OSelect,
-  OSlider,
-  OSpace
-} from 'open-data-v/ui'
+import { OSelect, OSlider } from 'open-data-v/ui'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import Editor from '../../Editor'
 
 const windowWidth = ref<number>(0)
 const windowHeight = ref<number>(0)
-const toolBarHeight = ref<number>(35)
 
 const sliderValue = ref<number>(100)
 const selectValue = ref<string>('100%')
@@ -84,7 +68,7 @@ const options: SelectOption[] = [
 ]
 
 const themeVars = useThemeVars()
-const { primaryColor, cubicBezierEaseInOut } = themeVars.value
+const { cubicBezierEaseInOut } = themeVars.value
 
 const scrollbarStyle = computed(() => {
   return {
@@ -96,7 +80,7 @@ const scrollbarStyle = computed(() => {
 const editorWindowResizeHandler = (entry: ResizeObserverEntry) => {
   const { width, height } = entry.contentRect
   windowWidth.value = width
-  windowHeight.value = height - toolBarHeight.value
+  windowHeight.value = height - 100
 }
 
 const handleScale = (value: number) => {
@@ -111,7 +95,7 @@ const changeScale = debounce((value: number) => {
 }, 300)
 
 // region 按住 alt 或 command + 滚轮缩放
-const centerCanvas = ref()
+const centerCanvas = ref<HTMLDivElement | null>(null)
 function setScaleByWheel(e: WheelEvent) {
   const max = 200
   const min = 10
@@ -133,26 +117,49 @@ function setScaleByWheel(e: WheelEvent) {
 }
 
 onMounted(() => {
-  centerCanvas.value.$el!.addEventListener('wheel', setScaleByWheel, false)
+  centerCanvas.value?.$el?.addEventListener('wheel', setScaleByWheel, false)
 })
 
 onBeforeUnmount(() => {
-  centerCanvas.value.$el!.removeEventListener('wheel', setScaleByWheel, false)
+  centerCanvas.value?.$el?.removeEventListener('wheel', setScaleByWheel, false)
 })
-// endregion
 </script>
 
-<style lang="less" scoped>
-.content {
-  box-shadow: inset 0 0 3px black;
-  :deep(.n-scrollbar-content) {
+<style scoped lang="less">
+.middle {
+  .canvas {
+    height: calc(95vh - 40px);
+  }
+  .canvas ::-webkit-scrollbar-track-piece {
+    background-color: #b8b8b8;
+    -webkit-border-radius: 0;
+  }
+  .canvas::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  .canvas::-webkit-scrollbar-track {
+    border-radius: 100vh;
+    background: #0000;
+  }
+  .canvas::-webkit-scrollbar-thumb {
+    height: 10vh;
+    background-color: #b8b8b880;
+    -webkit-border-radius: 6px;
+    outline-offset: -2px;
+    -moz-opacity: 0.5;
+    border-radius: 100vh;
+    opacity: 0.1;
+  }
+  .canvas::-webkit-scrollbar-thumb:hover {
+    height: 10vh;
+    background-color: #878987;
+    -webkit-border-radius: 6px;
+  }
+  :deep(.edit) {
     transform-origin: left top;
     transform: scale(v-bind(scaleValue));
     transition: all 0.3s;
   }
 }
-
-.footer {
-  height: v-bind('toolBarHeight + "px"');
-}
 </style>
diff --git a/src/designer/pages/designer/Designer.vue b/src/designer/pages/designer/Designer.vue
index 26fdb18e..cc50cefa 100644
--- a/src/designer/pages/designer/Designer.vue
+++ b/src/designer/pages/designer/Designer.vue
@@ -1,21 +1,10 @@
 <template>
-  <o-layout class="home">
-    <o-layout-header class="header">
+  <div class="main h-fit flex-col flex flex-nowrap">
+    <div class="w-full h-14 align-middle">
       <ToolBar :toolbars="toolbars" />
-    </o-layout-header>
-    <!-- 左侧组件列表 -->
-    <o-layout has-sider class="main">
-      <o-layout-sider
-        class="left"
-        width="15rem"
-        :collapsed="collapsedLeft"
-        :native-scrollbar="false"
-        bordered
-        collapse-mode="width"
-        show-trigger
-        @collapse="collapsedLeft = true"
-        @expand="collapsedLeft = false"
-      >
+    </div>
+    <div class="content flex flex-nowrap flex-row">
+      <div class="left">
         <LeftSideBar
           v-model:iscollapsed="collapsedLeft"
           @update:iscollapsed="
@@ -24,41 +13,25 @@
             }
           "
         />
-      </o-layout-sider>
-      <o-layout has-sider sider-placement="right">
-        <Canvas />
-        <o-layout-sider
-          class="right"
-          width="20rem"
-          :collapsed="collapsedRight"
-          :native-scrollbar="false"
-          bordered
-          collapse-mode="width"
-          show-trigger="arrow-circle"
-          @collapse="collapsedRight = true"
-          @expand="collapsedRight = false"
-        >
-          <RightSideBar
-            v-model:iscollapsed="collapsedRight"
-            @update:iscollapsed="
-              (value) => {
-                collapsedRight = value
-              }
-            "
-          />
-        </o-layout-sider>
-      </o-layout>
-
-      <!-- 右侧属性列表 -->
-    </o-layout>
-  </o-layout>
+      </div>
+      <Canvas class="canvas" />
+      <div class="right">
+        <RightSideBar
+          v-model:iscollapsed="collapsedRight"
+          @update:iscollapsed="
+            (value) => {
+              collapsedRight = value
+            }
+          "
+        />
+      </div>
+    </div>
+  </div>
 </template>
-
 <script setup lang="ts">
 import { useData, useProp } from 'open-data-v/base'
 import type { ToolBarItemType } from 'open-data-v/designer'
 import { useCanvasState } from 'open-data-v/designer'
-import { OLayout, OLayoutHeader, OLayoutSider } from 'open-data-v/ui'
 import { onUnmounted, provide, readonly, ref } from 'vue'
 
 import type { LayoutData } from '../../../designer/state/type'
@@ -89,12 +62,23 @@ onUnmounted(() => {
   canvasState.clearCanvas()
 })
 </script>
-
 <style scoped lang="less">
-.home > :deep(.n-layout-scroll-container:first-child) {
-  @apply flex flex-col h-screen;
-  .header {
-    @apply h-12;
+.main {
+  .content {
+    width: 100vw;
+    height: calc(95vh - 40px);
+    .canvas {
+      width: calc(100% - 28vw);
+    }
+    .left {
+      width: 14vw;
+      min-width: 35px;
+      height: 100%;
+    }
+    .right {
+      width: 14vw;
+      height: 100%;
+    }
   }
 }
 </style>
diff --git a/src/ui/index.ts b/src/ui/index.ts
index 9c6df58a..01c7dcf1 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -8,26 +8,18 @@ import {
   NDescriptions,
   NDescriptionsItem,
   NDivider,
-  NEl,
   NEmpty,
   NForm,
   NFormItem,
   NInput,
   NInputGroup,
   NInputNumber,
-  NLayout,
-  NLayoutContent,
-  NLayoutFooter,
-  NLayoutHeader,
-  NLayoutSider,
   NMenu,
   NModal,
   NRadio,
   NRadioGroup,
-  NScrollbar,
   NSelect,
   NSlider,
-  NSpace,
   NSpin,
   NSwitch,
   NTabPane,
@@ -47,15 +39,6 @@ const ODescriptions = NDescriptions
 const ODescriptionsItem = NDescriptionsItem
 const OEmpty = NEmpty
 const OMenu = NMenu
-const OEl = NEl
-const OLayout = NLayout
-const OLayoutContent = NLayoutContent
-const OLayoutFooter = NLayoutFooter
-const OScrollbar = NScrollbar
-const OSlider = NSlider
-const OSpace = NSpace
-const OLayoutHeader = NLayoutHeader
-const OLayoutSider = NLayoutSider
 const OForm = NForm
 const OFormItem = NFormItem
 const OColorPicker = NColorPicker
@@ -75,6 +58,8 @@ const ODivider = NDivider
 const OSpin = NSpin
 const OTooltip = NTooltip
 const OButtonGroup = NButtonGroup
+
+const OSlider = NSlider
 export default {
   OInput: OInput,
   OSelect: NSelect,
@@ -84,15 +69,6 @@ export default {
   ODescriptionsItem: NDescriptionsItem,
   OEmpty: NEmpty,
   OMenu: NMenu,
-  OEl: NEl,
-  OLayout: NLayout,
-  OLayoutContent: NLayoutContent,
-  OLayoutFooter: NLayoutFooter,
-  OScrollbar: NScrollbar,
-  OSlider: NSlider,
-  OSpace: NSpace,
-  OLayoutHeader: NLayoutHeader,
-  OLayoutSider: NLayoutSider,
   OForm: NForm,
   OFormItem: NFormItem,
   OColorPicker: NColorPicker,
@@ -126,26 +102,18 @@ export {
   ODescriptions,
   ODescriptionsItem,
   ODivider,
-  OEl,
   OEmpty,
   OForm,
   OFormItem,
   OInput,
   OInputGroup,
   OInputNumber,
-  OLayout,
-  OLayoutContent,
-  OLayoutFooter,
-  OLayoutHeader,
-  OLayoutSider,
   OMenu,
   OModal,
   ORadio,
   ORadioGroup,
-  OScrollbar,
   OSelect,
   OSlider,
-  OSpace,
   OSpin,
   OSwitch,
   OTabPane,

From 28f8d1c9e77356386b02916fa7c95758ae4f70ee Mon Sep 17 00:00:00 2001
From: ansgoo <haiven_123@163.com>
Date: Sun, 10 Sep 2023 17:24:24 +0800
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=E6=BB=9A=E8=BD=AE=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/designer/Pane/{Toolbar => Toolsbar}/Toolbar.vue |  0
 src/designer/Pane/{Toolbar => Toolsbar}/index.ts    |  0
 src/designer/index.ts                               | 10 ++++++++++
 src/designer/pages/designer/Canvas.vue              |  4 ++--
 src/designer/pages/designer/Designer.vue            |  2 +-
 5 files changed, 13 insertions(+), 3 deletions(-)
 rename src/designer/Pane/{Toolbar => Toolsbar}/Toolbar.vue (100%)
 rename src/designer/Pane/{Toolbar => Toolsbar}/index.ts (100%)

diff --git a/src/designer/Pane/Toolbar/Toolbar.vue b/src/designer/Pane/Toolsbar/Toolbar.vue
similarity index 100%
rename from src/designer/Pane/Toolbar/Toolbar.vue
rename to src/designer/Pane/Toolsbar/Toolbar.vue
diff --git a/src/designer/Pane/Toolbar/index.ts b/src/designer/Pane/Toolsbar/index.ts
similarity index 100%
rename from src/designer/Pane/Toolbar/index.ts
rename to src/designer/Pane/Toolsbar/index.ts
diff --git a/src/designer/index.ts b/src/designer/index.ts
index f1d2798a..18274d0f 100644
--- a/src/designer/index.ts
+++ b/src/designer/index.ts
@@ -2,13 +2,18 @@ import type { ToolBarItemType } from './components'
 import { CodeEditor, Group, ToolBar, ToolBarItem, XIcon } from './components'
 import DemoDataPlugin from './data/DemoData'
 import type { StoreComponentData } from './db'
+import Editor from './Editor'
 import Shape from './Editor/Shape'
 import { ComponentGroupList, DataMode, EditMode, GroupType, PixelEnum } from './enum'
 import useComponentPlugin from './loadPlugin'
 import useEmpty from './modules/Empty'
 import Container from './modules/form/Container'
+import Canvas from './pages/designer/Canvas.vue'
 import Designer from './pages/designer/Designer.vue'
 import Previewer from './pages/perviewer/viewer.vue'
+import LeftSideBar from './Pane/LeftSideBar'
+import RightSideBar from './Pane/RightSideBar'
+import ToolsBar from './Pane/Toolsbar'
 import Directive from './plugins/directive'
 import type { ContextmenuItem } from './plugins/directive/contextmenu'
 import {
@@ -35,6 +40,7 @@ import type {
 import { createComponent, handleLogger } from './utils'
 
 export {
+  Canvas,
   CodeEditor,
   ComponentGroupList,
   Container,
@@ -45,18 +51,22 @@ export {
   Designer,
   Directive,
   EditMode,
+  Editor,
   exportCanvas,
   Group,
   GroupType,
   handleLogger,
   importCanvas,
+  LeftSideBar,
   PixelEnum,
   Previewer,
   recoveryDraft,
+  RightSideBar,
   setShowEm,
   Shape,
   ToolBar,
   ToolBarItem,
+  ToolsBar,
   undo,
   useActionState,
   useCanvasState,
diff --git a/src/designer/pages/designer/Canvas.vue b/src/designer/pages/designer/Canvas.vue
index 45d39b32..decb0b4e 100644
--- a/src/designer/pages/designer/Canvas.vue
+++ b/src/designer/pages/designer/Canvas.vue
@@ -117,11 +117,11 @@ function setScaleByWheel(e: WheelEvent) {
 }
 
 onMounted(() => {
-  centerCanvas.value?.$el?.addEventListener('wheel', setScaleByWheel, false)
+  centerCanvas.value?.addEventListener('wheel', setScaleByWheel, false)
 })
 
 onBeforeUnmount(() => {
-  centerCanvas.value?.$el?.removeEventListener('wheel', setScaleByWheel, false)
+  centerCanvas.value?.removeEventListener('wheel', setScaleByWheel, false)
 })
 </script>
 
diff --git a/src/designer/pages/designer/Designer.vue b/src/designer/pages/designer/Designer.vue
index cc50cefa..8a4a94c9 100644
--- a/src/designer/pages/designer/Designer.vue
+++ b/src/designer/pages/designer/Designer.vue
@@ -37,7 +37,7 @@ import { onUnmounted, provide, readonly, ref } from 'vue'
 import type { LayoutData } from '../../../designer/state/type'
 import LeftSideBar from '../../Pane/LeftSideBar'
 import RightSideBar from '../../Pane/RightSideBar'
-import ToolBar from '../../Pane/Toolbar'
+import ToolBar from '../../Pane/Toolsbar'
 import Canvas from './Canvas.vue'
 
 withDefaults(

From a26efcee1fed94486d251e09f08c40dee14476d0 Mon Sep 17 00:00:00 2001
From: ansgoo <haiven_123@163.com>
Date: Sun, 10 Sep 2023 17:31:05 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix:=20=E5=BA=95=E9=83=A8=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=A0=8F=E5=BC=82=E5=B8=B8=E6=B6=88=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/App.vue | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/examples/App.vue b/examples/App.vue
index 9006d45a..bdf8f11c 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -2,32 +2,21 @@
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 import { NGlobalStyle, NLoadingBarProvider } from 'naive-ui'
-import { useCanvasState } from 'open-data-v/designer'
-import { computed, provide, readonly, ref } from 'vue'
+import { computed, provide, readonly } from 'vue'
 import { RouterView, useRouter } from 'vue-router'
 
 import ConfigProvider from '@/components/provider/ConfigProvider.vue'
 import { useProjectSettingStoreWithOut } from '@/store/modules/projectSetting'
 
-const canvasState = useCanvasState()
 const projectStore = useProjectSettingStoreWithOut()
 provide('DarkTheme', readonly(computed(() => projectStore.darkTheme)))
-const overflow = ref<string>(
-  (() => {
-    if (!canvasState.isEditMode) {
-      return 'hidden'
-    } else {
-      return 'auto'
-    }
-  })()
-)
 const { currentRoute } = useRouter()
 </script>
 
 <template>
   <ConfigProvider>
     <n-loading-bar-provider>
-      <RouterView :key="currentRoute.path" :style="{ overflow }" />
+      <RouterView :key="currentRoute.path" />
       <n-global-style />
     </n-loading-bar-provider>
   </ConfigProvider>

From a343a9e7bda9249f47506b0af499cd36c3b0e8ae Mon Sep 17 00:00:00 2001
From: ansgoo <haiven_123@163.com>
Date: Sun, 10 Sep 2023 21:56:32 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E4=BA=86?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E7=9A=84toggle=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/App.vue                              |  3 --
 .../LeftSideBar/Component/ComponentList.vue   | 11 ++++-
 src/designer/Pane/LeftSideBar/SideBar.vue     |  4 +-
 src/designer/Pane/RightSideBar/SideBar.vue    | 17 +++++--
 src/designer/pages/designer/Designer.vue      | 42 ++++++++++++----
 src/designer/pages/designer/toggle.vue        | 49 +++++++++++++++++++
 6 files changed, 106 insertions(+), 20 deletions(-)
 create mode 100644 src/designer/pages/designer/toggle.vue

diff --git a/examples/App.vue b/examples/App.vue
index bdf8f11c..8e3ebd00 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
 import { NGlobalStyle, NLoadingBarProvider } from 'naive-ui'
 import { computed, provide, readonly } from 'vue'
 import { RouterView, useRouter } from 'vue-router'
@@ -28,6 +26,5 @@ body,
 #app {
   height: 100vh;
   width: 100vw;
-  // overflow: hidden;
 }
 </style>
diff --git a/src/designer/Pane/LeftSideBar/Component/ComponentList.vue b/src/designer/Pane/LeftSideBar/Component/ComponentList.vue
index 47ad44ca..f640080f 100644
--- a/src/designer/Pane/LeftSideBar/Component/ComponentList.vue
+++ b/src/designer/Pane/LeftSideBar/Component/ComponentList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="components">
-    <o-menu :options="menuOptions" :accordion="false" />
+    <o-menu :options="menuOptions" :accordion="false" :collapsed="!iscollapsed" />
   </div>
 </template>
 
@@ -14,6 +14,15 @@ import { computed, getCurrentInstance, h } from 'vue'
 
 import ComponentItem from './ComponentItem.vue'
 
+withDefaults(
+  defineProps<{
+    iscollapsed?: boolean
+  }>(),
+  {
+    iscollapsed: true
+  }
+)
+
 const canvasState = useCanvasState()
 const instance = getCurrentInstance()
 const XIcon = instance!.appContext.components['XIcon']
diff --git a/src/designer/Pane/LeftSideBar/SideBar.vue b/src/designer/Pane/LeftSideBar/SideBar.vue
index c77e33f4..4219ee3b 100644
--- a/src/designer/Pane/LeftSideBar/SideBar.vue
+++ b/src/designer/Pane/LeftSideBar/SideBar.vue
@@ -1,6 +1,6 @@
 <template>
   <o-tabs
-    v-if="!iscollapsed"
+    v-if="iscollapsed"
     v-model:value="activeKey"
     type="line"
     animated
@@ -40,7 +40,7 @@
       <template #tab>
         <x-icon name="components" @click="switchTab('layer')" />
       </template>
-      <ComponentList />
+      <ComponentList :iscollapsed="iscollapsed" />
     </o-tab-pane>
     <o-tab-pane v-else-if="activeKey === 'layer'" name="layer" display-directive="show:lazy">
       <template #tab>
diff --git a/src/designer/Pane/RightSideBar/SideBar.vue b/src/designer/Pane/RightSideBar/SideBar.vue
index 6c733583..540d479a 100644
--- a/src/designer/Pane/RightSideBar/SideBar.vue
+++ b/src/designer/Pane/RightSideBar/SideBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!iscollapsed">
+  <div v-if="iscollapsed">
     <o-tabs
       v-if="curComponent"
       v-model:value="activeKey"
@@ -62,7 +62,7 @@
     </o-tabs>
   </div>
   <div v-else>
-    <o-menu :options="menuOptions" />
+    <o-menu :options="menuOptions" :collapsed="!iscollapsed" />
   </div>
 </template>
 
@@ -134,7 +134,17 @@ const menuOptions = computed<MenuOption[]>(() => {
         key: '1',
         icon: () =>
           h(XIcon, {
-            name: 'page'
+            name: 'page',
+            onClick: () => collapsedTabPane('canvas')
+          })
+      },
+      {
+        label: '数据',
+        key: '2',
+        icon: () =>
+          h(XIcon, {
+            name: 'data',
+            onClick: () => collapsedTabPane('data')
           })
       }
     ]
@@ -150,6 +160,5 @@ const collapsedTabPane = (key: string) => {
 .attr-list {
   @apply overflow-auto p-1 pt-0 h-full;
   backdrop-filter: blur(50px);
-  //margin-right: 10px;
 }
 </style>
diff --git a/src/designer/pages/designer/Designer.vue b/src/designer/pages/designer/Designer.vue
index 8a4a94c9..79bebde8 100644
--- a/src/designer/pages/designer/Designer.vue
+++ b/src/designer/pages/designer/Designer.vue
@@ -1,12 +1,18 @@
 <template>
   <div class="main h-fit flex-col flex flex-nowrap">
-    <div class="w-full h-14 align-middle">
+    <div class="top w-full h-14 align-middle">
       <ToolBar :toolbars="toolbars" />
     </div>
     <div class="content flex flex-nowrap flex-row">
       <div class="left">
+        <Toggle
+          :direction="leftDreiction"
+          :x="leftWidth"
+          location="left"
+          @click="collapsedLeft = !collapsedLeft"
+        />
         <LeftSideBar
-          v-model:iscollapsed="collapsedLeft"
+          :iscollapsed="collapsedLeft"
           @update:iscollapsed="
             (value) => {
               collapsedLeft = value
@@ -16,6 +22,12 @@
       </div>
       <Canvas class="canvas" />
       <div class="right">
+        <Toggle
+          :x="rightWidth"
+          location="right"
+          :direction="rightDreiction"
+          @click="collapsedRight = !collapsedRight"
+        />
         <RightSideBar
           v-model:iscollapsed="collapsedRight"
           @update:iscollapsed="
@@ -32,13 +44,14 @@
 import { useData, useProp } from 'open-data-v/base'
 import type { ToolBarItemType } from 'open-data-v/designer'
 import { useCanvasState } from 'open-data-v/designer'
-import { onUnmounted, provide, readonly, ref } from 'vue'
+import { computed, onUnmounted, provide, readonly, ref } from 'vue'
 
 import type { LayoutData } from '../../../designer/state/type'
 import LeftSideBar from '../../Pane/LeftSideBar'
 import RightSideBar from '../../Pane/RightSideBar'
 import ToolBar from '../../Pane/Toolsbar'
 import Canvas from './Canvas.vue'
+import Toggle from './toggle.vue'
 
 withDefaults(
   defineProps<{
@@ -50,8 +63,8 @@ withDefaults(
 )
 const canvasState = useCanvasState()
 
-const collapsedLeft = ref(false)
-const collapsedRight = ref(false)
+const collapsedLeft = ref(true)
+const collapsedRight = ref(true)
 provide('HOOKS', readonly({ useProp, useData }))
 const setLayoutData = (data: LayoutData) => {
   canvasState.setLayoutData(data)
@@ -61,22 +74,31 @@ defineExpose({ setLayoutData })
 onUnmounted(() => {
   canvasState.clearCanvas()
 })
+const leftWidth = computed<string>(() => (collapsedLeft.value ? '18rem' : '4rem'))
+const leftDreiction = computed<string>(() => (collapsedLeft.value ? 'left' : 'right'))
+
+const rightWidth = computed<string>(() => (collapsedRight.value ? '18rem' : '4rem'))
+const rightDreiction = computed<string>(() => (collapsedRight.value ? 'right' : 'left'))
+
+const canvasWidth = computed<string>(() => `calc(100vw - ${leftWidth.value} - ${rightWidth.value})`)
 </script>
 <style scoped lang="less">
 .main {
+  .top {
+    border-bottom: 1px solid;
+  }
   .content {
     width: 100vw;
-    height: calc(95vh - 40px);
+    height: calc(95vh - 4rem);
     .canvas {
-      width: calc(100% - 28vw);
+      width: v-bind(canvasWidth);
     }
     .left {
-      width: 14vw;
-      min-width: 35px;
+      width: v-bind(leftWidth);
       height: 100%;
     }
     .right {
-      width: 14vw;
+      width: v-bind(rightWidth);
       height: 100%;
     }
   }
diff --git a/src/designer/pages/designer/toggle.vue b/src/designer/pages/designer/toggle.vue
new file mode 100644
index 00000000..23c500a8
--- /dev/null
+++ b/src/designer/pages/designer/toggle.vue
@@ -0,0 +1,49 @@
+<template>
+  <span class="relative toggle"> {{ viewSymbol }} </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    direction?: 'left' | 'right'
+    location?: 'left' | 'right'
+    x?: string
+    y?: string
+  }>(),
+  {
+    direction: 'left',
+    x: '50%',
+    y: '50%',
+    location: 'left'
+  }
+)
+const viewSymbol = computed<string>(() => {
+  return props.location === 'left' && props.direction === 'left' ? '<' : '>'
+})
+const top = computed<string>(() => props.y || '50%')
+const left = computed<string>(() =>
+  props.location === 'left' ? `calc(${props.x} - 10px)` : 'unset'
+)
+const right = computed<string>(() => (props.location === 'right' ? `0` : 'unset'))
+</script>
+<style scoped lang="less">
+.toggle {
+  top: v-bind(top);
+  left: v-bind(left);
+  right: v-bind(right);
+  border: 1px solid;
+  background-color: #48484e;
+  z-index: 999;
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  font-size: 10px;
+  align-content: center;
+  display: inline-block;
+  margin: 0 auto;
+  text-align: center;
+  font-weight: bold;
+}
+</style>

From 04f55aa16bf83d293bb220f89b92688ca9896c99 Mon Sep 17 00:00:00 2001
From: ansgoo <haiven_123@163.com>
Date: Sun, 10 Sep 2023 22:15:47 +0800
Subject: [PATCH 5/5] fix: build error

---
 src/designer/pages/designer/Designer.vue | 4 ++--
 src/designer/pages/designer/toggle.vue   | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/designer/pages/designer/Designer.vue b/src/designer/pages/designer/Designer.vue
index 79bebde8..ae44a0fd 100644
--- a/src/designer/pages/designer/Designer.vue
+++ b/src/designer/pages/designer/Designer.vue
@@ -75,10 +75,10 @@ onUnmounted(() => {
   canvasState.clearCanvas()
 })
 const leftWidth = computed<string>(() => (collapsedLeft.value ? '18rem' : '4rem'))
-const leftDreiction = computed<string>(() => (collapsedLeft.value ? 'left' : 'right'))
+const leftDreiction = computed<'left' | 'right'>(() => (collapsedLeft.value ? 'left' : 'right'))
 
 const rightWidth = computed<string>(() => (collapsedRight.value ? '18rem' : '4rem'))
-const rightDreiction = computed<string>(() => (collapsedRight.value ? 'right' : 'left'))
+const rightDreiction = computed<'left' | 'right'>(() => (collapsedRight.value ? 'right' : 'left'))
 
 const canvasWidth = computed<string>(() => `calc(100vw - ${leftWidth.value} - ${rightWidth.value})`)
 </script>
diff --git a/src/designer/pages/designer/toggle.vue b/src/designer/pages/designer/toggle.vue
index 23c500a8..2cca9980 100644
--- a/src/designer/pages/designer/toggle.vue
+++ b/src/designer/pages/designer/toggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="relative toggle"> {{ viewSymbol }} </span>
+  <span class="relative toggle z-50"> {{ viewSymbol }} </span>
 </template>
 
 <script setup lang="ts">
@@ -35,7 +35,6 @@ const right = computed<string>(() => (props.location === 'right' ? `0` : 'unset'
   right: v-bind(right);
   border: 1px solid;
   background-color: #48484e;
-  z-index: 999;
   width: 20px;
   height: 20px;
   border-radius: 10px;