From 69f51f8ec8fa6700adb5be6dc02547041ce0bd39 Mon Sep 17 00:00:00 2001 From: Syngnat Date: Wed, 10 Jun 2026 19:47:33 +0800 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(query-editor):=20?= =?UTF-8?q?=E6=8B=86=E5=88=86=20SQL=20=E4=BA=8B=E5=8A=A1=E6=8F=90=E4=BA=A4?= =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=8E=A7=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../QueryEditor.external-sql-save.test.tsx | 16 +++--- frontend/src/components/QueryEditor.tsx | 38 ++++--------- .../QueryEditorTransactionSettings.tsx | 53 +++++++++++++++++++ frontend/src/v2-theme.css | 4 +- 4 files changed, 74 insertions(+), 37 deletions(-) create mode 100644 frontend/src/components/QueryEditorTransactionSettings.tsx diff --git a/frontend/src/components/QueryEditor.external-sql-save.test.tsx b/frontend/src/components/QueryEditor.external-sql-save.test.tsx index e82866e..25b48db 100644 --- a/frontend/src/components/QueryEditor.external-sql-save.test.tsx +++ b/frontend/src/components/QueryEditor.external-sql-save.test.tsx @@ -3557,6 +3557,7 @@ describe('QueryEditor external SQL save', () => { it('keeps the v2 query editor toolbar grouped and compact', () => { const source = readFileSync(new URL('./QueryEditor.tsx', import.meta.url), 'utf8'); + const transactionSettingsSource = readFileSync(new URL('./QueryEditorTransactionSettings.tsx', import.meta.url), 'utf8'); const transactionToolbarSource = readFileSync(new URL('./QueryEditorTransactionToolbar.tsx', import.meta.url), 'utf8'); const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8'); @@ -3565,17 +3566,18 @@ describe('QueryEditor external SQL save', () => { expect(source).toContain('gn-v2-query-toolbar-connection-select'); expect(source).toContain('gn-v2-query-toolbar-database-select'); expect(source).toContain('gn-v2-query-toolbar-max-rows-select'); - expect(source).toContain('gn-v2-query-toolbar-transaction-mode-select'); - expect(source).toContain('gn-v2-query-toolbar-transaction-delay-select'); - expect(source).toContain('这里仅选择事务执行成功后的 COMMIT 方式'); - expect(source).toContain("label: '事务：手动提交'"); - expect(source).toContain("label: '事务：自动提交'"); + expect(source).toContain('QueryEditorTransactionSettings'); + expect(transactionSettingsSource).toContain('gn-v2-query-toolbar-transaction-mode-select'); + expect(transactionSettingsSource).toContain('gn-v2-query-toolbar-transaction-delay-select'); + expect(transactionSettingsSource).toContain('这里仅选择事务执行成功后的 COMMIT 时机'); + expect(transactionSettingsSource).toContain("label: '提交：手动 COMMIT'"); + expect(transactionSettingsSource).toContain("label: '提交：自动 COMMIT'"); expect(source).toContain('QueryEditorTransactionToolbar'); expect(transactionToolbarSource).toContain("className={isV2Ui ? 'gn-v2-query-transaction-toolbar' : undefined}"); expect(transactionToolbarSource).toContain('事务待提交'); expect(transactionToolbarSource).toContain('onFinish'); expect(source).toContain('gn-v2-query-toolbar-action-group'); - expect(source).toContain('style={isV2Ui ? undefined : { width: 150 }}'); + expect(transactionSettingsSource).toContain('style={isV2Ui ? undefined : { width: 160 }}'); expect(source).toContain('style={isV2Ui ? undefined : { width: 200 }}'); expect(source).toContain('style={isV2Ui ? undefined : { width: 170 }}'); @@ -3592,7 +3594,7 @@ describe('QueryEditor external SQL save', () => { expect(css).toContain('width: 140px !important;'); expect(css).toContain('width: 166px !important;'); expect(css).toContain('width: 132px !important;'); - expect(css).toContain('width: 142px !important;'); + expect(css).toContain('width: 154px !important;'); expect(css).toContain('width: 82px !important;'); expect(css).toContain('width: 34px !important;'); expect(css).toContain('@media (max-width: 900px)'); diff --git a/frontend/src/components/QueryEditor.tsx b/frontend/src/components/QueryEditor.tsx index 2e90fe2..daf4cd0 100644 --- a/frontend/src/components/QueryEditor.tsx +++ b/frontend/src/components/QueryEditor.tsx @@ -36,6 +36,9 @@ import { getColumnDefinitionName, } from '../utils/columnDefinition'; import QueryEditorResultsPanel, { type QueryEditorResultSet } from './QueryEditorResultsPanel'; +import QueryEditorTransactionSettings, { + SQL_EDITOR_AUTO_COMMIT_DELAY_OPTIONS, +} from './QueryEditorTransactionSettings'; import QueryEditorTransactionToolbar, { type PendingSqlEditorTransaction } from './QueryEditorTransactionToolbar'; const SQL_KEYWORDS = [ @@ -752,13 +755,6 @@ const areSqlStatementListsEqual = (left: string[], right: string[]): boolean => && left.every((statement, index) => normalizeExecutedSqlKey(statement) === normalizeExecutedSqlKey(right[index])) ); -const SQL_EDITOR_AUTO_COMMIT_DELAY_OPTIONS = [ - { value: 3000, label: '3 秒' }, - { value: 5000, label: '5 秒' }, - { value: 10000, label: '10 秒' }, - { value: 30000, label: '30 秒' }, -]; - const normalizeEditorPosition = (position: any): { lineNumber: number; column: number } | null => { if (!position) return null; const lineNumber = Number(position.positionLineNumber ?? position.lineNumber ?? position.endLineNumber ?? position.startLineNumber ?? position.selectionStartLineNumber); @@ -5298,27 +5294,13 @@ const QueryEditor: React.FC<{ tab: TabData; isActive?: boolean }> = ({ tab, isAc ]} /> - - setSqlEditorTransactionOptions({ autoCommitDelayMs: Number(delayMs) })} - options={SQL_EDITOR_AUTO_COMMIT_DELAY_OPTIONS} - /> - )} + setSqlEditorTransactionOptions({ commitMode: mode })} + onAutoCommitDelayMsChange={(delayMs) => setSqlEditorTransactionOptions({ autoCommitDelayMs: delayMs })} + /> {pendingSqlTransaction && sqlEditorTransactionToolbar}
void; + onAutoCommitDelayMsChange: (delayMs: number) => void; +}; + +const QueryEditorTransactionSettings: React.FC = ({ + isV2Ui, + commitMode, + autoCommitDelayMs, + onCommitModeChange, + onAutoCommitDelayMsChange, +}) => ( + <> + + onAutoCommitDelayMsChange(Number(delayMs))} + options={SQL_EDITOR_AUTO_COMMIT_DELAY_OPTIONS} + /> + )} + +); + +export default QueryEditorTransactionSettings; diff --git a/frontend/src/v2-theme.css b/frontend/src/v2-theme.css index 1401cdf..99c70fe 100644 --- a/frontend/src/v2-theme.css +++ b/frontend/src/v2-theme.css @@ -4840,8 +4840,8 @@ body[data-ui-version="v2"] .gn-v2-query-toolbar-max-rows-select { } body[data-ui-version="v2"] .gn-v2-query-toolbar-transaction-mode-select { - width: 142px !important; - flex: 0 0 142px !important; + width: 154px !important; + flex: 0 0 154px !important; } body[data-ui-version="v2"] .gn-v2-query-toolbar-transaction-delay-select {