实现方案 — 2026-04-16-22-35-38

根因分析

上一版本虽然实现了 smart-field-wrapper 的插入逻辑和双向绑定，但存在两个问题：

BINDABLE_FIELDS key 与 Report 接口不一致：例如 gender、age 在 Report 接口中实际为 patientGender、patientAge，导致 ReportEditor 中 reportData[fieldKey] 读取到 undefined，双向绑定不生效。
默认模板未使用智能控件：defaultContent.ts 中仍使用红色纯文本占位符（*姓名* 等），新建报告时即使字段映射正确，模板里也没有 data-bind 节点，联动能力无法被激活。

修改文件清单

文件	修改类型	说明
`src/types.ts`	修改	修正 `BINDABLE_FIELDS` key，移除不存在的字段
`src/utils/defaultContent.ts`	修改	将所有占位符替换为 `smart-field-wrapper` HTML

具体代码变更

变更 1：`src/types.ts` — 修正并精简 `BINDABLE_FIELDS`

替换为：

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：

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 回滚。

⚠️ 请审核以上方案，确认无误后回复「确认」或提出修改意见，我将继续编写测试方案。

4.4 KiB Raw Blame History Unescape Escape