Mdeical_Sur_Report/工程分析/实现方案-2026-04-18-23-19-44.md

实现方案 —— 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()：

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 小时偏差，但中国大陆不使用夏令时，所以安全。