all

controller/GraphStyleController.py

@@ -19,24 +19,36 @@ def create_response(status_code, data_dict):
 
 @app.post("/api/graph/style/save")
 async def save_style_config(request):
-    """保存配置接口 - 升级版：支持分组名"""
+    """保存配置接口 - 修复版：支持移动与更新逻辑"""
     try:
         body = request.json()
+
+        # 1. 核心修改：接收前端传来的 id
+        # 当执行“移动”操作时，前端会传 config.id；当执行“保存当前配置”时，id 为空
+        config_id = body.get('id')
+
         canvas_name = body.get('canvas_name')
         current_label = body.get('current_label')
         styles = body.get('styles')
-        # 接收分组名称（字符串）
         group_name = body.get('group_name')
 
         if not all([canvas_name, current_label, styles]):
             return create_response(200, {"code": 400, "msg": "参数不完整"})
 
-        # 调用 Service，逻辑内部处理：组名存在则用，不存在则建
+        # 2. 核心修改：将 config_id 传给 Service 层
-        success = GraphStyleService.save_config(canvas_name, current_label, styles, group_name)
+        # 这样 Service 就能根据是否有 id 来判断是执行 UPDATE 还是 INSERT
+        success = GraphStyleService.save_config(
+            canvas_name=canvas_name,
+            current_label=current_label,
+            styles_dict=styles,
+            group_name=group_name,
+            config_id=config_id
+        )
+
         if success:
-            return create_response(200, {"code": 200, "msg": "保存成功"})
+            return create_response(200, {"code": 200, "msg": "操作成功"})
         else:
-            return create_response(200, {"code": 500, "msg": "保存失败"})
+            return create_response(200, {"code": 500, "msg": "操作失败"})
     except Exception as e:
         return create_response(200, {"code": 500, "msg": f"系统异常: {str(e)}"})
 

service/GraphStyleService.py

@@ -5,38 +5,46 @@ from util.mysql_utils import mysql_client
 
 class GraphStyleService:
     @staticmethod
-    def save_config(canvas_name: str, current_label: str, styles_dict: dict, group_name: str = None) -> bool:
+    def save_config(canvas_name: str, current_label: str, styles_dict: dict, group_name: str = None, config_id: int = None) -> bool:
         """
-        保存图谱样式配置（增强版：自动处理分组逻辑）
+        保存图谱样式配置（修复版：支持移动与更新逻辑）
         """
-        # 1. 处理分组逻辑：查不到就建，查到了就用
+        # 1. 处理分组逻辑
         if not group_name or group_name.strip() == "":
             group_name = "默认方案"
 
-        # 检查组名是否已存在
+        # 检查/创建 目标方案组
         check_group_sql = "SELECT id FROM graph_style_groups WHERE group_name = %s LIMIT 1"
         existing_group = mysql_client.execute_query(check_group_sql, (group_name,))
 
         if existing_group:
             target_group_id = existing_group[0]['id']
         else:
-            # 如果不存在，新建一个组（is_active 和 is_default 默认为 false）
             create_group_sql = "INSERT INTO graph_style_groups (group_name, is_active, is_default) VALUES (%s, %s, %s)"
             mysql_client.execute_update(create_group_sql, (group_name, False, False))
-
+            target_group_id = mysql_client.execute_query("SELECT LAST_INSERT_ID() as last_id")[0]['last_id']
-            get_id_sql = "SELECT LAST_INSERT_ID() as last_id"
-            id_res = mysql_client.execute_query(get_id_sql)
-            target_group_id = id_res[0]['last_id'] if id_res else 1
 
         # 2. 转换样式 JSON
         config_json = json.dumps(styles_dict, ensure_ascii=False)
 
-        # 3. 插入配置表
+        # 3. 【核心修复】：判断是更新(移动)还是新建
-        sql = """
+        if config_id:
-            INSERT INTO graph_configs (canvas_name, current_label, config_json, group_id)
+            # 如果带了 ID，说明是“移动”或“修改”，执行 UPDATE
-            VALUES (%s, %s, %s, %s)
+            # 这样 group_id 会被更新，且不会产生新记录，配置就从原方案“消失”并出现在新方案了
-        """
+            sql = """
-        affected_rows = mysql_client.execute_update(sql, (canvas_name, current_label, config_json, target_group_id))
+                UPDATE graph_configs 
+                SET canvas_name = %s, current_label = %s, config_json = %s, group_id = %s 
+                WHERE id = %s
+            """
+            affected_rows = mysql_client.execute_update(sql, (canvas_name, current_label, config_json, target_group_id, config_id))
+        else:
+            # 如果没有 ID，说明是点“保存”按钮新建的，执行 INSERT
+            sql = """
+                INSERT INTO graph_configs (canvas_name, current_label, config_json, group_id)
+                VALUES (%s, %s, %s, %s)
+            """
+            affected_rows = mysql_client.execute_update(sql, (canvas_name, current_label, config_json, target_group_id))
+
         return affected_rows > 0
 
     @staticmethod

