fix: 新增标尺

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

@@ -0,0 +1,3 @@
+import EditRule from './index.vue'
+
+export { EditRule }

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

@@ -0,0 +1,68 @@
+<template>
+  <sketch-rule
+    :thick="thick"
+    :scale="scale"
+    :width="width"
+    :height="height"
+    :startX="startX"
+    :startY="startY"
+    :lines="lines"
+  ></sketch-rule>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+const chartEditStore = useChartEditStore()
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
+
+// 初始化标尺的缩放
+const scale = 2
+// x轴标尺开始的坐标数值
+const startX = 0
+// y轴标尺开始的坐标数值
+const startY = 0
+// 标尺的厚度
+const thick = 20
+// 初始化水平标尺上的参考线
+const lines = {
+  h: [],
+  v: []
+}
+</script>
+
+<style>
+/* 横线 */
+#mb-ruler .v-container .lines .line {
+  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 {
+  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>

src/views/chart/ContentEdit/hooks/useStyle.hook.ts

@@ -3,6 +3,7 @@ import { PickCreateComponentType } from '@/packages/index.d'
 type AttrType = PickCreateComponentType<'attr'>
 
 export const useComponentStyle = (attr: AttrType, index: number) => {
+  if(!attr) return {}
   const componentStyle = {
     zIndex: index + 1,
     left: `${attr.x}px`,
@@ -12,6 +13,7 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
 }
 
 export const useSizeStyle = (attr: AttrType, scale?: number) => {
+  if(!attr) return {}
   return {
     width: `${scale ? scale * attr.w : attr.w}px`,
     height: `${scale ? scale * attr.h : attr.h}px`

src/views/chart/ContentEdit/index.vue

@@ -9,9 +9,10 @@
     @drop="handleDrag"
     @dragover="handleDragOver"
   >
+    <edit-rule></edit-rule>
     <div id="go-chart-edit-content">
       <!-- 展示 -->
-      <edit-range ref="editRangeRef">
+      <edit-range>
         <!-- 图表 -->
         <edit-shape-box
           v-for="(item, index) in chartEditStore.getComponentList"
@@ -44,11 +45,12 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, computed } from 'vue'
+import { onMounted, computed } from 'vue'
 import { ContentBox } from '../contentBox/index'
 import { EditRange } from './components/EditRange'
 import { EditBottom } from './components/EditBottom'
-import { EditShapeBox } from './components/EditShapeBox/index'
+import { EditShapeBox } from './components/EditShapeBox'
+import { EditRule } from './components/EditRule'
 
 import { useLayout } from './hooks/useLayout.hook'
 import { useAddKeyboard } from '../hooks/useKeyboard.hook'
@@ -65,7 +67,6 @@ const { handleContextMenu } = useContextMenu()
 useLayout()
 
 // 点击事件
-const editRangeRef = ref<HTMLElement | null>(null)
 const { mouseenterHandle, mouseleaveHandle, mousedownHandle } = useMouseHandle()
 
 // 主题色
@@ -95,7 +96,7 @@ onMounted(() => {
   @include background-image('background-point');
   @extend .go-point-bg;
   @include goId(chart-edit-content) {
-    margin: 20px;
+    padding: 25px;
     border: 1px solid rgba(0, 0, 0, 0);
     @extend .go-transition;
     &.content-resize {