Mdeical_Sur_Report/工程分析/测试方案-2026-04-18-00-23-14.md

测试方案 — 2026-04-18-00-23-14

测试目标

验证以下 3 个需求是否按预期工作：

1. 拖拽关键帧到 .image-placeholder 后，占位符内联边框和背景被彻底清除。
2. 「插入表格」和「插入图片占位符」改为自定义居中弹窗，且插入位置准确。
3. 图片占位符支持「图片来源限制」，各限制类型在拖拽、点击、一键插入、自动插入场景下均被正确拦截或放行。

测试环境

• 本地开发服务器：npm run dev（端口 3000）
• 浏览器：Chrome / Edge（推荐）
• 测试账号：任意账号（建议 admin / 123456）

测试用例

编号	场景	操作步骤	预期结果
TC-01	拖拽关键帧后边框清除	1. 进入「报告编辑」页。 2. 上传视频并自动/手动截取关键帧。 3. 插入一个图片占位符。 4. 从右侧视频分析面板拖拽关键帧到占位符。	占位符内的虚线框和浅灰背景完全消失，图片正常显示，无残留边框。
TC-02	自动帧插入后边框清除	1. 开启「自动帧插入」。 2. 上传新视频触发自动摘帧。 3. 观察自动插入到占位符的关键帧。	自动插入的图片同样无残留边框和背景。
TC-03	ReportEditor 插入表格弹窗	1. 点击工具栏「表格」按钮。 2. 在弹窗中输入 3 行 4 列，点击确认。	页面中央弹出模态框；确认后表格正确插入到光标所在位置。
TC-04	ReportEditor 插入图片占位符弹窗	1. 点击工具栏「插入图片占位符」按钮。 2. 在弹窗中输入宽 150、高 100，选择「所有来源」，点击确认。	页面中央弹出模态框；确认后行内占位符（150×100）插入到光标位置，且可正常点击上传图片。
TC-05	TemplateManage 插入表格弹窗	1. 进入「模板管理」。 2. 点击工具栏「表格」按钮，输入 2 行 2 列确认。	弹窗正常弹出，表格插入位置准确。
TC-06	TemplateManage 插入图片占位符弹窗	1. 进入「模板管理」。 2. 点击工具栏「插入图片占位符」，输入宽 80、高 80，确认。	弹窗正常弹出，占位符插入后显示「插图」缩写文本。
TC-07	表格内插入占位符隐藏尺寸	1. 在表格单元格内点击。 2. 点击「插入图片占位符」。	弹窗中提示「表格内占位符将自动填满单元格，无需设置尺寸」，不显示宽高输入框。
TC-08	仅限关键帧占位符	1. 插入占位符时选择「仅限关键帧」。 2. 点击该空占位符。	弹出提示「此区域仅限插入关键帧图片...」，不打开图片选择器。
TC-09	仅限关键帧-拖拽放行	1. 对「仅限关键帧」占位符，从右侧拖拽关键帧放入。	关键帧正常插入，无报错。
TC-10	仅限关键帧-上传拦截	1. 对「仅限关键帧」占位符，尝试点击打开图片选择器。	被拦截并提示。
TC-11	仅限上传类占位符	1. 插入占位符时选择「仅限本地上传/签名/素材」。 2. 点击该空占位符。	正常弹出「本地上传/签名/素材」三选一弹窗。
TC-12	仅限上传类-拖拽拦截	1. 对「仅限上传类」占位符，从右侧拖拽关键帧放入。	弹出提示「此区域仅限插入本地上传/签名/素材图片，不可置入关键帧。」，拒绝插入。
TC-13	一键插入拦截	1. 插入一个「仅限上传类」占位符作为第一个空位。 2. 在右侧关键帧卡片点击「插入」按钮。	弹出提示，拒绝插入。
TC-14	自动帧插入跳过受限占位符	1. 插入一个「仅限上传类」占位符。 2. 开启自动帧插入，上传视频触发自动摘帧。	第一个空占位符因限制为 upload 而跳过，不插入关键帧。
TC-15	向后兼容	1. 打开一份旧报告（无 data-allow-source 的占位符）。 2. 拖拽关键帧和点击上传。	旧占位符行为不变，两种操作均可正常执行。

验收标准

• TC-01 ~ TC-02：拖拽/自动插入后占位符内联边框和背景完全清除。
• TC-03 ~ TC-07：ReportEditor 和 TemplateManage 的表格/图片占位符弹窗正常工作，焦点恢复无误。
• TC-08 ~ TC-10：「仅限关键帧」占位符正确拦截上传类操作，放行关键帧操作。
• TC-11 ~ TC-14：「仅限上传类」占位符正确拦截关键帧操作，放行上传类操作。
• TC-15：旧数据无 data-allow-source 时默认行为不受影响。
• npm run lint 无 TypeScript 编译错误。

测试方式

手工验证。本项目无自动化测试框架，所有用例通过浏览器交互逐项确认。