23 lines
1.3 KiB
Markdown
23 lines
1.3 KiB
Markdown
# 需求分析 — 2026-04-16-17-21-58
|
||
|
||
## 需求背景
|
||
用户对上一个优化后的 "插入" 按钮位置提出了微调诉求：按钮覆盖在图片正中央会遮挡图片内容，不够理想。
|
||
|
||
## 功能目标
|
||
调整关键帧截图卡片上 "插入" 按钮的位置和颜色：
|
||
1. **位置调整**：将 "插入" 按钮从图片正中央移回卡片底部，位于**时间格式（如 `00:15`）**和 **"可拖拽"** 提示文字之间。
|
||
2. **不遮盖图片**：按钮不再以 absolute 覆盖层形式存在于图片之上。
|
||
3. **颜色调整**：按钮恢复为与 "可拖拽" 一致的蓝色（`bg-accent` / `text-white`）。
|
||
4. **保留实体按钮样式**：保持 `px-3 py-1.5 rounded-full shadow-md` 的实体胶囊按钮外观，不再使用纯文字链接。
|
||
|
||
## 涉及页面/模块
|
||
- `src/pages/ReportEditor.tsx` —— 关键帧卡片 JSX 结构调整
|
||
|
||
## 验收标准
|
||
- [ ] "插入" 按钮位于关键帧卡片底部，时间文字与 "可拖拽" 之间。
|
||
- [ ] 按钮不覆盖在图片上，不遮挡图片内容。
|
||
- [ ] 按钮为蓝色实体胶囊按钮，与 "可拖拽" 蓝色一致。
|
||
- [ ] 悬停时按钮和 "可拖拽" 同时显示，移开时同时隐藏。
|
||
- [ ] 点击按钮后插入逻辑正常工作，不触发视频跳转。
|
||
- [ ] `npm run lint` 零错误，`npm run build` 构建通过。
|