优化

web/src/components/LayoutHeaderSections.tsx

@@ -239,9 +239,16 @@ function LayoutHeaderSearch() {
                     </div>
 
                     <div className="min-w-0 flex-1">
-                      <p className="truncate text-xs font-bold text-[var(--app-text)] group-hover:text-brand-500">
-                        {item.title}
-                      </p>
+                      <div className="flex items-center gap-1.5">
+                        <p className="truncate text-xs font-bold text-[var(--app-text)] group-hover:text-brand-500">
+                          {item.title}
+                        </p>
+                        {(item.display_library_name || item.library_name) && (
+                          <span className="shrink-0 text-[9px] px-1.5 py-0.5 rounded bg-[var(--app-panel-elevated)] border border-[var(--app-border)] text-[var(--app-muted)] max-w-[130px] truncate">
+                            {item.display_library_name || item.library_name}
+                          </span>
+                        )}
+                      </div>
                       <div className="flex items-center gap-2 text-[10px] text-[var(--app-muted)] mt-0.5">
                         {item.year > 0 && <span>{item.year}</span>}
                         {item.rating > 0 && (

web/src/pages/MediaDetailPage.tsx

@@ -9,6 +9,7 @@ import {
   MediaDetailMainContent,
   MediaDetailMissing,
 } from './MediaDetailPageSections'
+import { LibrarySeriesEpisodes } from './LibrarySeriesEpisodes'
 import { useMediaDetailPageState } from './useMediaDetailPageState'
 
 export function MediaDetailPage() {
@@ -31,6 +32,7 @@ export function MediaDetailPage() {
         media={media}
         isAdmin={role === 'admin'}
         favourite={detail.favourite}
+        playTargetId={detail.firstPlayableEpisode?.id}
         scrapeEpisodeArtwork={detail.scrapeEpisodeArtwork}
         onToggleFavourite={detail.toggleFavourite}
         onScrapeEpisodeArtworkChange={detail.setScrapeEpisodeArtwork}
@@ -42,6 +44,21 @@ export function MediaDetailPage() {
         onExportNFO={detail.exportNFO}
         onSoftDelete={detail.softDelete}
       />
+
+      {detail.hasEpisodes && (
+        <div className="relative z-10 px-6 pb-8 sm:px-10 space-y-6">
+          <div className="divider border-gray-200/60" />
+          <LibrarySeriesEpisodes
+            loading={detail.loadingEpisodes}
+            selectedEpisodes={detail.seasonGroups}
+            selectedSeason={detail.selectedSeason}
+            visibleEpisodes={detail.visibleEpisodes}
+            playbackFrom={`/media/${media.id}`}
+            onSeasonChange={detail.setSelectedSeason}
+          />
+        </div>
+      )}
+
       <MediaDetailDialogs
         media={media}
         manualScrapeOpen={detail.manualScrapeOpen}

web/src/pages/MediaDetailPageSections.tsx

@@ -18,6 +18,7 @@ interface MediaDetailPlaybackActionsProps {
   media: Media
   favourite: boolean
   onToggleFavourite: () => void
+  playTargetId?: string
 }
 
 interface MediaDetailMainContentProps extends MediaDetailPlaybackActionsProps {
@@ -93,17 +94,19 @@ export function MediaDetailPlaybackActions({
   media,
   favourite,
   onToggleFavourite,
+  playTargetId,
 }: MediaDetailPlaybackActionsProps) {
+  const targetId = playTargetId || media.id
   return (
     <div className="flex flex-wrap gap-3">
-      <Link to={`/play/${media.id}`} state={{ from: `/media/${media.id}` }} className="btn-primary px-6 py-3.5 shadow-sm">
+      <Link to={`/play/${targetId}`} state={{ from: `/media/${media.id}` }} className="btn-primary px-6 py-3.5 shadow-sm">
         <Play size={16} fill="currentColor" />
         <span>立即播放</span>
       </Link>
 
       {!isDirectStreamMedia(media) && (
         <Link
-        to={`/play/${media.id}?mode=hls`}
+        to={`/play/${targetId}?mode=hls`}
         state={{ from: `/media/${media.id}` }}
         className="btn-outline border-brand-500/30 hover:border-brand-500 text-[#c9954a] hover:bg-brand-50 px-5"
       >
@@ -112,7 +115,7 @@ export function MediaDetailPlaybackActions({
         </Link>
       )}
 
-      <ExternalPlayerButton mediaId={media.id} />
+      <ExternalPlayerButton mediaId={targetId} />
 
       <button
         onClick={onToggleFavourite}
@@ -134,6 +137,7 @@ export function MediaDetailMainContent({
   media,
   isAdmin,
   favourite,
+  playTargetId,
   scrapeEpisodeArtwork,
   onToggleFavourite,
   onScrapeEpisodeArtworkChange,
@@ -153,7 +157,12 @@ export function MediaDetailMainContent({
         <MediaDetailMetadata media={media} />
         <div className="divider border-gray-200/60" />
         <div className="flex flex-col gap-5">
-          <MediaDetailPlaybackActions media={media} favourite={favourite} onToggleFavourite={onToggleFavourite} />
+          <MediaDetailPlaybackActions
+            media={media}
+            favourite={favourite}
+            onToggleFavourite={onToggleFavourite}
+            playTargetId={playTargetId}
+          />
           {isAdmin && (
             <MediaDetailAdminPanel
               media={media}

web/src/pages/useMediaDetailPageState.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, type Dispatch, type SetStateAction } from 'react'
+import { useCallback, useEffect, useMemo, useState, type Dispatch, type SetStateAction } from 'react'
 import type { NavigateFunction } from 'react-router-dom'
 import toast from 'react-hot-toast'
 
@@ -20,6 +20,8 @@ interface MediaDetailRefreshParams {
   setMedia: Dispatch<SetStateAction<Media | null>>
   setFavourite: Dispatch<SetStateAction<boolean>>
   setLoading: Dispatch<SetStateAction<boolean>>
+  setEpisodes: Dispatch<SetStateAction<Media[]>>
+  setLoadingEpisodes: Dispatch<SetStateAction<boolean>>
 }
 
 interface MediaDetailActionsParams {
@@ -34,12 +36,23 @@ export function useMediaDetailPageState({ id, navigate }: MediaDetailPageStatePa
   const [media, setMedia] = useState<Media | null>(null)
   const [favourite, setFavourite] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [episodes, setEpisodes] = useState<Media[]>([])
+  const [loadingEpisodes, setLoadingEpisodes] = useState(false)
+  const [selectedSeason, setSelectedSeason] = useState<number | null>(null)
+
   const [manualScrapeOpen, setManualScrapeOpen] = useState(false)
   const [metadataEditOpen, setMetadataEditOpen] = useState(false)
   const [organizeOpen, setOrganizeOpen] = useState(false)
   const [scrapeEpisodeArtwork, setScrapeEpisodeArtwork] = useState(false)
 
-  const refresh = useMediaDetailRefresh({ id, setMedia, setFavourite, setLoading })
+  const refresh = useMediaDetailRefresh({
+    id,
+    setMedia,
+    setFavourite,
+    setLoading,
+    setEpisodes,
+    setLoadingEpisodes,
+  })
   const actions = useMediaDetailActions({
     media,
     scrapeEpisodeArtwork,
@@ -52,6 +65,41 @@ export function useMediaDetailPageState({ id, navigate }: MediaDetailPageStatePa
     refresh().catch(() => undefined)
   }, [refresh])
 
+  const seasonGroups = useMemo(() => {
+    if (episodes.length === 0) return []
+    const seasons = new Map<number, Media[]>()
+    for (const ep of episodes) {
+      const s = ep.episode_num > 0 ? (ep.season_num ?? 0) : (ep.season_num || 1)
+      if (!seasons.has(s)) seasons.set(s, [])
+      seasons.get(s)!.push(ep)
+    }
+    for (const [, list] of seasons) {
+      list.sort((a, b) => (a.episode_num || 0) - (b.episode_num || 0))
+    }
+    return Array.from(seasons.entries())
+      .sort(([a], [b]) => a - b)
+      .map(([season, list]) => ({ season, episodes: list }))
+  }, [episodes])
+
+  const visibleEpisodes = useMemo(() => {
+    if (selectedSeason == null) return seasonGroups[0]?.episodes ?? []
+    return seasonGroups.find((s) => s.season === selectedSeason)?.episodes ?? []
+  }, [seasonGroups, selectedSeason])
+
+  const hasEpisodes = useMemo(() => {
+    if (episodes.length > 1) return true
+    if (episodes.length === 1 && media) {
+      // 只有单条时，如果明确是集（有 episode_num > 0）或 ID 与自身不同，则按剧集渲染
+      return episodes[0].episode_num > 0 || episodes[0].id !== media.id
+    }
+    return false
+  }, [episodes, media])
+
+  const firstPlayableEpisode = useMemo(() => {
+    if (episodes.length === 0) return null
+    return (visibleEpisodes.length > 0 ? visibleEpisodes[0] : episodes[0]) || null
+  }, [episodes, visibleEpisodes])
+
   const handleMetadataSaved = useCallback(async (next: Media) => {
     setMedia(next)
     await refresh()
@@ -61,6 +109,14 @@ export function useMediaDetailPageState({ id, navigate }: MediaDetailPageStatePa
     media,
     favourite,
     loading,
+    episodes,
+    loadingEpisodes,
+    seasonGroups,
+    selectedSeason,
+    visibleEpisodes,
+    hasEpisodes,
+    firstPlayableEpisode,
+    setSelectedSeason,
     manualScrapeOpen,
     metadataEditOpen,
     organizeOpen,
@@ -80,19 +136,31 @@ function useMediaDetailRefresh({
   setMedia,
   setFavourite,
   setLoading,
+  setEpisodes,
+  setLoadingEpisodes,
 }: MediaDetailRefreshParams): () => Promise<void> {
   return useCallback(async () => {
     if (!id) return
     setLoading(true)
+    setLoadingEpisodes(true)
     try {
       const nextMedia = await mediaAPI.get(id)
       setMedia(nextMedia)
       const favourites = await playbackAPI.listFavourites().catch(() => [])
       setFavourite(favourites.some((item) => item.id === nextMedia.id))
+      // 异步加载分集列表
+      try {
+        const epRes = await mediaAPI.getEpisodes(id)
+        setEpisodes(epRes.items ?? [])
+      } catch {
+        setEpisodes([])
+      } finally {
+        setLoadingEpisodes(false)
+      }
     } finally {
       setLoading(false)
     }
-  }, [id, setFavourite, setLoading, setMedia])
+  }, [id, setFavourite, setLoading, setMedia, setEpisodes, setLoadingEpisodes])
 }
 
 function useMediaDetailActions({