UI彻底重做: 全新设计语言, 纯手工精调
设计系统: - CSS变量体系: 暖纸底色(#F9F7F4), 6级灰阶, 5级阴影 - 字体节奏: clamp响应式字号, -0.02em字间距 - 间距韵律: 4-128px 8级递进 首页: - 96px大留白英雄区, clamp(36px,5vw,56px)巨型标题 - 200px暗色封面卡片(#2C2824) - LIVE红点脉动标签, 待开播黑底白字徽章 - hover抬升2px + 阴影, 淡棕描边高亮 管理页: - stat卡片: 1px边框+3px彩色顶线 - 表格卡片化: borderRadius 12, 统一白底+边框 - 表单/设置: 统一圆角8px, 大内边距36px 播放页: - #1A1814暗底, 毛玻璃顶栏 - 视频圆角12px + boxShadow景深 - document.title动态标题 登录页: 56px内边距, 品牌居中, 返回链接
This commit is contained in:
1 parent
f0b8c2d64f
commit
2685ebdd47
11 files changed
+486
-553
No files matched your search
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Row, Col, Card, Statistic, Typography, Table, Tag, Skeleton } from 'antd'
|
||||
import { Row, Col, Statistic, Table, Tag, Typography } from 'antd'
|
||||
import { SignalFilled, ClockCircleOutlined, PlayCircleOutlined } from '@ant-design/icons'
|
||||
import { fetchStreams, type StreamInfo } from '../../api/streams'
|
||||
import { useBrand } from '../../brand/BrandContext'
|
||||
@@ -11,11 +11,7 @@ export default function Dashboard() {
|
||||
const [streams, setStreams] = useState<StreamInfo[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
loadData()
|
||||
const timer = setInterval(loadData, 10000)
|
||||
return () => clearInterval(timer)
|
||||
}, [])
|
||||
useEffect(() => { loadData(); const t = setInterval(loadData, 10000); return () => clearInterval(t) }, [])
|
||||
|
||||
async function loadData() {
|
||||
try { setStreams(await fetchStreams()) } catch { /* */ }
|
||||
@@ -34,47 +30,63 @@ export default function Dashboard() {
|
||||
|
||||
const columns = [
|
||||
{ title: '标题', dataIndex: 'title', key: 'title', ellipsis: true },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100,
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 90,
|
||||
render: (s: string) => <Tag color={(statusMap[s] || {}).color}>{(statusMap[s] || { label: s }).label}</Tag> },
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', render: (v: string) => v?.slice(0, 16), width: 170 },
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: 32 }}>
|
||||
<Title level={2} style={{ margin: 0, fontWeight: 600 }}>{brand.brand_name}</Title>
|
||||
<Text type="secondary" style={{ fontSize: 15 }}>管理控制台</Text>
|
||||
<div style={{ marginBottom: 36 }}>
|
||||
<Title level={1} style={{ margin: '0 0 8px', fontWeight: 600, fontSize: 32, letterSpacing: '-0.03em' }}>
|
||||
{brand.brand_name}
|
||||
</Title>
|
||||
<Text style={{ color: '#5E5A52', fontSize: 15 }}>管理控制台</Text>
|
||||
</div>
|
||||
|
||||
<Row gutter={[28, 28]} style={{ marginBottom: 32 }}>
|
||||
<Row gutter={[24, 24]} style={{ marginBottom: 36 }}>
|
||||
<Col xs={24} sm={8}>
|
||||
<Card style={{ borderRadius: 12, borderTop: '3px solid #5B8C5A' }}>
|
||||
<div style={{
|
||||
background: '#fff', borderRadius: 12, padding: '28px 32px',
|
||||
border: '1px solid #EBE5DB',
|
||||
borderTop: '3px solid #5B8C5A',
|
||||
}}>
|
||||
<Statistic title="直播中" value={liveCount} loading={loading}
|
||||
prefix={<SignalFilled style={{ color: '#5B8C5A', fontSize: 18 }} />} />
|
||||
</Card>
|
||||
prefix={<SignalFilled style={{ color: '#5B8C5A', fontSize: 20 }} />} />
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={8}>
|
||||
<Card style={{ borderRadius: 12, borderTop: '3px solid #6B8CA8' }}>
|
||||
<div style={{
|
||||
background: '#fff', borderRadius: 12, padding: '28px 32px',
|
||||
border: '1px solid #EBE5DB',
|
||||
borderTop: '3px solid #6B8CA8',
|
||||
}}>
|
||||
<Statistic title="待开播" value={pendingCount} loading={loading}
|
||||
prefix={<ClockCircleOutlined style={{ color: '#6B8CA8', fontSize: 18 }} />} />
|
||||
</Card>
|
||||
prefix={<ClockCircleOutlined style={{ color: '#6B8CA8', fontSize: 20 }} />} />
|
||||
</div>
|
||||
</Col>
|
||||
<Col xs={24} sm={8}>
|
||||
<Card style={{ borderRadius: 12, borderTop: '3px solid #C2693A' }}>
|
||||
<div style={{
|
||||
background: '#fff', borderRadius: 12, padding: '28px 32px',
|
||||
border: '1px solid #EBE5DB',
|
||||
borderTop: '3px solid #C2693A',
|
||||
}}>
|
||||
<Statistic title="直播总数" value={streams.length} loading={loading}
|
||||
prefix={<PlayCircleOutlined style={{ color: '#C2693A', fontSize: 18 }} />} />
|
||||
</Card>
|
||||
prefix={<PlayCircleOutlined style={{ color: '#C2693A', fontSize: 20 }} />} />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Card
|
||||
title={<Title level={4} style={{ margin: 0, fontWeight: 600 }}>最近直播</Title>}
|
||||
style={{ borderRadius: 12 }}
|
||||
>
|
||||
<div style={{
|
||||
background: '#fff', borderRadius: 12,
|
||||
border: '1px solid #EBE5DB',
|
||||
padding: '28px 32px',
|
||||
}}>
|
||||
<Title level={4} style={{ margin: '0 0 20px', fontWeight: 600 }}>最近直播</Title>
|
||||
<Table dataSource={streams.slice(0, 10)} columns={columns}
|
||||
rowKey="id" loading={loading} pagination={false} size="middle"
|
||||
locale={{ emptyText: '暂无直播数据' }} />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user