From b308275d99f6acc0502694031dd86ea4c368f92f Mon Sep 17 00:00:00 2001
From: jeo young <1414294708@qq.com>
Date: Fri, 16 Dec 2022 19:08:34 +0800
Subject: [PATCH 01/16] =?UTF-8?q?fix:=20=E7=94=BB=E5=B8=83=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enums/editPageEnum.ts                     |   3 +-
 src/utils/utils.ts                            |   8 +-
 src/views/chart/ContentBox/index.vue          |  36 +++-
 .../ContentEdit/components/EditRule/ruler.vue | 193 ++++++++++++++++++
 src/views/chart/ContentEdit/index.vue         |  99 ++++-----
 src/views/chart/hooks/useKeyboard.hook.ts     |  26 ++-
 types/global.d.ts                             |   2 +
 types/shims-vue.d.ts                          |   3 +-
 8 files changed, 289 insertions(+), 81 deletions(-)
 create mode 100644 src/views/chart/ContentEdit/components/EditRule/ruler.vue

diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts
index bfb51ef0..4b26802d 100644
--- a/src/enums/editPageEnum.ts
+++ b/src/enums/editPageEnum.ts
@@ -67,7 +67,8 @@ export enum WinKeyboard {
   ALT = ' alt',
   CTRL_SOURCE_KEY = 'control',
   SHIFT_SOURCE_KEY = 'shift',
-  ALT_SOURCE_KEY = 'alt'
+  ALT_SOURCE_KEY = 'alt',
+  SPACE = 'Space'
 }
 
 // Mac 键盘枚举
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 6d56e05c..b587d854 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -273,15 +273,21 @@ export const objToCookie = (obj: RequestParamsObjType) => {
  * @returns
  */
 export const setKeyboardDressShow = (keyCode?: number) => {
-  const code = new Map([[17, WinKeyboard.CTRL]])
+  const code = new Map([
+    [17, WinKeyboard.CTRL],
+    [32, WinKeyboard.SPACE]
+  ])
 
   const dom = document.getElementById('keyboard-dress-show')
   if (!dom) return
   if (!keyCode) {
+    window.onKeySpacePressHold?.(false)
     dom.innerText = ''
     return
   }
   if (keyCode && code.has(keyCode)) {
+    window.onKeySpacePressHold?.(true)
     dom.innerText = `按下了「${code.get(keyCode)}」键`
   }
 }
+
diff --git a/src/views/chart/ContentBox/index.vue b/src/views/chart/ContentBox/index.vue
index 826bbb85..8f7b5e5d 100644
--- a/src/views/chart/ContentBox/index.vue
+++ b/src/views/chart/ContentBox/index.vue
@@ -18,14 +18,14 @@
       </n-space>
     </div>
 
-    <div
-      class="content"
-      :class="{
-        'content-height-show-top-bottom': showBottom || showTop,
-        'content-height-show-both': showBottom && showTop
-      }"
-    >
-      <template v-if="xScroll">
+    <div class="content" :class="{
+      'content-height-show-top-bottom': showBottom || showTop,
+      'content-height-show-both': showBottom && showTop
+    }">
+      <template v-if="disabledScroll">
+        <slot></slot>
+      </template>
+      <template v-else-if="xScroll">
         <n-scrollbar x-scrollable>
           <n-scrollbar>
             <slot></slot>
@@ -83,7 +83,11 @@ defineProps({
   xScroll: {
     type: Boolean,
     default: false
-  }
+  },
+  disabledScroll: {
+    type: Boolean,
+    default: false
+  },
 })
 
 const backHandle = () => {
@@ -93,41 +97,52 @@ const backHandle = () => {
 
 <style lang="scss" scoped>
 $topOrBottomHeight: 40px;
+
 @include go(content-box) {
   height: calc(100vh - #{$--header-height});
   margin: 1px;
   margin-bottom: 0;
+
   &.bg-depth0 {
     @include fetch-bg-color('background-color1');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color1');
     }
   }
+
   &.bg-depth1 {
     @include fetch-bg-color('background-color1');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color2');
     }
   }
+
   &.bg-depth2 {
     @include fetch-bg-color('background-color2');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color3');
     }
   }
+
   &.bg-depth3 {
     @include fetch-bg-color('background-color3');
+
     .bottom,
     .top {
       @include fetch-bg-color('background-color4');
     }
   }
+
   &.flex {
     flex: 1;
   }
+
   .top,
   .bottom {
     display: flex;
@@ -138,10 +153,12 @@ $topOrBottomHeight: 40px;
     padding: 0 10px;
     border-top: 1px solid;
     @include fetch-border-color('hover-border-color');
+
     .mt-1 {
       margin-top: 2px;
     }
   }
+
   .top {
     border-bottom: 1px solid;
     @include fetch-border-color('background-color1');
@@ -159,6 +176,7 @@ $topOrBottomHeight: 40px;
   .content-height-show-top-bottom {
     height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight});
   }
