品牌化重构: StreamCore + 现代UI主题 + 英文界面

- 移除所有emoji (HomePage中的🎬改为VideoCameraOutlined图标) - 主题重设计: 深蓝色系主色(#1E3A5F),系统sans-serif字体白色/浅灰背景,现代卡片阴影和圆角,完全去除复古感 - 首页移除管理入口,纯观众视角(渐变横幅+卡片列表) - 统一品牌名称 StreamCore (替换LiveStream) - 全部界面英文(antd默认locale,去除zhCN) - 登录页渐变+卡片居中布局
2026-08-10 14:40:58 +08:00
1 parent b81a7bf293
commit 5f19fc6aa5
@@ -3,16 +3,16 @@ import { useNavigate } from 'react-router-dom'
 import {
  Row, Col, Card, Typography, Tag, Button, Skeleton, Empty, Space,
 } from 'antd'
-import { LoginOutlined, FireOutlined, ClockCircleOutlined } from '@ant-design/icons'
+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: '直播中', icon: <FireOutlined /> },
-  pending: { color: 'blue', label: '待开播', icon: <ClockCircleOutlined /> },
-  ended: { color: 'default', label: '已结束', icon: null },
-  cancelled: { color: 'default', label: '已取消', icon: null },
+  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 },
 }

 export default function HomePage() {
@@ -33,43 +33,34 @@ export default function HomePage() {
  })

  return (
-    <div style={{ minHeight: '100vh', background: '#FAF8F5' }}>
+    <div style={{ minHeight: '100vh', background: '#F5F6FA' }}>
      <div style={{
-        background: '#FFFFFF',
-        borderBottom: '1px solid #E8E4DD',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: '0 32px',
-        height: 60,
+        background: 'linear-gradient(135deg, #1E3A5F 0%, #2D5F8A 100%)',
+        padding: '40px 48px',
+        color: '#FFFFFF',
      }}>
-        <Title level={4} style={{ margin: 0, letterSpacing: -0.5, color: '#1A1A16' }}>
-          LiveStream
-          <Text type="secondary" style={{ fontSize: 14, marginLeft: 10, fontWeight: 400 }}>
-            简易直播平台
+        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
+          <Title level={2} style={{ color: '#FFFFFF', margin: 0, fontWeight: 700, letterSpacing: -0.5 }}>
+            StreamCore
+          </Title>
+          <Text style={{ color: 'rgba(255,255,255,0.7)', fontSize: 16, marginTop: 8, display: 'block' }}>
+            Enterprise Streaming Platform
          </Text>
-        </Title>
-        <Button
-          type="text"
-          icon={<LoginOutlined />}
-          onClick={() => navigate('/admin')}
-        >
-          管理后台
-        </Button>
+        </div>
      </div>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '32px 48px' }}>
-        <Title level={3} style={{ marginBottom: 24 }}>全部直播</Title>
+        <Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Live Channels</Title>

        {loading ? (
          <Row gutter={[24, 24]}>
            {[1, 2, 3, 4, 5, 6].map((i) => (
              <Col key={i} xs={24} sm={12} md={8} lg={8}>
-                <Card><Skeleton active /></Card>
+                <Card style={{ borderRadius: 12 }}><Skeleton active /></Card>
              </Col>
            ))}
          </Row>
        ) : sorted.length === 0 ? (
-          <Empty description="暂无直播" style={{ marginTop: 80 }} />
+          <Empty description="No live streams yet" style={{ marginTop: 80 }} />
        ) : (
          <Row gutter={[24, 24]}>
            {sorted.map((s) => {
@@ -78,39 +69,43 @@ export default function HomePage() {
                <Col key={s.id} xs={24} sm={12} md={8} lg={8}>
                  <Card
                    hoverable
-                    style={{ overflow: 'hidden', borderRadius: 8 }}
+                    style={{ overflow: 'hidden', borderRadius: 12 }}
                    cover={
                      <div style={{
                        height: 160,
                        background: s.cover_url
                          ? `url(${s.cover_url}) center/cover no-repeat`
-                          : 'linear-gradient(135deg, #2b2b2b 0%, #1a1a16 100%)',
+                          : 'linear-gradient(135deg, #1E3A5F 0%, #3A6F9F 100%)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
+                        position: 'relative',
                      }}>
                        {!s.cover_url && (
-                          <Text style={{ color: '#666', fontSize: 36 }}>
-                            {s.status === 'live' ? <FireOutlined style={{ color: '#D97757' }} /> : '🎬'}
-                          </Text>
+                          <VideoCameraOutlined style={{ color: 'rgba(255,255,255,0.3)', fontSize: 48 }} />
                        )}
+                        <div style={{
+                          position: 'absolute', top: 12, right: 12,
+                        }}>
+                          <Tag color={meta.color} style={{ margin: 0, fontWeight: 600, border: 0 }}>
+                            {meta.icon} {meta.label}
+                          </Tag>
+                        </div>
                      </div>
                    }
+                    bodyStyle={{ padding: '16px 20px' }}
                    onClick={() => navigate(`/watch/${s.id}`)}
                  >
                    <Card.Meta
                      title={
-                        <Space>
-                          <Tag color={meta.color} style={{ margin: 0 }}>
-                            {meta.icon} {meta.label}
-                          </Tag>
-                          <Text ellipsis style={{ maxWidth: 160 }}>{s.title}</Text>
-                        </Space>
+                        <Text strong style={{ fontSize: 15, display: 'block' }} ellipsis>
+                          {s.title}
+                        </Text>
                      }
                      description={
-                        s.description
-                          ? <Text type="secondary" ellipsis>{s.description}</Text>
-                          : <Text type="secondary" italic>暂无简介</Text>
+                        <Text type="secondary" ellipsis style={{ fontSize: 13 }}>
+                          {s.description || 'No description'}
+                        </Text>
                      }
                    />
                  </Card>
@@ -120,6 +115,14 @@ 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>
  )
 }
@@ -79,7 +79,7 @@ export default function WatchPage() {
      })
      hlsInstance.on(Hls.Events.ERROR, (_event, data) => {
        if (data.fatal) {
-          message.warning('播放异常，尝试切换线路...')
+          message.warning('Playback error, try switching line...')
        }
      })
      setHls(hlsInstance)
@@ -103,50 +103,50 @@ export default function WatchPage() {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
-        background: '#FAF8F5',
+        background: '#F5F6FA',
      }}>
-        <Empty description="未找到该直播" />
+        <Empty description="Stream not found" />
      </div>
    )
  }

