task 2: 导出图片 — 添加html2canvas依赖和导出图片按钮

frontend/src/views/MapCanvas.vue

@@ -33,6 +33,7 @@
           </svg>
           查看执行看板
         </el-button>
+        <el-button @click="exportImage">📷 导出图片</el-button>
       </div>
     </div>
 
@@ -280,6 +281,7 @@ import api from "../api/index"
 import { LAYER_CONFIG, LAYER_KEYS, getLayerList } from "../config/layers"
 import StrategyLayer from "../components/strategy-map/StrategyLayer.vue"
 import ConnectionLines from "../components/strategy/ConnectionLines.vue"
+import html2canvas from "html2canvas"
 
 // ── 四层泳道配置 ──
 const layerKeysOrdered = [...LAYER_KEYS]
@@ -913,6 +915,27 @@ function goAlignment() {
   window.location.href = url
 }
 
+/** 导出画布为PNG图片 */
+async function exportImage() {
+  const el = document.querySelector('.canvas-scroll-wrap') as HTMLElement
+  if (!el) { ElMessage.warning('画布尚未加载'); return }
+  try {
+    const canvas = await html2canvas(el, {
+      useCORS: true,
+      backgroundColor: '#ffffff',
+      scale: 2,
+    })
+    const link = document.createElement('a')
+    link.download = '战略地图.png'
+    link.href = canvas.toDataURL('image/png')
+    link.click()
+    ElMessage.success('图片已导出')
+  } catch (e) {
+    console.error('exportImage error:', e)
+    ElMessage.error('导出失败')
+  }
+}
+
 onMounted(async () => {
   const r: any = await mapApi.list()
   maps.value = r.data || []