GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-08-11 01:03:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix(tabs/query-editor): 优化标签圆角并修复搜索提示遮挡 (#713)

Browse Source 
## 背景

Issue #695 希望统一右侧工作区标签的圆角样式。同时，查询页打开 Monaco
搜索后，顶部按钮的悬浮提示会被编辑器区域裁剪，影响操作提示阅读。

## 变更点

- 将 V2 工作区标签四角统一为 8px 圆角
- 使用尊重圆角边界的 inset 激活色，避免顶部绿色条遮住圆角或形成悬浮短条
- Monaco 查找组件可见时放开编辑器区域的浮层裁剪，保持搜索按钮及查找框位置不变
- 补充标签圆角和搜索提示显示的回归测试

## 影响范围

- 仅影响 V2 主工作区标签样式及查询编辑器查找浮层
- 不改变标签尺寸、间距、拖拽和关闭逻辑
- 不改变 Monaco 查找框位置，也不恢复顶部额外留白
- 无后端、数据库、依赖或配置变更

## 验证

- `npx vitest run src/components/TabManager.adaptive-width.test.ts`（7/7
通过）
- `npx vitest run src/components/QueryEditor.external-sql-save.test.tsx
-t "shows Monaco find button hovers without moving the find widget"`（1/1
通过）
- `npx tsc --noEmit`
- `npm run build`
- Playwright 实际页面验证标签圆角、激活色和 Monaco 搜索按钮 Tooltip

Closes #695
This commit is contained in:
Syngnat
2026-07-24 21:29:42 +08:00
committed by GitHub
parent e1bc65b788 82a0a02c56
commit 2f427d3baf
4 changed files with 32 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/QueryEditor.external-sql-save.test.tsx
View File

@@ -11644,13 +11644,17 @@ describe('QueryEditor external SQL save', () => {
expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-results .query-result-tab-text {');
});
it('does not reserve vertical space for the Monaco find widget in the v2 query editor', () => {
it('shows Monaco find button hovers without moving the find widget in the v2 query editor', () => {
const source = readFileSync(new URL('./QueryEditor.tsx', import.meta.url), 'utf8');
const css = readV2ThemeCss();
const findWidgetOverflowRule = css.match(
/body\[data-ui-version="v2"\] \.gn-v2-query-monaco-stage:has\(\.monaco-editor \.find-widget\.visible:not\(\.hiddenEditor\)\)\s*\{(?<body>[^}]*)\}/s,
)?.groups?.body ?? '';
expect(source).not.toContain('addExtraSpaceOnTop: true');
expect(css).not.toContain('body[data-ui-version="v2"] .gn-v2-query-monaco-stage:has(.monaco-editor .find-widget.visible:not(.hiddenEditor)) {');
expect(css).not.toContain('padding-top: 24px;');
expect(findWidgetOverflowRule).toContain('overflow: visible;');
expect(findWidgetOverflowRule).not.toContain('padding-top');
expect(findWidgetOverflowRule).not.toContain('top:');
expect(css).not.toContain('body[data-ui-version="v2"] .gn-v2-query-monaco-stage .monaco-editor .find-widget {');
});

12
frontend/src/components/TabManager.adaptive-width.test.ts
View File

@@ -51,4 +51,16 @@ describe('v2 workbench adaptive tab width', () => {
/\.gn-v2-main-tabs \.ant-tabs-tab \{[^}]*width: 260px;[^}]*min-width: 260px;[^}]*max-width: 260px;/s,
);
});
it('rounds all four corners of every v2 workbench tab', () => {
expect(themeSource).toMatch(
/\.gn-v2-main-tabs \.ant-tabs-tab \{[^}]*border-radius: 8px !important;/s,
);
expect(themeSource).toMatch(
/\.gn-v2-main-tabs \.ant-tabs-tab\.ant-tabs-tab-active \{[^}]*box-shadow: inset 0 2px 0 var\(--gn-accent\) !important;/s,
);
expect(themeSource).toMatch(
/\.gn-v2-main-tabs \.ant-tabs-tab\.ant-tabs-tab-active::after \{[^}]*display: none;/s,
);
});
});

4
frontend/src/styles/v2-theme-workbench.css
View File

@@ -347,6 +347,10 @@ body[data-ui-version="v2"] .gn-v2-query-monaco-stage {
background: var(--gn-bg-panel);
}
body[data-ui-version="v2"] .gn-v2-query-monaco-stage:has(.monaco-editor .find-widget.visible:not(.hiddenEditor)) {
overflow: visible;
}
body[data-ui-version="v2"] .gn-v2-query-monaco-shell {
min-height: 0;
overflow: visible;

9
frontend/src/v2-theme.css
View File

@@ -3729,6 +3729,15 @@ body[data-ui-version="v2"] .gn-v2-main-tabs .ant-tabs-tab {
height: 36px;
margin: 0 !important;
padding: 0 !important;
border-radius: 8px !important;
}
body[data-ui-version="v2"] .gn-v2-main-tabs .ant-tabs-tab.ant-tabs-tab-active {
box-shadow: inset 0 2px 0 var(--gn-accent) !important;
}
body[data-ui-version="v2"] .gn-v2-main-tabs .ant-tabs-tab.ant-tabs-tab-active::after {
display: none;
}
body[data-ui-version="v2"] .gn-v2-main-tabs-double .ant-tabs-tab {