feat:新增地图工具栏功能，置于右下角

src/components/map-toolbar.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import type { EditorService } from '@core/editor.service';
+import { useToolbar } from '@core/useToolbar';
+import { computed, inject, type InjectionKey, onBeforeUnmount, onMounted, ref, type ShallowRef } from 'vue';
+
+// 通用地图工具栏（右下角），临时中文按钮
+// 功能：放大、缩小、适配视图、全屏、截图、网格（占位）
+
+type Props = {
+  token: InjectionKey<ShallowRef<EditorService>>;
+  containerEl?: HTMLElement | null;
+};
+const props = defineProps<Props>();
+
+const editorRef = inject(props.token)!;
+
+const isFullscreen = computed(() => !!document.fullscreenElement);
+
+// 使用 useToolbar 的相关能力（内部使用 jumpToPosition、修改 store 等）
+const {
+  toggleGrid: _toggleGrid,
+  toggleRule: _toggleRule,
+  fitView: _fitView,
+  zoomIn: _zoomIn,
+  zoomOut: _zoomOut,
+} = useToolbar();
+
+const zoomIn = () => {
+  if (editorRef.value) _zoomIn(editorRef.value);
+};
+const zoomOut = () => {
+  if (editorRef.value) _zoomOut(editorRef.value);
+};
+const fitView = async () => {
+  if (editorRef.value) await _fitView(editorRef.value);
+};
+
+const toggleFullscreen = async () => {
+  try {
+    const el = props.containerEl || document.documentElement;
+    if (!document.fullscreenElement) {
+      await el.requestFullscreen?.();
+    } else {
+      await document.exitFullscreen?.();
+    }
+  } catch (e) {
+    console.warn('全屏切换失败', e);
+  }
+};
+
+const downloadBase64 = (base64: string, filename = 'map.png') => {
+  const a = document.createElement('a');
+  a.href = base64;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+};
+
+const exportImage = () => {
+  try {
+    const base64 = editorRef.value?.toPng?.(2);
+    if (base64) downloadBase64(base64, '地图截图.png');
+  } catch (e) {
+    console.warn('截图失败', e);
+  }
+};
+
+// 网格/标尺开关：调用 useToolbar 封装
+const toggleGrid = () => editorRef.value && _toggleGrid(editorRef.value);
+const toggleRule = () => editorRef.value && _toggleRule(editorRef.value);
+
+// =============== 测量尺（像素距离） ===============
+const measuring = ref(false);
+const start = ref<{ x: number; y: number } | null>(null);
+const end = ref<{ x: number; y: number } | null>(null);
+const current = ref<{ x: number; y: number } | null>(null);
+
+const distance = computed(() => {
+  const s = start.value;
+  const e = end.value || current.value;
+  if (!measuring.value || !s || !e) return 0;
+  const dx = e.x - s.x;
+  const dy = e.y - s.y;
+  return Math.sqrt(dx * dx + dy * dy);
+});
+
+const midpoint = computed(() => {
+  const s = start.value;
+  const e = end.value || current.value;
+  if (!measuring.value || !s || !e) return { x: 0, y: 0 };
+  return { x: (s.x + e.x) / 2, y: (s.y + e.y) / 2 };
+});
+
+const toggleMeasure = () => {
+  measuring.value = !measuring.value;
+  if (!measuring.value) {
+    // 退出时清空
+    start.value = null;
+    end.value = null;
+    current.value = null;
+  }
+};
+
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape') {
+    measuring.value = false;
+    start.value = null;
+    end.value = null;
+    current.value = null;
+  }
+};
+
+const onMouseDownOverlay = (e: MouseEvent) => {
+  if (!measuring.value) return;
+  const p = { x: e.clientX, y: e.clientY };
+  if (!start.value) {
+    start.value = p;
+    end.value = null;
+    current.value = null;
+  } else if (!end.value) {
+    end.value = p;
+  } else {
+    // 已有一段完成，继续点击则开始新的测量
+    start.value = p;
+    end.value = null;
+    current.value = null;
+  }
+};
+
+const onMouseMoveOverlay = (e: MouseEvent) => {
+  if (!measuring.value) return;
+  if (start.value && !end.value) {
+    current.value = { x: e.clientX, y: e.clientY };
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('keydown', onKeydown);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown);
+});
+</script>
+
+<template>
+  <div class="map-toolbar">
+    <a-space size="small">
+      <a-button size="small" @click="zoomIn">放大</a-button>
+      <a-button size="small" @click="zoomOut">缩小</a-button>
+      <a-button size="small" @click="fitView">适配视图</a-button>
+      <a-button size="small" type="primary" ghost @click="toggleMeasure">
+        {{ measuring ? '退出测量' : '测量尺' }}
+      </a-button>
+      <a-button size="small" @click="toggleRule">标尺</a-button>
+      <a-button size="small" @click="toggleGrid">网格</a-button>
+      <a-button size="small" @click="exportImage">截图</a-button>
+      <a-button size="small" @click="toggleFullscreen">{{ isFullscreen ? '退出全屏' : '全屏' }}</a-button>
+    </a-space>
+  </div>
+
+  <!-- 测量叠加层（全屏SVG），仅在测量模式下启用点击事件 -->
+  <div
+    class="measure-overlay"
+    :class="{ active: measuring }"
+    @mousedown="onMouseDownOverlay"
+    @mousemove="onMouseMoveOverlay"
+  >
+    <svg class="measure-svg" xmlns="http://www.w3.org/2000/svg">
+      <g v-if="measuring && start && (end || current)">
+        <defs>
+          <marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
+            <path d="M0,0 L0,6 L6,3 z" fill="#1e90ff" />
+          </marker>
+        </defs>
+        <line
+          :x1="start.x"
+          :y1="start.y"
+          :x2="(end || current)!.x"
+          :y2="(end || current)!.y"
+          stroke="#1e90ff"
+          stroke-width="2"
+          marker-end="url(#arrow)"
+        />
+        <!-- 起点/终点标记 -->
+        <circle :cx="start.x" :cy="start.y" r="4" fill="#1e90ff" />
+        <circle :cx="(end || current)!.x" :cy="(end || current)!.y" r="4" fill="#1e90ff" />
+        <!-- 文本标签（像素距离） -->
+        <g :transform="`translate(${midpoint.x}, ${midpoint.y})`">
+          <rect x="-40" y="-22" width="80" height="20" rx="4" ry="4" fill="rgba(0,0,0,0.6)" />
+          <text x="0" y="-8" fill="#fff" font-size="12" text-anchor="middle">{{ distance.toFixed(1) }} px</text>
+        </g>
+      </g>
+      <g v-else-if="measuring">
+        <text x="20" y="40" fill="#fff" font-size="13">提示：依次点击两点进行测量，按 Esc 退出</text>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.map-toolbar {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 101;
+  background: rgba(0, 0, 0, 0.45);
+  padding: 8px 10px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  color: #fff;
+  :deep(.ant-btn) {
+    padding: 0 10px;
+  }
+}
+
+/* 网格背景（占位实现），通过 toggleGrid 开关 */
+:global(.editor-container.grid-bg) {
+  background-image:
+    linear-gradient(90deg, rgba(120, 120, 120, 0.25) 1px, transparent 0),
+    linear-gradient(rgba(120, 120, 120, 0.25) 1px, transparent 0);
+  background-size: 20px 20px;
+}
+
+/* 测量叠加层 */
+.measure-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 109; /* 高于面板，低于全屏按钮浮层 */
+  pointer-events: none;
+}
+.measure-overlay.active {
+  pointer-events: auto; /* 仅测量时可交互 */
+}
+.measure-svg {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/pages/movement-supervision.vue

@@ -9,6 +9,7 @@ import { isNil } from 'lodash-es';
 import { computed, onMounted, onUnmounted, provide, ref, shallowRef, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
+import MapToolbar from '../components/map-toolbar.vue';
 import { autoDoorSimulationService, type AutoDoorWebSocketData } from '../services/auto-door-simulation.service';
 
 const EDITOR_KEY = Symbol('editor-key');
@@ -348,6 +349,8 @@ const backToCards = () => {
       </a-layout-sider>
       <a-layout-content>
         <div ref="container" class="editor-container full"></div>
+        <!-- 自定义地图工具栏（固定右下角，最小侵入） -->
+        <MapToolbar :token="EDITOR_KEY" :container-el="container" />
       </a-layout-content>
     </a-layout>
   </a-layout>

src/services/useToolbar.ts

@@ -0,0 +1,106 @@
+import type { EditorService } from './editor.service';
+import { useViewState } from './useViewState';
+
+/**
+ * 工具栏逻辑封装（不侵入 EditorService）
+ * - 网格开关/设置
+ * - 标尺开关/设置
+ * - 适配视图：基于当前点集中心，用 jumpToPosition 实现跳转
+ */
+export function useToolbar() {
+  const { getCurrentViewState, jumpToPosition } = useViewState();
+
+  // 标尺设置/开关（操作 editor.store.options / editor.store.data 并重绘）
+  const setRule = (editor: EditorService, options: { rule: boolean; ruleColor?: string }) => {
+    const { rule, ruleColor } = options;
+    const o = editor.store.options as unknown as { rule?: boolean; ruleColor?: string };
+    const d = editor.store.data as unknown as { rule?: boolean; ruleColor?: string };
+    o.rule = rule;
+    d.rule = rule;
+    if (ruleColor) {
+      o.ruleColor = ruleColor;
+      d.ruleColor = ruleColor;
+    }
+    (editor.store as unknown as { patchFlagsTop?: boolean }).patchFlagsTop = true;
+    editor.render();
+  };
+
+  const toggleRule = (editor: EditorService, color?: string) => {
+    const cur = (editor.store.data as unknown as { rule?: boolean }).rule ?? false;
+    setRule(editor, { rule: !cur, ruleColor: color });
+  };
+
+  // 网格设置/开关
+  const setGrid = (
+    editor: EditorService,
+    options: { grid: boolean; gridColor?: string; gridSize?: number; gridRotate?: number },
+  ) => {
+    const { grid, gridColor, gridSize, gridRotate } = options;
+    const o = editor.store.options as unknown as {
+      grid?: boolean;
+      gridColor?: string;
+      gridSize?: number;
+      gridRotate?: number;
+    };
+    const d = editor.store.data as unknown as {
+      grid?: boolean;
+      gridColor?: string;
+      gridSize?: number;
+      gridRotate?: number;
+    };
+    o.grid = grid;
+    d.grid = grid;
+    if (gridColor != null) {
+      o.gridColor = gridColor;
+      d.gridColor = gridColor;
+    }
+    if (gridSize != null) {
+      o.gridSize = gridSize;
+      d.gridSize = gridSize;
+    }
+    if (gridRotate != null) {
+      o.gridRotate = gridRotate;
+      d.gridRotate = gridRotate;
+    }
+
+    type CanvasWithTemplate = { canvasTemplate?: { bgPatchFlags?: boolean } };
+    const canvas = editor.canvas as unknown as CanvasWithTemplate | undefined;
+    if (canvas?.canvasTemplate) {
+      canvas.canvasTemplate.bgPatchFlags = true;
+    }
+    editor.render();
+  };
+
+  const toggleGrid = (editor: EditorService) => {
+    const cur = (editor.store.data as unknown as { grid?: boolean }).grid ?? false;
+    setGrid(editor, { grid: !cur });
+  };
+
+  // 适配视图：计算当前中心点，然后用 jumpToPosition 跳转（并保持现有策略：若首次/非恢复则缩放到 8%）
+  const fitView = async (editor: EditorService) => {
+    const state = getCurrentViewState(editor);
+    await jumpToPosition(editor, state.centerX, state.centerY, false);
+  };
+
+  // 基础缩放
+  const zoomIn = (editor: EditorService, step = 0.01) => {
+    const s = editor.data().scale || 1;
+    editor.scale(s + step);
+  };
+
+  const zoomOut = (editor: EditorService, step = 0.01) => {
+    const s = editor.data().scale || 1;
+    const next = Math.max(0.05, s - step);
+    editor.scale(next);
+  };
+
+  return {
+    setRule,
+    toggleRule,
+    setGrid,
+    toggleGrid,
+    fitView,
+    zoomIn,
+    zoomOut,
+  };
+}

src/services/useViewState.ts

@@ -345,5 +345,7 @@ export function useViewState() {
     getViewStateInfo,
     getCurrentViewState,
     autoSaveAndRestoreViewState,
+    // 对外暴露跳转方法，供工具栏或其他模块使用（例如适配视图时用该方法居中跳转）
+    jumpToPosition,
   };
 }