From 9b0e7937f97cf9eaee4f4a742c1d60d07fd011d7 Mon Sep 17 00:00:00 2001 From: Syngnat Date: Sun, 14 Jun 2026 22:47:42 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(query-editor):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E5=B0=8F=E7=AA=97=E5=8F=A3=E4=B8=8B=20SQL=20=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E5=B7=A5=E5=85=B7=E6=A0=8F=E6=8D=A2=E8=A1=8C?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 调整 v2 工具栏为单行布局并启用横向滚动 - 保持选择区、事务区和操作区在窄窗口下不换行 - 补充 SQL 编辑器工具栏布局回归测试 --- .../QueryEditor.external-sql-save.test.tsx | 7 +++++- .../QueryEditorToolbar.layout.test.tsx | 22 ++++++++++++++---- frontend/src/v2-theme.css | 23 +++++++++++-------- 3 files changed, 37 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/QueryEditor.external-sql-save.test.tsx b/frontend/src/components/QueryEditor.external-sql-save.test.tsx index 2548ee1..274f759 100644 --- a/frontend/src/components/QueryEditor.external-sql-save.test.tsx +++ b/frontend/src/components/QueryEditor.external-sql-save.test.tsx @@ -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;'); }); diff --git a/frontend/src/components/QueryEditorToolbar.layout.test.tsx b/frontend/src/components/QueryEditorToolbar.layout.test.tsx index fd35e11..9ab58d8 100644 --- a/frontend/src/components/QueryEditorToolbar.layout.test.tsx +++ b/frontend/src/components/QueryEditorToolbar.layout.test.tsx @@ -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', () => { diff --git a/frontend/src/v2-theme.css b/frontend/src/v2-theme.css index b218ab3..228dde6 100644 --- a/frontend/src/v2-theme.css +++ b/frontend/src/v2-theme.css @@ -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; } }