拆镜复刻跳转修改

video-gen-app/src/components/VideoTrimPicker.tsx

@@ -552,23 +552,27 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
                   <Text style={{ marginLeft: 8, color: '#64748b' }}>正在抽取每秒帧...</Text>
                 </div>
               ) : frames.length > 0 ? (
-                frames.map((frame) => (
-                  <button
-                    key={frame.second}
-                    type="button"
-                    onClick={() => handleFrameClick(frame.second)}
-                    title={`${frame.second}s${frame.fallback ? `，实际取帧 ${frame.captureSecond?.toFixed(1)}s` : ''}`}
-                    style={{
-                      minWidth: 0,
-                      height: 86,
-                      border: 'none',
-                      padding: 0,
-                      background: 'transparent',
-                      overflow: 'hidden',
-                      cursor: disabledByDuration ? 'not-allowed' : 'pointer',
-                      position: 'relative',
-                    }}
-                  >
+                frames.map((frame) => {
+                  const isSelected = frame.second >= range[0] && frame.second < range[1];
+                  return (
+                    <button
+                      key={frame.second}
+                      type="button"
+                      onClick={() => handleFrameClick(frame.second)}
+                      title={`${frame.second}s${frame.fallback ? `，实际取帧 ${frame.captureSecond?.toFixed(1)}s` : ''}`}
+                      style={{
+                        minWidth: 0,
+                        height: 86,
+                        borderTop: isSelected ? '5px solid #6366f1' : 'none',
+                        borderBottom: isSelected ? '5px solid #6366f1' : 'none',
+                        padding: 0,
+                        background: 'transparent',
+                        overflow: 'hidden',
+                        cursor: disabledByDuration ? 'not-allowed' : 'pointer',
+                        position: 'relative',
+                        // borderRadius: 4,
+                      }}
+                    >
                     {frame.status === 'success' && frame.image ? (
                       <img src={frame.image} alt={`${frame.second}s`} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                     ) : frame.status === 'loading' ? (
@@ -594,7 +598,8 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
                       {frame.second}s
                     </span>
                   </button>
-                ))
+                  );
+                })
               ) : (
                 <div style={{ gridColumn: '1 / -1', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#64748b' }}>
                   暂无帧预览，请确认视频是否加载完成
@@ -603,7 +608,7 @@ const VideoTrimPicker: React.FC<VideoTrimPickerProps> = ({
 
             </div>
 
-            <div style={{ position: 'absolute', top: -6, left: 10, right: 0, padding: '0 8px 0' }}>
+            <div style={{ position: 'absolute', top: -6, left: 6, right: 0,  }}>
               <Slider
                 range
                 min={0}