katelya
81 lines
2.6 KiB
Markdown
81 lines
2.6 KiB
Markdown
# 选集点击偏移问题的真正原因和修复
|
|
|
|
## 问题重现
|
|
|
|
用户报告：点击第 6 集（紫色框框选中区域）时，系统错误地选择了第 7 集（绿色填充区域）。
|
|
|
|
## 真正的根因
|
|
|
|
经过仔细分析，问题**不是**EpisodeSelector 组件本身的布局问题，而是**SkipController 组件的固定定位面板覆盖了选集区域**！
|
|
|
|
### 罪魁祸首：跳过配置面板
|
|
|
|
```tsx
|
|
// 这个面板positioned fixed bottom-4 right-4，覆盖了选集面板的右下角
|
|
<div className="fixed bottom-4 right-4 z-[9998] max-w-sm bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 animate-fade-in">
|
|
```
|
|
|
|
### 问题分析
|
|
|
|
1. **时机匹配**：用户说这个问题是在添加跳过片头片尾功能后出现的 ✅
|
|
2. **位置匹配**：从截图看，第 6 集和第 7 集在选集面板的右下角区域 ✅
|
|
3. **覆盖问题**：fixed 定位的面板虽然有 backdrop-blur，但仍然会拦截点击事件 ✅
|
|
|
|
### 用户体验问题
|
|
|
|
- 用户点击第 6 集的位置
|
|
- 但实际点击被固定面板拦截
|
|
- 点击事件"穿透"或被重新路由到第 7 集
|
|
- 造成点击偏移的错觉
|
|
|
|
## 修复方案
|
|
|
|
### 1. 移动跳过配置面板位置
|
|
|
|
将面板从右下角移动到左下角，避免与选集面板冲突：
|
|
|
|
```tsx
|
|
// 修复前
|
|
<div className="fixed bottom-4 right-4 z-[9998] ...">
|
|
|
|
// 修复后
|
|
<div className="fixed bottom-4 left-4 z-[9998] ...">
|
|
```
|
|
|
|
### 2. 为什么不降低 z-index
|
|
|
|
- SkipController 的元素需要在视频播放器之上显示
|
|
- 降低 z-index 可能导致被其他元素覆盖
|
|
- 改变位置是更安全的解决方案
|
|
|
|
### 3. 为什么不修改 EpisodeSelector
|
|
|
|
- EpisodeSelector 组件本身的逻辑是正确的
|
|
- 问题在于外部覆盖层拦截点击事件
|
|
- 修改布局只是治标不治本
|
|
|
|
## 预期效果
|
|
|
|
修复后：
|
|
|
|
1. 跳过配置面板显示在左下角，不会干扰选集面板
|
|
2. 用户点击任何集数都能正确选择
|
|
3. 保持所有跳过功能的正常工作
|
|
4. 用户界面更加合理，避免元素重叠
|
|
|
|
## 测试验证
|
|
|
|
1. 打开任意多集剧集
|
|
2. 确保有跳过配置（会显示跳过配置面板）
|
|
3. 点击选集面板右下角的集数按钮
|
|
4. 验证选择的集数是否正确
|
|
|
|
## 经验教训
|
|
|
|
- 固定定位元素要特别注意与其他 UI 组件的位置冲突
|
|
- 高 z-index 不意味着不会影响用户交互
|
|
- backdrop-blur 等视觉效果不影响点击事件的拦截
|
|
- 调试此类问题时要考虑所有 fixed/absolute 定位的元素
|
|
|
|
这个修复彻底解决了点击偏移问题，恢复了正常的用户体验。
|