92 lines
4.8 KiB
Markdown
92 lines
4.8 KiB
Markdown
# 实现方案 —— 2026-04-18-18-36-43
|
||
|
||
## 方案目标
|
||
实现五项系统改进：列名修正、字段下划线控制、下载导出、右对齐排版修复、默认模板签名右对齐。
|
||
|
||
## 需求 1：ReportManage 列名修正
|
||
|
||
### 修改文件
|
||
`src/pages/ReportManage.tsx`
|
||
|
||
### 修改内容
|
||
找到 `<thead>` 中「患者号」`<th>`，将文本改为「住院号」。同步检查表格数据渲染中是否有对应的 patientId/hospitalId 显示逻辑需调整。
|
||
|
||
## 需求 2：字段管理增加下划线控制
|
||
|
||
### 修改文件
|
||
- `src/types.ts`
|
||
- `src/pages/TemplateManage.tsx`
|
||
- `src/utils/print.ts`
|
||
|
||
### 实现步骤
|
||
1. **扩展 FormField 接口**：增加 `hasUnderline?: boolean`（默认 `true`）。
|
||
2. **修改 DEFAULT_FORM_FIELDS**：为所有默认字段设置 `hasUnderline: true`。
|
||
3. **TemplateManage 字段管理 UI**：
|
||
- 新增字段表单中增加「打印时显示下划线」checkbox，默认勾选。
|
||
- 编辑字段面板中同样增加该 checkbox。
|
||
- 保存字段配置时将 `hasUnderline` 写入 `formFieldsConfig`。
|
||
4. **insertSmartField 注入类名**：
|
||
- 在生成 `smart-field-wrapper` HTML 时，若 `field.hasUnderline === false`，给 `.field-value` 增加 `no-underline` 类。
|
||
5. **print.ts 打印样式**：
|
||
- 在 `@media print` 中增加 `.smart-field-wrapper .field-value.no-underline { border-bottom: none !important; }`
|
||
|
||
## 需求 3：ReportEditor / TemplateManage 新增下载按钮
|
||
|
||
### 修改文件
|
||
- `src/pages/ReportEditor.tsx`
|
||
- `src/pages/TemplateManage.tsx`
|
||
- `src/utils/print.ts`
|
||
|
||
### 实现步骤
|
||
1. **print.ts 支持自定义标题**：
|
||
- `printDocument(htmlContent: string, docTitle?: string)` 增加可选 `docTitle` 参数。
|
||
- 在 iframe HTML 的 `<head>` 中注入 `<title>${docTitle || '图文报告'}</title>`，使浏览器保存 PDF 时使用该文件名。
|
||
2. **ReportEditor 下载功能**：
|
||
- 引入 `Download` 图标。
|
||
- 在顶部操作栏打印按钮旁增加下载按钮。
|
||
- 新增 `exportModalOpen` 状态控制导出弹窗。
|
||
- 实现 `getExportFilename()`：基于 `reportData.title`、`patientName`、`hospitalId` 和当前时间生成文件名。
|
||
- 实现 `downloadJSON()`：将 `reportData` 序列化为 JSON Blob 并触发下载。
|
||
- 导出 PDF 时调用 `printDocument(editorRef.current.innerHTML, getExportFilename())`。
|
||
3. **TemplateManage 下载功能**：
|
||
- 类似实现。模板管理页面没有 reportData，文件名中患者信息使用"模板"或空值替代。
|
||
- PDF 导出调用 `printDocument(editorRef.current.innerHTML, filename)`。
|
||
- JSON 导出下载模板内容。
|
||
|
||
## 需求 4：修复右对齐时签名与图片框分离
|
||
|
||
### 修改文件
|
||
- `src/pages/TemplateManage.tsx`（占位符插入逻辑）
|
||
- `src/pages/ReportEditor.tsx`（占位符插入逻辑，如有）
|
||
- `src/utils/defaultContent.ts`（默认模板签名占位符）
|
||
|
||
### 实现步骤
|
||
将 `display: inline-flex` 改为 `display: inline-block`，并通过 `line-height` 实现垂直居中：
|
||
- **运行时插入**：`styleStr` 从 `display:inline-flex;align-items:center;justify-content:center;` 改为 `display:inline-block;text-align:center;position:relative;line-height:${h}px;`
|
||
- **占位文本**：`.placeholder-text` 增加 `display:inline-block;vertical-align:middle;line-height:normal;`
|
||
- **默认模板**：手术者签名占位符同步应用上述样式。
|
||
|
||
## 需求 5：默认模板手术者签名右对齐
|
||
|
||
### 修改文件
|
||
`src/utils/defaultContent.ts`
|
||
|
||
### 修改内容
|
||
将「手术者签名」`<p>` 增加 `text-align: right;`，并应用需求 4 的 `inline-block` 样式修复。
|
||
|
||
## 涉及文件及修改点
|
||
| 文件 | 修改点 |
|
||
|------|--------|
|
||
| `src/pages/ReportManage.tsx` | 「患者号」→「住院号」 |
|
||
| `src/types.ts` | `FormField` 增加 `hasUnderline?: boolean` |
|
||
| `src/pages/TemplateManage.tsx` | 字段管理 UI 增加下划线 checkbox；insertSmartField 注入 no-underline 类；工具栏增加下载按钮和弹窗 |
|
||
| `src/pages/ReportEditor.tsx` | 工具栏增加下载按钮和弹窗；占位符插入样式改为 inline-block |
|
||
| `src/utils/print.ts` | 增加 `docTitle` 参数；打印样式支持 `.no-underline` |
|
||
| `src/utils/defaultContent.ts` | 签名占位符改为 inline-block；签名行设为 `text-align: right` |
|
||
|
||
## 风险与注意事项
|
||
1. `FormField` 接口扩展后，需确保 `DEFAULT_FORM_FIELDS` 和所有已有字段配置（localStorage 中的 `formFieldsConfig`）兼容。对于旧数据缺少 `hasUnderline` 的情况，按 `true` 处理。
|
||
2. `printDocument` 增加 `docTitle` 参数后，需检查所有调用方是否已更新。现有调用方（如 ReportView）可保持默认行为。
|
||
3. `inline-block` 替换 `inline-flex` 后，需验证占位符在非右对齐场景（如正常左对齐）下的垂直居中效果是否正常。
|
||
4. 下载 JSON 时，TemplateManage 的 JSON 内容与 ReportEditor 不同（模板 vs 报告），需分别处理。
|