医疗AI病历生成中的样式隔离与iframe解决方案

1. 项目概述：AI病历生成中的样式隔离挑战

在医疗AI助手的开发过程中，我们遇到了一个典型的样式冲突问题。当AI模型生成的病历HTML内容被渲染到前端页面时，其内联样式与现有页面样式产生了严重冲突。这个问题看似简单，却直接影响了产品的核心用户体验——医生无法正常阅读AI生成的病历报告。

最初我们考虑通过修改后端Prompt或前端样式覆盖等复杂方案来解决，但最终发现使用iframe这个"古老"的HTML特性，竟是最优雅的解决方案。这个案例完美诠释了工程师常说的"奥卡姆剃刀原则"：在多个可行的解决方案中，最简单的往往最有效。

2. 问题深度解析：样式冲突的根源

2.1 医疗AI的工作流程

典型的医疗AI助手工作流程包含四个关键环节：

1. 前端界面收集用户输入（患者信息、病历模板选择等）
2. 后端服务整合患者历史数据
3. 调用AI大模型生成结构化病历内容
4. 前端渲染AI返回的HTML内容

问题就出在最后一步——AI生成的HTML往往自带样式声明，这些样式与现有医疗系统的UI框架产生冲突。

2.2 样式冲突的具体表现

AI生成的病历HTML通常包含以下特征：

• 使用通用类名（如.medical-record）
• 包含!important规则
• 有全局样式定义（如table、h3等标签选择器）

而医疗系统前端通常已有成熟的样式体系：

css复制/* 系统原有样式 */
.result-content .medical-record {
    padding: 15px;
    background: white;
}
.result-content table {
    width: 80%;
    margin: 0 auto;
}

当两者相遇时，AI样式会覆盖系统样式，导致：

• 表格宽度异常
• 标题对齐方式错误
• 背景色不符合医疗系统规范

3. 解决方案演进：从复杂到简单

3.1 方案1：后端Prompt修改

最初我们尝试修改生成Prompt，要求AI不输出样式：

python复制def _enhance_html_structure(self, html: str) -> str:
    import re
    html = re.s