🐛 fix(query-results): 优化SQL执行消息展示

- 执行消息拆分标题栏和滚动正文区域,避免 SQL 文本被遮挡

- 消息正文关闭自动换行并保留原始空白,支持横向滚动查看完整 SQL

- 补充 SQLServer 消息展示和结果面板结构回归断言
This commit is contained in:
Syngnat
2026-06-26 17:29:03 +08:00
parent 3ed45fab41
commit 2df9dce78b
2 changed files with 52 additions and 24 deletions

View File

@@ -1169,6 +1169,12 @@ describe('QueryEditor external SQL save', () => {
'',
" where funcno = @funcno and tabname = '$vendorclass'",
].join('\n'));
expect(messageTextarea.props.wrap).toBe('off');
expect(messageTextarea.props.style).toMatchObject({
display: 'block',
whiteSpace: 'pre',
overflow: 'auto',
});
expect(messageTextarea.props.value).not.toContain('mssql:');
});
@@ -2633,6 +2639,12 @@ describe('QueryEditor external SQL save', () => {
expect(source).toContain("textAlign: 'left'");
expect(source).toContain("justifyContent: 'flex-start'");
expect(source).toContain('query-result-message-block');
expect(source).toContain('query-result-message-header');
expect(source).toContain('query-result-message-scroll-body');
expect(source).toContain("flex: fillHeight ? 1 : '0 1 auto'");
expect(source).toContain('wrap="off"');
expect(source).toContain("whiteSpace: 'pre'");
expect(source).toContain("data-query-result-message-textarea");
expect(source).toContain("query_editor.results_panel.message.action.copy");
expect(source).toContain("typeof navigator?.clipboard?.writeText !== 'function'");

View File

@@ -134,7 +134,7 @@ const QueryEditorResultsPanel: React.FC<QueryEditorResultsPanelProps> = ({
color: string;
marginTop?: number;
}) => (
<div style={{
<div className={`query-result-message-block${compact ? ' is-compact' : ' is-full'}`} style={{
display: 'flex',
flexDirection: 'column',
gap: compact ? 8 : 12,
@@ -149,11 +149,13 @@ const QueryEditorResultsPanel: React.FC<QueryEditorResultsPanelProps> = ({
minHeight: fillHeight ? 0 : undefined,
boxSizing: 'border-box',
}}>
<div style={{
<div className="query-result-message-header" style={{
display: 'flex',
alignItems: 'center',
justifyContent: title ? 'space-between' : 'flex-end',
gap: 12,
flex: '0 0 auto',
minHeight: compact ? 28 : 32,
}}>
{title ? <span style={{ fontSize: 14, fontWeight: 600 }}>{title}</span> : <span />}
<Button
@@ -165,33 +167,47 @@ const QueryEditorResultsPanel: React.FC<QueryEditorResultsPanelProps> = ({
{t('query_editor.results_panel.message.action.copy')}
</Button>
</div>
<textarea
readOnly
wrap="soft"
spellCheck={false}
aria-label={title || t('query_editor.results_panel.message.title')}
data-query-result-message-textarea={compact ? 'compact' : 'full'}
value={text}
onKeyDown={handleMessageTextareaKeyDown}
<div
className="query-result-message-scroll-body"
style={{
width: '100%',
flex: fillHeight ? 1 : undefined,
flex: fillHeight ? 1 : '0 1 auto',
minHeight: compact ? 72 : 0,
maxHeight: compact ? 160 : undefined,
padding: 0,
margin: 0,
border: 'none',
resize: 'none',
background: 'transparent',
color,
fontFamily: 'var(--gn-font-mono)',
fontSize,
lineHeight: 1.6,
outline: 'none',
boxSizing: 'border-box',
overflow: 'auto',
minWidth: 0,
borderRadius: 6,
}}
/>
>
<textarea
readOnly
wrap="off"
spellCheck={false}
aria-label={title || t('query_editor.results_panel.message.title')}
data-query-result-message-textarea={compact ? 'compact' : 'full'}
value={text}
onKeyDown={handleMessageTextareaKeyDown}
style={{
display: 'block',
width: '100%',
minWidth: 'max-content',
height: '100%',
minHeight: compact ? 72 : 0,
padding: 0,
margin: 0,
border: 'none',
resize: 'none',
background: 'transparent',
color,
fontFamily: 'var(--gn-font-mono)',
fontSize,
lineHeight: 1.6,
whiteSpace: 'pre',
outline: 'none',
boxSizing: 'border-box',
overflow: 'auto',
}}
/>
</div>
</div>
);
const toolbarHideButton = (