品牌化设置 + Claude米色衬线体主题 + 全站中文

- 品牌设置API: GET/PUT /api/settings/brand (名称/标语/Logo) - 管理页系统设置: 品牌编辑器表单(名称/标语/Logo URL) - 恢复Anthropic风格: 米色(#FBF9F6) 底色, Source Serif 4 + Noto Serif SC 衬线体 - 暖棕(#C2693A) 主色调, 更充裕的间距与留白, 庄重大气 - 全站中文: antd zhCN locale, 所有页面文本汉化 - 数据存储在 Config singleton, 运行时更新
2026-08-10 16:24:45 +08:00
1 parent 409e5d314e
commit efde5597bd
@@ -1,8 +1,6 @@
 import { useState, useEffect, useRef } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import {
-  Select, Button, Typography, Space, Tag, Spin, Skeleton, Empty, message,
-} from 'antd'
+import { Select, Button, Typography, Space, Tag, Spin, Skeleton, Empty, message } from 'antd'
 import { ArrowLeftOutlined, WifiOutlined, SignalFilled } from '@ant-design/icons'
 import Hls from 'hls.js'
 import { getWatchUrls, type WatchInfo, type LineInfo } from '../../api/streams'
@@ -23,10 +21,7 @@ export default function WatchPage() {
    if (!id) return
    loadInfo()
    const timer = setInterval(loadInfo, 15000)
-    return () => {
-      clearInterval(timer)
-      if (hls) { hls.destroy() }
-    }
+    return () => { clearInterval(timer); if (hls) hls.destroy() }
  }, [id])

  async function loadInfo() {
@@ -37,176 +32,76 @@ export default function WatchPage() {
      if (!activeLine && data.lines.length > 0) {
        const best = autoSelectLine(data.lines)
        setActiveLine(best.node_id)
-        if (data.qualities.length > 0) {
-          setActiveQuality(data.qualities[0].label)
-        }
+        if (data.qualities.length > 0) setActiveQuality(data.qualities[0].label)
      }
    } catch { }
    setLoading(false)
  }

  function autoSelectLine(lines: LineInfo[]): LineInfo {
-    const enabled = lines.filter((l) => l.weight > 0)
+    const enabled = lines.filter(l => l.weight > 0)
    if (enabled.length === 0) return lines[0]
    const total = enabled.reduce((s, l) => s + l.weight, 0)
    let r = Math.random() * total
-    for (const line of enabled) {
-      r -= line.weight
-      if (r <= 0) return line
-    }
+    for (const line of enabled) { r -= line.weight; if (r <= 0) return line }
    return enabled[enabled.length - 1]
  }

  useEffect(() => {
    if (!info || !activeLine || !videoRef.current) return
-    const line = info.lines.find((l) => l.node_id === activeLine)
+    const line = info.lines.find(l => l.node_id === activeLine)
    if (!line) return
-    const quality = activeQuality
-      ? line.qualities.find((q) => q.label === activeQuality)
-      : line.qualities[0]
+    const quality = activeQuality ? line.qualities.find(q => q.label === activeQuality) : line.qualities[0]
    if (!quality) return
-    if (hls) { hls.destroy() }
+    if (hls) hls.destroy()
    const url = quality.url
    if (Hls.isSupported()) {
-      const hlsInstance = new Hls({
-        enableWorker: false,
-        lowLatencyMode: false,
-      })
-      hlsInstance.loadSource(url)
-      hlsInstance.attachMedia(videoRef.current!)
-      hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
-        videoRef.current?.play().catch(() => {})
-      })
-      hlsInstance.on(Hls.Events.ERROR, (_event, data) => {
-        if (data.fatal) {
-          message.warning('Playback error, try switching line...')
-        }
-      })
-      setHls(hlsInstance)
+      const hi = new Hls({ enableWorker: false, lowLatencyMode: false })
+      hi.loadSource(url); hi.attachMedia(videoRef.current!)
+      hi.on(Hls.Events.MANIFEST_PARSED, () => { videoRef.current?.play().catch(() => {}) })
+      hi.on(Hls.Events.ERROR, (_e, d) => { if (d.fatal) message.warning('播放异常，尝试切换线路...') })
+      setHls(hi)
    } else if (videoRef.current!.canPlayType('application/vnd.apple.mpegurl')) {
      videoRef.current!.src = url
    }
  }, [activeLine, activeQuality, info])

-  if (loading) {
-    return (
-      <div style={{ minHeight: '100vh', background: '#000' }}>
-        <Skeleton active />
-      </div>
-    )
-  }
+  if (loading) return <div style={{ minHeight: '100vh', background: '#000' }}><Skeleton active /></div>
+  if (!info) return <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#F6F3ED' }}><Empty description="未找到该直播" /></div>

