feat: frontend skeleton done
This commit is contained in:
simonkoson
@@ -0,0 +1,152 @@
|
||||
import { Row, Col, Card, Avatar, Tooltip } from 'antd'
|
||||
import {
|
||||
BarChartOutlined,
|
||||
EyeOutlined,
|
||||
CalendarOutlined,
|
||||
FireOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import './Dashboard.css'
|
||||
|
||||
// 假数据：近 9 期收视（基础目标 0.6，摸高目标 0.9）
|
||||
const fakeEpisodes = [
|
||||
{ id: 1, title: '第 1247 期 现代防空反导大对决', editor: 'simonkoson', share: 0.72 },
|
||||
{ id: 2, title: '第 1246 期 深海暗战', editor: 'simonkoson', share: 0.85 },
|
||||
{ id: 3, title: '第 1245 期 隐形战场', editor: 'simonkoson', share: 0.94 },
|
||||
{ id: 4, title: '第 1244 期 无人机革命', editor: 'simonkoson', share: 0.65 },
|
||||
{ id: 5, title: '第 1243 期 核潜艇传奇', editor: 'simonkoson', share: 0.58 },
|
||||
{ id: 6, title: '第 1242 期 电子战风暴', editor: 'simonkoson', share: 0.88 },
|
||||
{ id: 7, title: '第 1241 期 太空博弈', editor: 'simonkoson', share: 0.91 },
|
||||
{ id: 8, title: '第 1240 期 装甲对决', editor: 'simonkoson', share: 0.67 },
|
||||
{ id: 9, title: '第 1239 期 隐身战机', editor: 'simonkoson', share: 0.55 },
|
||||
]
|
||||
|
||||
const BASE_TARGET = 0.6
|
||||
const STRETCH_TARGET = 0.9
|
||||
|
||||
function getBarColor(share) {
|
||||
if (share > STRETCH_TARGET) return '#cf1322' // 红=优秀
|
||||
if (share >= BASE_TARGET) return '#6b8e6b' // 蓝=达标
|
||||
return '#d4a017' // 绿=待提升
|
||||
}
|
||||
|
||||
function getBarHeight(share) {
|
||||
return Math.round((share / 1.0) * 180)
|
||||
}
|
||||
|
||||
function getShortTitle(title) {
|
||||
return title.length > 12 ? title.slice(0, 12) + '...' : title
|
||||
}
|
||||
|
||||
function Dashboard() {
|
||||
return (
|
||||
<div className="dashboard">
|
||||
{/* 顶部 Banner */}
|
||||
<div className="dashboard-banner">
|
||||
<div className="banner-text">
|
||||
<h2>本月收视最佳</h2>
|
||||
<p>第 1245 期 隐形战场 · 收视份额 0.94</p>
|
||||
</div>
|
||||
<div className="banner-image-placeholder">
|
||||
<span>题图位 · 待 Phase 2 实装</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<Row gutter={16} className="kpi-row">
|
||||
<Col span={8}>
|
||||
<Card className="kpi-card">
|
||||
<div className="kpi-icon" style={{ background: '#e8f5e9' }}>
|
||||
<EyeOutlined style={{ color: '#6b8e6b', fontSize: 24 }} />
|
||||
</div>
|
||||
<div className="kpi-info">
|
||||
<span className="kpi-value">0.82</span>
|
||||
<span className="kpi-label">本期平均收视</span>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card className="kpi-card">
|
||||
<div className="kpi-icon" style={{ background: '#fff3e0' }}>
|
||||
<FireOutlined style={{ color: '#ff9800', fontSize: 24 }} />
|
||||
</div>
|
||||
<div className="kpi-info">
|
||||
<span className="kpi-value">98.6%</span>
|
||||
<span className="kpi-label">完成率</span>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card className="kpi-card">
|
||||
<div className="kpi-icon" style={{ background: '#e3f2fd' }}>
|
||||
<CalendarOutlined style={{ color: '#2196f3', fontSize: 24 }} />
|
||||
</div>
|
||||
<div className="kpi-info">
|
||||
<span className="kpi-value">6</span>
|
||||
<span className="kpi-label">未来待排期</span>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 三卡片区域 */}
|
||||
<Row gutter={16} className="cards-row">
|
||||
{/* 热点雷达 */}
|
||||
<Col span={8}>
|
||||
<Card className="content-card" title="热点雷达">
|
||||
<div className="placeholder-text">
|
||||
<BarChartOutlined style={{ fontSize: 32, color: '#ccc', marginBottom: 8 }} />
|
||||
<p>模块 H · Phase 4c 实施</p>
|
||||
<small>热点雷达将在 Phase 4c 开发，作为编导个人首页的核心功能</small>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 近 9 期收视柱图 */}
|
||||
<Col span={8}>
|
||||
<Card className="content-card" title="近 9 期收视">
|
||||
<div className="chart-container">
|
||||
<div className="bars-wrapper">
|
||||
{fakeEpisodes.map((ep) => (
|
||||
<div key={ep.id} className="bar-item">
|
||||
<Tooltip title={`${ep.title} · ${ep.share}`}>
|
||||
<div
|
||||
className="bar"
|
||||
style={{
|
||||
height: getBarHeight(ep.share),
|
||||
backgroundColor: getBarColor(ep.share),
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<div className="bar-label-top">{getShortTitle(ep.title)}</div>
|
||||
<div className="bar-label-bottom">
|
||||
<Avatar size={20} style={{ fontSize: 10 }}>{ep.editor[0]}</Avatar>
|
||||
<span>{ep.editor}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="chart-legend">
|
||||
<span className="legend-item"><span className="dot" style={{ background: '#cf1322' }}></span>红=优秀</span>
|
||||
<span className="legend-item"><span className="dot" style={{ background: '#6b8e6b' }}></span>蓝=达标</span>
|
||||
<span className="legend-item"><span className="dot" style={{ background: '#d4a017' }}></span>绿=待提升</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 排播计划 */}
|
||||
<Col span={8}>
|
||||
<Card className="content-card" title="排播计划">
|
||||
<div className="placeholder-text">
|
||||
<CalendarOutlined style={{ fontSize: 32, color: '#ccc', marginBottom: 8 }} />
|
||||
<p>模块 F · Phase 4b 实施</p>
|
||||
<small>甘特图排期将在 Phase 4b 开发，使用 frappe-gantt 实现拖拽排期</small>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Dashboard
|
||||
Reference in New Issue
Block a user