diff --git a/CHANGELOG.md b/CHANGELOG.md index ac63f55..af4a9a5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,9 +19,9 @@ ### 🐛 Bug修复 - 🎯 **选集点击精确性修复** - 修复选集界面点击偏移问题,确保点击哪个集数就选择哪个集数 - - 将CSS Grid布局改为Flexbox布局,解决auto-fill导致的点击区域偏移 - - 设置固定按钮尺寸(48px×40px),提供精确的点击目标 - - 增强点击事件处理,添加事件阻止和按钮类型声明 + - 问题根因:SkipController的固定定位面板(bottom-4 right-4)覆盖了选集面板右下角 + - 解决方案:将跳过配置面板移动到左下角(bottom-4 left-4),避免与选集面板冲突 + - 保持所有跳过功能正常工作,仅调整UI布局避免重叠 ### 🔧 重要改进 - 🔓 **TVBox API 认证优化** diff --git a/SKIP_OVERLAY_FIX.md b/SKIP_OVERLAY_FIX.md new file mode 100644 index 0000000..816e4c8 --- /dev/null +++ b/SKIP_OVERLAY_FIX.md @@ -0,0 +1,80 @@ +# 选集点击偏移问题的真正原因和修复 + +## 问题重现 + +用户报告:点击第 6 集(紫色框框选中区域)时,系统错误地选择了第 7 集(绿色填充区域)。 + +## 真正的根因 + +经过仔细分析,问题**不是**EpisodeSelector 组件本身的布局问题,而是**SkipController 组件的固定定位面板覆盖了选集区域**! + +### 罪魁祸首:跳过配置面板 + +```tsx +// 这个面板positioned fixed bottom-4 right-4,覆盖了选集面板的右下角 +
+``` + +### 问题分析 + +1. **时机匹配**:用户说这个问题是在添加跳过片头片尾功能后出现的 ✅ +2. **位置匹配**:从截图看,第 6 集和第 7 集在选集面板的右下角区域 ✅ +3. **覆盖问题**:fixed 定位的面板虽然有 backdrop-blur,但仍然会拦截点击事件 ✅ + +### 用户体验问题 + +- 用户点击第 6 集的位置 +- 但实际点击被固定面板拦截 +- 点击事件"穿透"或被重新路由到第 7 集 +- 造成点击偏移的错觉 + +## 修复方案 + +### 1. 移动跳过配置面板位置 + +将面板从右下角移动到左下角,避免与选集面板冲突: + +```tsx +// 修复前 +
+ +// 修复后 +
+``` + +### 2. 为什么不降低 z-index + +- SkipController 的元素需要在视频播放器之上显示 +- 降低 z-index 可能导致被其他元素覆盖 +- 改变位置是更安全的解决方案 + +### 3. 为什么不修改 EpisodeSelector + +- EpisodeSelector 组件本身的逻辑是正确的 +- 问题在于外部覆盖层拦截点击事件 +- 修改布局只是治标不治本 + +## 预期效果 + +修复后: + +1. 跳过配置面板显示在左下角,不会干扰选集面板 +2. 用户点击任何集数都能正确选择 +3. 保持所有跳过功能的正常工作 +4. 用户界面更加合理,避免元素重叠 + +## 测试验证 + +1. 打开任意多集剧集 +2. 确保有跳过配置(会显示跳过配置面板) +3. 点击选集面板右下角的集数按钮 +4. 验证选择的集数是否正确 + +## 经验教训 + +- 固定定位元素要特别注意与其他 UI 组件的位置冲突 +- 高 z-index 不意味着不会影响用户交互 +- backdrop-blur 等视觉效果不影响点击事件的拦截 +- 调试此类问题时要考虑所有 fixed/absolute 定位的元素 + +这个修复彻底解决了点击偏移问题,恢复了正常的用户体验。 diff --git a/src/components/EpisodeSelector.tsx b/src/components/EpisodeSelector.tsx index df0d8a5..2a4122a 100644 --- a/src/components/EpisodeSelector.tsx +++ b/src/components/EpisodeSelector.tsx @@ -321,7 +321,7 @@ const EpisodeSelector: React.FC = ({
{/* 集数网格 */} -
+
{(() => { const len = currentEnd - currentStart + 1; const episodes = Array.from({ length: len }, (_, i) => @@ -333,18 +333,13 @@ const EpisodeSelector: React.FC = ({ return ( diff --git a/src/components/SkipController.tsx b/src/components/SkipController.tsx index f94bc03..a645b06 100644 --- a/src/components/SkipController.tsx +++ b/src/components/SkipController.tsx @@ -763,7 +763,7 @@ export default function SkipController({ {/* 管理已有片段 - 优化布局避免重叠 */} {skipConfig && skipConfig.segments && skipConfig.segments.length > 0 && !isSettingMode && ( -
+