知识图谱适配

This commit is contained in:
2026-06-16 21:09:21 +08:00
parent 5cc164479f
commit be154325ed
+16 -6
View File
@@ -1,5 +1,10 @@
<template> <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"> <svg class="graph-svg" :width="svgWidth" :height="svgHeight">
<!-- 连线 --> <!-- 连线 -->
<path <path
@@ -38,6 +43,7 @@
<div class="node-desc">{{ node.desc }}</div> <div class="node-desc">{{ node.desc }}</div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
@@ -177,16 +183,20 @@ const svgHeight = computed(() => {
</script> </script>
<style scoped> <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 { .knowledge-graph {
position: relative; position: relative;
background: background:
radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.03), transparent 60%), 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%); radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.03), transparent 60%);
border: 1px solid var(--border-color); overflow: visible;
border-radius: 16px;
overflow: hidden;
min-height: 300px;
padding: 16px;
} }
.graph-svg { .graph-svg {