From 9a8b3aa2712c4848d65d63e1b82dead3b1d6be74 Mon Sep 17 00:00:00 2001
From: hanyuqing <1106611654@qq.com>
Date: Wed, 24 Dec 2025 09:52:43 +0800
Subject: [PATCH] all

---
 vue/src/components/Menu.vue  | 157 +--------------------------
 vue/src/system/GraphDemo.vue | 247 +++++++++++++++++++++++++++++++++++--------
 2 files changed, 204 insertions(+), 200 deletions(-)

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 @@
       </div>
     </aside>
 
-    <main class="main-body">
-      <header class="top-nav">
-        <div class="search-container">
-          <input type="text" placeholder="搜索......"/>
-          <img src="@/assets/搜索.png" class="search-btn"/>
-        </div>
-        <div class="legend-box">
-          <span v-for="c in ['#ffcc66','#4d79ff','#8cd98c','#ff8100','#6d31ce']" :key="c" class="leg-item">
-            <i :style="{background: c}"></i> 指定1
-          </span>
-        </div>
-      </header>
 
-      <section class="main-content">
-        <div class="disease-container">
-          <div class="disease-header">
-            <div class="d-title"><img src="@/assets/组 10.png" class="d-icon"/><span>疾病信息</span></div>
-            <div class="d-count">12类</div>
-          </div>
-          <div class="disease-body">
-            <div class="checkbox-list">
-              <label v-for="i in ['选项一','选项二','选项三']" :key="i">
-                <input type="checkbox"/><span class="label-text">{{ i }}</span>
-              </label>
-            </div>
-          </div>
-        </div>
-        <div class="graph-viewport">
-          <div class="empty-hint">知识图谱可视化区域</div>
-        </div>
-      </section>
-    </main>
   </div>
 </template>
 
@@ -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');
 <style scoped>
 .admin-layout {
   display: flex;
-  width: 100vw;
+  width: 200px;
   height: 100vh;
   background: #fff;
   overflow: hidden;
@@ -400,99 +339,5 @@ const handleLogout = () => console.log('logout');
   height: 32px;
 }
 
-/* --- 主体区域 --- */
-.main-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-}
-
-.top-nav {
-  height: 75px;
-  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;
-}
-
-.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;
-}
 </style>
\ 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 @@
 <template>
+
   <div class="knowledge-graph-container">
     <Menu
         :initial-active="0"
     />
-    <div class="icd10-tree-container" style="overflow: scroll;width: 25%">
-      <div>
-        <el-radio-group v-model="typeRadio" @change="changeTree">
-          <el-radio value="Disease">疾病</el-radio>
-          <el-radio value="Drug">药品</el-radio>
-          <el-radio value="Check">检查</el-radio>
-        </el-radio-group>
-      </div>
-      <div>
-        <el-tree
-            :data="treeData"
-            :props="treeProps"
-            :expand-on-click-node="false"
-            @node-click="handleNodeClick"
-        >
-          <template #default="{ node, data }">
-            <span class="custom-tree-node">
-<!--          <el-tag size="small" :type="getTagType(data.level)" class="level-tag">-->
-<!--            -->
-<!--          </el-tag>-->
-<!--              {{ getLevelLabel(data.level) }}-->
-          <span class="code">{{ data.code }}</span>
-          <span class="label">{{ data.label }}</span>
-        </span>
-          </template>
-        </el-tree>
-      </div>
-    </div>
-    <div style="width: 75%">
-      <div style="display: flex; gap: 10px; margin-bottom: 10px;">
-        <!-- 图例项 -->
-        <div v-for="(item, index) in legendItems" :key="index" class="legend-item">
-          <div
-              :style="{
+        <main class="main-body">
+          <header class="top-nav">
+            <div class="search-container">
+              <input type="text" placeholder="搜索......"/>
+              <img src="@/assets/搜索.png" class="search-btn"/>
+            </div>
+            <div class="legend-box">
+              <div v-for="(item, index) in legendItems" :key="index" class="legend-item">
+                <div
+                    :style="{
       backgroundColor: item.color,
       opacity: visibleCategories.has(item.key) ? 1 : 0.3 // ✅ 关键：根据状态调整透明度
     }"
-              class="color-block"
-              @click="toggleCategory(item.key)"
-          ></div>
-          <span>{{ item.label }}</span>
-        </div>
-      </div>
-      <div ref="graphContainer" class="graph-container" id="container"></div>
-    </div>
+                    class="color-block"
+                    @click="toggleCategory(item.key)"
+                ></div>
+                <span>{{ item.label }}</span>
+              </div>
+            </div>
+          </header>
+
+          <section class="main-content">
+            <div class="disease-container">
+              <div class="disease-header">
+                <div class="d-title"><img src="@/assets/组 10.png" class="d-icon"/><span>疾病信息</span></div>
+                <div class="d-count">12类</div>
+              </div>
+              <div>
+                <el-radio-group v-model="typeRadio" @change="changeTree">
+                  <el-radio value="Disease">疾病</el-radio>
+                  <el-radio value="Drug">药品</el-radio>
+                  <el-radio value="Check">检查</el-radio>
+                </el-radio-group>
+              </div>
+              <div class="disease-body">
+
+                <div class="tree">
+                  <el-tree
+                      :data="treeData"
+                      :props="treeProps"
+                      :expand-on-click-node="false"
+                      @node-click="handleNodeClick"
+
+                  >
+                    <template #default="{ node, data }">
+                        <span class="custom-tree-node">
+                          <span class="code">{{ data.code }}</span>
+                          <el-tooltip :content="data.label" placement="top">
+                            <span class="label">{{ data.label }}</span>
+                          </el-tooltip>
+                        </span>
+                    </template>
+                  </el-tree>
+                </div>
+              </div>
+            </div>
+            <div class="graph-viewport">
+              <div ref="graphContainer" class="graph-container" id="container"></div>
+            </div>
+          </section>
+        </main>
     <!-- 图谱容器 -->
-
   </div>
 </template>
 
@@ -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 */
+}
 </style>
\ No newline at end of file