92 lines
4.0 KiB
Markdown
92 lines
4.0 KiB
Markdown
# 实现方案 —— 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` 在签名行可能导致超长内容溢出，但考虑到签名行通常较短，风险可控。
|