fix: 修复选集点击偏移问题，调整跳过配置面板位置以避免覆盖

CHANGELOG.md

@@ -19,9 +19,9 @@
 ### 🐛 Bug修复
 - 🎯 **选集点击精确性修复**
   - 修复选集界面点击偏移问题，确保点击哪个集数就选择哪个集数
-  - 将CSS Grid布局改为Flexbox布局，解决auto-fill导致的点击区域偏移
+  - 问题根因：SkipController的固定定位面板(bottom-4 right-4)覆盖了选集面板右下角
-  - 设置固定按钮尺寸(48px×40px)，提供精确的点击目标
+  - 解决方案：将跳过配置面板移动到左下角(bottom-4 left-4)，避免与选集面板冲突
-  - 增强点击事件处理，添加事件阻止和按钮类型声明
+  - 保持所有跳过功能正常工作，仅调整UI布局避免重叠
 
 ### 🔧 重要改进
 - 🔓 **TVBox API 认证优化**

SKIP_OVERLAY_FIX.md

@@ -0,0 +1,80 @@
+# 选集点击偏移问题的真正原因和修复
+
+## 问题重现
+
+用户报告：点击第 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 定位的元素
+
+这个修复彻底解决了点击偏移问题，恢复了正常的用户体验。

src/components/EpisodeSelector.tsx

@@ -321,7 +321,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
           </div>
 
           {/* 集数网格 */}
-          <div className='flex flex-wrap justify-start gap-3 overflow-y-auto h-full pb-4'>
+          <div className='grid grid-cols-[repeat(auto-fill,minmax(40px,1fr))] auto-rows-[40px] gap-x-3 gap-y-3 overflow-y-auto h-full pb-4'>
             {(() => {
               const len = currentEnd - currentStart + 1;
               const episodes = Array.from({ length: len }, (_, i) =>
@@ -333,18 +333,13 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
               return (
                 <button
                   key={episodeNumber}
-                  onClick={(e) => {
+                  onClick={() => handleEpisodeClick(episodeNumber)}
-                    e.preventDefault();
+                  className={`h-10 flex items-center justify-center text-sm font-medium rounded-md transition-all duration-200
-                    e.stopPropagation();
-                    handleEpisodeClick(episodeNumber);
-                  }}
-                  className={`w-12 h-10 flex items-center justify-center text-sm font-medium rounded-md transition-all duration-200 cursor-pointer border-0 outline-none focus:ring-2 focus:ring-green-400 flex-shrink-0
                     ${
                       isActive
                         ? 'bg-green-500 text-white shadow-lg shadow-green-500/25 dark:bg-green-600'
                         : 'bg-gray-200 text-gray-700 hover:bg-gray-300 hover:scale-105 dark:bg-white/10 dark:text-gray-300 dark:hover:bg-white/20'
                     }`.trim()}
-                  type="button"
                 >
                   {episodeNumber}
                 </button>

src/components/SkipController.tsx

@@ -763,7 +763,7 @@ export default function SkipController({
 
       {/* 管理已有片段 - 优化布局避免重叠 */}
       {skipConfig && skipConfig.segments && skipConfig.segments.length > 0 && !isSettingMode && (
-        <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">
+        <div className="fixed bottom-4 left-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">
           <div className="p-3">
             <h4 className="font-medium mb-2 text-gray-900 dark:text-gray-100 text-sm flex items-center">
               <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">