# 实现方案 —— 2026-04-18-23-19-44

## 方案目标
修复排版对齐问题，优化导出文件名，实现模板批量操作。

## 需求 1：修复 field-value 输入内容往上飘

### 修改文件
`src/utils/defaultContent.ts`、`src/utils/print.ts`

### 修改内容
- `defaultContent.ts` 中 `smartField()`：
  - `vertical-align:text-bottom` → `vertical-align:baseline`
  - `line-height:1.2;min-height:1.2em;` → `line-height:inherit;`
- `print.ts` 中 `.field-value` 打印样式同步修改 `vertical-align:baseline; line-height:inherit;`
- 打印时下划线 `padding-bottom` 改为 `1px` 以紧贴文字

## 需求 2、3、4：微调排版间距和 Logo 位置

### 修改文件
`src/utils/defaultContent.ts`

### 修改内容
- 姓名栏横线：`padding-bottom: 1px;`（原来是 `padding: 0 0 1px 0`，可能需要调整）
- 手术记录标题：`margin-top: 2px;`（原来是 `margin-bottom: 8px` 等，需要精确调整）
- Logo：使用 `position:absolute` 向左上偏移 5px，或调整父容器 `gap`/`margin`

## 需求 5：导出 PDF 文件名修正

### 修改文件
`src/utils/print.ts`

### 修改内容
在 `printDocument` 函数中：
1. 保存原始 `document.title`
2. 设置 `document.title = docTitle`
3. 打印完成后恢复 `document.title = originalTitle`

这样浏览器在 `window.print()` 时会使用正确的文件名。

## 需求 6：导出 JSON 时间使用北京时间

### 修改文件
`src/pages/ReportEditor.tsx`、`src/pages/ReportManage.tsx`、`src/pages/TemplateManage.tsx`

### 修改内容
定义一个全局格式化函数 `getBeijingTimeStr()`：
```ts
const getBeijingTimeStr = () => {
  const d = new Date();
  const bjTime = new Date(d.getTime() + (8 * 60 * 60 * 1000));
  return bjTime.toISOString().replace(/T/, '-').replace(/:/g, '-').slice(0, 16);
};
```

替换所有 `new Date().toISOString().replace(/[:.]/g, '-')` 的调用。

## 需求 7：模板管理批量操作

### 修改文件
`src/pages/TemplateManage.tsx`

### 修改内容
1. **新增状态**：`const [selectedIds, setSelectedIds] = useState<string[]>([]);`
2. **批量删除**：`handleBatchDelete()` 过滤掉选中 ID，清空 `selectedIds`
3. **批量导出**：`handleBatchExport()` 将选中模板打包为 JSON 数组下载
4. **UI 调整**：
   - 模板列表每行前增加复选框
   - 当有选中项时，显示批量操作工具栏（批量删除 + 批量导出）
5. **允许空列表**：移除 `templates.length > 1` 对删除按钮的限制（改为只在批量删除时确认）

### 冲突检查
- 现有 `handleDeleteTemplate` 单个删除逻辑可复用
- `Login.tsx` 中的默认模板初始化逻辑需要检查：如果用户删除了所有模板，系统是否会在登录时强制创建默认模板

## 涉及文件及修改点
| 文件 | 修改点 |
|------|--------|
| `src/utils/defaultContent.ts` | smartField 基线对齐；姓名栏间距；手术记录间距；Logo 位置 |
| `src/utils/print.ts` | field-value 打印样式；document.title 动态设置 |
| `src/pages/ReportEditor.tsx` | 导出文件名使用北京时间 |
| `src/pages/ReportManage.tsx` | 导出文件名使用北京时间 |
| `src/pages/TemplateManage.tsx` | 导出文件名使用北京时间；批量操作状态和 UI |

## 风险与注意事项
1. `vertical-align:baseline` 后，需要验证不同字号混合时（如 11pt 正文 + 12pt 字段）的对齐效果。
2. Logo 使用 `position:absolute` 时需要确保父容器有 `position:relative`，且不会遮挡其他元素。
3. 修改 `document.title` 后需确保在打印失败或用户取消时也能恢复。
4. 批量删除后如果 `currentTemplateId` 被删除，需要重置为 `null` 或自动选中其他模板。
5. 北京时间计算 `new Date(d.getTime() + (8 * 60 * 60 * 1000))` 在夏令时转换时可能有 1 小时偏差，但中国大陆不使用夏令时，所以安全。