From 0beffc2fbd4d5275602cf8f3934e3c8c68f05e43 Mon Sep 17 00:00:00 2001
From: mtvpls <mtvpls@redaaa.ip-ddns.com>
Date: Thu, 26 Feb 2026 12:24:02 +0800
Subject: [PATCH] =?UTF-8?q?detailpanel=E9=80=89=E9=9B=86=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E8=B7=9F=E9=9A=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/play/page.tsx          |  1 +
 src/components/DetailPanel.tsx | 36 ++++++++++++++++++++++++++++++++--
 src/components/VideoCard.tsx   |  1 +
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx
index d29b654..b22a73b 100644
--- a/src/app/play/page.tsx
+++ b/src/app/play/page.tsx
@@ -8409,6 +8409,7 @@ function PlayPageClient() {
               : undefined
           }
           type={detail.type_name === '电影' ? 'movie' : 'tv'}
+          currentEpisode={currentEpisodeIndex + 1}
           cmsData={
             // 非特殊源使用 cms 数据
             // 但如果有豆瓣ID且不为0，则不传入cmsData，优先使用豆瓣数据
diff --git a/src/components/DetailPanel.tsx b/src/components/DetailPanel.tsx
index 2fd0915..95b0c20 100644
--- a/src/components/DetailPanel.tsx
+++ b/src/components/DetailPanel.tsx
@@ -21,6 +21,7 @@ interface DetailPanelProps {
   tmdbId?: number;
   type?: 'movie' | 'tv';
   seasonNumber?: number;
+  currentEpisode?: number; // 当前集数（从1开始）
   cmsData?: {
     desc?: string;
     episodes?: string[];
@@ -78,6 +79,7 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
   tmdbId,
   type = 'movie',
   seasonNumber,
+  currentEpisode,
   cmsData,
   sourceId,
   source,
@@ -651,6 +653,30 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
     fetchSeasonData();
   }, [detailData?.tmdbId, detailData?.mediaType, detailData?.seasonNumber, seasonsLoaded]);
 
+  // 自动滚动到当前集数
+  useEffect(() => {
+    if (!currentEpisode || !seasonData?.episodes || !episodesScrollRef.current || currentSource !== 'tmdb') {
+      return;
+    }
+
+    // 等待 DOM 更新后再滚动
+    const timer = setTimeout(() => {
+      const episodeElement = document.getElementById(`episode-${currentEpisode}`);
+      if (episodeElement && episodesScrollRef.current) {
+        // 计算滚动位置，使当前集数居中显示
+        const container = episodesScrollRef.current;
+        const elementLeft = episodeElement.offsetLeft;
+        const elementWidth = episodeElement.offsetWidth;
+        const containerWidth = container.offsetWidth;
+        const scrollLeft = elementLeft - (containerWidth / 2) + (elementWidth / 2);
+
+        container.scrollLeft = scrollLeft;
+      }
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [currentEpisode, seasonData?.episodes, currentSource]);
+
   // 异步获取演职人员信息（仅TMDB）
   useEffect(() => {
     if (!detailData?.tmdbId || !detailData?.mediaType || currentSource !== 'tmdb') {
@@ -1212,13 +1238,19 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                               scrollBehavior: isDragging ? 'auto' : 'smooth'
                             }}
                           >
-                            <div className="flex gap-3 pb-2">
+                            <div className="flex gap-3 py-2">
                               {seasonData.episodes.map((episode: Episode) => {
                                 const isExpanded = expandedEpisodes.has(episode.id);
+                                const isCurrentEpisode = currentEpisode === episode.episode_number;
                                 return (
                                   <div
                                     key={episode.id}
-                                    className="flex-shrink-0 w-64 p-3 rounded bg-gray-50 dark:bg-gray-800"
+                                    id={`episode-${episode.episode_number}`}
+                                    className={`flex-shrink-0 w-64 p-3 rounded ${
+                                      isCurrentEpisode
+                                        ? 'bg-green-100 dark:bg-green-900/30 ring-2 ring-green-500'
+                                        : 'bg-gray-50 dark:bg-gray-800'
+                                    }`}
                                     style={{ pointerEvents: isDragging ? 'none' : 'auto' }}
                                   >
                                     {episode.still_path && (
diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx
index 655f4c2..368a94b 100644
--- a/src/components/VideoCard.tsx
+++ b/src/components/VideoCard.tsx
@@ -1522,6 +1522,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
           tmdbId={tmdb_id}
           type={actualSearchType as 'movie' | 'tv'}
           seasonNumber={seasonNumber}
+          currentEpisode={currentEpisode}
           cmsData={cmsData}
           sourceId={id}
           source={source}