fix(ui): 打印隐藏AI区域蓝框 + diff弹窗字体统一

- print.ts的iframe样式中增加.ai-region隐藏规则:去除边框/背景/内边距,隐藏右上角标签
- diffModal右侧AI提议版本容器增加style属性:fontFamily SimSun、fontSize 12pt、lineHeight 1.5
- 确保打印输出和diff对比的视觉一致性
This commit is contained in:
2026-04-19 18:25:38 +08:00
parent 6abd7d1e3a
commit b24ba08658
6 changed files with 161 additions and 0 deletions

View File

@@ -0,0 +1,58 @@
# 实现方案
## 修改文件 1`src/utils/print.ts`
在 iframe 的 `<style>` 标签中,增加 `.ai-region` 的打印隐藏样式。
**原代码**line 23-48 的 style 块):
```css
.report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
@media print {
.smart-field-wrapper .field-value { outline: none !important; box-shadow: none !important; border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px 0px 2px !important; line-height: 1 !important; }
.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
}
```
**新代码**
```css
.report-signature-img { max-width: 120px; max-height: 40px; width: auto; height: auto; object-fit: contain; vertical-align: middle; display: inline-block; }
.ai-region { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
.ai-region > [contenteditable="false"] { display: none !important; }
@media print {
.smart-field-wrapper .field-value { outline: none !important; box-shadow: none !important; border: none !important; border-bottom: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; padding: 0 2px 0px 2px !important; line-height: 1 !important; }
.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
}
```
**变更点**
1. 新增 `.ai-region` 样式:去除边框、背景、内边距、外边距
2. 新增 `.ai-region > [contenteditable="false"]` 样式:隐藏右上角标签
## 修改文件 2`src/pages/ReportEditor.tsx`
在 diffModal 右侧「AI 提议版本」容器上增加 `style` 属性。
**原代码**line 2630-2636
```tsx
<div
className="p-4 flex-1 overflow-y-auto outline-none custom-scrollbar"
contentEditable
suppressContentEditableWarning
onBlur={(e) => setDiffModal(prev => prev ? { ...prev, newHtml: e.target.innerHTML } : null)}
dangerouslySetInnerHTML={{ __html: diffModal.newHtml }}
></div>
```
**新代码**
```tsx
<div
className="p-4 flex-1 overflow-y-auto outline-none custom-scrollbar"
contentEditable
suppressContentEditableWarning
onBlur={(e) => setDiffModal(prev => prev ? { ...prev, newHtml: e.target.innerHTML } : null)}
dangerouslySetInnerHTML={{ __html: diffModal.newHtml }}
style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
></div>
```
**变更点**:增加 `style` 属性,指定宋体 12pt、行高 1.5,与编辑器正文样式一致。