品牌化重构: StreamCore + 现代UI主题 + 英文界面
- 移除所有emoji (HomePage中的🎬改为VideoCameraOutlined图标)
- 主题重设计: 深蓝色系主色(#1E3A5F),系统sans-serif字体
白色/浅灰背景,现代卡片阴影和圆角,完全去除复古感
- 首页移除管理入口,纯观众视角(渐变横幅+卡片列表)
- 统一品牌名称 StreamCore (替换LiveStream)
- 全部界面英文(antd默认locale,去除zhCN)
- 登录页渐变+卡片居中布局
This commit is contained in:
1 parent
b81a7bf293
commit
5f19fc6aa5
14 files changed
+253
-225
No files matched your search
@@ -1,9 +1,9 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Row, Col, Card, Statistic, Typography, Table, Tag, Space } from 'antd'
|
||||
import { VideoCameraOutlined, EyeOutlined, SignalFilled } from '@ant-design/icons'
|
||||
import { VideoCameraOutlined, SignalFilled, PlayCircleOutlined } from '@ant-design/icons'
|
||||
import { fetchStreams, type StreamInfo } from '../../api/streams'
|
||||
|
||||
const { Title } = Typography
|
||||
const { Title, Text } = Typography
|
||||
|
||||
export default function Dashboard() {
|
||||
const [streams, setStreams] = useState<StreamInfo[]>([])
|
||||
@@ -27,60 +27,65 @@ export default function Dashboard() {
|
||||
const pendingCount = streams.filter((s) => s.status === 'pending').length
|
||||
|
||||
const statusMap: Record<string, { color: string; label: string }> = {
|
||||
pending: { color: 'blue', label: '待开播' },
|
||||
live: { color: 'green', label: '直播中' },
|
||||
ended: { color: 'default', label: '已结束' },
|
||||
cancelled: { color: 'red', label: '已取消' },
|
||||
pending: { color: 'blue', label: 'Scheduled' },
|
||||
live: { color: 'green', label: 'Live' },
|
||||
ended: { color: 'default', label: 'Ended' },
|
||||
cancelled: { color: 'red', label: 'Cancelled' },
|
||||
}
|
||||
|
||||
const recentColumns = [
|
||||
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
|
||||
{ title: 'Title', dataIndex: 'title', key: 'title', ellipsis: true },
|
||||
{
|
||||
title: '状态', dataIndex: 'status', key: 'status',
|
||||
title: 'Status', dataIndex: 'status', key: 'status',
|
||||
render: (status: string) => {
|
||||
const s = statusMap[status] || { color: 'default', label: status }
|
||||
return <Tag color={s.color}>{s.label}</Tag>
|
||||
},
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: 'Created', dataIndex: 'created_at', key: 'created_at',
|
||||
render: (v: string) => v?.slice(0, 16),
|
||||
width: 170,
|
||||
},
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16) },
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Title level={3} style={{ marginBottom: 24 }}>概览</Title>
|
||||
<Title level={3} style={{ marginBottom: 24, fontWeight: 600 }}>Overview</Title>
|
||||
<Row gutter={[24, 24]}>
|
||||
<Col xs={24} sm={8}>
|
||||
<Card>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Statistic
|
||||
title="直播中"
|
||||
title="Live Now"
|
||||
value={liveCount}
|
||||
prefix={<SignalFilled style={{ color: '#52c41a' }} />}
|
||||
prefix={<SignalFilled style={{ color: '#2E7D32' }} />}
|
||||
loading={loading}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={8}>
|
||||
<Card>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Statistic
|
||||
title="待开播"
|
||||
title="Scheduled"
|
||||
value={pendingCount}
|
||||
prefix={<VideoCameraOutlined style={{ color: '#1677ff' }} />}
|
||||
prefix={<VideoCameraOutlined style={{ color: '#1565C0' }} />}
|
||||
loading={loading}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} sm={8}>
|
||||
<Card>
|
||||
<Card style={{ borderRadius: 12 }}>
|
||||
<Statistic
|
||||
title="直播总数"
|
||||
title="Total Streams"
|
||||
value={streams.length}
|
||||
prefix={<EyeOutlined />}
|
||||
prefix={<PlayCircleOutlined />}
|
||||
loading={loading}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Card title="最近直播" style={{ marginTop: 24 }}>
|
||||
<Card title="Recent Streams" style={{ marginTop: 24, borderRadius: 12 }}>
|
||||
<Table
|
||||
dataSource={streams.slice(0, 10)}
|
||||
columns={recentColumns}
|
||||
|
||||
Reference in new issue
Block a user