chore: bump version to 0.0.56 [skip ci]

VERSION

@@ -1 +1 @@
-0.0.53
+0.0.56

web/src/components/ExternalPlayerButton.tsx

@@ -42,6 +42,7 @@ export function ExternalPlayerButton({
     <>
       <button
         type="button"
+        title={compact ? '使用外部播放器播放' : undefined}
         disabled={loading}
         onClick={(event) => {
           event.preventDefault()
@@ -50,7 +51,7 @@ export function ExternalPlayerButton({
         }}
         className={
           compact
-            ? 'rounded-lg border border-primary-400/35 bg-white px-2 py-1 text-xs font-semibold text-brand-500 hover:bg-primary-400/10 disabled:opacity-50'
+            ? 'shrink-0 inline-flex items-center rounded-lg border border-primary-400/35 bg-white px-2 py-1 text-xs font-semibold text-brand-500 hover:bg-primary-400/10 disabled:opacity-50 transition-colors whitespace-nowrap'
             : 'btn-outline border-brand-500/30 px-5 text-[#c9954a] hover:border-brand-500 hover:bg-brand-50'
         }
       >

web/src/components/MediaSortDropdown.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from 'react'
+import { ArrowDown, ArrowUp, ArrowUpDown, Check, Shuffle } from 'lucide-react'
+
+import {
+  SORT_OPTIONS,
+  type SortField,
+  type SortOption,
+  type SortOrder,
+} from '../utils/mediaSort'
+
+type MediaSortDropdownProps = {
+  value: SortField
+  order: SortOrder
+  onChange: (field: SortField, order: SortOrder) => void
+  onReshuffle?: () => void
+  className?: string
+}
+
+export function MediaSortDropdown({
+  value,
+  order,
+  onChange,
+  onReshuffle,
+  className = '',
+}: MediaSortDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const currentOption = SORT_OPTIONS.find((opt) => opt.id === value) ?? SORT_OPTIONS[0]
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  const handleSelect = (option: SortOption) => {
+    if (option.id === 'random') {
+      if (value === 'random') {
+        onReshuffle?.()
+      } else {
+        onChange('random', 'desc')
+      }
+      setIsOpen(false)
+      return
+    }
+
+    if (value === option.id) {
+      // 再次点击相同项：切换升降序
+      const nextOrder: SortOrder = order === 'asc' ? 'desc' : 'asc'
+      onChange(option.id, nextOrder)
+    } else {
+      // 点击新项：应用默认排序方向
+      onChange(option.id, option.defaultOrder)
+    }
+    setIsOpen(false)
+  }
+
+  return (
+    <div className={`relative inline-block text-left ${className}`} ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen((prev) => !prev)}
+        className="inline-flex h-9 items-center gap-1.5 rounded-xl border border-sand-200 bg-white/90 px-3 py-1.5 text-xs font-semibold text-ink-600 shadow-sm transition-all hover:border-brand-300 hover:bg-brand-50/50 hover:text-brand-700"
+        title="更改排序方式"
+      >
+        <ArrowUpDown size={14} className="text-sand-500" />
+        <span>排序: {currentOption.label}</span>
+        {value === 'random' ? (
+          <Shuffle size={12} className="text-brand-600" />
+        ) : order === 'asc' ? (
+          <ArrowUp size={13} className="text-brand-600 font-bold" />
+        ) : (
+          <ArrowDown size={13} className="text-brand-600 font-bold" />
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 z-50 mt-1.5 w-52 origin-top-right rounded-2xl border border-sand-200/80 bg-white/95 p-1.5 shadow-xl backdrop-blur-md transition-all animate-in fade-in-0 zoom-in-95">
+          <div className="px-2.5 py-1.5 text-[11px] font-bold text-sand-500 border-b border-sand-100">
+            排序方式
+          </div>
+          <div className="max-h-80 overflow-y-auto py-1 space-y-0.5">
+            {SORT_OPTIONS.map((option) => {
+              const isSelected = value === option.id
+              return (
+                <button
+                  key={option.id}
+                  type="button"
+                  onClick={() => handleSelect(option)}
+                  className={`flex w-full items-center justify-between rounded-xl px-3 py-2 text-xs font-medium transition-colors ${
+                    isSelected
+                      ? 'bg-brand-50 text-brand-700 font-semibold'
+                      : 'text-ink-600 hover:bg-sand-50 hover:text-brand-600'
+                  }`}
+                >
+                  <div className="flex items-center gap-2">
+                    {isSelected && <Check size={13} className="text-brand-600" />}
+                    <span className={isSelected ? '' : 'pl-5'}>{option.label}</span>
+                  </div>
+                  {isSelected && (
+                    <div className="flex items-center text-brand-600">
+                      {option.id === 'random' ? (
+                        <Shuffle size={13} />
+                      ) : order === 'asc' ? (
+                        <ArrowUp size={14} className="stroke-[2.5]" />
+                      ) : (
+                        <ArrowDown size={14} className="stroke-[2.5]" />
+                      )}
+                    </div>
+                  )}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

web/src/pages/LibraryPage.tsx

@@ -1,10 +1,17 @@
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useLocation, useParams, useSearchParams } from 'react-router-dom'
 import { motion } from 'framer-motion'
 
+import { historyAPI } from '../api/history'
 import type { Media } from '../types'
 import { useAuthStore } from '../stores/auth'
 import type { SeriesCard } from '../utils/groupSeries'
+import {
+  sortMediaList,
+  sortSeriesList,
+  type SortField,
+  type SortOrder,
+} from '../utils/mediaSort'
 import { LibraryPageDialogs } from './LibraryPageDialogs'
 import { LibraryPageHeader } from './LibraryPageHeader'
 import { LibraryMediaSections } from './LibraryMediaSections'
@@ -25,6 +32,53 @@ export function LibraryPage() {
   const [seriesMetadataEditOpen, setSeriesMetadataEditOpen] = useState(false)
   const [manualMovie, setManualMovie] = useState<Media | null>(null)
 
+  // 排序状态（支持按库记忆）
+  const [sortField, setSortField] = useState<SortField>(() => {
+    const saved = localStorage.getItem(`mmtl_lib_sort_field_${id}`) || localStorage.getItem('mmtl_lib_sort_field')
+    return (saved as SortField) || 'title'
+  })
+  const [sortOrder, setSortOrder] = useState<SortOrder>(() => {
+    const saved = localStorage.getItem(`mmtl_lib_sort_order_${id}`) || localStorage.getItem('mmtl_lib_sort_order')
+    return (saved as SortOrder) || 'asc'
+  })
+  const [randomSeed, setRandomSeed] = useState(() => Date.now())
+  const [historyMap, setHistoryMap] = useState<Map<string, string>>(new Map())
+
+  useEffect(() => {
+    historyAPI
+      .list(1000)
+      .then((historyItems) => {
+        const map = new Map<string, string>()
+        for (const item of historyItems ?? []) {
+          if (item.media_id && item.watched_at) {
+            if (!map.has(item.media_id) || new Date(item.watched_at) > new Date(map.get(item.media_id)!)) {
+              map.set(item.media_id, item.watched_at)
+            }
+          }
+        }
+        setHistoryMap(map)
+      })
+      .catch(() => {})
+  }, [])
+
+  const handleSortChange = (field: SortField, order: SortOrder) => {
+    setSortField(field)
+    setSortOrder(order)
+    if (id) {
+      localStorage.setItem(`mmtl_lib_sort_field_${id}`, field)
+      localStorage.setItem(`mmtl_lib_sort_order_${id}`, order)
+    }
+    localStorage.setItem('mmtl_lib_sort_field', field)
+    localStorage.setItem('mmtl_lib_sort_order', order)
+    if (field === 'random') {
+      setRandomSeed(Date.now())
+    }
+  }
+
+  const handleReshuffle = () => {
+    setRandomSeed(Date.now())
+  }
+
   // 剧集模式：选中某个剧集后展开详情
   const [selectedSeries, setSelectedSeries] = useState<SeriesCard | null>(null)
   const [selectedSeason, setSelectedSeason] = useState<number | null>(null)
@@ -43,6 +97,14 @@ export function LibraryPage() {
     reloadCurrentLibrary,
   } = useLibraryData(id, selectedSeries)
 
+  const sortedItems = useMemo(() => {
+    return sortMediaList(items, sortField, sortOrder, randomSeed, historyMap)
+  }, [items, sortField, sortOrder, randomSeed, historyMap])
+
+  const sortedSeriesCards = useMemo(() => {
+    return sortSeriesList(seriesCards, sortField, sortOrder, randomSeed, historyMap)
+  }, [seriesCards, sortField, sortOrder, randomSeed, historyMap])
+
   const {
     scanning,
     scanProgress,
@@ -66,7 +128,7 @@ export function LibraryPage() {
     isSeriesLibrary,
     isSeries,
     loading,
-    seriesCards,
+    seriesCards: sortedSeriesCards,
     searchParams,
     setSearchParams,
     selectedSeries,
@@ -116,7 +178,7 @@ export function LibraryPage() {
       {!selectedSeries && (
         <LibraryPageHeader
           library={library}
-          itemCount={isSeries ? seriesCards.length : total}
+          itemCount={isSeries ? sortedSeriesCards.length : total}
           loadingAllText={loadingAllText}
           scanProgress={scanProgress}
           isAdmin={role === 'admin'}
@@ -124,6 +186,10 @@ export function LibraryPage() {
           scanning={scanning}
           scraping={scraping}
           repairing={repairing}
+          sortField={sortField}
+          sortOrder={sortOrder}
+          onSortChange={handleSortChange}
+          onReshuffle={handleReshuffle}
           onScrapeEpisodeArtworkChange={setScrapeEpisodeArtwork}
           onScan={handleScan}
           onScrape={() => setScrapeDialogOpen(true)}
@@ -133,8 +199,8 @@ export function LibraryPage() {
 
       <LibraryMediaSections
         isSeries={isSeries}
-        items={items}
-        seriesCards={seriesCards}
+        items={sortedItems}
+        seriesCards={sortedSeriesCards}
         selectedSeries={selectedSeries}
         loading={loading}
         movieActions={movieActions}

web/src/pages/LibraryPageHeader.tsx

@@ -1,5 +1,7 @@
 import type { Library } from '../types'
 import { EpisodeArtworkToggle } from '../components/EpisodeArtworkToggle'
+import { MediaSortDropdown } from '../components/MediaSortDropdown'
+import type { SortField, SortOrder } from '../utils/mediaSort'
 import { libraryDisplayPath } from './libraryDisplayModel'
 
 type LibraryPageHeaderProps = {
@@ -12,6 +14,10 @@ type LibraryPageHeaderProps = {
   scanning: boolean
   scraping: boolean
   repairing: boolean
+  sortField: SortField
+  sortOrder: SortOrder
+  onSortChange: (field: SortField, order: SortOrder) => void
+  onReshuffle: () => void
   onScrapeEpisodeArtworkChange: (checked: boolean) => void
   onScan: () => void
   onScrape: () => void
@@ -28,6 +34,10 @@ export function LibraryPageHeader({
   scanning,
   scraping,
   repairing,
+  sortField,
+  sortOrder,
+  onSortChange,
+  onReshuffle,
   onScrapeEpisodeArtworkChange,
   onScan,
   onScrape,
@@ -46,30 +56,38 @@ export function LibraryPageHeader({
         {loadingAllText && <p className="mt-1 text-xs text-sand-500">{loadingAllText}</p>}
         {scanProgress && <p className="mt-1 text-xs text-brand-500">{scanProgress}</p>}
       </div>
-      {isAdmin && (
-        <div className="flex flex-wrap items-center gap-2">
-          <EpisodeArtworkToggle
-            checked={scrapeEpisodeArtwork}
-            onChange={onScrapeEpisodeArtworkChange}
-            title="关闭后仍会获取主海报和每集文字元数据，只跳过每集图片"
-            className="h-10"
-          />
-          <button onClick={onScan} disabled={scanning} className="btn-outline">
-            {scanning ? '扫描中…' : '扫描媒体库'}
-          </button>
-          <button onClick={onScrape} disabled={scraping} className="btn-outline" title="对整个媒体库执行刮削元数据">
-            {scraping ? '刮削中…' : '整库刮削元数据'}
-          </button>
-          <button
-            onClick={onRepairRescrape}
-            disabled={repairing}
-            className="btn-outline"
-            title="回填本库占位符外部 ID 并重刮，修正空 ID / 拆集问题"
-          >
-            {repairing ? '修复中…' : '修复+重刮整库'}
-          </button>
-        </div>
-      )}
+      <div className="flex flex-wrap items-center gap-2">
+        <MediaSortDropdown
+          value={sortField}
+          order={sortOrder}
+          onChange={onSortChange}
+          onReshuffle={onReshuffle}
+        />
+        {isAdmin && (
+          <>
+            <EpisodeArtworkToggle
+              checked={scrapeEpisodeArtwork}
+              onChange={onScrapeEpisodeArtworkChange}
+              title="关闭后仍会获取主海报和每集文字元数据，只跳过每集图片"
+              className="h-9"
+            />
+            <button onClick={onScan} disabled={scanning} className="btn-outline">
+              {scanning ? '扫描中…' : '扫描媒体库'}
+            </button>
+            <button onClick={onScrape} disabled={scraping} className="btn-outline" title="对整个媒体库执行刮削元数据">
+              {scraping ? '刮削中…' : '整库刮削元数据'}
+            </button>
+            <button
+              onClick={onRepairRescrape}
+              disabled={repairing}
+              className="btn-outline"
+              title="回填本库占位符外部 ID 并重刮，修正空 ID / 拆集问题"
+            >
+              {repairing ? '修复中…' : '修复+重刮整库'}
+            </button>
+          </>
+        )}
+      </div>
     </div>
   )
 }

web/src/pages/LibrarySeriesEpisodes.tsx

@@ -62,40 +62,53 @@ export function LibrarySeriesEpisodes({
         <h3 className="mb-3 font-display text-lg font-semibold text-ink-600">
           {displaySeason === 0 ? '特别篇' : `第 ${displaySeason} 季`}
         </h3>
-        <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
-          {visibleEpisodes.map((ep) => (
-            <div
-              key={ep.id}
-              className="group flex items-center gap-3 rounded-xl border border-sand-200 bg-white p-3 shadow-card transition-all hover:border-brand-300 hover:shadow-card-hover"
-            >
-              <Link to={`/play/${ep.id}`} state={{ from: playbackFrom }} className="flex min-w-0 flex-1 items-center gap-3">
-                <div className="flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-brand-50 text-brand-600 font-semibold text-sm">
-                  {ep.backdrop_url || ep.poster_url ? (
-                    <img
-                      src={imageURL(ep.backdrop_url || ep.poster_url || '', ep.updated_at)}
-                      alt=""
-                      className="h-full w-full object-cover"
-                      referrerPolicy="no-referrer"
-                    />
-                  ) : (
-                    ep.episode_num || '—'
-                  )}
-                </div>
-                <div className="min-w-0 flex-1">
-                  <p className="truncate text-sm font-medium text-ink-600">
-                    {episodeDisplayTitle(ep, visibleEpisodes)}
-                  </p>
-                  <p className="text-xs text-sand-500">
-                    {ep.duration_sec > 0
-                      ? `${Math.floor(ep.duration_sec / 60)} 分钟`
-                      : formatSize(ep.size_bytes)}
-                  </p>
-                </div>
-                <Play size={14} className="shrink-0 text-gray-500 opacity-0 transition-opacity group-hover:opacity-100 group-hover:text-brand-500" />
-              </Link>
-              <ExternalPlayerButton mediaId={ep.id} label="外部" compact />
-            </div>
-          ))}
+        <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+          {visibleEpisodes.map((ep) => {
+            const displayTitle = episodeDisplayTitle(ep, visibleEpisodes)
+            return (
+              <div
+                key={ep.id}
+                className="group flex items-center justify-between gap-3 rounded-xl border border-sand-200 bg-white p-2.5 shadow-card transition-all hover:border-brand-300 hover:shadow-card-hover"
+              >
+                <Link to={`/play/${ep.id}`} state={{ from: playbackFrom }} className="flex min-w-0 flex-1 items-center gap-3">
+                  <div
+                    className="relative flex h-11 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-brand-50/70 border border-sand-200/60"
+                    title={displayTitle}
+                  >
+                    {ep.backdrop_url || ep.poster_url ? (
+                      <img
+                        src={imageURL(ep.backdrop_url || ep.poster_url || '', ep.updated_at)}
+                        alt=""
+                        className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                        referrerPolicy="no-referrer"
+                      />
+                    ) : (
+                      <span className="text-brand-600 font-bold text-sm">{ep.episode_num || '—'}</span>
+                    )}
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/25 opacity-0 transition-opacity duration-200 group-hover:opacity-100">
+                      <Play size={15} className="fill-white text-white drop-shadow-sm" />
+                    </div>
+                    {ep.episode_num > 0 && (
+                      <span className="absolute bottom-0 right-0 rounded-tl bg-black/75 px-1 py-0.5 text-[9px] font-bold leading-none text-white backdrop-blur-[2px]">
+                        {ep.episode_num}
+                      </span>
+                    )}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm font-medium text-ink-600 transition-colors group-hover:text-brand-600" title={displayTitle}>
+                      {displayTitle}
+                    </p>
+                    <p className="text-xs text-sand-500 whitespace-nowrap">
+                      {ep.duration_sec > 0
+                        ? `${Math.floor(ep.duration_sec / 60)} 分钟`
+                        : formatSize(ep.size_bytes)}
+                    </p>
+                  </div>
+                </Link>
+                <ExternalPlayerButton mediaId={ep.id} label="外部" compact />
+              </div>
+            )
+          })}
         </div>
       </div>
     </>
@@ -103,17 +116,29 @@ export function LibrarySeriesEpisodes({
 }
 
 function episodeDisplayTitle(ep: Media, siblings: Media[]): string {
-  const title = ep.episode_title?.trim()
-  if (title && !looksLikeSeriesTitle(ep, title, siblings)) {
-    return title
+  let mainTitle = ''
+  const epTitle = ep.episode_title?.trim()
+  if (epTitle && !looksLikeSeriesTitle(ep, epTitle, siblings)) {
+    mainTitle = epTitle
+  } else {
+    const mediaTitle = ep.title?.trim()
+    if (mediaTitle && !looksLikeSeriesTitle(ep, mediaTitle, siblings)) {
+      mainTitle = mediaTitle
+    }
   }
 
-  const mediaTitle = ep.title?.trim()
-  if (mediaTitle && !looksLikeSeriesTitle(ep, mediaTitle, siblings)) {
-    return mediaTitle
+  if (ep.episode_num > 0) {
+    if (!mainTitle) {
+      return `第 ${ep.episode_num} 集`
+    }
+    const prefixRegex = new RegExp(`^(第\\s*0*${ep.episode_num}\\s*集|ep?\\.?\\s*0*${ep.episode_num}\\b)`, 'i')
+    if (prefixRegex.test(mainTitle)) {
+      return mainTitle
+    }
+    return `第 ${ep.episode_num} 集 · ${mainTitle}`
   }
 
-  return ep.episode_num > 0 ? `第 ${ep.episode_num} 集` : mediaTitle || title || '未命名'
+  return mainTitle || '未命名'
 }
 
 function looksLikeSeriesTitle(ep: Media, title: string, siblings: Media[]): boolean {

web/src/utils/mediaSort.ts

@@ -0,0 +1,205 @@
+import type { Media } from '../types'
+import { seriesTitle, type SeriesCard } from './groupSeries'
+
+export type SortField =
+  | 'title'
+  | 'release_date'
+  | 'year'
+  | 'created_at'
+  | 'updated_at'
+  | 'rating'
+  | 'imdb_rating'
+  | 'last_played'
+  | 'duration'
+  | 'bitrate'
+  | 'random'
+
+export type SortOrder = 'asc' | 'desc'
+
+export type SortOption = {
+  id: SortField
+  label: string
+  defaultOrder: SortOrder
+}
+
+export const SORT_OPTIONS: SortOption[] = [
+  { id: 'title', label: '标题', defaultOrder: 'asc' },
+  { id: 'release_date', label: '发行日期', defaultOrder: 'desc' },
+  { id: 'year', label: '年份', defaultOrder: 'desc' },
+  { id: 'created_at', label: '加入日期', defaultOrder: 'desc' },
+  { id: 'updated_at', label: '最后一集添加日期', defaultOrder: 'desc' },
+  { id: 'rating', label: '影评人评分', defaultOrder: 'desc' },
+  { id: 'imdb_rating', label: 'IMDB评分', defaultOrder: 'desc' },
+  { id: 'last_played', label: '播放日期', defaultOrder: 'desc' },
+  { id: 'duration', label: '播放时长', defaultOrder: 'desc' },
+  { id: 'bitrate', label: '比特率', defaultOrder: 'desc' },
+  { id: 'random', label: '随机', defaultOrder: 'desc' },
+]
+
+export function getSortOption(field: SortField): SortOption {
+  return SORT_OPTIONS.find((opt) => opt.id === field) ?? SORT_OPTIONS[0]
+}
+
+// 简单伪随机洗牌（基于 seed 保证同一渲染周期内稳定）
+function pseudoRandomShuffle<T>(array: T[], seed = 1): T[] {
+  const result = [...array]
+  let currentSeed = seed
+  const random = () => {
+    currentSeed = (currentSeed * 9301 + 49297) % 233280
+    return currentSeed / 233280
+  }
+  for (let i = result.length - 1; i > 0; i--) {
+    const j = Math.floor(random() * (i + 1))
+    const temp = result[i]
+    result[i] = result[j]
+    result[j] = temp
+  }
+  return result
+}
+
+function compareStrings(a?: string, b?: string, order: SortOrder = 'asc'): number {
+  const valA = (a ?? '').trim()
+  const valB = (b ?? '').trim()
+  if (!valA && !valB) return 0
+  if (!valA) return 1
+  if (!valB) return -1
+  const cmp = valA.localeCompare(valB, 'zh-CN', { numeric: true, sensitivity: 'base' })
+  return order === 'asc' ? cmp : -cmp
+}
+
+function compareNumbers(a: number, b: number, order: SortOrder = 'asc'): number {
+  if (isNaN(a) && isNaN(b)) return 0
+  if (isNaN(a)) return 1
+  if (isNaN(b)) return -1
+  return order === 'asc' ? a - b : b - a
+}
+
+function compareDates(a?: string, b?: string, order: SortOrder = 'asc'): number {
+  const timeA = a ? new Date(a).getTime() : 0
+  const timeB = b ? new Date(b).getTime() : 0
+  const safeTimeA = isNaN(timeA) ? 0 : timeA
+  const safeTimeB = isNaN(timeB) ? 0 : timeB
+  if (!safeTimeA && !safeTimeB) return 0
+  if (!safeTimeA) return 1
+  if (!safeTimeB) return -1
+  return order === 'asc' ? safeTimeA - safeTimeB : safeTimeB - safeTimeA
+}
+
+export function sortMediaList(
+  items: Media[],
+  field: SortField,
+  order: SortOrder,
+  randomSeed = 1,
+  historyMap?: Map<string, string>,
+): Media[] {
+  if (!items || items.length === 0) return []
+  if (field === 'random') {
+    return pseudoRandomShuffle(items, randomSeed)
+  }
+
+  const list = [...items]
+  list.sort((a, b) => {
+    switch (field) {
+      case 'title':
+        return compareStrings(a.title || a.original_name, b.title || b.original_name, order)
+      case 'release_date': {
+        const dateA = a.release_date || (a.year ? `${a.year}-01-01` : '')
+        const dateB = b.release_date || (b.year ? `${b.year}-01-01` : '')
+        return compareDates(dateA, dateB, order) || compareStrings(a.title, b.title, 'asc')
+      }
+      case 'year': {
+        const cmp = compareNumbers(a.year || 0, b.year || 0, order)
+        return cmp !== 0 ? cmp : compareStrings(a.title, b.title, 'asc')
+      }
+      case 'created_at':
+        return compareDates(a.created_at, b.created_at, order) || compareStrings(a.title, b.title, 'asc')
+      case 'updated_at':
+        return compareDates(a.updated_at || a.created_at, b.updated_at || b.created_at, order) || compareStrings(a.title, b.title, 'asc')
+      case 'rating':
+      case 'imdb_rating': {
+        const cmp = compareNumbers(a.rating || 0, b.rating || 0, order)
+        return cmp !== 0 ? cmp : compareStrings(a.title, b.title, 'asc')
+      }
+      case 'last_played': {
+        const playedA = historyMap?.get(a.id)
+        const playedB = historyMap?.get(b.id)
+        return compareDates(playedA, playedB, order) || compareStrings(a.title, b.title, 'asc')
+      }
+      case 'duration': {
+        const cmp = compareNumbers(a.duration_sec || 0, b.duration_sec || 0, order)
+        return cmp !== 0 ? cmp : compareStrings(a.title, b.title, 'asc')
+      }
+      case 'bitrate': {
+        // 比特率 / 大小
+        const cmp = compareNumbers(a.size_bytes || 0, b.size_bytes || 0, order)
+        return cmp !== 0 ? cmp : compareStrings(a.title, b.title, 'asc')
+      }
+      default:
+        return 0
+    }
+  })
+  return list
+}
+
+export function sortSeriesList(
+  cards: SeriesCard[],
+  field: SortField,
+  order: SortOrder,
+  randomSeed = 1,
+  historyMap?: Map<string, string>,
+): SeriesCard[] {
+  if (!cards || cards.length === 0) return []
+  if (field === 'random') {
+    return pseudoRandomShuffle(cards, randomSeed)
+  }
+
+  const list = [...cards]
+  list.sort((a, b) => {
+    const repA = a.rep
+    const repB = b.rep
+    const titleA = seriesTitle(repA)
+    const titleB = seriesTitle(repB)
+
+    switch (field) {
+      case 'title':
+        return compareStrings(titleA, titleB, order)
+      case 'release_date': {
+        const dateA = repA.release_date || (repA.year ? `${repA.year}-01-01` : '')
+        const dateB = repB.release_date || (repB.year ? `${repB.year}-01-01` : '')
+        return compareDates(dateA, dateB, order) || compareStrings(titleA, titleB, 'asc')
+      }
+      case 'year': {
+        const cmp = compareNumbers(repA.year || 0, repB.year || 0, order)
+        return cmp !== 0 ? cmp : compareStrings(titleA, titleB, 'asc')
+      }
+      case 'created_at':
+        return compareDates(repA.created_at, repB.created_at, order) || compareStrings(titleA, titleB, 'asc')
+      case 'updated_at': {
+        const updateA = repA.updated_at || repA.created_at
+        const updateB = repB.updated_at || repB.created_at
+        return compareDates(updateA, updateB, order) || compareStrings(titleA, titleB, 'asc')
+      }
+      case 'rating':
+      case 'imdb_rating': {
+        const cmp = compareNumbers(repA.rating || 0, repB.rating || 0, order)
+        return cmp !== 0 ? cmp : compareStrings(titleA, titleB, 'asc')
+      }
+      case 'last_played': {
+        const playedA = historyMap?.get(repA.id)
+        const playedB = historyMap?.get(repB.id)
+        return compareDates(playedA, playedB, order) || compareStrings(titleA, titleB, 'asc')
+      }
+      case 'duration': {
+        const cmp = compareNumbers(repA.duration_sec || 0, repB.duration_sec || 0, order)
+        return cmp !== 0 ? cmp : compareStrings(titleA, titleB, 'asc')
+      }
+      case 'bitrate': {
+        const cmp = compareNumbers(repA.size_bytes || 0, repB.size_bytes || 0, order)
+        return cmp !== 0 ? cmp : compareStrings(titleA, titleB, 'asc')
+      }
+      default:
+        return 0
+    }
+  })
+  return list
+}