From be154325ed028b27f3e8117dd1243af5b25ef3cd Mon Sep 17 00:00:00 2001
From: changjunqiang <344656718@qq.com>
Date: Tue, 16 Jun 2026 21:09:21 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9F=A5=E8=AF=86=E5=9B=BE=E8=B0=B1=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/KnowledgeGraph.vue | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/KnowledgeGraph.vue b/src/components/KnowledgeGraph.vue
index 365dc39..29ab529 100644
--- a/src/components/KnowledgeGraph.vue
+++ b/src/components/KnowledgeGraph.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="knowledge-graph" ref="containerRef">
-    <svg class="graph-svg" :width="svgWidth" :height="svgHeight">
+  <div class="kg-wrapper">
+    <div
+      class="knowledge-graph"
+      ref="containerRef"
+      :style="{ width: svgWidth + 'px', height: svgHeight + 'px' }"
+    >
+      <svg class="graph-svg" :width="svgWidth" :height="svgHeight">
       <!-- 连线 -->
       <path
         v-for="(edge, i) in layoutEdges"
@@ -38,6 +43,7 @@
       <div class="node-desc">{{ node.desc }}</div>
     </div>
   </div>
+</div>
 </template>
 
 <script setup>
@@ -177,16 +183,20 @@ const svgHeight = computed(() => {
 </script>
 
 <style scoped>
+.kg-wrapper {
+  overflow-x: auto;
+  overflow-y: visible;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+}
+
 .knowledge-graph {
   position: relative;
   background:
     radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.03), transparent 60%),
     radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.03), transparent 60%);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  overflow: hidden;
-  min-height: 300px;
-  padding: 16px;
+  overflow: visible;
 }
 
 .graph-svg {