GithubBackup/MyGoNavi
1
0
Fork 0
mirror of https://github.com/Syngnat/GoNavi.git synced 2026-08-03 20:38:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix(sql-editor): 修复事务执行会话与工具栏布局交互

Browse Source
This commit is contained in:
Syngnat
2026-06-14 12:40:31 +08:00
parent 7a85c30752
commit 8d5a24992a
7 changed files with 500 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/QueryEditor.external-sql-save.test.tsx
View File

@@ -3832,9 +3832,9 @@ describe('QueryEditor external SQL save', () => {
expect(css).toContain('width: 34px !important;');
expect(css).toContain('@media (max-width: 900px)');
const queryToolbarCss = css.slice(css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar {'), css.indexOf('body[data-ui-version="v2"] .gn-v2-query-monaco-shell {'));
expect(queryToolbarCss).not.toContain('margin-left: auto;');
expect(queryToolbarCss).not.toContain('justify-content: flex-end;');
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).not.toContain('margin-left: auto;');
expect(queryToolbarMainCss).not.toContain('justify-content: flex-end;');
});
it('keeps custom SQL snippet syntax help editable and uses it in completion details', () => {

23
frontend/src/components/QueryEditorToolbar.layout.test.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from 'react';
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', () => {
const toolbarSource = readFileSync(new URL('./QueryEditorToolbar.tsx', import.meta.url), 'utf8');
const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
expect(toolbarSource).toContain('gn-v2-query-toolbar-main');
expect(toolbarSource).toContain('gn-v2-query-toolbar-transaction-row');
expect(toolbarSource).toContain('{pendingTransactionToolbar && (');
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');
});
it('keeps commit button hover styling in source and v2 css', () => {
const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
expect(css).toContain('.gn-v2-query-transaction-commit-button:hover');
expect(css).toContain('.gn-v2-query-transaction-commit-button:focus-visible');
});
});

39
frontend/src/components/QueryEditorToolbar.tsx
View File

@@ -77,8 +77,8 @@ const QueryEditorToolbar: React.FC<QueryEditorToolbarProps> = ({
onFormat,
onToggleResultPanelVisibility,
onAIAction,
}) => (
<div className={isV2Ui ? 'gn-v2-query-toolbar' : undefined} style={{ padding: '4px 8px 8px', display: 'flex', gap: '8px', flexShrink: 0, alignItems: 'center' }}>
}) => {
const selects = (
<div
className={isV2Ui ? 'gn-v2-query-toolbar-selects' : undefined}
style={{ display: 'flex', gap: '8px', flexShrink: 0, alignItems: 'center' }}
@@ -123,8 +123,11 @@ const QueryEditorToolbar: React.FC<QueryEditorToolbarProps> = ({
onCommitModeChange={onCommitModeChange}
onAutoCommitDelayMsChange={onAutoCommitDelayMsChange}
/>
{pendingTransactionToolbar}
{!isV2Ui && pendingTransactionToolbar}
</div>
);
const actions = (
<div
className={isV2Ui ? 'gn-v2-query-toolbar-actions' : undefined}
style={{ display: 'flex', gap: '8px', flexShrink: 0, alignItems: 'center' }}
@@ -198,7 +201,33 @@ const QueryEditorToolbar: React.FC<QueryEditorToolbarProps> = ({
<Button className={isV2Ui ? 'gn-v2-query-toolbar-ai-action' : undefined} icon={<RobotOutlined />} style={{ color: '#818cf8' }}>AI</Button>
</Dropdown>
</div>
</div>
);
);
if (!isV2Ui) {
return (
<div className={undefined} style={{ padding: '4px 8px 8px', display: 'flex', gap: '8px', flexShrink: 0, alignItems: 'center' }}>
{selects}
{actions}
</div>
);
}
return (
<div className="gn-v2-query-toolbar" style={{ padding: '4px 8px 8px', display: 'flex', gap: '8px', flexShrink: 0 }}>
<div
className="gn-v2-query-toolbar-main"
style={{ display: 'flex', gap: '8px', flexShrink: 0, alignItems: 'center' }}
>
{selects}
{actions}
</div>
{pendingTransactionToolbar && (
<div className="gn-v2-query-toolbar-transaction-row">
{pendingTransactionToolbar}
</div>
)}
</div>
);
};
export default QueryEditorToolbar;