+
   .content-height-show-both {
     height: calc(100vh - #{$--header-height} - #{$topOrBottomHeight} - #{$topOrBottomHeight});
   }
diff --git a/src/views/chart/ContentEdit/components/EditRule/ruler.vue b/src/views/chart/ContentEdit/components/EditRule/ruler.vue
new file mode 100644
index 00000000..79668649
--- /dev/null
+++ b/src/views/chart/ContentEdit/components/EditRule/ruler.vue
@@ -0,0 +1,193 @@
+<template>
+    <div :style="{ position: 'relative', overflow: 'hidden', width: '100%', height: '100%' }">
+        <sketch-rule :thick="thick" :scale="scale" :width="canvasBox().width" :height="canvasBox().height"
+            :startX="startX" :startY="startY" :lines="lines"
+            :palette="{ bgColor: '#18181c', longfgColor: '#4d4d4d', shortfgColor: '#4d4d4d', fontColor: '#4d4d4d', shadowColor: '#18181c', borderColor: '#18181c', cornerActiveColor: '#18181c' }">
+        </sketch-rule>
+        <div ref="$app" class="screens" @scroll="handleScroll">
+            <div ref="$container" class="screenContainer" :style="{ width: screenContainerWidth + 'px' }">
+                <div id="refcanvasBox" ref="refcanvasBox" class="canvas" @mousedown="dragCanvas"
+                    :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }">
+                    <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
+                        <slot></slot>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
+import { listen } from "dom-helpers"
+
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const chartEditStore = useChartEditStore()
+
+const thick = 20
+const screenContainerWidth = 5000
+var prevMoveXVallue = [0, 0]
+var prevMoveYVallue = [0, 0]
+
+const $app = ref()
+const refcanvasBox = ref()
+const $container = ref()
+
+const scale = computed(() => {
+    return chartEditStore.getEditCanvas.scale
+})
+const startX = ref(0)
+const startY = ref(0)
+const lines = reactive({ h: [], v: [] })
+
+const handleWheel = (e: any) => {
+    e.preventDefault()
+    if (e.ctrlKey || e.metaKey) {
+        // const nextScale = parseFloat(Math.max(.2, scale.value - e.deltaY / canvasBox().height).toFixed(2))
+        // chartEditStore.setScale(nextScale)
+
+        chartEditStore.setScale(e.wheelDelta >= 120 ? scale.value + 0.01 : e.wheelDelta <= 120 ? scale.value - 0.01 : scale.value)
+    }
+}
+
+const isPressSpace = ref(false)
+const cursorStyle = ref('auto')
+
+window.onKeySpacePressHold = (isHold: boolean) => {
+    isPressSpace.value = isHold
+}
+watch(
+    () => isPressSpace.value,
+    newValue => {
+        cursorStyle.value = newValue ? 'grab' : 'auto'
+    }
+)
+
+onMounted(() => {
+    $app.value.addEventListener('wheel', handleWheel, { passive: false })
+    // 滚动居中
+    $app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2
+
+})
+
+const handleScroll = () => {
+    const screensRect = $app.value.getBoundingClientRect()
+    const canvasRect = refcanvasBox.value.getBoundingClientRect()
+
+    // 标尺开始的刻度
+    startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
+    startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
+}
+// 处理标尺重制大小
+watch(
+    () => scale.value,
+    (newValue, oldValue) => {
+        if (oldValue !== newValue) {
+            handleScroll()
+            chartEditStore.setScale(newValue)
+        }
+    }
+)
+
+onUnmounted(() => {
+    $app.value.removeEventListener('wheel', handleWheel)
+})
+
+const dragCanvas = (e: any) => {
+    if (!window.$KeyboardActive?.space) return
+
+    // @ts-ignore
+    document.activeElement?.blur()
+
+    e.preventDefault()
+    e.stopPropagation()
+
+    const startX = e.pageX
+    const startY = e.pageY
+
+    const un1 = listen(window, "mousemove", (e: any) => {
+
+        const nx = e.pageX - startX
+        const ny = e.pageY - startY
+
+        const [prevMoveX1, prevMoveX2] = prevMoveXVallue
+        const [prevMoveY1, prevMoveY2] = prevMoveYVallue
+
+        prevMoveXVallue = [prevMoveX2, nx]
+        prevMoveYVallue = [prevMoveY2, ny]
+
+        $app.value.scrollLeft -= prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
+        $app.value.scrollTop -= prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
+    })
+    const un2 = listen(window, "mouseup", () => {
+        un1()
+        un2()
+        prevMoveXVallue = [0, 0]
+        prevMoveYVallue = [0, 0]
+    })
+}
+
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
+
+const canvasBox = () => {
+    const layoutDom = document.getElementById('go-chart-edit-layout')
+    if (layoutDom) {
+        return {
+            height: layoutDom.clientHeight - 40 - 44,
+            width: layoutDom.clientWidth
+        }
+    }
+    return {
+        width: width.value,
+        height: height.value
+    }
+}
+</script>
+<style lang="scss" scoped>
+.screens {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    user-select: none;
+
+    /* firefox */
+    scrollbar-color: rgba(144, 146, 152, .3) transparent;
+    scrollbar-width: thin;
+
+    /* chrome */
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-track-piece {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar {
+        width: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background-color: rgba(144, 146, 152, .3);
+    }
+}
+
+.screenContainer {
+    position: absolute;
+    height: 3000px;
+}
+
+.canvas {
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    transform-origin: 50% 0;
+
+    &:hover {
+        cursor: v-bind('cursorStyle');
+    }
+
+    &:active {
+        cursor: crosshair;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 520a558c..f43d426f 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -1,71 +1,43 @@
 <template>
-  <edit-rule></edit-rule>
-  <content-box
-    id="go-chart-edit-layout"
-    :flex="true"
-    :showTop="false"
-    :showBottom="true"
-    :depth="1"
-    :xScroll="true"
-    @mousedown="mousedownHandleUnStop"
-    @drop="dragHandle"
-    @dragover="dragoverHandle"
-    @dragenter="dragoverHandle"
-  >
-    <!-- 画布主体 -->
-    <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
-      <!-- 展示 -->
-      <edit-range>
-        <!-- 滤镜预览 -->
-        <div
-          :style="{
+  <!-- <edit-rule></edit-rule> -->
+  <content-box id="go-chart-edit-layout" :flex="true" :showTop="false" :showBottom="true" :depth="1" :xScroll="true" :disabledScroll="true"
+    @mousedown="mousedownHandleUnStop" @drop="dragHandle" @dragover="dragoverHandle" @dragenter="dragoverHandle">
+    <ruler>
+      <!-- 画布主体 -->
+      <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
+        <!-- 展示 -->
+        <edit-range>
+          <!-- 滤镜预览 -->
+          <div :style="{
             ...getFilterStyle(chartEditStore.getEditCanvasConfig),
             ...rangeStyle
-          }"
-        >
-          <!-- 图表 -->
-          <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
-            <!-- 分组 -->
-            <edit-group
-              v-if="item.isGroup"
-              :groupData="(item as CreateComponentGroupType)"
-              :groupIndex="index"
-            ></edit-group>
+          }">
+            <!-- 图表 -->
+            <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
+              <!-- 分组 -->
+              <edit-group v-if="item.isGroup" :groupData="(item as CreateComponentGroupType)"
+                :groupIndex="index"></edit-group>
 
-            <!-- 单组件 -->
-            <edit-shape-box
-              v-else
-              :data-id="item.id"
-              :index="index"
-              :style="{
+              <!-- 单组件 -->
+              <edit-shape-box v-else :data-id="item.id" :index="index" :style="{
                 ...useComponentStyle(item.attr, index),
                 ...getBlendModeStyle(item.styles) as any
-              }"
-              :item="item"
-              @click="mouseClickHandle($event, item)"
-              @mousedown="mousedownHandle($event, item)"
-              @mouseenter="mouseenterHandle($event, item)"
-              @mouseleave="mouseleaveHandle($event, item)"
-              @contextmenu="handleContextMenu($event, item, optionsHandle)"
-            >
-              <component
-                class="edit-content-chart"
-                :class="animationsClass(item.styles.animations)"
-                :is="item.chartConfig.chartKey"
-                :chartConfig="item"
-                :themeSetting="themeSetting"
-                :themeColor="themeColor"
-                :style="{
-                  ...useSizeStyle(item.attr),
-                  ...getFilterStyle(item.styles),
-                  ...getTransformStyle(item.styles)
-                }"
-              ></component>
-            </edit-shape-box>
+              }" :item="item" @click="mouseClickHandle($event, item)" @mousedown="mousedownHandle($event, item)"
+                @mouseenter="mouseenterHandle($event, item)" @mouseleave="mouseleaveHandle($event, item)"
+                @contextmenu="handleContextMenu($event, item, optionsHandle)">
+                <component class="edit-content-chart" :class="animationsClass(item.styles.animations)"
+                  :is="item.chartConfig.chartKey" :chartConfig="item" :themeSetting="themeSetting"
+                  :themeColor="themeColor" :style="{
+                    ...useSizeStyle(item.attr),
+                    ...getFilterStyle(item.styles),
+                    ...getTransformStyle(item.styles)
+                  }"></component>
+              </edit-shape-box>
+            </div>
           </div>
-        </div>
-      </edit-range>
-    </div>
+        </edit-range>
+      </div>
+    </ruler>
 
     <!-- 工具栏 -->
     <template #aside>
@@ -97,7 +69,8 @@ import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 import { ContentBox } from '../ContentBox/index'
 import { EditGroup } from './components/EditGroup'
 import { EditRange } from './components/EditRange'
-import { EditRule } from './components/EditRule'
+// import { EditRule } from './components/EditRule'
+import Ruler from './components/EditRule/ruler.vue'
 import { EditBottom } from './components/EditBottom'
 import { EditShapeBox } from './components/EditShapeBox'
 import { EditTools } from './components/EditTools'
