Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：微信小程序的AI智能客服标题和图片之间有距离

Browse Source
This commit is contained in:
jing
2026-10-09 16:56:05 +08:00
parent 8488aa39bc
commit e7dd6aff62
1 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
pages_tool/ai-chat/ai-chat-message.vue
View File

@@ -234,10 +234,10 @@
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<!-- PR-CHAT-SELECTABLE (2026-09-23): rich-text 不支持文本选中, 改用 mp-html + selectable <!-- PR-CHAT-SELECTABLE (2026-09-23): rich-text 不支持文本选中, 改用 mp-html + selectable
开启原生长按选中(剪切/复制/粘贴/全选); force 同时兼容微信 iOS --> 开启原生长按选中(剪切/复制/粘贴/全选); force 同时兼容微信 iOS -->
<mp-html class="ai-message-rich" :content="getAIDisplayContent(message.content)" selectable="force" /> <mp-html class="ai-message-rich" :content="getAIDisplayContent(message.content, message.isWelcome)" selectable="force" />
<!-- #endif --> <!-- #endif -->
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<view class="ai-message-text selectable-md" v-html="getAIDisplayContent(message.content)"></view> <view class="ai-message-text selectable-md" v-html="getAIDisplayContent(message.content, message.isWelcome)"></view>
<!-- #endif --> <!-- #endif -->
</view> </view>
@@ -250,10 +250,10 @@
<view class="markdown-body"> <view class="markdown-body">
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<!-- PR-CHAT-SELECTABLE (2026-09-23): 同上, mp-html + selectable 支持长按选中复制 --> <!-- PR-CHAT-SELECTABLE (2026-09-23): 同上, mp-html + selectable 支持长按选中复制 -->
<mp-html class="ai-message-rich" :content="getAIDisplayContent(message.content)" selectable="force" /> <mp-html class="ai-message-rich" :content="getAIDisplayContent(message.content, message.isWelcome)" selectable="force" />
<!-- #endif --> <!-- #endif -->
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<view class="selectable-md" v-html="getAIDisplayContent(message.content)"></view> <view class="selectable-md" v-html="getAIDisplayContent(message.content, message.isWelcome)"></view>
<!-- #endif --> <!-- #endif -->
</view> </view>
</view> </view>
@@ -3937,17 +3937,24 @@ _handleStreamError(msg) {
}, },
// AI 消息渲染（含关键词高亮） // AI 消息渲染（含关键词高亮）
getAIDisplayContent(content) { // isWelcome: 欢迎语消息 — 小程序端 mp-html 组件有样式隔离, 页面样式(::v-deep)进不去,
// 图片间距只能在内容层面改内联样式(机器人图片与下方标题的间距, 对齐 WorkBuddy 参考稿)
getAIDisplayContent(content, isWelcome) {
let html
if (!this.searchKeyword || !content) { if (!this.searchKeyword || !content) {
return this.parseMarkdown(content) html = this.parseMarkdown(content)
} else if (content.toLowerCase().indexOf(this.searchKeyword.toLowerCase()) === -1) {
html = this.parseMarkdown(content)
} else {
// 先做 markdown 渲染，再做关键词高亮
const mdHtml = this.parseMarkdown(content)
html = this._wrapHighlightInHtml(mdHtml, this.searchKeyword)
} }
// 仅当内容包含关键词时才执行高亮，避免非匹配消息的额外处理 if (isWelcome && html) {
if (content.toLowerCase().indexOf(this.searchKeyword.toLowerCase()) === -1) { // 仅替换 img 的 margin(机器人图片), 不影响列表等其他元素的 margin:8rpx 0
return this.parseMarkdown(content) html = html.replace(/(<img[^>]*style="[^"]*?)margin:\s*8rpx 0;/, '$1margin:0 0 48rpx 0;')
} }
// 先做 markdown 渲染，再做关键词高亮 return html
const mdHtml = this.parseMarkdown(content)
return this._wrapHighlightInHtml(mdHtml, this.searchKeyword)
}, },
// 在纯文本中高亮关键词（用于用户消息） // 在纯文本中高亮关键词（用于用户消息）