!277 feat: 升级vue3-sketch-ruler到2X

Merge pull request !277 from kakajun/master
2026-05-14 04:12:08 +08:00 · 2026-05-12 08:00:07 +00:00
parent b0a574b97f
commit d22f1f7848
11 changed files with 214 additions and 294 deletions
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
    "vue-i18n": "9.2.2",
    "vue-router": "4.0.12",
    "vue3-lazyload": "^0.2.5-beta",
-    "vue3-sketch-ruler": "^1.3.3",
+    "vue3-sketch-ruler": "^2.4.1",
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,8 +111,8 @@ importers:
        specifier: ^0.2.5-beta
        version: 0.2.5-beta(@vue/compiler-sfc@3.5.16)(vue@3.5.16(typescript@4.6.3))
      vue3-sketch-ruler:
-        specifier: ^1.3.3
-        version: 1.3.16(vue@3.5.16(typescript@4.6.3))
+        specifier: ^2.4.1
+        version: 2.4.1
      vuedraggable:
        specifier: ^4.1.0
        version: 4.1.0(vue@3.5.16(typescript@4.6.3))
@@ -3946,18 +3946,8 @@ packages:
      '@vue/compiler-sfc': '>=3.0.0'
      vue: '>=3.0.0'

-  vue3-sketch-ruler@1.3.16:
-    resolution: {integrity: sha512-k/TBOwbueU9eWOF7k/emsZMwtEqFk/FxG+h//TlaZ2B8RWbxhIe6hPFgggO4Jng10ARsuH4cMGAR+ZOuN4ozgg==}
-    deprecated: This version is deprecated. Please upgrade to version 2X for better features and performance.See https://github.com/kakajun/vue3-sketch-ruler
-    hasBin: true
-    peerDependencies:
-      '@vue/composition-api': ^1.1.0
-      vue: ^2.6.0 || ^3.2.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-      vue:
-        optional: true
+  vue3-sketch-ruler@2.4.1:
+    resolution: {integrity: sha512-TMMJ5v3cqDA94DPUa1iFHBx4D+FqEqpNXwzGU310aaMDllqyvyFfZigBFryeCRO7Q7EuOD5J5Zwc++LOCHB7Jw==}

  vue@3.5.16:
    resolution: {integrity: sha512-rjOV2ecxMd5SiAmof2xzh2WxntRcigkX/He4YFJ6WdRvVUrbt6DxC1Iujh10XLl8xCDRDtGKMeO3D+pRQ1PP9w==}
@@ -4323,7 +4313,7 @@ snapshots:
      '@types/node': 20.5.1
      chalk: 4.1.2
      cosmiconfig: 8.3.6(typescript@5.8.3)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.8.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.8.3))(typescript@5.8.3)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.6.3))(typescript@5.8.3)
      lodash.isplainobject: 4.0.6
      lodash.merge: 4.6.2
      lodash.uniq: 4.5.0
@@ -5556,7 +5546,7 @@ snapshots:

  core-util-is@1.0.3: {}

-  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.8.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.8.3))(typescript@5.8.3):
+  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.6.3))(typescript@5.8.3):
    dependencies:
      '@types/node': 20.5.1
      cosmiconfig: 8.3.6(typescript@5.8.3)
@@ -8186,9 +8176,7 @@ snapshots:
      '@vue/compiler-sfc': 3.5.16
      vue: 3.5.16(typescript@4.6.3)

-  vue3-sketch-ruler@1.3.16(vue@3.5.16(typescript@4.6.3)):
-    optionalDependencies:
-      vue: 3.5.16(typescript@4.6.3)
+  vue3-sketch-ruler@2.4.1: {}

  vue@3.5.16(typescript@4.6.3):
    dependencies:
--- a/src/plugins/customComponents.ts
+++ b/src/plugins/customComponents.ts
@@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import { GoSkeleton } from '@/components/GoSkeleton'
 import { GoLoading } from '@/components/GoLoading'
