From 66f2ca1f6a9aa30e018dade26dade9569f02cd07 Mon Sep 17 00:00:00 2001
From: hanyuqing <1106611654@qq.com>
Date: Tue, 23 Dec 2025 14:14:30 +0800
Subject: [PATCH] all

---
 vue/src/components/Menu.vue     |   9 +-
 vue/src/router/index.js         |  12 +
 vue/src/system/GraphBuilder.vue | 272 ++++++++++++++
 vue/src/system/GraphDemo.vue    | 144 +-------
 vue/src/system/GraphStyle.vue   | 788 ++++++++++++++++++++++++++++++++++++++++
 5 files changed, 1080 insertions(+), 145 deletions(-)
 create mode 100644 vue/src/system/GraphBuilder.vue
 create mode 100644 vue/src/system/GraphStyle.vue

diff --git a/vue/src/components/Menu.vue b/vue/src/components/Menu.vue
index 02b2de8..8b59440 100644
--- a/vue/src/components/Menu.vue
+++ b/vue/src/components/Menu.vue
@@ -87,7 +87,7 @@ const menuItems = ref([
   },
   {
     name: '知识图谱构建',
-    path: '/kg-construction',
+    path: '/kg-builder',
     icon: '🔧'
   },
   {
@@ -99,7 +99,12 @@ const menuItems = ref([
     name: '知识图谱数据',
     path: '/kg-data',
     icon: '📊'
-  }
+  },
+  {
+    name: '图谱可视化设置',
+    path: '/kg-style',
+    icon: ''
+  },
 ]);
 
 // 活跃菜单索引
diff --git a/vue/src/router/index.js b/vue/src/router/index.js
index 210bc9d..71eb23b 100644
--- a/vue/src/router/index.js
+++ b/vue/src/router/index.js
@@ -3,6 +3,8 @@ import Login from '../system/Login.vue'
 import Index from '../system/Index.vue'
 import Profile from '../system/Profile.vue'
 import Display from '../system/GraphDemo.vue'
