Merge branch 'mh' of http://124.70.32.114:3100/hanyuqing/KGPython into hanyuqing

# Conflicts:
#	vue/src/system/GraphDemo.vue
#	vue/src/system/GraphStyle.vue

vue/src/components/GraphToolbar.vue

@@ -127,9 +127,14 @@ export default {
     },
 
     exportToSVGManual() {
-      const graph = this.graph;
+      const graph = this._graph || this.graph;
-      if (!graph) return;
+      if (!graph) {
+        this.$message.error("未找到图表实例");
+        return;
+      }
+
       const { nodes, edges } = graph.getData();
+      // 1. 计算画布边界，确保所有节点都在视口内
       const bBox = graph.getCanvas().getRoot().getRenderBounds();
       const padding = 60;
       const minX = bBox.min[0] - padding;
@@ -139,7 +144,6 @@ export default {
       const vWidth = maxX - minX;
       const vHeight = maxY - minY;
 
-      // 1. 定义与问答页面一致的颜色映射（用于兜底和逻辑计算）
       const colorMap = {
         'Disease': { fill: '#EF4444', stroke: '#B91C1C', edge: '#EF4444' },
         'Drug': { fill: '#91cc75', stroke: '#047857', edge: '#91cc75' },
@@ -148,39 +152,101 @@ export default {
         'Other': { fill: '#59d1d4', stroke: '#40999b', edge: '#59d1d4' }
       };
 
+      // 2. 预收集颜色用于生成对应的箭头定义
+      const usedColors = new Set();
+      edges.forEach(edge => {
+        const s = nodes.find(n => n.id === edge.source);
+        const sourceType = s?.data?.label || 'Other';
+        const color = edge.style?.stroke || colorMap[sourceType]?.edge || '#cccccc';
+        usedColors.add(color);
+      });
+
       let svgContent = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="${vWidth}" height="${vHeight}" viewBox="${minX} ${minY} ${vWidth} ${vHeight}">`;
+
+      // 3. 动态生成 Marker 定义
+      svgContent += `<defs>`;
+      const colorList = Array.from(usedColors);
+      colorList.forEach((color, index) => {
+        svgContent += `
+      <marker id="arrow-${index}" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
+        <polygon points="0 0, 10 3.5, 0 7" fill="${color}" />
+      </marker>`;
+      });
+      svgContent += `</defs>`;
+
       svgContent += `<rect x="${minX}" y="${minY}" width="${vWidth}" height="${vHeight}" fill="#ffffff" />`;
 
-      // 2. 渲染边
+      // 4. 渲染连边
       edges.forEach(edge => {
         const s = nodes.find(n => n.id === edge.source);
         const t = nodes.find(n => n.id === edge.target);
         if (!s || !t) return;
 
-        // 获取坐标 (从 style 中取，G6 会把布局后的坐标存这)
+        const x1 = s.style?.x || 0, y1 = s.style?.y || 0;
-        const x1 = s.style?.x || 0;
+        const x2 = t.style?.x || 0, y2 = t.style?.y || 0;
-        const y1 = s.style?.y || 0;
+        const nodeRadius = (t.style?.size || 50) / 2;
-        const x2 = t.style?.x || 0;
-        const y2 = t.style?.y || 0;
 
-        // --- 核心修正：根据起点节点的类型来确定边的颜色 ---
+        const sourceType = s.data?.label || 'Other';
-        // 这对应了你问答页面里 edge: { style: { stroke: (d) => ... } } 的逻辑
+        const strokeColor = edge.style?.stroke || colorMap[sourceType]?.edge || '#cccccc';
-        const sourceType = s.data?.label || 'Other'; // 获取起点类型 (Disease/Drug等)
+        const markerId = `arrow-${colorList.indexOf(strokeColor)}`;
-        const strokeColor = colorMap[sourceType]?.edge || '#cccccc';
+
+        let pathD = "";
+        let tx, ty;
+
+        const dx = x2 - x1, dy = y2 - y1;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const nx = -dy / dist, ny = dx / dist;
+        const curveOffset = edge.style?.curveOffset || 40;
+
+        // --- 核心逻辑：区分类型并修正切线箭头 ---
+        if (edge.type === 'cubic' && dist > 0) {
+          // 三次贝塞尔
+          const cp1X = x1 + dx / 3 + nx * curveOffset;
+          const cp1Y = y1 + dy / 3 + ny * curveOffset;
+          const cp2X = x1 + (dx * 2) / 3 + nx * curveOffset;
+          const cp2Y = y1 + (dy * 2) / 3 + ny * curveOffset;
+
+          const angle = Math.atan2(y2 - cp2Y, x2 - cp2X);
+          const realX2 = x2 - Math.cos(angle) * (nodeRadius + 1);
+          const realY2 = y2 - Math.sin(angle) * (nodeRadius + 1);
+
+          pathD = `M ${x1} ${y1} C ${cp1X} ${cp1Y} ${cp2X} ${cp2Y} ${realX2} ${realY2}`;
+          tx = (x1 + cp1X + cp2X + x2) / 4;
+          ty = (y1 + cp1Y + cp2Y + y2) / 4;
+
+        } else if (edge.type === 'quadratic' && dist > 0) {
+          // 二次贝塞尔
+          const cpX = (x1 + x2) / 2 + nx * curveOffset;
+          const cpY = (y1 + y2) / 2 + ny * curveOffset;
+
+          const angle = Math.atan2(y2 - cpY, x2 - cpX);
+          const realX2 = x2 - Math.cos(angle) * (nodeRadius + 1);
+          const realY2 = y2 - Math.sin(angle) * (nodeRadius + 1);
+
+          pathD = `M ${x1} ${y1} Q ${cpX} ${cpY} ${realX2} ${realY2}`;
+          tx = (x1 + cpX * 2 + x2) / 4;
+          ty = (y1 + cpY * 2 + y2) / 4;
+
+        } else {
+          // 直线
+          const angle = Math.atan2(y2 - y1, x2 - x1);
+          const realX2 = x2 - Math.cos(angle) * nodeRadius;
+          const realY2 = y2 - Math.sin(angle) * nodeRadius;
+          pathD = `M ${x1} ${y1} L ${realX2} ${realY2}`;
+          tx = (x1 + x2) / 2;
+          ty = (y1 + y2) / 2;
+        }
 
-        // 绘制线条 (增加 stroke-width 确保可见)
+        svgContent += `<path d="${pathD}" stroke="${strokeColor}" stroke-width="2" fill="none" opacity="0.6" marker-end="url(#${markerId})" />`;
-        svgContent += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${strokeColor}" stroke-width="2" opacity="0.4" />`;
 
-        // 渲染边文字
+        // 渲染文字
-        const labelText = edge.data?.relationship?.properties?.label || edge.data?.label || "";
+        const labelText = edge.data?.label || edge.label || "";
         if (labelText) {
-          const mx = (x1 + x2) / 2;
+          svgContent += `<text x="${tx}" y="${ty - 8}" fill="#666666" font-size="10" font-family="Microsoft YaHei" text-anchor="middle">${labelText}</text>`;
-          const my = (y1 + y2) / 2;
-          svgContent += `<text x="${mx}" y="${my - 4}" fill="#666666" font-size="10" font-family="Microsoft YaHei" text-anchor="middle">${labelText}</text>`;
         }
       });
 
-      // 3. 渲染节点
+      // 5. 渲染节点
       nodes.forEach(node => {
         const type = node.data?.label || 'Other';
         const colors = colorMap[type] || colorMap['Other'];
@@ -188,25 +254,28 @@ export default {
         const x = node.style?.x || 0;
         const y = node.style?.y || 0;
 
-        svgContent += `<circle cx="${x}" cy="${y}" r="${radius}" fill="${colors.fill}" stroke="${colors.stroke}" stroke-width="1.5" />`;
+        svgContent += `<circle cx="${x}" cy="${y}" r="${radius}" fill="${node.style?.fill || colors.fill}" stroke="${node.style?.stroke || colors.stroke}" stroke-width="1.5" />`;
 
-        if (node.data?.name) {
+        const name = node.label || node.data?.name || "";
-          svgContent += `<text x="${x}" y="${y}" fill="#ffffff" font-size="12" font-family="Microsoft YaHei" text-anchor="middle" dominant-baseline="middle">${node.data.name}</text>`;
+        if (name) {
+          svgContent += `<text x="${x}" y="${y}" fill="#ffffff" font-size="11" font-family="Microsoft YaHei" text-anchor="middle" dominant-baseline="middle">${name}</text>`;
         }
       });
 
       svgContent += `</svg>`;
 
-      // 保存文件逻辑保持不变...
+      // 6. 导出文件
       try {
         const blob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
         const url = URL.createObjectURL(blob);
         const link = document.createElement('a');
         link.href = url;
-        link.download = `矢量图谱_${Date.now()}.svg`;
+        link.download = `医疗图谱导出_${Date.now()}.svg`;
+        document.body.appendChild(link);
         link.click();
+        document.body.removeChild(link);
         URL.revokeObjectURL(url);
-        this.$message.success('全量矢量图导出成功');
+        this.$message.success('高精度矢量图导出成功');
       } catch (err) {
         this.$message.error('导出失败');
       }

vue/src/system/GraphDemo.vue

@@ -134,6 +134,13 @@
           </div>
         </div>
         <div class="graph-viewport">
+          <GraphToolbar
+              ref="toolbarRef"
+              v-if="_graph"
+              :graph="_graph"
+              class="toolbar-position"
+              style="position: absolute; top: 40px; left: 750px; z-index: 1000; width: auto;"
+          />
           <div ref="graphContainer" class="graph-container" id="container"></div>
         </div>
       </section>
@@ -155,14 +162,18 @@ import {
 import {Graph, Tooltip} from '@antv/g6';
 import Menu from "@/components/Menu.vue";
 import {a} from "vue-router/dist/devtools-EWN81iOl.mjs";
+import GraphToolbar from "@/components/GraphToolbar.vue";
 
 import Fuse from 'fuse.js';
+import {ElMessage} from "element-plus";
 import {getGraphStyleActive} from "@/api/style";
+
 export default {
   name: 'Display',
-  components: {Menu},
+  components: {Menu, GraphToolbar},
   data() {
     return {
+      _graph: null,
       G6: null, // 添加这个
       // 节点样式
       nodeShowLabel: true,
@@ -1201,10 +1212,67 @@ export default {
         ${sourceName} — ${rel} —> ${targetName}
       </div>`;
           },
-        },])
+        },
+          {
+            type: 'toolbar',
+            onClick: (id) => {
+              if (id === 'reset') {
+                // 1. 如果是重置，直接在本地执行方法
+                this.localResetGraph();
+              } else if (this.$refs.toolbarRef) {
+                // 2. 其他功能（放大、导出等）继续交给组件处理
+                this.$refs.toolbarRef.handleToolbarAction(id);
               }
+            },
+            getItems: () => {
+              return [
+                {id: 'zoom-in', value: 'zoom-in', title: '放大'},
+                {id: 'zoom-out', value: 'zoom-out', title: '缩小'},
+                {id: 'auto-fit', value: 'auto-fit', title: '聚焦'},
+                {id: 'reset', value: 'reset', title: '重置'},
+                {id: 'export', value: 'export', title: '导出图谱'},
+              ];
+            },
+          },
+          ])
+      }
+    },
+    localResetGraph() {
+      // 1. 检查图表实例和数据是否存在
+      if (!this._graph) return;
 
+      if (!this.defaultData || !this.defaultData.nodes) {
+        this.$message.warning("未找到可重置的数据源");
+        return;
+      }
 
+      try {
+        // 2. 彻底清理鼠标指针状态
+        const canvas = this._graph.getCanvas();
+        if (canvas && typeof canvas.setCursor === 'function') {
+          canvas.setCursor('default');
+        }
+
+        // 3. 彻底销毁当前图谱实例
+        // 销毁会移除所有 DOM 节点和事件监听，彻底解决 EventBoundary 问题
+        this._graph.destroy();
+        this._graph = null;
+
+        // 4. 重新初始化
+        this.$nextTick(() => {
+          // initGraph 内部会自动读取 this.defaultData
+          this.initGraph();
+
+          // 5. 重新构建分类索引（因为 destroy 也会清空之前的交互索引）
+          this.buildCategoryIndex();
+
+          this.$message.success("图谱已重置");
+        });
+      } catch (err) {
+        console.error('重置图谱失败:', err);
+        // 降级处理：如果销毁失败，尝试刷新页面（可选）
+        // location.reload();
+      }
     },
 
     updateGraph(data) {
@@ -1645,6 +1713,7 @@ button:hover {
 /deep/ .radio-check .el-radio__input.is-checked+.el-radio__label {
   color: #1890ff;
 }
+
 /* 自定义下拉样式 */
 .select-container {
   position: relative;

vue/src/system/GraphStyle.vue

@@ -571,9 +571,10 @@ export default {
       this.tagStyles[labelEn] = currentStyle;
       this.updateAllElements();
 
-      // 只有在编辑模式下才同步到数据库
+      // 只有在“编辑模式”下才触发后端自动同步
       if (this.editingConfigId) {
         if (this.saveTimer) clearTimeout(this.saveTimer);
+
         const currentEditId = this.editingConfigId;
         this.saveTimer = setTimeout(async () => {
           try {
@@ -679,19 +680,280 @@ export default {
       this.updateAllElements();
     },
 
+    // --- 第三种方法：XML 模板映射法  ---
+    async handleExportClick() {
+      if (!this._graph) return;
+      ElMessageBox.confirm(
+          '请选择您要导出的图片格式：',
+          '导出图谱',
+          {
+            confirmButtonText: '导出为 PNG',
+            cancelButtonText: '导出为 SVG',
+            distinguishCancelAndClose: true,
+            type: 'info',
+            draggable: true,
+          }
+      ).then(async () => {
+        try {
+          // PNG 导出保持官方推荐姿势
+          const dataURL = await this._graph.toDataURL({
+            type: 'image/png',
+            backgroundColor: '#ffffff'
+          });
+          const link = document.createElement('a');
+          link.href = dataURL;
+          link.download = `图谱_${Date.now()}.png`;
+          link.click();
+          ElMessage.success('PNG 导出成功');
+        } catch (e) {
+          ElMessage.error('PNG 导出失败');
+        }
+      }).catch((action) => {
+        if (action === 'cancel') {
+          this.exportToSVGManual();
+        }
+      });
+    },
+
+    exportToSVGManual() {
+      const graph = this._graph;
+      if (!graph) return;
+      const { nodes, edges } = graph.getData();
+      const width = graph.getSize()[0];
+      const height = graph.getSize()[1];
+
+      const usedColors = new Set();
+      edges.forEach(edge => { if (edge.style?.stroke) usedColors.add(edge.style.stroke); });
+      if (usedColors.size === 0) usedColors.add('#cccccc');
+
+      let svgContent = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`;
+
+      // 1. 定义动态颜色箭头
+      svgContent += `<defs>`;
+      Array.from(usedColors).forEach((color, index) => {
+        const hexColor = color.includes('rgba') ? color.replace(/rgba?\((\d+),\s*(\d+),\s*(\d+).*/, 'rgb($1,$2,$3)') : color;
+        svgContent += `
+      <marker id="arrow-${index}" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
+        <polygon points="0 0, 10 3.5, 0 7" fill="${hexColor}" />
+      </marker>`;
+      });
+      svgContent += `</defs>`;
+
+      svgContent += `<rect width="100%" height="100%" fill="#ffffff" />`;
+
+      // 2. 渲染连边
+      edges.forEach(edge => {
+        const s = nodes.find(n => n.id === edge.source);
+        const t = nodes.find(n => n.id === edge.target);
+        if (!s || !t) return;
+
+        const x1 = s.style?.x || 0, y1 = s.style?.y || 0;
+        const x2 = t.style?.x || 0, y2 = t.style?.y || 0;
+        const nodeRadius = (t.style?.size || 60) / 2;
+
+        const style = edge.style || {};
+        const stroke = style.stroke || '#ccc';
+        const colorIdx = Array.from(usedColors).indexOf(stroke);
+        const markerId = `arrow-${colorIdx !== -1 ? colorIdx : 0}`;
+
+        let pathD = "";
+        let tx, ty; // 文字坐标
+
+        const dx = x2 - x1, dy = y2 - y1;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const nx = -dy / dist, ny = dx / dist;
+
+        // --- 逻辑分支开始 ---
+
+        if (edge.type === 'cubic') {
+          // 💡 三次贝塞尔曲线 (Cubic Bezier)
+          const offset = style.curveOffset || 40;
+          // 计算两个控制点，模拟 G6 的贝塞尔形态
+          const cp1X = x1 + dx / 3 + nx * offset;
+          const cp1Y = y1 + dy / 3 + ny * offset;
+          const cp2X = x1 + (dx * 2) / 3 + nx * offset;
+          const cp2Y = y1 + (dy * 2) / 3 + ny * offset;
+
+          // 箭头角度：由第二个控制点 cp2 指向终点
+          const angle = Math.atan2(y2 - cp2Y, x2 - cp2X);
+          const realX2 = x2 - Math.cos(angle) * (nodeRadius + 1);
+          const realY2 = y2 - Math.sin(angle) * (nodeRadius + 1);
+
+          pathD = `M ${x1} ${y1} C ${cp1X} ${cp1Y} ${cp2X} ${cp2Y} ${realX2} ${realY2}`;
+          // 文字位置取两个控制点中心
+          tx = (x1 + cp1X + cp2X + x2) / 4;
+          ty = (y1 + cp1Y + cp2Y + y2) / 4;
+
+        } else if (edge.type === 'quadratic') {
+          // 💡 二次贝塞尔曲线 (Quadratic Bezier)
+          const offset = style.curveOffset || 40;
+          const cpX = (x1 + x2) / 2 + nx * offset;
+          const cpY = (y1 + y2) / 2 + ny * offset;
+
+          const angle = Math.atan2(y2 - cpY, x2 - cpX);
+          const realX2 = x2 - Math.cos(angle) * (nodeRadius + 1);
+          const realY2 = y2 - Math.sin(angle) * (nodeRadius + 1);
+
+          pathD = `M ${x1} ${y1} Q ${cpX} ${cpY} ${realX2} ${realY2}`;
+          tx = (x1 + cpX * 2 + x2) / 4;
+          ty = (y1 + cpY * 2 + y2) / 4;
+
+        } else {
+          // 💡 直线 (Line)
+          const angle = Math.atan2(y2 - y1, x2 - x1);
+          const realX2 = x2 - Math.cos(angle) * nodeRadius;
+          const realY2 = y2 - Math.sin(angle) * nodeRadius;
+          pathD = `M ${x1} ${y1} L ${realX2} ${realY2}`;
+          tx = (x1 + x2) / 2;
+          ty = (y1 + y2) / 2;
+        }
+
+        // --- 逻辑分支结束 ---
+
+        const markerAttr = style.endArrow ? `marker-end="url(#${markerId})"` : "";
+        svgContent += `<path d="${pathD}" stroke="${stroke}" stroke-width="${style.lineWidth || 2}" fill="none" opacity="0.6" ${markerAttr} />`;
+
+        const label = edge.data?.relationship?.properties?.label || style.labelText || "";
+        if (style.edgeShowLabel !== false && label) {
+          svgContent += `<text x="${tx}" y="${ty - 8}" fill="${style.labelFill || '#666'}" font-size="${style.labelFontSize || 10}" font-family="Microsoft YaHei" text-anchor="middle">${label}</text>`;
+        }
+      });
+
+      // 3. 渲染节点
+      nodes.forEach(node => {
+        const style = node.style || {};
+        const r = (style.size || 60) / 2;
+        svgContent += `<circle cx="${style.x}" cy="${style.y}" r="${r}" fill="${style.fill}" stroke="${style.stroke}" stroke-width="${style.lineWidth || 2}" />`;
+        if (style.labelText) {
+          svgContent += `<text x="${style.x}" y="${style.y}" fill="${style.labelFill || '#fff'}" font-size="${style.labelFontSize || 12}" font-family="Microsoft YaHei" text-anchor="middle" dominant-baseline="middle">${style.labelText}</text>`;
+        }
+      });
+
+      svgContent += `</svg>`;
+
+      // 4. 下载
+      const blob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `医疗图谱导出_${Date.now()}.svg`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    },
+
+    initDraggableToolbar() {
+      const toolbar = document.querySelector('.draggable-toolbar');
+      if (!toolbar) return;
+      let isDragging = false;
+      let startPos = { x: 0, y: 0 };
+      let offset = { x: 0, y: 0 };
+      const onMouseDown = (e) => {
+        if (e.target.closest('.g6-toolbar-item')) return;
+        isDragging = true;
+        startPos = { x: e.clientX, y: e.clientY };
+        offset.x = e.clientX - toolbar.offsetLeft;
+        offset.y = e.clientY - toolbar.offsetTop;
+        toolbar.style.transition = 'none';
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+        e.preventDefault();
+      };
+      const onMouseMove = (e) => {
+        if (!isDragging) return;
+        let left = e.clientX - offset.x;
+        let top = e.clientY - offset.y;
+        left = Math.max(10, Math.min(window.innerWidth - toolbar.offsetWidth - 10, left));
+        top = Math.max(10, Math.min(window.innerHeight - toolbar.offsetHeight - 10, top));
+        toolbar.style.left = left + 'px';
+        toolbar.style.top = top + 'px';
+        toolbar.style.right = 'auto';
+      };
+      const onMouseUp = () => {
+        isDragging = false;
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      };
+      toolbar.addEventListener('mousedown', onMouseDown);
+    },
+
     initGraph() {
       const container = this.$refs.graphContainer;
       if (!container || container.clientWidth === 0) return;
       this.defaultData.nodes.forEach(n => this._nodeLabelMap.set(n.id, n.data?.label));
       if (this._graph) this._graph.destroy();
+
       const graph = new Graph({
-        container, width: container.clientWidth, height: container.clientHeight || 600,
+        container,
+        width: container.clientWidth,
+        height: container.clientHeight || 600,
         layout: { type: 'radial', unitRadius: 100, preventOverlap: true, nodeSpacing: 50 },
         behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element', 'hover-activate'],
-        autoFit: 'center', animation: false
+        autoFit: 'center',
+        animation: false,
+        plugins: [
+          { type: 'history', key: 'history' },
+          {
+            type: 'toolbar',
+            position: 'top-right',
+            className: 'g6-toolbar draggable-toolbar',
+            style: { marginRight: '320px', marginTop: '10px', cursor: 'move', zIndex: 999 },
+            onClick: (id) => {
+              const historyPlugin = this._graph.getPluginInstance('history');
+              switch (id) {
+                case 'zoom-in': this._graph.zoomBy(1.2); break;
+                case 'zoom-out': this._graph.zoomBy(0.8); break;
+                case 'undo':
+                  if (historyPlugin && historyPlugin.canUndo()) historyPlugin.undo();
+                  break;
+                case 'redo':
+                  if (historyPlugin && historyPlugin.canRedo()) historyPlugin.redo();
+                  break;
+                case 'auto-fit': this._graph.fitView(); break;
+                case 'reset':
+                  const currentData = this._graph.getData();
+                  const cleanNodes = currentData.nodes.map(node => {
+                    const { x, y, ...rest } = node;
+                    if (rest.style) {
+                      delete rest.style.x;
+                      delete rest.style.y;
+                    }
+                    return rest;
+                  });
+                  this._graph.zoomTo(1);
+                  this._graph.translateTo([container.clientWidth / 2, container.clientHeight / 2]);
+                  this._graph.setData({
+                    nodes: cleanNodes,
+                    edges: currentData.edges
+                  });
+                  this._graph.layout().then(() => {
+                    this._graph.fitCenter();
+                  });
+                  ElMessage.success("已重置图谱位置");
+                  break;
+                case 'export': this.handleExportClick(); break;
+              }
+            },
+            getItems: () => {
+              return [
+                { id: 'zoom-in', value: 'zoom-in', title: '放大' },
+                { id: 'zoom-out', value: 'zoom-out', title: '缩小' },
+                { id: 'undo', value: 'undo', title: '撤销' },
+                { id: 'redo', value: 'redo', title: '重做' },
+                { id: 'auto-fit', value: 'auto-fit', title: '聚焦' },
+                { id: 'reset', value: 'reset', title: '重置' },
+                { id: 'export', value: 'export', title: '导出图谱' },
+              ];
+            }
+          }
+        ]
       });
       this._graph = markRaw(graph);
       this.updateAllElements();
+      this.$nextTick(() => {
+        setTimeout(this.initDraggableToolbar, 800);
+      });
     },
     getEffectiveStyleKey(label) {
       return CORE_LABELS.includes(label) ? label : 'Other';
@@ -807,7 +1069,9 @@ export default {
               this.applyStylesToPanel(currentActiveConf.styles);
               this.editingConfigId = currentActiveConf.id;
               this.editingConfigLabel = currentActiveConf.current_label;
-              this.$nextTick(() => { this.isInitialEcho = false; });
+              this.$nextTick(() => {
+                this.isInitialEcho = false;
+              });
             }
           }
           this.updateAllElements();
@@ -839,35 +1103,53 @@ export default {
 
       const isLabelExist = group.configs.some(c => c.current_label === labelName && c.id !== excludeId);
       if (isLabelExist) {
-        ElMessageBox.alert(`方案【${groupName}】中已存在【${labelName}】标签的配置，请先删除旧配置或选择其他方案。`, '校验失败', { type: 'error' }).catch(() => {});
+        ElMessageBox.alert(`方案【${groupName}】中已存在【${labelName}】标签的配置。`, '校验失败', {type: 'error'}).catch(() => {
+        });
         return false;
       }
 
       if (group.configs.length >= 5 && !group.configs.some(c => c.id === excludeId)) {
-        ElMessageBox.alert(`方案【${groupName}】的配置已满（上限5个），无法添加。`, '校验失败', { type: 'error' }).catch(() => {});
+        ElMessageBox.alert(`方案【${groupName}】已满（上限5个）。`, '校验失败', {type: 'error'}).catch(() => {
+        });
         return false;
       }
       return true;
     },
 
     async moveConfigToGroup(config, targetGroup) {
+      // 1. 拦截无效移动
+      if (config.group_id === targetGroup.id) {
+        return ElMessage.info("该配置已在该方案中");
+      }
+
       if (!this.validateGroupConstraint(targetGroup.group_name, config.current_label, config.id)) return;
+
       try {
+        // 2. 构造 Payload：直接传入 target_group_id
         const payload = {
-          id: config.id, canvas_name: config.canvas_name, group_name: targetGroup.group_name,
+          id: config.id,
-          current_label: config.current_label, styles: config.styles, is_auto_save: false
+          target_group_id: targetGroup.id, // 新增：直接传 ID，最准确D
+          canvas_name: config.canvas_name,
+          current_label: config.current_label,
+          styles: config.styles,
+          is_auto_save: false
         };
+
         const res = await saveGraphStyle(payload);
         if (res.code === 200) {
           ElMessage.success(`已移动至【${targetGroup.group_name}】`);
-          await this.fetchConfigs();
+          await this.fetchConfigs(); // 刷新列表
+        } else {
+          ElMessage.error(res.msg || "移动失败");
+        }
+      } catch (err) {
+        ElMessage.error("移动操作异常");
       }
-      } catch (err) { ElMessage.error("操作失败"); }
     },
-
     handleSaveClick() {
       this.fetchGroupNames();
       this.saveForm.canvas_name = `${this.activeTags}_${Date.now()}`;
+      this.saveForm.group_name = '';
       this.saveDialogVisible = true;
     },
 
@@ -876,13 +1158,19 @@ export default {
       if (!this.validateGroupConstraint(this.saveForm.group_name.trim(), this.activeTags)) return;
       const labelEn = tagToLabelMap[this.activeTags];
       const payload = {
-        canvas_name: this.saveForm.canvas_name.trim(), group_name: this.saveForm.group_name.trim(),
+        canvas_name: this.saveForm.canvas_name.trim(),
-        current_label: this.activeTags, styles: { ...this.tagStyles[labelEn] }, is_auto_save: false
+        group_name: this.saveForm.group_name.trim(),
+        current_label: this.activeTags,
+        styles: {...this.tagStyles[labelEn]},
+        is_auto_save: false // 标记为手动保存
       };
       const res = await saveGraphStyle(payload);
       if (res.code === 200) {
         ElMessage.success("保存成功");
         this.saveDialogVisible = false;
+        this.editingConfigId = null;
+        this.editingConfigLabel = '';
+
         await this.fetchConfigs();
       }
     },
@@ -898,7 +1186,8 @@ export default {
         const missingTags = REQUIRED_TAGS.filter(tag => !new Set(currentLabels).has(tag));
         if (missingTags.length > 0) {
           this.isInitialEcho = false;
-          return ElMessageBox.alert(`该方案配置不完整，缺失：${missingTags.join('、')}`, '提示', { type: 'warning' }).catch(() => {});
+          return ElMessageBox.alert(`该方案配置不完整，缺失：${missingTags.join('、')}`, '提示', {type: 'warning'}).catch(() => {
+          });
         }
         this.usingConfigIds = group.configs.map(c => c.id);
         const res = await applyGraphStyleGroup(group.id);
@@ -908,7 +1197,10 @@ export default {
           if (group.configs.length > 0) this.handleEditConfig(group.configs[0]);
           ElMessage.success(`已应用方案【${group.group_name}】`);
         }
-      } catch (err) { this.isInitialEcho = false; ElMessage.error("切换失败"); }
+      } catch (err) {
+        this.isInitialEcho = false;
+        ElMessage.error("切换失败");
+      }
     },
 
     resetStyle() {
@@ -928,8 +1220,12 @@ export default {
       try {
         await ElMessageBox.confirm('确定删除吗？', '提示');
         const res = await deleteGraphStyle(id);
-        if (res.code === 200) { ElMessage.success("删除成功"); this.fetchConfigs(); }
+        if (res.code === 200) {
-      } catch (err) { }
+          ElMessage.success("删除成功");
+          this.fetchConfigs();
+        }
+      } catch (err) {
+      }
     },
 
     async deleteGroup(groupId) {
@@ -938,21 +1234,35 @@ export default {
       try {
         await ElMessageBox.confirm('确定删除全案吗？', '提示');
         const res = await deleteGraphStyleGroup(groupId);
-        if (res.code === 200) { ElMessage.success("已删除"); this.fetchConfigs(); }
+        if (res.code === 200) {
-      } catch (err) { }
+          ElMessage.success("已删除");
+          this.fetchConfigs();
+        }
+      } catch (err) {
+      }
     },
 
     async handleUnifiedBatchDelete() {
       if (this.checkedConfigIds.length === 0 && this.checkedGroupIds.length === 0) return;
       try {
         await ElMessageBox.confirm('确定批量删除吗？', '提示');
-        if (this.checkedGroupIds.length > 0) { for (const gid of this.checkedGroupIds) await deleteGraphStyleGroup(gid); }
+        if (this.checkedGroupIds.length > 0) {
-        if (this.checkedConfigIds.length > 0) { await batchDeleteGraphStyle({ ids: this.checkedConfigIds }); }
+          for (const gid of this.checkedGroupIds) await deleteGraphStyleGroup(gid);
-        ElMessage.success("成功"); this.clearSelection(); this.fetchConfigs();
+        }
-      } catch (e) { }
+        if (this.checkedConfigIds.length > 0) {
+          await batchDeleteGraphStyle({ids: this.checkedConfigIds});
+        }
+        ElMessage.success("成功");
+        this.clearSelection();
+        this.fetchConfigs();
+      } catch (e) {
+      }
     },
 
-    clearSelection() { this.checkedConfigIds = []; this.checkedGroupIds = []; },
+    clearSelection() {
+      this.checkedConfigIds = [];
+      this.checkedGroupIds = [];
+    },
     handleResize() {
       if (this._graph && this.$refs.graphContainer) {
         this._graph.setSize(this.$refs.graphContainer.clientWidth, this.$refs.graphContainer.clientHeight);
@@ -961,6 +1271,7 @@ export default {
   }
 }
 </script>
+
 <style scoped>
 
 /* 精准控制“应用全案”按钮 */
@@ -1063,7 +1374,11 @@ export default {
   padding-bottom: 10px;
   margin-top: 10px;
 }
-:deep(.el-collapse){ --el-collapse-border-color: transparent;}
+
+:deep(.el-collapse) {
+  --el-collapse-border-color: transparent;
+}
+
 .tag-pill {
   flex-shrink: 0;
   padding: 1px 10px;
@@ -1296,6 +1611,7 @@ export default {
   height: auto;
   margin-top: 4px;
 }
+
 .config-checkbox {
   margin: 0;
   cursor: pointer;
@@ -1458,6 +1774,7 @@ export default {
   border-color: #e6e6e6 !important;
   color: #333 !important;
 }
+
 :deep(.el-message-box__btns .el-button--primary) {
   background-color: #1559f3 !important;
   border-color: #1559f3 !important;
@@ -1487,6 +1804,22 @@ export default {
 :deep(.el-dialog .el-input__inner) {
   outline: none !important;
 }
+
+/* 强制覆盖 G6 工具栏样式 */
+:deep(.g6-toolbar) {
+  height: 35px !important;
+  display: flex !important;
+  align-items: center !important;
+  padding: 0 10px !important;
+}
+
+:deep(.g6-toolbar-item) {
+  width: 20px !important;
+  height: 35px !important;
+  font-size: 15px !important;
+  margin: 0 4px !important;
+}
+
 </style>
 
 <style>