From d247804c284f283d75cc04eca01c309e8ff00501 Mon Sep 17 00:00:00 2001
From: Hermes CI Fix <hermes-ci@sxbh.ltd>
Date: Sun, 12 Jul 2026 17:47:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8DP0/P1/P2=E5=85=A8?=
 =?UTF-8?q?=E9=83=A8=E5=8A=9F=E8=83=BD=E4=BB=A3=E7=A0=81=EF=BC=88Git=20Hoo?=
 =?UTF-8?q?ks=E9=83=A8=E7=BD=B2=E6=9B=BE=E8=A6=86=E7=9B=96=E6=9C=AC?=
 =?UTF-8?q?=E5=9C=B0=E4=BF=AE=E6=94=B9=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/MapCanvas.vue | 1287 ++++++++++++++++++------------
 1 file changed, 767 insertions(+), 520 deletions(-)

diff --git a/frontend/src/views/MapCanvas.vue b/frontend/src/views/MapCanvas.vue
index 1ee82601..6db49f12 100644
--- a/frontend/src/views/MapCanvas.vue
+++ b/frontend/src/views/MapCanvas.vue
@@ -2,14 +2,27 @@
   <div class="map-canvas-page" ref="canvasRef">
     <!-- 工具栏 -->
     <div class="toolbar">
-      <h3>战略地图画布</h3>
+      <h3>战略地图画布 — 四层泳道</h3>
       <div class="toolbar-right">
         <el-select v-model="selectedMap" placeholder="选择地图" style="width:200px;margin-right:8px;" @change="loadCanvas">
           <el-option v-for="m in maps" :key="m.id" :label="m.title" :value="m.id" />
         </el-select>
+        <!-- 缩放控制 -->
+        <div class="zoom-controls" title="画布缩放">
+          <el-button size="small" @click="zoomOut" :disabled="zoomLevel <= 0.5">−</el-button>
+          <span class="zoom-label">{{ Math.round(zoomLevel * 100) }}%</span>
+          <el-button size="small" @click="zoomIn" :disabled="zoomLevel >= 1.5">+</el-button>
+          <el-button size="small" @click="zoomReset">100%</el-button>
+        </div>
         <el-button type="primary" @click="saveCanvas">保存</el-button>
         <el-button type="success" @click="publishMap" v-if="currentMap?.status === 'draft'">发布</el-button>
         <el-button @click="showVersions = true; loadVersions()">版本历史</el-button>
+        <el-button @click="goAlignment" type="info" plain>
+          <svg style="width:14px;height:14px;margin-right:4px;vertical-align:-2px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M3 12h4l2-3 3 3 4-7 3 5 2-2 4 4"/>
+          </svg>
+          查看执行看板
+        </el-button>
       </div>
     </div>
 
@@ -19,314 +32,346 @@
       <el-button size="small" @click="cancelLink">取消</el-button>
     </div>
 
-    <!-- 画布主体 -->
-    <div class="canvas-body" ref="bodyRef">
-      <!-- SVG 连线层 -->
-      <svg class="connection-svg" ref="svgRef">
-        <defs>
-          <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" fill="#409eff" />
-          </marker>
-          <marker id="arrowhead-warn" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
-            <polygon points="0 0, 10 3.5, 0 7" fill="#e6a23c" />
-          </marker>
-        </defs>
-        <line v-for="(line, idx) in connectionLines" :key="idx"
-          :x1="line.x1" :y1="line.y1" :x2="line.x2" :y2="line.y2"
-          :class="['conn-line', { 'conn-selected': selectedConnIdx === idx }]"
-          :style="{ '--from-color': line.fromColor, '--to-color': line.toColor }"
-          marker-end="url(#arrowhead)"
-          :stroke="selectedConnIdx === idx ? '#f56c6c' : '#409eff'"
-          :stroke-width="selectedConnIdx === idx ? 3 : 2"
-          @click.stop="selectConnection(idx)"
-        />
-        <!-- 删除按钮（选中连线时） -->
-        <g v-if="selectedConnIdx !== null && connectionLines[selectedConnIdx]">
-          <circle
-            :cx="connectionLines[selectedConnIdx].mx"
-            :cy="connectionLines[selectedConnIdx].my"
-            r="10" fill="#f56c6c" class="del-btn-circle"
-            @click.stop="deleteConnection(selectedConnIdx)"
-          />
-          <text
-            :x="connectionLines[selectedConnIdx].mx"
-            :y="connectionLines[selectedConnIdx].my + 4"
-            text-anchor="middle" fill="#fff" font-size="12" font-weight="bold"
-            class="del-btn-text"
-            @click.stop="deleteConnection(selectedConnIdx)"
-          >✕</text>
-        </g>
-        <!-- 绘制中的临时线 -->
-        <line v-if="tempLine"
-          :x1="tempLine.x1" :y1="tempLine.y1"
-          :x2="tempLine.x2" :y2="tempLine.y2"
-          stroke="#e6a23c" stroke-width="2" stroke-dasharray="6,3"
-          marker-end="url(#arrowhead-warn)"
-        />
-      </svg>
+    <!-- 空状态提示 -->
+    <div v-if="!loading && dimensions.every(d => d.objectives.length === 0)" class="empty-state">
+      <el-empty description="四层泳道已就绪，点击各层的「+ 添加目标」开始填写">
+        <template #image>
+          <svg viewBox="0 0 120 120" width="120" height="120">
+            <rect x="10" y="10" width="100" height="22" rx="4" fill="#FEF0F0" />
+            <rect x="10" y="38" width="100" height="22" rx="4" fill="#ECF5FF" />
+            <rect x="10" y="66" width="100" height="22" rx="4" fill="#F0F9EB" />
+            <rect x="10" y="94" width="100" height="22" rx="4" fill="#FDF6EC" />
+          </svg>
+        </template>
+      </el-empty>
+    </div>
 
