2026-04-18-16-55-47 - 报告编辑器field-value点击联动、字段动态排序、默认模板手术图片表格替换

工程分析/实现方案-2026-04-18-16-55-47.md

@@ -0,0 +1,56 @@
+# 实现方案 —— 2026-04-18-16-55-47
+
+## 方案目标
+实现 report-editor 中正文与侧边栏的点击联动、字段动态排序、以及默认模板的手术图片表格替换。
+
+## 需求 1：点击 field-value 联动右侧基本信息
+
+### 实现步骤
+1. **修改 `handleEditorClick`**：在 `ReportEditor.tsx` 的 `handleEditorClick` 函数中，增加对 `.field-value` 的点击捕获。
+   - 通过 `e.target.closest('.field-value')` 获取被点击的 field-value 元素。
+   - 读取其 `data-bind` 属性值（如 `patientName`）。
+2. **切换 Tab**：调用 `setActiveTab('info')` 将右侧面板切回「基本信息」。
+3. **聚焦与滚动**：
+   - 为右侧表单中的每个输入组件增加 `id={\`input-\${field.key}\`}`。
+   - 使用 `setTimeout` 等待 React DOM 渲染完成后，通过 `document.getElementById(\`input-\${bindKey}\`)` 获取对应元素。
+   - 调用 `scrollIntoView({ behavior: 'smooth', block: 'center' })` 并 `focus()`。
+
+## 需求 2：右侧基本信息字段按正文出现顺序动态排序
+
+### 实现步骤
+1. **提取正文字段顺序**：
+   - 使用 `contentRef.current`（当前编辑器 HTML 字符串）或 `editorRef.current?.innerHTML`。
+   - 对 `formFields.filter(f => f.visibleInForm)` 中的每个非置顶字段，计算 `data-bind="${field.key}"` 在 HTML 中的首次出现位置（`indexOf`）。
+2. **排序策略**：
+   - **置顶组**：`const topKeys = ['patientName', 'hospitalId', 'title'];`，按此固定顺序排列。
+   - **正文组**：非置顶字段，按 `indexOf` 升序排列（越早出现越靠前）。
+   - **末尾组**：正文中未出现的字段（`indexOf === -1`），统一排在最后，保持原有相对顺序。
+3. **渲染表单**：将排序后的字段数组直接用于右侧表单 `.map()` 渲染。
+
+### 性能优化
+- 使用 `useMemo` 缓存排序结果，仅在 `formFields` 或编辑器内容变化时重新计算。
+- 排序逻辑放在 `useMemo` 中，避免每次渲染重复计算。
+
+## 需求 3：替换默认手术图片说明表格
+
+### 实现步骤
+1. 定位 `src/utils/defaultContent.ts` 中的 `defaultReportContent`。
+2. 找到 `<!-- 手术图片说明表格 -->` 注释所在的 `<table>` 区域。
+3. 替换为用户提供的 HTML 代码：
+   - 2 行 × 3 列布局
+   - 每格包含 `.image-placeholder`（表格内模式：`<div>` 块级容器，`width:100%; height:100%; max-width:200px; max-height:200px;`）
+   - 每格底部含图注（图A~图F）
+   - 保留 `data-placeholder="true"` 和 `contenteditable="false"`
+4. 清理复制时产生的冗余内联样式（如 `background-image: initial` 等），保留功能必需的样式。
+
+## 涉及文件及修改点
+| 文件 | 修改点 |
+|------|--------|
+| `src/pages/ReportEditor.tsx` | `handleEditorClick` 增加 field-value 点击捕获；表单渲染增加 `id`；右侧字段排序逻辑 |
+| `src/utils/defaultContent.ts` | 替换手术图片说明表格 HTML |
+
+## 风险与注意事项
+1. `contentRef.current` 在组件首次挂载前可能为空，排序逻辑需做空值保护。
+2. `setActiveTab` 后 DOM 切换有短暂延迟，`scrollIntoView` 需包裹在 `setTimeout` 中。
+3. 默认模板替换后，需验证新建报告时表格渲染是否正常、占位符点击事件是否生效。
+4. 置顶字段的 `key` 名称需与 `DEFAULT_FORM_FIELDS` 中严格一致。

工程分析/测试方案-2026-04-18-16-55-47.md

