1.9 KiB
1.9 KiB
需求分析 —— 2026-04-18-19-37-56
需求来源
用户在实际使用中发现 4 个编辑器体验问题,要求进行修复和优化。
需求概述
需求 1:视频上传按钮位置调整
在 ReportEditor 的「视频分析」面板中,「上传视频」按钮当前位于视频缩略图列表的首位。用户希望将其移至列表末尾,以符合「先列出已有视频,最后提供添加操作」的操作直觉。
需求 2:图片占位符提示文字绝对居中
图片占位符(.image-placeholder)内的提示文字(如「插入/点击放置图片」)目前未在框中绝对居中。当占位符高度较大或行高不一时,文字会偏上或偏下。用户希望文字在占位符内绝对居中显示。
需求 3:删除图片后占位符恢复原始大小
当向图片占位符插入图片后,占位符会收缩到图片实际尺寸(width:auto; height:auto)。但点击「×」删除图片后,占位符不会恢复为原始预设大小,而是保持收缩后的尺寸。用户希望删除后占位符能恢复为最初创建时的宽度和高度。
需求 4:对齐按钮导致混合排版换行
点击富文本工具栏的「左对齐/居中/右对齐」按钮时,浏览器原生的 document.execCommand('justifyLeft') 等命令会粗暴地用 <div align="left"> 包裹选区,导致包含 .field-value 或 .image-placeholder 的段落被肢解,文字与输入框/图片强制换行分离。用户希望对齐操作安全地作用于整个段落,不破坏混合排版结构。
涉及文件
src/pages/ReportEditor.tsx(需求 1、2、3、4)src/pages/TemplateManage.tsx(需求 2、3、4)src/utils/defaultContent.ts(需求 2、3)
需求影响范围
- 视频分析面板布局
- 图片占位符的视觉表现和交互反馈
- 富文本对齐功能的实现方式
- 默认模板中占位符的 HTML 结构