diff --git a/vue/src/components/Menu.vue b/vue/src/components/Menu.vue index 039cb42..4f5799d 100644 --- a/vue/src/components/Menu.vue +++ b/vue/src/components/Menu.vue @@ -54,38 +54,7 @@ - - - - - - - - - 指定1 - - - - - - - 疾病信息 - 12类 - - - - - {{ i }} - - - - - - 知识图谱可视化区域 - - - @@ -112,36 +81,6 @@ const props = defineProps({ // 定义组件事件 const emit = defineEmits(['menu-click']); -// 菜单数据 -// const menuItems = ref([ -// { -// name: '医疗知识图谱', -// path: '/kg-display', -// icon: '🏥', -// -// }, -// { -// name: '知识图谱构建', -// path: '/kg-builder', -// icon: '🔧' -// }, -// { -// name: '知识图谱问答', -// path: '/kg-qa', -// icon: '💬' -// }, -// { -// name: '知识图谱数据', -// path: '/kg-data', -// icon: '📊' -// }, -// { -// name: '图谱可视化设置', -// path: '/kg-style', -// icon: '' -// }, -// ]); - // 活跃菜单索引 const activeIndex = ref(props.initialActive); @@ -166,7 +105,7 @@ const handleLogout = () => console.log('logout'); \ No newline at end of file diff --git a/vue/src/system/GraphDemo.vue b/vue/src/system/GraphDemo.vue index 6b83f5c..0d3b1ad 100644 --- a/vue/src/system/GraphDemo.vue +++ b/vue/src/system/GraphDemo.vue @@ -1,55 +1,71 @@ + - - - - 疾病 - 药品 - 检查 - - - - - - - - - - - {{ data.code }} - {{ data.label }} - - - - - - - - - - + + + + + + + + - {{ item.label }} - - - - + class="color-block" + @click="toggleCategory(item.key)" + > + {{ item.label }} + + + + + + + + 疾病信息 + 12类 + + + + 疾病 + 药品 + 检查 + + + + + + + + + {{ data.code }} + + {{ data.label }} + + + + + + + + + + + + - @@ -824,8 +840,11 @@ button:hover { .graph-container { flex: 1; - border: 1px solid #eee; background: #fff; + width: 100%; + height: 100%; + border: 1px dashed #e2e8f0; + border-radius: 12px; } .legend-item { @@ -846,4 +865,144 @@ button:hover { .legend-item:hover { opacity: 0.8; } + + +/* --- 主体区域 --- */ +.main-body { + flex: 1; + display: flex; + flex-direction: column; + background: #fff; +} + +.top-nav { + height: 7vw; + padding: 0 30px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid #f0f0f0; +} + +.search-container { + width: 260px; + height: 36px; + background: #f5f7fa; + border-radius: 18px; + display: flex; + align-items: center; + padding: 0 15px; +} + +.search-container input { + border: none; + outline: none; + background: transparent; + width: 100%; + font-size: 13px; +} + +.search-btn { + width: 16px; +} + +.legend-box { + display: flex; + gap: 20px; +} + +.leg-item { + display: flex; + align-items: center; + font-size: 13px; +} + +.leg-item i { + width: 24px; + height: 8px; + border-radius: 4px; + margin-right: 8px; +} + +.main-content { + flex: 1; + padding: 20px 30px; + display: flex; + gap: 20px; + height: 50vw; +} + +.disease-container { + width: 360px; + border: 1px solid #f0f0f0; + border-radius: 12px; + overflow: hidden; +} + +.disease-header { + height: 50px; + background: #2265f4; + color: #fff; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 15px; +} + +.d-icon { + width: 18px; + margin-right: 8px; +} + +.graph-viewport { + flex: 1; + border: 1px dashed #e2e8f0; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + color: #ccc; +} + + +.custom-tree-node { + display: flex; + align-items: center; + width: 100%; + overflow: hidden; +} + +.code { + flex-shrink: 0; /* 不允许 code 被压缩 */ + margin-right: 8px; + font-size: 12px; + color: #666; +} + +.label { + flex: 1; /* 占据剩余空间 */ + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + text-align: left; +} +.disease-body{ + width: 360px; + overflow: scroll; + height: 74vh; +} +/* 隐藏滚动条,但允许滚动 */ +.disease-body { + /* Firefox */ + scrollbar-width: none; /* 'auto' | 'thin' | 'none' */ + + /* Webkit (Chrome, Safari, Edge) */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + padding-bottom: 9px; +} + +.disease-body::-webkit-scrollbar { + display: none; /* Webkit browsers */ +} \ No newline at end of file