3.8 KiB
3.8 KiB
需求分析 — 2026-04-17-00-13-09
原始需求摘要
- 手术时间方框化:将报告模板中的"手术开始时间"、"手术终止时间"从静态文本改为可联动的智能方格。
- 动态字段体系:在
TemplateManage中将字段库升级为支持分类(填空、多选、单选、时间)、允许自定义新增字段,并可控制字段是否在ReportEditor右侧【基本信息】中显示。除"姓名"、"住院号"为系统锁定字段外,其余字段均可调整显隐和删除。 - UI 紧凑化:缩小
field-value方格的默认宽度和高度,降低其对行间距的影响,使排版更紧凑自然。
需求拆解
功能点
需求 1:手术开始/终止时间方框联动
- 在
defaultContent.ts中将"手术开始时间:时 分"替换为data-bind="startTime"的智能方格,同理替换"手术终止时间"。 - 在
ReportEditor.tsx右侧基本信息中,保留现有的startHour/startMinute、endHour/endMinute下拉框(或合并为时间输入)。 - 建立双向转换:
- 表单 → 方格:下拉框变化时拼接为
HH:mm同步到方格。 - 方格 → 表单:用户在方格内输入时间文本(如"09:30")时,解析并反向更新
startHour/startMinute。
- 表单 → 方格:下拉框变化时拼接为
需求 2:动态字段配置体系
- 数据结构:在
types.ts中新增FieldType和FormField接口,描述字段的 key、label、分类、类型、显隐状态、是否系统锁定、选项列表等。 - 全局配置存储:在
localStorage中新增formFieldsConfigkey,保存字段配置数组。 - TemplateManage 字段库改造:
- 右侧面板增加【插入字段】和【字段管理】两个 Tab。
- 【插入字段】按分类(填空、单选、多选、时间)分组展示字段按钮,点击插入对应
data-bind方格。 - 【字段管理】展示所有非系统锁定字段,支持新增字段(输入名称、选择类型、选择分类)、编辑选项、删除字段、控制
visibleInForm开关。
- ReportEditor 动态渲染:右侧【基本信息】表单不再硬编码,而是读取
formFieldsConfig,过滤出visibleInForm === true的字段,根据type动态渲染对应输入组件(文本框/下拉框/多选标签/时间拆分下拉框)。 - 初始化默认配置:首次加载时若
formFieldsConfig不存在,自动生成一套与当前硬编码表单一致的默认配置。
需求 3:UI 紧凑化优化
- 调整
field-value的内联样式:min-width从60px降至32px- 去除上下
padding(或仅保留极小的上下间距) - 增加
line-height: 1.2、font-size: inherit、vertical-align: text-bottom - 背景色微调为
#f8fafc(编辑态更明显)
- 同步修改
index.css和print.ts中的对应样式。
非功能点
- 系统锁定字段(
patientName、hospitalId)不可删除、不可隐藏。 - 老用户已有的
localStorage数据不因字段配置变化而丢失;新增配置与现有Report/Template数据解耦。 - 保持
npm run lint类型检查通过。 - 不引入新的第三方依赖。
影响范围预估
| 模块 | 影响程度 | 说明 |
|---|---|---|
src/types.ts |
高 | 新增 FieldType、FormField、FormFieldsConfig 类型定义 |
src/utils/defaultContent.ts |
中 | 手术时间占位符替换为智能方格 |
src/index.css |
中 | 优化 .field-value 紧凑样式 |
src/utils/print.ts |
低 | 同步打印样式 |
src/pages/TemplateManage.tsx |
高 | 字段库 UI 重构为 Tab + 分类分组 + 字段管理 |
src/pages/ReportEditor.tsx |
高 | 右侧基本信息表单从硬编码改为动态渲染,新增时间解析/拼接逻辑 |
待确认问题
无。用户已提供详细需求和初步技术思路,可直接进入实现方案设计。