品牌化设置 + 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,18 +1,16 @@
 import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import {
-  Row, Col, Card, Typography, Tag, Button, Skeleton, Empty, Space,
-} from 'antd'
+import { Row, Col, Card, Typography, Tag, Skeleton, Empty, Space } from 'antd'
 import { FireOutlined, ClockCircleOutlined, VideoCameraOutlined } from '@ant-design/icons'
 import { fetchStreams, type StreamInfo } from '../../api/streams'

 const { Title, Text } = Typography

 const statusMeta: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
-  live: { color: 'red', label: 'LIVE', icon: <FireOutlined /> },
-  pending: { color: 'blue', label: 'SCHEDULED', icon: <ClockCircleOutlined /> },
-  ended: { color: 'default', label: 'ENDED', icon: null },
-  cancelled: { color: 'default', label: 'CANCELLED', icon: null },
+  live: { color: 'red', label: '直播中', icon: <FireOutlined /> },
+  pending: { color: 'blue', label: '待开播', icon: <ClockCircleOutlined /> },
+  ended: { color: 'default', label: '已结束', icon: null },
+  cancelled: { color: 'default', label: '已取消', icon: null },
 }

 export default function HomePage() {
@@ -21,10 +19,7 @@ export default function HomePage() {
  const navigate = useNavigate()

  useEffect(() => {
-    fetchStreams()
-      .then(setStreams)
-      .catch(() => {})
-      .finally(() => setLoading(false))
+    fetchStreams().then(setStreams).catch(() => {}).finally(() => setLoading(false))
  }, [])

  const sorted = [...streams].sort((a, b) => {
@@ -33,60 +28,54 @@ export default function HomePage() {
  })

  return (
-    <div style={{ minHeight: '100vh', background: '#F5F6FA' }}>
+    <div style={{ minHeight: '100vh', background: '#F6F3ED' }}>
      <div style={{
-        background: 'linear-gradient(135deg, #1E3A5F 0%, #2D5F8A 100%)',
-        padding: '40px 48px',
-        color: '#FFFFFF',
+        background: '#FBF9F6', borderBottom: '1px solid #E8E3D8',
+        padding: '48px 48px 40px',
      }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
-          <Title level={2} style={{ color: '#FFFFFF', margin: 0, fontWeight: 700, letterSpacing: -0.5 }}>
+          <Title level={1} style={{
+            margin: 0, fontWeight: 600, letterSpacing: -1,
+            fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
+          }}>
            StreamCore
          </Title>
-          <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 16, marginTop: 8, display: 'block' }}>
-            Enterprise Streaming Platform
+          <Text type="secondary" style={{ fontSize: 17, marginTop: 8, display: 'block', fontWeight: 400 }}>
+            企业级直播平台
          </Text>
        </div>
      </div>
-      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 48px' }}>
-        <Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Live Channels</Title>
-
+      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '40px 48px' }}>
+        <Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>直播频道</Title>
        {loading ? (
          <Row gutter={[24, 24]}>
-            {[1, 2, 3, 4, 5, 6].map((i) => (
+            {[1,2,3,4,5,6].map(i => (
              <Col key={i} xs={24} sm={12} md={8} lg={8}>
-                <Card style={{ borderRadius: 12 }}><Skeleton active /></Card>
+                <Card style={{ borderRadius: 10 }}><Skeleton active /></Card>
              </Col>
            ))}
          </Row>
        ) : sorted.length === 0 ? (
-          <Empty description="No live streams yet" style={{ marginTop: 80 }} />
+          <Empty description="暂无直播" style={{ marginTop: 80 }} />
        ) : (
          <Row gutter={[24, 24]}>
-            {sorted.map((s) => {
+            {sorted.map(s => {
              const meta = statusMeta[s.status] ?? statusMeta.pending
              return (
                <Col key={s.id} xs={24} sm={12} md={8} lg={8}>
-                  <Card
-                    hoverable
-                    style={{ overflow: 'hidden', borderRadius: 12 }}
+                  <Card hoverable style={{ overflow: 'hidden', borderRadius: 10 }}
                    cover={
                      <div style={{
-                        height: 160,
+                        height: 180, position: 'relative',
                        background: s.cover_url
                          ? `url(${s.cover_url}) center/cover no-repeat`
-                          : 'linear-gradient(135deg, #1E3A5F 0%, #3A6F9F 100%)',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        position: 'relative',
+                          : 'linear-gradient(135deg, #3D3226 0%, #5C4A3A 50%, #2B241C 100%)',
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                      }}>
                        {!s.cover_url && (
-                          <VideoCameraOutlined style={{ color: 'rgba(255,255,255,0.3)', fontSize: 48 }} />
+                          <VideoCameraOutlined style={{ color: 'rgba(232,227,216,0.2)', fontSize: 48 }} />
                        )}
-                        <div style={{
-                          position: 'absolute', top: 12, right: 12,
-                        }}>
+                        <div style={{ position: 'absolute', top: 12, right: 12 }}>
                          <Tag color={meta.color} style={{ margin: 0, fontWeight: 600, border: 0 }}>
                            {meta.icon} {meta.label}
                          </Tag>
@@ -97,16 +86,8 @@ export default function HomePage() {
                    onClick={() => navigate(`/watch/${s.id}`)}
                  >
                    <Card.Meta
-                      title={
-                        <Text strong style={{ fontSize: 15, display: 'block' }} ellipsis>
-                          {s.title}
-                        </Text>
-                      }
-                      description={
-                        <Text type="secondary" ellipsis style={{ fontSize: 13 }}>
-                          {s.description || 'No description'}
-                        </Text>
-                      }
+                      title={<Text strong style={{ fontSize: 15 }} ellipsis>{s.title}</Text>}
+                      description={<Text type="secondary" ellipsis style={{ fontSize: 13 }}>{s.description || '暂无简介'}</Text>}
                    />
                  </Card>
                </Col>
@@ -115,14 +96,6 @@ export default function HomePage() {
          </Row>
        )}
      </div>
-      <div style={{
-        maxWidth: 1280, margin: '0 auto', padding: '16px 48px 48px',
-        textAlign: 'center',
-      }}>
-        <Text type="secondary" style={{ fontSize: 13 }}>
-          StreamCore &copy; {new Date().getFullYear()}
-        </Text>
-      </div>
    </div>
  )
 }
@@ -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>