添加繁体转简体，简体转繁体功能

web/src/pages/PlayerPage.tsx

@@ -9,9 +9,15 @@ import { danmakuAPI, type DanmakuAnime, type DanmakuLoadedInfo } from '../api/da
 import { playbackAPI } from '../api/playback'
 import { subtitlesAPI, type SubtitleTrack } from '../api/subtitles'
 import { systemAPI } from '../api/system'
+import { profileAPI } from '../api/profile'
+import { useAuthStore } from '../stores/auth'
 import type { Media } from '../types'
 import { getSeriesKey, seriesTitleFromPath } from '../utils/groupSeries'
 import { isRemoteEmbyID } from '../utils/remoteEmby'
+import {
+  normalizeSubtitleChineseMode,
+  type SubtitleChineseMode,
+} from '../utils/subtitleChinese'
 import { pickPlayerMode, needsTranscodeForBrowser, isDirectStreamMedia, type PlayerMode } from './playerPageModel'
 import { classifyDirectPlayError } from './directPlayError'
 import { apiErrorMessage } from './StrmManagePage'
@@ -51,6 +57,15 @@ export function PlayerPage() {
   const [mode, setMode] = useState<PlayerMode>('direct')
   const [subs, setSubs] = useState<SubtitleTrack[]>([])
   const [subtitleIndex, setSubtitleIndex] = useState<number>(0)
+  const authUser = useAuthStore((state) => state.user)
+  const setAuthUser = useAuthStore((state) => state.setUser)
+  const [subtitleChineseMode, setSubtitleChineseMode] =
+    useState<SubtitleChineseMode>(() =>
+      normalizeSubtitleChineseMode(authUser?.subtitle_chinese_mode),
+    )
+  const persistedSubtitleChineseModeRef = useRef(subtitleChineseMode)
+  const subtitlePreferenceTouchedRef = useRef(false)
+  const subtitlePreferenceSaveQueueRef = useRef<Promise<void>>(Promise.resolve())
   const [hlsUnavailable, setHlsUnavailable] = useState(false)
   const [playerError, setPlayerError] = useState('')
   // 媒体元数据加载失败（404 / 无权限等）：舞台区直接展示错误而不是永远「加载中」
@@ -112,6 +127,24 @@ export function PlayerPage() {
       .finally(() => setDirectOnlyKnown(true))
   }, [])
 
+  // 每次进入播放器都从数据库刷新用户的字幕转换偏好；本地登录缓存只用作首屏初值。
+  useEffect(() => {
+    let cancelled = false
+    profileAPI
+      .get()
+      .then((user) => {
+        if (cancelled || subtitlePreferenceTouchedRef.current) return
+        const savedMode = normalizeSubtitleChineseMode(user.subtitle_chinese_mode)
+        persistedSubtitleChineseModeRef.current = savedMode
+        setSubtitleChineseMode(savedMode)
+        setAuthUser(user)
+      })
+      .catch(() => undefined)
+    return () => {
+      cancelled = true
+    }
+  }, [setAuthUser])
+
   // 读取宿主机已保存的弹幕参数作为面板初始值（无 admin 权限也可读）。
   useEffect(() => {
     danmakuAPI
@@ -761,6 +794,30 @@ export function PlayerPage() {
     }
   }, [directOnly, hlsStartSec, isDirectStream, mode, setPlaybackMode, subs, subtitleIndex])
 
