admin
efde5597bd
- 品牌设置API: GET/PUT /api/settings/brand (名称/标语/Logo) - 管理页系统设置: 品牌编辑器表单(名称/标语/Logo URL) - 恢复Anthropic风格: 米色(#FBF9F6) 底色, Source Serif 4 + Noto Serif SC 衬线体 - 暖棕(#C2693A) 主色调, 更充裕的间距与留白, 庄重大气 - 全站中文: antd zhCN locale, 所有页面文本汉化 - 数据存储在 Config singleton, 运行时更新
102 lines
4.2 KiB
TypeScript
102 lines
4.2 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useNavigate } from 'react-router-dom'
|
|
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: '直播中', icon: <FireOutlined /> },
|
|
pending: { color: 'blue', label: '待开播', icon: <ClockCircleOutlined /> },
|
|
ended: { color: 'default', label: '已结束', icon: null },
|
|
cancelled: { color: 'default', label: '已取消', icon: null },
|
|
}
|
|
|
|
export default function HomePage() {
|
|
const [streams, setStreams] = useState<StreamInfo[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const navigate = useNavigate()
|
|
|
|
useEffect(() => {
|
|
fetchStreams().then(setStreams).catch(() => {}).finally(() => setLoading(false))
|
|
}, [])
|
|
|
|
const sorted = [...streams].sort((a, b) => {
|
|
const order: Record<string, number> = { live: 0, pending: 1, ended: 2, cancelled: 3 }
|
|
return (order[a.status] ?? 9) - (order[b.status] ?? 9)
|
|
})
|
|
|
|
return (
|
|
<div style={{ minHeight: '100vh', background: '#F6F3ED' }}>
|
|
<div style={{
|
|
background: '#FBF9F6', borderBottom: '1px solid #E8E3D8',
|
|
padding: '48px 48px 40px',
|
|
}}>
|
|
<div style={{ maxWidth: 1280, margin: '0 auto' }}>
|
|
<Title level={1} style={{
|
|
margin: 0, fontWeight: 600, letterSpacing: -1,
|
|
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
|
|
}}>
|
|
StreamCore
|
|
</Title>
|
|
<Text type="secondary" style={{ fontSize: 17, marginTop: 8, display: 'block', fontWeight: 400 }}>
|
|
企业级直播平台
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
<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 => (
|
|
<Col key={i} xs={24} sm={12} md={8} lg={8}>
|
|
<Card style={{ borderRadius: 10 }}><Skeleton active /></Card>
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
) : sorted.length === 0 ? (
|
|
<Empty description="暂无直播" style={{ marginTop: 80 }} />
|
|
) : (
|
|
<Row gutter={[24, 24]}>
|
|
{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: 10 }}
|
|
cover={
|
|
<div style={{
|
|
height: 180, position: 'relative',
|
|
background: s.cover_url
|
|
? `url(${s.cover_url}) center/cover no-repeat`
|
|
: 'linear-gradient(135deg, #3D3226 0%, #5C4A3A 50%, #2B241C 100%)',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
}}>
|
|
{!s.cover_url && (
|
|
<VideoCameraOutlined style={{ color: 'rgba(232,227,216,0.2)', 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={<Text strong style={{ fontSize: 15 }} ellipsis>{s.title}</Text>}
|
|
description={<Text type="secondary" ellipsis style={{ fontSize: 13 }}>{s.description || '暂无简介'}</Text>}
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
)
|
|
})}
|
|
</Row>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|