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

- 调整 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

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', () => {