- print.ts的iframe样式中增加.ai-region隐藏规则:去除边框/背景/内边距,隐藏右上角标签 - diffModal右侧AI提议版本容器增加style属性:fontFamily SimSun、fontSize 12pt、lineHeight 1.5 - 确保打印输出和diff对比的视觉一致性
1.5 KiB
1.5 KiB
需求分析
时间戳
2026-04-19 18:22
需求来源
用户希望优化两个视觉问题:
- 点击下载或打印时,不显示 AI 可编辑区域的蓝色虚线框和标签
- AI 修改确认弹窗中,右侧「AI 提议版本」的字体和大小与左侧「原始版本」统一
问题 1:打印/下载时 AI 区域蓝框未隐藏
现象:打印或下载报告时,AI 可编辑区域的蓝色虚线边框和右上角标签仍然显示。
根因分析:
src/utils/print.ts使用 iframe 生成打印文档,其<style>中没有针对.ai-region的隐藏样式src/index.css中有.print-content .ai-region的样式,但print.ts中实际使用的是.content类,CSS 选择器不匹配@media print在index.css中只影响浏览器打印预览,不影响print.ts的 iframe
问题 2:diff 弹窗右侧字体不一致
现象:左侧「原始版本」显示宋体 12pt,右侧「AI 提议版本」显示默认字体(无衬线体),视觉不一致。
根因分析:
- 左侧原始版本的文本带有内联样式(如
<span style="font-family: SimSun; font-size: 12pt;">) - 右侧 AI 返回的是纯净的
<p>标签,没有内联样式 - diff 弹窗右侧容器没有设置默认字体样式,导致浏览器使用默认字体
解决方向
- 在
print.ts的 iframe<style>中增加.ai-region的打印隐藏样式 - 在 diff 弹窗右侧容器的
style属性中指定与正文一致的字体和字号