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

frontend/package.json

@@ -31,7 +31,8 @@
     "pinia": "^3.0.2",
     "vue": "^3.5.32",
     "vue-echarts": "^7.0.3",
-    "vue-router": "^4.6.4"
+    "vue-router": "^4.6.4",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@types/node": "^24.12.2",

frontend/pnpm-lock.yaml

@@ -68,6 +68,9 @@ importers:
       vue-router:
         specifier: ^4.6.4
         version: 4.6.4(vue@3.5.34(typescript@6.0.3))
+      vuedraggable:
+        specifier: ^4.1.0
+        version: 4.1.0(vue@3.5.34(typescript@6.0.3))
     devDependencies:
       '@types/node':
         specifier: ^24.12.2
@@ -1540,6 +1543,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  sortablejs@1.14.0:
+    resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -1724,6 +1730,11 @@ packages:
       typescript:
         optional: true
 
+  vuedraggable@4.1.0:
+    resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
+    peerDependencies:
+      vue: ^3.0.1
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
@@ -3192,6 +3203,8 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  sortablejs@1.14.0: {}
+
   source-map-js@1.2.1: {}
 
   speakingurl@14.0.1: {}
@@ -3358,6 +3371,11 @@ snapshots:
     optionalDependencies:
       typescript: 6.0.3
 
+  vuedraggable@4.1.0(vue@3.5.34(typescript@6.0.3)):
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.5.34(typescript@6.0.3)
+
   w3c-keyname@2.2.8: {}
 
   webpack-virtual-modules@0.6.2: {}

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 || []