-      <!-- 四维度列 -->
-      <div class="dimension-col" v-for="(dim, di) in dimensions" :key="dim.key"
-           :ref="el => setDimRef(dim.key, el)"
-           :style="{ borderColor: dim.color }">
-        <div class="dim-header" :style="{ background: dim.color }"
-             @dblclick="startEditDim(di)"
-             :title="'双击编辑维度'">
-          <span class="dim-icon">{{ dim.icon }}</span>
-          <span v-if="editingDimIdx !== di" class="dim-name">{{ dim.label }}</span>
-          <el-input v-else v-model="dim.label" size="small" style="width:100px;"
-                    @blur="editingDimIdx = -1"
-                    @keyup.enter="editingDimIdx = -1" />
-          <!-- 维度操作按钮 -->
-          <el-dropdown trigger="click" @command="(cmd:string) => dimAction(cmd, di)">
-            <el-button class="dim-more-btn" size="small" text>
-              <el-icon><MoreFilled /></el-icon>
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-item command="rename">重命名</el-dropdown-item>
-              <el-dropdown-item command="color">更换颜色</el-dropdown-item>
-              <el-dropdown-item command="icon">更换图标</el-dropdown-item>
-              <el-dropdown-item v-if="dimensions.length > 1" command="delete" divided>删除此维度</el-dropdown-item>
-              <el-dropdown-item command="add">左侧添加维度</el-dropdown-item>
-              <el-dropdown-item command="addRight">右侧添加维度</el-dropdown-item>
-            </template>
-          </el-dropdown>
-        </div>
-        <div class="dim-body">
-          <div
-            v-for="(obj, oi) in dim.objectives" :key="oi"
-            :ref="el => setObjRef(`${dim.key}-${oi}`, el)"
-            class="objective-card"
-            :class="{
-              'linking-source': linkingFrom?.key === `${dim.key}-${oi}`,
-              'linking-target': linkingFrom && linkingFrom?.key !== `${dim.key}-${oi}`,
-              'obj-level-red': objectiveLevels[`${dim.key}-${oi}`] === 'red',
-              'obj-level-yellow': objectiveLevels[`${dim.key}-${oi}`] === 'yellow',
-              'obj-level-green': objectiveLevels[`${dim.key}-${oi}`] === 'green',
-            }"
-            @click="onObjClick(dim.key, oi, obj)"
-          >
-            <div class="obj-title">
-              <span class="obj-level-dot" :class="'dot-' + (objectiveLevels[`${dim.key}-${oi}`] || 'gray')"></span>
-              <el-icon v-if="obj.icon" style="margin-right:4px;"><component :is="iconMap[obj.icon]" /></el-icon>
-              {{ obj.name }}
-            </div>
-            <div v-if="obj.description" class="obj-desc">{{ obj.description }}</div>
-            <div class="obj-kpis">
-              <el-tag v-for="kpi in (obj.kpis||[])" :key="kpi" size="small"
-                style="margin:2px;cursor:pointer;"
-                @click.stop="goKPI(kpi)">
-                {{ kpi }}
-              </el-tag>
-            </div>
-            <!-- 操作按钮组 -->
-            <div class="obj-actions">
-              <el-button text size="small" @click.stop="editObjective(dim.key, oi, obj)" title="编辑目标">✏️</el-button>
-              <el-button text size="small" @click.stop="deleteObjective(dim.key, oi)" title="删除目标" style="color:#f56c6c;">🗑️</el-button>
-              <span class="link-btn" @click.stop="startLink(dim.key, oi, obj)" title="从此目标创建因果连线">↗</span>
-            </div>
+    <!-- 画布主体（纵向泳道布局，CSS zoom缩放） -->
+    <div class="canvas-scroll-wrap" ref="scrollWrapRef" :style="{ zoom: zoomLevel }">
+      <div class="canvas-body" ref="bodyRef">
+        <!-- 四层泳道（纵向排列，固定顺序：财务→客户→流程→学习） -->
+        <div
+          v-for="(cfg, idx) in orderedLayerConfigs"
+          :key="cfg.key"
+          :ref="el => setLayerRef(cfg.key, el)"
+          class="layer-swimlane-wrapper"
+          :style="{ borderLeft: '4px solid ' + cfg.color }"
+        >
+          <StrategyLayer
+            :ref="el => setLayerCompRef(cfg.key, el)"
+            :layer-key="cfg.key"
+            :label="cfg.label"
+            :icon="cfg.icon"
+            :color="cfg.color"
+            :objectives="getLayerNodes(cfg.key)"
+            :linking-from-key="linkingFrom?.key ?? null"
+            :drag-connect-target="dragConnectTarget"
+            :icon-map="iconMap"
+            :kpi-name-map="kpiNameMap"
+            :all-kpis="allKpis"
+            :get-node-level="getNodeLevel"
+            :get-node-progress="getNodeProgress"
+            @add-objective="(k: string) => openAddDialog(k)"
+            @edit-objective="(p: any) => openEditDialog(p.dimKey, p.idx, p.obj)"
+            @delete-objective="(p: any) => deleteNode(p.dimKey, p.idx)"
+            @start-link="(p: any) => { const ps = p.key.split('-'); startLink(ps[0], parseInt(ps[ps.length-1]), p.obj) }"
+            @link-drag-start="(e: MouseEvent, dk: string, oi: number, obj: any) => onLinkDragStart(e, dk, oi, obj)"
+            @kpi-click="(code: string) => goKPI(code)"
+            @show-plan-list="(p: any) => showPlanList(p.dimKey, p.idx, p.obj)"
+            @node-click="(dk: string, oi: number, obj: any) => onNodeClick(dk, oi, obj)"
+            @reorder="(dk: string) => onLayerReorder(dk)"
+          />
+
+          <!-- 跨层箭头指示器（本层→下层） -->
+          <div v-if="idx < orderedLayerConfigs.length - 1" class="cross-layer-arrow">
+            <svg width="24" height="32" viewBox="0 0 24 32">
+              <line x1="12" y1="0" x2="12" y2="24" stroke="#909399" stroke-width="2" stroke-dasharray="4,3" />
+              <polygon points="4,22 12,30 20,22" fill="#909399" />
+            </svg>
           </div>
-          <el-button text type="primary" size="small" style="margin-top:8px;width:100%;" @click="addObjective(dim.key)">
-            + 添加目标
-          </el-button>
+        </div>
+      </div><!-- end canvas-body -->
+    </div><!-- end canvas-scroll-wrap -->
+
+    <!-- SVG 连线层 （覆盖整个画布，绘制跨层+同层箭头） -->
+    <ConnectionLines
+      ref="connectionLinesRef"
+      :layer-refs="layerRefs"
+      :node-refs="nodeRefs"
+      :layer-keys="layerKeysOrdered"
+      :connections="connections"
+      :temp-line="tempLine"
+      :container-key="recalcTrigger"
+      @select-connection="onSelectConnection"
+      @delete-connection="onDeleteConnection"
+    />
+
+    <!-- 节点编辑弹窗 -->
+    <NodeEditDialog
+      :visible="showNodeDialog"
+      :node-data="editingNodeData"
+      :layer-key="editingLayerKey"
+      @update:visible="showNodeDialog = $event"
+      @save="onNodeSave"
+    />
+
+    <!-- 版本历史弹窗 -->
+    <div v-if="showVersions" class="mc-dialog-overlay" @click.self="showVersions=false">
+      <div class="mc-dialog-box" style="width:620px;">
+        <div class="mc-dialog-header">
+          <span>版本历史</span>
+          <button class="mc-dialog-close" @click="showVersions=false">×</button>
+        </div>
+        <div class="mc-dialog-body" style="max-height:400px;overflow-y:auto;">
+          <table class="mc-table" v-if="versions.length > 0">
+            <thead><tr><th>说明</th><th>创建时间</th><th>操作</th></tr></thead>
+            <tbody>
+              <tr v-for="v in versions" :key="v.id">
+                <td>{{ v.comment || '-' }}</td>
+                <td>{{ v.created_at }}</td>
+                <td><button class="mc-btn mc-btn-sm mc-btn-warn" @click="rollback(v.id)">回滚</button></td>
+              </tr>
+            </tbody>
+          </table>
+          <div v-else style="text-align:center;color:#999;padding:20px;">暂无版本记录</div>
         </div>
       </div>
     </div>
 
-    <!-- 添加/编辑目标弹窗 -->
-    <el-dialog v-model="showDialog" :title="editingIndex >= 0 ? '编辑目标' : '添加目标'" width="500">
-      <el-form :model="editForm" label-width="100px">
-        <el-form-item label="目标名称"><el-input v-model="editForm.name" /></el-form-item>
-        <el-form-item label="描述"><el-input v-model="editForm.description" type="textarea" rows="3" /></el-form-item>
-        <el-form-item label="图标">
-          <el-select v-model="editForm.icon" style="width:100%;">
-            <el-option v-for="(ico, key) in iconOptions" :key="key" :label="ico" :value="key">
-              <el-icon style="margin-right:6px;"><component :is="iconMap[key]" /></el-icon>{{ ico }}
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="关联KPI">
-          <div class="kpi-select-wrap">
-            <el-select v-model="editForm.kpis" multiple filterable style="flex:1;" :max="3"
-              popper-class="dialog-select-popper">
-              <el-option v-for="k in allKpis" :key="k.id" :label="k.kpi_name" :value="k.kpi_code" />
-            </el-select>
-            <el-button size="small" @click="$router.push('/kpis')" style="margin-left:4px;">管理KPI</el-button>
+    <!-- KPI详情浮层 -->
+    <div v-if="showKpiDetail" class="mc-dialog-overlay" @click.self="showKpiDetail=false">
+      <div class="mc-dialog-box" style="width:560px;">
+        <div class="mc-dialog-header">
+          <span>📊 {{ kpiDetailObjName }} — KPI详情</span>
+          <button class="mc-dialog-close" @click="showKpiDetail=false">×</button>
+        </div>
+        <div class="mc-dialog-body" style="max-height:360px;overflow-y:auto;">
+          <div v-if="kpiDetailList.length === 0" style="text-align:center;color:#999;padding:20px;">
+            该目标暂未关联KPI
           </div>
