标尺功能开发

src/components/Ruler.vue

@@ -57,7 +57,7 @@ const updateDimensions = () => {
     const rect = props.containerRef.getBoundingClientRect()
     containerWidth.value = rect.width
     containerHeight.value = rect.height
-    console.log('Container dimensions updated:', containerWidth.value, containerHeight.value) // 调试日志
+    // console.log('Container dimensions updated:', containerWidth.value, containerHeight.value) // 调试日志
   }
 }
 
@@ -117,7 +117,7 @@ const verticalTicks = computed(() => {
       })
     }
   }
-  console.log('Vertical ticks generated:', ticks.length, ticks) // 调试日志：检查生成数量和位置
+  // console.log('Vertical ticks generated:', ticks.length, ticks) // 调试日志：检查生成数量和位置
   return ticks
 })
 
@@ -140,7 +140,7 @@ const horizontalTicks = computed(() => {
       })
     }
   }
-  console.log('Horizontal ticks generated:', ticks.length) // 调试日志
+  // console.log('Horizontal ticks generated:', ticks.length)
   return ticks
 })
 

src/components/layout/TopoButtonBar.vue

@@ -225,7 +225,7 @@ const tabs = [
         label: t("buttons.actualSize"),
         icon: actualSizeIcon
       },
-      { action: "grag", label: t("buttons.grag"), icon: dragIcon }
+      { action: "drag", label: t("buttons.drag"), icon: dragIcon }
     ]
   },
   {

src/locales/en.json

@@ -175,7 +175,7 @@
     "zoomZOut": "ZoomZOut",
     "fitZView": "FitZView",
     "actualSize": "ActualSize",
-    "grag": "Grag",
+    "drag": "Drag",
     "alignLeft": "AlignLeft",
     "alignCenter": "AlignCenter",
     "alignRight": "AlignRight",

src/locales/zh-CN.json

@@ -176,7 +176,7 @@
     "zoomOut": "缩小",
     "fitView": "适应视图",
     "actualSize": "实际大小",
-    "grag": "拖拽",
+    "drag": "拖拽",
     "alignLeft": "左对齐",
     "alignCenter": "水平居中",
     "alignRight": "右对齐",

src/views/model/index.vue

@@ -533,7 +533,34 @@ const handleTimelineItemClick = (index) => {
 // 处理 topoButtonBar 触发的 button-click 事件
 const handleTopoButtonClick = ({ action, isActive }) => {
   buttonStates.value[action] = isActive !== undefined ? isActive : buttonStates.value[action]
-  console.log(`Button clicked: ${action}, isActive: ${buttonStates.value[action]}`)
+  // 根据 action 调用 VueFlow 对应方法
+  switch (action) {
+    case 'zoomIn':
+      zoomIn()
+      break
+    case 'zoomOut':
+      zoomOut()
+      break
+    case 'fitView':
+      fitView()
+      break
+    case 'actualSize':
+      // 重置为实际大小（缩放 1x，位置 0,0）
+      if (vueflowRef.value) {
+        vueflowRef.value.resetTransform()  // 假设你的 vueflow 组件暴露了 resetTransform 方法
+      } else {
+        // 备选：直接使用 useVueFlow 的 setViewport
+        const { setViewport } = useVueFlow()
+        setViewport({ x: 0, y: 0, zoom: 1 })
+      }
+      break
+    case 'drag':
+      setInteractive(true)
+      break
+    default:
+      console.log(`Unhandled action: ${action}`)
+      break
+  }
 }
 
 // 处理 topoButtonBar 触发的 mode-switch 事件