-  const statusLabel = info.status === 'live' ? '直播中' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status
+  const statusLabel = info.status === 'live' ? 'LIVE' : info.status === 'pending' ? 'SCHEDULED' : info.status === 'ended' ? 'ENDED' : info.status.toUpperCase()

  return (
    <div style={{
      minHeight: '100vh',
-      background: '#1A1A16',
+      background: '#0F1419',
      display: 'flex',
      flexDirection: 'column',
    }}>
      <div style={{
        height: 56,
        minHeight: 56,
-        background: 'rgba(26,26,22,0.95)',
-        borderBottom: '1px solid rgba(255,255,255,0.08)',
+        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',
      }}>
        <Space>
-          <Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#fff' }}
+          <Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#A0AEC0' }}
            onClick={() => navigate('/')}>
-            返回
+            Back
          </Button>
          <div>
-            <Title level={5} style={{ color: '#fff', margin: 0 }}>
+            <Title level={5} style={{ color: '#E2E8F0', margin: 0, fontWeight: 600 }}>
              {info.title}
            </Title>
-            <Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8 }}>
+            <Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8, fontWeight: 600 }}>
              {statusLabel}
            </Tag>
          </div>
        </Space>
        <Space size="middle">
-          <div style={{ color: '#aaa', fontSize: 13 }}>
-            <SignalFilled style={{ color: info.multicast_available ? '#52c41a' : '#666', marginRight: 4 }} />
-            {info.multicast_available ? '组播' : '单播'}
+          <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>
          <Select
            value={activeQuality}
@@ -154,7 +154,7 @@ export default function WatchPage() {
            style={{ width: 110 }}
            size="small"
            options={info.qualities.map((q) => ({ value: q.label, label: q.label }))}
-            placeholder="清晰度"
+            placeholder="Quality"
          />
          <Select
            value={activeLine}
@@ -166,7 +166,7 @@ export default function WatchPage() {
              label: `${l.node_name} (${l.weight})`,
            }))}
            prefix={<WifiOutlined />}
-            placeholder="选择线路"
+            placeholder="Line"
          />
        </Space>
      </div>
@@ -184,6 +184,8 @@ export default function WatchPage() {
          maxHeight: 'calc(100vh - 56px - 48px)',
          background: '#000',
          position: 'relative',
+          borderRadius: 8,
+          overflow: 'hidden',
        }}>
          <video
            ref={videoRef}
@@ -199,11 +201,13 @@ export default function WatchPage() {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
-              background: 'rgba(0,0,0,0.7)',
+              background: 'rgba(0,0,0,0.8)',
            }}>
              <Space direction="vertical" align="center">
                <Spin size="large" />
-                <Text style={{ color: '#fff' }}>等待主播开播...</Text>
+                <Text style={{ color: 'rgba(255,255,255,0.6)', fontSize: 16 }}>
+                  Waiting for streamer...
+                </Text>
              </Space>
            </div>
          )}