vue/src/system/GraphDemo.vue

@@ -855,37 +855,63 @@ export default {
     formatData(data){
       this._graph.stopLayout();
       this.clearGraphState();
-      const updatedEdges = data.edges.map(edge => ({
-        ...edge,
-        type:  this.edgeType,
-        style: {
-          endArrow: this.edgeEndArrow,
-          stroke: this.edgeStroke,
-          lineWidth: this.edgeLineWidth,
-          label: this.edgeShowLabel,
-          labelFontSize: this.edgeFontSize,
-          labelFontFamily: this.edgeFontFamily,
-          labelFill: this.edgeFontColor,
 
-        },
+
-      }))
+      // === 1. 构建 nodeId → label 映射 ===
-      const updatedNodes = data.nodes.map(node => ({
+      const nodeIdToEnLabel = {};
-        ...node,
+      data.nodes.forEach(node => {
-        type: this.nodeShape,
+        nodeIdToEnLabel[node.id] = node.data.label; // e.g. "Disease"
-        style:{
+      });
-          size: this.nodeSize,
+      // === 2. 处理节点：根据自身 label 设置样式 ===
-          lineWidth: this.nodeLineWidth,
+      const updatedNodes = data.nodes.map(node => {
-          label: this.nodeShowLabel,
+        const enLabel = node.data.label;
-          labelFontSize: this.nodeFontSize,
+        const zhLabel = this.enToZhLabelMap[enLabel] || '其他'; // 默认回退到“其他”
-          labelFontFamily: this.nodeFontFamily,
+        const styleConf = this.parsedStyles[zhLabel] || {};
-          labelFill: this.nodeFontColor,
+        return {
-          opacity: 1,
+          ...node,
-        }
+          type: styleConf.nodeShape || this.nodeShape,
-      }))
+          style: {
-      const updatedData = {
+            size: styleConf.nodeSize || this.nodeSize,
+            fill: styleConf.nodeFill || this.nodeFill,
+            stroke: styleConf.nodeStroke || this.nodeStroke,
+            lineWidth: styleConf.nodeLineWidth || this.nodeLineWidth,
+            label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true,
+            labelFontSize: styleConf.nodeFontSize || this.nodeFontSize,
+            labelFontFamily: styleConf.nodeFontFamily || this.nodeFontFamily,
+            labelFill: styleConf.nodeFontColor || this.nodeFontColor
+          }
+        };
+      });
+
+      // === 3. 处理边：根据 source 节点的 label 设置样式 ===
+      const updatedEdges = data.edges.map(edge => {
+        console.log(edge)
+        const sourceEnLabel = nodeIdToEnLabel[edge.source]; // e.g. "Disease"
+        const sourceZhLabel = this.enToZhLabelMap[sourceEnLabel] || '其他';
+        const styleConf = this.parsedStyles[sourceZhLabel] || {};
+
+        return {
+          ...edge,
+          id: edge.data?.relationship?.id || edge.id,
+          type: styleConf.edgeType ||this.edgeType,
+          style: {
+            endArrow: styleConf.edgeEndArrow !== undefined ? styleConf.edgeEndArrow : true,
+            stroke: styleConf.edgeStroke || this.edgeStroke,
+            lineWidth: styleConf.edgeLineWidth || this.edgeLineWidth,
+            label: styleConf.edgeShowLabel !== undefined ? styleConf.edgeShowLabel : false,
+            labelFontSize: styleConf.edgeFontSize || this.edgeFontSize,
+            labelFontFamily: styleConf.edgeFontFamily || this.edgeFontFamily,
+            labelFill: styleConf.edgeFontColor || this.edgeFontColor
+          }
+        };
+      });
+
+      // === 4. 更新图数据 ===
+      let updatedData = {
         nodes: updatedNodes,
         edges: updatedEdges
-      }
+      };
+
       this.buildNodeLabelMap(updatedNodes);
       this.updateGraph(updatedData)
       this.buildCategoryIndex();

vue/src/system/GraphQA.vue

@@ -76,6 +76,7 @@ import Menu from "@/components/Menu.vue";
 import {qaAnalyze} from "@/api/qa";
 import {Graph} from "@antv/g6";
 import {getGraph} from "@/api/graph";
+import {getGraphStyleActive} from "@/api/style";
 
 
 export default {
@@ -109,7 +110,16 @@ export default {
 
 
       queryRecord:"",
-      isSending:false
+      isSending:false,
+      configs:[],
+      parsedStyles:{},
+      enToZhLabelMap: {
+        Disease: '疾病',
+        Drug: '药品',
+        Check: '检查',
+        Symptom: '症状',
+        Other: '其他'
+      }
 
     };
   },
@@ -120,7 +130,8 @@ export default {
   },
   // =======================================================================
 
-  mounted() {
+  async mounted() {
+    await this.getDefault()
     // =============== 👇【新增】页面加载时从 localStorage 恢复数据 ===============
     this.restoreDataFromLocalStorage();
     // =======================================================================
@@ -145,6 +156,36 @@ export default {
     // =======================================================================
   },
   methods: {
+    safeParseStyles(stylesStr) {
+      try {
+        return JSON.parse(stylesStr || '{}');
+      } catch (e) {
+        console.warn('Failed to parse styles:', stylesStr);
+        return {};
+      }
+    },
+    async getDefault(){
+      const response = await getGraphStyleActive();
+      const data = response.data;
+      if (!Array.isArray(data) || data.length === 0) {
+        this.configs = [];
+        this.parsedStyles = {};
+        return;
+      }
+
+      // 只取第一个（即 is_active=1 的组）
+      const activeGroup = data[0];
+      this.configs = Array.isArray(activeGroup.configs) ? activeGroup.configs : [];
+
+      // 构建 label -> style 映射
+      const styleMap = {};
+      this.configs.forEach(config => {
+        const label = config.current_label;
+        styleMap[label] = this.safeParseStyles(config.styles);
+      });
+      this.parsedStyles = styleMap;
+      console.log(this.parsedStyles)
+    },
     buildNodeLabelMap(nodes) {
       this._nodeLabelMap = new Map();
       nodes.forEach(node => {
@@ -229,37 +270,58 @@ export default {
     formatData(data){
       // this._graph.stopLayout();
       // this.clearGraphState();
-      const updatedEdges = data.edges.map(edge => ({
+      // === 1. 构建 nodeId → label 映射 ===
-        ...edge,
+      const nodeIdToEnLabel = {};
-        type:  this.edgeType,
+      data.nodes.forEach(node => {
-        style: {
+        nodeIdToEnLabel[node.id] = node.data.type; // e.g. "Disease"
-          endArrow: this.edgeEndArrow,
+      });
-          stroke: this.edgeStroke,
+      // === 2. 处理节点：根据自身 label 设置样式 ===
-          lineWidth: this.edgeLineWidth,
+      const updatedNodes = data.nodes.map(node => {
-          label: this.edgeShowLabel,
+        const enLabel = node.data.type;
-          labelFontSize: this.edgeFontSize,
+        const styleConf = this.parsedStyles[enLabel] || {};
-          labelFontFamily: this.edgeFontFamily,
+        return {
-          labelFill: this.edgeFontColor,
+          ...node,
-
+          type: styleConf.nodeShape || this.nodeShape,
-        },
+          style: {
-      }))
+            size: styleConf.nodeSize || this.nodeSize,
-      const updatedNodes = data.nodes.map(node => ({
+            fill: styleConf.nodeFill || this.nodeFill,
-        ...node,
+            stroke: styleConf.nodeStroke || this.nodeStroke,
-        type: this.nodeShape,
+            lineWidth: styleConf.nodeLineWidth || this.nodeLineWidth,
-        style:{
+            label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true,
-          size: this.nodeSize,
+            labelFontSize: styleConf.nodeFontSize || this.nodeFontSize,
-          lineWidth: this.nodeLineWidth,
+            labelFontFamily: styleConf.nodeFontFamily || this.nodeFontFamily,
-          label: this.nodeShowLabel,
+            labelFill: styleConf.nodeFontColor || this.nodeFontColor
-          labelFontSize: this.nodeFontSize,
+          }
-          labelFontFamily: this.nodeFontFamily,
+        };
-          labelFill: this.nodeFontColor,
+      });
-          opacity: 1,
+
-        }
+      // === 3. 处理边：根据 source 节点的 label 设置样式 ===
-      }))
+      const updatedEdges = data.edges.map(edge => {
-      const updatedData = {
+        console.log(edge)
+        const sourceEnLabel = nodeIdToEnLabel[edge.source]; // e.g. "Disease"
+        const styleConf = this.parsedStyles[sourceEnLabel] || {};
+
+        return {
+          ...edge,
+          id: edge.data?.relationship?.id || edge.id,
+          type: styleConf.edgeType ||this.edgeType,
+          style: {
+            endArrow: styleConf.edgeEndArrow !== undefined ? styleConf.edgeEndArrow : true,
+            stroke: styleConf.edgeStroke || this.edgeStroke,
+            lineWidth: styleConf.edgeLineWidth || this.edgeLineWidth,
+            label: styleConf.edgeShowLabel !== undefined ? styleConf.edgeShowLabel : false,
+            labelFontSize: styleConf.edgeFontSize || this.edgeFontSize,
+            labelFontFamily: styleConf.edgeFontFamily || this.edgeFontFamily,
+            labelFill: styleConf.edgeFontColor || this.edgeFontColor
+          }
+        };
+      });
+
+      // === 4. 更新图数据 ===
+      let updatedData = {
         nodes: updatedNodes,
         edges: updatedEdges
-      }
+      };
 
       this.updateGraph(updatedData)
     },
@@ -274,37 +336,60 @@ export default {
         this._graph.destroy()
         this._graph = null;
       }
-      const updatedEdges = data.edges.map(edge => ({
+      console.log(data)
-        ...edge,
+      // === 1. 构建 nodeId → label 映射 ===
-        type:  this.edgeType,
+      const nodeIdToEnLabel = {};
-        style: {
+      data.nodes.forEach(node => {
-          endArrow: this.edgeEndArrow,
+        nodeIdToEnLabel[node.id] = node.data.type; // e.g. "Disease"
-          stroke: this.edgeStroke,
+      });
-          lineWidth: this.edgeLineWidth,
+      console.log(nodeIdToEnLabel)
-          label: this.edgeShowLabel,
+      // === 2. 处理节点：根据自身 label 设置样式 ===
-          labelFontSize: this.edgeFontSize,
+      const updatedNodes = data.nodes.map(node => {
-          labelFontFamily: this.edgeFontFamily,
+        const enLabel = node.data.type;
-          labelFill: this.edgeFontColor,
+        const styleConf = this.parsedStyles[enLabel] || {};
-
+        return {
-        },
+          ...node,
-      }))
+          type: styleConf.nodeShape || this.nodeShape,
-      const updatedNodes = data.nodes.map(node => ({
+          style: {
-        ...node,
+            size: styleConf.nodeSize || this.nodeSize,
-        type: this.nodeShape,
+            fill: styleConf.nodeFill || this.nodeFill,
-        style:{
+            stroke: styleConf.nodeStroke || this.nodeStroke,
-          size: this.nodeSize,
+            lineWidth: styleConf.nodeLineWidth || this.nodeLineWidth,
-          lineWidth: this.nodeLineWidth,
+            label: styleConf.nodeShowLabel !== undefined ? styleConf.nodeShowLabel : true,
-          label: this.nodeShowLabel,
+            labelFontSize: styleConf.nodeFontSize || this.nodeFontSize,
-          labelFontSize: this.nodeFontSize,
+            labelFontFamily: styleConf.nodeFontFamily || this.nodeFontFamily,
-          labelFontFamily: this.nodeFontFamily,
+            labelFill: styleConf.nodeFontColor || this.nodeFontColor
-          labelFill: this.nodeFontColor,
+          }
-          opacity: 1,
+        };
-        }
+      });
-      }))
+
-      const updatedData = {
+      // === 3. 处理边：根据 source 节点的 label 设置样式 ===
+      const updatedEdges = data.edges.map(edge => {
+        console.log(edge)
+        const sourceEnLabel = nodeIdToEnLabel[edge.source]; // e.g. "Disease"
+        const styleConf = this.parsedStyles[sourceEnLabel] || {};
+
+        return {
+          ...edge,
+          id: edge.data?.relationship?.id || edge.id,
+          type: styleConf.edgeType ||this.edgeType,
+          style: {
+            endArrow: styleConf.edgeEndArrow !== undefined ? styleConf.edgeEndArrow : true,
+            stroke: styleConf.edgeStroke || this.edgeStroke,
+            lineWidth: styleConf.edgeLineWidth || this.edgeLineWidth,
+            label: styleConf.edgeShowLabel !== undefined ? styleConf.edgeShowLabel : false,
+            labelFontSize: styleConf.edgeFontSize || this.edgeFontSize,
+            labelFontFamily: styleConf.edgeFontFamily || this.edgeFontFamily,
+            labelFill: styleConf.edgeFontColor || this.edgeFontColor
+          }
+        };
+      });
+
+      // === 4. 更新图数据 ===
+      let updatedData = {
         nodes: updatedNodes,
         edges: updatedEdges
-      }
+      };
       this.buildNodeLabelMap(updatedNodes);
       const container = this.$refs.graphContainer;
       console.log(container)
@@ -342,23 +427,23 @@ export default {
 
           node: {
             style: {
-              fill: (d) => {
+              // fill: (d) => {
-
+              //
-                const label = d.data?.type;
+              //   const label = d.data?.type;
-                if (label === '疾病') return '#EF4444';   // 红
+              //   if (label === '疾病') return '#EF4444';   // 红
-                if (label === '药品'||label === '药物') return '#91cc75';      // 绿
+              //   if (label === '药品'||label === '药物') return '#91cc75';      // 绿
-                if (label === '症状') return '#fac858';   // 橙
+              //   if (label === '症状') return '#fac858';   // 橙
-                if (label === '检查') return '#336eee';   // 橙
+              //   if (label === '检查') return '#336eee';   // 橙
-                return '#59d1d4';                            // 默认灰蓝
+              //   return '#59d1d4';                            // 默认灰蓝
-              },
+              // },
-              stroke: (d) => {
+              // stroke: (d) => {
-                const label = d.data?.type;
+              //   const label = d.data?.type;
-                if (label === '疾病') return '#B91C1C';
+              //   if (label === '疾病') return '#B91C1C';
-                if (label === '药品'||label === '药物') return '#047857';
+              //   if (label === '药品'||label === '药物') return '#047857';
-                if (label === '检查') return '#1D4ED8';   // 橙
+              //   if (label === '检查') return '#1D4ED8';   // 橙
-                if (label === '症状') return '#B45309';
+              //   if (label === '症状') return '#B45309';
-                return '#40999b';
+              //   return '#40999b';
-              },
+              // },
               labelText: (d) => d.label,
               labelPlacement: 'center',
               labelWordWrap: true,
@@ -389,16 +474,15 @@ export default {
           edge: {
             style: {
               labelText: (d) => {
-                console.log(d)
                 return d.data.label},
-              stroke: (d) => {
+              // stroke: (d) => {
-                const targetLabel = this._nodeLabelMap.get(d.source); // d.target 是目标节点 ID
+              //   const targetLabel = this._nodeLabelMap.get(d.source); // d.target 是目标节点 ID
-                if (targetLabel === '疾病') return 'rgba(239,68,68,0.5)';
+              //   if (targetLabel === '疾病') return 'rgba(239,68,68,0.5)';
-                if (targetLabel === '药品'||targetLabel === '药物') return 'rgba(145,204,117,0.5)';
+              //   if (targetLabel === '药品'||targetLabel === '药物') return 'rgba(145,204,117,0.5)';
-                if (targetLabel === '症状') return 'rgba(250,200,88,0.5)';
+              //   if (targetLabel === '症状') return 'rgba(250,200,88,0.5)';
-                if (targetLabel === '检查') return 'rgba(51,110,238,0.5)';   // 橙
+              //   if (targetLabel === '检查') return 'rgba(51,110,238,0.5)';   // 橙
-                return 'rgba(89,209,212,0.5)'; // default
+              //   return 'rgba(89,209,212,0.5)'; // default
-              },
+              // },
               // labelFill: (d) => {
               //   // 获取 target 节点的 label
               //   const targetLabel = this._nodeLabelMap.get(d.target); // d.target 是目标节点 ID

vue/src/system/GraphStyle.vue

@@ -52,7 +52,8 @@
         <div class="color-picker-item">
           <label>字体颜色</label>
           <div class="color-picker-border">
-            <input v-model="nodeFontColor" type="color" class="square-picker"/>
+            <el-color-picker v-model="nodeFontColor" show-alpha class="square-picker"/>
+<!--            <input v-model="nodeFontColor" type="color" class="square-picker"/>-->
           </div>
         </div>
 
@@ -80,14 +81,16 @@
         <div class="color-picker-item">
           <label>填充颜色</label>
           <div class="color-picker-border">
-            <input v-model="nodeFill" type="color" class="square-picker"/>
+            <el-color-picker v-model="nodeFill" show-alpha class="square-picker"/>
+<!--            <input v-model="nodeFill" type="color" class="square-picker"/>-->
           </div>
         </div>
 
         <div class="color-picker-item">
           <label>边框颜色</label>
           <div class="color-picker-border">
-            <input v-model="nodeStroke" type="color" class="square-picker"/>
+            <el-color-picker v-model="nodeStroke" show-alpha class="square-picker"/>
+<!--            <input v-model="nodeStroke" type="color" class="square-picker"/>-->
           </div>
         </div>
 
@@ -136,7 +139,8 @@
         <div class="color-picker-item">
           <label>字体颜色</label>
           <div class="color-picker-border">
-            <input v-model="edgeFontColor" type="color" class="square-picker"/>
+            <el-color-picker v-model="edgeFontColor" class="square-picker" show-alpha />
+<!--            <input v-model="edgeFontColor" type="color" class="square-picker"/>-->
           </div>
         </div>
 
@@ -164,7 +168,8 @@
         <div class="color-picker-item">
           <label>线条颜色</label>
           <div class="color-picker-border">
-            <input v-model="edgeStroke" type="color" class="square-picker"/>
+            <el-color-picker v-model="edgeStroke" class="square-picker" show-alpha />
+<!--            <input v-model="edgeStroke" type="color" class="square-picker"/>-->
           </div>
         </div>
       </div>
@@ -221,33 +226,51 @@
               </div>
             </template>
 
-            <div
+            <el-dropdown
+                trigger="contextmenu"
+                placement="bottom-start"
                 v-for="item in group.configs"
                 :key="item.id"
-                class="config-card"
+                style="width: 100%; display: block;"
-                :class="{
-                'card-using': usingConfigIds.includes(item.id),
-                'card-checked': checkedConfigIds.includes(item.id)
-              }"
-                @click="toggleApplyConfig(item)"
             >
-              <div class="card-left">
+              <div
-                <div class="checkbox-wrapper">
+                  class="config-card"
-                  <input type="checkbox" :value="item.id" v-model="checkedConfigIds" @click.stop
+                  :class="{
-                         class="config-checkbox"/>
+                    'card-using': usingConfigIds.includes(item.id),
-                </div>
+                    'card-checked': checkedConfigIds.includes(item.id)
-                <div class="card-info">
+                  }"
-                  <div class="card-title-row">
+                  @click="toggleApplyConfig(item)"
-                    <span class="card-name">{{ item.canvas_name }}</span>
+              >
-                    <span v-if="usingConfigIds.includes(item.id)" class="status-badge">已应用</span>
+                <div class="card-left">
+                  <div class="checkbox-wrapper">
+                    <input type="checkbox" :value="item.id" v-model="checkedConfigIds" @click.stop class="config-checkbox"/>
+                  </div>
+                  <div class="card-info">
+                    <div class="card-title-row">
+                      <span class="card-name">{{ item.canvas_name }}</span>
+                      <span v-if="usingConfigIds.includes(item.id)" class="status-badge">已应用</span>
+                    </div>
+                    <span class="card-tag">标签: {{ item.current_label }}</span>
                   </div>
-                  <span class="card-tag">标签: {{ item.current_label }}</span>
+                </div>
+                <div class="card-right">
+                  <i class="el-icon-delete delete-icon" @click.stop="deleteSingleConfig(item.id)"></i>
                 </div>
               </div>
-              <div class="card-right">
+
-                <i class="el-icon-delete delete-icon" @click.stop="deleteSingleConfig(item.id)"></i>
+              <template #dropdown>
-              </div>
+                <el-dropdown-menu>
-            </div>
+                  <el-dropdown-item disabled style="font-weight: bold; color: #333;">移动至方案：</el-dropdown-item>
+                  <el-dropdown-item
+                      v-for="targetGroup in styleGroups.filter(g => g.id !== group.id)"
+                      :key="targetGroup.id"
+                      @click="moveConfigToGroup(item, targetGroup)"
+                  >
+                    {{ targetGroup.group_name }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </el-collapse-item>
         </el-collapse>
       </div>
@@ -362,7 +385,7 @@ export default {
       edgeFontFamily: 'Microsoft YaHei, sans-serif',
       edgeFontSize: 10,
       edgeFontColor: '#666666',
-      edgeType: 'line',
+      edgeType: 'quadratic',
       edgeLineWidth: 2,
       edgeStroke: '#EF4444',
       defaultData: {
@@ -489,6 +512,7 @@ export default {
     },
     syncAndRefresh() {
       const label = tagToLabelMap[this.activeTags];
+      console.log(this.nodeFill)
       if (label) {
         this.tagStyles[label] = {
           nodeShowLabel: this.nodeShowLabel, nodeFontFamily: this.nodeFontFamily, nodeFontSize: this.nodeFontSize,
@@ -589,31 +613,66 @@ export default {
       try {
         const res = await getGroupedGraphStyleList();
         if (res.code === 200) {
-          this.styleGroups = res.data.map(group => ({
+          // 1. 数据处理与【强制去重】
-            ...group,
+          // 这里的逻辑确保了同一个配置 ID 在同一个分组内不会出现两次
-            configs: group.configs.map(conf => ({
+          this.styleGroups = res.data.map(group => {
-              ...conf,
+            const idSet = new Set();
-              styles: typeof conf.styles === 'string' ? JSON.parse(conf.styles) : conf.styles
+            const uniqueConfigs = [];
-            }))
+
-          }));
+            (group.configs || []).forEach(conf => {
-
+              if (!idSet.has(conf.id)) {
-          // 仅在初始加载且没有选中项时执行自动同步逻辑
+                idSet.add(conf.id);
+                uniqueConfigs.push({
+                  ...conf,
+                  // 安全解析 styles 字符串
+                  styles: typeof conf.styles === 'string' ? JSON.parse(conf.styles) : conf.styles
+                });
+              } else {
+                console.warn(`检测到重复 ID: ${conf.id}，已在前端过滤`);
+              }
+            });
+
+            return {
+              ...group,
+              configs: uniqueConfigs
+            };
+          });
+
+          // 2. 初始加载时的应用逻辑（带排他性同步）
           if (this.usingConfigIds.length === 0) {
+            const tempUsingIds = [];
+            const seenLabels = new Set(); // 记录已处理的标签（如：疾病、药品）
+
             this.styleGroups.forEach(group => {
+              // 只处理后端标记为 active 的方案组
               if (group.is_active) {
+                // 自动展开激活的折叠面板
                 if (!this.activeCollapseNames.includes(group.id)) {
                   this.activeCollapseNames.push(group.id);
                 }
-                const ids = group.configs.map(c => c.id);
+
-                this.usingConfigIds = [...this.usingConfigIds, ...ids];
+                // 遍历组内配置进行标签去重
+                group.configs.forEach(conf => {
+                  if (!seenLabels.has(conf.current_label)) {
+                    tempUsingIds.push(conf.id);
+                    seenLabels.add(conf.current_label);
+                  } else {
+                    console.warn(`标签冲突拦截：方案【${group.group_name}】中的配置【${conf.canvas_name}】因标签【${conf.current_label}】已存在而被忽略`);
+                  }
+                });
               }
             });
+
+            // 最终赋值
+            this.usingConfigIds = tempUsingIds;
           }
 
+          // 3. 驱动图谱重新渲染
           this.updateAllElements();
         }
       } catch (err) {
         console.error("加载配置失败:", err);
+        ElMessage.error("获取方案列表失败");
       }
     },
     async fetchGroupNames() {
@@ -637,40 +696,100 @@ export default {
       }
       this.updateAllElements();
     },
+    /**
+     * 新增功能：将配置移动到另一个方案
+     */
+    async moveConfigToGroup(config, targetGroup) {
+      try {
+        // 1. 构建更新负载
+        const payload = {
+          id: config.id, // 确保有 ID，后端才会执行更新而非新增
+          canvas_name: config.canvas_name,
+          group_name: targetGroup.group_name, // 目标方案名
+          current_label: config.current_label,
+          styles: config.styles
+        };
+
+        const res = await saveGraphStyle(payload);
+
+        if (res.code === 200) {
+          ElMessage.success(`已成功移动至【${targetGroup.group_name}】`);
+
+          // 2. 【核心修复】手动清理本地 styleGroups 中的旧引用，避免 fetchConfigs 响应延迟导致的视觉重复
+          this.styleGroups = this.styleGroups.map(group => {
+            return {
+              ...group,
+              // 过滤掉所有组里 ID 等于当前移动配置 ID 的项
+              configs: group.configs.filter(c => c.id !== config.id)
+            };
+          });
 
+          // 3. 重新获取最新的服务器状态
+          await this.fetchConfigs();
+        }
+      } catch (err) {
+        console.error("移动配置失败:", err);
+        ElMessage.error("移动操作失败，请重试");
+      }
+    },
     /**
      * 修改后的应用全案方法
      * 逻辑：保留当前已手动选中的配置，新方案中冲突的配置不予应用
      */
     async applyWholeGroup(group) {
       try {
-        // 1. 获取当前正在使用的所有配置项对象
+        // 1. 【新增】定义必须包含的 5 个核心标签
-        const currentlyUsingConfigs = [];
+        const REQUIRED_TAGS = ['疾病', '症状', '药品', '检查', '其他'];
+
+        // 2. 【新增】获取当前方案组里已有的标签
+        const currentLabels = group.configs.map(conf => conf.current_label);
+        const hasTags = new Set(currentLabels);
+
+        // 3. 【新增】找出缺失的标签
+        const missingTags = REQUIRED_TAGS.filter(tag => !hasTags.has(tag));
+
+        // 4. 【新增】拦截逻辑：如果标签不全，弹出提示并返回
+        if (missingTags.length > 0) {
+          return   ElMessage.warning('该方案配置不完整，无法应用。目前缺少：'+missingTags.join('、'));
+        }
+        //  获取当前正在使用的所有标签名（用于外部排他）
+        const currentlyUsingLabels = [];
         this.styleGroups.forEach(g => {
           g.configs.forEach(c => {
             if (this.usingConfigIds.includes(c.id)) {
-              currentlyUsingConfigs.push(c);
+              currentlyUsingLabels.push(c.current_label);
             }
           });
         });
 
-        // 2. 提取出当前已选中的标签列表 (例如: ['疾病', '药品'])
+        //  对新方案内部进行去重：如果方案内有多个同标签配置，只取第一个
-        const currentlySelectedLabels = currentlyUsingConfigs.map(c => c.current_label);
+        const uniqueNewConfigs = [];
+        const seenLabelsInNewGroup = new Set();
+
+        group.configs.forEach(conf => {
+          if (!seenLabelsInNewGroup.has(conf.current_label)) {
+            uniqueNewConfigs.push(conf);
+            seenLabelsInNewGroup.add(conf.current_label);
+          }
+        });
 
-        // 3. 过滤新方案：如果新方案里的配置标签 已经存在于当前已选列表中，则剔除
+        //  过滤掉与当前已选标签冲突的配置（外部排他）
-        const filteredNewConfigIds = group.configs
+        const filteredNewConfigIds = uniqueNewConfigs
-            .filter(newConf => !currentlySelectedLabels.includes(newConf.current_label))
+            .filter(newConf => !currentlyUsingLabels.includes(newConf.current_label))
             .map(newConf => newConf.id);
 
-        // 4. 将过滤后的新 ID 追加到现有的选中列表中
+        if (filteredNewConfigIds.length === 0) {
+          return ElMessage.info("该方案中的标签配置已存在，无需重复应用");
+        }
+
+        //  追加 ID
         this.usingConfigIds = [...this.usingConfigIds, ...filteredNewConfigIds];
 
-        // 5. 调用后端接口更新激活状态（保持后端数据同步）
+        // 调用后端接口更新状态
         const res = await applyGraphStyleGroup(group.id);
         if (res.code === 200) {
-          // 重新获取列表以刷新 UI 状态（如“已应用”按钮状态）
           await this.fetchConfigs();
-          ElMessage.success(`方案【${group.group_name}】已应用，已保留您手动选择的标签`);
+          ElMessage.success(`方案【${group.group_name}】已应用，已自动过滤重复标签`);
         }
       } catch (err) {
         console.error(err);
@@ -780,11 +899,7 @@ export default {
           .some(g => g.configs.some(c => this.usingConfigIds.includes(c.id)));
 
       if (isAnyCheckedConfigUsing || isAnyCheckedGroupUsing) {
-        return ElMessageBox.alert(
+        return ElMessage.warning('选中的项目中包含“正在应用”的配置，请先取消应用后再执行删除操作。');
-            '选中的项目中包含“正在应用”的配置，请先取消应用后再执行删除操作。',
-            '无法执行删除',
-            { type: 'error', confirmButtonText: '我知道了' }
-        );
       }
 
       // 3. 最小保留数判断 (针对方案组)
@@ -1022,9 +1137,11 @@ export default {
 .form-group select, .form-group input[type="number"] {
   flex: 1;
   padding: 5px;
-  border: 1px solid #e2e8f0;
+  border: none;
   border-radius: 4px;
   width: 100px;
+  box-shadow: 0 0 0 2px #EBF0FF;
+  outline: none;
 }
 
 .slider-wrapper {
@@ -1056,14 +1173,11 @@ export default {
 
 .val-text-black {
   color: #000;
-  font-weight: bold;
   font-size: 13px;
   min-width: 35px;
 }
 
 .color-picker-border {
-  padding: 3px;
-  border: 1px solid #e2e8f0;
   border-radius: 4px;
   display: flex;
 }
@@ -1367,7 +1481,6 @@ export default {
 <style>
 .el-message-box__header {
   text-align: left !important;
-  padding-top: 15px !important;
 }
 
 .el-message-box__title {
@@ -1380,4 +1493,5 @@ export default {
   background-color: #1559f3 !important;
   border-color: #1559f3 !important;
 }
+
 </style>

vue/src/system/KGData.vue

@@ -656,8 +656,8 @@ onMounted(() => {
 .folder-tab-item { padding: 8px 20px; font-size: 12px; color: #86909c; cursor: pointer; background-color: #ecf2ff; border: 1px solid #dcdfe6; border-bottom: none; border-radius: 8px 8px 0 0; }
 .folder-tab-item.active { background-color: #f1f6ff !important; color: #2869ff; font-weight: bold; border: 2px solid #6896ff; border-bottom: 2px solid #ffffff; margin-bottom: -1px; z-index: 3; }
 .data-card-container { background: #ffffff; border-radius: 30px; padding: 20px 20px; box-shadow: 2px -1px 14px 4px #E1EAFF; border: 1px solid #eff4ff; position: relative; z-index: 4; }
-.filter-bar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px; }
+.filter-bar { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 20px;gap: 20px }
-.filter-inputs { display: flex; gap: 35px; flex-wrap: nowrap;margin-right: 20px; }
+.filter-inputs { display: flex; gap: 35px; flex-wrap: nowrap;}
 .input-group-inline { display: flex; align-items: center; gap: 12px; flex-shrink: 0; white-space: nowrap; }
 .filter-label-text { font-size: 14px; color: #165dff; font-weight: 600; flex-shrink: 0; }
 .search-input,.input-group-inline :deep(.el-input) { width: 200px !important;box-shadow: 0 0 0 2px #EBF0FF;border: none;border-radius: 5px; }
@@ -817,18 +817,7 @@ onMounted(() => {
   min-height: 300px;
 }
 
-.filter-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 30px;
-}
 
-.filter-inputs {
-  display: flex;
-  gap: 35px;
-  flex-wrap: nowrap;
-}
 
 .input-group-inline {
   display: flex;
@@ -845,9 +834,6 @@ onMounted(() => {
   flex-shrink: 0;
 }
 
-.search-input, .search-select {
-  width: 160px !important;
-}
 
 .btn-search-ref {
   background: #165dff !important;