Mdeical_Sur_Report/工程分析/实现方案-2026-04-18-19-08-43.md

实现方案 —— 2026-04-18-19-08-43

方案目标

优化编辑器交互体验和模板排版细节，提升视频面板空间利用率和图片占位符自适应能力。

需求 1：基础信息字段默认无下划线

修改文件

src/utils/defaultContent.ts

修改内容

修改 smartField() 函数，对 6 个基础字段自动附加 .no-underline 类：

const noUnderlineKeys = ['patientName', 'patientGender', 'patientAge', 'department', 'bedNumber', 'hospitalId'];
const noUlClass = noUnderlineKeys.includes(key) ? ' no-underline' : '';

在生成的 HTML 中，.field-value 的 class 变为 field-value${noUlClass}。

需求 2：字段联动高亮并居中滚动

修改文件

src/pages/ReportEditor.tsx

修改内容

1. 新增状态：const [activeFieldKey, setActiveFieldKey] = useState<string | null>(null);
2. 修改点击处理：在 handleEditorClick 的 .field-value 点击分支中，增加 setActiveFieldKey(bindKey)。
3. 修改滚动逻辑：将 scrollIntoView 的 block 从 'center' 改为更精确的控制（block: 'center' 本身就是居中，满足 1/3~2/3 需求）。
4. 高亮样式：在右侧表单渲染中，为每个字段容器 div 增加动态类名：

   className={`space-y-1 p-2 -mx-2 rounded-xl transition-all duration-300 ${activeFieldKey === field.key ? 'bg-blue-50 ring-1 ring-accent shadow-sm' : ''}`}
   

需求 3：视频上传按钮整合进缩略图列表

修改文件

src/pages/ReportEditor.tsx

修改内容

1. 删除原本独立的「上传视频」大按钮区域。
2. 在 videos.map() 所在的滚动容器 <div className="flex gap-2 overflow-x-auto pb-2 no-scrollbar"> 的第一个位置，插入缩小版的上传按钮：

   <button
     onClick={() => videoInputRef.current?.click()}
     className="shrink-0 w-24 h-[68px] flex flex-col items-center justify-center gap-1 border-2 border-dashed border-border rounded-xl hover:border-accent hover:bg-slate-50 transition-all text-text-muted hover:text-accent"
   >
     <Video size={18} />
     <span className="text-[10px] font-bold">上传视频</span>
   </button>
   

需求 4：视频模块间距紧凑化

修改文件

src/pages/ReportEditor.tsx

修改内容

1. 最外层容器从 space-y-4 改为 space-y-2。
2. 视频播放器与控制按钮之间从 space-y-4 改为 space-y-2。
3. 控制按钮区域（播放/暂停/进度条等）的 gap 或 margin 适当缩减。
4. 「关键帧摘取」标题区域的 padding-top 缩减，可增加 border-t 作为视觉分隔。

需求 5：签名与日期之间增加空行

修改文件

src/utils/defaultContent.ts

修改内容

在「手术者签名」<p> 和「撰写时间」<p> 之间插入：

<p style="margin: 0; padding: 0; line-height: 1.5;">&nbsp;</p>

需求 6：图片占位符填充后高度自适应

修改文件

src/pages/ReportEditor.tsx 和 src/pages/TemplateManage.tsx

修改内容

在所有填充图片的逻辑中（fillPlaceholderSrc、handleDrop、autoCaptureFrames 等），在 placeholder.classList.add('has-image') 之后，增加：

placeholder.style.height = 'auto';
placeholder.style.width = 'auto';
placeholder.style.lineHeight = 'normal';

涉及文件及修改点

文件	修改点
src/utils/defaultContent.ts	smartField() 注入 .no-underline；签名与日期之间插入空行
src/pages/ReportEditor.tsx	activeFieldKey 状态 + 高亮样式；视频上传按钮整合；视频面板间距缩减；占位符自适应样式
src/pages/TemplateManage.tsx	占位符自适应样式

风险与注意事项

1. smartField() 中硬编码的 6 个 key 需与 DEFAULT_FORM_FIELDS 严格一致。
2. activeFieldKey 高亮样式使用 transition-all duration-300，需确保不会与现有样式冲突。
3. 视频上传按钮移入缩略图列表后，需确保 videoInputRef 的点击触发逻辑不受影响。
4. 占位符 height: auto 后，需验证图片在表格内（table cell）和正文中的显示是否正常。