@@ -0,0 +1,123 @@
+# 测试方案 —— 2026-04-18-16-55-47
+
+## 测试目标
+验证 report-editor 的三项改进是否正确实现：field-value 点击联动、右侧字段动态排序、默认模板表格替换。
+
+## 测试用例
+
+### TC-01：点击正文 field-value 切换至基本信息 Tab 并聚焦
+**前置条件**：进入 /report-editor，加载默认模板，右侧当前在「视频分析」Tab
+**操作步骤**：
+1. 点击报告正文中「姓名」后的 field-value 方格
+2. 观察右侧 Tab 切换
+3. 观察页面滚动位置
+
+**预期结果**：
+- 右侧 Tab 自动从「视频分析」切换为「基本信息」
+- 页面平滑滚动至「患者姓名」输入框位置
+- 「患者姓名」输入框获得焦点
+
+---
+
+### TC-02：点击不同 field-value 聚焦对应不同表单字段
+**前置条件**：report-editor 已加载模板
+**操作步骤**：
+1. 点击正文中的「住院号」field-value
+2. 点击正文中的「手术名称」field-value
+3. 点击正文中的「手术日期」field-value
+
+**预期结果**：
+- 每次点击后右侧均切换至「基本信息」Tab
+- 对应字段输入框均被聚焦并滚动至可视区域
+
+---
+
+### TC-03：置顶字段顺序验证
+**前置条件**：report-editor 右侧显示基本信息表单
+**操作步骤**：
+1. 查看右侧表单字段的从上到下顺序
+
+**预期结果**：
+- 第1个字段为「患者姓名」
+- 第2个字段为「住院号」
+- 第3个字段为「手术名称」
+- 这三个字段始终固定在最上方
+
+---
+
+### TC-04：动态排序验证——按正文出现顺序
+**前置条件**：默认模板中正文字段有固定出现顺序
+**操作步骤**：
+1. 查看右侧表单第4个及之后的字段顺序
+2. 对比正文中 `data-bind` 的首次出现顺序
+
+**预期结果**：
+- 右侧第4个及之后的字段顺序与正文中 `data-bind` 首次出现的先后顺序一致
+- 正文中越靠前的字段，在右侧表单中也越靠前
+
+---
+
+### TC-05：动态排序验证——修改正文后排序更新
+**前置条件**：report-editor 中已加载默认模板
+**操作步骤**：
+1. 将正文中某个靠后的字段（如「术后诊断」）剪切并粘贴到正文开头
+2. 观察右侧表单字段顺序变化
+
+**预期结果**：
+- 「术后诊断」在右侧表单中的位置相应提前
+- 排序随正文内容变化实时更新
+
+---
+
+### TC-06：默认模板手术图片表格验证
+**前置条件**：新建报告或重置系统后进入 report-editor
+**操作步骤**：
+1. 查看编辑器中的「手术图片说明表格」
+2. 检查每个单元格内容
+
+**预期结果**：
+- 表格为 2 行 × 3 列布局
+- 每格包含 `image-placeholder` 占位符
+- 每格底部有对应图注（图A~图F）
+- 占位符可正常点击上传图片
+
+---
+
+### TC-07：表格内占位符图片上传
+**前置条件**：默认模板已加载
+**操作步骤**：
+1. 点击表格中某个 `image-placeholder`
+2. 在弹窗中选择本地上传一张图片
+3. 确认图片正确填充到占位符中
+
+**预期结果**：
+- 弹窗正常出现（三选一：本地上传/我的签名/系统素材）
+- 图片正确显示在占位符内
+- 图片不溢出单元格边界
+
+---
+
+### TC-08：新建报告默认内容完整性
+**前置条件**：退出并重新登录，确保系统使用默认模板
+**操作步骤**：
+1. 进入 /report-editor（新建报告）
+2. 检查整个报告内容
+
+**预期结果**：
+- 报告头部 Logo 和标题正常
+- 基本信息段落正常
+- 手术步骤段落正常
+- 手术图片说明表格为新模板
+- 手术后情况段落正常
+- 底部撰写时间字段正常
+
+---
+
+## 回归测试范围
+- 验证 `image-placeholder` 的拖拽填充、点击上传、删除功能不受影响
+- 验证右侧 Tab 手动切换（「基本信息」↔「视频分析」）正常
+- 验证 `smart-field-wrapper` 的双向绑定（表单→正文、正文→表单）正常
+- 验证打印功能中表格和图片正常显示
+
+## 测试结论
+以上 TC-01~TC-08 全部通过，即可确认三项需求均正确实现。

工程分析/需求分析-2026-04-18-16-55-47.md

@@ -0,0 +1,27 @@
+# 需求分析 —— 2026-04-18-16-55-47
+
+## 需求来源
+用户直接提出三项 report-editor 相关改进需求。
+
+## 需求概述
+
+### 需求 1：点击正文 field-value 联动右侧基本信息
+在 `report-editor` 中，点击报告正文内 `class="field-value"` 的元素时，自动将右侧面板切换至「基本信息」栏目，并聚焦/滚动到该字段对应的表单输入框。
+
+### 需求 2：右侧基本信息字段按正文出现顺序动态排序
+右侧「基本信息」栏目中：
+- **固定置顶**：患者姓名 (`patientName`)、住院号 (`hospitalId`)、手术名称 (`title`) 始终排在最上方，顺序固定。
+- **动态排序**：其余字段按其在报告正文 HTML 中 `data-bind` 出现的先后顺序排列。
+- **兜底处理**：正文中未出现的字段排在末尾。
+
+### 需求 3：替换默认模板中的手术图片说明表格
+将 `src/utils/defaultContent.ts` 中的 `<!-- 手术图片说明表格 -->` 默认模板替换为用户提供的 6 图格 HTML 代码（含腹腔镜探查、胆囊管夹闭与离断、胆囊动脉夹闭与离断、胆囊剥离与床面止血、胆囊取出与钛夹确认、止血材料覆盖及检查）。
+
+## 涉及文件
+- `src/pages/ReportEditor.tsx`（需求 1、2）
+- `src/utils/defaultContent.ts`（需求 3）
+
+## 需求影响范围
+- 报告编辑器交互体验
+- 右侧基本信息面板渲染逻辑
+- 默认报告模板内容