backup before modification at 2026-04-16-17-40-20

2026-04-16 17:40:20 +08:00
parent 506d042f7a
commit 11278d0bcd
5 changed files with 201 additions and 7 deletions
--- a/工程分析/实现方案-2026-04-16-17-21-58.md
+++ b/工程分析/实现方案-2026-04-16-17-21-58.md
@@ -0,0 +1,77 @@
+# 实现方案 — 2026-04-16-17-21-58
+
+## 技术思路
+将 `ReportEditor.tsx` 中关键帧卡片的 "插入" 按钮从图片层的 absolute 覆盖层移回底部文字行，放置在 `timeFormatted` 与 "可拖拽" 之间。颜色恢复为与 "可拖拽" 一致的蓝色（`bg-accent` / `text-white`），但保留实体胶囊按钮样式。
+
+---
+
+## 修改文件清单
+
+| 文件 | 变更类型 | 说明 |
+|------|----------|------|
+| `src/pages/ReportEditor.tsx` | 修改 | 移动 "插入" 按钮位置、调整颜色为蓝色 |
+
+---
+
+## 关键代码变更说明
+
+### 当前 JSX 片段（约第 1316~1331 行）
+
+```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>
+```
+
+### 修改后 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>}
+</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="px-2 py-0.5 bg-accent text-white text-[9px] font-bold rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity hover:bg-blue-700"
+    >
+      插入
+    </button>
+    <span className="text-accent opacity-0 group-hover:opacity-100 transition-opacity">可拖拽</span>
+  </div>
+</div>
+```
+
+### 样式说明
+- 按钮位于底部 `timeFormatted` 与 "可拖拽" 之间，不再覆盖图片。
+- `px-2 py-0.5 bg-accent text-white rounded-full shadow-sm`：蓝色实体小胶囊按钮，与 "可拖拽" 蓝色一致。
+- `hover:bg-blue-700`：加深蓝色反馈。
+- `opacity-0 group-hover:opacity-100 transition-opacity`：保持 hover 显隐与 "可拖拽" 同步。
+
+---
+
+## 风险点及应对策略
+
+| 风险 | 影响 | 应对策略 |
+|------|------|----------|
+| 按钮太小导致不易点击 | 体验下降 | 保留 `px-2 py-0.5` 的实体按钮，比纯文字链接更易点击 |
+| 底部文字区域变宽 | 布局错乱 | 使用 `flex items-center gap-2` 控制间距，保持在一行内 |
+
+---
+
+## 改动范围总结
+- 纯 JSX 结构和样式的微调整，不修改任何逻辑函数。
+- 不引入新依赖。
--- a/工程分析/测试方案-2026-04-16-17-21-58.md
+++ b/工程分析/测试方案-2026-04-16-17-21-58.md
@@ -0,0 +1,72 @@
+# 测试方案 — 2026-04-16-17-21-58
+
+## 测试环境准备
+1. 项目已完成上一次构建，无类型错误。
+2. 使用测试账号 `admin / 123456`（超级管理员）登录系统。
+3. 进入 **图文报告生成** 页面并上传视频完成抽帧，确保视频分析面板有关键帧截图。
+
+---
+
+## 测试项清单
+
+### 测试项 1："插入" 按钮位于底部正确位置且不遮盖图片
+**测试步骤**：
+1. 将鼠标悬停到任意关键帧截图卡片上。
+2. 观察 "插入" 按钮的位置。
+
+**预期结果**：
+- 按钮位于卡片底部，**时间格式（如 `00:15`）**和 **"可拖拽"** 提示之间。
+- 按钮**不覆盖在图片上**，图片内容完全可见，无遮挡。
+
+---
+
+### 测试项 2："插入" 按钮为蓝色实体按钮样式
+**测试步骤**：
+1. 鼠标悬停到关键帧卡片，观察 "插入" 按钮的颜色和形状。
+
+**预期结果**：
+- 按钮为**蓝色实体胶囊按钮**（`bg-accent` 背景 + 白色文字 + 圆角 + 轻微阴影）。
+- 按钮颜色与底部 "可拖拽" 的蓝色一致，视觉上协调统一。
+- 不是纯文字链接样式。
+
+---
+
+### 测试项 3：显隐行为与 "可拖拽" 同步
+**测试步骤**：
+1. 鼠标移入关键帧卡片。
+2. 鼠标移出关键帧卡片。
+
+**预期结果**：
+- 移入时，"插入" 按钮与 "可拖拽" 文字**同时淡入显示**。
+- 移出时，"插入" 按钮与 "可拖拽" 文字**同时淡出隐藏**。
+
+---
+
+### 测试项 4：点击功能与事件冒泡正常
+**测试步骤**：
+1. 鼠标悬停到关键帧卡片，点击 **"插入"** 按钮。
+
+**预期结果**：
+- 编辑器中第一个空置的 `image-placeholder` 被自动填充（或弹出 `没有可插入图片的空位` 提示）。
+- 视频播放器时间不发生变化（未触发卡片跳转）。
+
+---
+
+### 测试项 5：构建与类型检查回归
+**测试步骤**：
+1. 在项目根目录执行：
+   ```bash
+   npm run lint
+   npm run build
+   ```
+
+**预期结果**：
+- `npm run lint` 无 TypeScript 编译错误。
+- `npm run build` 构建成功。
+
+---
+
+## 回归验证范围
+- [ ] 拖拽插入功能未被破坏。
+- [ ] 关键帧卡片的删除、手动徽章显示正常。
+- [ ] 编辑器保存、打印功能正常。
--- a/工程分析/经验记录.md
+++ b/工程分析/经验记录.md
@@ -62,3 +62,24 @@
 - 对于图片卡片上的核心操作按钮，优先考虑覆盖在图片中央或显著位置，比在底部小字中放置链接更符合用户直觉。
 - 同一卡片上的多个 hover 提示元素应保持显隐动画一致（`opacity-0 group-hover:opacity-100 transition-opacity`），但颜色上要有区分，避免用户混淆不同功能。
 - 使用 `absolute inset-0 m-auto w-fit h-fit` 是一种在 Tailwind 中不依赖 flex/grid 的居中技巧，适合在 `relative` 容器内居中不定宽高的元素。
+
+---
+
+## 记录 4：关键帧 "插入" 按钮位置微调（从图片中央移回底部）
+
+**A. 具体问题**
+用户反馈将 "插入" 按钮放在图片正中央会遮挡图片内容，希望移回卡片底部，但仍保留实体按钮样式和蓝色。
+
+**B. 产生问题原因**
+按钮以 `absolute` 层覆盖在图片中央时，确实会遮挡部分图片内容，对于医学影像类截图可能影响用户预览。
+
+**C. 解决问题方案**
+1. 将 "插入" 按钮从图片层的 absolute 覆盖层移回卡片底部的文字行，放置在 `timeFormatted` 与 "可拖拽" 之间。
+2. 按钮颜色恢复为蓝色（`bg-accent text-white`），与 "可拖拽" 蓝色保持一致，视觉上统一。
+3. 保留实体胶囊按钮样式：`px-2 py-0.5 rounded-full shadow-sm`，不再是纯文字链接。
+4. 显隐行为仍通过 `opacity-0 group-hover:opacity-100 transition-opacity` 与 "可拖拽" 同步。
+
+**D. 后续如何避免问题**
+- 对于图片/截图类卡片上的操作按钮，应优先考虑不遮挡核心图片内容的区域（如底部、角落），避免影响预览。
+- 在 UI 微调过程中，可以通过小步迭代快速验证用户意图，减少一次性大改导致的方向偏差。
+- 实体按钮比纯文字链接具有更高的可点击性和辨识度，在微小空间中也能提供良好的交互体验。
--- a/工程分析/需求分析-2026-04-16-17-21-58.md
+++ b/工程分析/需求分析-2026-04-16-17-21-58.md
@@ -0,0 +1,22 @@
+# 需求分析 — 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` 构建通过。