Skip to content

P
pac
Commit f2aca14a by luoqi
Options

fix(assistant): 修助手图表无限拉高(Chart.js ↔ 自适应 iframe 正反馈环) 

根因:沙箱 iframe 用 ResizeObserver(body)上报 scrollHeight 给父页自适应高度;
当模型生成 maintainAspectRatio:false + 百分比/满高容器的 Chart.js 图表时,
画布撑高 body → iframe 拔高 → 画布响应式再撑高 → 一路冲到 1600 上限,看着像无限拉长。

修复(两道):
- 沙箱 <style> 注入 canvas{max-height:360px!important} —— 切断反馈环的根治手段,
  对任何模型 HTML 都生效(不依赖模型自觉)。
- SYSTEM_PROMPT 要求图表放固定高度容器 + maintainAspectRatio:false,禁百分比/满屏高度。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
parent b61e21ed
Showing with 5 additions and 2 deletions
apps/pac-service/src/modules/assistant/assistant.service.ts
......@@ -17,7 +17,7 @@ const SYSTEM_PROMPT = `你是一个通用智能助手,目前在为牙科诊所
展示方式(重要):
- 简短问答、闲聊、解释 → 直接用文字(markdown)回答,不要产卡片。
- 当内容适合可视化时——召回池/患者列表、患者画像卡、分析报表(可含图表)——先用工具取真实数据,然后调用 render_artifact 渲染一个 HTML 卡片来展示。
- render_artifact 的 html 是「<body> 内部片段」:用 Tailwind 工具类排版,强调色用 PAC 主题 teal #0D9488,白底圆角卡片、留白舒适;需要图表时用 Chart.js(<canvas> + <script>new Chart(...)</script>)。
- render_artifact 的 html 是「<body> 内部片段」:用 Tailwind 工具类排版,强调色用 PAC 主题 teal #0D9488,白底圆角卡片、留白舒适;需要图表时用 Chart.js,且**必须**把 <canvas> 放进固定高度容器(如 <div style="position:relative;height:300px"><canvas></canvas></div>)并在 options 里设 maintainAspectRatio:false;**切勿**给图表用百分比/满屏高度(h-full / h-screen / height:100%),否则会无限拉高。
- 运行环境已注入 Tailwind 与 Chart.js,不要再写 <html>/<head>/<!DOCTYPE> 或自行引入它们;严禁 fetch / 访问任何外部网络——所有数据内联写进 HTML,手机号掩码,只用工具返回的真实值。
- HTML 力求紧凑高效:聚焦关键字段,避免重复堆砌的大段装饰性 class 和冗余结构(同类条目用最精简的标记),以便更快生成与呈现。
- 产出卡片后,再用一两句话点出要点即可(数据细节在卡片里)。
......
apps/pac-web/src/components/assistant/assistant-chat.tsx
......@@ -223,7 +223,10 @@ const ARTIFACT_HEAD = `<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>body{margin:0;font-family:"PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;background:#f8fafc;color:#0f172a}</style>`;
<style>body{margin:0;font-family:"PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;background:#f8fafc;color:#0f172a}
/* 切断 Chart.js 响应式 ↔ 自适应 iframe 高度的正反馈环:画布层高写死上限,
无论模型用 maintainAspectRatio:false 还是百分比容器,canvas 都不会随 body 增高而无限拉长。*/
canvas{max-height:360px!important}</style>`;
// 持久壳:iframe 只加载一次(Tailwind/Chart.js 不重载),内容经 postMessage 注入 #root。
// 流式中只 set innerHTML(Tailwind 的 MutationObserver 自动上样式);final 时重建 <script> 让 Chart.js 执行。
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment