init: initial commit
This commit is contained in:
Blizzard
@@ -0,0 +1,105 @@
|
||||
import {
|
||||
Radio,
|
||||
ListMusic,
|
||||
Mic2,
|
||||
Disc3,
|
||||
TrendingUp,
|
||||
Users,
|
||||
Activity,
|
||||
ArrowUpRight,
|
||||
ArrowDownRight
|
||||
} from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card';
|
||||
|
||||
export default function Dashboard() {
|
||||
const stats = [
|
||||
{ name: '总分类数', value: '12', icon: ListMusic, change: '+2', trend: 'up' },
|
||||
{ name: '活跃频道', value: '45', icon: Mic2, change: '+5', trend: 'up' },
|
||||
{ name: '节目总数', value: '3,284', icon: Disc3, change: '+124', trend: 'up' },
|
||||
{ name: '订阅用户', value: '12.4K', icon: Users, change: '-24', trend: 'down' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-8 animate-in fade-in duration-500">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100">欢迎回来，管理员</h1>
|
||||
<p className="text-slate-500 mt-1">这是早安电台管理系统的实时概览。</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 bg-white dark:bg-slate-900 border px-4 py-2 rounded-2xl shadow-sm self-start">
|
||||
<Activity className="w-4 h-4 text-emerald-500 animate-pulse" />
|
||||
<span className="text-sm font-medium text-slate-600 dark:text-slate-400 uppercase tracking-widest">系统在线</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
{stats.map((stat) => (
|
||||
<Card key={stat.name} className="border-none shadow-sm hover:shadow-md transition-shadow group rounded-3xl overflow-hidden bg-white dark:bg-slate-900">
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-semibold text-slate-500 uppercase tracking-wider">{stat.name}</CardTitle>
|
||||
<div className={`p-2 rounded-xl group-hover:scale-110 transition-transform ${stat.trend === 'up' ? 'bg-emerald-50 text-emerald-600' : 'bg-rose-50 text-rose-600'
|
||||
}`}>
|
||||
<stat.icon className="h-5 w-5" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white mt-1">{stat.value}</div>
|
||||
<p className="text-xs text-slate-500 mt-2 flex items-center">
|
||||
<span className={`flex items-center font-medium mr-1 ${stat.trend === 'up' ? 'text-emerald-500' : 'text-rose-500'
|
||||
}`}>
|
||||
{stat.trend === 'up' ? <ArrowUpRight className="w-3 h-3 mr-0.5" /> : <ArrowDownRight className="w-3 h-3 mr-0.5" />}
|
||||
{stat.change}
|
||||
</span>
|
||||
较上月
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<Card className="lg:col-span-2 border-none shadow-sm rounded-3xl bg-white dark:bg-slate-900">
|
||||
<CardHeader className="pb-0">
|
||||
<CardTitle className="text-lg font-bold flex items-center">
|
||||
<TrendingUp className="w-5 h-5 mr-2 text-primary" />
|
||||
增长趋势分析
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="h-[300px] flex items-center justify-center text-slate-400 bg-slate-50/50 dark:bg-slate-950/20 m-6 rounded-2xl border-2 border-dashed">
|
||||
图表占位 (Growth data visualization)
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-none shadow-sm rounded-3xl bg-white dark:bg-slate-900">
|
||||
<CardHeader className="pb-0">
|
||||
<CardTitle className="text-lg font-bold flex items-center">
|
||||
<Radio className="w-5 h-5 mr-2 text-primary" />
|
||||
热门频道排行
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-6">
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3, 4, 5].map(i => (
|
||||
<div key={i} className="flex items-center justify-between p-3 rounded-2xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors cursor-pointer group">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center font-bold text-slate-500 group-hover:bg-primary group-hover:text-white transition-colors">
|
||||
#{i}
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold text-slate-900 dark:text-slate-100">早安爵士 #{i}</p>
|
||||
<p className="text-xs text-slate-400">经典古典预设</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-bold text-slate-900 dark:text-slate-100">{(1000 / i).toFixed(0)}</p>
|
||||
<p className="text-[10px] text-slate-400 uppercase tracking-tighter">收听量</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user