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

src/components/GoSystemSet/index.d.ts

@@ -8,4 +8,5 @@ export type ListType = {
   step?: number
   min?: number
   tip?: string
+  options?: { label: string; value: any }[]
 }

src/components/GoSystemSet/index.vue

@@ -10,10 +10,15 @@
         </n-space>
       </template>
 
-      <n-list-item v-for="item in list" :key="item.name">
+      <n-list-item v-for="item in list" :key="item.key">
-        <n-space :size="40">
+        <!-- 分割线 -->
+        <n-divider v-if="item.type === 'divider'" style="margin: 0;" />
+        <n-space v-else :size="40">
           <n-space>
+            <!-- 左侧标题 -->
             <n-text class="item-left">{{ item.name }}</n-text>
+
+            <!-- 数据操作 -->
             <template v-if="item.type === 'switch'">
               <n-switch
                 v-model:value="item.value"
@@ -21,6 +26,7 @@
                 @update:value="handleChange($event, item)"
               ></n-switch>
             </template>
+
             <template v-else-if="item.type === 'number'">
               <n-input-number
                 v-model:value="item.value"
@@ -32,7 +38,13 @@
                 @update:value="handleChange($event, item)"
               ></n-input-number>
             </template>
+
+            <template v-else-if="item.type === 'select'">
+              <n-select v-model:value="item.value" size="small" :options="item.options" />
+            </template>
           </n-space>
+
+          <!-- 右侧描述 -->
           <n-space>
             <n-text class="item-right">{{ item.desc }}</n-text>
             <n-tooltip v-if="item.tip" trigger="hover">
@@ -46,7 +58,6 @@
           </n-space>
         </n-space>
       </n-list-item>
-      <n-list-item></n-list-item>
     </n-list>
   </n-modal>
 </template>
@@ -55,7 +66,7 @@
 import { reactive } from 'vue'
 import { ListType } from './index.d'
 import { useSettingStore } from '@/store/modules/settingStore/settingStore'