+  const changeSubtitleChineseMode = useCallback(
+    (nextMode: SubtitleChineseMode) => {
+      subtitlePreferenceTouchedRef.current = true
+      setSubtitleChineseMode(nextMode)
+
+      const save = subtitlePreferenceSaveQueueRef.current.then(async () => {
+        const user = await profileAPI.update({ subtitle_chinese_mode: nextMode })
+        persistedSubtitleChineseModeRef.current = nextMode
+        setAuthUser(user)
+        toast.success('字幕转换偏好已保存，后续播放将自动沿用')
+      })
+      subtitlePreferenceSaveQueueRef.current = save.catch(() => undefined)
+      void save.catch(() => {
+        setSubtitleChineseMode((currentMode) =>
+          currentMode === nextMode
+            ? persistedSubtitleChineseModeRef.current
+            : currentMode,
+        )
+        toast.error('字幕转换偏好保存失败，已恢复上次设置')
+      })
+    },
+    [setAuthUser],
+  )
+
   const handleVideoError = useCallback(() => {
     const video = ref.current
     if (mode !== 'direct') {
@@ -846,6 +903,8 @@ export function PlayerPage() {
         subs={subs}
         subtitleIndex={subtitleIndex}
         onSelectSubtitle={selectSubtitle}
+        subtitleChineseMode={subtitleChineseMode}
+        onSubtitleChineseModeChange={changeSubtitleChineseMode}
         videoRef={ref}
         onVideoError={handleVideoError}
         danmakuEnabled={danmakuEnabled}

web/src/pages/PlayerVideoStage.tsx

@@ -4,6 +4,10 @@ import type { PointerEvent, ReactNode, RefObject } from 'react'
 import { subtitlesAPI, type SubtitleTrack } from '../api/subtitles'
 import { type DanmakuAnime, type DanmakuLoadedInfo } from '../api/danmaku'
 import type { Media } from '../types'
+import {
+  loadSubtitleChineseConverter,
+  type SubtitleChineseMode,
+} from '../utils/subtitleChinese'
 import { DanmakuStage } from '../components/DanmakuStage'
 import { PlayerControls } from '../components/PlayerControls'
 
@@ -64,6 +68,8 @@ type PlayerVideoStageProps = {
   /** 当前激活字幕轨道：-1=关闭，0..n-1=对应轨道。 */
   subtitleIndex: number
   onSelectSubtitle: (index: number) => void
+  subtitleChineseMode: SubtitleChineseMode
+  onSubtitleChineseModeChange: (mode: SubtitleChineseMode) => void
   videoRef: RefObject<HTMLVideoElement>
   onVideoError: () => void
   danmakuEnabled: boolean
@@ -102,6 +108,8 @@ export function PlayerVideoStage({
   subs,
   subtitleIndex,
   onSelectSubtitle,
+  subtitleChineseMode,
+  onSubtitleChineseModeChange,
   videoRef,
   onVideoError,
   danmakuEnabled,
@@ -137,6 +145,8 @@ export function PlayerVideoStage({
   const revealControlsOnlyRef = useRef(false)
   // 当前展示的字幕文本（由自定义字幕层渲染，100% 透明无黑框）
   const [activeCueText, setActiveCueText] = useState<string>('')
+  const [subtitleChineseConverter, setSubtitleChineseConverter] =
+    useState<(text: string) => string>(() => (text: string) => text)
   // 独立保存完整 WebVTT 时间轴。HLS seek 会替换媒体源，Chromium 此时可能清空
   // <track>.track.cues；独立时间轴不受 MediaSource 重挂载和轨道 mode 切换影响。
   const [subtitleTimeline, setSubtitleTimeline] = useState<{
@@ -146,6 +156,32 @@ export function PlayerVideoStage({
   // 直连 302 尚未完成时插入 <track> 会中断加载并误报播放失败；等 canplay 再挂。
   const [tracksArmed, setTracksArmed] = useState(false)
 
+  useEffect(() => {
+    const selectedTrack = subs[subtitleIndex]
+    let cancelled = false
+
+    setSubtitleChineseConverter(() => (text: string) => text)
+    if (
+      subtitleChineseMode === 'original' ||
+      selectedTrack?.source !== 'external' ||
+      selectedTrack.delivery !== 'webvtt'
+    ) {
+      return
+    }
+
+    void loadSubtitleChineseConverter(subtitleChineseMode)
+      .then((converter) => {
+        if (!cancelled) setSubtitleChineseConverter(() => converter)
+      })
+      .catch(() => {
+        // 字典分包加载失败时保留原文，避免影响字幕正常显示。
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [subs, subtitleIndex, subtitleChineseMode])
+
   useEffect(() => {
     setTracksArmed(false)
     const video = videoRef.current
@@ -281,7 +317,7 @@ export function PlayerVideoStage({
             .filter((cue) => absoluteTime >= cue.startTime && absoluteTime <= cue.endTime)
             .map((cue) => cue.text),
         )
-        setActiveCueText(texts.join('\n'))
+        setActiveCueText(subtitleChineseConverter(texts.join('\n')))
         return
       }
 
@@ -315,7 +351,7 @@ export function PlayerVideoStage({
           }
         }
       }
-      setActiveCueText(uniqueSubtitleTexts(texts).join('\n'))
+      setActiveCueText(subtitleChineseConverter(uniqueSubtitleTexts(texts).join('\n')))
     }
 
     const apply = () => {
@@ -370,7 +406,16 @@ export function PlayerVideoStage({
         }
       }
     }
-  }, [subtitleIndex, subs, videoRef, media, streamOffset, subtitleTimeline, tracksArmed])
+  }, [
+    subtitleIndex,
+    subs,
+    videoRef,
+    media,
+    streamOffset,
+    subtitleTimeline,
+    tracksArmed,
+    subtitleChineseConverter,
+  ])
 
   // 根据视频画面宽高比与舞台宽高比，确定视频在哪个轴向撑满 100%
   const isWiderThanStage =
@@ -464,6 +509,8 @@ export function PlayerVideoStage({
             subs={subs}
             subtitleIndex={subtitleIndex}
             onSelectSubtitle={onSelectSubtitle}
+            subtitleChineseMode={subtitleChineseMode}
+            onSubtitleChineseModeChange={onSubtitleChineseModeChange}
             danmakuOpen={danmakuOpen}
             danmakuEnabled={danmakuEnabled}
             onToggleDanmaku={onToggleDanmaku}