-import { SketchRule } from 'vue3-sketch-ruler'
+import  SketchRule  from 'vue3-sketch-ruler'

 /**
 * 全局注册自定义组件
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
@@ -31,6 +31,4 @@ export interface ChartLayoutType {
  [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
  // 当前正在加载的数量
  [ChartLayoutStoreEnum.PERCENTAGE]: number
-  // 是否重置当前画布位置
-  [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean
 }
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
@@ -49,9 +49,6 @@ export const useChartLayoutStore = defineStore({
    },
    getPercentage(): number {
      return this.percentage
-    },
-    getRePositionCanvas(): boolean {
-      return this.rePositionCanvas
    }
  },
  actions: {
@@ -65,8 +62,6 @@ export const useChartLayoutStore = defineStore({
      })
      // 存储本地
      setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
-      // 这里需要标记重置画布位置
-      this.rePositionCanvas = true;
      // 重新计算拖拽区域缩放比例
      if (computedScale) {
        setTimeout(() => {
--- a/src/views/chart/ContentConfigurations/index.vue
+++ b/src/views/chart/ContentConfigurations/index.vue
@@ -37,7 +37,13 @@
        </n-tabs>

        <!-- 编辑 -->
-        <n-tabs v-if="selectTarget" v-model:value="tabsSelect" class="tabs-box" size="small" type="segment">
+        <n-tabs
+          v-if="selectTarget"
+          v-model:value="tabsSelect"
+          class="tabs-box"
+          size="small"
+          type="segment"
+        >
          <n-tab-pane
            v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
            :key="item.key"
@@ -62,104 +68,107 @@
 </template>

 <script setup lang="ts">
-import { ref, toRefs, watch, computed } from 'vue'
-import { icon } from '@/plugins'
-import { loadAsyncComponent } from '@/utils'
-import { ContentBox } from '../ContentBox/index'
-import { TabsEnum } from './index.d'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ref, toRefs, watch, computed } from "vue";
+import { icon } from "@/plugins";
+import { loadAsyncComponent } from "@/utils";
+import { ContentBox } from "../ContentBox/index";
+import { TabsEnum } from "./index.d";
+import { useChartLayoutStore } from "@/store/modules/chartLayoutStore/chartLayoutStore";
+import { ChartLayoutStoreEnum } from "@/store/modules/chartLayoutStore/chartLayoutStore.d";
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";

-const { getDetails } = toRefs(useChartLayoutStore())
-const { setItem } = useChartLayoutStore()
-const chartEditStore = useChartEditStore()
+const { getDetails } = toRefs(useChartLayoutStore());
+const { setItem } = useChartLayoutStore();
+const chartEditStore = useChartEditStore();

-const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5
+const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5;

-const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
-const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue'))
-const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
-const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
-const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
-const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
+const ContentEdit = loadAsyncComponent(() => import("../ContentEdit/index.vue"));
+const CanvasPage = loadAsyncComponent(() => import("./components/CanvasPage/index.vue"));
+const ChartSetting = loadAsyncComponent(() => import("./components/ChartSetting/index.vue"));
+const ChartData = loadAsyncComponent(() => import("./components/ChartData/index.vue"));
+const ChartEvent = loadAsyncComponent(() => import("./components/ChartEvent/index.vue"));
+const ChartAnimation = loadAsyncComponent(() => import("./components/ChartAnimation/index.vue"));

-const collapsed = ref<boolean>(getDetails.value)
-const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING)
+const collapsed = ref<boolean>(getDetails.value);
+const tabsSelect = ref<TabsEnum>(TabsEnum.CHART_SETTING);

 const collapsedHandle = () => {
-  collapsed.value = true
-  setItem(ChartLayoutStoreEnum.DETAILS, true)
-}
+  collapsed.value = true;
+  setItem(ChartLayoutStoreEnum.DETAILS, true);
+};

 const expandHandle = () => {
-  collapsed.value = false
-  setItem(ChartLayoutStoreEnum.DETAILS, false)
-}
+  collapsed.value = false;
+  setItem(ChartLayoutStoreEnum.DETAILS, false);
+};

 const selectTarget = computed(() => {
-  const selectId = chartEditStore.getTargetChart.selectId
+  const selectId = chartEditStore.getTargetChart.selectId;
  // 排除多个
-  if (selectId.length !== 1) return undefined
-  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
+  if (selectId.length !== 1) return undefined;
+  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()];
  if (target?.isGroup) {
    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-    tabsSelect.value = TabsEnum.CHART_SETTING
+    tabsSelect.value = TabsEnum.CHART_SETTING;
  }
-  return target
-})
+  return target;
+});

-watch(getDetails, newData => {
+watch(getDetails, (newData) => {
  if (newData) {
-    collapsedHandle()
+    collapsedHandle();
  } else {
-    expandHandle()
+    expandHandle();
  }
-})
+});

 // 页面设置
 const globalTabList = [
  {
    key: TabsEnum.PAGE_SETTING,
-    title: '页面配置',
+    title: "页面配置",
    icon: DesktopOutlineIcon,
-    render: CanvasPage
-  }
-]
+    render: CanvasPage,
+  },
+];

 const chartsDefaultTabList = [
  {
    key: TabsEnum.CHART_SETTING,
-    title: '定制',
+    title: "定制",
    icon: ConstructIcon,
-    render: ChartSetting
+    render: ChartSetting,
  },
  {
    key: TabsEnum.CHART_ANIMATION,
-    title: '动画',
+    title: "动画",
    icon: LeafIcon,
-    render: ChartAnimation
-  }
-]
+    render: ChartAnimation,
+  },
+];

 const chartsTabList = [
  ...chartsDefaultTabList,
  {
    key: TabsEnum.CHART_DATA,
-    title: '数据',
+    title: "数据",
    icon: FlashIcon,
-    render: ChartData
+    render: ChartData,
  },
  {
    key: TabsEnum.CHART_EVENT,
-    title: '事件',
+    title: "事件",
    icon: RocketIcon,
-    render: ChartEvent
-  }
-]
+    render: ChartEvent,
+  },
+];
 </script>

 <style lang="scss" scoped>
+::v-deep .n-layout-sider {
+  z-index: 9;
+}
@include go(content-configurations) {
  overflow: hidden;
  .tabs-box {
--- a/src/views/chart/ContentEdit/components/EditBottom/index.vue
+++ b/src/views/chart/ContentEdit/components/EditBottom/index.vue
@@ -62,10 +62,15 @@ import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'

 const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5

+const props = defineProps<{
+  reset?: () => void
+  zoomIn?: () => void
+  zoomOut?: () => void
+}>()
+
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
@@ -105,8 +110,7 @@ const filterValue = ref('')
 const selectHandle = (v: number) => {
  selectInstRef.value?.blur()
  if (v === 0) {
-    chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, true)
-    chartEditStore.computedScale()
+    props.reset?.()
    return
  }
  chartEditStore.setScale(v / 100)
--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="go-edit-range go-transition" :style="rangeStyle" @mousedown="mousedownBoxSelect($event, undefined)">
+  <div class="go-edit-range go-transition" @mousedown="mousedownBoxSelect($event, undefined)">
    <slot></slot>
    <!-- 水印 -->
    <edit-watermark></edit-watermark>
@@ -33,15 +33,6 @@ const size = computed(() => {
  }
 })

-const rangeStyle = computed(() => {
-  // 缩放
-  const scale = {
-    transform: `scale(${getEditCanvas.value.scale})`
-  }
-  // @ts-ignore
-  return { ...useSizeStyle(size.value), ...scale }
-})
-
 // 模态层
 const rangeModelStyle = computed(() => {
  const dragStyle = getEditCanvas.value.isCreate && { 'z-index': 99999 }
@@ -52,6 +43,7 @@ const rangeModelStyle = computed(() => {

 <style lang="scss" scoped>
@include go(edit-range) {
+  height: 100%;
  position: relative;
  transform-origin: left top;
  background-size: cover;
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/index.vue
@@ -2,125 +2,140 @@
  <div class="go-sketch-rule">
    <sketch-rule
      v-if="sketchRuleReDraw"
+      ref="sketchRuleRef"
      :thick="thick"
      :scale="scale"
      :width="canvasBox().width"
      :height="canvasBox().height"
-      :startX="startX"
-      :startY="startY"
+      :canvasWidth="width"
+      :canvasHeight="height"
      :lines="lines"
      :palette="paletteStyle"
+      :isShowReferLine="true"
+      :shadow="shadow"
+      @zoomchange="handleZoomChange"
    >
-    </sketch-rule>
-    <div ref="$app" class="edit-screens" @scroll="handleScroll">
-      <div ref="$container" class="edit-screen-container" :style="{ width: containerWidth }">
-        <div
-          ref="refSketchRuleBox"
-          class="canvas"
-          @mousedown="dragCanvas"
-          :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }"
-        >
-          <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
-            <slot></slot>
-          </div>
+      <template #default>
+        <div ref="refSketchRuleBox" class="abc" :style="canvasStyle" @mousedown="dragCanvas">
+          <slot></slot>
        </div>
-      </div>
-    </div>
-    <!-- 修复右下角白点用的 -->
-    <!-- <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div> -->
+      </template>
+    </sketch-rule>
  </div>
 </template>
+
 <script setup lang="ts">
 import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
+import type { CSSProperties } from 'vue'
 import { listen } from 'dom-helpers'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { CreateComponentGroupType } from '@/packages/index.d'
 import throttle from 'lodash/throttle'

 const chartEditStore = useChartEditStore()
-const chartLayoutStore = useChartLayoutStore()
 const designStore = useDesignStore()

 const thick = 20
-let prevMoveXValue = [0, 0]
-let prevMoveYValue = [0, 0]

-const $app = ref()
-const sketchRuleReDraw = ref(true)
-const refSketchRuleBox = ref()
-const $container = ref()
+const sketchRuleRef = ref()
+const sketchRuleReDraw = ref(false)
 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 scale = computed(() => chartEditStore.getEditCanvas.scale)

-// 滚动条拖动的宽度
-const containerWidth = computed(() => {
-  return `${window.innerWidth * 2}px`
-})
-
-// 滚动条拖动的高度
-const containerHeight = computed(() => {
-  return `${height.value * 2}px`
-})
+// 防止 panzoom 与 store 互相触发造成循环
+let isUpdatingFromPanzoom = false
+watch(
+  () => chartEditStore.getEditCanvas.scale,
+  newScale => {
+    if (isUpdatingFromPanzoom) {
+      isUpdatingFromPanzoom = false
+      return
+    }
+    const panzoom = sketchRuleRef.value?.panzoomInstance
+    if (panzoom && Math.abs(panzoom.getScale() - newScale) > 0.001) {
+      panzoom.zoom(newScale)
+    }
+  }
+)

 // 主题
 const paletteStyle = computed(() => {
  const isDarkTheme = designStore.getDarkTheme
  return isDarkTheme
    ? {
-        bgColor: '#18181c',
+        bgColor: 'transparent',
        longfgColor: '#4d4d4d',
        shortfgColor: '#4d4d4d',
        fontColor: '#4d4d4d',
-        shadowColor: '#18181c',
+        shadowColor: '#232324',
        borderColor: '#18181c',
        cornerActiveColor: '#18181c'
      }
-    : {}
+    : { bgColor: 'transparent' }
 })

 // 颜色
 const themeColor = computed(() => {
  return designStore.getAppTheme
 })
-
-// 处理鼠标拖动
-const handleWheel = (e: any) => {
-  if (e.ctrlKey || e.metaKey) {
-    e.preventDefault()
-    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 canvasStyle = computed((): CSSProperties => {
+  return {
+    pointerEvents: isPressSpace.value ? ('none' as const) : ('auto' as const),
+    width: `${width.value}px`,
+    height: `${height.value}px`
+  }
+})
+// 根据 id 查找组件（含分组内子组件）
+const findComponentById = (id: string) => {
+  for (const item of chartEditStore.getComponentList) {
+    if (item.id === id) return item
+    if (item.isGroup) {
+      const child = (item as CreateComponentGroupType).groupList.find(c => c.id === id)
+      if (child) return child
    }
  }
+  return null
 }

-// 滚动条处理
-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
-}
+// 阴影（画布在标尺坐标系中的位置，从 thick 偏移开始）
+const shadow = computed(() => {
+  const selectIds = chartEditStore.getTargetChart.selectId
+  if (!selectIds.length) {
+    return { x: 0, y: 0, width: 0, height: 0 }
+  }
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const id of selectIds) {
+    const comp = findComponentById(id)
+    if (comp) {
+      const { x, y, w, h } = comp.attr
+      minX = Math.min(minX, x)
+      minY = Math.min(minY, y)
+      maxX = Math.max(maxX, x + w)
+      maxY = Math.max(maxY, y + h)
+    }
+  }
+
+  if (minX === Infinity) {
+    return { x: 0, y: 0, width: 0, height: 0 }
+  }
+
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  }
+})

 // 拖拽处理
 const dragCanvas = (e: any) => {
@@ -132,30 +147,8 @@ const dragCanvas = (e: any) => {
  // @ts-ignore
  document.activeElement?.blur()

-  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] = prevMoveXValue
-    const [prevMoveY1, prevMoveY2] = prevMoveYValue
-
-    prevMoveXValue = [prevMoveX2, nx]
-    prevMoveYValue = [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()
-    prevMoveXValue = [0, 0]
-    prevMoveYValue = [0, 0]
    isPressSpace.value = false
  })
 }
@@ -164,7 +157,7 @@ const dragCanvas = (e: any) => {
 const canvasBox = () => {
  const layoutDom = document.getElementById('go-chart-edit-layout')
  if (layoutDom) {
-    // 此处减去滚动条的宽度和高度 
+    // 此处减去滚动条的宽度和高度
    const scrollW = 20
    return {
      height: layoutDom.clientHeight - scrollW,
@@ -183,16 +176,7 @@ const reDraw = throttle(() => {
  setTimeout(() => {
    sketchRuleReDraw.value = true
  }, 10)
-},20)
-
-// 滚动居中
-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
-}
+}, 20)

 // 处理主题变化
 watch(
@@ -202,21 +186,6 @@ watch(
  }
 )

-// // 处理标尺重制大小
-watch(
-  () => scale.value,
-  (newValue, oldValue) => {
-    if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
-      chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false)
-    }
-    handleScroll()
-    setTimeout(() => {
-        canvasPosCenter()
-        reDraw()
-    }, 400)
-  }
-)
-
 // 处理鼠标样式
 watch(
  () => isPressSpace.value,
@@ -225,68 +194,71 @@ watch(
  }
 )

+const handleZoomChange = (detail: any) => {
+  isUpdatingFromPanzoom = true
+  chartEditStore.setScale(detail.scale)
+}
+
 onMounted(() => {
-  if ($app.value) {
-    $app.value.addEventListener('wheel', handleWheel, { passive: false })
-    canvasPosCenter()
+  // 防止 canvasBox() 拿不准尺寸
+  sketchRuleReDraw.value = true
+  window.onKeySpacePressHold = (isHold: boolean) => {
+    isPressSpace.value = isHold
  }
 })

 onUnmounted(() => {
-  if ($app.value) {
-    $app.value.removeEventListener('wheel', handleWheel)
-  }
+  window.onKeySpacePressHold = undefined
 })

-window.onKeySpacePressHold = (isHold: boolean) => {
-  isPressSpace.value = isHold
-}
+const reset = () => sketchRuleRef.value?.reset?.()
+const zoomIn = () => sketchRuleRef.value?.zoomIn?.()
+const zoomOut = () => sketchRuleRef.value?.zoomOut?.()
+
+defineExpose({
+  reset,
+  zoomIn,
+  zoomOut
+})
 </script>

 <style>
-/* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
-此库有计划 Vue3 版本，但是开发的时候还没发布 */
-#mb-ruler {
-  top: 0;
-  left: 0;
-}
-
 /* 横线 */
