Pre Merge pull request !243 from kakajun/dev

2025-06-29 16:29:14 +08:00 · 2024-08-29 14:46:27 +00:00 · 2024-08-29 14:46:27 +00:00 · f37def1d2b
commit f37def1d2b
parent 84890550c8 a4f4de57c2
13 changed files with 4440 additions and 3918 deletions
--- a/package.json
+++ b/package.json
@ -46,7 +46,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.0.1",
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- 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/chartEditStore/chartEditStore.d.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.d.ts
@ -14,7 +14,6 @@ import type { ChartColorsNameType, CustomColorsType, GlobalThemeJsonType } from

 // 编辑画布属性
 export enum EditCanvasTypeEnum {
-  EDIT_LAYOUT_DOM = 'editLayoutDom',
  EDIT_CONTENT_DOM = 'editContentDom',
  OFFSET = 'offset',
  SCALE = 'scale',
@ -23,7 +22,7 @@ export enum EditCanvasTypeEnum {
  IS_CREATE = 'isCreate',
  IS_DRAG = 'isDrag',
  IS_SELECT = 'isSelect',
-  IS_CODE_EDIT="isCodeEdit"
+  IS_CODE_EDIT = 'isCodeEdit'
 }

 // 编辑区域
@ -162,8 +161,8 @@ type RequestPublicConfigType = {

 // 数据池项类型
 export type RequestDataPondItemType = {
-  dataPondId: string,
-  dataPondName: string,
+  dataPondId: string
+  dataPondName: string
  dataPondRequestConfig: RequestConfigType
 }

--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@ -39,7 +39,6 @@ export const useChartEditStore = defineStore({
    // 画布属性
    editCanvas: {
      // 编辑区域 Dom
-      editLayoutDom: null,
      editContentDom: null,
      // 偏移量
      offset: 20,
@ -138,6 +137,9 @@ export const useChartEditStore = defineStore({
    componentList: []
  }),
  getters: {
+    gettCanvasScale(): number {
+      return this.editCanvas.scale
+    },
    getMousePosition(): MousePositionType {
      return this.mousePosition
    },
@ -372,13 +374,6 @@ export const useChartEditStore = defineStore({
      if (index < 1 && index > this.getComponentList.length) return
      this.componentList[index] = newData
    },
-    // * 设置页面样式属性
-    setPageStyle<T extends keyof CSSStyleDeclaration>(key: T, value: any): void {
-      const dom = this.getEditCanvas.editContentDom
-      if (dom) {
-        dom.style[key] = value
-      }
-    },
    // * 移动组件列表层级位置到两端
    setBothEnds(isEnd = false, isHistory = true): void {
      try {
@ -527,7 +522,7 @@ export const useChartEditStore = defineStore({
          e.id = getUUID()
          // 分组列表生成新 id
          if (e.isGroup) {
-            (e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
+            ;(e as CreateComponentGroupType).groupList.forEach((item: CreateComponentType) => {
              item.id = getUUID()
            })
          }
@ -933,53 +928,7 @@ export const useChartEditStore = defineStore({
    setShow(isHistory: boolean = true) {
      this.setHide(false, isHistory)
    },
-    // ----------------
-    // * 设置页面大小
-    setPageSize(scale: number): void {
-      this.setPageStyle('height', `${this.editCanvasConfig.height * scale}px`)
-      this.setPageStyle('width', `${this.editCanvasConfig.width * scale}px`)
-    },
-    // * 计算缩放
-    computedScale() {
-      if (this.getEditCanvas.editLayoutDom) {
-        // 现有展示区域
-        const width = this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5
-        const height = this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4

-        // 用户设定大小
-        const editCanvasWidth = this.editCanvasConfig.width
-        const editCanvasHeight = this.editCanvasConfig.height
-
-        // 需保持的比例
-        const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5))
-        const currentRate = parseFloat((width / height).toFixed(5))
-
-        if (currentRate > baseProportion) {
-          // 表示更宽
-          const scaleWidth = parseFloat(((height * baseProportion) / editCanvasWidth).toFixed(5))
-          this.setScale(scaleWidth > 1 ? 1 : scaleWidth)
-        } else {
-          // 表示更高
-          const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5))
-          this.setScale(scaleHeight > 1 ? 1 : scaleHeight)
-        }
-      } else {
-        window['$message'].warning('请先创建画布，再进行缩放')
-      }
-    },
-    // * 监听缩放
-    listenerScale(): Function {
-      const resize = debounce(this.computedScale, 200)
-      // 默认执行一次
-      resize()
-      // 开始监听
-      window.addEventListener('resize', resize)
-      // 销毁函数
-      const remove = () => {
-        window.removeEventListener('resize', resize)
-      }
-      return remove
-    },
    /**
     * * 设置缩放
     * @param scale 0~1 number 缩放比例;
@ -987,9 +936,9 @@ export const useChartEditStore = defineStore({
     */
    setScale(scale: number, force = false): void {
      if (!this.getEditCanvas.lockScale || force) {
-        this.setPageSize(scale)
        this.getEditCanvas.userScale = scale
        this.getEditCanvas.scale = scale
+        console.log(scale, '5555555555')
      }
    }
  }
--- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts
+++ b/src/store/modules/chartLayoutStore/chartLayoutStore.ts
@ -58,7 +58,6 @@ export const useChartLayoutStore = defineStore({
    setItem<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(
      key: T,
      value: K,
-      computedScale = true
    ): void {
      this.$patch(state => {
        state[key] = value
@ -67,12 +66,6 @@ export const useChartLayoutStore = defineStore({
      setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
      // 这里需要标记重置画布位置
      this.rePositionCanvas = true;
-      // 重新计算拖拽区域缩放比例
-      if (computedScale) {
-        setTimeout(() => {
-          chartEditStore.computedScale()
-        }, 500)
-      }
    },
    setItemUnHandle<T extends keyof ChartLayoutType, K extends ChartLayoutType[T]>(key: T, value: K): void {
      this.$patch(state => {
--- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
+++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
@ -8,7 +8,6 @@
          v-model:value="canvasConfig.width"
          :disabled="editCanvas.lockScale"
          :validator="validator"
-          @update:value="changeSizeHandle"
        ></n-input-number>
      </n-form-item>
      <n-form-item label="高度">
@ -17,7 +16,6 @@
          v-model:value="canvasConfig.height"
          :disabled="editCanvas.lockScale"
          :validator="validator"
-          @update:value="changeSizeHandle"
        ></n-input-number>
      </n-form-item>
    </n-form>
@ -212,10 +210,7 @@ watch(
 // 画布尺寸规则
 const validator = (x: number) => x > 50

-// 修改尺寸
-const changeSizeHandle = () => {
-  chartEditStore.computedScale()
-}
+

 // 上传图片前置处理
 //@ts-ignore
--- a/src/views/chart/ContentEdit/components/EditBottom/index.vue
+++ b/src/views/chart/ContentEdit/components/EditBottom/index.vue
@ -106,7 +106,6 @@ const selectHandle = (v: number) => {
  selectInstRef.value?.blur()
  if (v === 0) {
    chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, true)
-    chartEditStore.computedScale()
    return
  }
  chartEditStore.setScale(v / 100)
@ -125,6 +124,7 @@ const sliderFormatTooltip = (v: string) => `${v}%`

 // 拖动处理
 const sliderHandle = (v: number) => {
+  //  chartEditStore.setEditCanvas(EditCanvasTypeEnum.SCALE, value);
  chartEditStore.setScale(v / 100)
 }

--- a/src/views/chart/ContentEdit/components/EditRange/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRange/index.vue
@ -34,12 +34,8 @@ const size = computed(() => {
 })

 const rangeStyle = computed(() => {
-  // 缩放
-  const scale = {
-    transform: `scale(${getEditCanvas.value.scale})`
-  }
  // @ts-ignore
-  return { ...useSizeStyle(size.value), ...scale }
+  return { ...useSizeStyle(size.value) }
 })

 // 模态层
@ -55,7 +51,9 @@ const rangeModelStyle = computed(() => {
  position: relative;
  transform-origin: left top;
  background-size: cover;
+  border-radius: 10px;
  overflow: hidden;
+  @include fetch-theme('box-shadow');
  @include fetch-border-color('hover-border-color');
  @include fetch-bg-color('background-color2');
  @include go(edit-range-model) {
--- a/src/views/chart/ContentEdit/components/EditRule/index.vue
+++ b/src/views/chart/ContentEdit/components/EditRule/index.vue
@ -1,296 +1,104 @@
 <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" v-model:scale="innerScale" :thick="thick" :width="rectWidth"
+      :height="rectHeight" :canvasWidth="width" :canvasHeight="height" :lines="lines" :palette="paletteStyle">
+      <slot></slot>
    </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>
-        </div>
-      </div>
-    </div>
-    <!-- 修复右下角白点用的 -->
-    <!-- <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div> -->
  </div>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } 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 throttle from 'lodash/throttle'
+import { ref, reactive, toRefs, watch, computed } from 'vue';
+import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
+import { useDesignStore } from '@/store/modules/designStore/designStore';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore';
+const chartEditStore = useChartEditStore();
+const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore());
+const designStore = useDesignStore();

-const chartEditStore = useChartEditStore()
-const chartLayoutStore = useChartLayoutStore()
-const designStore = useDesignStore()
+const thick = 20;
+const rectWidth = computed(() => {
+  return window.innerWidth - 70 - (getCharts.value ? 265 : 0) - (getLayers.value ? 200 : 0) - (getDetails.value ? 0:350);
+});
+const rectHeight = ref(window.innerHeight - 60);

-const thick = 20
-let prevMoveXValue = [0, 0]
-let prevMoveYValue = [0, 0]
+const sketchRuleReDraw = ref(true);

-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 isPressSpace = ref(false);
+const cursorStyle = ref('auto');
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig);

-const scale = computed(() => {
-  return chartEditStore.getEditCanvas.scale
-})
+const lines = reactive({ h: [], v: [] });

-// 滚动条拖动的宽度
-const containerWidth = computed(() => {
-  return `${window.innerWidth * 2}px`
-})
+const innerScale = computed({
+  get() {
+    return chartEditStore.gettCanvasScale
+  },
+  set(value) {
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.SCALE, value);
+  }
+});

-// 滚动条拖动的高度
-const containerHeight = computed(() => {
-  return `${height.value * 2}px`
-})
+// 处理主题变化
+watch(
+  () => chartEditStore.gettCanvasScale,
+  () => {
+   console.log('innerScale', chartEditStore.gettCanvasScale);
+    chartEditStore.setEditCanvas(EditCanvasTypeEnum.SCALE, chartEditStore.gettCanvasScale);
+  }
+);

 // 主题
 const paletteStyle = computed(() => {
-  const isDarkTheme = designStore.getDarkTheme
+  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) => {
-  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
+      bgColor: 'transparent',
+      longfgColor: '#4d4d4d',
+      shortfgColor: '#4d4d4d',
+      fontColor: '#4d4d4d',
+      shadowColor: '#18181c',
+      borderColor: '#18181c',
+      cornerActiveColor: '#18181c',
+      lineColor: '#51d6a9',
+      lineType: 'dashed'
    }
-    // 缩小(10%)
-    if (e.wheelDelta < 0 && scale.value > 0.1) {
-      resScale = scale.value - 0.05
-      chartEditStore.setScale(resScale)
-    }
-  }
-}
+    : {
+      bgColor: 'transparent',
+    };
+});

-// 滚动条处理
-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) => {
-  e.preventDefault()
-  e.stopPropagation()
-
-  if (e.which == 2) isPressSpace.value = true
-  else if (!window.$KeyboardActive?.space) return
-  // @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
-  })
-}
-
-// 计算画布大小
-const canvasBox = () => {
-  const layoutDom = document.getElementById('go-chart-edit-layout')
-  if (layoutDom) {
-    // 此处减去滚动条的宽度和高度 
-    const scrollW = 20
-    return {
-      height: layoutDom.clientHeight - scrollW,
-      width: layoutDom.clientWidth - scrollW
-    }
-  }
-  return {
-    width: width.value,
-    height: height.value
-  }
-}

 // 重绘标尺
-const reDraw = throttle(() => {
-  sketchRuleReDraw.value = false
+const reDraw = () => {
+  sketchRuleReDraw.value = false;
  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
-}
+    sketchRuleReDraw.value = true;
+  }, 10);
+};

 // 处理主题变化
 watch(
  () => designStore.getDarkTheme,
  () => {
-    reDraw()
+    reDraw();
  }
-)
+);

-// // 处理标尺重制大小
-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,
  newValue => {
-    cursorStyle.value = newValue ? 'grab' : 'auto'
+    cursorStyle.value = newValue ? 'grab' : 'auto';
  }
-)
-
-onMounted(() => {
-  if ($app.value) {
-    $app.value.addEventListener('wheel', handleWheel, { passive: false })
-    canvasPosCenter()
-  }
-})
-
-onUnmounted(() => {
-  if ($app.value) {
-    $app.value.removeEventListener('wheel', handleWheel)
-  }
-})
+);

 window.onKeySpacePressHold = (isHold: boolean) => {
-  isPressSpace.value = isHold
-}
+  isPressSpace.value = isHold;
+};
 </script>

-<style>
-/* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
-此库有计划 Vue3 版本，但是开发的时候还没发布 */
-#mb-ruler {
-  top: 0;
-  left: 0;
-}
-
-/* 横线 */
-#mb-ruler .v-container .lines .line {
-  /* 最大缩放 200% */
-  width: 200vw !important;
-  border-top: 1px dashed v-bind('themeColor') !important;
-}
-
-#mb-ruler .v-container .indicator {
-  border-bottom: 1px dashed v-bind('themeColor') !important;
-}
-
-/* 竖线 */
-#mb-ruler .h-container .lines .line {
-  /* 最大缩放 200% */
-  height: 200vh !important;
-  border-left: 1px dashed v-bind('themeColor') !important;
-}
-
-#mb-ruler .h-container .indicator {
-  border-left: 1px dashed v-bind('themeColor') !important;
-}
-
-/* 坐标数值背景颜色 */
-#mb-ruler .indicator .value {
-  background-color: rgba(0, 0, 0, 0);
-}
-
-/* 删除按钮 */
-#mb-ruler .line .del {
-  padding: 0;
-  color: v-bind('themeColor');
-  font-size: 26px;
-  font-weight: bolder;
-}
-
-#mb-ruler .corner {
-  border-width: 0 !important;
-}
-</style>
-
 <style lang="scss" scoped>
