From c543b63d6894864f6d404a69d20d436b7cdd9b8e Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Mon, 4 Aug 2025 18:43:06 +0800
Subject: [PATCH] =?UTF-8?q?fix(database=5Finfo):=20=E4=BF=AE=E5=A4=8D=20re?=
 =?UTF-8?q?sult=20container=20=E7=9A=84=E6=A1=86=E4=BD=93=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/DataBaseInfoView.vue | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue
index 54a89cc2..9410ddc8 100644
--- a/web/src/views/DataBaseInfoView.vue
+++ b/web/src/views/DataBaseInfoView.vue
@@ -1636,7 +1636,7 @@ const resizeHandleHorizontal = ref(null);
 // 计算面板样式的方法
 const computePanelStyles = () => {
   const queryVisible = panels.query.visible;
-  const graphVisible = panels.graph.visible;
+  const graphVisible = panels.graph.visible && isGraphSupported.value;
 
   if (queryVisible && graphVisible) {
     // 两个面板都显示时，按比例分配
@@ -1645,22 +1645,22 @@ const computePanelStyles = () => {
       graph: { height: rightPanelHeight.graph + '%' }
     };
   } else if (queryVisible && !graphVisible) {
-    // 只显示查询面板时，查询面板占满
+    // 只显示查询面板时（图谱不支持或折叠），查询面板占满
     return {
-      query: { height: 'calc(100% - 40px)' },
-      graph: { height: '36px' }
+      query: { height: '100%', flex: '1' },
+      graph: { height: '36px', flex: 'none' }
     };
   } else if (!queryVisible && graphVisible) {
     // 只显示图谱面板时，图谱面板占满
     return {
-      query: { height: '36px' },
-      graph: { height: 'calc(100% - 40px)' }
+      query: { height: '36px', flex: 'none' },
+      graph: { height: '100%', flex: '1' }
     };
   } else {
-    // 两个面板都折叠时
+    // 两个面板都折叠时或图谱不支持时
     return {
-      query: { height: '36px' },
-      graph: { height: '36px' }
+      query: { height: '36px', flex: 'none' },
+      graph: { height: '36px', flex: 'none' }
     };
   }
 };
@@ -2498,7 +2498,9 @@ const getFileIconColor = (filename) => {
 
   .right-panel {
     flex-grow: 1;
-    overflow-y: auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
   }
 
   .resize-handle,
@@ -2756,7 +2758,8 @@ const getFileIconColor = (filename) => {
 
   .query-section {
     position: relative;
-
+    display: flex;
+    flex-direction: column;
 
     .query-content {
       display: flex;
@@ -2764,6 +2767,7 @@ const getFileIconColor = (filename) => {
       flex: 1;
       overflow: hidden;
       padding-bottom: 10px;
+      height: 100%;
     }
 
     .query-input-row {
@@ -2873,6 +2877,7 @@ const getFileIconColor = (filename) => {
       flex: 1; /* 自动占据剩余所有空间 */
       overflow-y: auto;
       min-height: 0; /* 允许 flex 项目缩小 */
+      height: 0; /* 强制flex子项正确计算高度 */
     }
   }
 
@@ -2907,10 +2912,13 @@ const getFileIconColor = (filename) => {
   &.collapsed {
     height: 36px;
     min-height: 36px;
+    flex: none;
   }
 
   .content {
     padding: 8px;
+    flex: 1;
+    overflow: hidden;
   }
 }