perf: 优化标尺的展示方式

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -3,8 +3,6 @@
     <slot></slot>
     <!-- 水印 -->
     <edit-watermark></edit-watermark>
-    <!-- 标尺 -->
-    <edit-rule></edit-rule>
     <!-- 拖拽时的辅助线 -->
     <edit-align-line></edit-align-line>
     <!-- 框选时的样式框 -->
@@ -22,7 +20,6 @@ import { mousedownBoxSelect } from '../../hooks/useDrag.hook'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditAlignLine } from '../EditAlignLine'
 import { EditWatermark } from '../EditWatermark'
-import { EditRule } from '../EditRule'
 import { EditSelect } from '../EditSelect'
 
 const chartEditStore = useChartEditStore()

src/views/chart/ContentEdit/components/EditRule/index.vue

@@ -1,9 +1,10 @@
 <template>
   <sketch-rule
+    v-if="configShow"
     :thick="thick"
     :scale="scale"
-    :width="width"
-    :height="height"
+    :width="canvasBox().width"
+    :height="canvasBox().height"
     :startX="startX"
     :startY="startY"
     :lines="lines"
@@ -11,7 +12,7 @@
 </template>
 
 <script setup lang="ts">
-import { toRefs, computed } from 'vue'
+import { ref, toRefs, computed, watch } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 
@@ -20,12 +21,12 @@ const designStore = useDesignStore()
 
 const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
 
-// 初始化标尺的缩放
-const scale = 1
+const configShow = ref(true)
+
 // x轴标尺开始的坐标数值
-const startX = 20
+const startX = -10
 // y轴标尺开始的坐标数值
-const startY = 20
+const startY = -10
 // 标尺的厚度
 const thick = 20
 // 初始化水平标尺上的参考线
@@ -34,29 +35,58 @@ const lines = {
   v: []
 }
 
+const canvasBox = () => {
+  const layoutDom = document.getElementById('go-chart-edit-layout')
+  if (layoutDom) {
+    return {
+      height: layoutDom.clientHeight - 40,
+      width: layoutDom.clientWidth
+    }
+  }
+  return {
+    width: width.value,
+    height: height.value
+  }
+}
+
+const scale = computed(() => {
+  return chartEditStore.getEditCanvas.scale
+})
+
 // 颜色
 const themeColor = computed(() => {
   return designStore.getAppTheme
 })
 
+// 处理标尺重制大小
+watch(
+  () => scale.value,
+  () => {
+    configShow.value = false
+    setTimeout(() => {
+      configShow.value = true
+    })
+  }
+)
 </script>
 
 <style>
-
 /* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
 此库有计划 Vue3 版本，但是开发的时候还没发布 */
 
 #mb-ruler {
-  top: 0; 
+  top: 0;
   left: 0;
 }
-
+/* 适配底部的工具栏不遮盖 */
+#mb-ruler .v-container {
+  height: calc(100% - 65px) !important;
+}
 /* 横线 */
 #mb-ruler .v-container .lines .line {
   /* 最大缩放 200% */
-  width: 200vw!important;
+  width: 200vw !important;
   border-top: 1px dashed v-bind('themeColor') !important;
-  
 }
 #mb-ruler .v-container .indicator {
   border-bottom: 1px dashed v-bind('themeColor') !important;
@@ -64,7 +94,7 @@ const themeColor = computed(() => {
 /* 竖线 */
 #mb-ruler .h-container .lines .line {
   /* 最大缩放 200% */
-  height: 200vh!important;
+  height: 200vh !important;
   border-left: 1px dashed v-bind('themeColor') !important;
 }
 #mb-ruler .h-container .indicator {
@@ -82,7 +112,7 @@ const themeColor = computed(() => {
   font-weight: bolder;
 }
 
-#mb-ruler .corner{
-  border-width: 0!important;
+#mb-ruler .corner {
+  border-width: 0 !important;
 }
 </style>

src/views/chart/ContentEdit/components/EditTools/utils/index.ts

@@ -17,19 +17,16 @@ export const exportHandle = () => {
   )
 
   // 导出图片
-  const ruler = document.getElementById('mb-ruler')
   const range = document.querySelector('.go-edit-range') as HTMLElement
   const watermark = document.getElementById('go-edit-watermark')
   // 隐藏边距线
-  if (!ruler || !range || !watermark) {
+  if (!range || !watermark) {
     window['$message'].error('导出失败！')
     return
   }
 
   // 记录缩放比例
   const scaleTemp = chartEditStore.getEditCanvas.scale
-  // 去除标尺Dom
-  ruler.style.display = 'none'
   // 百分百展示页面
   chartEditStore.setScale(1, true)
   // 展示水印
@@ -39,8 +36,6 @@ export const exportHandle = () => {
     canvasCut(range, () => {
       // 隐藏水印
       if (watermark) watermark.style.display = 'none'
-      // 放开边距线
-      if (ruler) ruler.style.display = 'block'
       // 还原页面大小
       chartEditStore.setScale(scaleTemp, true)
     })

src/views/chart/ContentEdit/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <edit-rule></edit-rule>
   <content-box
     id="go-chart-edit-layout"
     :flex="true"
@@ -24,8 +25,12 @@
           <!-- 图表 -->
           <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
@@ -88,6 +93,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 { EditBottom } from './components/EditBottom'
 import { EditShapeBox } from './components/EditShapeBox'
 import { EditTools } from './components/EditTools'
@@ -115,7 +121,7 @@ const optionsHandle = (
   // 多选处理
   if (chartEditStore.getTargetChart.selectId.length > 1) {
     const list: MenuOptionsItemType[] = []
-    
+
     allList.forEach(item => {
       // 成组
       if (moreMenuEnums.includes(item.key as MenuEnum)) {
@@ -174,7 +180,7 @@ onMounted(() => {
   @include background-image('background-point');
   @include goId('chart-edit-content') {
     border-radius: 10px;
-    margin: 15px;
+    margin: 25px;
     overflow: hidden;
     @extend .go-transition;
     @include fetch-theme('box-shadow');