+import Builder from '../system/GraphBuilder.vue'
+import Style from '../system/GraphStyle.vue'
 const routes = [
   {
     path: '/',
@@ -28,6 +30,16 @@ const routes = [
     path: '/kg-display',
     name: 'Display',
     component: Display
+  },
+  {
+    path: '/kg-builder',
+    name: 'Builder',
+    component: Builder
+  },
+  {
+    path: '/kg-style',
+    name: 'Style',
+    component: Style
   }
 ]
 
diff --git a/vue/src/system/GraphBuilder.vue b/vue/src/system/GraphBuilder.vue
new file mode 100644
index 0000000..bfed56c
--- /dev/null
+++ b/vue/src/system/GraphBuilder.vue
@@ -0,0 +1,272 @@
+<template>
+  <div style="display: flex;
+  height: 100vh;">
+    <Menu
+        :initial-active="1"
+    />
+    <div class="qwen-chat">
+      <!-- 聊天消息区域 -->
+      <div ref="messagesContainer" class="chat-messages">
+        <div
+            v-for="(msg, index) in messages"
+            :key="index"
+            :class="['message', msg.role]"
+        >
+          <div class="bubble">{{ msg.content }}</div>
+        </div>
+      </div>
+      <!-- 输入区域（Qwen 风格） -->
+      <div class="input-area">
+      <textarea
+          v-model="inputText"
+          placeholder="向千问提问"
+          class="input-box"
+          @keyup.enter.exact.prevent="sendMessage"
+          rows="1"
+      ></textarea>
+
+        <div class="action-buttons">
+          <button class="btn" @click="insertPrefix('深度思考：')">
+            <span>☰</span> 深度思考
+          </button>
+          <button class="btn" @click="insertPrefix('深度研究：')">
+            <span>🔍</span> 深度研究
+          </button>
+          <button class="btn" @click="insertPrefix('```代码\n')">
+            <span><></span> 代码
+          </button>
+          <button class="btn" @click="insertPrefix('生成一张图片：')">
+            <span>🖼️</span> 图像
+          </button>
+          <button class="btn" @click="insertPrefix('翻译成英文：')">
+            <span>🌐</span> 翻译
+          </button>
+          <button class="btn more-btn">...</button>
+        </div>
+
+        <div class="icon-group">
+          <span class="icon" title="切换语言">🌍</span>
+          <span class="icon" title="编辑模式">✏️</span>
+          <button class="send-btn" @click="sendMessage" title="发送">
+            <span>📤</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import Menu from "@/components/Menu.vue";
+
+export default {
+  name: 'QwenChat',
+  components: {Menu},
+  data() {
+    return {
+      inputText: '',
+      messages: [
+        { role: 'assistant', content: '你好！我是 Qwen，有什么可以帮你的吗？' }
+      ]
+    };
+  },
+  methods: {
+    sendMessage() {
+      const text = this.inputText.trim();
+      if (!text) return;
+
+      // 添加用户消息
+      this.messages.push({ role: 'user', content: text });
+      this.inputText = '';
+
+      // 模拟 AI 回复（可替换为真实 API）
+      setTimeout(() => {
+        this.messages.push({
+          role: 'assistant',
+          content: `你刚才说：“${text}” —— 这是一个模拟回复。`
+        });
+      }, 600);
+    },
+    insertPrefix(prefix) {
+      this.inputText += prefix;
+      this.$nextTick(() => {
+        // 自动聚焦到 textarea 末尾（简单处理）
+        const el = this.$el.querySelector('.input-box');
+        el.focus();
+      });
+    },
+    scrollToBottom() {
+      this.$nextTick(() => {
+        const container = this.$refs.messagesContainer;
+        if (container) {
+          container.scrollTop = container.scrollHeight;
+        }
+      });
+    }
+  },
+  watch: {
+    messages() {
+      this.scrollToBottom();
+    }
+  },
+  mounted() {
+    this.scrollToBottom();
+  }
+};
+</script>
+
+<style scoped>
+.qwen-chat {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  max-width: 800px;
+  margin: 0 auto;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* === 消息区域 === */
+.chat-messages {
+  flex: 1;
+  padding: 16px;
+  overflow-y: auto;
+  background-color: #f9f9f9;
+  display: flex;
+  flex-direction: column;
+}
+
+.message {
+  display: flex;
+  margin-bottom: 12px;
+}
+
+.message.user {
+  justify-content: flex-end;
+}
+
+.message.assistant {
+  justify-content: flex-start;
+}
+
+.bubble {
+  padding: 10px 14px;
+  border-radius: 18px;
+  max-width: 75%;
+  word-break: break-word;
+  line-height: 1.5;
+  font-size: 14px;
+}
+
+.message.user .bubble {
+  background-color: #007bff;
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+
+.message.assistant .bubble {
+  background-color: #e9ecef;
+  color: #333;
+  border-bottom-left-radius: 4px;
+}
+
+/* === 输入区域 === */
+.input-area {
+  padding: 16px;
+  background: white;
+  border-top: 1px solid #eee;
+}
+
+.input-box {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid #d9d9d9;
+  border-radius: 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+  transition: border-color 0.2s ease;
+  box-sizing: border-box;
+}
+
+.input-box:focus {
+  border-color: #007bff;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+  margin: 12px 0;
+  overflow-x: auto;
+  white-space: nowrap;
+  padding: 0 4px;
+}
+
+.btn {
+  padding: 6px 12px;
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 12px;
+  font-size: 12px;
+  color: #333;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.btn:hover {
+  background: #e9e9e9;
+}
+
+.btn span {
+  font-size: 12px;
+}
+
+.more-btn {
+  background: transparent;
+  border: 1px dashed #ccc;
+  color: #666;
+}
+
+.icon-group {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.icon,
+.send-btn span {
+  font-size: 16px;
+  cursor: pointer;
+  color: #999;
+}
+
+.icon:hover,
+.send-btn:hover span {
+  color: #333;
+}
+
+.send-btn {
+  background: #9b68ff;
+  border: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.send-btn:hover {
+  background: #8a53e0;
+}
+</style>
\ No newline at end of file
diff --git a/vue/src/system/GraphDemo.vue b/vue/src/system/GraphDemo.vue
index a952f8d..6b83f5c 100644
--- a/vue/src/system/GraphDemo.vue
+++ b/vue/src/system/GraphDemo.vue
@@ -3,147 +3,6 @@
     <Menu
         :initial-active="0"
     />
-    <!-- 控制面板 -->
-<!--    <div class="control-panel">-->
-<!--      &lt;!&ndash; 节点控制 &ndash;&gt;-->
-<!--      <div class="section">-->
-<!--        <h5>节点控制</h5>-->
-<!--        <label style="text-align: left;margin: 10px 0;display: flex;align-items: center;font-size: 12px;">-->
-<!--          <input v-model="nodeShowLabel" type="checkbox" />-->
-<!--          显示节点标签-->
-<!--        </label>-->
-<!--        <div class="form-group">-->
-<!--          <label>字体名称:</label>-->
-<!--          <select v-model="nodeFontFamily">-->
-<!--            &lt;!&ndash; 中文常用字体 &ndash;&gt;-->
-<!--            <option value="Microsoft YaHei, sans-serif">微软雅黑</option>-->
-<!--            <option value="SimSun, serif">宋体（SimSun）</option>-->
-<!--            <option value="SimHei, sans-serif">黑体（SimHei）</option>-->
-<!--            <option value="KaiTi, serif">楷体（KaiTi）</option>-->
-<!--            <option value="FangSong, serif">仿宋（FangSong）</option>-->
-<!--            <option value="PingFang SC, Helvetica Neue, sans-serif">苹方（PingFang SC）</option>-->
-
-<!--            &lt;!&ndash; 英文/通用字体 &ndash;&gt;-->
-<!--            <option value="Arial, sans-serif">Arial</option>-->
-<!--            <option value="Helvetica, sans-serif">Helvetica</option>-->
-<!--            <option value="Times New Roman, serif">Times New Roman</option>-->
-<!--            <option value="Georgia, serif">Georgia</option>-->
-<!--            <option value="Courier New, monospace">Courier New（等宽）</option>-->
-<!--            <option value="Verdana, sans-serif">Verdana</option>-->
-<!--            <option value="Tahoma, sans-serif">Tahoma</option>-->
-<!--            <option value="Impact, sans-serif">Impact</option>-->
-<!--          </select>-->
-<!--        </div>-->
-<!--        <div class="slider-group">-->
-<!--          <span>字体大小: {{ nodeFontSize }}px</span>-->
-<!--          <input-->
-<!--              v-model.number="nodeFontSize"-->
-<!--              type="range"-->
-<!--              min="10"-->
-<!--              max="24"-->
-<!--              step="1"-->
-<!--          />-->
-<!--        </div>-->
-
-<!--        <div class="color-picker">-->
-<!--          <label>字体颜色:</label>-->
-<!--          <input v-model="nodeFontColor" type="color" />-->
-<!--        </div>-->
-<!--        <div class="form-group">-->
-<!--          <label>图形:</label>-->
-<!--          <select v-model="nodeShape">-->
-<!--            <option value="circle">圆形</option>-->
-<!--            <option value="diamond">菱形</option>-->
-<!--            <option value="triangle">三角形</option>-->
-<!--            <option value="rect">矩形</option>-->
-<!--            <option value="star">星形</option>-->
-<!--            <option value="hexagon">六边形</option>-->
-<!--          </select>-->
-<!--        </div>-->
-<!--        <div class="form-group">-->
-<!--          <label>尺寸:</label>-->
-<!--          <input v-model.number="nodeSize" type="number" min="30" max="100" />-->
-<!--        </div>-->
-<!--        <div class="color-picker">-->
-<!--          <label>填充颜色:</label>-->
-<!--          <input v-model="nodeFill" type="color" />-->
-<!--        </div>-->
-<!--        <div class="color-picker">-->
-<!--          <label>边框颜色:</label>-->
-<!--          <input v-model="nodeStroke" type="color" />-->
-<!--        </div>-->
-<!--        <div class="form-group">-->
-<!--          <label>边框尺寸:</label>-->
-<!--          <input v-model.number="nodeLineWidth" type="number" min="1" max="5" />-->
-<!--        </div>-->
-<!--      </div>-->
-
-<!--      &lt;!&ndash; 连边控制 &ndash;&gt;-->
-<!--      <div class="section">-->
-<!--        <h5>连边控制</h5>-->
-<!--        <label style="text-align: left;margin: 10px 0;display: flex;align-items: center;font-size: 12px;">-->
-<!--          <input v-model="edgeShowLabel" type="checkbox" />-->
-<!--          显示连边标签-->
-<!--          <input v-model="edgeEndArrow" type="checkbox" style="margin-left: 10px"/>-->
-<!--          显示端点箭头-->
-<!--        </label>-->
-<!--        <div class="form-group">-->
-<!--          <label>字体名称:</label>-->
-<!--          <select v-model="edgeFontFamily">-->
-<!--            <option value="Microsoft YaHei, sans-serif">微软雅黑</option>-->
-<!--            <option value="SimSun, serif">宋体</option>-->
-<!--            <option value="SimHei, sans-serif">黑体</option>-->
-<!--            <option value="Arial, sans-serif">Arial</option>-->
-<!--            <option value="sans-serif">无衬线（默认）</option>-->
-<!--          </select>-->
-<!--        </div>-->
-<!--        <div class="slider-group">-->
-<!--          <span>字体大小: {{ edgeFontSize }}px</span>-->
-<!--          <input-->
-<!--              v-model.number="edgeFontSize"-->
-<!--              type="range"-->
-<!--              min="8"-->
-<!--              max="16"-->
-<!--              step="1"-->
-<!--          />-->
-<!--        </div>-->
-<!--        <div class="color-picker">-->
-<!--          <label>字体颜色:</label>-->
-<!--          <input v-model="edgeFontColor" type="color" />-->
-<!--        </div>-->
-<!--        <div class="form-group">-->
-<!--          <label>连边类型:</label>-->
-<!--          <select v-model="edgeType">-->
-<!--            <option value="line">直线</option>-->
-<!--            <option value="polyline">折线边</option>-->
-<!--            <option value="cubic">三次贝塞尔曲线边</option>-->
-<!--            <option value="cubic-horizontal">水平三次贝塞尔曲线边</option>-->
-<!--            <option value="cubic-vertical">垂直三次贝塞尔曲线边</option>-->
-<!--            <option value="quadratic">二次贝塞尔曲线边</option>-->
-
-<!--          </select>-->
-<!--        </div>-->
-<!--        <div class="form-group">-->
-<!--          <label>线粗细:</label>-->
-<!--          <input v-model.number="edgeLineWidth" type="number" min="1" max="5" />-->
-<!--        </div>-->
-<!--        <div class="color-picker">-->
-<!--          <label>线条颜色:</label>-->
-<!--          <input v-model="edgeStroke" type="color" />-->
-<!--        </div>-->
-<!--&lt;!&ndash;        <label>&ndash;&gt;-->
-<!--&lt;!&ndash;          <input v-model="edgeEndArrow" type="checkbox" />&ndash;&gt;-->
-<!--&lt;!&ndash;          显示端点箭头&ndash;&gt;-->
-<!--&lt;!&ndash;        </label>&ndash;&gt;-->
-<!--      </div>-->
-<!--      <button @click="resetView">重置视图</button>-->
-<!--      <button @click="resetStyle">重置样式</button>-->
-<!--      &lt;!&ndash; 操作按钮 &ndash;&gt;-->
-
-<!--    </div>-->
-
-
-
     <div class="icd10-tree-container" style="overflow: scroll;width: 25%">
       <div>
         <el-radio-group v-model="typeRadio" @change="changeTree">
@@ -201,7 +60,7 @@ import Menu from "@/components/Menu.vue";
 import {a} from "vue-router/dist/devtools-EWN81iOl.mjs";
 
 export default {
-  name: 'GraphDemo',
+  name: 'Display',
   components: {Menu},
   data() {
     return {
@@ -255,7 +114,6 @@ export default {
         { key: 'Other', label: '其他', color: '#336eee' }
       ],
       visibleCategories: new Set(), // 先空着
-
     }
   },
 
diff --git a/vue/src/system/GraphStyle.vue b/vue/src/system/GraphStyle.vue
new file mode 100644
index 0000000..da24385
--- /dev/null
+++ b/vue/src/system/GraphStyle.vue
@@ -0,0 +1,788 @@
+<template>
+  <div class="knowledge-graph-container">
+      <Menu
+          :initial-active="5"
+      />
+        <div class="control-panel">
+          <!-- 节点控制 -->
+          <div class="section">
+            <h5>节点控制</h5>
+            <label style="text-align: left;margin: 10px 0;display: flex;align-items: center;font-size: 12px;">
+              <input v-model="nodeShowLabel" type="checkbox" />
+              显示节点标签
+            </label>
+            <div class="form-group">
+              <label>字体名称:</label>
+              <select v-model="nodeFontFamily">
+                <!-- 中文常用字体 -->
+                <option value="Microsoft YaHei, sans-serif">微软雅黑</option>
+                <option value="SimSun, serif">宋体（SimSun）</option>
+                <option value="SimHei, sans-serif">黑体（SimHei）</option>
+                <option value="KaiTi, serif">楷体（KaiTi）</option>
+                <option value="FangSong, serif">仿宋（FangSong）</option>
+                <option value="PingFang SC, Helvetica Neue, sans-serif">苹方（PingFang SC）</option>
+
+                <!-- 英文/通用字体 -->
+                <option value="Arial, sans-serif">Arial</option>
+                <option value="Helvetica, sans-serif">Helvetica</option>
+                <option value="Times New Roman, serif">Times New Roman</option>
+                <option value="Georgia, serif">Georgia</option>
+                <option value="Courier New, monospace">Courier New（等宽）</option>
+                <option value="Verdana, sans-serif">Verdana</option>
+                <option value="Tahoma, sans-serif">Tahoma</option>
+                <option value="Impact, sans-serif">Impact</option>
+              </select>
+            </div>
+            <div class="slider-group">
+              <span>字体大小: {{ nodeFontSize }}px</span>
+              <input
+                  v-model.number="nodeFontSize"
+                  type="range"
+                  min="10"
+                  max="24"
+                  step="1"
+              />
+            </div>
+            <div class="color-picker">
+              <label>字体颜色:</label>
+              <input v-model="nodeFontColor" type="color" />
+            </div>
+            <div class="form-group">
+              <label>图形:</label>
+              <select v-model="nodeShape">
+                <option value="circle">圆形</option>
+                <option value="diamond">菱形</option>
+                <option value="triangle">三角形</option>
+                <option value="rect">矩形</option>
+                <option value="star">星形</option>
+                <option value="hexagon">六边形</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>尺寸:</label>
+              <input v-model.number="nodeSize" type="number" min="30" max="100" />
+            </div>
+            <div class="color-picker">
+              <label>填充颜色:</label>
+              <input v-model="nodeFill" type="color" />
+            </div>
+            <div class="color-picker">
+              <label>边框颜色:</label>
+              <input v-model="nodeStroke" type="color" />
+            </div>
+            <div class="form-group">
+              <label>边框尺寸:</label>
+              <input v-model.number="nodeLineWidth" type="number" min="1" max="5" />
+            </div>
+          </div>
+          <!-- 连边控制 -->
+          <div class="section">
+            <h5>连边控制</h5>
+            <label style="text-align: left;margin: 10px 0;display: flex;align-items: center;font-size: 12px;">
+              <input v-model="edgeShowLabel" type="checkbox" />
+              显示连边标签
+              <input v-model="edgeEndArrow" type="checkbox" style="margin-left: 10px"/>
+              显示端点箭头
+            </label>
+            <div class="form-group">
+              <label>字体名称:</label>
+              <select v-model="edgeFontFamily">
+                <option value="Microsoft YaHei, sans-serif">微软雅黑</option>
+                <option value="SimSun, serif">宋体</option>
+                <option value="SimHei, sans-serif">黑体</option>
+                <option value="Arial, sans-serif">Arial</option>
+                <option value="sans-serif">无衬线（默认）</option>
+              </select>
+            </div>
+            <div class="slider-group">
+              <span>字体大小: {{ edgeFontSize }}px</span>
+              <input
+                  v-model.number="edgeFontSize"
+                  type="range"
+                  min="8"
+                  max="16"
+                  step="1"
+              />
+            </div>
+            <div class="color-picker">
+              <label>字体颜色:</label>
+              <input v-model="edgeFontColor" type="color" />
+            </div>
+            <div class="form-group">
+              <label>连边类型:</label>
+              <select v-model="edgeType">
+                <option value="line">直线</option>
+                <option value="polyline">折线边</option>
+                <option value="cubic">三次贝塞尔曲线边</option>
+                <option value="cubic-horizontal">水平三次贝塞尔曲线边</option>
+                <option value="cubic-vertical">垂直三次贝塞尔曲线边</option>
+                <option value="quadratic">二次贝塞尔曲线边</option>
+              </select>
+            </div>
+            <div class="form-group">
+              <label>线粗细:</label>
+              <input v-model.number="edgeLineWidth" type="number" min="1" max="5" />
+            </div>
+            <div class="color-picker">
+              <label>线条颜色:</label>
+              <input v-model="edgeStroke" type="color" />
+            </div>
+    <!--        <label>-->
+    <!--          <input v-model="edgeEndArrow" type="checkbox" />-->
+    <!--          显示端点箭头-->
+    <!--        </label>-->
+          </div>
+          <button @click="resetView">重置视图</button>
+          <button @click="resetStyle">重置样式</button>
+          <!-- 操作按钮 -->
+        </div>
+    <!-- 图谱容器 -->
+    <div ref="graphContainer" class="graph-container" id="container"></div>
+  </div>
+</template>
+
+<script>
+import { getTestGraphData } from "@/api/graph"
+import { Graph } from '@antv/g6';
+import Menu from "@/components/Menu.vue";
+
+export default {
+  name: 'GraphDemo',
+  components: {Menu},
+  data() {
+    return {
+      G6: null, // 添加这个
+      // 节点样式
+      nodeShowLabel: true,
+      nodeFontSize: 12,
+      nodeFontColor: '#fff',
+      nodeShape: 'circle',
+      nodeSize: 60,
+      nodeFill: '#9FD5FF',
+      nodeStroke: '#5B8FF9',
+      nodeLineWidth: 2,
+      nodeFontFamily: 'Microsoft YaHei, sans-serif',
+
+      // 边样式
+      edgeShowLabel: true,
+      edgeFontSize: 10,
+      edgeFontColor: '#666666',
+      edgeType: 'line',
+      edgeLineWidth: 2,
+      edgeStroke: '#F00',
+      edgeEndArrow: true,
+      edgeFontFamily: 'Microsoft YaHei, sans-serif',
+
+      defaultData: {
+        "nodes": [
+          {
+            "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975",
+            "data": {
+              "name": "霍乱",
+              "diagnosisCode": "A00.900",
+              "nodeId": 6978,
+              "label": "Disease"
+            }
+          },
+          {
+            "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:9461",
+            "data": {
+              "name": "腹泻",
+              "nodeId": 9464,
+              "label": "Symptom"
+            }
+          },
+          {
+            "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:5992",
+            "data": {
+              "name": "脱水",
+              "nodeId": 5995,
+              "label": "Disease"
+            }
+          },
+          {
+            "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:1277",
+            "data": {
+              "name": "呕吐",
+              "nodeId": 1280,
+              "label": "Disease"
+            }
+          },
+          {
+            "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:26775",
+            "data": {
+              "name": "由霍乱弧菌感染所致",
+              "nodeId": 26778,
+              "label": "Cause"
+            }
+          },
+          {
+            "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:48981",
+            "data": {
+              "name": "复方磺胺甲噁唑",
+              "nodeId": 48984,
+              "label": "Drug"
+            }
+          },
+          {
+            "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:17392",
+            "data": {
+              "name": "消化系统",
+              "nodeId": 17395,
+              "label": "DiseaseSite"
+            }
+          },
+          {
+            "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:18534",
+            "data": {
+              "name": "传染科",
+              "nodeId": 18537,
+              "label": "Department"
+            }
+          },
+          {
+            "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:413",
+            "data": {
+              "name": "代谢性 酸中毒",
+              "nodeId": 416,
+              "label": "Disease"
+            }
+          },
+          {
+            "id": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:2990",
+            "data": {
+              "name": "急性肾衰竭",
+              "nodeId": 2993,
+              "label": "Disease"
+            }
+          }
+        ],
+        "edges": [
+          {
+            "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975",
+            "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:9461",
+            "type": "line",
+            "data": {
+              "relationship": {
+                "type": "symptomAndSign",
+                "properties": { "label": "症状与体征" }
+              }
+            }
+          },
+          {
+            "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975",
+            "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:5992",
+            "type": "line",
+            "data": {
+              "relationship": {
+                "type": "complication",
+                "properties": { "label": "并发症" }
+              }
+            }
+          },
+          {
+            "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975",
+            "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:1277",
+            "type": "line",
+            "data": {
+              "relationship": {
+                "type": "complication",
+                "properties": { "label": "并发症" }
+              }
+            }
+          },
+          {
+            "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975",
+            "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:26775",
+            "type": "line",
+            "data": {
+              "relationship": {
+                "type": "cause",
+                "properties": { "label": "病因" }
+              }
+            }
+          },
+          {
+            "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975",
+            "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:48981",
+            "type": "line",
+            "data": {
+              "relationship": {
+                "type": "treatmentPrograms",
+                "properties": { "label": "治疗方案" }
+              }
+            }
+          },
+          {
+            "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975",
+            "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:17392",
+            "type": "line",
+            "data": {
+              "relationship": {
+                "type": "diseaseSite",
+                "properties": { "label": "病变部位" }
+              }
+            }
+          },
+          {
+            "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975",
+            "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:18534",
+            "type": "line",
+            "data": {
+              "relationship": {
+                "type": "department",
+                "properties": { "label": "科室" }
+              }
+            }
+          },
+          {
+            "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975",
+            "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:413",
+            "type": "line",
+            "data": {
+              "relationship": {
+                "type": "complication",
+                "properties": { "label": "并发症" }
+              }
+            }
+          },
+          {
+            "source": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:6975",
+            "target": "4:bc93ccaa-d618-48f0-b787-2d9496417bcd:2990",
+            "type": "line",
+            "data": {
+              "relationship": {
+                "type": "complication",
+                "properties": { "label": "并发症" }
+              }
+            }
+          }
+        ]
+      },
+      children: 'children',
+      label: 'title' // 虽然用插槽，但 el-tree 内部仍会读取，可留空或任意
+    }
+  },
+
+  async mounted() {
+    await this.$nextTick();
+    try {
+      const updatedNodes = this.defaultData.nodes.map(node => ({
+        ...node,
+        type: this.nodeShape,
+        style:{
+          size: this.nodeSize,
+          fill: this.nodeFill,
+          stroke: this.nodeStroke,
+          lineWidth: this.nodeLineWidth,
+          label: this.nodeShowLabel,
+          labelFontSize: this.nodeFontSize,
+          labelFontFamily: this.nodeFontFamily,
+          labelFill: this.nodeFontColor,
+        }
+      }))
+      const updatedEdges = this.defaultData.edges.map(edge => ({
+        ...edge,
+        type:  this.edgeType,
+        id: edge.data.relationship.id,
+        style: {
+          endArrow: this.edgeEndArrow,
+          stroke: this.edgeStroke,
+          lineWidth: this.edgeLineWidth,
+          label: this.edgeShowLabel,
+          labelFontSize: this.edgeFontSize,
+          labelFontFamily: this.edgeFontFamily,
+          labelFill: this.edgeFontColor,
+        },
+      }))
+      const updatedData = {
+        nodes: updatedNodes,
+        edges: updatedEdges
+      }
+      this.defaultData = updatedData
+      setTimeout(() => {
+        this.initGraph();
+        window.addEventListener('resize', this.handleResize);
+      }, 1000);
+    } catch (error) {
+      console.error('加载图谱数据失败:', error);
+    }
+  },
+  beforeUnmount() {
+    this._graph.destroy()
+    this._graph = null;
+    window.removeEventListener('resize', this.handleResize);
+  },
+  watch: {
+    // 节点相关
+    nodeShowLabel: 'updateAllNodes',
+    nodeFontSize: 'updateAllNodes',
+    nodeFontColor: 'updateAllNodes',
+    nodeShape: 'updateAllNodes',
+    nodeSize: 'updateAllNodes',
+    nodeFill: 'updateAllNodes',
+    nodeStroke: 'updateAllNodes',
+    nodeLineWidth: 'updateAllNodes',
+    nodeFontFamily: 'updateAllNodes',
+
+    // 边相关
+    edgeShowLabel: 'updateAllEdges',
+    edgeFontSize: 'updateAllEdges',
+    edgeFontColor: 'updateAllEdges',
+    edgeType: 'updateAllEdges',
+    edgeLineWidth: 'updateAllEdges',
+    edgeStroke: 'updateAllEdges',
+    edgeEndArrow: 'updateAllEdges',
+    edgeFontFamily: 'updateAllEdges',
+  },
+  methods: {
+    buildNodeLabelMap(nodes) {
+      this._nodeLabelMap = new Map();
+      nodes.forEach(node => {
+        this._nodeLabelMap.set(node.id, node.data?.label || 'default');
+      });
+    },
+    initGraph() {
+
+      if (this._graph!=null){
+        this._graph.destroy()
+        this._graph = null;
+      }
+      if (!this._nodeLabelMap) {
+        this.buildNodeLabelMap(this.defaultData.nodes);
+      }
+      const container = this.$refs.graphContainer;
+      const width = container.clientWidth || 800;
+      const height = container.clientHeight || 600;
+
+      const graph = new Graph({
+        container,
+        width,
+        height,
+        layout: {
+          type: 'radial',
+          nodeSize: 32,
+          unitRadius: 100,
+          linkDistance: 200,
+        },
+        behaviors: [ 'zoom-canvas', 'drag-element','click-select','focus-element',
+          {
+            type: 'hover-activate',
+            degree: 1, // 👈🏻 Activate relations.
+          },
+          {
+            type: 'drag-canvas',
+            enable: (event) => event.shiftKey === false,
+          },
+          {
+            type: 'brush-select',
+          },
+        ],
+
+        node: {
+          style: {
+            labelText: (d) => d.data.name,
+            labelPlacement: 'center',
+            fill: (d) => {
+              const label = d.data?.label;
+              if (label === 'Disease') return '#EF4444';   // 红
+              if (label === 'Drug') return '#91cc75';      // 绿
+              if (label === 'Symptom') return '#fac858';   // 橙
+              if (label === 'Check') return '#59d1d4';   // 橙
+              return '#336eee';                            // 默认灰蓝
+            },
+            stroke: (d) => {
+              const label = d.data?.label;
+              if (label === 'Disease') return '#B91C1C';
+              if (label === 'Drug') return '#047857';
+              if (label === 'Check') return '#40999b';   // 橙
+              if (label === 'Symptom') return '#B45309';
+              return '#1D4ED8';
+            },
+            labelWordWrap: true,
+            labelMaxWidth: '150%',
+            labelMaxLines: 3,
+            labelTextOverflow: 'ellipsis',
+            labelTextAlign: 'center',
+          },
+          state: {
+
+            highlight: {
+              stroke: '#FF6A00',
+              lineWidth: 3,
+            },
+            disabled: {
+              fill: '#ECECEC',
+              stroke: '#BFBFBF',
+              opacity: 0.5,
+            },
+          },
+        },
+        edge: {
+          style: {
+            labelText: (d) => d.data.relationship.properties.label,
+            stroke: (d) => {
+              // 获取 target 节点的 label
+              const targetLabel = this._nodeLabelMap.get(d.target); // d.target 是目标节点 ID
+              // 根据 target 节点类型返回对应浅色
+              if (targetLabel === 'Disease') return 'rgba(239,68,68,0.5)';
+              if (targetLabel === 'Drug') return 'rgba(145,204,117,0.5)';
+              if (targetLabel === 'Symptom') return 'rgba(250,200,88,0.5)';
+              if (targetLabel === 'Check') return 'rgba(89,209,212,0.5)';   // 橙
+              return 'rgba(51,110,238,0.5)'; // default
+            },
+          },
+          state: {
+            selected: {
+              stroke: '#1890FF',
+              lineWidth: 2,
+            },
+            highlight: {
+              stroke: '#FF6A00',
+              lineWidth: 3,
+            },
+          },
+
+        },
+        data:this.defaultData
+      });
+
+      graph.render();
+      this._graph = graph
+      this._graph?.fitView()
+    },
+
+    updateGraph(data) {
+      if (!this._graph) return
+      this._graph.setData(data)
+      this._graph.render()
+    },
+
+    updateAllNodes() {
+      if (!this._graph) return
+      const updatedNodes = this.defaultData.nodes.map(node => ({
+        ...node,
+        type: this.nodeShape,
+        style:{
+          size: this.nodeSize,
+          fill: this.nodeFill,
+          stroke: this.nodeStroke,
+          lineWidth: this.nodeLineWidth,
+          label: this.nodeShowLabel,
+          labelFontSize: this.nodeFontSize,
+          labelFontFamily: this.nodeFontFamily,
+          labelFontColor: this.nodeFontColor,
+        }
+      }))
+      const updatedData = {
+        nodes: updatedNodes,
+        edges: this.defaultData.edges
+      }
+      this.defaultData = updatedData
+      this.updateGraph(updatedData)
+    },
+
+    updateAllEdges() {
+      if (!this._graph) return
+      const updatedEdges = this.defaultData.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,
+
+        },
+
+      }))
+      const updatedData = {
+        nodes: this.defaultData.nodes,
+        edges: updatedEdges
+      }
+      this.defaultData = updatedData
+      this.updateGraph(updatedData)
+    },
+
+    clearAllStates() {
+      if (!this._graph) return
+
+      // 清除所有节点的状态
+      this._graph.getNodes().forEach(node => {
+        this._graph.clearItemStates(node)
+      })
+
+      // 清除所有边的状态
+      this._graph.getEdges().forEach(edge => {
+        this._graph.clearItemStates(edge)
+      })
+    },
+
+    handleResize() {
+      const container = this.$refs.graphContainer
+      if (this._graph && container) {
+        this._graph.resize(container.offsetWidth, container.offsetHeight)
+      }
+    },
+
+    resetView() {
+      this._graph?.fitView()
+    },
+
+    resetStyle() {
+      Object.assign(this, {
+        nodeShowLabel: true,
+        nodeFontSize: 12,
+        nodeFontColor: '#000000',
+        nodeShape: 'circle',
+        nodeSize: 60,
+        nodeFill: '#9FD5FF',
+        nodeStroke: '#5B8FF9',
+        nodeLineWidth: 2,
+        nodeFontFamily: 'Microsoft YaHei, sans-serif',
+
+        edgeShowLabel: true,
+        edgeFontSize: 10,
+        edgeFontColor: '#666666',
+        edgeType: 'line',
+        edgeLineWidth: 2,
+        edgeStroke: '#F00',
+        edgeEndArrow: true,
+        edgeFontFamily: 'Microsoft YaHei, sans-serif'
+      })
+    },
+
+
+    handleNodeClick(data) {
+      console.log('点击节点:', data)
+      // 可用于显示详情、复制 code 等
+      this.$message.info(`已选中: ${data.title}`)
+    },
+
+    getLevelLabel(level) {
+      const map = {
+        chapter: '章',
+        section: '节',
+        category: '类目',
+        subcategory: '亚目',
+        diagnosis: '条目'
+      }
+      return map[level] || level
+    },
+
+    getTagType(level) {
+      const map = {
+        chapter: 'primary',
+        section: 'success',
+        category: 'warning',
+        subcategory: 'info',
+        diagnosis: ''
+      }
+      return map[level] || ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.knowledge-graph-container {
+  display: flex;
+  height: 100vh;
+}
+
+.control-panel {
+  width: 280px;
+  background: #f5f7fa;
+  padding: 16px;
+  border-right: 1px solid #ddd;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+  font-family: 'Microsoft YaHei';
+}
+
+.section {
+  margin-bottom: 10px;
+  padding: 10px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.section h5 {
+  margin-top: 0;
+  color: #333;
+  font-size: 14px;
+}
+
+.slider-group {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+}
+
+.slider-group span {
+  margin-right: 10px;
+  font-size: 12px;
+}
+
+.form-group {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+}
+
+.form-group label {
+  margin-right: 8px;
+  font-size: 12px;
+}
+
+.form-group select,
+.form-group input[type="number"] {
+  padding: 4px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.color-picker {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+}
+
+.color-picker label {
+  margin-right: 8px;
+  font-size: 12px;
+}
+
+.color-picker input[type="color"] {
+  width: 40px;
+  height: 20px;
+  border: none;
+  cursor: pointer;
+}
+
+button {
+  width: 45%;
+  padding: 10px;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  cursor: pointer;
+  margin-right: 2%;
+}
+
+button:hover {
+  background: #0056b3;
+}
+
+.graph-container {
+  flex: 1;
+  border: 1px solid #eee;
+  background: #fff;
+}
+</style>
\ No newline at end of file