-#mb-ruler .v-container .lines .line {
+.sketch-ruler .v-container .lines .line {
  /* 最大缩放 200% */
  width: 200vw !important;
  border-top: 1px dashed v-bind('themeColor') !important;
 }

-#mb-ruler .v-container .indicator {
+.sketch-ruler .v-container .indicator {
  border-bottom: 1px dashed v-bind('themeColor') !important;
 }

 /* 竖线 */
-#mb-ruler .h-container .lines .line {
+.sketch-ruler .h-container .lines .line {
  /* 最大缩放 200% */
  height: 200vh !important;
  border-left: 1px dashed v-bind('themeColor') !important;
 }

-#mb-ruler .h-container .indicator {
+.sketch-ruler .h-container .indicator {
  border-left: 1px dashed v-bind('themeColor') !important;
 }

 /* 坐标数值背景颜色 */
-#mb-ruler .indicator .value {
+.sketch-ruler .indicator .value {
  background-color: rgba(0, 0, 0, 0);
 }

 /* 删除按钮 */
-#mb-ruler .line .del {
+.sketch-ruler .line .del {
  padding: 0;
  color: v-bind('themeColor');
  font-size: 26px;
  font-weight: bolder;
 }

-#mb-ruler .corner {
+.sketch-ruler .corner {
  border-width: 0 !important;
 }
 </style>
