feat: 新增工具栏模块， 修改系统设置初始化结构

src/views/chart/ContentBox/index.vue

@@ -12,13 +12,18 @@
       </n-space>
       <n-space>
         <slot name="top-right"></slot>
-        <n-icon v-show="backIcon" size="20" class="go-cursor-pointer" @click="backHandle">
+        <n-icon
+          v-show="backIcon"
+          size="20"
+          class="go-cursor-pointer"
+          @click="backHandle"
+        >
           <chevron-back-outline-icon></chevron-back-outline-icon>
         </n-icon>
       </n-space>
     </div>
 
-    <aside
+    <div
       class="content"
       :class="{
         'content-height-show-top-bottom': showBottom || showTop,
@@ -38,11 +43,14 @@
           <slot></slot>
         </n-scrollbar>
       </template>
-    </aside>
+    </div>
 
     <div v-if="showBottom" class="bottom go-mt-0">
       <slot name="bottom"></slot>
     </div>
+    <div class="aside">
+      <slot name="aside"></slot>
+    </div>
   </div>
 </template>
 
@@ -95,31 +103,31 @@ $topOrBottomHeight: 40px;
   margin: 1px;
   margin-bottom: 0;
   &.bg-depth0 {
-    @include filter-bg-color("background-color1");
+    @include filter-bg-color('background-color1');
     .bottom,
     .top {
-      @include filter-bg-color("background-color1");
+      @include filter-bg-color('background-color1');
     }
   }
   &.bg-depth1 {
-    @include filter-bg-color("background-color1");
+    @include filter-bg-color('background-color1');
     .bottom,
     .top {
-      @include filter-bg-color("background-color2");
+      @include filter-bg-color('background-color2');
     }
   }
   &.bg-depth2 {
-    @include filter-bg-color("background-color2");
+    @include filter-bg-color('background-color2');
     .bottom,
     .top {
-      @include filter-bg-color("background-color3");
+      @include filter-bg-color('background-color3');
     }
   }
   &.bg-depth3 {
-    @include filter-bg-color("background-color3");
+    @include filter-bg-color('background-color3');
     .bottom,
     .top {
-      @include filter-bg-color("background-color4");
+      @include filter-bg-color('background-color4');
     }
   }
   &.flex {
@@ -134,14 +142,14 @@ $topOrBottomHeight: 40px;
     height: $topOrBottomHeight;
     padding: 0 10px;
     border-top: 1px solid;
-    @include filter-border-color("hover-border-color");
+    @include filter-border-color('hover-border-color');
     .mt-1 {
       margin-top: 2px;
     }
   }
   .top {
     border-bottom: 1px solid;
-    @include filter-border-color("background-color1");
+    @include filter-border-color('background-color1');
   }
   .content {
     height: calc(100vh - #{$--header-height});

src/views/chart/ContentEdit/components/EditTools/index.ts

@@ -0,0 +1,3 @@
+import EditTools from './index.vue'
+
+export { EditTools }

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="go-chart-edit-tools" :class="settingStore.getChartToolsStatus">
+    <!-- aside -->
+    <div v-if="settingStore.getChartToolsStatus === ToolsStatusEnum.ASIDE" class="tools-aside"></div>
+    <!-- dock -->
+    <div v-else class="tools-dock"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSettingStore } from '@/store/modules/settingStore/settingStore'
+import { ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d'
+
+const settingStore = useSettingStore()
+</script>
+
+<style lang="scss" scoped>
+/* 底部区域的高度 */
+$topOrBottomHeight: 40px;
+$asideBottom: 100px;
+@include go('chart-edit-tools') {
+  position: absolute;
+  &.dock {
+    right: 10px;
+    bottom: $asideBottom;
+    }
+  &.aside {
+    left: 50%;
+    bottom: $topOrBottomHeight;
+  }
+  .tools-aside {
+
+  }
+  .tools-dock {
+
+  }
+}
+</style>

src/views/chart/ContentEdit/index.vue

@@ -9,6 +9,7 @@
     @drop="handleDrag"
     @dragover="handleDragOver"
   >
+    <!-- 画布主体 -->
     <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
       <!-- 展示 -->
       <edit-range>
@@ -36,6 +37,12 @@
         </edit-shape-box>
       </edit-range>
     </div>
+
+    <!-- 工具栏 -->
+    <template #aside>
+      <edit-tools></edit-tools>
+    </template>
+
     <!-- 底部控制 -->
     <template #bottom>
       <EditBottom></EditBottom>
@@ -49,10 +56,15 @@ import { ContentBox } from '../contentBox/index'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
 import { EditShapeBox } from './components/EditShapeBox'
+import { EditTools } from './components/EditTools'
 
 import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.hook'
-import { handleDrag, handleDragOver, useMouseHandle } from './hooks/useDrag.hook'
+import {
+  handleDrag,
+  handleDragOver,
+  useMouseHandle
+} from './hooks/useDrag.hook'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
@@ -83,22 +95,21 @@ const themeColor = computed(() => {
 onMounted(() => {
   useAddKeyboard()
 })
-
 </script>
 
 <style lang="scss" scoped>
-@include goId("chart-edit-layout") {
+@include goId('chart-edit-layout') {
   position: relative;
   width: 100%;
   overflow: hidden;
   @extend .go-point-bg;
-  @include background-image("background-point");
-  @include goId("chart-edit-content") {
+  @include background-image('background-point');
+  @include goId('chart-edit-content') {
     border-radius: 10px;
     margin: 15px;
     overflow: hidden;
     @extend .go-transition;
-    @include fetch-theme("box-shadow");
+    @include fetch-theme('box-shadow');
     .edit-content-chart {
       position: absolute;
       overflow: hidden;