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

- 品牌设置API: GET/PUT /api/settings/brand (名称/标语/Logo)
- 管理页系统设置: 品牌编辑器表单(名称/标语/Logo URL)
- 恢复Anthropic风格: 米色(#FBF9F6) 底色, Source Serif 4 + Noto Serif SC 衬线体
- 暖棕(#C2693A) 主色调, 更充裕的间距与留白, 庄重大气
- 全站中文: antd zhCN locale, 所有页面文本汉化
- 数据存储在 Config singleton, 运行时更新

frontend/src/viewer/pages/HomePage.tsx

@@ -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>
   )
 }