@@ -297,60 +269,10 @@ window.onKeySpacePressHold = (isHold: boolean) => {
  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);
-    }
-    // 修复右下角白点用的
-    &::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
-  }
-
-  .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('containerHeight');
-    top: 0;
-    left: 0;
-  }
-
  .canvas {
    position: absolute;
-    top:50%;
-    left: 50%;
-    transform-origin: 50% 0;
-    transform: translateY(-50%);
+    top: 0;
+    left: 0;

    &:hover {
      cursor: v-bind('cursorStyle');
--- a/src/views/chart/ContentEdit/components/EditTools/index.vue
+++ b/src/views/chart/ContentEdit/components/EditTools/index.vue
@@ -223,6 +223,7 @@ $asideBottom: 70px;

@include go('chart-edit-tools') {
  @extend .go-background-filter;
+  z-index: 9;
  position: absolute;
  display: flex;
  justify-content: space-around;
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- <edit-rule></edit-rule> -->
  <content-box
    id="go-chart-edit-layout"
    :flex="true"
@@ -13,7 +12,7 @@
    @dragover="dragoverHandle"
    @dragenter="dragoverHandle"
  >
-    <edit-rule>
+    <edit-rule ref="editRuleRef">
      <!-- 画布主体 -->
      <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
        <!-- 展示 -->
@@ -30,7 +29,7 @@
              <!-- 分组 -->
              <edit-group
                v-if="item.isGroup"
-                :groupData="(item as CreateComponentGroupType)"
+                :groupData="item as CreateComponentGroupType"
                :groupIndex="index"
              ></edit-group>

@@ -40,9 +39,9 @@
                :data-id="item.id"
                :index="index"
                :style="{
-                ...useComponentStyle(item.attr, index),
-                ...getBlendModeStyle(item.styles) as any
-              }"
+                  ...useComponentStyle(item.attr, index),
+                  ...(getBlendModeStyle(item.styles) as any),
+                }"
                :item="item"
                @click="mouseClickHandle($event, item)"
                @mousedown="mousedownHandle($event, item)"
@@ -77,13 +76,17 @@

    <!-- 底部控制 -->
    <template #bottom>
-      <EditBottom></EditBottom>
+      <EditBottom
+        :reset="editRuleMethods.reset"
+        :zoom-in="editRuleMethods.zoomIn"
+        :zoom-out="editRuleMethods.zoomOut"
+      ></EditBottom>
    </template>
  </content-box>
 </template>

 <script lang="ts" setup>
-import { onMounted, computed, provide, watch } from 'vue'
+import { onMounted, computed, provide, watch, ref } from 'vue'
 import { chartColors } from '@/settings/chartThemes/index'
 import { MenuEnum } from '@/enums/editPageEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
@@ -181,6 +184,13 @@ const rangeStyle = computed(() => {
 // 处理全局的 vChart 主题
 useInitVChartsTheme(chartEditStore)

+const editRuleRef = ref()
+const editRuleMethods = {
+  reset: () => editRuleRef.value?.reset?.(),
+  zoomIn: () => editRuleRef.value?.zoomIn?.(),
+  zoomOut: () => editRuleRef.value?.zoomOut?.()
+}
+
 // 键盘事件
 onMounted(() => {
  useAddKeyboard()
@@ -197,6 +207,7 @@ onMounted(() => {

  @include goId('chart-edit-content') {
    overflow: hidden;
+    height: 100%;
    @extend .go-transition;
    @include fetch-theme('box-shadow');