@@ -185,12 +158,14 @@ onMounted(() => {
   overflow: hidden;
   @extend .go-point-bg;
   @include background-image('background-point');
+
   @include goId('chart-edit-content') {
     border-radius: 10px;
     margin: 25px;
     overflow: hidden;
     @extend .go-transition;
     @include fetch-theme('box-shadow');
+
     .edit-content-chart {
       position: absolute;
       overflow: hidden;
diff --git a/src/views/chart/hooks/useKeyboard.hook.ts b/src/views/chart/hooks/useKeyboard.hook.ts
index fce80e5e..c8a79685 100644
--- a/src/views/chart/hooks/useKeyboard.hook.ts
+++ b/src/views/chart/hooks/useKeyboard.hook.ts
@@ -110,21 +110,33 @@ const macKeyList: Array<string> = [
 const keyRecordHandle = () => {
   // 默认赋值
   window.$KeyboardActive = {
-    ctrl: false
+    ctrl: false,
+    space: false
   }
-  
+
   document.onkeydown = (e: KeyboardEvent) => {
-    if(e.keyCode === 17 && window.$KeyboardActive) {
+    const { keyCode } = e
+    if (keyCode == 32 && e.target == document.body) e.preventDefault()
+
+    if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
       setKeyboardDressShow(e.keyCode)
-      window.$KeyboardActive.ctrl = true
+      switch (keyCode) {
+        case 17: window.$KeyboardActive.ctrl = true; break
+        case 32: window.$KeyboardActive.space = true; break
+      }
     }
   }
 
   document.onkeyup = (e: KeyboardEvent) => {
-    if(e.keyCode === 17 && window.$KeyboardActive) 
-    {
-      window.$KeyboardActive.ctrl = false
+    const { keyCode } = e
+    if (keyCode == 32 && e.target == document.body) e.preventDefault()
+
+    if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
       setKeyboardDressShow()
+      switch (keyCode) {
+        case 17: window.$KeyboardActive.ctrl = false; break
+        case 32: window.$KeyboardActive.space = false; break
+      }
     }
   }
 }
diff --git a/types/global.d.ts b/types/global.d.ts
index 1b11026a..aabfe766 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -7,6 +7,8 @@ interface Window {
   $vue: any
   // 键盘按键记录
   $KeyboardActive?: { [T: string]: boolean }
+  onKeySpacePressHold?: Function
+
   // 编辑 JSON 的存储对象
   opener: any
 }
diff --git a/types/shims-vue.d.ts b/types/shims-vue.d.ts
index b30c986d..fbfc8922 100644
--- a/types/shims-vue.d.ts
+++ b/types/shims-vue.d.ts
@@ -4,4 +4,5 @@ declare module '*.vue' {
   export default component
 }
 
-declare module 'lodash/*'
\ No newline at end of file
+declare module 'lodash/*'
+declare module 'dom-helpers'
\ No newline at end of file

From 0d4e83c9403aefc97c460b69c05c8f613cb07e61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Fri, 16 Dec 2022 19:36:14 +0800
Subject: [PATCH 02/16] =?UTF-8?q?build:=20=E6=96=B0=E5=A2=9Edom-helpers?=
 =?UTF-8?q?=E4=BE=9D=E8=B5=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json   |  1 +
 pnpm-lock.yaml | 22 +++++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a08b8897..bc0f5a13 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "axios": "^0.27.2",
     "color": "^4.2.3",
     "crypto-js": "^4.1.1",
+    "dom-helpers": "^5.2.1",
     "echarts-liquidfill": "^3.1.0",
     "echarts-stat": "^1.2.0",
     "echarts-wordcloud": "^2.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3bf99b84..7a0f90e3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,7 @@ specifiers:
   commitlint: ^17.0.2
   crypto-js: ^4.1.1
   default-passive-events: ^2.0.0
+  dom-helpers: ^5.2.1
   echarts: ^5.3.2
   echarts-liquidfill: ^3.1.0
   echarts-stat: ^1.2.0
@@ -77,6 +78,7 @@ dependencies:
   axios: 0.27.2
   color: 4.2.3
   crypto-js: 4.1.1
+  dom-helpers: 5.2.1
   echarts-liquidfill: 3.1.0_echarts@5.3.3
   echarts-stat: 1.2.0
   echarts-wordcloud: 2.0.0_echarts@5.3.3
@@ -402,6 +404,13 @@ packages:
       - supports-color
     dev: true
 
+  /@babel/runtime/7.20.6:
+    resolution: {integrity: sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.11
+    dev: false
+
   /@babel/template/7.16.7:
     resolution: {integrity: sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==}
     engines: {node: '>=6.9.0'}
@@ -1912,7 +1921,7 @@ packages:
     dev: true
 
   /csstype/2.6.20:
-    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npm.taobao.org/csstype/-/csstype-2.6.20.tgz}
+    resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
     dev: false
 
   /csstype/3.0.11:
@@ -2065,6 +2074,13 @@ packages:
     resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==}
     dev: true
 
+  /dom-helpers/5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+    dependencies:
+      '@babel/runtime': 7.20.6
+      csstype: 3.0.11
+    dev: false
+
   /dom-serializer/1.4.1:
     resolution: {integrity: sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==}
     dependencies:
@@ -4462,6 +4478,10 @@ packages:
       strip-indent: 3.0.0
     dev: true
 
+  /regenerator-runtime/0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+    dev: false
+
   /regexp.prototype.flags/1.4.3:
     resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==}
     engines: {node: '>= 0.4'}

From 405e884e7041719faf5a0dc63786b86b0b9b92f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Fri, 16 Dec 2022 22:18:24 +0800
Subject: [PATCH 03/16] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E7=94=BB?=
 =?UTF-8?q?=E5=B8=83=E6=8B=96=E6=8B=BD=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EditRange/index.vue            |   2 +
 .../ContentEdit/components/EditRule/index.vue | 306 ++++++++++++++----
 .../ContentEdit/components/EditRule/ruler.vue | 193 -----------
 src/views/chart/ContentEdit/index.vue         |  71 ++--
 4 files changed, 296 insertions(+), 276 deletions(-)
 delete mode 100644 src/views/chart/ContentEdit/components/EditRule/ruler.vue

diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue
index e8b1b15d..d9a7bcc9 100644
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -55,6 +55,8 @@ const rangeModelStyle = computed(() => {
   position: relative;
   transform-origin: left top;
   background-size: cover;
+  border-radius: 20px;
+  overflow: hidden;
   @include fetch-border-color('hover-border-color');
   @include fetch-bg-color('background-color2');
   @include go(edit-range-model) {
diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue
index 2e98460f..11baf858 100644
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/index.vue
@@ -1,49 +1,157 @@
 <template>
-  <sketch-rule
-    v-if="configShow"
-    :thick="thick"
-    :scale="scale"
-    :width="canvasBox().width"
-    :height="canvasBox().height"
-    :startX="startX"
-    :startY="startY"
-    :lines="lines"
-  ></sketch-rule>
+  <div class="go-sketch-rule">
+    <sketch-rule
+      v-if="sketchRuleReDraw"
+      :thick="thick"
+      :scale="scale"
+      :width="canvasBox().width"
+      :height="canvasBox().height"
+      :startX="startX"
+      :startY="startY"
+      :lines="lines"
+      :palette="paletteStyle"
+    >
+    </sketch-rule>
+    <div ref="$app" class="edit-screens" @scroll="handleScroll">
+      <div ref="$container" class="edit-screen-container" :style="{ width: width * 2 + 'px' }">
+        <div
+          ref="refSketchRuleBox"
+          class="canvas"
+          @mousedown="dragCanvas"
+          :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }"
+        >
+          <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 修复右下角白点用的 -->
+    <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div>
+  </div>
 </template>
-
 <script setup lang="ts">
-import { ref, toRefs, computed, watch, nextTick, onBeforeUnmount } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
+import { listen } from 'dom-helpers'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const chartEditStore = useChartEditStore()
-const chartLayoutStore = useChartLayoutStore()
 const designStore = useDesignStore()
 
-const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
-const { scale, lockScale } = toRefs(chartEditStore.getEditCanvas)
-const { getLayers, getCharts, getDetails } = toRefs(chartLayoutStore)
-
-const configShow = ref(true)
-
-// x轴标尺开始的坐标数值
-const startX = -10
-// y轴标尺开始的坐标数值
-const startY = -10
-// 标尺的厚度
 const thick = 20
-// 初始化水平标尺上的参考线
-const lines = {
-  h: [],
-  v: []
+let prevMoveXVallue = [0, 0]
+let prevMoveYVallue = [0, 0]
+
+const $app = ref()
+const sketchRuleReDraw = ref(true)
+const refSketchRuleBox = ref()
+const $container = ref()
+const isPressSpace = ref(false)
+const cursorStyle = ref('auto')
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
+const startX = ref(0)
+const startY = ref(0)
+const lines = reactive({ h: [], v: [] })
+
+const scale = computed(() => {
+  return chartEditStore.getEditCanvas.scale
+})
+
+// 滚动条拖动的高度
+const containerWidth = computed(() => {
+  return `${height.value * 2}px`
+})
+
+// 主题
+const paletteStyle = computed(() => {
+  const isDarkTheme = designStore.getDarkTheme
+  return isDarkTheme
+    ? {
+        bgColor: '#18181c',
+        longfgColor: '#4d4d4d',
+        shortfgColor: '#4d4d4d',
+        fontColor: '#4d4d4d',
+        shadowColor: '#18181c',
+        borderColor: '#18181c',
+        cornerActiveColor: '#18181c'
+      }
+    : {}
+})
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+const handleWheel = (e: any) => {
+  e.preventDefault()
+  if (e.ctrlKey || e.metaKey) {
+    let resScale = scale.value
+    // 放大(200%)
+    if (e.wheelDelta >= 0 && scale.value < 2) {
+      resScale = scale.value + 0.05
+      chartEditStore.setScale(resScale)
+      return
+    }
+    // 缩小(10%)
+    if (e.wheelDelta < 0 && scale.value > 0.1) {
+      resScale = scale.value - 0.05
+      chartEditStore.setScale(resScale)
+    }
+  }
+}
+
+const handleScroll = () => {
+  if (!$app.value) return
+  const screensRect = $app.value.getBoundingClientRect()
+  const canvasRect = refSketchRuleBox.value.getBoundingClientRect()
+  // 标尺开始的刻度
+  startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
+  startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
+}
+
+const dragCanvas = (e: any) => {
+  if (!window.$KeyboardActive?.space) return
+
+  // @ts-ignore
+  document.activeElement?.blur()
+
+  e.preventDefault()
+  e.stopPropagation()
+
+  const startX = e.pageX
+  const startY = e.pageY
+
+  const listenMousemove = listen(window, 'mousemove', (e: any) => {
+    const nx = e.pageX - startX
+    const ny = e.pageY - startY
+
+    const [prevMoveX1, prevMoveX2] = prevMoveXVallue
+    const [prevMoveY1, prevMoveY2] = prevMoveYVallue
+
+    prevMoveXVallue = [prevMoveX2, nx]
+    prevMoveYVallue = [prevMoveY2, ny]
+
+    $app.value.scrollLeft -=
+      prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
+    $app.value.scrollTop -=
+      prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
+  })
+
+  const listenMouseup = listen(window, 'mouseup', () => {
+    listenMousemove()
+    listenMouseup()
+    prevMoveXVallue = [0, 0]
+    prevMoveYVallue = [0, 0]
+  })
 }
 
 const canvasBox = () => {
   const layoutDom = document.getElementById('go-chart-edit-layout')
   if (layoutDom) {
     return {
-      height: layoutDom.clientHeight - 40,
+      height: layoutDom.clientHeight - 40 - 44,
       width: layoutDom.clientWidth
     }
   }
@@ -53,53 +161,61 @@ const canvasBox = () => {
   }
 }
 
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
+// 在位置不动的情况下重绘标尺
+const reDraw = () => {
+  sketchRuleReDraw.value = false
+  setTimeout(() => {
+    sketchRuleReDraw.value = true
+  }, 10)
+}
+
+watch(
+  () => designStore.getDarkTheme,
+  () => {
+    reDraw()
+  }
+)
 
 // 处理标尺重制大小
-const ruleChangeHandle = () => {
-  configShow.value = false
-  setTimeout(() => {
-    configShow.value = true
-  })
-}
-
-const ruleChangeHandleTimeOut = () => {
-  if (lockScale.value) {
-    setTimeout(() => {
-      ruleChangeHandle()
-    }, 500)
-  }
-}
-
 watch(
   () => scale.value,
-  () => ruleChangeHandle()
+  (newValue, oldValue) => {
+    if (oldValue !== newValue) {
+      handleScroll()
+      chartEditStore.setScale(newValue)
+    }
+  }
 )
 
 watch(
-  () => getLayers.value,
-  () => ruleChangeHandleTimeOut()
+  () => isPressSpace.value,
+  newValue => {
+    cursorStyle.value = newValue ? 'grab' : 'auto'
+  }
 )
 
-watch(
-  () => getCharts.value,
-  () => ruleChangeHandleTimeOut()
-)
+onMounted(() => {
+  if ($app.value) {
+    $app.value.addEventListener('wheel', handleWheel, { passive: false })
+    // 滚动居中
+    $app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2
+  }
+})
 
-watch(
-  () => getDetails.value,
-  () => ruleChangeHandleTimeOut()
-)
+onUnmounted(() => {
+  if ($app.value) {
+    $app.value.removeEventListener('wheel', handleWheel)
+  }
+})
 
+window.onKeySpacePressHold = (isHold: boolean) => {
+  isPressSpace.value = isHold
+}
 </script>
 
 <style>
 /* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
 此库有计划 Vue3 版本，但是开发的时候还没发布 */
-
 #mb-ruler {
   top: 0;
   left: 0;
@@ -142,3 +258,69 @@ watch(
   border-width: 0 !important;
 }
 </style>
+
+<style lang="scss" scoped>
+@include go('sketch-rule') {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  .edit-screens {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    user-select: none;
+    padding-bottom: 0px;
+
+    /* firefox */
+    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
+    scrollbar-width: thin;
+
+    /* chrome */
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-track-piece {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar {
+      width: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background-color: rgba(144, 146, 152, 0.3);
+    }
+  }
+
+  .fix-edit-screens-block {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    background-color: $--color-dark-bg-1;
+  }
+
+  .edit-screen-container {
+    position: absolute;
+    height: v-bind('containerWidth');
+  }
+
+  .canvas {
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    transform-origin: 50% 0;
+
+    &:hover {
+      cursor: v-bind('cursorStyle');
+    }
+
+    &:active {
+      cursor: crosshair;
+    }
+  }
+}
+</style>
diff --git a/src/views/chart/ContentEdit/components/EditRule/ruler.vue b/src/views/chart/ContentEdit/components/EditRule/ruler.vue
deleted file mode 100644
index 79668649..00000000
--- a/src/views/chart/ContentEdit/components/EditRule/ruler.vue
+++ /dev/null
@@ -1,193 +0,0 @@
-<template>
-    <div :style="{ position: 'relative', overflow: 'hidden', width: '100%', height: '100%' }">
-        <sketch-rule :thick="thick" :scale="scale" :width="canvasBox().width" :height="canvasBox().height"
-            :startX="startX" :startY="startY" :lines="lines"
-            :palette="{ bgColor: '#18181c', longfgColor: '#4d4d4d', shortfgColor: '#4d4d4d', fontColor: '#4d4d4d', shadowColor: '#18181c', borderColor: '#18181c', cornerActiveColor: '#18181c' }">
-        </sketch-rule>
-        <div ref="$app" class="screens" @scroll="handleScroll">
-            <div ref="$container" class="screenContainer" :style="{ width: screenContainerWidth + 'px' }">
-                <div id="refcanvasBox" ref="refcanvasBox" class="canvas" @mousedown="dragCanvas"
-                    :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }">
-                    <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
-                        <slot></slot>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
-import { listen } from "dom-helpers"
-
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-
-const chartEditStore = useChartEditStore()
-
-const thick = 20
-const screenContainerWidth = 5000
-var prevMoveXVallue = [0, 0]
-var prevMoveYVallue = [0, 0]
-
-const $app = ref()
-const refcanvasBox = ref()
-const $container = ref()
-
-const scale = computed(() => {
-    return chartEditStore.getEditCanvas.scale
-})
-const startX = ref(0)
-const startY = ref(0)
-const lines = reactive({ h: [], v: [] })
-
-const handleWheel = (e: any) => {
-    e.preventDefault()
-    if (e.ctrlKey || e.metaKey) {
-        // const nextScale = parseFloat(Math.max(.2, scale.value - e.deltaY / canvasBox().height).toFixed(2))
-        // chartEditStore.setScale(nextScale)
-
-        chartEditStore.setScale(e.wheelDelta >= 120 ? scale.value + 0.01 : e.wheelDelta <= 120 ? scale.value - 0.01 : scale.value)
-    }
-}
-
-const isPressSpace = ref(false)
-const cursorStyle = ref('auto')
-
-window.onKeySpacePressHold = (isHold: boolean) => {
-    isPressSpace.value = isHold
-}
-watch(
-    () => isPressSpace.value,
-    newValue => {
-        cursorStyle.value = newValue ? 'grab' : 'auto'
-    }
-)
-
-onMounted(() => {
-    $app.value.addEventListener('wheel', handleWheel, { passive: false })
-    // 滚动居中
-    $app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2
-
-})
-
-const handleScroll = () => {
-    const screensRect = $app.value.getBoundingClientRect()
-    const canvasRect = refcanvasBox.value.getBoundingClientRect()
-
-    // 标尺开始的刻度
-    startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
-    startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
-}
-// 处理标尺重制大小
-watch(
-    () => scale.value,
-    (newValue, oldValue) => {
-        if (oldValue !== newValue) {
-            handleScroll()
-            chartEditStore.setScale(newValue)
-        }
-    }
-)
-
-onUnmounted(() => {
-    $app.value.removeEventListener('wheel', handleWheel)
-})
-
-const dragCanvas = (e: any) => {
-    if (!window.$KeyboardActive?.space) return
-
-    // @ts-ignore
-    document.activeElement?.blur()
-
-    e.preventDefault()
-    e.stopPropagation()
-
-    const startX = e.pageX
-    const startY = e.pageY
-
-    const un1 = listen(window, "mousemove", (e: any) => {
-
-        const nx = e.pageX - startX
-        const ny = e.pageY - startY
-
-        const [prevMoveX1, prevMoveX2] = prevMoveXVallue
-        const [prevMoveY1, prevMoveY2] = prevMoveYVallue
-
-        prevMoveXVallue = [prevMoveX2, nx]
-        prevMoveYVallue = [prevMoveY2, ny]
-
-        $app.value.scrollLeft -= prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
-        $app.value.scrollTop -= prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
-    })
-    const un2 = listen(window, "mouseup", () => {
-        un1()
-        un2()
-        prevMoveXVallue = [0, 0]
-        prevMoveYVallue = [0, 0]
-    })
-}
-
-const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
-
-const canvasBox = () => {
-    const layoutDom = document.getElementById('go-chart-edit-layout')
-    if (layoutDom) {
-        return {
-            height: layoutDom.clientHeight - 40 - 44,
-            width: layoutDom.clientWidth
-        }
-    }
-    return {
-        width: width.value,
-        height: height.value
-    }
-}
-</script>
-<style lang="scss" scoped>
-.screens {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    user-select: none;
-
-    /* firefox */
-    scrollbar-color: rgba(144, 146, 152, .3) transparent;
-    scrollbar-width: thin;
-
-    /* chrome */
-    &::-webkit-scrollbar,
-    &::-webkit-scrollbar-track-piece {
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar {
-        width: 7px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        border-radius: 5px;
-        background-color: rgba(144, 146, 152, .3);
-    }
-}
-
-.screenContainer {
-    position: absolute;
-    height: 3000px;
-}
-
-.canvas {
-    position: absolute;
-    top: 80px;
-    left: 50%;
-    transform-origin: 50% 0;
-
-    &:hover {
-        cursor: v-bind('cursorStyle');
-    }
-
-    &:active {
-        cursor: crosshair;
-    }
-}
-</style>
\ No newline at end of file
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index f43d426f..2598f65f 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -1,43 +1,74 @@
 <template>
   <!-- <edit-rule></edit-rule> -->
-  <content-box id="go-chart-edit-layout" :flex="true" :showTop="false" :showBottom="true" :depth="1" :xScroll="true" :disabledScroll="true"
-    @mousedown="mousedownHandleUnStop" @drop="dragHandle" @dragover="dragoverHandle" @dragenter="dragoverHandle">
-    <ruler>
+  <content-box
+    id="go-chart-edit-layout"
+    :flex="true"
+    :showTop="false"
+    :showBottom="true"
+    :depth="1"
+    :xScroll="true"
+    :disabledScroll="true"
+    @mousedown="mousedownHandleUnStop"
+    @drop="dragHandle"
+    @dragover="dragoverHandle"
+    @dragenter="dragoverHandle"
+  >
+    <edit-rule>
       <!-- 画布主体 -->
       <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
         <!-- 展示 -->
         <edit-range>
           <!-- 滤镜预览 -->
-          <div :style="{
-            ...getFilterStyle(chartEditStore.getEditCanvasConfig),
-            ...rangeStyle
-          }">
+          <div
+            :style="{
+              ...getFilterStyle(chartEditStore.getEditCanvasConfig),
+              ...rangeStyle
+            }"
+          >
             <!-- 图表 -->
             <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
               <!-- 分组 -->
-              <edit-group v-if="item.isGroup" :groupData="(item as CreateComponentGroupType)"
-                :groupIndex="index"></edit-group>
+              <edit-group
+                v-if="item.isGroup"
+                :groupData="(item as CreateComponentGroupType)"
+                :groupIndex="index"
+              ></edit-group>
 
               <!-- 单组件 -->
-              <edit-shape-box v-else :data-id="item.id" :index="index" :style="{
+              <edit-shape-box
+                v-else
+                :data-id="item.id"
+                :index="index"
+                :style="{
                 ...useComponentStyle(item.attr, index),
                 ...getBlendModeStyle(item.styles) as any
-              }" :item="item" @click="mouseClickHandle($event, item)" @mousedown="mousedownHandle($event, item)"
-                @mouseenter="mouseenterHandle($event, item)" @mouseleave="mouseleaveHandle($event, item)"
-                @contextmenu="handleContextMenu($event, item, optionsHandle)">
-                <component class="edit-content-chart" :class="animationsClass(item.styles.animations)"
-                  :is="item.chartConfig.chartKey" :chartConfig="item" :themeSetting="themeSetting"
-                  :themeColor="themeColor" :style="{
+              }"
+                :item="item"
+                @click="mouseClickHandle($event, item)"
+                @mousedown="mousedownHandle($event, item)"
+                @mouseenter="mouseenterHandle($event, item)"
+                @mouseleave="mouseleaveHandle($event, item)"
+                @contextmenu="handleContextMenu($event, item, optionsHandle)"
+              >
+                <component
+                  class="edit-content-chart"
+                  :class="animationsClass(item.styles.animations)"
+                  :is="item.chartConfig.chartKey"
+                  :chartConfig="item"
+                  :themeSetting="themeSetting"
+                  :themeColor="themeColor"
+                  :style="{
                     ...useSizeStyle(item.attr),
                     ...getFilterStyle(item.styles),
                     ...getTransformStyle(item.styles)
-                  }"></component>
+                  }"
+                ></component>
               </edit-shape-box>
             </div>
           </div>
         </edit-range>
       </div>
-    </ruler>
+    </edit-rule>
 
     <!-- 工具栏 -->
     <template #aside>
@@ -69,8 +100,7 @@ import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 import { ContentBox } from '../ContentBox/index'
 import { EditGroup } from './components/EditGroup'
 import { EditRange } from './components/EditRange'
-// import { EditRule } from './components/EditRule'
-import Ruler from './components/EditRule/ruler.vue'
+import { EditRule } from './components/EditRule'
 import { EditBottom } from './components/EditBottom'
 import { EditShapeBox } from './components/EditShapeBox'
 import { EditTools } from './components/EditTools'
@@ -161,7 +191,6 @@ onMounted(() => {
 
   @include goId('chart-edit-content') {
     border-radius: 10px;
-    margin: 25px;
     overflow: hidden;
     @extend .go-transition;
     @include fetch-theme('box-shadow');

From 57193beeab4708d97932c40210350a03fcd37df3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Fri, 16 Dec 2022 22:47:55 +0800
Subject: [PATCH 04/16] =?UTF-8?q?fix:=20=E5=A4=84=E7=90=86=E6=A0=87?=
 =?UTF-8?q?=E5=B0=BA=E5=B1=95=E7=A4=BA=E4=B8=8D=E5=85=A8=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chart/ContentEdit/components/EditRule/index.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue
index 11baf858..9fabede0 100644
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/index.vue
@@ -151,7 +151,7 @@ const canvasBox = () => {
   const layoutDom = document.getElementById('go-chart-edit-layout')
   if (layoutDom) {
     return {
-      height: layoutDom.clientHeight - 40 - 44,
+      height: layoutDom.clientHeight,
       width: layoutDom.clientWidth
     }
   }
@@ -220,10 +220,6 @@ window.onKeySpacePressHold = (isHold: boolean) => {
   top: 0;
   left: 0;
 }
-/* 适配底部的工具栏不遮盖 */
-#mb-ruler .v-container {
-  height: calc(100% - 65px) !important;
-}
 /* 横线 */
 #mb-ruler .v-container .lines .line {
   /* 最大缩放 200% */

From 7341ff11f35e1d2682c089feef063a318b286b86 Mon Sep 17 00:00:00 2001
From: jeo young <1414294708@qq.com>
Date: Fri, 16 Dec 2022 23:27:02 +0800
Subject: [PATCH 05/16] =?UTF-8?q?fix:=20=E7=A9=BA=E6=A0=BC=E7=83=AD?=
 =?UTF-8?q?=E9=94=AE=E5=AF=BC=E8=87=B4ctrl=20=E6=97=A0=E6=B3=95=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index b587d854..71368a51 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -281,12 +281,12 @@ export const setKeyboardDressShow = (keyCode?: number) => {
   const dom = document.getElementById('keyboard-dress-show')
   if (!dom) return
   if (!keyCode) {
-    window.onKeySpacePressHold?.(false)
+    if (keyCode == 32) window.onKeySpacePressHold?.(false)
     dom.innerText = ''
     return
   }
   if (keyCode && code.has(keyCode)) {
-    window.onKeySpacePressHold?.(true)
+    if (keyCode == 32) window.onKeySpacePressHold?.(true)
     dom.innerText = `按下了「${code.get(keyCode)}」键`
   }
 }

From 0376703fd27e9c003cbcabd505f227cc94a78abc Mon Sep 17 00:00:00 2001
From: jeo young <1414294708@qq.com>
Date: Sat, 17 Dec 2022 00:56:42 +0800
Subject: [PATCH 06/16] =?UTF-8?q?fix:=20=E7=94=BB=E5=B8=83=E5=8F=98?=
 =?UTF-8?q?=E5=8C=96=E5=90=8E=E5=A7=8B=E7=BB=88=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/chartEditStore/chartEditStore.ts  |  2 ++
 src/utils/utils.ts                            |  2 +-
 .../ContentEdit/components/EditRule/ruler.vue | 23 +++++++++++++++----
 src/views/chart/ContentEdit/index.vue         |  1 -
 types/global.d.ts                             |  3 +++
 5 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 16a4eda4..75c3f8db 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -928,6 +928,8 @@ export const useChartEditStore = defineStore({
           const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5))
           this.setScale(scaleHeight > 1 ? 1 : scaleHeight)
         }
+
+        window.onCanvsSizecomputed?.()
       } else {
         window['$message'].warning('请先创建画布，再进行缩放')
       }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 71368a51..51b296ae 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -281,7 +281,7 @@ export const setKeyboardDressShow = (keyCode?: number) => {
   const dom = document.getElementById('keyboard-dress-show')
   if (!dom) return
   if (!keyCode) {
-    if (keyCode == 32) window.onKeySpacePressHold?.(false)
+    window.onKeySpacePressHold?.(false)
     dom.innerText = ''
     return
   }
diff --git a/src/views/chart/ContentEdit/components/EditRule/ruler.vue b/src/views/chart/ContentEdit/components/EditRule/ruler.vue
index 79668649..0fe42a01 100644
--- a/src/views/chart/ContentEdit/components/EditRule/ruler.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/ruler.vue
@@ -63,13 +63,27 @@ watch(
     }
 )
 
+// 滚动居中
+const canvasPosCenter = () => {
+    const { width: containerWidth, height: containerHeight } = $container.value.getBoundingClientRect()
+    const { width, height } = canvasBox()
+
+    $app.value.scrollLeft = containerWidth / 2 - width / 2
+    $app.value.scrollTop = containerHeight / 2 - height / 2
+}
+
 onMounted(() => {
     $app.value.addEventListener('wheel', handleWheel, { passive: false })
-    // 滚动居中
-    $app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2
+    canvasPosCenter()
 
 })
 
+window.onCanvsSizecomputed = () => {
+    setTimeout(() => {
+        canvasPosCenter()
+    }, 500)
+}
+
 const handleScroll = () => {
     const screensRect = $app.value.getBoundingClientRect()
     const canvasRect = refcanvasBox.value.getBoundingClientRect()
@@ -133,7 +147,7 @@ const canvasBox = () => {
     const layoutDom = document.getElementById('go-chart-edit-layout')
     if (layoutDom) {
         return {
-            height: layoutDom.clientHeight - 40 - 44,
+            height: layoutDom.clientHeight - 25,
             width: layoutDom.clientWidth
         }
     }
@@ -178,9 +192,10 @@ const canvasBox = () => {
 
 .canvas {
     position: absolute;
-    top: 80px;
+    top: 50%;
     left: 50%;
     transform-origin: 50% 0;
+    transform: translateY(-50%);
 
     &:hover {
         cursor: v-bind('cursorStyle');
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index f43d426f..e421387b 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -161,7 +161,6 @@ onMounted(() => {
 
   @include goId('chart-edit-content') {
     border-radius: 10px;
-    margin: 25px;
     overflow: hidden;
     @extend .go-transition;
     @include fetch-theme('box-shadow');
diff --git a/types/global.d.ts b/types/global.d.ts
index aabfe766..03b0a48e 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -11,6 +11,9 @@ interface Window {
 
   // 编辑 JSON 的存储对象
   opener: any
+
+  //当画布大小重新计算后
+  onCanvsSizecomputed:Function
 }
 
 declare type Recordable<T = any> = Record<string, T>

From dff639e90199db9d73a9b509a0318cba7d84a798 Mon Sep 17 00:00:00 2001
From: jeo young <1414294708@qq.com>
Date: Sat, 17 Dec 2022 01:32:03 +0800
Subject: [PATCH 07/16] =?UTF-8?q?feat:=20=E6=8C=89=E4=BD=8F=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=E4=B8=AD=E9=94=AE=20=E5=8F=AF=E4=BB=A5=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E7=94=BB=E5=B8=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContentEdit/components/EditRule/ruler.vue      | 14 ++++++++------
 src/views/chart/ContentEdit/hooks/useDrag.hook.ts  |  2 ++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/views/chart/ContentEdit/components/EditRule/ruler.vue b/src/views/chart/ContentEdit/components/EditRule/ruler.vue
index 0fe42a01..cd53e0c0 100644
--- a/src/views/chart/ContentEdit/components/EditRule/ruler.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/ruler.vue
@@ -46,7 +46,7 @@ const handleWheel = (e: any) => {
         // const nextScale = parseFloat(Math.max(.2, scale.value - e.deltaY / canvasBox().height).toFixed(2))
         // chartEditStore.setScale(nextScale)
 
-        chartEditStore.setScale(e.wheelDelta >= 120 ? scale.value + 0.01 : e.wheelDelta <= 120 ? scale.value - 0.01 : scale.value)
+        chartEditStore.setScale(e.wheelDelta >= 120 ? scale.value + 0.02 : e.wheelDelta <= 120 ? scale.value - 0.02 : scale.value)
     }
 }
 
@@ -108,14 +108,15 @@ onUnmounted(() => {
 })
 
 const dragCanvas = (e: any) => {
-    if (!window.$KeyboardActive?.space) return
-
-    // @ts-ignore
-    document.activeElement?.blur()
-
     e.preventDefault()
     e.stopPropagation()
 
+    if (e.which == 2) {
+        window.onKeySpacePressHold?.(true)
+    } else if (!window.$KeyboardActive?.space) return
+    // @ts-ignore
+    document.activeElement?.blur()
+
     const startX = e.pageX
     const startY = e.pageY
 
@@ -138,6 +139,7 @@ const dragCanvas = (e: any) => {
         un2()
         prevMoveXVallue = [0, 0]
         prevMoveYVallue = [0, 0]
+        window.onKeySpacePressHold?.(false)
     })
 }
 
diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index 654e9405..11f1bcae 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -62,6 +62,8 @@ export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType
 
 // * 框选
 export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
+  if (e.which == 2) return
+
   mousedownHandleUnStop(e)
 
   // 记录点击初始位置

From 8dcccef54d184568e7944216210454ff6568f129 Mon Sep 17 00:00:00 2001
From: jeo young <1414294708@qq.com>
Date: Sat, 17 Dec 2022 01:33:27 +0800
Subject: [PATCH 08/16] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=8C=89?=
 =?UTF-8?q?=E4=BD=8F=E7=A9=BA=E6=A0=BC=E9=94=AE=E6=97=B6=20=E4=B8=8D?=
 =?UTF-8?q?=E5=85=81=E8=AE=B8=E6=A1=86=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chart/ContentEdit/hooks/useDrag.hook.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
index 11f1bcae..82fce985 100644
--- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts
@@ -63,6 +63,7 @@ export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType
 // * 框选
 export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
   if (e.which == 2) return
+  if (window.$KeyboardActive?.space) return
 
   mousedownHandleUnStop(e)
 

From a925ced533bcc3947e1b21e9431cc0e417364067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sat, 17 Dec 2022 15:35:50 +0800
Subject: [PATCH 09/16] =?UTF-8?q?perf:=20=E4=BF=AE=E6=94=B9=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E6=9D=A1=E7=9A=84=E9=95=BF=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chart/ContentEdit/components/EditBottom/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/chart/ContentEdit/components/EditBottom/index.vue b/src/views/chart/ContentEdit/components/EditBottom/index.vue
index b3f1cbf3..3354395d 100644
--- a/src/views/chart/ContentEdit/components/EditBottom/index.vue
+++ b/src/views/chart/ContentEdit/components/EditBottom/index.vue
@@ -165,7 +165,7 @@ $max-width: 670px;
     .scale-slider {
       position: relative;
       top: -4px;
-      width: 200px;
+      width: 100px;
     }
   }
 }

From d204b459d9e4d2d343a03925f1d1007110c9551c Mon Sep 17 00:00:00 2001
From: jeo young <1414294708@qq.com>
Date: Sat, 17 Dec 2022 17:56:36 +0800
Subject: [PATCH 10/16] =?UTF-8?q?fix:=20=E5=8E=BB=E6=8E=89=E5=A4=9A?=
 =?UTF-8?q?=E4=BD=99=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/chartEditStore/chartEditStore.ts | 2 --
 types/global.d.ts                                  | 3 ---
 2 files changed, 5 deletions(-)

diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 75c3f8db..16a4eda4 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -928,8 +928,6 @@ export const useChartEditStore = defineStore({
           const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5))
           this.setScale(scaleHeight > 1 ? 1 : scaleHeight)
         }
-
-        window.onCanvsSizecomputed?.()
       } else {
         window['$message'].warning('请先创建画布，再进行缩放')
       }
diff --git a/types/global.d.ts b/types/global.d.ts
index 03b0a48e..aabfe766 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -11,9 +11,6 @@ interface Window {
 
   // 编辑 JSON 的存储对象
   opener: any
-
-  //当画布大小重新计算后
-  onCanvsSizecomputed:Function
 }
 
 declare type Recordable<T = any> = Record<string, T>

From a17d7a418237f0b1fc663c6b3f4195fea9540d2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sat, 17 Dec 2022 22:25:19 +0800
Subject: [PATCH 11/16] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContentEdit/components/EditRule/index.vue | 39 ++++++++++++-------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue
index 10744019..6e0d678f 100644
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/index.vue
@@ -1,12 +1,25 @@
 <template>
   <div class="go-sketch-rule">
-    <sketch-rule v-if="sketchRuleReDraw" :thick="thick" :scale="scale" :width="canvasBox().width"
-      :height="canvasBox().height" :startX="startX" :startY="startY" :lines="lines" :palette="paletteStyle">
+    <sketch-rule
+      v-if="sketchRuleReDraw"
+      :thick="thick"
+      :scale="scale"
+      :width="canvasBox().width"
+      :height="canvasBox().height"
+      :startX="startX"
+      :startY="startY"
+      :lines="lines"
+      :palette="paletteStyle"
+    >
     </sketch-rule>
     <div ref="$app" class="edit-screens" @scroll="handleScroll">
       <div ref="$container" class="edit-screen-container" :style="{ width: width * 2 + 'px' }">
-        <div ref="refSketchRuleBox" class="canvas" @mousedown="dragCanvas"
-          :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }">
+        <div
+          ref="refSketchRuleBox"
+          class="canvas"
+          @mousedown="dragCanvas"
+          :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }"
+        >
           <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
             <slot></slot>
           </div>
@@ -55,14 +68,14 @@ const paletteStyle = computed(() => {
   const isDarkTheme = designStore.getDarkTheme
   return isDarkTheme
     ? {
-      bgColor: '#18181c',
-      longfgColor: '#4d4d4d',
-      shortfgColor: '#4d4d4d',
-      fontColor: '#4d4d4d',
-      shadowColor: '#18181c',
-      borderColor: '#18181c',
-      cornerActiveColor: '#18181c'
-    }
+        bgColor: '#18181c',
+        longfgColor: '#4d4d4d',
+        shortfgColor: '#4d4d4d',
+        fontColor: '#4d4d4d',
+        shadowColor: '#18181c',
+        borderColor: '#18181c',
+        cornerActiveColor: '#18181c'
+      }
     : {}
 })
 
@@ -182,7 +195,7 @@ watch(
       chartEditStore.setScale(newValue)
       setTimeout(() => {
         canvasPosCenter()
-      }, 500);
+      }, 500)
     }
   }
 )

