知识图谱适配

src/components/KnowledgeGraph.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="knowledge-graph" ref="containerRef">
+  <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
@@ -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 {