123

ruoyi-ui-app/package-a/ai-assistant/index.vue

@@ -1678,6 +1678,36 @@ export default {
   max-width: 100%;
   overflow: visible;
   box-sizing: border-box;
+  font-size: 28rpx;
+  line-height: 1.55;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+/* iOS rich-text 会放大 h1/h2(2em)；兜底压回正文大小 */
+.bubble__rich ::v-deep ._h1,
+.bubble__rich ::v-deep ._h2,
+.bubble__rich ::v-deep ._h3,
+.bubble__rich ::v-deep ._h4,
+.bubble__rich ::v-deep ._h5,
+.bubble__rich ::v-deep ._h6 {
+  font-size: 14px !important;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 8px 0 6px;
+}
+
+.bubble__rich ::v-deep ._root,
+.bubble__rich ::v-deep ._p,
+.bubble__rich ::v-deep ._div {
+  font-size: 14px;
+  line-height: 1.55;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+.bubble__rich ::v-deep ._big {
+  font-size: 14px !important;
 }
 
 .bubble--user .bubble__rich {

ruoyi-ui-app/utils/chatMarkdown.js

@@ -1,7 +1,20 @@
 /**
- * AI 聊天气泡：将 Markdown 转为 mp-html 可渲染的 HTML（默认 uni_modules 包不含 markdown 插件）
+ * AI 聊天气泡：将 Markdown 转为 mp-html 可渲染的 HTML
+ * iOS App 的 rich-text 对 rpx、h1~h6(2em) 支持差，统一用 px + p 标签
  */
 
+const FONT = {
+  body: 14,
+  bodySm: 12,
+  h1: 15,
+  h2: 14.5,
+  h3: 14
+}
+
+function px(n) {
+  return `${n}px`
+}
+
 function escapeHtml(s) {
   return String(s)
     .replace(/&/g, '&')
@@ -15,6 +28,24 @@ function looksLikeHtml(s) {
   return /<\/?[a-z][\s\S]*>/i.test(s)
 }
 
+/** iOS rich-text：h1~h6 改为 p+px，去掉 font/big 等会放大的标签 */
+function normalizeAiHtml(html) {
+  let s = String(html)
+  const headingPx = [FONT.h1, FONT.h2, FONT.h3, FONT.h3, FONT.h3, FONT.h3]
+  for (let level = 1; level <= 6; level += 1) {
+    const size = headingPx[level - 1]
+    const re = new RegExp(`<h${level}(\\s[^>]*)?>([\\s\\S]*?)</h${level}>`, 'gi')
+    s = s.replace(
+      re,
+      (_, _attrs, content) =>
+        `<p style="margin:8px 0 6px;font-size:${px(size)};font-weight:600;line-height:1.35;word-break:break-word;">${content}</p>`
+    )
+  }
+  s = s.replace(/<font\b[^>]*>/gi, '<span>').replace(/<\/font>/gi, '</span>')
+  s = s.replace(/<big\b[^>]*>/gi, '<span>').replace(/<\/big>/gi, '</span>')
+  return s
+}
+
 /**
  * @param {string} text 原始 Markdown 或纯文本
  * @returns {string} HTML
@@ -25,7 +56,7 @@ export function markdownToHtml(text) {
   }
   const raw = String(text)
   if (looksLikeHtml(raw)) {
-    return raw
+    return normalizeAiHtml(raw)
   }
 
   const blocks = []
@@ -51,7 +82,14 @@ export function markdownToHtml(text) {
 
 function formatCodeBlock(code) {
   const body = escapeHtml(code.replace(/^\n|\n$/g, ''))
-  return `<pre style="margin:8px 0;padding:10px 12px;border-radius:8px;background:#f6f8fa;overflow-x:auto;font-size:24rpx;line-height:1.45"><code>${body}</code></pre>`
+  return `<pre style="margin:8px 0;padding:10px 12px;border-radius:8px;background:#f6f8fa;overflow-x:auto;font-size:${px(
+    FONT.bodySm
+  )};line-height:1.45"><code>${body}</code></pre>`
+}
+
+function headingStyle(level) {
+  const size = level === 1 ? FONT.h1 : level === 2 ? FONT.h2 : FONT.h3
+  return `margin:8px 0 6px;font-size:${px(size)};font-weight:600;line-height:1.35;word-break:break-word;`
 }
 
 function formatMdBlock(text) {
@@ -71,10 +109,7 @@ function formatMdBlock(text) {
     if (/^#{1,3}\s+/.test(trimmed)) {
       const level = trimmed.match(/^(#+)/)[1].length
       const content = inlineFormat(escapeHtml(trimmed.replace(/^#+\s+/, '')))
-      const size = level === 1 ? '32rpx' : level === 2 ? '30rpx' : '28rpx'
-      out.push(
-        `<div style="margin:12px 0 8px;font-size:${size};font-weight:600;line-height:1.35">${content}</div>`
-      )
+      out.push(`<p style="${headingStyle(level)}">${content}</p>`)
       i += 1
       continue
     }
@@ -86,8 +121,8 @@ function formatMdBlock(text) {
         i += 1
       }
       out.push(
-        `<ul style="margin:6px 0 12px;padding-left:1.25em">${items
-          .map((li) => `<li style="margin:4px 0;line-height:1.5">${li}</li>`)
+        `<ul style="margin:6px 0 12px;padding-left:1.25em;font-size:${px(FONT.body)}">${items
+          .map((li) => `<li style="margin:4px 0;line-height:1.5;font-size:${px(FONT.body)}">${li}</li>`)
           .join('')}</ul>`
       )
       continue
@@ -100,8 +135,8 @@ function formatMdBlock(text) {
         i += 1
       }
       out.push(
-        `<ol style="margin:6px 0 12px;padding-left:1.25em">${items
-          .map((li) => `<li style="margin:4px 0;line-height:1.5">${li}</li>`)
+        `<ol style="margin:6px 0 12px;padding-left:1.25em;font-size:${px(FONT.body)}">${items
+          .map((li) => `<li style="margin:4px 0;line-height:1.5;font-size:${px(FONT.body)}">${li}</li>`)
           .join('')}</ol>`
       )
       continue
@@ -115,7 +150,9 @@ function formatMdBlock(text) {
       }
       const body = quoteLines.map((l) => inlineFormat(escapeHtml(l))).join('<br/>')
       out.push(
-        `<blockquote style="margin:8px 0;padding:6px 12px;border-left:4px solid #22c55e;background:rgba(255,255,255,0.55)">${body}</blockquote>`
+        `<blockquote style="margin:8px 0;padding:6px 12px;border-left:4px solid #22c55e;background:rgba(255,255,255,0.55);font-size:${px(
+          FONT.body
+        )}">${body}</blockquote>`
       )
       continue
     }
@@ -126,35 +163,57 @@ function formatMdBlock(text) {
       i += 1
     }
     const body = inlineFormat(escapeHtml(para.join('\n'))).replace(/\n/g, '<br/>')
-    out.push(`<p style="margin:0 0 10px;line-height:1.55;word-break:break-word">${body}</p>`)
+    out.push(
+      `<p style="margin:0 0 10px;line-height:1.55;word-break:break-word;font-size:${px(FONT.body)}">${body}</p>`
+    )
   }
 
-  return out.join('') || `<p style="margin:0;line-height:1.55">${inlineFormat(escapeHtml(text))}</p>`
+  return (
+    out.join('') ||
+    `<p style="margin:0;line-height:1.55;font-size:${px(FONT.body)}">${inlineFormat(escapeHtml(text))}</p>`
+  )
 }
 
 function inlineFormat(s) {
   return s
-    .replace(/`([^`]+)`/g, '<code style="padding:2px 6px;border-radius:4px;background:rgba(0,0,0,0.06);font-size:24rpx">$1</code>')
+    .replace(
+      /`([^`]+)`/g,
+      `<code style="padding:2px 6px;border-radius:4px;background:rgba(0,0,0,0.06);font-size:${px(FONT.bodySm)}">$1</code>`
+    )
     .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
     .replace(/\*([^*]+)\*/g, '<em>$1</em>')
 }
 
-/** mp-html tag-style 默认样式（对象形式，见插件文档） */
+const bodyStyle = `font-size:${px(FONT.body)};line-height:1.55;word-break:break-word;`
+
+/** mp-html tag-style（统一 px，避免 iOS rich-text 忽略 rpx） */
 export const MP_HTML_TAG_STYLE = {
-  p: 'margin:0 0 10px;line-height:1.55;word-break:break-word;',
-  div: 'word-break:break-word;',
-  ul: 'margin:6px 0 12px;padding-left:1.25em;',
-  ol: 'margin:6px 0 12px;padding-left:1.25em;',
-  li: 'margin:4px 0;line-height:1.5;',
-  pre: 'margin:8px 0;padding:10px 12px;border-radius:8px;background:#f6f8fa;overflow-x:auto;',
-  code: 'font-family:monospace;font-size:24rpx;',
-  blockquote:
-    'margin:8px 0;padding:6px 12px;border-left:4px solid #22c55e;background:rgba(255,255,255,0.55);',
-  a: 'color:#16a34a;text-decoration:underline;',
-  table: 'border-collapse:collapse;margin:8px 0;font-size:24rpx;max-width:100%;',
-  th: 'border:1px solid #ddd4c8;padding:6px 10px;background:#f0ebe3;',
-  td: 'border:1px solid #ddd4c8;padding:6px 10px;'
+  p: `margin:0 0 10px;${bodyStyle}`,
+  div: bodyStyle,
+  h1: `display:block;margin:8px 0 6px;font-size:${px(FONT.h1)};font-weight:600;line-height:1.35;`,
+  h2: `display:block;margin:8px 0 6px;font-size:${px(FONT.h2)};font-weight:600;line-height:1.35;`,
+  h3: `display:block;margin:8px 0 6px;font-size:${px(FONT.h3)};font-weight:600;line-height:1.35;`,
+  h4: `display:block;margin:8px 0 4px;font-size:${px(FONT.h3)};font-weight:600;line-height:1.35;`,
+  h5: `display:block;margin:6px 0 4px;font-size:${px(FONT.h3)};font-weight:600;line-height:1.35;`,
+  h6: `display:block;margin:6px 0 4px;font-size:${px(FONT.h3)};font-weight:600;line-height:1.35;`,
+  ul: `margin:6px 0 12px;padding-left:1.25em;font-size:${px(FONT.body)};`,
+  ol: `margin:6px 0 12px;padding-left:1.25em;font-size:${px(FONT.body)};`,
+  li: `margin:4px 0;line-height:1.5;font-size:${px(FONT.body)};`,
+  pre: `margin:8px 0;padding:10px 12px;border-radius:8px;background:#f6f8fa;overflow-x:auto;font-size:${px(FONT.bodySm)};`,
+  code: `font-family:monospace;font-size:${px(FONT.bodySm)};`,
+  blockquote: `margin:8px 0;padding:6px 12px;border-left:4px solid #22c55e;background:rgba(255,255,255,0.55);font-size:${px(
+    FONT.body
+  )};`,
+  a: `color:#16a34a;text-decoration:underline;font-size:${px(FONT.body)};`,
+  strong: 'font-weight:600;',
+  em: 'font-style:italic;',
+  big: `display:inline;font-size:${px(FONT.body)};`,
+  small: `display:inline;font-size:${px(FONT.bodySm)};`,
+  table: `border-collapse:collapse;margin:8px 0;font-size:${px(FONT.bodySm)};max-width:100%;`,
+  th: `border:1px solid #ddd4c8;padding:6px 10px;background:#f0ebe3;font-size:${px(FONT.bodySm)};`,
+  td: `border:1px solid #ddd4c8;padding:6px 10px;font-size:${px(FONT.bodySm)};`
 }
 
-export const MP_HTML_CONTAINER_STYLE =
-  'display:block;width:100%;min-width:0;overflow:visible;line-height:1.55;font-size:28rpx;color:#4a4542;word-break:break-word;'
+export const MP_HTML_CONTAINER_STYLE = `display:block;width:100%;min-width:0;overflow:visible;line-height:1.55;font-size:${px(
+  FONT.body
+)};color:#4a4542;word-break:break-word;-webkit-text-size-adjust:100%;text-size-adjust:100%;`