♻️ refactor(query-editor): 拆分 SQL 事务提交设置控件

2026-06-14 10:29:52 +08:00 · 2026-06-10 19:47:33 +08:00
parent ab053ef7d1
commit 69f51f8ec8
4 changed files with 74 additions and 37 deletions
--- 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)');
--- 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
                  ]}
              />
          </Tooltip>
-          <Tooltip title="SQL 编辑器执行 INSERT/UPDATE/DELETE/MERGE/REPLACE 等 DML 时会先开启受管事务；这里仅选择事务执行成功后的 COMMIT 方式。">
-              <Select
-                  className={isV2Ui ? 'gn-v2-query-toolbar-select gn-v2-query-toolbar-transaction-mode-select' : undefined}
-                  style={isV2Ui ? undefined : { width: 150 }}
-                  value={sqlEditorCommitMode}
-                  onChange={(mode) => setSqlEditorTransactionOptions({ commitMode: mode === 'auto' ? 'auto' : 'manual' })}
-                  options={[
-                      { label: '事务：手动提交', value: 'manual' },
-                      { label: '事务：自动提交', value: 'auto' },
-                  ]}
-              />
-          </Tooltip>
-          {sqlEditorCommitMode === 'auto' && (
-              <Select
-                  className={isV2Ui ? 'gn-v2-query-toolbar-select gn-v2-query-toolbar-transaction-delay-select' : undefined}
-                  style={isV2Ui ? undefined : { width: 96 }}
-                  value={sqlEditorAutoCommitDelayMs}
-                  onChange={(delayMs) => setSqlEditorTransactionOptions({ autoCommitDelayMs: Number(delayMs) })}
-                  options={SQL_EDITOR_AUTO_COMMIT_DELAY_OPTIONS}
-              />
-          )}
+          <QueryEditorTransactionSettings
+              isV2Ui={isV2Ui}
+              commitMode={sqlEditorCommitMode}
+              autoCommitDelayMs={sqlEditorAutoCommitDelayMs}
+              onCommitModeChange={(mode) => setSqlEditorTransactionOptions({ commitMode: mode })}
+              onAutoCommitDelayMsChange={(delayMs) => setSqlEditorTransactionOptions({ autoCommitDelayMs: delayMs })}
+          />
          {pendingSqlTransaction && sqlEditorTransactionToolbar}
        </div>
        <div
--- a/frontend/src/components/QueryEditorTransactionSettings.tsx
+++ b/frontend/src/components/QueryEditorTransactionSettings.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Select, Tooltip } from 'antd';
+
+export type SqlEditorCommitMode = 'manual' | 'auto';
+
+export const SQL_EDITOR_AUTO_COMMIT_DELAY_OPTIONS = [
+  { value: 3000, label: '3 秒' },
+  { value: 5000, label: '5 秒' },
+  { value: 10000, label: '10 秒' },
+  { value: 30000, label: '30 秒' },
+];
+
+type QueryEditorTransactionSettingsProps = {
+  isV2Ui: boolean;
+  commitMode: SqlEditorCommitMode;
+  autoCommitDelayMs: number;
+  onCommitModeChange: (mode: SqlEditorCommitMode) => void;
+  onAutoCommitDelayMsChange: (delayMs: number) => void;
+};
+
+const QueryEditorTransactionSettings: React.FC<QueryEditorTransactionSettingsProps> = ({
+  isV2Ui,
+  commitMode,
+  autoCommitDelayMs,
+  onCommitModeChange,
+  onAutoCommitDelayMsChange,
+}) => (
+  <>
+    <Tooltip title="SQL 编辑器执行 INSERT/UPDATE/DELETE/MERGE/REPLACE 等 DML 时固定开启受管事务；这里仅选择事务执行成功后的 COMMIT 时机。">
+      <Select
+        className={isV2Ui ? 'gn-v2-query-toolbar-select gn-v2-query-toolbar-transaction-mode-select' : undefined}
+        style={isV2Ui ? undefined : { width: 160 }}
+        value={commitMode}
+        onChange={(mode) => onCommitModeChange(mode === 'auto' ? 'auto' : 'manual')}
+        options={[
+          { label: '提交：手动 COMMIT', value: 'manual' },
+          { label: '提交：自动 COMMIT', value: 'auto' },
+        ]}
+      />
+    </Tooltip>
+    {commitMode === 'auto' && (
+      <Select
+        className={isV2Ui ? 'gn-v2-query-toolbar-select gn-v2-query-toolbar-transaction-delay-select' : undefined}
+        style={isV2Ui ? undefined : { width: 96 }}
+        value={autoCommitDelayMs}
+        onChange={(delayMs) => onAutoCommitDelayMsChange(Number(delayMs))}
+        options={SQL_EDITOR_AUTO_COMMIT_DELAY_OPTIONS}
+      />
+    )}
+  </>
+);
+
+export default QueryEditorTransactionSettings;
--- 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 {