3.4 KiB
3.4 KiB
需求分析 — 2026-04-18-00-23-14
原始需求摘要
用户提出 3 个关于富文本编辑器（ReportEditor / TemplateManage）的优化需求：
- 拖拽关键帧后占位符边框残留：通过拖拽将视频关键帧放入
.image-placeholder后，占位符原有的虚线框和背景色未完全清除，视觉兼容性差。 - 废弃原生
prompt()，改为居中 UI 弹窗：点击「插入表格」和「插入图片占位符」时，当前使用浏览器原生prompt()弹窗，希望改为屏幕中央的自定义 React 弹窗，以确认表格行列数或占位符最大长宽。 - 占位符图片来源隔离与保护：创建图片占位符时，可选择允许的图片来源类型（关键帧图片 / 本地上传/签名/素材），从而保护签名等特定区域不被误拖入术中截图。
需求拆解
功能点
- F1：修复
fillPlaceholder（拖拽填充）未清除内联border和background的问题，使图片完全撑满占位符。 - F2：修复
autoCaptureFrames中自动插入关键帧时同样未清除内联样式的问题。 - F3：在
ReportEditor.tsx和TemplateManage.tsx中，将insertTable的原生prompt()替换为自定义居中弹窗（输入行数、列数）。 - F4：在
ReportEditor.tsx和TemplateManage.tsx中，将insertImage的原生prompt()替换为自定义居中弹窗（输入宽度、高度；表格内自动隐藏尺寸输入）。 - F5：在弹窗中增加「图片来源限制」下拉选项（所有来源 / 仅限关键帧 / 仅限本地上传/签名/素材），生成占位符时写入
data-allow-source属性。 - F6：在
handleDrop（拖拽关键帧）中拦截：若占位符限制为upload，拒绝拖入并提示。 - F7：在
handleEditorClick（点击空占位符）中拦截：若占位符限制为frame，拒绝打开图片选择器并提示。 - F8：在
insertFrameToPlaceholder（一键插入关键帧）中拦截：若目标占位符限制为upload，拒绝插入并提示。 - F9：在
autoCaptureFrames的自动帧插入setTimeout中拦截：若第一个空置占位符限制为upload，跳过该帧不插入。
非功能点
- 向后兼容：未设置
data-allow-source的旧占位符默认行为不变（视为all）。 - 焦点管理：打开弹窗前保存当前 Selection/Range，确认后恢复光标位置再执行
insertHTML，确保插入位置正确。 - 视觉一致性：弹窗样式与现有
imagePickerOpen弹窗保持一致（固定遮罩 + 白色圆角卡片 + 居中布局）。 - 零新依赖：不引入第三方 UI 库，继续使用原生 React state + Tailwind CSS 实现。
影响范围
| 模块 | 影响程度 | 说明 |
|---|---|---|
src/pages/ReportEditor.tsx |
高 | 修改 fillPlaceholder、insertTable、insertImage、handleDrop、handleEditorClick、insertFrameToPlaceholder、autoCaptureFrames；新增弹窗 state 与 JSX。 |
src/pages/TemplateManage.tsx |
高 | 修改 insertTable、insertImage；新增弹窗 state 与 JSX；复用 savedRangeRef 做光标恢复。 |
src/index.css |
低 | 无需修改，.image-placeholder.has-image 的 Tailwind 样式已正确，只需在 JS 中清除内联样式。 |
待确认问题
无。用户已明确要求本次不经过人工二次确认直接执行。