# 实现方案 —— 2026-04-18-18-36-43 ## 方案目标 实现五项系统改进：列名修正、字段下划线控制、下载导出、右对齐排版修复、默认模板签名右对齐。 ## 需求 1：ReportManage 列名修正 ### 修改文件 `src/pages/ReportManage.tsx` ### 修改内容 找到 `` 中「患者号」``，将文本改为「住院号」。同步检查表格数据渲染中是否有对应的 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 的 `` 中注入 `${docTitle || '图文报告'}`，使浏览器保存 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` ### 修改内容 将「手术者签名」`

` 增加 `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 报告），需分别处理。