@include go('sketch-rule') {
  overflow: hidden;
@ -323,6 +131,7 @@ window.onKeySpacePressHold = (isHold: boolean) => {
      border-radius: 5px;
      background-color: rgba(144, 146, 152, 0.3);
    }
+
    // 修复右下角白点用的
    &::-webkit-scrollbar-corner {
      background-color: transparent;
@ -337,28 +146,5 @@ window.onKeySpacePressHold = (isHold: boolean) => {
    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%);
-
-    &:hover {
-      cursor: v-bind('cursorStyle');
-    }
-
-    &:active {
-      cursor: crosshair;
-    }
-  }
 }
 </style>
--- a/src/views/chart/ContentEdit/hooks/useLayout.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useLayout.hook.ts
@ -6,13 +6,8 @@ const chartEditStore = useChartEditStore()

 // 布局处理
 export const useLayout = (fn: () => Promise<void>) => {
-  let removeScale: Function = () => { }
  onMounted(async () => {
    // 设置 Dom 值(ref 不生效先用 document)
-    chartEditStore.setEditCanvas(
-      EditCanvasTypeEnum.EDIT_LAYOUT_DOM,
-      document.getElementById('go-chart-edit-layout')
-    )
    chartEditStore.setEditCanvas(
      EditCanvasTypeEnum.EDIT_CONTENT_DOM,
      document.getElementById('go-chart-edit-content')
@ -20,14 +15,9 @@ export const useLayout = (fn: () => Promise<void>) => {

    // 获取数据
    await fn()
-    // 监听初始化
-    removeScale = chartEditStore.listenerScale()
-
  })

  onUnmounted(() => {
-    chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_LAYOUT_DOM, null)
    chartEditStore.setEditCanvas(EditCanvasTypeEnum.EDIT_CONTENT_DOM, null)
-    removeScale()
  })
 }
--- a/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
+++ b/src/views/chart/ContentEdit/hooks/useStyle.hook.ts
@ -3,7 +3,7 @@ import { PickCreateComponentType } from '@/packages/index.d'
 type AttrType = PickCreateComponentType<'attr'>

 export const useComponentStyle = (attr: AttrType, index: number) => {
-  if(!attr) return {}
+  if (!attr) return {}
  const componentStyle = {
    zIndex: index + 1,
    left: `${attr.x}px`,
@ -13,10 +13,10 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
 }

 export const useSizeStyle = (attr: AttrType, scale?: number) => {
-  if(!attr) return {}
+  if (!attr) return {}
  return {
-    width: `${scale ? scale * attr.w : attr.w}px`,
-    height: `${scale ? scale * attr.h : attr.h}px`
+    width: `${attr.w}px`,
+    height: `${attr.h}px`
  }
 }

--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@ -193,10 +193,8 @@ onMounted(() => {
  @include background-image('background-point');

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