♻️ refactor(query-editor): 拆分 SQL 事务工具栏组件

- 抽离 SQL 编辑器待提交事务提示与提交回滚按钮

- 保持 QueryEditor 事务状态与回调逻辑不变

- 同步组件结构测试并验证构建

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 transactionToolbarSource = readFileSync(new URL('./QueryEditorTransactionToolbar.tsx', import.meta.url), 'utf8');
     const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
 
     expect(source).toContain('gn-v2-query-toolbar-selects');
@@ -3569,6 +3570,10 @@ describe('QueryEditor external SQL save', () => {
     expect(source).toContain('这里仅选择事务执行成功后的 COMMIT 方式');
     expect(source).toContain("label: '事务：手动提交'");
     expect(source).toContain("label: '事务：自动提交'");
+    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(source).toContain('style={isV2Ui ? undefined : { width: 200 }}');

frontend/src/components/QueryEditor.tsx

@@ -36,6 +36,7 @@ import {
     getColumnDefinitionName,
 } from '../utils/columnDefinition';
 import QueryEditorResultsPanel, { type QueryEditorResultSet } from './QueryEditorResultsPanel';
+import QueryEditorTransactionToolbar, { type PendingSqlEditorTransaction } from './QueryEditorTransactionToolbar';
 
 const SQL_KEYWORDS = [
     'SELECT', 'FROM', 'WHERE', 'LIMIT', 'INSERT', 'UPDATE', 'DELETE', 'JOIN', 'LEFT', 'RIGHT',
@@ -758,14 +759,6 @@ const SQL_EDITOR_AUTO_COMMIT_DELAY_OPTIONS = [
     { value: 30000, label: '30 秒' },
 ];
 
-type PendingSqlEditorTransaction = {
-    id: string;
-    commitMode: 'manual' | 'auto';
-    autoCommitDelayMs: number;
-    createdAt: number;
-    autoCommitDueAt?: number | null;
-};
-
 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);
@@ -5247,38 +5240,15 @@ const QueryEditor: React.FC<{ tab: TabData; isActive?: boolean }> = ({ tab, isAc
       }, wasClosed ? 350 : 0);
   };
 
-  const sqlEditorTransactionToolbar = pendingSqlTransaction ? (
-      <div
-          className={isV2Ui ? 'gn-v2-query-transaction-toolbar' : undefined}
-          style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: 8,
-              padding: '0 4px',
-              whiteSpace: 'nowrap',
-          }}
-      >
-          <span style={{ fontSize: 12, color: darkMode ? '#d4d4d4' : '#666' }}>
-              {pendingSqlTransaction.commitMode === 'auto' && sqlEditorAutoCommitRemainingSeconds !== null
-                  ? `事务待提交，${sqlEditorAutoCommitRemainingSeconds}s 后自动提交`
-                  : '事务待提交'}
-          </span>
-          <Button
-              size="small"
-              type="primary"
-              onClick={() => void finishPendingSqlTransaction('commit', 'manual')}
-          >
-              提交
-          </Button>
-          <Button
-              size="small"
-              danger
-              onClick={() => void finishPendingSqlTransaction('rollback', 'manual')}
-          >
-              回滚
-          </Button>
-      </div>
-  ) : null;
+  const sqlEditorTransactionToolbar = (
+      <QueryEditorTransactionToolbar
+          isV2Ui={isV2Ui}
+          darkMode={darkMode}
+          transaction={pendingSqlTransaction}
+          autoCommitRemainingSeconds={sqlEditorAutoCommitRemainingSeconds}
+          onFinish={(action) => void finishPendingSqlTransaction(action, 'manual')}
+      />
+  );
 
   return (
     <div ref={queryEditorRootRef} className={isV2Ui ? 'gn-v2-query-editor' : undefined} style={{ flex: '1 1 auto', minHeight: 0, display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>

frontend/src/components/QueryEditorTransactionToolbar.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Button } from 'antd';
+
+export type PendingSqlEditorTransaction = {
+  id: string;
+  commitMode: 'manual' | 'auto';
+  autoCommitDelayMs: number;
+  createdAt: number;
+  autoCommitDueAt?: number | null;
+};
+
+type QueryEditorTransactionToolbarProps = {
+  isV2Ui: boolean;
+  darkMode: boolean;
+  transaction: PendingSqlEditorTransaction | null;
+  autoCommitRemainingSeconds: number | null;
+  onFinish: (action: 'commit' | 'rollback') => void;
+};
+
+const QueryEditorTransactionToolbar: React.FC<QueryEditorTransactionToolbarProps> = ({
+  isV2Ui,
+  darkMode,
+  transaction,
+  autoCommitRemainingSeconds,
+  onFinish,
+}) => {
+  if (!transaction) {
+    return null;
+  }
+
+  return (
+    <div
+      className={isV2Ui ? 'gn-v2-query-transaction-toolbar' : undefined}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: '0 4px',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      <span style={{ fontSize: 12, color: darkMode ? '#d4d4d4' : '#666' }}>
+        {transaction.commitMode === 'auto' && autoCommitRemainingSeconds !== null
+          ? `事务待提交，${autoCommitRemainingSeconds}s 后自动提交`
+          : '事务待提交'}
+      </span>
+      <Button
+        size="small"
+        type="primary"
+        onClick={() => onFinish('commit')}
+      >
+        提交
+      </Button>
+      <Button
+        size="small"
+        danger
+        onClick={() => onFinish('rollback')}
+      >
+        回滚
+      </Button>
+    </div>
+  );
+};
+
+export default QueryEditorTransactionToolbar;