66 lines
2.8 KiB
Markdown
66 lines
2.8 KiB
Markdown
# 实现方案 —— 2026-04-19-00-01-50
|
||
|
||
## 方案目标
|
||
修复高亮样式、实现点击空白取消、阻断打印高亮、同步字段下划线配置到已插入的 DOM。
|
||
|
||
## 需求 1 & 2：优化高亮样式、点击空白取消、阻断打印
|
||
|
||
### 修改文件 1：`src/pages/ReportEditor.tsx`
|
||
|
||
1. **点击空白取消高亮**：在 `handleEditorClick` 中，如果点击目标不是 `.field-value`，则设置 `setActiveFieldKey(null)`。
|
||
|
||
2. **柔和高亮样式**：修改 `activeFieldKey` 的 `useEffect`：
|
||
- 清除样式时：恢复为 `''`（空字符串）而非硬编码颜色，让 CSS 类重新接管
|
||
- 高亮时：`backgroundColor: '#f1f5f9'`（浅灰）、`outline: '1px solid #94a3b8'`（细灰边框）、`outlineOffset: '1px'`
|
||
- 不再使用 `box-shadow`
|
||
|
||
### 修改文件 2：`src/utils/print.ts`
|
||
|
||
在 `@media print` 中强制抹除 `outline` 和 `box-shadow`：
|
||
```css
|
||
@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 1px 2px !important;
|
||
}
|
||
.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }
|
||
}
|
||
```
|
||
|
||
## 需求 3：修复下划线勾选无效
|
||
|
||
### 修改文件：`src/pages/TemplateManage.tsx`
|
||
|
||
在 `saveFieldEdit` 函数中，保存字段配置后，扫描编辑器中所有 `data-bind` 匹配的 `.field-value`，根据新的 `hasUnderline` 值动态添加/移除 `.no-underline` 类：
|
||
```ts
|
||
if (editorRef.current) {
|
||
const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${editingFieldId}"]`);
|
||
els.forEach(el => {
|
||
if (editFieldHasUnderline) {
|
||
el.classList.remove('no-underline');
|
||
} else {
|
||
el.classList.add('no-underline');
|
||
}
|
||
});
|
||
saveTemplateContent();
|
||
}
|
||
```
|
||
|
||
## 涉及文件及修改点
|
||
| 文件 | 修改点 |
|
||
|------|--------|
|
||
| `src/pages/ReportEditor.tsx` | handleEditorClick 点击空白取消高亮；useEffect 柔和高亮样式 |
|
||
| `src/utils/print.ts` | @media print 强制抹除 outline/box-shadow |
|
||
| `src/pages/TemplateManage.tsx` | saveFieldEdit 同步更新已插入字段的 classList |
|
||
|
||
## 风险与注意事项
|
||
1. `handleEditorClick` 中增加 `setActiveFieldKey(null)` 时，需确保不会影响 `.image-placeholder` 的点击处理逻辑（placeholder 点击在 field-value 判断之后）。
|
||
2. `useEffect` 中清除样式时使用 `style.backgroundColor = ''` 而非 `= '#f8fafc'`，这样可以让元素的 CSS 类样式重新生效，避免硬编码颜色与 CSS 类冲突。
|
||
3. `saveFieldEdit` 中扫描 DOM 并修改 classList 后，必须调用 `saveTemplateContent()` 将变更持久化到 localStorage。
|
||
4. 打印样式中 `outline: none !important` 和 `box-shadow: none !important` 的优先级需确保高于任何内联样式。
|