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

🐛 fix(query-editor): 修复小窗口下 SQL 编辑器工具栏换行问题

Browse Source 
- 调整 v2 工具栏为单行布局并启用横向滚动
- 保持选择区、事务区和操作区在窄窗口下不换行
- 补充 SQL 编辑器工具栏布局回归测试
This commit is contained in:
Syngnat
2026-06-14 22:47:42 +08:00
parent 03eb26d999
commit 9b0e7937f9
3 changed files with 37 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4148,12 +4148,14 @@ describe('QueryEditor external SQL save', () => {
expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-actions');
expect(css).toContain('width: 74px !important;');
expect(css).toContain('width: 62px !important;');
expect(css).toContain('flex: 0 1 auto !important;');
expect(css).toContain('flex: 0 0 auto !important;');
expect(css).toContain('justify-content: flex-start;');
expect(css).toContain('height: 32px !important;');
expect(css).toContain('line-height: 30px !important;');
expect(css).toContain('display: inline-flex !important;');
expect(css).toContain('gap: 6px;');
expect(css).toContain('overflow-x: auto;');
expect(css).toContain('overflow-y: hidden;');
expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-action-pair');
expect(css).toContain('gap: 8px;');
expect(css).toContain('margin-left: 0 !important;');
@@ -4166,6 +4168,9 @@ describe('QueryEditor external SQL save', () => {
expect(css).not.toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-transaction-row {');
const queryToolbarMainCss = css.slice(css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar-main {'), css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar-selects {'));
expect(queryToolbarMainCss).toContain('flex-wrap: nowrap;');
expect(queryToolbarMainCss).toContain('width: max-content;');
expect(queryToolbarMainCss).not.toContain('flex-wrap: wrap;');
expect(queryToolbarMainCss).not.toContain('margin-left: auto;');
expect(queryToolbarMainCss).not.toContain('justify-content: flex-end;');
});

22
frontend/src/components/QueryEditorToolbar.layout.test.tsx
View File

@@ -3,15 +3,29 @@ import { readFileSync } from 'node:fs';
import { describe, expect, it } from 'vitest';
describe('QueryEditorToolbar layout', () => {
it('keeps pending transaction controls outside the main v2 toolbar row', () => {
it('keeps the v2 toolbar on a single scrollable row in small windows', () => {
const toolbarSource = readFileSync(new URL('./QueryEditorToolbar.tsx', import.meta.url), 'utf8');
const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
const toolbarCss = css.slice(
css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar {'),
css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar-main {'),
);
const toolbarMainCss = css.slice(
css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar-main {'),
css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar-selects {'),
);
expect(toolbarSource).toContain('gn-v2-query-toolbar-main');
expect(toolbarSource).toContain('gn-v2-query-toolbar-transaction-row');
expect(toolbarSource).toContain('{pendingTransactionToolbar && (');
expect(toolbarSource).toContain('gn-v2-query-toolbar-actions');
expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-main');
expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-transaction-row');
expect(toolbarCss).toContain('overflow-x: auto;');
expect(toolbarCss).toContain('overflow-y: hidden;');
expect(toolbarCss).toContain('flex-wrap: nowrap;');
expect(toolbarMainCss).toContain('flex-wrap: nowrap;');
expect(toolbarMainCss).toContain('min-width: 100%;');
expect(toolbarMainCss).toContain('width: max-content;');
expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-actions {');
expect(css).toContain('body[data-ui-version="v2"] .gn-v2-query-toolbar-action-pair {');
});
it('keeps commit button hover styling in source and v2 css', () => {

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

@@ -4797,34 +4797,37 @@ body[data-ui-version="v2"] .gn-v2-query-toolbar {
padding: 8px 12px !important;
gap: 6px 10px !important;
align-items: center !important;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
background: var(--gn-bg-panel) !important;
border-bottom: 0.5px solid var(--gn-br-1) !important;
}
body[data-ui-version="v2"] .gn-v2-query-toolbar-main {
display: flex;
width: 100%;
min-width: 0;
display: inline-flex;
width: max-content;
min-width: 100%;
gap: 6px 10px !important;
align-items: center !important;
flex-wrap: wrap;
flex: 0 0 auto;
flex-wrap: nowrap;
}
body[data-ui-version="v2"] .gn-v2-query-toolbar-selects,
body[data-ui-version="v2"] .gn-v2-query-toolbar-actions {
min-width: 0;
gap: 6px !important;
flex: 0 0 auto !important;
}
body[data-ui-version="v2"] .gn-v2-query-toolbar-selects {
flex: 0 1 auto !important;
flex-wrap: nowrap;
max-width: 760px;
}
body[data-ui-version="v2"] .gn-v2-query-toolbar-actions {
flex: 0 1 auto !important;
flex-wrap: wrap;
flex-wrap: nowrap;
justify-content: flex-start;
}
@@ -4832,6 +4835,7 @@ body[data-ui-version="v2"] .gn-v2-query-transaction-toolbar {
display: inline-flex;
max-width: 100%;
flex: 0 0 auto;
flex-wrap: nowrap;
}
body[data-ui-version="v2"] .gn-v2-query-toolbar .ant-select {
@@ -4963,16 +4967,15 @@ body[data-ui-version="v2"] .gn-v2-query-toolbar-ai-action.ant-btn {
@media (max-width: 900px) {
body[data-ui-version="v2"] .gn-v2-query-toolbar-main {
width: 100%;
width: max-content;
min-width: 100%;
}
body[data-ui-version="v2"] .gn-v2-query-toolbar-selects {
flex: 1 1 100% !important;
max-width: none;
}
body[data-ui-version="v2"] .gn-v2-query-toolbar-actions {
width: 100%;
justify-content: flex-start;
}
}