diff --git a/package.json b/package.json
index 804b2097..d1af92d1 100644
--- 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": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9704bd87..701fcea8 100644
--- 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:
diff --git a/src/plugins/customComponents.ts b/src/plugins/customComponents.ts
index 0fad1075..35e7b5db 100644
--- 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'
 
 /**
  * 全局注册自定义组件
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts
index b485dd59..f387799e 100644
--- 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
 }
diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
index 95a0cb70..74983bec 100644
--- 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(() => {
diff --git a/src/views/chart/ContentConfigurations/index.vue b/src/views/chart/ContentConfigurations/index.vue
index 110a3c2f..9c37280d 100644
--- 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 {
diff --git a/src/views/chart/ContentEdit/components/EditBottom/index.vue b/src/views/chart/ContentEdit/components/EditBottom/index.vue
index 361b474a..e541417d 100644
--- 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)
diff --git a/src/views/chart/ContentEdit/components/EditRange/index.vue b/src/views/chart/ContentEdit/components/EditRange/index.vue
index 81944bd6..e8034055 100644
--- 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;
diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue
index 21ab7e27..e8ea4162 100644
--- 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');
diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue
index c92e578c..4537ce67 100644
--- 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;
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index d44393d4..f8d538fc 100644
--- 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');