82 lines
3.1 KiB
Markdown
82 lines
3.1 KiB
Markdown
# 实现方案 — 2026-04-16-17-15-37
|
|
|
|
## 技术思路
|
|
仅调整 `ReportEditor.tsx` 中关键帧卡片的 JSX 结构：将 "插入" 按钮从底部文字行移到图片层的相对定位容器中，并修改其 className 为实体按钮样式（绿色背景、白色文字、圆角、阴影）。
|
|
|
|
`insertFrameToPlaceholder` 等逻辑函数无需改动。
|
|
|
|
---
|
|
|
|
## 修改文件清单
|
|
|
|
| 文件 | 变更类型 | 说明 |
|
|
|------|----------|------|
|
|
| `src/pages/ReportEditor.tsx` | 修改 | 移动 "插入" 按钮位置、更新样式 className |
|
|
|
|
---
|
|
|
|
## 关键代码变更说明
|
|
|
|
### 当前 JSX 片段（约第 1303~1318 行）
|
|
|
|
```tsx
|
|
<div className="relative">
|
|
<img src={frame.dataUrl} className="w-full aspect-video object-cover rounded-lg" />
|
|
{frame.isManual && <span className="manual-frame-badge">手动</span>}
|
|
</div>
|
|
<div className="text-[9px] font-bold text-text-muted mt-1.5 px-1 flex justify-between items-center">
|
|
<span>{frame.timeFormatted}</span>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); insertFrameToPlaceholder(frame); }}
|
|
className="text-accent opacity-0 group-hover:opacity-100 transition-opacity hover:underline"
|
|
>
|
|
插入
|
|
</button>
|
|
<span className="text-accent opacity-0 group-hover:opacity-100 transition-opacity">可拖拽</span>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### 修改后 JSX 片段
|
|
|
|
```tsx
|
|
<div className="relative">
|
|
<img src={frame.dataUrl} className="w-full aspect-video object-cover rounded-lg" />
|
|
{frame.isManual && <span className="manual-frame-badge">手动</span>}
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); insertFrameToPlaceholder(frame); }}
|
|
className="absolute inset-0 m-auto w-fit h-fit px-3 py-1.5 bg-emerald-500 text-white text-[10px] font-bold rounded-full shadow-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-emerald-600"
|
|
>
|
|
插入
|
|
</button>
|
|
</div>
|
|
<div className="text-[9px] font-bold text-text-muted mt-1.5 px-1 flex justify-between items-center">
|
|
<span>{frame.timeFormatted}</span>
|
|
<span className="text-accent opacity-0 group-hover:opacity-100 transition-opacity">可拖拽</span>
|
|
</div>
|
|
```
|
|
|
|
### 样式说明
|
|
- `absolute inset-0 m-auto w-fit h-fit`：使按钮在图片容器内水平和垂直居中。
|
|
- `px-3 py-1.5`：实体按钮的内边距。
|
|
- `bg-emerald-500 text-white`：翠绿背景 + 白色文字，与 "可拖拽" 的蓝色（`text-accent`）形成明显区分。
|
|
- `rounded-full shadow-md`：圆角胶囊形状 + 轻微阴影，呈现按钮质感。
|
|
- `opacity-0 group-hover:opacity-100 transition-opacity`：保持 hover 显示/隐藏行为与 "可拖拽" 一致。
|
|
|
|
---
|
|
|
|
## 风险点及应对策略
|
|
|
|
| 风险 | 影响 | 应对策略 |
|
|
|------|------|----------|
|
|
| 按钮遮挡 "手动" 徽章 | 视觉冲突 | "手动" 徽章位于左上角，按钮位于正中央，空间不重叠 |
|
|
| 按钮点击触发卡片 onClick | 视频跳转 | 保留 `e.stopPropagation()` |
|
|
| 绝对定位在相对容器中未居中 | 偏位 | 使用 `inset-0 m-auto w-fit h-fit` 确保 Flex/Grid 内的居中 |
|
|
|
|
---
|
|
|
|
## 改动范围总结
|
|
- 仅做 JSX 结构和样式的微调整，不修改任何逻辑函数。
|
|
- 不引入新依赖。
|