26 lines
1.5 KiB
Markdown
26 lines
1.5 KiB
Markdown
# 需求分析 — 2026-04-16-17-15-37
|
||
|
||
## 需求背景
|
||
上一个需求已为关键帧截图添加了 "插入" 按钮，但用户对当前按钮的呈现方式提出了优化诉求：按钮位置在底部文字区域不够醒目，且纯文字链接样式不够直观，蓝色与 "可拖拽" 提示颜色过于接近，辨识度不足。
|
||
|
||
## 功能目标
|
||
调整关键帧截图卡片上 "插入" 按钮的位置和样式：
|
||
1. **位置调整**：将 "插入" 按钮从卡片底部的文字区域移到**图片中央**（覆盖在图片之上）。
|
||
2. **样式调整**：改为**实体按钮样式**（带背景色、圆角、内边距、阴影），而非纯文字链接。
|
||
3. **颜色调整**：不再使用蓝色（`text-accent`），改用与 "可拖拽" 蓝色提示有**明显区分度**的颜色（如绿色系 `emerald-500`），hover 时才显示在图片上方。
|
||
4. 保留原有行为：
|
||
- 鼠标未悬停时按钮不可见。
|
||
- 点击后仍按从前到后顺序自动填充第一个空置 `image-placeholder`。
|
||
- 点击不触发卡片跳转到视频位置。
|
||
|
||
## 涉及页面/模块
|
||
- `src/pages/ReportEditor.tsx` —— 关键帧卡片 JSX 结构调整
|
||
|
||
## 验收标准
|
||
- [ ] "插入" 按钮位于关键帧图片的正中央。
|
||
- [ ] 按钮为实体按钮样式（圆角、背景色、阴影）。
|
||
- [ ] 按钮颜色不是蓝色，与 "可拖拽" 有明显区分。
|
||
- [ ] 鼠标悬停到卡片上时按钮淡入显示，移开时淡出隐藏。
|
||
- [ ] 点击按钮后插入逻辑正常工作。
|
||
- [ ] `npm run lint` 零错误，`npm run build` 构建通过。
|