2026-04-16-22-35-38 - 修正 BINDABLE_FIELDS key 与 Report 接口一致，并将默认模板占位符替换为智能绑定方格

2026-04-16 23:55:33 +08:00
parent f373520fa5
commit 952856e8c6
5 changed files with 232 additions and 20 deletions
--- a/工程分析/实现方案-2026-04-16-22-35-38.md
+++ b/工程分析/实现方案-2026-04-16-22-35-38.md
@@ -0,0 +1,86 @@
+# 实现方案 — 2026-04-16-22-35-38
+
+## 根因分析
+
+上一版本虽然实现了 `smart-field-wrapper` 的插入逻辑和双向绑定，但存在两个问题：
+1. **`BINDABLE_FIELDS` key 与 `Report` 接口不一致**：例如 `gender`、`age` 在 `Report` 接口中实际为 `patientGender`、`patientAge`，导致 `ReportEditor` 中 `reportData[fieldKey]` 读取到 `undefined`，双向绑定不生效。
+2. **默认模板未使用智能控件**：`defaultContent.ts` 中仍使用红色纯文本占位符（`*姓名*` 等），新建报告时即使字段映射正确，模板里也没有 `data-bind` 节点，联动能力无法被激活。
+
+## 修改文件清单
+
+| 文件 | 修改类型 | 说明 |
+|------|---------|------|
+| `src/types.ts` | 修改 | 修正 `BINDABLE_FIELDS` key，移除不存在的字段 |
+| `src/utils/defaultContent.ts` | 修改 | 将所有占位符替换为 `smart-field-wrapper` HTML |
+
+---
+
+## 具体代码变更
+
+### 变更 1：`src/types.ts` — 修正并精简 `BINDABLE_FIELDS`
+
+**替换为：**
+
+```typescript
+export const BINDABLE_FIELDS: BindableField[] = [
+  { key: 'patientName', label: '姓名' },
+  { key: 'patientGender', label: '性别' },
+  { key: 'patientAge', label: '年龄' },
+  { key: 'department', label: '科别' },
+  { key: 'bedNumber', label: '床号' },
+  { key: 'hospitalId', label: '住院号' },
+  { key: 'surgeryDate', label: '手术日期' },
+  { key: 'title', label: '手术名称' },
+  { key: 'surgeon', label: '手术者' },
+  { key: 'assistant', label: '助手' },
+  { key: 'anesthesiologist', label: '麻醉师' },
+  { key: 'anesthesiaType', label: '麻醉方式' },
+];
+```
+
+### 变更 2：`src/utils/defaultContent.ts` — 占位符替换为智能控件
+
+定义一个辅助函数（仅用于生成字符串），将占位符替换为智能控件 HTML：
+
+```typescript
+const smartField = (key: string, label: string) => `
+  <span class="smart-field-wrapper" contenteditable="false">
+    <span class="field-label">${label}：</span>
+    <span class="field-value" data-bind="${key}" contenteditable="true" style="min-width: 60px; padding: 0 4px; border: 1px solid #cbd5e1; border-radius: 4px; display: inline-block; background: #fff; color: #0f172a;"></span>
+  </span>
+`;
+```
+
+**将默认模板中的以下占位符替换：**
+
+| 原占位符 | 替换为 |
+|---------|--------|
+| `姓名：<span style="color: #ff0000;">*姓名*</span>` | `smartField('patientName', '姓名')`（去掉冒号，因为标签自带冒号） |
+| `性别: <span style="color: #ff0000;">*性别*</span>` | `smartField('patientGender', '性别')` |
+| `年龄：<span style="color: #ff0000;">*年龄*</span>` | `smartField('patientAge', '年龄')` |
+| `科别：<span style="color: #ff0000;">*科室*</span>` | `smartField('department', '科别')` |
+| `床号：<span style="color: #ff0000;">*床号*</span>` | `smartField('bedNumber', '床号')` |
+| `住院号：<span style="color: #ff0000;">*住院号*</span>` | `smartField('hospitalId', '住院号')` |
+| `<strong>手术日期：</strong><span style="color: #bdbdbd;">年 月 日</span>` | `<strong>手术日期：</strong>${smartField('surgeryDate', '')}` |
+| `<strong>手术名称：</strong>腹腔镜胆囊切除术` | `<strong>手术名称：</strong>${smartField('title', '')}` |
+| `手术者: <span style="color: #bdbdbd;">手术者</span>` | `手术者：${smartField('surgeon', '')}` |
+| `助手: <span style="color: #bdbdbd;">助手</span>` | `助手：${smartField('assistant', '')}` |
+| `麻醉师：<span style="color: #bdbdbd;">麻醉师</span>` | `麻醉师：${smartField('anesthesiologist', '')}` |
+| `麻醉方式: 全麻` | `麻醉方式：${smartField('anesthesiaType', '')}` |
+
+> 注：当 `label` 为空字符串时，只生成 `data-bind` 的方格，不生成前置标签。对于已有中文前缀（如"手术日期："）的场景，使用空 label 更自然。
+
+## 风险点
+
+| 风险 | 级别 | 应对措施 |
+|------|------|---------|
+| 现有用户自定义模板仍使用旧占位符，不会自动升级 | 低 | 属于预期行为；只有新建报告时的默认模板会使用新控件 |
+| 某些字段（如 `title`）在模板加载后可能被模板名称覆盖 | 低 | `apply template` 逻辑本身就会重置 `title`，这是现有行为，不影响 |
+
+## 回滚策略
+
+本次修改仅涉及常量定义和默认 HTML 字符串，可随时通过 `git revert` 回滚。
+
+---
+
+**⚠️ 请审核以上方案，确认无误后回复「确认」或提出修改意见，我将继续编写测试方案。**
--- a/工程分析/测试方案-2026-04-16-22-35-38.md
+++ b/工程分析/测试方案-2026-04-16-22-35-38.md
@@ -0,0 +1,80 @@
+# 测试方案 — 2026-04-16-22-35-38
+
+## 测试目标
+
+验证默认模板中的红色占位符已正确替换为智能占位方格，且双向绑定字段 key 与右侧【基本信息】表单字段名完全一致，确保新建报告时联动功能直接生效。
+
+## 测试环境
+
+- 浏览器：Chrome / Edge
+- 前置条件：已登录系统（建议使用 `admin` 账号）
+- 测试页面：`/report-editor`、`/template-manage`
+
+---
+
+## 测试用例设计
+
+### 用例 1：新建报告 — 默认模板自动加载智能控件
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 1.1 | 进入 `/report-editor`（新建报告） | 编辑器加载默认模板，姓名、性别、年龄、科别、床号、住院号等位置显示为带边框的可填方格 |
+| 1.2 | 右键检查第一个姓名方格的 DOM | HTML 结构为 `<span class="smart-field-wrapper" ...><span class="field-label">姓名：</span><span class="field-value" data-bind="patientName" ...></span></span>` |
+| 1.3 | 检查性别方格的 `data-bind` | 属性值为 `patientGender` |
+| 1.4 | 检查年龄方格的 `data-bind` | 属性值为 `patientAge` |
+
+### 用例 2：报告编辑端 — 姓名方格输入联动表单
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 2.1 | 在编辑器"姓名"方格内输入"张三" | 右侧【基本信息】"患者姓名"字段实时显示"张三" |
+| 2.2 | 在编辑器"性别"方格内输入"男" | 右侧"患者性别"字段实时显示"男" |
+| 2.3 | 在编辑器"年龄"方格内输入"45" | 右侧"患者年龄"字段实时显示"45" |
+
+### 用例 3：报告编辑端 — 表单修改联动方格
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 3.1 | 在右侧表单"患者姓名"中修改为"李四" | 编辑器内"姓名"方格内容同步变为"李四" |
+| 3.2 | 在右侧表单"科别"中输入"普外科" | 编辑器内"科别"方格同步变为"普外科" |
+| 3.3 | 在右侧表单"手术名称"中修改为"阑尾切除术" | 编辑器内"手术名称"方格同步变为"阑尾切除术" |
+
+### 用例 4：模板管理端 — 字段库按钮 key 正确性
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 4.1 | 进入 `/template-manage` | 右侧字段库面板正常显示 |
+| 4.2 | 点击"性别"按钮，在编辑器中插入控件 | 插入的控件 `data-bind="patientGender"` |
+| 4.3 | 点击"年龄"按钮，在编辑器中插入控件 | 插入的控件 `data-bind="patientAge"` |
+| 4.4 | 点击"科别"按钮，在编辑器中插入控件 | 插入的控件 `data-bind="department"` |
+
+### 用例 5：老数据兼容
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 5.1 | 编辑一个之前保存的、含有旧红色占位符的老模板 | 页面正常加载，不报错；旧红色文本仍然显示为普通文字 |
+
+### 用例 6：类型检查
+
+| 步骤 | 操作 | 预期结果 |
+|------|------|---------|
+| 6.1 | 在项目根目录执行 `npm run lint` | 无 TypeScript 编译错误 |
+
+---
+
+## 验收标准
+
+- [ ] 新建报告时，默认模板中的姓名、性别、年龄、科别、床号、住院号已变为可填方格。
+- [ ] 方格的 `data-bind` 属性与右侧表单字段名完全一致。
+- [ ] 在方格中输入，右侧表单实时同步更新。
+- [ ] 在表单中修改，方格内容实时同步更新。
+- [ ] `TemplateManage` 字段库按钮插入的控件 key 正确。
+- [ ] `npm run lint` 通过。
+
+## 测试方式
+
+手工浏览器验证 + DevTools 检查 DOM + `npm run lint` 类型检查。
+
+---
+
+**⚠️ 请审核以上测试方案，确认无误后回复「确认」或提出修改意见，我将进入最终执行阶段。**
--- a/工程分析/需求分析-2026-04-16-22-35-38.md
+++ b/工程分析/需求分析-2026-04-16-22-35-38.md
@@ -0,0 +1,39 @@
+# 需求分析 — 2026-04-16-22-35-38
+
+## 原始需求摘要
+
+将默认手术报告模板中红色的 `*姓名* *性别* *年龄* *科室* *床号* *住院号*` 等占位符，替换为可填写的智能占位方框。这些方框需与 `ReportEditor` 右侧【基本信息】表单双向绑定，同时也要在 `TemplateManage` 的模板编辑中体现字段绑定关系。
+
+## 需求拆解
+
+### 功能点
+
+1. **修正字段映射一致性**
+   - 上一版本中 `BINDABLE_FIELDS` 里的 `gender`、`age` 等 key 与 `Report` 接口中的 `patientGender`、`patientAge` 不一致，导致双向绑定无法命中实际表单字段。
+   - 需要统一 key 命名，使其与 `Report` 接口及右侧表单字段名完全一致。
+
+2. **更新默认模板内容 (`defaultContent.ts`)**
+   - 将当前纯文本红色占位符（如 `<span style="color: #ff0000;">*姓名*</span>`）替换为 `smart-field-wrapper` 智能控件。
+   - 同步将手术日期、手术名称、手术者、助手、麻醉师、麻醉方式等灰色提示文本也替换为绑定控件，提升默认模板的智能化程度。
+
+3. **确保双向绑定生效**
+   - 替换后，新建报告时从默认模板加载的内容中已内嵌 `data-bind` 属性，用户在方格中输入即可自动同步右侧表单；右侧表单修改也会同步回方格。
+
+### 非功能点
+
+- 不引入新的依赖或文件，仅修改现有常量与字段映射。
+- 保持 `npm run lint` 通过。
+- 老用户已有的自定义模板不会被强制覆盖，仅默认模板生效。
+
+## 影响范围预估
+
+| 模块 | 影响程度 | 说明 |
+|------|---------|------|
+| `src/types.ts` | 中 | 修正 `BINDABLE_FIELDS` 的 key，精简为右侧表单实际存在的字段 |
+| `src/utils/defaultContent.ts` | 高 | 将占位符替换为智能控件 HTML |
+| `src/pages/TemplateManage.tsx` | 低 | 字段库按钮随 `BINDABLE_FIELDS` 自动更新 |
+| `src/pages/ReportEditor.tsx` | 低 | 无需改动，已有双向绑定逻辑直接生效 |
+
+## 待确认问题
+
+无。需求明确，修改范围可控。