yhlhoh/live
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI全面精雕: 米兰色衬线体系 + 全页质感升级

Browse Source 
主题层:
- 更精细的色彩层级(primaryBg/hover/active等语义色)
- 字号体系: heading1-5, fontSize 15 基准
- 控件高度 40/48/32 三档, 圆角 6/10
- 三层阴影分层, motionDuration

首页:
- 大幅面渐变英雄区(64px padding, 40px 标题)
- 直播卡片: 暖棕渐变封面, LIVE 脉冲红点标签
- 悬停 transform+shadow 过渡, 描边高亮

仪表盘:
- 彩色顶部边框卡片(绿/蓝/棕), 品牌名+标语头部

登录页:
- 48px 大内边距, 返回首页链接

直播列表:
- 描述行内展示, 推流码截断, 操作图标组

节点页:
- 发光圆点在线指示器, 三色 CPU/内存进度阈值
- 在线/离线统计, Origin 标签

播放页:
- 暗色 #1A1815 背景, 毛玻璃顶栏
- 圆角视频容器, box-shadow 景深
- document.title 动态标题
This commit is contained in:
admin committed 2026-08-10 16:30:39 +08:00
1 parent d4a3742136
commit f0b8c2d64f
8 files changed
+461 -218
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/viewer/pages/HomePage.tsx
+71 -37
View File
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Row, Col, Card, Typography, Tag, Skeleton, Empty } from 'antd'
import { Row, Col, Card, Typography, Tag, Skeleton, Empty, Divider } from 'antd'
import { FireOutlined, ClockCircleOutlined, VideoCameraOutlined } from '@ant-design/icons'
import { fetchStreams, type StreamInfo } from '../../api/streams'
import { useBrand } from '../../brand/BrandContext'
@@ -8,7 +8,7 @@ import { useBrand } from '../../brand/BrandContext'
const { Title, Text } = Typography
const statusMeta: Record<string, { color: string; label: string; icon: React.ReactNode }> = {
live: { color: 'red', label: '直播中', icon: <FireOutlined /> },
live: { color: 'red', label: 'LIVE', icon: <FireOutlined /> },
pending: { color: 'blue', label: '待开播', icon: <ClockCircleOutlined /> },
ended: { color: 'default', label: '已结束', icon: null },
cancelled: { color: 'default', label: '已取消', icon: null },
@@ -30,86 +30,115 @@ export default function HomePage() {
})
return (
<div style={{ minHeight: '100vh', background: '#F6F3ED' }}>
<div style={{ minHeight: '100vh', background: '#F6F3ED', display: 'flex', flexDirection: 'column' }}>
<div style={{
background: '#FBF9F6',
borderBottom: '1px solid #E8E3D8',
padding: '56px 48px 48px',
background: 'linear-gradient(180deg, #FCFAF7 0%, #F6F3ED 100%)',
borderBottom: '1px solid #E6E0D6',
padding: '64px 48px 56px',
}}>
<div style={{ maxWidth: 1280, margin: '0 auto' }}>
<div style={{ maxWidth: 1200, margin: '0 auto' }}>
{brand.brand_logo_url && (
<img src={brand.brand_logo_url} alt={brand.brand_name}
style={{ height: 40, marginBottom: 16, display: 'block' }} />
style={{ height: 44, marginBottom: 20 }} />
)}
<Title level={1} style={{
margin: 0, fontWeight: 600, letterSpacing: -1, fontSize: 36,
<Title style={{
margin: 0, fontWeight: 600, fontSize: 40, letterSpacing: -1.5, lineHeight: 1.2,
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
}}>
{brand.brand_name}
</Title>
{brand.brand_tagline && (
<Text type="secondary" style={{ fontSize: 17, marginTop: 8, display: 'block', fontWeight: 400 }}>
<Text style={{ fontSize: 18, marginTop: 12, display: 'block', fontWeight: 400, color: '#5C5952' }}>
{brand.brand_tagline}
</Text>
)}
</div>
</div>
<div style={{ maxWidth: 1280, margin: '0 auto', padding: '40px 48px' }}>
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 24 }}>
<div style={{ flex: 1, maxWidth: 1200, margin: '0 auto', width: '100%', padding: '44px 48px' }}>
<div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 28 }}>
<Title level={3} style={{ margin: 0, fontWeight: 600 }}>直播频道</Title>
<Text type="secondary">{sorted.length} 个直播</Text>
<Text type="secondary" style={{ fontSize: 15 }}>共 {sorted.length} 个</Text>
</div>
{loading ? (
<Row gutter={[24, 24]}>
{[1,2,3,4,5,6].map(i => (
<Row gutter={[28, 28]}>
{[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>
<Card style={{ borderRadius: 12 }}><Skeleton active paragraph={{ rows: 3 }} /></Card>
</Col>
))}
</Row>
) : sorted.length === 0 ? (
<Empty description="暂无直播" style={{ marginTop: 80 }} />
<div style={{
textAlign: 'center', padding: '80px 0',
background: '#FCFAF7', borderRadius: 12, border: '1px solid #E6E0D6',
}}>
<VideoCameraOutlined style={{ fontSize: 48, color: '#B0ABA3', marginBottom: 16 }} />
<Title level={4} type="secondary" style={{ fontWeight: 400 }}>暂无直播</Title>
<Text type="secondary">当前没有正在播出或排期的直播节目</Text>
</div>
) : (
<Row gutter={[24, 24]}>
<Row gutter={[28, 28]}>
{sorted.map(s => {
const meta = statusMeta[s.status] ?? statusMeta.pending
const isLive = s.status === 'live'
return (
<Col key={s.id} xs={24} sm={12} md={8} lg={8}>
<Card hoverable style={{ overflow: 'hidden', borderRadius: 10, transition: 'box-shadow 0.2s, transform 0.2s' }}
<Card
hoverable
style={{
overflow: 'hidden',
borderRadius: 12,
borderColor: isLive ? '#E0C8B6' : '#E6E0D6',
transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
}}
bodyStyle={{ padding: '20px 24px' }}
cover={
<div style={{
height: 180, position: 'relative',
height: 192,
position: 'relative',
background: s.cover_url
? `url(${s.cover_url}) center/cover no-repeat`
: 'linear-gradient(135deg, #3D3226 0%, #5C4A3A 50%, #2B241C 100%)',
: 'linear-gradient(135deg, #3D3226 0%, #5C4A3A 50%, #3D3226 100%)',
display: 'flex', alignItems: 'center', justifyContent: 'center',
}}>
{!s.cover_url && <VideoCameraOutlined style={{ color: 'rgba(232,227,216,0.15)', fontSize: 52 }} />}
{s.status === 'live' && (
<div style={{ position: 'absolute', top: 12, left: 12 }}>
<Tag color="red" style={{ margin: 0, fontWeight: 600, border: 0, fontSize: 12 }}>
{meta.icon} {meta.label}
</Tag>
{!s.cover_url && (
<VideoCameraOutlined style={{ color: 'rgba(232,227,216,0.08)', fontSize: 64 }} />
)}
{isLive && (
<div style={{
position: 'absolute', top: 14, left: 14,
display: 'flex', alignItems: 'center', gap: 6,
background: '#C62828', color: '#fff',
padding: '3px 10px', borderRadius: 4,
fontSize: 12, fontWeight: 600, letterSpacing: 0.5,
}}>
<span style={{
width: 8, height: 8, borderRadius: '50%',
background: '#fff', display: 'inline-block',
animation: 'pulse 2s infinite',
}} />
LIVE
</div>
)}
{s.status !== 'live' && (
{!isLive && (
<div style={{ position: 'absolute', bottom: 12, left: 12 }}>
<Tag color={meta.color} style={{ margin: 0, fontWeight: 600, border: 0, fontSize: 12 }}>
<Tag color={meta.color} style={{ margin: 0, fontWeight: 500, border: 0, fontSize: 12 }}>
{meta.icon} {meta.label}
</Tag>
</div>
)}
</div>
}
bodyStyle={{ padding: '18px 22px' }}
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>}
/>
<Text strong style={{ fontSize: 16, display: 'block', marginBottom: 4 }} ellipsis>
{s.title}
</Text>
<Text type="secondary" style={{ fontSize: 13, lineHeight: 1.5 }} ellipsis>
{s.description || '暂无简介'}
</Text>
</Card>
</Col>
)
@@ -118,8 +147,13 @@ export default function HomePage() {
)}
</div>
<div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px 48px', textAlign: 'center' }}>
<Text type="secondary" style={{ fontSize: 13 }}>
<div style={{
borderTop: '1px solid #E6E0D6',
padding: '24px 48px',
textAlign: 'center',
background: '#FCFAF7',
}}>
<Text style={{ fontSize: 13, color: '#8B867D' }}>
{brand.brand_name} &copy; {new Date().getFullYear()}
</Text>
</div>
frontend/src/viewer/pages/WatchPage.tsx
+63 -20
View File
@@ -68,41 +68,84 @@ export default function WatchPage() {
}
}, [activeLine, activeQuality, info])
if (loading) return <div style={{ minHeight: '100vh', background: '#000' }}><Skeleton active /></div>
if (!info) return <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#F6F3ED' }}><Empty description="未找到该直播" /></div>
useEffect(() => { document.title = info ? `${info.title} - ${brand.brand_name}` : brand.brand_name }, [info, brand])
const statusLabel = info.status === 'live' ? '直播中' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status
if (loading) return (
<div style={{ minHeight: '100vh', background: '#1A1815', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Spin size="large" />
</div>
)
if (!info) return (
<div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#F6F3ED' }}>
<Empty description="未找到该直播" />
</div>
)
const statusLabel = info.status === 'live' ? 'LIVE' : info.status === 'pending' ? '待开播' : info.status === 'ended' ? '已结束' : info.status
return (
<div style={{ minHeight: '100vh', background: '#141410', display: 'flex', flexDirection: 'column' }}>
<div style={{ height: 56, minHeight: 56, background: 'rgba(20,20,16,0.97)', borderBottom: '1px solid rgba(232,227,216,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 24px' }}>
<Space>
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#8B867D' }} onClick={() => navigate('/')}>返回</Button>
<div style={{ minHeight: '100vh', background: '#1A1815', display: 'flex', flexDirection: 'column' }}>
<div style={{
height: 56, minHeight: 56,
background: 'rgba(26,24,21,0.98)',
borderBottom: '1px solid rgba(230,224,214,0.06)',
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
padding: '0 28px',
backdropFilter: 'blur(12px)',
}}>
<Space size={16}>
<Button type="text" icon={<ArrowLeftOutlined />} style={{ color: '#8B867D' }}
onClick={() => navigate('/')}>
{brand.brand_name}
</Button>
<div style={{ width: 1, height: 20, background: 'rgba(230,224,214,0.1)' }} />
<div>
<Title level={5} style={{ color: '#E8E3D8', margin: 0, fontWeight: 600 }}>{info.title}</Title>
<Tag color={info.status === 'live' ? 'green' : 'default'} style={{ marginLeft: 8, fontWeight: 600 }}>{statusLabel}</Tag>
<Text style={{ color: '#E6E0D6', fontSize: 15, fontWeight: 500 }}>{info.title}</Text>
<Tag color={info.status === 'live' ? 'green' : 'default'}
style={{ marginLeft: 10, fontWeight: 600, fontSize: 11 }}>
{statusLabel}
</Tag>
</div>
</Space>
<Space size="middle">
<div style={{ color: '#8B867D', fontSize: 13, display: 'flex', alignItems: 'center', gap: 4 }}>
<SignalFilled style={{ color: info.multicast_available ? '#5B8C5A' : '#5C5952' }} />
<Space size={16}>
<div style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#8B867D', fontSize: 13 }}>
<SignalFilled style={{ color: info.multicast_available ? '#5B8C5A' : '#5C5952', fontSize: 12 }} />
{info.multicast_available ? '组播' : '单播'}
</div>
<Select value={activeQuality} onChange={setActiveQuality} style={{ width: 110 }} size="small"
<Select value={activeQuality} onChange={setActiveQuality} style={{ width: 100 }} size="small"
options={info.qualities.map(q => ({ value: q.label, label: q.label }))} placeholder="清晰度" />
<Select value={activeLine} onChange={setActiveLine} style={{ width: 160 }} size="small"
options={info.lines.map(l => ({ value: l.node_id, label: `${l.node_name} (${l.weight})` }))}
options={info.lines.map(l => ({ value: l.node_id, label: `${l.node_name}` }))}
prefix={<WifiOutlined />} placeholder="线路" />
</Space>
</div>
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
<div style={{ width: '100%', maxWidth: 1280, aspectRatio: '16/9', maxHeight: 'calc(100vh - 56px - 48px)', background: '#000', position: 'relative', borderRadius: 8, overflow: 'hidden' }}>
<video ref={videoRef} controls autoPlay playsInline style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
<div style={{
flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
padding: '32px',
}}>
<div style={{
width: '100%', maxWidth: 1280,
aspectRatio: '16 / 9', maxHeight: 'calc(100vh - 120px)',
background: '#0A0A08', position: 'relative',
borderRadius: 10, overflow: 'hidden',
boxShadow: '0 8px 40px rgba(0,0,0,0.4)',
}}>
<video ref={videoRef} controls autoPlay playsInline
style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
{info.status !== 'live' && (
<div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(0,0,0,0.85)' }}>
<Space direction="vertical" align="center">
<div style={{
position: 'absolute', inset: 0,
display: 'flex', alignItems: 'center', justifyContent: 'center',
background: 'rgba(10,10,8,0.9)',
}}>
<Space direction="vertical" align="center" size={16}>
<Spin size="large" />
<Text style={{ color: 'rgba(232,227,216,0.6)', fontSize: 16, fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif' }}>
<Text style={{
color: '#8B867D', fontSize: 17,
fontFamily: '"Source Serif 4", "Noto Serif SC", Georgia, serif',
}}>
等待主播开播...
</Text>
</Space>