🎨 优化前端渲染功能（html状态栏通信存在问题）

Signed-off-by: Echo <1711788888@qq.com>
2026-03-03 04:28:33 +08:00
parent cbb4034a91
commit c267b6c76e
4 changed files with 662 additions and 50 deletions
--- a/web-app/src/components/MessageContent.tsx
+++ b/web-app/src/components/MessageContent.tsx
@@ -508,8 +508,10 @@ export default function MessageContent({ content, role, onChoiceSelect }: Messag
          <body>
      `)

-      // 2. 创建 YAML script 标签并直接设置 textContent（避免 HTML 转义）
-      doc.write('<script id="yaml-data-source" type="text/yaml"><\/script>')
+      // 2. 写入 YAML 数据（使用 textContent 方式，避免 HTML 转义）
+      // 注意：我们需要在 doc.close() 之前写入所有内容
+      const yamlScriptContent = `<script id="yaml-data-source" type="text/yaml">${statusYaml.replace(/</g, '\\x3C').replace(/>/g, '\\x3E')}<\/script>`
+      doc.write(yamlScriptContent)

      // 3. 写入渲染脚本
      doc.write(`
@@ -624,17 +626,9 @@ export default function MessageContent({ content, role, onChoiceSelect }: Messag

      doc.close()

-      // 4. 关键步骤：直接设置 YAML 数据到 script 标签的 textContent
-      // 这样可以避免 HTML 转义问题
-      const yamlScript = doc.getElementById('yaml-data-source')
-      if (yamlScript) {
-        yamlScript.textContent = statusYaml
-        console.log('[MessageContent] YAML 数据已注入，长度:', statusYaml.length)
-      } else {
-        console.error('[MessageContent] 找不到 yaml-data-source 元素')
-      }
+      console.log('[MessageContent] YAML 数据已注入，长度:', statusYaml.length)

-      // 5. 自动调整 iframe 高度
+      // 4. 自动调整 iframe 高度
      setTimeout(() => {
        if (doc.body) {
          const height = doc.body.scrollHeight