GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-05-31 10:29:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix(TabManager): 修复数据视图高度异常

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

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

- 补充工作台高度布局回归测试
This commit is contained in:
Syngnat
2026-05-23 18:04:18 +08:00
parent b3f6c45bc1
commit ec23d72332
2 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/components/TabManager.hover.test.tsx
View File

@@ -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',

13
frontend/src/components/TabManager.tsx
View File

@@ -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;