87 lines
4.4 KiB
Markdown
87 lines
4.4 KiB
Markdown
# 实现方案 — 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` 回滚。
|
||
|
||
---
|
||
|
||
**⚠️ 请审核以上方案，确认无误后回复「确认」或提出修改意见，我将继续编写测试方案。**
|