2026-04-18-18-08-37 - 编辑器工具栏新增字号行距选择、修复字体选择、模板排版间距调整
This commit is contained in:
Administrator
91
工程分析/实现方案-2026-04-18-18-08-37.md
Normal file
91
工程分析/实现方案-2026-04-18-18-08-37.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# 实现方案 —— 2026-04-18-18-08-37
|
||||
|
||||
## 方案目标
|
||||
修复并增强编辑器工具栏的字体/字号/行距功能，调整默认模板排版细节。
|
||||
|
||||
## 需求 1：修复字体选择并新增字号、行距功能
|
||||
|
||||
### 修改文件
|
||||
`src/pages/ReportEditor.tsx` 和 `src/pages/TemplateManage.tsx`
|
||||
|
||||
### 实现步骤
|
||||
1. **修复字体选择**：确保工具栏中的字体选择 `<select>` 使用 `execCmd('fontName', value)`。若失效，检查是否有全局 CSS `font-family: !important` 覆盖。如有，在打印样式中保留覆盖，但在编辑器样式中移除。
|
||||
2. **新增字号选择**：在工具栏字体选择旁边增加 `<select>`：
|
||||
```tsx
|
||||
<select onChange={e => { if (e.target.value) { execCmd('fontSize', e.target.value); } e.target.value = ''; }}>
|
||||
<option value="">字号</option>
|
||||
<option value="3">12pt</option>
|
||||
<option value="4">14pt</option>
|
||||
<option value="5">18pt</option>
|
||||
</select>
|
||||
```
|
||||
`execCommand('fontSize')` 使用 1-7 的相对字号，3 对应 12pt，4 对应 14pt，5 对应 18pt。
|
||||
3. **新增行距选择**：`execCommand` 不支持行距，需手写 `changeLineHeight` 函数：
|
||||
```tsx
|
||||
const changeLineHeight = (height: string) => {
|
||||
const sel = window.getSelection();
|
||||
if (!sel || !sel.rangeCount) return;
|
||||
let node = sel.getRangeAt(0).commonAncestorContainer;
|
||||
if (node.nodeType === Node.TEXT_NODE) node = node.parentNode as Node;
|
||||
const block = (node as HTMLElement).closest('p, div, td, h1, h2, h3');
|
||||
if (block) {
|
||||
(block as HTMLElement).style.lineHeight = height;
|
||||
if (editorRef.current) contentRef.current = editorRef.current.innerHTML;
|
||||
saveDraftToStorage();
|
||||
}
|
||||
};
|
||||
```
|
||||
在工具栏增加行距 `<select>` 绑定此函数。
|
||||
|
||||
## 需求 2：修复手术者签名右对齐时图片框换行
|
||||
|
||||
### 修改文件
|
||||
`src/utils/defaultContent.ts`
|
||||
|
||||
### 修改内容
|
||||
将「手术者签名」所在 `<p>` 增加 `white-space: nowrap;`，并将图片占位符的 `display` 改为 `inline-block`：
|
||||
```html
|
||||
<p style="text-align: right; font-family: SimSun; line-height: 1.5; margin: 0; padding: 0; white-space: nowrap;">
|
||||
手术者签名：<span class="image-placeholder" ... style="display:inline-block; vertical-align:middle; ...">...</span>
|
||||
</p>
|
||||
```
|
||||
|
||||
## 需求 3：缩减「手术记录」与「姓名」之间的距离
|
||||
|
||||
### 修改文件
|
||||
`src/utils/defaultContent.ts`
|
||||
|
||||
### 修改内容
|
||||
将顶部 Flex 容器的 `margin-bottom: 16px` 缩小为 `margin-bottom: 4px`。
|
||||
|
||||
## 需求 4：消除「手术名称」与「手术开始时间」之间的多余间距
|
||||
|
||||
### 修改文件
|
||||
`src/utils/defaultContent.ts`
|
||||
|
||||
### 修改内容
|
||||
将双列信息 `<table>` 的 `margin-bottom: 12pt` 改为 `margin-bottom: 0; margin-top: 0;`。同时确保「手术名称」`<p>` 的 `margin: 0; padding: 0;`。
|
||||
|
||||
## 需求 5：统一「手术日期」及以下内容为 12pt、1.5 行距、无段间距
|
||||
|
||||
### 修改文件
|
||||
`src/utils/defaultContent.ts`
|
||||
|
||||
### 修改内容
|
||||
为所有手术步骤段落（1~5）以及手术后情况段落补充 `font-size: 12pt;`：
|
||||
```html
|
||||
<p style="font-family: SimSun; font-size: 12pt; line-height: 1.5; margin: 0; padding: 0;">
|
||||
```
|
||||
|
||||
## 涉及文件及修改点
|
||||
| 文件 | 修改点 |
|
||||
|------|--------|
|
||||
| `src/pages/ReportEditor.tsx` | 工具栏新增字号选择、行距选择；修复字体选择 |
|
||||
| `src/pages/TemplateManage.tsx` | 工具栏新增字号选择、行距选择；修复字体选择 |
|
||||
| `src/utils/defaultContent.ts` | 签名行 `white-space: nowrap`; 顶部 `margin-bottom: 4px`; 表格 `margin: 0`; 补全 `font-size: 12pt` |
|
||||
|
||||
## 风险与注意事项
|
||||
1. `execCommand('fontSize')` 生成的是 `<font size="N">` 标签，与现代 HTML5 规范不完全兼容，但在 `contentEditable` 中是浏览器广泛支持的方式。
|
||||
2. `changeLineHeight` 直接操作 DOM style，在 `ReportEditor` 中修改后需同步 `contentRef.current` 和调用 `saveDraftToStorage()`。
|
||||
3. `TemplateManage` 中修改行距后需调用 `saveTemplateContent()`。
|
||||
4. `white-space: nowrap` 在签名行可能导致超长内容溢出，但考虑到签名行通常较短，风险可控。
|
||||
134
工程分析/测试方案-2026-04-18-18-08-37.md
Normal file
134
工程分析/测试方案-2026-04-18-18-08-37.md
Normal file
@@ -0,0 +1,134 @@
|
||||
# 测试方案 —— 2026-04-18-18-08-37
|
||||
|
||||
## 测试目标
|
||||
验证编辑器工具栏字号/行距功能、字体选择修复，以及默认模板排版调整。
|
||||
|
||||
## 测试用例
|
||||
|
||||
### TC-01：ReportEditor 字体选择修复
|
||||
**前置条件**：进入 /report-editor，编辑器中有文字
|
||||
**操作步骤**：
|
||||
1. 选中一段文字
|
||||
2. 从工具栏字体下拉框选择「微软雅黑」
|
||||
|
||||
**预期结果**：
|
||||
- 选中的文字字体变为微软雅黑
|
||||
- 编辑器未失去焦点
|
||||
|
||||
---
|
||||
|
||||
### TC-02：ReportEditor 字号选择
|
||||
**前置条件**：进入 /report-editor，编辑器中有文字
|
||||
**操作步骤**：
|
||||
1. 选中一段文字
|
||||
2. 从工具栏字号下拉框选择「14pt」
|
||||
|
||||
**预期结果**：
|
||||
- 选中的文字字号变大
|
||||
- 编辑器未失去焦点
|
||||
|
||||
---
|
||||
|
||||
### TC-03：ReportEditor 行距选择
|
||||
**前置条件**：进入 /report-editor，编辑器中有多行文字
|
||||
**操作步骤**：
|
||||
1. 将光标放在某一段落内
|
||||
2. 从工具栏行距下拉框选择「2.0」
|
||||
|
||||
**预期结果**：
|
||||
- 当前段落行距变为 2.0
|
||||
- 其他段落不受影响
|
||||
- 草稿自动保存
|
||||
|
||||
---
|
||||
|
||||
### TC-04：TemplateManage 工具栏功能
|
||||
**前置条件**：进入 /template-manage
|
||||
**操作步骤**：
|
||||
1. 分别测试字体、字号、行距选择功能
|
||||
|
||||
**预期结果**：
|
||||
- 字体选择生效
|
||||
- 字号选择生效
|
||||
- 行距选择生效
|
||||
- 撤销/重做能恢复行距修改
|
||||
|
||||
---
|
||||
|
||||
### TC-05：手术者签名右对齐不换行
|
||||
**前置条件**：新建报告，加载默认模板
|
||||
**操作步骤**：
|
||||
1. 找到「手术者签名」行
|
||||
2. 将光标放在该行，点击工具栏「右对齐」
|
||||
|
||||
**预期结果**：
|
||||
- 「手术者签名：」文字和图片占位符在同一行
|
||||
- 两者一起靠右对齐
|
||||
- 图片框不会单独换到下一行
|
||||
|
||||
---
|
||||
|
||||
### TC-06：手术记录与姓名间距
|
||||
**前置条件**：新建报告，加载默认模板
|
||||
**操作步骤**：
|
||||
1. 查看「手术记录」标题与「姓名：」之间的间距
|
||||
|
||||
**预期结果**：
|
||||
- 间距明显缩小（约 4px）
|
||||
- 不再有过大的空白区域
|
||||
|
||||
---
|
||||
|
||||
### TC-07：手术名称与手术开始时间间距
|
||||
**前置条件**：新建报告，加载默认模板
|
||||
**操作步骤**：
|
||||
1. 查看「手术名称」与「手术开始时间」之间的间距
|
||||
|
||||
**预期结果**：
|
||||
- 两者间距仅为 1.5 行距的自然间距
|
||||
- 无额外 margin/padding 造成的空白
|
||||
|
||||
---
|
||||
|
||||
### TC-08：手术步骤段落字体统一
|
||||
**前置条件**：新建报告，加载默认模板
|
||||
**操作步骤**：
|
||||
1. 查看手术步骤 1~5 的字体大小
|
||||
|
||||
**预期结果**：
|
||||
- 所有手术步骤段落均为 12pt 字体
|
||||
- 与上方「手术日期」等诊断信息字体大小一致
|
||||
|
||||
---
|
||||
|
||||
### TC-09：手术后情况段落字体
|
||||
**前置条件**：新建报告，加载默认模板
|
||||
**操作步骤**：
|
||||
1. 查看「手术后情况」「切除标本描述」等段落的字体大小
|
||||
|
||||
**预期结果**：
|
||||
- 均为 12pt 字体
|
||||
- 行距 1.5，无段前段后间距
|
||||
|
||||
---
|
||||
|
||||
### TC-10：打印效果验证
|
||||
**前置条件**：报告有内容
|
||||
**操作步骤**：
|
||||
1. 点击打印
|
||||
2. 检查打印预览
|
||||
|
||||
**预期结果**：
|
||||
- 字体、字号、行距设置正确反映在打印输出中
|
||||
- 所有删除按钮（×）不可见
|
||||
- 排版紧凑一致
|
||||
|
||||
---
|
||||
|
||||
## 回归测试范围
|
||||
- 验证 `smart-field-wrapper` 双向绑定正常工作
|
||||
- 验证 `image-placeholder` 点击上传、拖拽填充功能正常
|
||||
- 验证手术图片说明表格布局未受影响
|
||||
|
||||
## 测试结论
|
||||
TC-01~TC-10 全部通过，即可确认所有需求均正确实现。
|
||||
34
工程分析/需求分析-2026-04-18-18-08-37.md
Normal file
34
工程分析/需求分析-2026-04-18-18-08-37.md
Normal file
@@ -0,0 +1,34 @@
|
||||
# 需求分析 —— 2026-04-18-18-08-37
|
||||
|
||||
## 需求来源
|
||||
用户提出报告编辑器与模板管理器的工具栏功能增强，以及默认模板排版细节调整。
|
||||
|
||||
## 需求概述
|
||||
|
||||
### 需求 1：修复字体选择并新增字号、行距功能
|
||||
在 `report-editor` 和 `template-manage` 的工具栏中：
|
||||
- **修复字体选择**：当前 `document.execCommand('fontName')` 可能因浏览器兼容性或 CSS 覆盖而失效，需确保字体选择能正确生效。
|
||||
- **新增字号选择**：在工具栏字体选择旁边增加字号下拉框，支持 12pt/14pt/18pt 等常用字号。
|
||||
- **新增行距选择**：在工具栏增加行距下拉框，支持 1.0/1.5/2.0 等行距。由于 `execCommand` 不原生支持行距，需通过直接修改 DOM 元素的 `style.lineHeight` 实现。
|
||||
|
||||
### 需求 2：修复手术者签名右对齐时图片框换行
|
||||
当「手术者签名」所在行设置 `text-align: right` 时，文字跑到最右侧，而图片占位符（`display: inline-flex`）换到了下一行。需确保文字和图片在同一行内保持连续。
|
||||
|
||||
### 需求 3：缩减「手术记录」与「姓名」之间的距离
|
||||
当前顶部 Flex 容器的 `margin-bottom: 16px` 导致标题与基本信息栏间距过大。需缩小该间距。
|
||||
|
||||
### 需求 4：消除「手术名称」与「手术开始时间」之间的多余间距
|
||||
「手术名称」是 `<p>` 标签，「手术开始时间」在 `<table>` 中。`<table>` 的默认 margin 或 `<p>` 的默认间距导致两者距离过远。需消除多余间距，保持 1.5 行距且无段前段后间距。
|
||||
|
||||
### 需求 5：统一「手术日期」及以下内容为 12pt、1.5 行距、无段间距
|
||||
当前手术步骤段落（1~5）缺少 `font-size: 12pt`，导致与上方诊断信息字体大小不一致。需统一从「手术日期」开始往下的所有正文内容为 12pt、1.5 行距、无段前段后间距。
|
||||
|
||||
## 涉及文件
|
||||
- `src/pages/ReportEditor.tsx`（需求 1：工具栏增强）
|
||||
- `src/pages/TemplateManage.tsx`（需求 1：工具栏增强）
|
||||
- `src/utils/defaultContent.ts`（需求 2~5：模板排版修复）
|
||||
|
||||
## 需求影响范围
|
||||
- 编辑器工具栏交互
|
||||
- 默认报告模板视觉效果
|
||||
- 打印输出样式
|
||||
Reference in New Issue
Block a user