品牌化重构: StreamCore + 现代UI主题 + 英文界面
- 移除所有emoji (HomePage中的🎬改为VideoCameraOutlined图标)
- 主题重设计: 深蓝色系主色(#1E3A5F),系统sans-serif字体
白色/浅灰背景,现代卡片阴影和圆角,完全去除复古感
- 首页移除管理入口,纯观众视角(渐变横幅+卡片列表)
- 统一品牌名称 StreamCore (替换LiveStream)
- 全部界面英文(antd默认locale,去除zhCN)
- 登录页渐变+卡片居中布局
This commit is contained in:
admin committed
1 parent
b81a7bf293
commit
5f19fc6aa5
14 files changed
+253
-225
No files matched your search
@@ -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 © {new Date().getFullYear()}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user