-          <span v-if="editForm.kpis.length >= 3" style="color:#e6a23c;font-size:12px;">每个目标最多绑定3个KPI</span>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="showDialog=false">取消</el-button>
-        <el-button type="primary" @click="saveObjective">保存</el-button>
-      </template>
-    </el-dialog>
+          <div v-for="(item, idx) in kpiDetailList" :key="idx" class="kpi-detail-card" :class="'kpi-detail-' + getKpiLevel(item)">
+            <div class="kpi-detail-top">
+              <span class="kpi-detail-badge">{{ badgeIcon(getKpiLevel(item)) }}</span>
+              <span class="kpi-detail-code">{{ item.code }}</span>
+              <span class="kpi-detail-name">{{ item.name }}</span>
+            </div>
+            <div class="kpi-detail-values">
+              <div class="kdv-item">
+                <span class="kdv-label">实际值</span>
+                <span class="kdv-val">{{ item.actual != null ? fmtKpiVal(item.actual) : '—' }}</span>
+              </div>
+              <div class="kdv-item">
+                <span class="kdv-label">目标值</span>
+                <span class="kdv-val">{{ item.target != null ? fmtKpiVal(item.target) : '—' }}</span>
+              </div>
+              <div v-if="item.actual != null && item.target" class="kdv-item">
+                <span class="kdv-label">达成率</span>
+                <span class="kdv-val" :style="{ color: getKpiLevel(item) === 'red' ? '#f56c6c' : getKpiLevel(item) === 'yellow' ? '#e6a23c' : '#67c23a' }">
+                  {{ (item.actual / item.target * 100).toFixed(1) }}%
+                </span>
+              </div>
+              <div v-if="item.unit" class="kdv-item">
+                <span class="kdv-label">单位</span>
+                <span class="kdv-val">{{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="mc-dialog-footer">
+          <el-button size="small" @click="showKpiDetail=false">关闭</el-button>
+          <el-button size="small" type="primary" @click="editKpiDetailObj">编辑目标</el-button>
+        </div>
+      </div>
+    </div>
 
-    <!-- 版本历史 -->
-    <el-dialog v-model="showVersions" title="版本历史" width="600">
-      <el-table :data="versions" style="width:100%">
-        <el-table-column prop="comment" label="说明" min-width="200" />
-        <el-table-column prop="created_at" label="创建时间" width="180" />
-        <el-table-column label="操作" width="100">
-          <template #default="{ row }">
-            <el-button size="small" type="warning" @click="rollback(row.id)">回滚</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-dialog>
+    <!-- 行动方案列表弹窗 -->
+    <div v-if="showPlanPopup" class="mc-dialog-overlay" @click.self="showPlanPopup=false">
+      <div class="mc-dialog-box" style="width:600px;">
+        <div class="mc-dialog-header">
+          <span>📋 {{ planPopupObjName }} — 关联行动方案</span>
+          <button class="mc-dialog-close" @click="showPlanPopup=false">×</button>
+        </div>
+        <div class="mc-dialog-body" style="max-height:400px;overflow-y:auto;">
+          <div v-if="planPopupList.length === 0" style="text-align:center;color:#999;padding:20px;">
+            暂无关联的行动方案
+          </div>
+          <div v-for="p in planPopupList" :key="p.id" class="plan-popup-card">
+            <div class="plan-popup-top">
+              <span class="plan-popup-status" :class="'pps-' + p.status">{{ planStatusLabel(p.status) }}</span>
+              <span class="plan-popup-title">{{ p.title }}</span>
+            </div>
+            <div class="plan-popup-meta">
+              <span v-if="p.assignee">👤 {{ p.assignee }}</span>
+              <span v-if="p.due_date">📅 {{ p.due_date.slice(0, 10) }}</span>
+              <span v-if="p.progress > 0">进度 {{ p.progress }}%</span>
+            </div>
+          </div>
+        </div>
+        <div class="mc-dialog-footer">
+          <el-button size="small" @click="showPlanPopup=false">关闭</el-button>
+          <el-button size="small" type="primary" @click="quickCreatePlan">+ 新建行动方案</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- P1-3: 关联知识点 -->
+  <div style="margin-top:12px;">
+    <KnowledgePanel related-page="/maps" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, nextTick, onUnmounted } from "vue"
+import { ref, reactive, computed, onMounted, nextTick, onUnmounted } from "vue"
 import { ElMessage, ElMessageBox } from "element-plus"
-import { MoreFilled } from "@element-plus/icons-vue"
 import { mapApi, kpiApi } from "../api/index"
+import KnowledgePanel from '../components/KnowledgePanel.vue'
 import api from "../api/index"
+import { LAYER_CONFIG, LAYER_KEYS, getLayerList } from "../config/layers"
+import StrategyLayer from "../components/strategy-map/StrategyLayer.vue"
+import NodeEditDialog from "../components/strategy-map/NodeEditDialog.vue"
+import ConnectionLines from "../components/strategy/ConnectionLines.vue"
 
-// ── 维度配置（动态从后端加载） ──
-const DEFAULT_DIMENSIONS = [
-  { key: "finance", label: "财务维度", icon: "💰", color: "#409eff", objectives: [] as any[] },
-  { key: "customer", label: "客户维度", icon: "🤝", color: "#67c23a", objectives: [] as any[] },
-  { key: "process", label: "内部流程", icon: "⚙️", color: "#e6a23c", objectives: [] as any[] },
-  { key: "learning", label: "学习成长", icon: "📚", color: "#f56c6c", objectives: [] as any[] },
-]
-const dimensions = reactive<any[]>([])
-const editingDimIdx = ref(-1)
-
-// 用默认值初始化
-DEFAULT_DIMENSIONS.forEach(d => dimensions.push({ ...d, objectives: [] }))
-
-// ── 维度操作方法 ──
-function startEditDim(idx: number) {
-  editingDimIdx.value = idx
-}
-
-function dimAction(cmd: string, idx: number) {
-  switch (cmd) {
-    case "rename":
-      editingDimIdx.value = idx
-      break
-    case "color": {
-      const colors = ["#409eff", "#67c23a", "#e6a23c", "#f56c6c", "#909399", "#9b59b6", "#1abc9c", "#e74c3c"]
-      const cur = dimensions[idx].color
-      const nextIdx = (colors.indexOf(cur) + 1) % colors.length
-      dimensions[idx].color = colors[nextIdx]
-      break
-    }
-    case "icon": {
-      const icons = ["💰", "🤝", "⚙️", "📚", "📊", "🎯", "🛡️", "⭐", "📈", "🔬"]
-      const cur = dimensions[idx].icon
-      const nextIdx = (icons.indexOf(cur) + 1) % icons.length
-      dimensions[idx].icon = icons[nextIdx]
-      break
-    }
-    case "delete":
-      dimensions.splice(idx, 1)
-      break
-    case "add": {
-      const key = "dim_" + Date.now()
-      dimensions.splice(idx, 0, {
-        key, label: "新维度", icon: "📊", color: "#909399", objectives: [],
-      })
-      editingDimIdx.value = idx
-      break
-    }
-    case "addRight": {
-      const key = "dim_" + Date.now()
-      dimensions.splice(idx + 1, 0, {
-        key, label: "新维度", icon: "📊", color: "#909399", objectives: [],
-      })
-      editingDimIdx.value = idx + 1
-      break
-    }
-  }
-}
-
-const iconOptions: Record<string, string> = {
-  target: "目标", star: "星级", rocket: "火箭", chart: "图表", team: "团队",
-  light: "灯泡", shield: "盾牌", gear: "齿轮", handshake: "握手", medal: "奖牌",
-}
-const iconMap: Record<string, string> = {
-  target: "Star", star: "StarFilled", rocket: "Top", chart: "DataLine",
-  team: "UserFilled", light: "Lightning", shield: "Shield", gear: "Setting",
-  handshake: "Handshake", medal: "Trophy",
-}
+// ── 四层泳道配置 ──
+const layerKeysOrdered = [...LAYER_KEYS]
+const orderedLayerConfigs = getLayerList()
 
 // ── 状态 ──
 const maps = ref<any[]>([])
 const selectedMap = ref<number | null>(null)
 const currentMap = ref<any>(null)
 const allKpis = ref<any[]>([])
-const showDialog = ref(false)
-const editingDim = ref("")
-const editingIndex = ref(-1)
-const editForm = reactive({ name: "", description: "", icon: "target", kpis: [] as string[] })
-const showVersions = ref(false)
-const versions = ref<any[]>([])
-const connections = ref<any[]>([])  // [{from, to, style}]
-// 目标红黄绿灯状态
+const kpiNameMap = reactive<Record<string, string>>({})
+
+// 维度数据（对应backend的dimensions）
+const dimensions = reactive<any[]>([])
+const loading = ref(true)
+
+// 连线
+const connections = ref<any[]>([])
+const linkingFrom = ref<{ key: string; obj: any } | null>(null)
+const tempLine = ref<{ x1: number; y1: number; x2: number; y2: number } | null>(null)
+const dragConnectTarget = ref<string | null>(null)
+const selectedConnIdx = ref<number | null>(null)
+
+// 缩放
+const zoomLevel = ref(1)
+const scrollWrapRef = ref<HTMLElement | null>(null)
+
+// 节点状态（红黄绿灯）
 const objectiveLevels = reactive<Record<string, string>>({})
 
-// 连线交互
-const linkingFrom = ref<{ key: string; obj: any } | null>(null)
-const selectedConnIdx = ref<number | null>(null)
-const tempLine = ref<{ x1: number; y1: number; x2: number; y2: number } | null>(null)
+interface KpiProgressItem {
+  ratio: number
+  level: string
+  kpiList: { code: string; name: string; actual: number|null; target: number|null; unit: string|null }[]
+  planSummary: { total: number; pending: number; in_progress: number; completed: number; overdue: number } | null
+}
+const kpiProgressMap = reactive<Record<string, KpiProgressItem>>({})
 
-// DOM 引用
+// 弹窗
+const showNodeDialog = ref(false)
+const editingNodeData = ref<any>(null)
+const editingLayerKey = ref('')
+const showVersions = ref(false)
+const versions = ref<any[]>([])
+
+// DOM引用
 const bodyRef = ref<HTMLElement | null>(null)
-const svgRef = ref<SVGSVGElement | null>(null)
-const dimRefs: Record<string, HTMLElement> = {}
-const objRefs: Record<string, HTMLElement> = {}
+const layerRefs: Record<string, HTMLElement> = {}
+const nodeRefs: Record<string, HTMLElement> = {}
+const connectionLinesRef = ref<any>(null)
+const recalcTrigger = ref(0)
 
-function setDimRef(key: string, el: any) { if (el) dimRefs[key] = el }
-function setObjRef(key: string, el: any) { if (el) objRefs[key] = el }
-
-// 计算连线在 SVG 中的坐标
-const connectionLines = ref<any[]>([])
-
-function recalcLines() {
-  if (!svgRef.value || !bodyRef.value) { connectionLines.value = []; return }
-  const svgRect = svgRef.value.getBoundingClientRect()
-  const bodyRect = bodyRef.value.getBoundingClientRect()
-
-  connectionLines.value = connections.value.map(c => {
-    const fromEl = objRefs[c.from]
-    const toEl = objRefs[c.to]
-    if (!fromEl || !toEl) return { x1: 0, y1: 0, x2: 0, y2: 0, mx: 0, my: 0, fromColor: '#999', toColor: '#999' }
-
-    const fr = fromEl.getBoundingClientRect()
-    const tr = toEl.getBoundingClientRect()
-    const dimKey = c.from.split('-')[0]
-    const toDimKey = c.to.split('-')[0]
-    const fromDim = dimensions.find(d => d.key === dimKey)
-    const toDim = dimensions.find(d => d.key === toDimKey)
-
-    // 从右侧中点 → 左侧中点
-    const x1 = fr.right - bodyRect.left
-    const y1 = fr.top + fr.height / 2 - bodyRect.top
-    const x2 = tr.left - bodyRect.left
-    const y2 = tr.top + tr.height / 2 - bodyRect.top
-
-    return {
-      x1, y1, x2, y2,
-      mx: (x1 + x2) / 2,
-      my: (y1 + y2) / 2,
-      fromColor: fromDim?.color || '#999',
-      toColor: toDim?.color || '#999',
-    }
-  })
+// 泳道组件实例引用（用于汇聚各层内部的nodeRefs给ConnectionLines）
+const layerCompRefs: Record<string, any> = {}
+function setLayerCompRef(key: string, el: any) {
+  if (el) layerCompRefs[key] = el
 }
 
-let resizeObserver: ResizeObserver | null = null
+/** 从四个泳道组件汇聚所有节点DOM引用用于连线渲染，同步到nodeRefs */
+function collectAllNodeRefs(): Record<string, any> {
+  void (0) // keep as side-effect function
+  // 清空旧refs
+  Object.keys(nodeRefs).forEach(k => delete (nodeRefs as any)[k])
+  // 从各泳道组件汇聚
+  for (const key of layerKeysOrdered) {
+    const comp = layerCompRefs[key]
+    if (comp?.nodeRefs) {
+      Object.assign(nodeRefs, comp.nodeRefs)
+    }
+  }
+  return nodeRefs
+}
 
-// ── 核心操作 ──
+// 拖拽引用（由 vuedraggable 接管，内部不维护）
+
+// KPI详情浮层
+const showKpiDetail = ref(false)
+const kpiDetailObjName = ref("")
+const kpiDetailDimKey = ref("")
+const kpiDetailObjIdx = ref(-1)
+const kpiDetailList = ref<any[]>([])
+
+// 行动方案弹窗
+const showPlanPopup = ref(false)
+const planPopupObjName = ref("")
+const planPopupDimKey = ref("")
+const planPopupObjIdx = ref(-1)
+const planPopupList = ref<any[]>([])
+
+// ── 图标映射（从旧MapCanvas复用） ──
+const iconMap: Record<string, string> = {
+  target: "Star", star: "StarFilled", rocket: "Top", chart: "DataLine",
+  team: "UserFilled", light: "Lightning", shield: "Shield", gear: "Setting",
+  handshake: "Handshake", medal: "Trophy",
+}
+
+// ── 辅助方法 ──
+function getLayerNodes(key: string): any[] {
+  const dim = dimensions.find((d: any) => d.key === key)
+  return dim?.objectives || []
+}
+
+function setLayerRef(key: string, el: any) {
+  if (el) layerRefs[key] = el
+}
+
+function getNodeLevel(key: string): string {
+  return objectiveLevels[key] || 'gray'
+}
+function getNodeProgress(key: string): any {
+  return kpiProgressMap[key] || null
+}
+
+/** 确保dimensions中存在所有4层 */
+function ensureFourLayers() {
+  for (const cfg of orderedLayerConfigs) {
+    if (!dimensions.find((d: any) => d.key === cfg.key)) {
+      dimensions.push({
+        key: cfg.key,
+        name: cfg.label,
+        label: cfg.label,
+        icon: cfg.icon,
+        color: cfg.color,
+        objectives: [],
+      })
+    }
+  }
+}
+
+// ── 缩放 ──
+function zoomIn() { zoomLevel.value = Math.min(1.5, Math.round((zoomLevel.value + 0.1) * 10) / 10) }
+function zoomOut() { zoomLevel.value = Math.max(0.5, Math.round((zoomLevel.value - 0.1) * 10) / 10) }
+function zoomReset() { zoomLevel.value = 1 }
+
+// ── 画布加载 ──
 function loadCanvas() {
   if (!selectedMap.value) return
-  for (const dim of dimensions) { dim.objectives = [] }
+  dimensions.splice(0, dimensions.length)
   connections.value = []
   linkingFrom.value = null
   selectedConnIdx.value = null
+  loading.value = true
 
   api.get("/maps").then((r: any) => {
     const data = r.data || []
@@ -334,19 +379,35 @@ function loadCanvas() {
     currentMap.value = map
     if (map?.dimensions) {
       for (const dim of map.dimensions) {
-        const target = dimensions.find((d: any) => d.key === dim.key || d.label === dim.name)
-        if (target) {
-          target.objectives = dim.objectives || []
-          target.icon = dim.icon || target.icon
-          target.color = dim.color || target.color
-        }
+        dimensions.push({
+          key: dim.key,
+          label: dim.name || dim.label,
+          icon: dim.icon || '📋',
+          color: dim.color || LAYER_CONFIG[dim.key]?.color || '#409eff',
+          objectives: dim.objectives || [],
+        })
       }
     }
+    // 确保四层都存在
+    ensureFourLayers()
     connections.value = map?.canvas_data?.connections || []
-    nextTick(recalcLines)
+    loading.value = false
+    nextTick(() => {
+      triggerRecalc()
+      loadObjectiveLevels()
+    })
+  }).catch(() => {
+    ensureFourLayers()
+    loading.value = false
+  })
+}
 
-    // 加载目标状态（红黄绿灯）
-    loadObjectiveLevels()
+// ── 触发连线重算 ──
+function triggerRecalc() {
+  recalcTrigger.value++
+  collectAllNodeRefs()
+  nextTick(() => {
+    connectionLinesRef.value?.recalcAll()
   })
 }
 
@@ -359,151 +420,246 @@ function startLink(dimKey: string, oi: number, obj: any) {
 function cancelLink() {
   linkingFrom.value = null
   tempLine.value = null
+  dragConnectTarget.value = null
 }
 
-function onObjClick(dimKey: string, oi: number, obj: any) {
+function onNodeClick(dimKey: string, oi: number, obj: any) {
   const key = `${dimKey}-${oi}`
-
-  // 如果正在连线模式
+  // 连线模式
   if (linkingFrom.value) {
     if (linkingFrom.value.key === key) { cancelLink(); return }
-
-    // 校验规则
-    const fromDim = linkingFrom.value.key.split('-')[0]
-    const toDim = key.split('-')[0]
-    if (fromDim === toDim) { ElMessage.warning("同维度内不能连线"); return }
-
-    // 检查重复
-    if (connections.value.some((c: any) => c.from === linkingFrom.value.key && c.to === key)) {
-      ElMessage.warning("已存在相同连线"); cancelLink(); return
-    }
-
-    // 调用后端API
-    api.post(`/maps/${selectedMap.value}/connections`, {
-      from: linkingFrom.value.key,
-      to: key,
-    }).then(() => {
-      ElMessage.success("连线已添加")
-      // 本地追加并保存全量到后端
-      connections.value.push({ from: linkingFrom.value!.key, to: key, style: "solid" })
-      cancelLink()
-      nextTick(() => { recalcLines(); saveConnections() })
-    }).catch((e: any) => {
-      // 后端失败时本地加（降级）
-      if (e?.response?.status !== 400) {
-        connections.value.push({ from: linkingFrom.value!.key, to: key, style: "solid" })
-        ElMessage.success("连线已添加（本地）")
-      } else {
-        ElMessage.warning(e?.response?.data?.detail || "连线失败")
-      }
-      cancelLink()
-      nextTick(recalcLines)
-    })
+    completeConnection(linkingFrom.value.key, key)
     return
   }
+  // 有KPI则展示详情
+  if (kpiProgressMap[key]?.kpiList?.length > 0) {
+    showKpiDetailModal(dimKey, oi, obj)
+  } else {
+    openEditDialog(dimKey, oi, obj)
+  }
+}
 
-  // 非连线模式：编辑目标
-  editObjective(dimKey, oi, obj)
+/**
+ * 层内重排完成回调 — 由 vuedraggable 在拖拽排序后触发
+ * SortableJS 已通过 :list 引用直接更新了响应式数组，
+ * 这里只需触发连线重算和自动保存
+ */
+function onLayerReorder(dimKey: string) {
+  nextTick(() => {
+    triggerRecalc()
+    debouncedSaveCanvas()
+  })
+}
+
+function completeConnection(fromKey: string, toKey: string) {
+  const fromDim = fromKey.split('-')[0]
+  const toDim = toKey.split('-')[0]
+  if (fromDim === toDim) {
+    // 同层连线 -> 同层右侧箭头
+  }
+  // 检查重复
+  if (connections.value.some((c: any) => c.from === fromKey && c.to === toKey)) {
+    ElMessage.warning("已存在相同连线"); cancelLink(); return
+  }
+  api.post(`/maps/${selectedMap.value}/connections`, {
+    from: fromKey, to: toKey,
+  }).then(() => {
+    ElMessage.success("连线已添加")
+    connections.value.push({ from: fromKey, to: toKey, style: "solid" })
+    cancelLink()
+    nextTick(() => { triggerRecalc(); saveConnections() })
+  }).catch((e: any) => {
+    if (e?.response?.status !== 400) {
+      connections.value.push({ from: fromKey, to: toKey, style: "solid" })
+      ElMessage.success("连线已添加（本地）")
+    } else {
+      ElMessage.warning(e?.response?.data?.detail || "连线失败")
+    }
+    cancelLink()
+    nextTick(triggerRecalc)
+  })
 }
 
 // 跳转KPI详情
 function goKPI(kpiCode: string) {
   const found = allKpis.value.find((k: any) => k.kpi_code === kpiCode)
-  if (found) {
-    window.location.href = '/kpis/' + found.id
-  } else {
-    window.location.href = '/kpis'
-  }
+  window.location.href = found ? '/kpis/' + found.id : '/kpis'
 }
 
-// 删除目标
-async function deleteObjective(dimKey: string, oi: number) {
-  try {
-    await ElMessageBox.confirm("确定要删除这个目标吗？", "确认删除")
-    const dim = dimensions.find((d: any) => d.key === dimKey)
-    if (dim) {
-      dim.objectives.splice(oi, 1)
-      ElMessage.success("目标已删除")
+// ── 拖拽连线的鼠标跟踪 ──
+function onLinkDragStart(e: MouseEvent, dimKey: string, oi: number, obj: any) {
+  const startX = e.clientX
+  const startY = e.clientY
+  startLink(dimKey, oi, obj)
+  const onUp = (up: MouseEvent) => {
+    document.removeEventListener('mouseup', onUp)
+    const dist = Math.hypot(up.clientX - startX, up.clientY - startY)
+    if (dist >= 5 && linkingFrom.value) {
+      let targetKey: string | null = null
+      for (const key of Object.keys(nodeRefs)) {
+        if (key === linkingFrom.value.key) continue
+        const el = nodeRefs[key]
+        if (!el) continue
+        const rect = el.getBoundingClientRect()
+        if (up.clientX >= rect.left && up.clientX <= rect.right &&
+            up.clientY >= rect.top && up.clientY <= rect.bottom) {
+          targetKey = key; break
+        }
+      }
+      if (targetKey) {
+        const parts = targetKey.split('-')
+        const tDim = parts[0]
+        const tIdx = parseInt(parts[1])
+        const dim = dimensions.find((d: any) => d.key === tDim)
+        if (dim && dim.objectives[tIdx]) {
+          completeConnection(linkingFrom.value.key, targetKey)
+        }
+      }
+      cancelLink()
     }
-  } catch { /* cancel */ }
+    dragConnectTarget.value = null
+  }
+  document.addEventListener('mouseup', onUp)
 }
 
-function selectConnection(idx: number) {
+function onSelectConnection(idx: number) {
   selectedConnIdx.value = selectedConnIdx.value === idx ? null : idx
 }
 
-function deleteConnection(idx: number) {
+function onDeleteConnection(idx: number) {
   if (selectedConnIdx.value !== idx) return
   const conn = connections.value[idx]
   if (!conn) return
-
-  // 通过 from/to 标识删除，不用索引
   api.delete(`/maps/${selectedMap.value}/connections`, {
     data: { from: conn.from, to: conn.to },
   }).then(() => {
     ElMessage.success("连线已删除")
     connections.value.splice(idx, 1)
     selectedConnIdx.value = null
-    nextTick(recalcLines)
+    nextTick(triggerRecalc)
   }).catch(() => {
-    // 后端失败时本地直接删
     connections.value.splice(idx, 1)
     selectedConnIdx.value = null
-    nextTick(recalcLines)
+    nextTick(triggerRecalc)
   })
 }
 
-// 鼠标移动跟踪（临时连线）
-function onMouseMove(e: MouseEvent) {
-  if (!linkingFrom.value || !bodyRef.value) { tempLine.value = null; return }
-  const fromEl = objRefs[linkingFrom.value.key]
-  if (!fromEl) return
-  const bodyRect = bodyRef.value.getBoundingClientRect()
-  const fr = fromEl.getBoundingClientRect()
-  tempLine.value = {
-    x1: fr.right - bodyRect.left,
-    y1: fr.top + fr.height / 2 - bodyRect.top,
-    x2: e.clientX - bodyRect.left,
-    y2: e.clientY - bodyRect.top,
+// ── 节点CRUD ──
+function openAddDialog(layerKey: string) {
+  editingLayerKey.value = layerKey
+  editingNodeData.value = null
+  showNodeDialog.value = true
+}
+
+function openEditDialog(dimKey: string, oi: number, obj: any) {
+  editingLayerKey.value = dimKey
+  editingNodeData.value = {
+    id: obj.id,
+    name: obj.name,
+    targetValue: obj.targetValue ?? obj.target_value ?? null,
+    currentValue: obj.currentValue ?? obj.current_value ?? null,
+    unit: obj.unit || '%',
+    owner: obj.owner || '',
+    isLeading: obj.isLeading ?? obj.is_leading ?? false,
+    description: obj.description || '',
   }
+  // 保存编辑索引以便更新
+  editingNodeData.value._dimKey = dimKey
+  editingNodeData.value._index = oi
+  showNodeDialog.value = true
 }
 
-// ── 目标 CRUD ──
-function addObjective(dimKey: string) {
-  editingDim.value = dimKey
-  editingIndex.value = -1
-  editForm.name = ""
-  editForm.description = ""
-  editForm.icon = "target"
-  editForm.kpis = []
-  showDialog.value = true
-}
-
-function editObjective(dimKey: string, idx: number, obj: any) {
-  editingDim.value = dimKey
-  editingIndex.value = idx
-  editForm.name = obj.name
-  editForm.description = obj.description || ""
-  editForm.icon = obj.icon || "target"
-  editForm.kpis = obj.kpis || []
-  showDialog.value = true
-}
-
-function saveObjective() {
-  if (!editForm.name) { ElMessage.warning("请输入目标名称"); return }
-  const dim = dimensions.find((d: any) => d.key === editingDim.value)
+function onNodeSave(data: any) {
+  const dim = dimensions.find((d: any) => d.key === data.layer)
   if (!dim) return
-  if (editingIndex.value >= 0) {
-    dim.objectives[editingIndex.value] = { name: editForm.name, description: editForm.description, icon: editForm.icon, kpis: [...editForm.kpis] }
+
+  // 构建节点对象
+  const node = {
+    name: data.name,
+    targetValue: data.targetValue,
+    currentValue: data.currentValue,
+    unit: data.unit,
+    owner: data.owner,
+    isLeading: data.isLeading,
+    description: data.description || '',
+    layer: data.layer,
+  }
+
+  if (editingNodeData.value?._index != null && editingNodeData.value._dimKey === data.layer) {
+    // 编辑已有节点
+    const idx = editingNodeData.value._index
+    if (dim.objectives[idx]) {
+      // 保留原有kpis等额外字段
+      const extra = {
+        kpis: dim.objectives[idx].kpis || [],
+        icon: dim.objectives[idx].icon || 'target',
+      }
+      dim.objectives[idx] = { ...node, ...extra }
+      ElMessage.success("节点已更新")
+    }
   } else {
-    dim.objectives.push({ name: editForm.name, description: editForm.description, icon: editForm.icon, kpis: [...editForm.kpis] })
+    // 新增节点
+    dim.objectives.push({
+      ...node,
+      kpis: [],
+      icon: 'target',
+    })
+    ElMessage.success("节点已添加")
+  }
+
+  editingNodeData.value = null
+  debouncedSaveCanvas()
+  nextTick(triggerRecalc)
+}
+
+async function deleteNode(dimKey: string, oi: number) {
+  try {
+    await ElMessageBox.confirm("确定要删除这个节点吗？", "确认删除")
+    const dim = dimensions.find((d: any) => d.key === dimKey)
+    if (dim) {
+      const key = `${dimKey}-${oi}`
+      connections.value = connections.value.filter(c => c.from !== key && c.to !== key)
+      dim.objectives.splice(oi, 1)
+      ElMessage.success("节点已删除")
+      nextTick(() => { triggerRecalc(); debouncedSaveCanvas() })
+    }
+  } catch { /* cancel */ }
+}
+
+// ── 保存 ──
+let saveTimer: ReturnType<typeof setTimeout> | null = null
+let isSaving = false
+
+function debouncedSaveCanvas() {
+  if (isSaving) return
+  if (saveTimer) clearTimeout(saveTimer)
+  saveTimer = setTimeout(() => { saveCanvas() }, 500)
+}
+
+async function saveCanvas() {
+  if (!selectedMap.value) return
+  if (isSaving) return
+  isSaving = true
+  const mapData = dimensions.map((d: any) => ({
+    key: d.key, name: d.label || d.name, icon: d.icon, color: d.color,
+    objectives: d.objectives,
+  }))
+  try {
+    await mapApi.update(selectedMap.value, {
+      dimensions: mapData,
+      canvas_data: { connections: connections.value },
+      version_num: currentMap.value?.version_num,
+    })
+    ElMessage.success("已保存")
+  } catch (e: any) {
+    if (e?.response?.status === 409) {
+      ElMessage.warning("地图已被修改，刷新后重试")
+    } else {
+      console.error("saveCanvas error:", e)
+    }
+  } finally {
+    isSaving = false
   }
-  showDialog.value = false
-  saveCanvas()
-  // 强制刷新目标卡片DOM引用
-  nextTick(() => {
-    recalcLines()
-  })
 }
 
 async function saveConnections() {
@@ -515,36 +671,6 @@ async function saveConnections() {
   } catch { /* silent */ }
 }
 
-async function saveCanvas() {
-  if (!selectedMap.value) return
-  const mapData = dimensions.map((d: any) => ({
-    key: d.key, name: d.label, icon: d.icon, color: d.color, objectives: d.objectives,
-  }))
-  try {
-    await mapApi.update(selectedMap.value, {
-      dimensions: mapData,
-      canvas_data: { connections: connections.value },
-    })
-    // 保存后刷新objRefs
-    nextTick(() => {
-      for (const dim of dimensions) {
-        for (let i = 0; i < dim.objectives.length; i++) {
-          const key = `${dim.key}-${i}`
-          if (!objRefs[key]) {
-            // 新添加的目标可能还没被ref捕获，再等一帧
-            setTimeout(() => { recalcLines() }, 100)
-            return
-          }
-        }
-      }
-      recalcLines()
-    })
-  } catch (e: any) {
-    console.error("saveCanvas error:", e)
-    ElMessage.error("保存失败")
-  }
-}
-
 // ── 发布/版本 ──
 async function publishMap() {
   if (!selectedMap.value) return
@@ -563,9 +689,7 @@ async function loadVersions() {
   try {
     const r: any = await api.get(`/maps/${selectedMap.value}/versions`)
     versions.value = r.data || []
-  } catch (e) {
-    versions.value = []
-  }
+  } catch { versions.value = [] }
 }
 
 async function rollback(verId: number) {
@@ -579,57 +703,169 @@ async function rollback(verId: number) {
   }
 }
 
-// 加载目标红黄绿灯状态
+// ── 加载目标状态 ──
 async function loadObjectiveLevels() {
   if (!selectedMap.value) return
   try {
     const r: any = await api.get(`/maps/${selectedMap.value}/review`)
-    // 清空旧状态
-    for (const key of Object.keys(objectiveLevels)) {
-      delete objectiveLevels[key]
-    }
-    // 从review接口的维度数据中提取每个目标的状态
+    for (const key of Object.keys(objectiveLevels)) delete objectiveLevels[key]
+    for (const key of Object.keys(kpiProgressMap)) delete kpiProgressMap[key]
     const dims = r.dimensions || []
     for (const dim of dims) {
       const dimKey = dim.key
-      dim.objectives.forEach((obj: any, idx: number) => {
-        const key = `${dimKey}-${idx}`
-        objectiveLevels[key] = obj.level || 'gray'
+      const localDim = dimensions.find((d: any) => d.key === dimKey)
+      if (!localDim) continue
+      for (let i = 0; i < localDim.objectives.length; i++) {
+        const key = `${dimKey}-${i}`
+        kpiProgressMap[key] = { ratio: 0, level: 'gray', kpiList: [], planSummary: null }
+        objectiveLevels[key] = 'gray'
+      }
+      dim.objectives.forEach((obj: any) => {
+        const localIdx = localDim.objectives.findIndex((o: any) => o.name === obj.name)
+        if (localIdx >= 0) {
+          const key = `${dimKey}-${localIdx}`
+          objectiveLevels[key] = obj.level || 'gray'
+          const kpis = obj.kpis || []
+          const kpiList: any[] = []
+          let totalRatio = 0
+          let count = 0
+          for (const k of kpis) {
+            kpiList.push({
+              code: k.kpi_code, name: k.kpi_name, actual: k.actual_value, target: k.target_value, unit: k.unit,
+            })
+            if (k.actual_value != null && k.target_value) {
+              totalRatio += k.actual_value / k.target_value; count++
+            }
+          }
+          if (kpiList.length > 0) {
+            kpiProgressMap[key] = {
+              ratio: count > 0 ? Math.round((totalRatio / count) * 100) : 0,
+              level: obj.level || 'gray', kpiList,
+              planSummary: obj.action_plan_summary || null,
+            }
+          } else if (obj.action_plan_summary?.total > 0) {
+            kpiProgressMap[key] = { ratio: 0, level: obj.level || 'gray', kpiList: [], planSummary: obj.action_plan_summary }
+          }
+        }
       })
     }
-  } catch (e) {
-    // 静默处理
+  } catch { /* silent */ }
+}
+
+// ── KPI详情浮层 ──
+function showKpiDetailModal(dimKey: string, oi: number, obj: any) {
+  const key = `${dimKey}-${oi}`
+  kpiDetailObjName.value = obj.name
+  kpiDetailDimKey.value = dimKey
+  kpiDetailObjIdx.value = oi
+  kpiDetailList.value = kpiProgressMap[key]?.kpiList || []
+  showKpiDetail.value = true
+}
+
+function editKpiDetailObj() {
+  showKpiDetail.value = false
+  const dim = dimensions.find((d: any) => d.key === kpiDetailDimKey.value)
+  if (dim && dim.objectives[kpiDetailObjIdx.value]) {
+    openEditDialog(kpiDetailDimKey.value, kpiDetailObjIdx.value, dim.objectives[kpiDetailObjIdx.value])
   }
 }
 
+function getKpiLevel(item: any): string {
+  if (item.actual != null && item.target) {
+    const ratio = item.actual / item.target
+    if (ratio >= 0.9) return 'green'
+    if (ratio >= 0.7) return 'yellow'
+    return 'red'
+  }
+  return 'gray'
+}
+
+function fmtKpiVal(val: any): string {
+  if (val == null) return '—'
+  if (typeof val === 'number') {
+    if (Math.abs(val) >= 10000) return (val / 10000).toFixed(1) + '万'
+    return val.toLocaleString()
+  }
+  return String(val)
+}
+
+function badgeIcon(level: string): string {
+  return level === 'green' ? '🟢' : level === 'yellow' ? '🟡' : level === 'red' ? '🔴' : '⚪'
+}
+
+// ── 行动方案 ──
+async function showPlanList(dimKey: string, oi: number, obj: any) {
+  planPopupObjName.value = obj.name
+  planPopupDimKey.value = dimKey
+  planPopupObjIdx.value = oi
+  planPopupList.value = []
+  try {
+    const r: any = await api.get(`/maps/${selectedMap.value}/review`)
+    const dims = r.dimensions || []
+    const allPlans = r.action_plans || []
+    for (const dim of dims) {
+      if (dim.key !== dimKey) continue
+      for (const robj of dim.objectives || []) {
+        if (robj.name !== obj.name) continue
+        const objKpiIds = (robj.kpis || []).map((k: any) => k.kpi_id)
+        planPopupList.value = allPlans.filter((p: any) => objKpiIds.includes(p.kpi_id))
+        break
+      }
+      break
+    }
+  } catch { /* silent */ }
+  showPlanPopup.value = true
+}
+
+function planStatusLabel(status: string): string {
+  const map: Record<string, string> = { pending: '待处理', in_progress: '进行中', completed: '已完成', cancelled: '已取消' }
+  return map[status] || status
+}
+
+function quickCreatePlan() {
+  showPlanPopup.value = false
+  window.location.href = `/action-plans?dimension=${planPopupDimKey.value}`
+}
+
+function goAlignment() {
+  const url = currentMap.value ? `/alignment?map_id=${currentMap.value.id}` : '/alignment'
+  window.location.href = url
+}
+
 onMounted(async () => {
   const r: any = await mapApi.list()
   maps.value = r.data || []
   if (maps.value.length > 0) {
     selectedMap.value = maps.value[0].id
     loadCanvas()
+  } else {
+    ensureFourLayers()
+    loading.value = false
   }
-  const k: any = await kpiApi.list()
+  const k: any = await kpiApi.list({ page_size: 100 })
   allKpis.value = k.data || []
-
-  // 监听鼠标移动画临时线
-  document.addEventListener("mousemove", onMouseMove)
-
-  // 监听窗口/列大小变化重新计算连线
-  resizeObserver = new ResizeObserver(() => nextTick(recalcLines))
-  if (bodyRef.value) resizeObserver.observe(bodyRef.value)
+  for (const kpi of allKpis.value) {
+    if (kpi.kpi_code) kpiNameMap[kpi.kpi_code] = kpi.kpi_name || kpi.kpi_code
+  }
+  window.addEventListener('resize', triggerRecalc)
 })
 
 onUnmounted(() => {
-  document.removeEventListener("mousemove", onMouseMove)
-  if (resizeObserver) resizeObserver.disconnect()
+  window.removeEventListener('resize', triggerRecalc)
+  if (saveTimer) clearTimeout(saveTimer)
 })
 </script>
 
 <style scoped>
+/* ── 页面布局 ── */
 .map-canvas-page { padding: 16px; height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
-.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-shrink: 0; }
+.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-shrink: 0; flex-wrap: wrap; gap: 8px; }
 .toolbar h3 { margin: 0; }
+.toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+
+.zoom-controls { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
+.zoom-controls .el-button { padding: 4px 8px !important; font-size: 13px; min-height: auto; }
+.zoom-label { display: inline-block; min-width: 32px; text-align: center; font-size: 12px; color: #666; font-variant-numeric: tabular-nums; }
 
 .linking-bar {
   display: flex; align-items: center; gap: 12px;
@@ -637,96 +873,107 @@ onUnmounted(() => {
   border-radius: 8px; margin-bottom: 8px; font-size: 14px; flex-shrink: 0;
 }
 
+.empty-state {
+  flex: 1; display: flex; align-items: center; justify-content: center;
+}
+
+/* ── 画布滚动容器 ── */
+.canvas-scroll-wrap {
+  flex: 1; min-height: 0; overflow: auto;
+  position: relative; width: 100%;
+}
+
 .canvas-body {
-  display: flex; gap: 12px; flex: 1; min-height: 0;
-  position: relative;
+  display: flex; flex-direction: column; gap: 0;
+  position: relative; isolation: isolate;
+  width: 100%; padding: 8px 0;
 }
 
-/* SVG 连线层 */
-.connection-svg {
-  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
-  z-index: 5; pointer-events: none;
+/* ── 泳道外层包装 ── */
+.layer-swimlane-wrapper {
+  width: 100%;
+  margin-bottom: 4px;
 }
-.conn-line {
-  cursor: pointer; transition: stroke .2s;
-  pointer-events: stroke;
-}
-.conn-line:hover { stroke: #e6a23c !important; stroke-width: 3; }
-.conn-selected { stroke: #f56c6c !important; stroke-width: 3; }
-.del-btn-circle { cursor: pointer; pointer-events: all; }
-.del-btn-text { cursor: pointer; pointer-events: all; user-select: none; }
 
-/* 四列 */
-.dimension-col {
-  flex: 1; min-width: 0;
-  border: 2px solid #e8e8e8; border-radius: 8px;
-  display: flex; flex-direction: column; background: #fafafa;
-  overflow-y: auto; position: relative; z-index: 1;
-}
-.dim-header {
-  padding: 10px; color: #fff; border-radius: 6px 6px 0 0;
-  text-align: center; font-weight: bold; display: flex;
-  align-items: center; justify-content: center; gap: 6px; font-size: 14px;
+/* ── 跨层箭头指示器 ── */
+.cross-layer-arrow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 32px;
   flex-shrink: 0;
-}
-.dim-body { padding: 10px; flex: 1; }
-
-.objective-card {
-  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
-  padding: 10px; margin-bottom: 8px; cursor: pointer;
-  transition: all 0.2s; position: relative;
-}
-.objective-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
-.objective-card.linking-source {
-  border-color: #e6a23c; box-shadow: 0 0 0 2px rgba(230,162,60,0.3);
-}
-.objective-card.linking-target:hover {
-  border-color: #67c23a; box-shadow: 0 0 0 2px rgba(103,194,58,0.3);
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-.obj-title { font-size: 13px; font-weight: 500; margin-bottom: 4px; display: flex; align-items: center; }
-.obj-desc { font-size: 12px; color: #888; margin-bottom: 4px; }
-.obj-kpis { display: flex; flex-wrap: wrap; gap: 2px; }
-
-/* 操作按钮组 */
-.obj-actions { display: flex; align-items: center; gap: 2px; margin-top: 6px; justify-content: flex-end; }
-.obj-actions .el-button { padding: 2px 4px !important; font-size: 12px; min-height: auto; }
-.obj-actions .link-btn {
-  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
-  background: #ecf5ff; color: #409eff; border-radius: 50%;
-  font-size: 14px; font-weight: bold; cursor: pointer; transition: opacity .2s, transform .2s;
+/* ── 重新调用的样式（从旧MapCanvas复用） ── */
+.kpi-detail-card {
+  border: 1px solid #eee; border-radius: 8px; padding: 12px; margin-bottom: 8px;
 }
-.obj-actions .link-btn:hover { transform: scale(1.2); background: #409eff; color: #fff; }
+.kpi-detail-red { border-left: 4px solid #f56c6c; }
+.kpi-detail-yellow { border-left: 4px solid #e6a23c; }
+.kpi-detail-green { border-left: 4px solid #67c23a; }
+.kpi-detail-gray { border-left: 4px solid #ccc; }
+.kpi-detail-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.kpi-detail-badge { font-size: 14px; }
+.kpi-detail-code { font-size: 11px; color: #999; font-family: monospace; }
+.kpi-detail-name { font-weight: 600; font-size: 14px; }
+.kpi-detail-values { padding-left: 24px; display: flex; flex-direction: column; gap: 4px; }
+.kdv-item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
+.kdv-label { color: #999; width: 56px; }
+.kdv-val { font-weight: 500; }
 
-/* 连线入口按钮（旧，保留兼容） */
-.link-btn {
-  position: absolute; bottom: 4px; right: 6px;
-  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
-  background: #ecf5ff; color: #409eff; border-radius: 50%;
-  font-size: 14px; font-weight: bold; cursor: pointer; opacity: 0;
-  transition: opacity .2s, transform .2s;
+.plan-popup-card {
+  border: 1px solid #eee; border-radius: 8px; padding: 10px 12px; margin-bottom: 6px;
 }
-.objective-card:hover .link-btn { opacity: 1; }
-.link-btn:hover { transform: scale(1.2); background: #409eff; color: #fff; }
-
-/* 目标红黄绿灯指示器 */
-.obj-level-dot {
-  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
-  margin-right: 4px; flex-shrink: 0;
+.plan-popup-card:hover { background: #fafafa; }
+.plan-popup-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+.plan-popup-status {
+  font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 500; flex-shrink: 0;
 }
-.dot-green { background: #67c23a; }
-.dot-yellow { background: #e6a23c; }
-.dot-red { background: #f56c6c; }
-.dot-gray { background: #dcdfe6; }
-.obj-level-red { border-left: 3px solid #f56c6c !important; background: #fef0f0; }
-.obj-level-yellow { border-left: 3px solid #e6a23c !important; background: #fdf6ec; }
-.obj-level-green { border-left: 3px solid #67c23a !important; background: #f0f9eb; }
+.pps-pending { background: #f5f7fa; color: #909399; }
+.pps-in_progress { background: #fdf6ec; color: #e6a23c; }
+.pps-completed { background: #f0f9eb; color: #67c23a; }
+.pps-cancelled { background: #f5f7fa; color: #bbb; }
+.plan-popup-title { font-weight: 500; font-size: 13px; }
+.plan-popup-meta { display: flex; gap: 12px; font-size: 11px; color: #999; padding-left: 4px; }
 
-/* 维度列头部操作按钮 */
-.dim-more-btn { color: rgba(255,255,255,0.7) !important; margin-left: auto; padding: 2px !important; }
-.dim-more-btn:hover { color: #fff !important; }
-.dim-header { position: relative; }
-
-/* KPI选择区 */
-.kpi-select-wrap { display: flex; align-items: center; width: 100%; }
+/* ── 自定义弹窗（从旧MapCanvas复用） ── */
+.mc-dialog-overlay {
+  position: fixed; top:0; left:0; right:0; bottom:0;
+  background:rgba(0,0,0,0.5); z-index:9999;
+  display:flex; align-items:center; justify-content:center;
+}
+.mc-dialog-box {
+  background:#fff; border-radius:12px; width:520px;
+  box-shadow:0 8px 32px rgba(0,0,0,0.18); overflow:hidden;
+}
+.mc-dialog-header {
+  display:flex; justify-content:space-between; align-items:center;
+  padding:16px 20px; border-bottom:1px solid #f0f0f0;
+  font-weight:600; font-size:16px;
+}
+.mc-dialog-close {
+  background:none; border:none; font-size:22px; color:#999;
+  cursor:pointer; padding:0 4px; line-height:1;
+}
+.mc-dialog-close:hover { color:#333; }
+.mc-dialog-body { padding:20px; }
+.mc-dialog-footer {
+  display:flex; justify-content:flex-end; gap:10px;
+  padding:12px 20px; border-top:1px solid #f0f0f0;
+}
+.mc-table { width:100%; border-collapse:collapse; font-size:13px; }
+.mc-table th, .mc-table td { padding:10px 12px; text-align:left; border-bottom:1px solid #f0f0f0; }
+.mc-table th { background:#fafafa; font-weight:600; color:#666; font-size:12px; }
+.mc-table tr:hover td { background:#f5f7fa; }
+.mc-btn {
+  padding:8px 20px; border:1px solid #dcdfe6; border-radius:6px;
+  background:#fff; color:#333; font-size:14px; cursor:pointer;
+}
+.mc-btn-primary { background:#409eff; color:#fff; border-color:#409eff; }
+.mc-btn-sm { padding:5px 12px; font-size:12px; }
+.mc-btn-warn { color:#e6a23c; border-color:#e6a23c; }
+.mc-btn-warn:hover { background:#e6a23c; color:#fff; }
+.mc-btn:hover { opacity:0.85; }
 </style>