From ec23d7233246e6473d9af951b8c888eecb46d6be Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Sat, 23 May 2026 18:04:18 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(TabManager):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=95=B0=E6=8D=AE=E8=A7=86=E5=9B=BE=E9=AB=98=E5=BA=A6?=
 =?UTF-8?q?=E5=BC=82=E5=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 补齐标签页工作台 flex 高度链

- 确保旧版 UI 与新版 UI 下 DataGrid 都能撑满父级

- 补充工作台高度布局回归测试
---
 frontend/src/components/TabManager.hover.test.tsx | 11 ++++++++++-
 frontend/src/components/TabManager.tsx            | 13 ++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/TabManager.hover.test.tsx b/frontend/src/components/TabManager.hover.test.tsx
index 1e3bed0..4e79d0d 100644
--- a/frontend/src/components/TabManager.hover.test.tsx
+++ b/frontend/src/components/TabManager.hover.test.tsx
@@ -3,7 +3,7 @@ import { readFileSync } from 'node:fs';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, expect, it, vi } from 'vitest';
 
-import { resolveTabHoverOpen, TabHoverInfo, stopTabHoverDragPropagation } from './TabManager';
+import { TAB_WORKBENCH_CLASS_NAME, resolveTabHoverOpen, TabHoverInfo, stopTabHoverDragPropagation } from './TabManager';
 import type { TabData } from '../types';
 
 describe('TabManager hover info', () => {
@@ -13,6 +13,15 @@ describe('TabManager hover info', () => {
     expect(source).toContain('const TabManager: React.FC = React.memo(() => {');
   });
 
+  it('keeps the tab workbench as a full-height flex child in legacy and v2 UI', () => {
+    const source = readFileSync(new URL('./TabManager.tsx', import.meta.url), 'utf8');
+
+    expect(TAB_WORKBENCH_CLASS_NAME).toBe('tab-workbench');
+    expect(source).toContain("className={`${TAB_WORKBENCH_CLASS_NAME}${isV2Ui ? ' gn-v2-tab-workbench' : ''}`}");
+    expect(source).toContain('.${TAB_WORKBENCH_CLASS_NAME} {');
+    expect(source).toMatch(/\.\$\{TAB_WORKBENCH_CLASS_NAME\} \{[\s\S]*height: 100%;[\s\S]*flex: 1 1 auto;[\s\S]*min-height: 0;[\s\S]*display: flex;[\s\S]*flex-direction: column;[\s\S]*overflow: hidden;/);
+  });
+
   it('renders full v2 tab hover context for table tabs', () => {
     const tab: TabData = {
       id: 'conn-1-main-users',
diff --git a/frontend/src/components/TabManager.tsx b/frontend/src/components/TabManager.tsx
index eec363d..584432c 100644
--- a/frontend/src/components/TabManager.tsx
+++ b/frontend/src/components/TabManager.tsx
@@ -40,6 +40,8 @@ const getTabKindLabel = (tab: TabData): string => {
   return 'TAB';
 };
 
+export const TAB_WORKBENCH_CLASS_NAME = 'tab-workbench';
+
 const getTabKindIcon = (tab: TabData): React.ReactNode => {
   if (tab.type === 'query') return <ConsoleSqlOutlined />;
   if (tab.type === 'table-overview') return <DatabaseOutlined />;
@@ -532,8 +534,17 @@ const TabManager: React.FC = React.memo(() => {
   );
 
   return (
-    <div className={isV2Ui ? 'gn-v2-tab-workbench' : undefined}>
+    <div className={`${TAB_WORKBENCH_CLASS_NAME}${isV2Ui ? ' gn-v2-tab-workbench' : ''}`}>
         <style>{`
+            .${TAB_WORKBENCH_CLASS_NAME} {
+              height: 100%;
+              flex: 1 1 auto;
+              min-height: 0;
+              min-width: 0;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+            }
             .main-tabs {
               height: 100%;
               flex: 1 1 auto;