🐛 fix(ai): 修正 SQL 代码块 Markdown 换行渲染

- 为 AI markdown 渲染补充 fenced code block 预处理
- 修正 opening/closing fence 缺少换行时的代码块解析失败
- 补充回归测试并更新 issue backlog 记录

Fixes #369
This commit is contained in:
Syngnat
2026-04-17 14:37:36 +08:00
parent 7cb46f9f69
commit f3193f0933
4 changed files with 34 additions and 1 deletions

View File

@@ -8,6 +8,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus, vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { AIChatMessage, AIToolCall } from '../../types';
import type { OverlayWorkbenchTheme } from '../../utils/overlayWorkbenchTheme';
import { normalizeAiMarkdown } from '../../utils/aiMarkdown';
// 🔧 性能优化:将 ReactMarkdown 包装为 Memo 组件并提取固定的 plugins
const remarkPlugins = [remarkGfm];
@@ -27,6 +28,7 @@ const MemoizedMarkdown = React.memo(({
activeConnectionId?: string;
activeDbName?: string;
}) => {
const normalizedContent = React.useMemo(() => normalizeAiMarkdown(content), [content]);
// 缓存 components 对象,避免每次渲染都生成新的函数引用击穿内部子组件的 memo
const components = React.useMemo(() => ({
code({ node, inline, className, children, ...props }: any) {
@@ -46,7 +48,7 @@ const MemoizedMarkdown = React.memo(({
return (
<ReactMarkdown remarkPlugins={remarkPlugins} components={components}>
{content}
{normalizedContent}
</ReactMarkdown>
);
});