-import { SettingStoreEnums } from '@/store/modules/settingStore/settingStore.d'
+import { SettingStoreEnums, ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d'
 import { icon } from '@/plugins'
 
 const { HelpOutlineIcon, CloseIcon } = icon.ionicons5
@@ -91,6 +102,37 @@ const list = reactive<ListType[]>([
     desc: '切换语言重新加载页面',
     tip: '若遇到部分区域语言切换失败，则建议开启'
   },
+  {
+    key: 'divider1',
+    type: 'divider',
+    name: '',
+    desc: '',
+    value: ''
+  },
+  {
+    key: SettingStoreEnums.CHART_TOOLS_STATUS,
+    value: settingStore.getChartToolsStatus,
+    type: 'select',
+    name: '工具栏展示',
+    desc: '工作空间工具栏展示方式',
+    options: [
+      {
+        label: '侧边栏',
+        value: ToolsStatusEnum.ASIDE
+      },
+      {
+        label: '底部',
+        value: ToolsStatusEnum.DOCK
+      }
+    ]
+  },
+  {
+    key: 'divider0',
+    type: 'divider',
+    name: '',
+    desc: '',
+    value: ''
+  },
   {
     key: SettingStoreEnums.CHART_MOVE_DISTANCE,
     value: settingStore.getChartMoveDistance,
@@ -99,7 +141,7 @@ const list = reactive<ListType[]>([
     min: 1,
     step: 1,
     suffix: 'px',
-    desc: '方向键控制图标移动的距离'
+    desc: '工作空间方向键控制移动距离'
   },
   {
     key: SettingStoreEnums.CHART_ALIGN_RANGE,
@@ -109,8 +151,8 @@ const list = reactive<ListType[]>([
     min: 10,
     step: 2,
     suffix: 'px',
-    desc: '移动图表时的吸附距离'
+    desc: '工作空间移动图表时的吸附距离'
-  },
+  }
 ])
 
 const closeHandle = () => {
@@ -127,11 +169,17 @@ const handleChange = (e: MouseEvent, item: ListType) => {
   @extend .go-background-filter;
   min-width: 100px;
   max-width: 60vw;
+  padding-bottom: 20px;
   .item-left {
     width: 200px;
   }
   .input-num-width {
     width: 100px;
   }
+  @include deep() {
+    .n-list-item:not(:last-child) {
+      border-bottom: 0;
+    }
+  }
 }
 </style>

src/settings/systemSetting.ts

@@ -1,16 +1,17 @@
+import { SettingStoreEnums, ToolsStatusEnum } from '@/store/modules/settingStore/settingStore.d'
+
 // * 系统全局设置
-
+export const systemSetting = {
-// 侧边栏折叠是否隐藏全部
+  // 侧边栏折叠是否隐藏全部
-export const asideAllCollapsed = true
+  [SettingStoreEnums.ASIDE_ALL_COLLAPSED]: true,
-
+  // 拖拽页面左侧表单分类只有一项的时候是否隐藏
-// 拖拽页面左侧表单分类只有一项的时候是否隐藏
+  [SettingStoreEnums.HIDE_PACKAGE_ONE_CATEGORY]: true,
-export const hidePackageOneCategory = true
+  // 切换语言是否进行路由刷新
-
+  [SettingStoreEnums.CHANGE_LANG_RELOAD]: false,
-// 切换语言是否进行路由刷新
+  // 图表移动时按方向键移动的距离
-export const changeLangReload = false
+  [SettingStoreEnums.CHART_MOVE_DISTANCE]: 5,
-
+  // 图表拖拽时的吸附距离（px）
-// 图表移动时按方向键移动的距离
+  [SettingStoreEnums.CHART_ALIGN_RANGE]: 10,
-export const chartMoveDistance = 5
+  // 图表工具栏状态（侧边工具状态）
-
+  [SettingStoreEnums.CHART_TOOLS_STATUS]: ToolsStatusEnum.ASIDE
-// 图表拖拽时的吸附距离（px）
+}
-export const chartAlignRange = 10

src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

@@ -4,7 +4,7 @@ export enum ChartLayoutStoreEnum {
   LAYERS = 'layers',
   CHARTS = 'charts',
   DETAILS = 'details',
-  ALIGNLINE = 'alignLine',
+  TOOLS = 'tools'
 }
 
 export interface ChartLayoutType {
@@ -14,6 +14,4 @@ export interface ChartLayoutType {
   [ChartLayoutStoreEnum.CHARTS]: boolean
   // 详情设置
   [ChartLayoutStoreEnum.DETAILS]: boolean
-  // 对齐线
-  [ChartLayoutStoreEnum.ALIGNLINE]: boolean
 }

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -8,7 +8,7 @@ const chartEditStore = useChartEditStore()
 
 const { GO_CHART_LAYOUT_STORE } = StorageEnum
 
-const storageChartLayout: ChartLayoutType = getLocalStorage( GO_CHART_LAYOUT_STORE)
+const storageChartLayout: ChartLayoutType = getLocalStorage(GO_CHART_LAYOUT_STORE)
 
 // 编辑区域布局和静态设置
 export const useChartLayoutStore = defineStore({
@@ -20,9 +20,7 @@ export const useChartLayoutStore = defineStore({
       // 图表组件
       charts: true,
       // 详情设置
-      details: true,
+      details: true
-      // 对齐线
-      alignLine: true,
     },
   getters: {
     getLayers(): boolean {
@@ -33,9 +31,6 @@ export const useChartLayoutStore = defineStore({
     },
     getDetails(): boolean {
       return this.details
-    },
-    getAlignLine(): boolean {
-      return this.alignLine
     }
   },
   actions: {

src/store/modules/settingStore/settingStore.d.ts

@@ -1,9 +1,15 @@
+export enum ToolsStatusEnum {
+  DOCK = 'dock',
+  ASIDE = 'aside',
+}
+
 export enum SettingStoreEnums {
   HIDE_PACKAGE_ONE_CATEGORY = 'hidePackageOneCategory',
   CHANGE_LANG_RELOAD = 'changeLangReload',
   ASIDE_ALL_COLLAPSED = 'asideAllCollapsed',
   CHART_MOVE_DISTANCE = 'chartMoveDistance',
   CHART_ALIGN_RANGE = 'chartAlignRange',
+  CHART_TOOLS_STATUS = 'chartToolsStatus',
 }
 
 export interface SettingStoreType {
@@ -12,4 +18,5 @@ export interface SettingStoreType {
   [SettingStoreEnums.ASIDE_ALL_COLLAPSED]: boolean
   [SettingStoreEnums.CHART_MOVE_DISTANCE]: number
   [SettingStoreEnums.CHART_ALIGN_RANGE]: number
+  [SettingStoreEnums.CHART_TOOLS_STATUS]: ToolsStatusEnum
 }

src/store/modules/settingStore/settingStore.ts

@@ -1,30 +1,19 @@
 import { defineStore } from 'pinia'
-import {
+import { systemSetting } from '@/settings/systemSetting'
-  hidePackageOneCategory,
-  changeLangReload,
-  asideAllCollapsed,
-  chartAlignRange,
-  chartMoveDistance
-} from '@/settings/systemSetting'
 import { asideCollapsedWidth } from '@/settings/designSetting'
-import { SettingStoreType } from './settingStore.d'
+import { SettingStoreType, ToolsStatusEnum } from './settingStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 const { GO_SYSTEM_SETTING_STORE } = StorageEnum
 
-const storageSetting: SettingStoreType = getLocalStorage(GO_SYSTEM_SETTING_STORE)
+const storageSetting: SettingStoreType = getLocalStorage(
+  GO_SYSTEM_SETTING_STORE
+)
 
 // 全局设置
 export const useSettingStore = defineStore({
   id: 'useSettingStore',
-  state: (): SettingStoreType =>
+  state: (): SettingStoreType => storageSetting || systemSetting,
-    storageSetting || {
-      hidePackageOneCategory,
-      changeLangReload,
-      asideAllCollapsed,
-      chartMoveDistance,
-      chartAlignRange,
-    },
   getters: {
     getHidePackageOneCategory(): boolean {
       return this.hidePackageOneCategory
@@ -43,14 +32,20 @@ export const useSettingStore = defineStore({
     },
     getChartAlignRange(): number {
       return this.chartAlignRange
+    },
+    getChartToolsStatus(): ToolsStatusEnum {
+      return this.chartToolsStatus
     }
   },
   actions: {
-    setItem<T extends keyof SettingStoreType, K extends SettingStoreType[T]>(key: T, value: K): void {
+    setItem<T extends keyof SettingStoreType, K extends SettingStoreType[T]>(
+      key: T,
+      value: K
+    ): void {
       this.$patch(state => {
-        state[key]= value
+        state[key] = value
-      });
+      })
       setLocalStorage(GO_SYSTEM_SETTING_STORE, this.$state)
-    },
+    }
-  },
+  }
 })

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 background-image('background-point');
-  @include goId("chart-edit-content") {
+  @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;