From 0b8ab9adfa8b2868278fccd9b81ca72ad962665a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Sun, 18 Dec 2022 00:00:41 +0800
Subject: [PATCH 12/16] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E5=8D=95=E8=AF=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContentEdit/components/EditRule/index.vue    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue
index 6e0d678f..a98737ba 100644
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/index.vue
@@ -40,8 +40,8 @@ const chartEditStore = useChartEditStore()
 const designStore = useDesignStore()
 
 const thick = 20
-let prevMoveXVallue = [0, 0]
-let prevMoveYVallue = [0, 0]
+let prevMoveXValue = [0, 0]
+let prevMoveYValue = [0, 0]
 
 const $app = ref()
 const sketchRuleReDraw = ref(true)
@@ -127,11 +127,11 @@ const dragCanvas = (e: any) => {
     const nx = e.pageX - startX
     const ny = e.pageY - startY
 
-    const [prevMoveX1, prevMoveX2] = prevMoveXVallue
-    const [prevMoveY1, prevMoveY2] = prevMoveYVallue
+    const [prevMoveX1, prevMoveX2] = prevMoveXValue
+    const [prevMoveY1, prevMoveY2] = prevMoveYValue
 
-    prevMoveXVallue = [prevMoveX2, nx]
-    prevMoveYVallue = [prevMoveY2, ny]
+    prevMoveXValue = [prevMoveX2, nx]
+    prevMoveYValue = [prevMoveY2, ny]
 
     $app.value.scrollLeft -=
       prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
@@ -142,8 +142,8 @@ const dragCanvas = (e: any) => {
   const listenMouseup = listen(window, 'mouseup', () => {
     listenMousemove()
     listenMouseup()
-    prevMoveXVallue = [0, 0]
-    prevMoveYVallue = [0, 0]
+    prevMoveXValue = [0, 0]
+    prevMoveYValue = [0, 0]
     isPressSpace.value = false
   })
 }

From 1f9790e5f5825976435df9ad78488282bc2a0c5c Mon Sep 17 00:00:00 2001
From: jeo young <1414294708@qq.com>
Date: Sun, 18 Dec 2022 10:24:49 +0800
Subject: [PATCH 13/16] =?UTF-8?q?fix:=20=E7=94=BB=E5=B8=83=E4=B8=8D?=
 =?UTF-8?q?=E8=83=BD=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/chart/ContentEdit/components/EditRule/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue
index a98737ba..13078ec4 100644
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/index.vue
@@ -85,8 +85,8 @@ const themeColor = computed(() => {
 })
 
 const handleWheel = (e: any) => {
-  e.preventDefault()
   if (e.ctrlKey || e.metaKey) {
+    e.preventDefault()
     let resScale = scale.value
     // 放大(200%)
     if (e.wheelDelta >= 0 && scale.value < 2) {

From 5b1458b22f4d1702560bdf4e817e401ddedaba3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Tue, 20 Dec 2022 15:09:12 +0800
Subject: [PATCH 14/16] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=20deep=20?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/common/mixins/mixins.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/common/mixins/mixins.scss b/src/styles/common/mixins/mixins.scss
index 39374ff1..ec6f2ccd 100644
--- a/src/styles/common/mixins/mixins.scss
+++ b/src/styles/common/mixins/mixins.scss
@@ -17,7 +17,7 @@
 }
 
 @mixin deep() {
-  :deep {
+  :deep() {
     @content;
   }
 }

From 65127ced7fdc4849920077262d1804e4addcb00f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Tue, 20 Dec 2022 15:16:25 +0800
Subject: [PATCH 15/16] =?UTF-8?q?perf:=20=E6=96=B0=E5=A2=9E=E5=BF=AB?=
 =?UTF-8?q?=E6=8D=B7=E9=94=AE=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enums/editPageEnum.ts                     |  3 +-
 .../EditShortcutKey/ShortcutKeyModal.vue      | 28 +++++++------------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts
index 4b26802d..07d51e70 100644
--- a/src/enums/editPageEnum.ts
+++ b/src/enums/editPageEnum.ts
@@ -79,5 +79,6 @@ export enum MacKeyboard {
   ALT = '⌥',
   CTRL_SOURCE_KEY = '⌘',
   SHIFT_SOURCE_KEY = '⇧',
-  ALT_SOURCE_KEY = '⌥'
+  ALT_SOURCE_KEY = '⌥',
+  SPACE = 'Space'
 }
diff --git a/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue b/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue
index 24af3ca7..17dd3ecc 100644
--- a/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue
+++ b/src/views/chart/ContentEdit/components/EditShortcutKey/ShortcutKeyModal.vue
@@ -19,7 +19,8 @@
         <tr v-for="(item, index) in shortcutKeyOptions" :key="index">
           <td>{{ item.label }}</td>
           <td>{{ item.win }}</td>
-          <td>
+          <td v-if="item.macSource">{{ item.mac }}</td>
+          <td v-else>
             <n-gradient-text :size="22">{{ item.mac.substr(0, 1) }}</n-gradient-text>
             + {{ item.mac.substr(3) }}
           </td>
@@ -44,25 +45,16 @@ defineProps({
 // 快捷键
 const shortcutKeyOptions = [
   {
-    label: '向上移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ↑ `,
+    label: '拖拽画布',
+    win: `${WinKeyboard.SPACE.toUpperCase()} + 🖱️ `,
+    mac: `${MacKeyboard.SPACE.toUpperCase()} + 🖱️ `,
+    macSource: true
+  },
+  {
+    label: '向 上/右/下/左 移动',
+    win: `${WinKeyboard.CTRL.toUpperCase()} + ↑ 或 → 或 ↓ 或 ←`,
     mac: `${MacKeyboard.CTRL.toUpperCase()} + ↑ `
   },
-  {
-    label: '向右移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + → `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + → `
-  },
-  {
-    label: '向下移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ↓ `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + ↓ `
-  },
-  {
-    label: '向左移动',
-    win: `${WinKeyboard.CTRL.toUpperCase()} + ← `,
-    mac: `${MacKeyboard.CTRL.toUpperCase()} + ← `
-  },
   {
     label: '锁定',
     win: `${WinKeyboard.CTRL.toUpperCase()} + L `,

From 1fb57ad1ffbee782ffa6c619a5e1e3b0e170ec94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Tue, 20 Dec 2022 16:54:04 +0800
Subject: [PATCH 16/16] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chartLayoutStore/chartLayoutStore.d.ts    |  7 ++--
 .../chartLayoutStore/chartLayoutStore.ts      | 10 ++++++
 src/views/chart/ContentLoad/index.ts          |  3 ++
 src/views/chart/ContentLoad/index.vue         | 33 +++++++++++++++++++
 src/views/chart/hooks/useSync.hook.ts         | 14 +++++++-
 src/views/chart/index.vue                     |  3 ++
 6 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 src/views/chart/ContentLoad/index.ts
 create mode 100644 src/views/chart/ContentLoad/index.vue

diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
index b1155ea5..abcef916 100644
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
@@ -1,5 +1,5 @@
 export enum ChartModeEnum {
-  SINGLE= 'single',
+  SINGLE = 'single',
   DOUBLE = 'double'
 }
 
@@ -13,7 +13,8 @@ export enum ChartLayoutStoreEnum {
   CHARTS = 'charts',
   DETAILS = 'details',
   Chart_TYPE = 'chartType',
-  LAYER_TYPE = 'layerType'
+  LAYER_TYPE = 'layerType',
+  PERCENTAGE = 'percentage'
 }
 
 export interface ChartLayoutType {
@@ -27,4 +28,6 @@ export interface ChartLayoutType {
   [ChartLayoutStoreEnum.Chart_TYPE]: ChartModeEnum
   // 层级展示方式
   [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
+  // 当前正在加载的数量
+  [ChartLayoutStoreEnum.PERCENTAGE]: number
 }
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
index c50bd520..5aa5704e 100644
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
@@ -24,6 +24,8 @@ export const useChartLayoutStore = defineStore({
     chartType: ChartModeEnum.SINGLE,
     // 图层类型（默认图片）
     layerType: LayerModeEnum.THUMBNAIL,
+    // 当前加载数量
+    percentage: 0,
     // 防止值不存在
     ...storageChartLayout
   }),
@@ -42,6 +44,9 @@ export const useChartLayoutStore = defineStore({
     },
     getLayerType(): LayerModeEnum {
       return this.layerType
+    },
+    getPercentage(): number {
+      return this.percentage
     }
   },
   actions: {
@@ -54,6 +59,11 @@ export const useChartLayoutStore = defineStore({
       setTimeout(() => {
         chartEditStore.computedScale()
       }, 500)
+    },
+    setItemUnHandle<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
+      this.$patch(state => {
+        state[key] = value
+      })
     }
   }
 })
diff --git a/src/views/chart/ContentLoad/index.ts b/src/views/chart/ContentLoad/index.ts
new file mode 100644
index 00000000..7e41ed39
--- /dev/null
+++ b/src/views/chart/ContentLoad/index.ts
@@ -0,0 +1,3 @@
+import ContentLoad from './index.vue'
+
+export { ContentLoad }
diff --git a/src/views/chart/ContentLoad/index.vue b/src/views/chart/ContentLoad/index.vue
new file mode 100644
index 00000000..6b7905a5
--- /dev/null
+++ b/src/views/chart/ContentLoad/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <n-modal :show="showModal" :close-on-esc="false" transform-origin="center">
+    <div>
+      <span> 拼命加载中... </span>
+      <n-progress type="line" :color="themeColor" :percentage="percentage" style="width: 300px" />
+    </div>
+  </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+const chartLayoutStore = useChartLayoutStore()
+const designStore = useDesignStore()
+const showModal = ref(false)
+const percentage = ref(0)
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+// 监听百分比
+watch(
+  () => chartLayoutStore.getPercentage,
+  newValue => {
+    percentage.value = newValue
+    showModal.value = newValue > 0
+  }
+)
+</script>
diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts
index 3d551f00..ac006245 100644
--- a/src/views/chart/hooks/useSync.hook.ts
+++ b/src/views/chart/hooks/useSync.hook.ts
@@ -2,6 +2,8 @@ import { getUUID } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index'
 import { BaseEvent, EventLife, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { PublicGroupConfigClass } from '@/packages/public/publicConfig'
@@ -85,7 +87,7 @@ const componentMerge = (newObject: any, sources: any, notComponent = false) => {
 export const useSync = () => {
   const chartEditStore = useChartEditStore()
   const chartHistoryStore = useChartHistoryStore()
-
+  const chartLayoutStore = useChartLayoutStore()
   /**
    * * 组件动态注册
    * @param projectData 项目数据
@@ -151,7 +153,14 @@ export const useSync = () => {
     for (const key in projectData) {
       // 组件
       if (key === ChartEditStoreEnum.COMPONENT_LIST) {
+        let loadIndex = 0
+        const listLength = projectData[key].length;
+        console.log(listLength)
         for (const comItem of projectData[key]) {
+          // 设置加载数量
+          let percentage = parseInt((parseFloat(`${++loadIndex / listLength}`) * 100).toString())
+          chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, percentage)
+          // 判断类型
           if (comItem.isGroup) {
             // 创建分组
             let groupClass = new PublicGroupConfigClass()
@@ -182,6 +191,9 @@ export const useSync = () => {
         componentMerge(chartEditStore[key], projectData[key], true)
       }
     }
+
+    // 清除数量
+    chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.PERCENTAGE, 0)
   }
 
   return {
diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue
index 46cbfe3e..89c60d95 100644
--- a/src/views/chart/index.vue
+++ b/src/views/chart/index.vue
@@ -32,6 +32,8 @@
     :on-clickoutside="onClickOutSide"
     @select="handleMenuSelect"
   ></n-dropdown>
+  <!-- 加载蒙层 -->
+  <content-load></content-load>
 </template>
 
 <script setup lang="ts">
@@ -53,6 +55,7 @@ const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle
 const ContentLayers = loadAsyncComponent(() => import('./ContentLayers/index.vue'))
 const ContentCharts = loadAsyncComponent(() => import('./ContentCharts/index.vue'))
 const ContentConfigurations = loadAsyncComponent(() => import('./ContentConfigurations/index.vue'))
+const ContentLoad = loadAsyncComponent(() => import('./ContentLoad/index.vue'))
 
 // 右键
 const {