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:
28
工程分析/经验记录.md
28
工程分析/经验记录.md
@@ -817,3 +817,31 @@ if (aiRegion && targetRegionEl) {
|
||||
**D. 后续如何避免问题**
|
||||
- `contentEditable` 中的嵌套容器(如 `.ai-content`)在用户输入时极易被浏览器原生编辑行为破坏结构。任何依赖特定 DOM 层级关系的功能,都必须在读取数据前做**结构完整性检查和修复**。
|
||||
- 对于 AI 区域这类核心功能,应考虑在编辑器层面增加 `keydown`/`paste` 事件拦截,或改用更可控的编辑方案(如 ProseMirror/Slate)来替代原生 `contentEditable`。
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 记录 35:打印时隐藏 AI 区域蓝框 + diff 弹窗字体统一
|
||||
|
||||
**A. 具体问题**
|
||||
1. 点击下载/打印时,AI 可编辑区域的蓝色虚线框和右上角标签仍然显示在输出中。
|
||||
2. AI 修改确认弹窗中,右侧「AI 提议版本」的字体与左侧「原始版本」不一致(左侧宋体 12pt,右侧默认无衬线体)。
|
||||
|
||||
**B. 产生问题原因**
|
||||
1. **打印样式缺失**:`src/utils/print.ts` 使用 iframe 生成打印文档,其 `<style>` 中没有针对 `.ai-region` 的隐藏样式。虽然 `src/index.css` 中有 `.print-content .ai-region` 规则,但 `print.ts` 中实际使用的是 `.content` 类,CSS 选择器不匹配。
|
||||
2. **字体继承缺失**:AI 返回的 HTML 是纯净的 `<p>` 标签,没有内联样式。diff 弹窗右侧容器没有设置默认字体,导致浏览器使用默认无衬线字体。
|
||||
|
||||
**C. 解决问题方案**
|
||||
1. **打印样式**:在 `print.ts` 的 iframe `<style>` 中增加:
|
||||
```css
|
||||
.ai-region { border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; }
|
||||
.ai-region > [contenteditable="false"] { display: none !important; }
|
||||
```
|
||||
2. **diff 弹窗字体**:在右侧容器的 `style` 属性中指定:
|
||||
```tsx
|
||||
style={{ fontFamily: 'SimSun, "Microsoft YaHei", serif', fontSize: '12pt', lineHeight: '1.5' }}
|
||||
```
|
||||
|
||||
**D. 后续如何避免问题**
|
||||
- 任何通过 iframe 或独立文档实现的打印/导出功能,都必须在 iframe 的 `<style>` 中独立维护打印样式,不能依赖外部 CSS 文件(因为外部样式不会自动注入 iframe)。
|
||||
- 对于 diff 对比类 UI,左右两侧容器应显式设置相同的默认字体样式,避免依赖内容自带的内联样式造成视觉不一致。
|
||||
|
||||
Reference in New Issue
Block a user