perf: 优化markdown显示问题
This commit is contained in:
@@ -110,11 +110,6 @@ const renderer = {
|
|||||||
const titleAttr = title ? ` title="${title}"` : '';
|
const titleAttr = title ? ` title="${title}"` : '';
|
||||||
return `<img src="${href}" alt="${text}"${titleAttr} loading="lazy" class="markdown-image" />`;
|
return `<img src="${href}" alt="${text}"${titleAttr} loading="lazy" class="markdown-image" />`;
|
||||||
},
|
},
|
||||||
|
|
||||||
// 表格
|
|
||||||
table(token: { header: string; body: string }) {
|
|
||||||
return `<div class="table-wrapper"><table>${token.header}${token.body}</table></div>`;
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
marked.use({ renderer });
|
marked.use({ renderer });
|
||||||
@@ -149,7 +144,10 @@ async function renderContent(content: string) {
|
|||||||
lastContent = content;
|
lastContent = content;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const rawHtml = await marked.parse(content);
|
let rawHtml = await marked.parse(content);
|
||||||
|
// 包装表格,添加 table-wrapper 以支持横向滚动
|
||||||
|
rawHtml = rawHtml.replace(/<table>/g, '<div class="table-wrapper"><table>');
|
||||||
|
rawHtml = rawHtml.replace(/<\/table>/g, '</table></div>');
|
||||||
// 使用 DOMPurify 清理 HTML,防止 XSS
|
// 使用 DOMPurify 清理 HTML,防止 XSS
|
||||||
renderedHtml.value = DOMPurify.sanitize(rawHtml, {
|
renderedHtml.value = DOMPurify.sanitize(rawHtml, {
|
||||||
ADD_TAGS: ['iframe'],
|
ADD_TAGS: ['iframe'],
|
||||||
@@ -649,7 +647,7 @@ onUnmounted(() => {
|
|||||||
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
//line-height: 21px;
|
//line-height: 21px;
|
||||||
height: 22.72px;
|
height: 22px;
|
||||||
min-width: 40px;
|
min-width: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -202,13 +202,6 @@ function handleDataChunk(chunk: AnyObject) {
|
|||||||
latest.content += parsed.content;
|
latest.content += parsed.content;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 流式输出时保持滚动条在底部(等待 DOM 更新后再滚动)
|
|
||||||
nextTick(() => {
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
bubbleListRef.value?.scrollToBottom();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
console.error('解析数据时出错:', err);
|
console.error('解析数据时出错:', err);
|
||||||
@@ -1248,4 +1241,7 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.footer-time .el-button{
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user