59 lines
3.8 KiB
Markdown
59 lines
3.8 KiB
Markdown
# 需求分析 — 2026-04-17-00-13-09
|
||
|
||
## 原始需求摘要
|
||
|
||
1. **手术时间方框化**：将报告模板中的"手术开始时间"、"手术终止时间"从静态文本改为可联动的智能方格。
|
||
2. **动态字段体系**：在 `TemplateManage` 中将字段库升级为支持分类（填空、多选、单选、时间）、允许自定义新增字段，并可控制字段是否在 `ReportEditor` 右侧【基本信息】中显示。除"姓名"、"住院号"为系统锁定字段外，其余字段均可调整显隐和删除。
|
||
3. **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` 中新增 `formFieldsConfig` key，保存字段配置数组。
|
||
- **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` | 高 | 右侧基本信息表单从硬编码改为动态渲染，新增时间解析/拼接逻辑 |
|
||
|
||
## 待确认问题
|
||
|
||
无。用户已提供详细需求和初步技术思路，可直接进入实现方案设计。
|