Mdeical_Sur_Report/工程分析/需求分析-2026-04-18-00-02-08.md

需求分析 — 2026-04-18-00-02-08

原始需求摘要

1. 修复拖拽关键帧插入兼容性：拖拽关键帧到 .image-placeholder 后，虚线边框和背景色未消失，且图片缺少 max-height:100%;object-fit:contain; 约束，可能溢出占位符。

2. 图片占位符插入改为自定义弹窗 + 分类隔离：

   • 替换 insertImage 中的 prompt 弹窗为自定义 React Modal。
   • 占位符分为两类：
     • 手术影像占位（frame 模式）：支持自动帧插入、一键插入、拖拽插入。
     • 静态图片占位（manual 模式）：仅支持点击后从弹窗选择图片来源（本地上传/签名/素材），防止系统自动将手术关键帧填入 Logo 或签名位置。
   • 自动帧插入和一键插入逻辑需跳过 data-mode="manual" 的占位符。
   • 拖拽到 manual 占位符时需拦截并提示。

3. 表格插入改为自定义弹窗：替换 insertTable 中的 prompt 弹窗为自定义 React Modal，中间弹出子窗口选择行数和列数。

需求拆解

功能点

• F1：ReportEditor.tsx 的 fillPlaceholder 函数补齐 border='none'、background='transparent'，图片 style 增加 max-height:100%;object-fit:contain;。
• F2：ReportEditor.tsx 和 TemplateManage.tsx 的 insertImage 改为打开自定义 Modal（替代 prompt）。Modal 包含：
  • 宽高输入框（默认 200*200）
  • 模式选择：手术影像占位（frame）/ 静态图片占位（manual）
  • 确认/取消按钮
• F3：生成 placeholder HTML 时，manual 模式添加 data-mode="manual" 属性。
• F4：ReportEditor.tsx 的 autoCaptureFrames（setTimeout 回调内）、insertFrameToPlaceholder 的空占位符选择器，从 .image-placeholder:not(.has-image) 改为 .image-placeholder:not(.has-image):not([data-mode="manual"])。
• F5：ReportEditor.tsx 的 handleDrop 增加拦截：若目标 placeholder 的 data-mode === 'manual'，弹出提示并阻止填充。
• F6：ReportEditor.tsx 和 TemplateManage.tsx 的 insertTable 改为打开自定义 Modal（替代 prompt），包含行数/列数输入和确认/取消按钮。

非功能点

• 向后兼容：已有报告中已有的 placeholder 结构不受影响（没有 data-mode 属性的占位符默认为 frame 模式）。
• Modal 样式复用现有的 bg-black/50 backdrop-blur-sm + bg-white rounded-2xl 风格。

影响范围预估

模块	影响程度	说明
src/pages/ReportEditor.tsx	高	fillPlaceholder 修复；insertImage 改为 Modal；insertTable 改为 Modal；autoCaptureFrames 选择器；insertFrameToPlaceholder 选择器；handleDrop 拦截；新增 3 个 Modal 的 JSX
src/pages/TemplateManage.tsx	高	insertImage 改为 Modal；insertTable 改为 Modal；新增 2 个 Modal 的 JSX

待确认问题

无（用户已明确需求，且本次无需人工确认）。