91 lines
3.8 KiB
Markdown
91 lines
3.8 KiB
Markdown
# 实现方案 —— 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 小时偏差，但中国大陆不使用夏令时，所以安全。
|