diff --git a/pages_tool/ai-chat/ai-chat-message.vue b/pages_tool/ai-chat/ai-chat-message.vue index ecaffa6..fe0ee3b 100644 --- a/pages_tool/ai-chat/ai-chat-message.vue +++ b/pages_tool/ai-chat/ai-chat-message.vue @@ -234,10 +234,10 @@ - + - + @@ -250,10 +250,10 @@ - + - + @@ -3937,17 +3937,24 @@ _handleStreamError(msg) { }, // AI 消息渲染(含关键词高亮) - getAIDisplayContent(content) { + // isWelcome: 欢迎语消息 — 小程序端 mp-html 组件有样式隔离, 页面样式(::v-deep)进不去, + // 图片间距只能在内容层面改内联样式(机器人图片与下方标题的间距, 对齐 WorkBuddy 参考稿) + getAIDisplayContent(content, isWelcome) { + let html 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 (content.toLowerCase().indexOf(this.searchKeyword.toLowerCase()) === -1) { - return this.parseMarkdown(content) + if (isWelcome && html) { + // 仅替换 img 的 margin(机器人图片), 不影响列表等其他元素的 margin:8rpx 0 + html = html.replace(/(]*style="[^"]*?)margin:\s*8rpx 0;/, '$1margin:0 0 48rpx 0;') } - // 先做 markdown 渲染,再做关键词高亮 - const mdHtml = this.parseMarkdown(content) - return this._wrapHighlightInHtml(mdHtml, this.searchKeyword) + return html }, // 在纯文本中高亮关键词(用于用户消息)