tmdb详情支持查看季度信息，集数信息

src/app/api/tmdb/episodes/route.ts

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/no-explicit-any, no-console */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+import { getAuthInfoFromCookie } from '@/lib/auth';
+import { getConfig } from '@/lib/config';
+import { HttpsProxyAgent } from 'https-proxy-agent';
+import nodeFetch from 'node-fetch';
+import { getNextApiKey } from '@/lib/tmdb.client';
+
+export const runtime = 'nodejs';
+
+/**
+ * GET /api/tmdb/episodes?id=xxx&season=xxx
+ * 获取电视剧季度的集数详情（带图片）
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const authInfo = getAuthInfoFromCookie(request);
+    if (!authInfo || !authInfo.username) {
+      return NextResponse.json({ error: '未授权' }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get('id');
+    const season = searchParams.get('season');
+
+    if (!id || !season) {
+      return NextResponse.json({ error: '缺少参数' }, { status: 400 });
+    }
+
+    const config = await getConfig();
+    const tmdbApiKey = config.SiteConfig.TMDBApiKey;
+    const tmdbProxy = config.SiteConfig.TMDBProxy;
+
+    if (!tmdbApiKey) {
+      return NextResponse.json({ error: 'TMDB API Key 未配置' }, { status: 400 });
+    }
+
+    const actualKey = getNextApiKey(tmdbApiKey);
+    if (!actualKey) {
+      return NextResponse.json({ error: 'TMDB API Key 无效' }, { status: 400 });
+    }
+
+    const url = `https://api.themoviedb.org/3/tv/${id}/season/${season}?api_key=${actualKey}&language=zh-CN`;
+
+    const fetchOptions: any = tmdbProxy
+      ? {
+          agent: new HttpsProxyAgent(tmdbProxy, {
+            timeout: 30000,
+            keepAlive: false,
+          }),
+          signal: AbortSignal.timeout(30000),
+        }
+      : {
+          signal: AbortSignal.timeout(15000),
+        };
+
+    const response = await nodeFetch(url, fetchOptions);
+
+    if (!response.ok) {
+      return NextResponse.json({ error: '获取失败' }, { status: response.status });
+    }
+
+    const data: any = await response.json();
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('获取集数详情失败:', error);
+    return NextResponse.json(
+      { error: '获取失败', details: (error as Error).message },
+      { status: 500 }
+    );
+  }
+}

src/components/DetailPanel.tsx

@@ -48,6 +48,18 @@ interface DetailData {
   tagline?: string;
   seasons?: number;
   overview?: string;
+  tmdbId?: number;
+  mediaType?: 'movie' | 'tv';
+  seasonNumber?: number;
+}
+
+interface Episode {
+  id: number;
+  name: string;
+  episode_number: number;
+  still_path: string | null;
+  overview: string;
+  air_date: string;
 }
 
 const DetailPanel: React.FC<DetailPanelProps> = ({
@@ -71,6 +83,11 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
   const [detailData, setDetailData] = useState<DetailData | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [seasonData, setSeasonData] = useState<{ seasons: any[]; episodes: Episode[] } | null>(null);
+  const [loadingSeasons, setLoadingSeasons] = useState(false);
+  const [expandedEpisodes, setExpandedEpisodes] = useState<Set<number>>(new Set());
+  const [selectedSeason, setSelectedSeason] = useState<number>(1);
+  const [seasonsLoaded, setSeasonsLoaded] = useState(false);
 
   // 确保组件在客户端挂载后才渲染 Portal
   useEffect(() => {
@@ -375,6 +392,9 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
               tagline: detailResult.tagline,
               seasons: detailResult.number_of_seasons,
               overview: detailResult.overview,
+              tmdbId: detailId,
+              mediaType: mediaType,
+              seasonNumber: extractedSeasonNumber,
             });
             return;
           }
@@ -394,6 +414,86 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
     fetchDetail();
   }, [isOpen, doubanId, bangumiId, isBangumi, tmdbId, title, type, seasonNumber, poster, cmsData, sourceId, source]);
 
+  // 异步获取季度和集数详情（仅TMDB）
+  useEffect(() => {
+    if (!detailData?.tmdbId || !detailData?.mediaType || detailData.mediaType !== 'tv' || seasonsLoaded) {
+      return;
+    }
+
+    const fetchSeasonData = async () => {
+      setLoadingSeasons(true);
+      try {
+        // 获取所有季度
+        const seasonsResponse = await fetch(`/api/tmdb/seasons?tvId=${detailData.tmdbId}`);
+        if (!seasonsResponse.ok) return;
+        const seasonsData = await seasonsResponse.json();
+
+        // 设置默认选中季度
+        const defaultSeason = detailData.seasonNumber || 1;
+        setSelectedSeason(defaultSeason);
+
+        // 获取默认季度的集数详情
+        const episodesResponse = await fetch(
+          `/api/tmdb/episodes?id=${detailData.tmdbId}&season=${defaultSeason}`
+        );
+        if (!episodesResponse.ok) return;
+        const episodesData = await episodesResponse.json();
+
+        setSeasonData({
+          seasons: seasonsData.seasons || [],
+          episodes: episodesData.episodes || [],
+        });
+        setSeasonsLoaded(true);
+      } catch (err) {
+        console.error('获取季度和集数详情失败:', err);
+      } finally {
+        setLoadingSeasons(false);
+      }
+    };
+
+    fetchSeasonData();
+  }, [detailData?.tmdbId, detailData?.mediaType, detailData?.seasonNumber, seasonsLoaded]);
+
+  // 切换季度时获取集数
+  const handleSeasonChange = async (seasonNumber: number) => {
+    if (!detailData?.tmdbId || selectedSeason === seasonNumber) return;
+
+    setSelectedSeason(seasonNumber);
+    setLoadingSeasons(true);
+    try {
+      const episodesResponse = await fetch(
+        `/api/tmdb/episodes?id=${detailData.tmdbId}&season=${seasonNumber}`
+      );
+      if (!episodesResponse.ok) return;
+      const episodesData = await episodesResponse.json();
+
+      // 从当前 seasonData 中查找季度信息
+      const season = seasonData?.seasons.find((s: any) => s.season_number === seasonNumber);
+
+      setSeasonData(prev => ({
+        seasons: prev?.seasons || [],
+        episodes: episodesData.episodes || [],
+      }));
+
+      // 更新季度元信息
+      setDetailData(prev => prev ? {
+        ...prev,
+        title: episodesData.name || season?.name || prev.title,
+        intro: episodesData.overview || season?.overview || prev.overview,
+        poster: season?.poster_path ? `https://image.tmdb.org/t/p/w500${season.poster_path}` : prev.poster,
+        releaseDate: episodesData.air_date || season?.air_date || prev.releaseDate,
+        year: episodesData.air_date?.substring(0, 4) || season?.air_date?.substring(0, 4) || prev.year,
+        episodesCount: episodesData.episodes?.length || season?.episode_count || prev.episodesCount,
+      } : null);
+
+      setExpandedEpisodes(new Set());
+    } catch (err) {
+      console.error('获取集数详情失败:', err);
+    } finally {
+      setLoadingSeasons(false);
+    }
+  };
+
   if (!isVisible || !mounted) return null;
 
   const content = (
@@ -600,6 +700,119 @@ const DetailPanel: React.FC<DetailPanelProps> = ({
                   </div>
                 )}
               </div>
+
+              {/* 季度和集数信息（仅TMDB电视剧） */}
+              {detailData.mediaType === 'tv' && (
+                <div className="mt-6">
+                  {loadingSeasons && (
+                    <div className="flex items-center justify-center py-4">
+                      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500"></div>
+                    </div>
+                  )}
+
+                  {!loadingSeasons && seasonData && (
+                    <>
+                      {/* 季度列表 */}
+                      {seasonData.seasons.length > 0 && (
+                        <div className="mb-6">
+                          <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
+                            季度
+                          </h4>
+                          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                            {seasonData.seasons.map((season: any) => (
+                              <div
+                                key={season.id}
+                                onClick={() => handleSeasonChange(season.season_number)}
+                                className={`flex items-center gap-2 p-2 rounded cursor-pointer transition-colors ${
+                                  selectedSeason === season.season_number
+                                    ? 'bg-green-100 dark:bg-green-900/30 ring-2 ring-green-500'
+                                    : 'bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700'
+                                }`}
+                              >
+                                {season.poster_path && (
+                                  <div className="relative w-12 h-16 rounded overflow-hidden bg-gray-200 dark:bg-gray-700 flex-shrink-0">
+                                    <Image
+                                      src={`https://image.tmdb.org/t/p/w92${season.poster_path}`}
+                                      alt={season.name}
+                                      fill
+                                      className="object-cover"
+                                    />
+                                  </div>
+                                )}
+                                <div className="flex-1 min-w-0">
+                                  <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                                    {season.name}
+                                  </p>
+                                  <p className="text-xs text-gray-500 dark:text-gray-400">
+                                    {season.episode_count} 集
+                                  </p>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      )}
+
+                      {/* 集数列表 */}
+                      {seasonData.episodes.length > 0 && (
+                        <div>
+                          <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
+                            {seasonData.seasons.find((s: any) => s.season_number === selectedSeason)?.name || `第${selectedSeason}季`}
+                          </h4>
+                          <div className="overflow-x-auto -mx-6 px-6">
+                            <div className="flex gap-3 pb-2">
+                              {seasonData.episodes.map((episode: Episode) => {
+                                const isExpanded = expandedEpisodes.has(episode.id);
+                                return (
+                                  <div
+                                    key={episode.id}
+                                    className="flex-shrink-0 w-64 p-3 rounded bg-gray-50 dark:bg-gray-800"
+                                  >
+                                    {episode.still_path && (
+                                      <div className="relative w-full h-36 rounded overflow-hidden bg-gray-200 dark:bg-gray-700 mb-2">
+                                        <Image
+                                          src={`https://image.tmdb.org/t/p/w300${episode.still_path}`}
+                                          alt={episode.name}
+                                          fill
+                                          className="object-cover"
+                                        />
+                                      </div>
+                                    )}
+                                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">
+                                      第{episode.episode_number}集: {episode.name}
+                                    </p>
+                                    {episode.overview && (
+                                      <p
+                                        onClick={() => {
+                                          const newExpanded = new Set(expandedEpisodes);
+                                          if (isExpanded) {
+                                            newExpanded.delete(episode.id);
+                                          } else {
+                                            newExpanded.add(episode.id);
+                                          }
+                                          setExpandedEpisodes(newExpanded);
+                                        }}
+                                        className={`text-xs text-gray-600 dark:text-gray-400 cursor-pointer ${isExpanded ? '' : 'line-clamp-3'}`}
+                                      >
+                                        {episode.overview}
+                                      </p>
+                                    )}
+                                    {episode.air_date && (
+                                      <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
+                                        {episode.air_date}
+                                      </p>
+                                    )}
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </>
+                  )}
+                </div>
+              )}
             </div>
           )}
         </div>