2026-04-19-00-01-50 - 高亮样式柔化、点击空白取消、打印高亮隔离、下划线配置同步
This commit is contained in:
Administrator
65
工程分析/实现方案-2026-04-19-00-01-50.md
Normal file
65
工程分析/实现方案-2026-04-19-00-01-50.md
Normal file
@@ -0,0 +1,65 @@
|
||||
# 实现方案 —— 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` 的优先级需确保高于任何内联样式。
|
||||
48
工程分析/测试方案-2026-04-19-00-01-50.md
Normal file
48
工程分析/测试方案-2026-04-19-00-01-50.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# 测试方案 —— 2026-04-19-00-01-50
|
||||
|
||||
## 测试目标
|
||||
验证高亮样式修复、点击空白取消、打印纯净度、下划线同步的有效性。
|
||||
|
||||
## 测试用例
|
||||
|
||||
### TC-1：高亮样式柔和
|
||||
**前置条件**：ReportEditor 已加载默认模板。
|
||||
**步骤**：
|
||||
1. 点击中间模板中的任意字段。
|
||||
**预期结果**：字段显示浅灰色背景和细灰边框（不再是刺眼的蓝色）。
|
||||
|
||||
### TC-2：点击空白取消高亮
|
||||
**前置条件**：ReportEditor 中某个字段已被高亮。
|
||||
**步骤**：
|
||||
1. 点击模板中的空白区域（非字段、非占位符）。
|
||||
**预期结果**：字段高亮样式消失，恢复为默认状态。
|
||||
|
||||
### TC-3：打印不带高亮框
|
||||
**前置条件**：ReportEditor 中某个字段处于高亮状态。
|
||||
**步骤**：
|
||||
1. 点击打印预览。
|
||||
**预期结果**：打印内容中不显示任何高亮框、outline 或 box-shadow，字段显示正常。
|
||||
|
||||
### TC-4：勾选下划线后打印生效
|
||||
**前置条件**：TemplateManage 中某字段已插入模板，且未勾选下划线。
|
||||
**步骤**：
|
||||
1. 在字段管理中勾选该字段的「打印时显示下划线」。
|
||||
2. 保存字段编辑。
|
||||
3. 在 ReportEditor 中打印预览。
|
||||
**预期结果**：该字段显示下划线。
|
||||
|
||||
### TC-5：取消下划线后打印不显示
|
||||
**前置条件**：TemplateManage 中某字段已勾选下划线并保存。
|
||||
**步骤**：
|
||||
1. 取消勾选该字段的「打印时显示下划线」。
|
||||
2. 保存字段编辑。
|
||||
3. 在 ReportEditor 中打印预览。
|
||||
**预期结果**：该字段不显示下划线。
|
||||
|
||||
## 回归测试
|
||||
- 确保字段插入、编辑、删除功能正常。
|
||||
- 确保双向联动（中间点击→右侧高亮、右侧点击→中间高亮）正常。
|
||||
- 确保打印样式整体正常。
|
||||
|
||||
## 测试通过标准
|
||||
所有用例均通过，无控制台报错，打印内容纯净无高亮残留。
|
||||
38
工程分析/经验记录.md
38
工程分析/经验记录.md
@@ -1185,3 +1185,41 @@ if ((settings.autoInsertDelay || 0) > 0) {
|
||||
- iframe 打印的文件名行为在不同浏览器间存在差异（Chrome 用父窗口 title，Safari 可能用 iframe title），最稳妥的方案是同时设置父窗口 `document.title` 和 iframe 内部 `<title>` 标签。
|
||||
- 双向联动时，`useEffect` 中的 DOM style 操作需要在组件卸载或 `activeFieldKey` 清空时清除，避免残留高亮。当前实现中 `activeFieldKey` 为 `null` 时会遍历清除所有高亮，逻辑已覆盖。
|
||||
- 给容器 div 添加 `onClick` 时需注意事件冒泡：容器内的子元素（如 input、button）的点击事件会自然冒泡到容器，如果子元素有自己的 onClick 处理（如 dropdown 选项），需确保已调用 `stopPropagation()`。
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 记录 38：高亮样式柔化、点击空白取消、打印高亮隔离、下划线配置同步
|
||||
|
||||
**A. 具体问题**
|
||||
1. ReportEditor 中 `.field-value` 激活高亮使用蓝色 box-shadow（`0 0 0 2px #3b82f6`）+ `#eff6ff` 背景，视觉过于刺眼。
|
||||
2. 点击编辑器空白区域时，高亮样式不会自动清除，用户必须点击另一个字段才能切换高亮。
|
||||
3. 打印/PDF 导出时，高亮的内联样式（box-shadow、backgroundColor）会带入打印件，导致打印内容出现蓝框。
|
||||
4. TemplateManage 中编辑字段的「打印时显示下划线」勾选后，已插入到模板中的 `.field-value` 仍然保留旧的 `.no-underline` 类，打印时不显示下划线。
|
||||
|
||||
**B. 产生问题原因**
|
||||
1. `activeFieldKey` 的 `useEffect` 中使用了高对比度的蓝色阴影和背景色，未考虑柔和视觉体验。
|
||||
2. `handleEditorClick` 的 capture 事件处理器仅在点击 `.field-value` 时设置 `activeFieldKey`，没有处理「点击非字段区域时清空」的逻辑。
|
||||
3. `print.ts` 的 `@media print` 中只重置了 `border` 和 `background`，遗漏了 `outline` 和 `box-shadow`。
|
||||
4. `saveFieldEdit` 仅更新了 JSON state 和 `localStorage` 中的字段配置，没有同步扫描 `editorRef.current` 中已存在的 DOM 元素并更新其 `classList`。
|
||||
|
||||
**C. 解决问题方案**
|
||||
1. **柔和高亮**：将 `useEffect` 中的高亮样式改为 `backgroundColor: '#f1f5f9'`（浅灰背景）、`outline: '1px solid #94a3b8'`（细灰边框）、`outlineOffset: '1px'`；清除样式时用 `''` 而非硬编码颜色，让 CSS 类重新接管。
|
||||
2. **点击空白取消高亮**：在 `handleEditorClick` 中，`.field-value` 判断分支结束后增加 `setActiveFieldKey(null)`，使点击任何非字段区域都会清除高亮。
|
||||
3. **打印隔离高亮**：`print.ts` 的 `@media print` 中强制添加 `outline: none !important; box-shadow: none !important;`，确保打印输出不受任何高亮内联样式影响。
|
||||
4. **下划线配置同步**：`saveFieldEdit` 末尾增加 DOM 扫描逻辑：
|
||||
```ts
|
||||
if (editorRef.current) {
|
||||
const els = editorRef.current.querySelectorAll(`.field-value[data-bind="${key}"]`);
|
||||
els.forEach(el => {
|
||||
if (editFieldHasUnderline) el.classList.remove('no-underline');
|
||||
else el.classList.add('no-underline');
|
||||
});
|
||||
saveTemplateContent();
|
||||
}
|
||||
```
|
||||
|
||||
**D. 后续如何避免问题**
|
||||
- 任何通过 JS 直接操作 DOM 添加的内联样式（如高亮），都必须在 `@media print` 中通过 `!important` 强制抹除，防止打印件被屏幕交互样式污染。
|
||||
- 当字段配置（如 `hasUnderline`）同时影响「未来插入的元素」和「已存在的 DOM 元素」时，保存逻辑必须包含对已插入 DOM 的同步更新，不能只更新 state。
|
||||
- `contentEditable` 中的 capture 阶段点击事件是处理全局点击行为（如点击空白取消）的理想位置，但需注意不要阻断其他正常交互路径（如 placeholder 点击）。
|
||||
|
||||
26
工程分析/需求分析-2026-04-19-00-01-50.md
Normal file
26
工程分析/需求分析-2026-04-19-00-01-50.md
Normal file
@@ -0,0 +1,26 @@
|
||||
# 需求分析 —— 2026-04-19-00-01-50
|
||||
|
||||
## 需求来源
|
||||
用户在实际使用中发现高亮样式刺眼、点击空白不取消高亮、以及下划线勾选无效的问题。
|
||||
|
||||
## 需求概述
|
||||
|
||||
### 需求 1：高亮蓝框太明显
|
||||
ReportEditor 中 `.field-value` 激活时的蓝框（`box-shadow: 0 0 0 2px #3b82f6` + `#eff6ff` 背景）过于刺眼，希望改为更柔和的选中效果（类似 TemplateManage 中的淡色高亮）。
|
||||
|
||||
### 需求 2：点击空白处高亮不消失 + 打印带蓝框
|
||||
1. 点击模板空白区域时，`.field-value` 的高亮样式不会自动清除。
|
||||
2. 打印/PDF 导出时，高亮的内联样式（box-shadow、backgroundColor）会带入打印件，导致打印内容出现蓝框。
|
||||
|
||||
### 需求 3：下划线勾选无效
|
||||
在 TemplateManage 的字段管理中勾选「打印时显示下划线」并保存后，已插入到模板中的 `.field-value` 仍然带有 `.no-underline` 类，导致打印时不显示下划线。
|
||||
|
||||
## 涉及文件
|
||||
- `src/pages/ReportEditor.tsx`（需求 1、2）
|
||||
- `src/utils/print.ts`（需求 2）
|
||||
- `src/pages/TemplateManage.tsx`（需求 3）
|
||||
|
||||
## 需求影响范围
|
||||
- 编辑器高亮交互体验
|
||||
- 打印样式纯净度
|
||||
- 字段配置与 DOM 的同步机制
|
||||
Reference in New Issue
Block a user