wangys/urbanLifeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化markdown渲染

Browse Source
This commit is contained in:
wangys
2025-12-29 19:06:45 +08:00
parent 4b6cb726d2
commit d0f133613d
4 changed files with 46 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.scss
View File

@@ -329,6 +329,7 @@
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
gap: 16rpx; gap: 16rpx;
width: 100%;
} }
.other-row { .other-row {
@@ -363,12 +364,13 @@
.message-content { .message-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 480rpx; max-width: 70%;
min-width: 0; // 允许flex子元素收缩
} }
// 会议卡片需要更宽的空间 // 会议卡片需要更宽的空间
.message-content.meeting-card-wrapper { .message-content.meeting-card-wrapper {
max-width: 600rpx; max-width: 80%;
} }
.self-row .message-content { .self-row .message-content {
@@ -382,11 +384,13 @@
} }
.bubble { .bubble {
max-width: 480rpx; max-width: 100%;
padding: 18rpx 20rpx; padding: 18rpx 20rpx;
border-radius: 18rpx; border-radius: 18rpx;
font-size: 28rpx; font-size: 28rpx;
line-height: 1.6; line-height: 1.6;
word-break: break-all; // 长单词/URL换行
overflow-wrap: break-word;
} }
.other-bubble { .other-bubble {
@@ -403,6 +407,15 @@
font-size: 28rpx; font-size: 28rpx;
line-height: 1.6; line-height: 1.6;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all;
display: block;
}
.message-rich-text {
font-size: 28rpx;
line-height: 1.6;
word-break: break-all;
overflow-wrap: break-word;
} }
.message-time { .message-time {

7
urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue
View File

@@ -470,10 +470,10 @@ function renderMarkdown(text: string): string {
html = html.replace(/(?<!\*)\*([^\*]+)\*(?!\*)/g, '<em>$1</em>') html = html.replace(/(?<!\*)\*([^\*]+)\*(?!\*)/g, '<em>$1</em>')
// 处理行内代码（`语法） // 处理行内代码（`语法）
html = html.replace(/`([^`]+)`/g, '<code style="background-color:#f5f5f5;padding:2px 6px;border-radius:3px;font-family:monospace;color:#e53e3e;">$1</code>') html = html.replace(/`([^`]+)`/g, '<code style="background-color:#f5f5f5;padding:2px 6px;border-radius:3px;font-family:monospace;color:#e53e3e;word-break:break-all;">$1</code>')
// 处理链接（[text](url)语法） // 处理链接（[text](url)语法）
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color:#0055AA;text-decoration:underline;">$1</a>') html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color:#0055AA;text-decoration:underline;word-break:break-all;">$1</a>')
// 处理标题（# ## ###等） // 处理标题（# ## ###等）
html = html.replace(/^### (.+)$/gm, '<div style="font-size:16px;font-weight:600;margin:8px 0 4px;">$1</div>') html = html.replace(/^### (.+)$/gm, '<div style="font-size:16px;font-weight:600;margin:8px 0 4px;">$1</div>')
@@ -486,7 +486,8 @@ function renderMarkdown(text: string): string {
// 处理换行 // 处理换行
html = html.replace(/\n/g, '<br/>') html = html.replace(/\n/g, '<br/>')
return html // 包裹在带有换行样式的容器中
return `<div style="word-break:break-all;overflow-wrap:break-word;white-space:pre-wrap;">${html}</div>`
} }
// 发送消息 // 发送消息

11
urbanLifelineWeb/packages/workcase_wechat/pages/index/index.scss
View File

@@ -337,6 +337,17 @@
word-wrap: break-word; word-wrap: break-word;
} }
// rich-text 组件样式（用于 Markdown 渲染）
.message-rich-text {
font-size: 14px;
line-height: 1.5;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal;
max-width: 100%;
}
.message-time { .message-time {
font-size: 11px; font-size: 11px;
color: #999999; color: #999999;

29
urbanLifelineWeb/packages/workcase_wechat/pages/index/index.uvue
View File

@@ -599,7 +599,7 @@
await callAIChat(question) await callAIChat(question)
} }
// Markdown渲染函数（返回富文本节点） // Markdown渲染函数(返回富文本节点)
function renderMarkdown(text : string) : string { function renderMarkdown(text : string) : string {
if (!text) return '' if (!text) return ''
@@ -609,30 +609,31 @@
.replace(/</g, '&lt;') .replace(/</g, '&lt;')
.replace(/>/g, '&gt;') .replace(/>/g, '&gt;')
// 处理粗体（**语法） // 处理粗体(**语法)
html = html.replace(/\*\*([^\*]+)\*\*/g, '<strong>$1</strong>') html = html.replace(/\*\*([^\*]+)\*\*/g, '<strong>$1</strong>')
// 处理斜体（*语法，但要避免和粗体冲突） // 处理斜体(*语法,但要避免和粗体冲突)
html = html.replace(/(?<!\*)\*([^\*]+)\*(?!\*)/g, '<em>$1</em>') html = html.replace(/(?<!\*)\*([^\*]+)\*(?!\*)/g, '<em>$1</em>')
// 处理行内代码（`语法） // 处理行内代码(`语法)
html = html.replace(/`([^`]+)`/g, '<code style="background-color:#f5f5f5;padding:2px 6px;border-radius:3px;font-family:monospace;color:#e53e3e;">$1</code>') html = html.replace(/`([^`]+)`/g, '<code style="background-color:#f5f5f5;padding:2px 6px;border-radius:3px;font-family:monospace;color:#e53e3e;word-break:break-all;">$1</code>')
// 处理链接（[text](url)语法） // 处理链接([text](url)语法)
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color:#0055AA;text-decoration:underline;">$1</a>') html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" style="color:#0055AA;text-decoration:underline;word-break:break-all;overflow-wrap:break-word;">$1</a>')
// 处理标题（# ## ###等） // 处理标题(# ## ###等)
html = html.replace(/^### (.+)$/gm, '<div style="font-size:16px;font-weight:600;margin:8px 0 4px;">$1</div>') html = html.replace(/^### (.+)$/gm, '<div style="font-size:16px;font-weight:600;margin:8px 0 4px;word-break:break-word;">$1</div>')
html = html.replace(/^## (.+)$/gm, '<div style="font-size:18px;font-weight:600;margin:10px 0 6px;">$1</div>') html = html.replace(/^## (.+)$/gm, '<div style="font-size:18px;font-weight:600;margin:10px 0 6px;word-break:break-word;">$1</div>')
html = html.replace(/^# (.+)$/gm, '<div style="font-size:20px;font-weight:700;margin:12px 0 8px;">$1</div>') html = html.replace(/^# (.+)$/gm, '<div style="font-size:20px;font-weight:700;margin:12px 0 8px;word-break:break-word;">$1</div>')
// 处理无序列表（- 或 * 开头） // 处理无序列表(- 或 * 开头)
html = html.replace(/^[*-] (.+)$/gm, '<div style="margin-left:16px;">• $1</div>') html = html.replace(/^[*-] (.+)$/gm, '<div style="margin-left:16px;word-break:break-word;">• $1</div>')
// 处理换行 // 处理换行
html = html.replace(/\n/g, '<br/>') html = html.replace(/\n/g, '<br/>')
return html // 包裹在一个具有换行样式的容器中
return `<div style="word-break:break-word;overflow-wrap:break-word;white-space:normal;max-width:100%;">${html}</div>`
} }
// 显示上传选项 // 显示上传选项