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