-  if (!info) {
-    return (
-      <div style={{
-        minHeight: '100vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        background: '#F5F6FA',
-      }}>
-        <Empty description="Stream not found" />
-      </div>
-    )
-  }
-
-  const statusLabel = info.status === 'live' ? 'LIVE' : info.status === 'pending' ? 'SCHEDULED' : info.status === 'ended' ? 'ENDED' : info.status.toUpperCase()
+  const statusLabel = info.status === 'live' ? '直播中' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status

  return (
-    <div style={{
-      minHeight: '100vh',
-      background: '#0F1419',
-      display: 'flex',
-      flexDirection: 'column',
-    }}>
-      <div style={{
-        height: 56,
-        minHeight: 56,
-        background: 'rgba(15,20,25,0.97)',
-        borderBottom: '1px solid rgba(255,255,255,0.06)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: '0 24px',
-      }}>
+    <div style={{ minHeight: '100vh', background: '#141410', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ height: 56, minHeight: 56, background: 'rgba(20,20,16,0.97)', borderBottom: '1px solid rgba(232,227,216,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px' }}>
        <Space>
-          <Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#A0AEC0' }}
-            onClick={() => navigate('/')}>
-            Back
-          </Button>
+          <Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#8B867D' }} onClick={() => navigate('/')}>返回</Button>
          <div>
-            <Title level={5} style={{ color: '#E2E8F0', margin: 0, fontWeight: 600 }}>
-              {info.title}
-            </Title>
-            <Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8, fontWeight: 600 }}>
-              {statusLabel}
-            </Tag>
+            <Title level={5} style={{ color: '#E8E3D8', margin: 0, fontWeight: 600 }}>{info.title}</Title>
+            <Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8, fontWeight: 600 }}>{statusLabel}</Tag>
          </div>
        </Space>
        <Space size="middle">
-          <div style={{ color: '#718096', fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
-            <SignalFilled style={{ color: info.multicast_available ? '#48BB78' : '#4A5568' }} />
-            {info.multicast_available ? 'Multicast' : 'Unicast'}
+          <div style={{ color: '#8B867D', fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
+            <SignalFilled style={{ color: info.multicast_available ? '#5B8C5A' : '#5C5952' }} />
+            {info.multicast_available ? '组播' : '单播'}
          </div>
-          <Select
-            value={activeQuality}
-            onChange={setActiveQuality}
-            style={{ width: 110 }}
-            size="small"
-            options={info.qualities.map((q) => ({ value: q.label, label: q.label }))}
-            placeholder="Quality"
-          />
-          <Select
-            value={activeLine}
-            onChange={setActiveLine}
-            style={{ width: 160 }}
-            size="small"
-            options={info.lines.map((l) => ({
-              value: l.node_id,
-              label: `${l.node_name} (${l.weight})`,
-            }))}
-            prefix={<WifiOutlined />}
-            placeholder="Line"
-          />
+          <Select value={activeQuality} onChange={setActiveQuality} style={{ width: 110 }} size="small"
+            options={info.qualities.map(q => ({ value: q.label, label: q.label }))} placeholder="清晰度" />
+          <Select value={activeLine} onChange={setActiveLine} style={{ width: 160 }} size="small"
+            options={info.lines.map(l => ({ value: l.node_id, label: `${l.node_name} (${l.weight})` }))}
+            prefix={<WifiOutlined />} placeholder="线路" />
        </Space>
      </div>
-      <div style={{
-        flex: 1,
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 24,
-      }}>
-        <div style={{
-          width: '100%',
-          maxWidth: 1280,
-          aspectRatio: '16 / 9',
-          maxHeight: 'calc(100vh - 56px - 48px)',
-          background: '#000',
-          position: 'relative',
-          borderRadius: 8,
-          overflow: 'hidden',
-        }}>
-          <video
-            ref={videoRef}
-            controls
-            autoPlay
-            playsInline
-            style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
-          />
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
+        <div style={{ width: '100%', maxWidth: 1280, aspectRatio: '16/9', maxHeight: 'calc(100vh - 56px - 48px)', background: '#000', position: 'relative', borderRadius: 8, overflow: 'hidden' }}>
+          <video ref={videoRef} controls autoPlay playsInline style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
          {info.status !== 'live' && (
-            <div style={{
-              position: 'absolute',
-              inset: 0,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.8)',
-            }}>
+            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.85)' }}>
              <Space direction="vertical" align="center">
                <Spin size="large" />
-                <Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 16 }}>
-                  Waiting for streamer...
+                <Text style={{ color: 'rgba(232,227,216,0.6)', fontSize: 16, fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif' }}>
+                  等待主播开播...
                </Text>
              </Space>
            </div>