sundynix/sundynix-radio-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化样式

Browse Source
This commit is contained in:
Blizzard
2026-03-06 16:53:48 +08:00
parent 4dfd7f87c7
commit db359955ed
10 changed files with 1140 additions and 979 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Dashboard/index.tsx
+282 -146
View File
@@ -1,5 +1,4 @@
import {
Radio,
ListMusic,
Mic2,
Disc3,
@@ -9,7 +8,11 @@ import {
ArrowUpRight,
ArrowDownRight,
Play,
Zap
Zap,
Crown,
Star,
Heart,
Flame
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card';
import { Button } from '../../components/ui/button';
@@ -21,28 +24,39 @@ import {
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer
ResponsiveContainer,
BarChart,
Bar,
Cell
} from 'recharts';
const chartData = [
{ name: '06:00', morning: 400, evening: 240 },
{ name: '09:00', morning: 700, evening: 300 },
{ name: '12:00', morning: 600, evening: 450 },
{ name: '15:00', morning: 800, evening: 500 },
{ name: '18:00', morning: 500, evening: 900 },
{ name: '21:00', morning: 300, evening: 1200 },
{ name: '00:00', morning: 200, evening: 800 },
{ name: '06:00', morning: 400, evening: 240, active: 300 },
{ name: '09:00', morning: 700, evening: 300, active: 550 },
{ name: '12:00', morning: 600, evening: 450, active: 480 },
{ name: '15:00', morning: 800, evening: 500, active: 720 },
{ name: '18:00', morning: 500, evening: 900, active: 680 },
{ name: '21:00', morning: 300, evening: 1200, active: 850 },
{ name: '00:00', morning: 200, evening: 800, active: 400 },
];
const categoryData = [
{ name: '流行', value: 400, color: '#D28F4F' },
{ name: '爵士', value: 300, color: '#A64452' },
{ name: '民谣', value: 200, color: '#E29A66' },
{ name: '古典', value: 278, color: '#8C7E6C' },
{ name: '电音', value: 189, color: '#4A3A2C' },
];
export default function Dashboard() {
const stats = [
{
name: '总分类数',
name: '核心类目',
value: '12',
icon: ListMusic,
change: '+2',
trend: 'up',
color: 'from-[#D28F4F] to-[#A64452]',
color: 'from-[#D28F4F] to-[#E29A66]',
iconColor: 'text-[#D28F4F]'
},
{
@@ -51,17 +65,17 @@ export default function Dashboard() {
icon: Mic2,
change: '+5',
trend: 'up',
color: 'from-[#6C5CE7] to-[#A64452]',
iconColor: 'text-[#6C5CE7]'
color: 'from-orange-400 to-rose-400',
iconColor: 'text-orange-500'
},
{
name: '节目总数',
name: '声波单元',
value: '3,284',
icon: Disc3,
change: '+124',
trend: 'up',
color: 'from-[#D28F4F] to-[#E29A66]',
iconColor: 'text-[#D28F4F]'
color: 'from-[#A64452] to-[#D28F4F]',
iconColor: 'text-[#A64452]'
},
{
name: '订阅用户',
@@ -75,111 +89,145 @@ export default function Dashboard() {
];
return (
<div className="space-y-10 pb-10">
<div className="space-y-8 md:space-y-12 pb-20 overflow-x-hidden">
{/* Header Section */}
<motion.div
initial={{ opacity: 0, y: 20 }}
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
className="flex flex-col md:flex-row md:items-center justify-between gap-6"
transition={{ duration: 0.8, ease: "easeOut" }}
className="flex flex-col xl:flex-row xl:items-end justify-between gap-8 relative px-2"
>
<div>
<h1 className="text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-4">
欢迎回来，管理员
<span className="text-3xl animate-bounce">☕</span>
</h1>
<p className="text-[#8C7E6C] font-medium mt-3 flex items-center gap-3">
<div className="w-8 h-8 rounded-xl bg-[#FAF5E6] flex items-center justify-center shadow-sm border border-[#D28F4F]/10">
<Zap className="w-4 h-4 text-[#D28F4F] fill-[#D28F4F]" />
<div className="relative z-10">
<div className="flex items-center gap-3 mb-4">
<span className="px-4 py-1.5 rounded-full bg-[#D28F4F]/10 border border-[#D28F4F]/20 text-[#D28F4F] text-[10px] font-black uppercase tracking-[0.3em]">
System Control Panel
</span>
<div className="flex -space-x-2">
{[1, 2, 3].map(i => (
<div key={i} className="w-6 h-6 rounded-full border-2 border-[#FAF5E6] overflow-hidden bg-white shadow-sm ring-1 ring-[#D28F4F]/10">
<img src={`https://i.pravatar.cc/100?u=${i}`} alt="" className="w-full h-full object-cover" />
</div>
))}
</div>
系统运行良好。当前有 <span className="text-[#D28F4F] font-black underline decoration-2 underline-offset-4">1,248</span> 名听众正在共度美好时光。
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-black tracking-tighter text-[#4A3A2C] leading-[1.1]">
晨间灵感，<br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#D28F4F] to-[#A64452] italic font-serif px-1">全声汇</span> 管理系统
</h1>
<p className="text-[#8C7E6C] font-medium mt-6 text-base md:text-lg max-w-2xl leading-relaxed flex items-center gap-3 md:gap-4">
<Zap className="w-5 h-5 text-amber-500 fill-amber-500 flex-shrink-0" />
<span>当前有 <span className="text-[#D28F4F] font-black underline decoration-4 underline-offset-8">1,248</span> 位听众在不同时区的频道中共振，<span className="text-[#4A3A2C]/40 italic hidden sm:inline">让声音温暖每一个瞬间。</span></span>
</p>
</div>
<div className="flex items-center space-x-4 bg-white/40 backdrop-blur-3xl border border-[#D28F4F]/10 px-8 py-4 rounded-[2.5rem] shadow-glass self-start relative group">
<div className="relative">
<Activity className="w-5 h-5 text-emerald-500" />
<div className="absolute inset-0 bg-emerald-500 blur-md opacity-40 animate-pulse" />
<div className="flex items-center gap-6 self-start xl:self-end">
<div className="bg-white/60 backdrop-blur-3xl border border-white/40 p-1.5 rounded-[2.5rem] shadow-glass flex items-center gap-2 pr-6">
<div className="relative p-3 md:p-4 bg-emerald-500/10 rounded-full group overflow-hidden">
<Activity className="w-4 h-4 md:w-5 md:h-5 text-emerald-500 relative z-10" />
<div className="absolute inset-0 bg-emerald-500/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity" />
</div>
<div className="flex flex-col">
<span className="text-[10px] font-black text-[#8C7E6C] uppercase tracking-widest opacity-40">Network Status</span>
<span className="text-[10px] md:text-xs font-black text-[#4A3A2C]">高带宽低延迟运行中</span>
</div>
</div>
<span className="text-[11px] font-black text-[#8C7E6C] uppercase tracking-[0.3em]">实时广播中</span>
<div className="absolute -top-1 -right-1 w-3 h-3 bg-[#D28F4F] rounded-full shadow-[0_0_10px_#D28F4F]" />
</div>
</motion.div>
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
{/* Stats Grid */}
<div className="grid gap-6 md:gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 px-2">
{stats.map((stat, index) => (
<motion.div
key={stat.name}
initial={{ opacity: 0, scale: 0.9 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: index * 0.1, type: "spring", stiffness: 100 }}
initial={{ opacity: 0, scale: 0.9, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
transition={{ delay: index * 0.1, duration: 0.5 }}
whileHover={{ y: -8, scale: 1.02 }}
className="relative group"
>
<Card className="glass-card warm-noise border-none group relative overflow-hidden h-full rounded-[2.5rem] p-4">
<div className={`absolute -top-10 -right-10 w-40 h-40 bg-gradient-to-br ${stat.color} opacity-0 group-hover:opacity-10 blur-3xl transition-opacity duration-700`} />
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-6">
<CardTitle className="text-[11px] font-black text-[#8C7E6C] uppercase tracking-[0.2em]">{stat.name}</CardTitle>
<div className={`p-4 rounded-[1.5rem] transition-all duration-700 shadow-sm border border-white/40 bg-white/90 ${stat.iconColor} group-hover:rotate-12 group-hover:scale-110 group-hover:shadow-[0_20px_40px_rgba(0,0,0,0.05)]`}>
<stat.icon className="h-6 w-6" />
<Card className="glass-card warm-noise border-none h-full rounded-[2.5rem] md:rounded-[3rem] p-6 md:p-8 relative overflow-hidden shadow-sm group-hover:shadow-2xl group-hover:shadow-[#D28F4F]/10 transition-all duration-500">
<div className={`absolute -top-20 -right-20 w-60 h-60 bg-gradient-to-br ${stat.color} opacity-0 group-hover:opacity-10 blur-[80px] transition-opacity duration-1000`} />
<div className="flex justify-between items-start mb-8 md:mb-10">
<div className={`p-4 md:p-5 rounded-[1.5rem] md:rounded-[1.8rem] bg-white shadow-xl transition-all duration-700 ${stat.iconColor} md:group-hover:rotate-[15deg] md:group-hover:scale-110 border border-[#4A3A2C]/5`}>
<stat.icon className="h-6 w-6 md:h-7 md:w-7" />
</div>
</CardHeader>
<CardContent>
<div className="text-4xl font-black tracking-tight text-[#4A3A2C] mb-4">{stat.value}</div>
<div className="flex items-center justify-between">
<div className="flex items-center bg-white/60 px-3 py-1.5 rounded-full border border-white/40 backdrop-blur-md shadow-sm">
<span className={`flex items-center text-[11px] font-black ${stat.trend === 'up' ? 'text-emerald-600' : 'text-rose-600'}`}>
{stat.trend === 'up' ? <ArrowUpRight className="w-3.5 h-3.5 mr-1" /> : <ArrowDownRight className="w-3.5 h-3.5 mr-1" />}
{stat.change}
</span>
</div>
<span className="text-[10px] font-black text-[#8C7E6C]/40 uppercase tracking-[0.2em]">增长率</span>
<div className={`flex items-center px-3 md:px-4 py-1.5 md:py-2 rounded-full border shadow-inner ${stat.trend === 'up' ? 'bg-emerald-50 border-emerald-100 text-emerald-600' : 'bg-rose-50 border-rose-100 text-rose-600'}`}>
<span className="text-[10px] md:text-[11px] font-black flex items-center">
{stat.trend === 'up' ? <ArrowUpRight className="w-3 md:w-3.5 h-3 md:h-3.5 mr-1" /> : <ArrowDownRight className="w-3 md:w-3.5 h-3 md:h-3.5 mr-1" />}
{stat.change}
</span>
</div>
</CardContent>
</div>
<div className="space-y-1">
<p className="text-[10px] md:text-[11px] font-black text-[#8C7E6C] uppercase tracking-[0.3em] opacity-40">{stat.name}</p>
<h3 className="text-3xl md:text-4xl font-black tracking-tighter text-[#4A3A2C] tabular-nums">{stat.value}</h3>
</div>
<div className="absolute bottom-6 md:bottom-8 right-6 md:right-8 opacity-0 group-hover:opacity-100 transition-all translate-x-4 group-hover:translate-x-0 hidden md:flex">
<div className="w-10 h-10 rounded-full bg-[#FAF5E6] flex items-center justify-center border border-[#D28F4F]/10">
<TrendingUp className="w-4 h-4 text-[#D28F4F]" />
</div>
</div>
</Card>
</motion.div>
))}
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Main Content Sections */}
<div className="grid grid-cols-1 xl:grid-cols-12 gap-8 md:gap-10 px-2">
{/* Large Chart Card */}
<motion.div
className="lg:col-span-2"
initial={{ opacity: 0, x: -20 }}
className="xl:col-span-8"
initial={{ opacity: 0, x: -30 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }}
transition={{ delay: 0.4, duration: 0.8 }}
>
<Card className="glass-card warm-noise border-none h-full overflow-hidden rounded-[3rem] p-6 relative z-10">
<CardHeader className="p-10 border-b border-[#4A3A2C]/5 flex flex-row items-center justify-between bg-[#FAF5E6]/40 rounded-t-[2.5rem]">
<div>
<CardTitle className="text-2xl font-black flex items-center tracking-tight text-[#4A3A2C]">
<div className="w-10 h-10 rounded-[1.2rem] bg-[#D28F4F] flex items-center justify-center mr-4 shadow-lg shadow-[#D28F4F]/20">
<TrendingUp className="w-5 h-5 text-white" />
<Card className="glass-card warm-noise border-none h-full rounded-[2.5rem] md:rounded-[3.5rem] overflow-hidden relative shadow-xl">
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-[#D28F4F]/5 to-transparent pointer-events-none" />
<CardHeader className="p-8 md:p-12 border-b border-[#4A3A2C]/5 flex flex-col md:flex-row md:items-center justify-between bg-[#FAF5E6]/40 backdrop-blur-2xl gap-6">
<div className="space-y-2">
<div className="flex items-center gap-4">
<div className="w-10 h-10 md:w-12 md:h-12 rounded-xl md:rounded-2xl bg-[#D28F4F] flex items-center justify-center shadow-xl shadow-[#D28F4F]/20">
<Activity className="w-5 h-5 md:w-6 md:h-6 text-white" />
</div>
收听热度分布
</CardTitle>
<p className="text-[#8C7E6C] text-sm mt-2 font-medium">监测不同时段的声波流向与用户留存</p>
</div>
<div className="flex gap-6">
<div className="flex items-center gap-3">
<div className="w-3 h-3 rounded-full bg-[#D28F4F] shadow-[0_0_12px_#D28F4F]" />
<span className="text-xs font-black text-[#8C7E6C] uppercase underline decoration-[#D28F4F]/20 underline-offset-4">晨间氛围</span>
<CardTitle className="text-2xl md:text-3xl font-black text-[#4A3A2C] tracking-tight">声波极化趋势</CardTitle>
</div>
<div className="flex items-center gap-3">
<div className="w-3 h-3 rounded-full bg-[#A64452] shadow-[0_0_12px_#A64452]" />
<span className="text-xs font-black text-[#8C7E6C] uppercase underline decoration-[#A64452]/20 underline-offset-4">傍晚陪伴</span>
<p className="text-[#8C7E6C] text-xs md:text-sm font-medium ml-14 md:ml-16 italic">实时捕捉全网音频流的活跃度与用户共鸣度</p>
</div>
<div className="flex gap-6 md:gap-10">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-2 md:gap-3">
<div className="w-2.5 h-2.5 rounded-full bg-[#D28F4F] shadow-[0_0_12px_#D28F4F]" />
<span className="text-[9px] md:text-[10px] font-black text-[#4A3A2C] uppercase tracking-widest">晨间频率</span>
</div>
<p className="text-lg md:text-xl font-black text-[#D28F4F] ml-5 md:ml-6 tabular-nums">1.2M</p>
</div>
<div className="flex flex-col gap-1">
<div className="flex items-center gap-2 md:gap-3">
<div className="w-2.5 h-2.5 rounded-full bg-[#A64452] shadow-[0_0_12px_#A64452]" />
<span className="text-[9px] md:text-[10px] font-black text-[#4A3A2C] uppercase tracking-widest">傍晚余辉</span>
</div>
<p className="text-lg md:text-xl font-black text-[#A64452] ml-5 md:ml-6 tabular-nums">0.8M</p>
</div>
</div>
</CardHeader>
<CardContent className="p-10">
<div className="h-[400px] w-full">
<CardContent className="p-6 md:p-12 pb-16 md:pb-20">
<div className="h-[300px] md:h-[450px] w-full">
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={chartData}>
<AreaChart data={chartData} margin={{ top: 20, right: 30, left: -20, bottom: 0 }}>
<defs>
<linearGradient id="colorMorning" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#D28F4F" stopOpacity={0.3} />
<stop offset="5%" stopColor="#D28F4F" stopOpacity={0.4} />
<stop offset="95%" stopColor="#D28F4F" stopOpacity={0} />
</linearGradient>
<linearGradient id="colorEvening" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#A64452" stopOpacity={0.3} />
<stop offset="5%" stopColor="#A64452" stopOpacity={0.4} />
<stop offset="95%" stopColor="#A64452" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#4A3A2C" strokeOpacity={0.05} />
<CartesianGrid strokeDasharray="6 6" vertical={false} stroke="#4A3A2C" strokeOpacity={0.08} />
<XAxis
dataKey="name"
axisLine={false}
@@ -189,33 +237,53 @@ export default function Dashboard() {
/>
<YAxis hide />
<Tooltip
contentStyle={{
borderRadius: '24px',
border: 'none',
boxShadow: '0 20px 50px rgba(74, 58, 44, 0.1)',
background: 'rgba(255, 253, 235, 0.9)',
backdropFilter: 'blur(20px)',
padding: '16px',
color: '#4A3A2C'
cursor={{ stroke: '#D28F4F', strokeWidth: 2, strokeDasharray: '10 10' }}
content={({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="bg-white/95 backdrop-blur-2xl p-4 md:p-6 rounded-[1.5rem] md:rounded-[2rem] shadow-2xl border border-[#D28F4F]/10 min-w-[160px] md:min-w-[200px]">
<p className="text-[9px] font-black text-[#8C7E6C] uppercase tracking-[0.2em] mb-4 border-b border-[#4A3A2C]/5 pb-2">{label} WAVE REPORT</p>
<div className="space-y-3 md:space-y-4">
<div className="flex items-center justify-between gap-4 md:gap-6">
<div className="flex items-center gap-2 md:gap-3">
<div className="w-2.5 h-2.5 rounded-full bg-[#D28F4F]" />
<span className="text-xs md:text-sm font-black text-[#4A3A2C]">晨间</span>
</div>
<span className="text-base md:text-lg font-black text-[#D28F4F]">{payload[0].value}</span>
</div>
<div className="flex items-center justify-between gap-4 md:gap-6">
<div className="flex items-center gap-2 md:gap-3">
<div className="w-2.5 h-2.5 rounded-full bg-[#A64452]" />
<span className="text-xs md:text-sm font-black text-[#4A3A2C]">傍晚</span>
</div>
<span className="text-base md:text-lg font-black text-[#A64452]">{payload[1].value}</span>
</div>
</div>
</div>
);
}
return null;
}}
/>
<Area
type="monotone"
dataKey="morning"
stroke="#D28F4F"
strokeWidth={5}
strokeWidth={4}
fillOpacity={1}
fill="url(#colorMorning)"
animationDuration={2000}
animationDuration={2500}
activeDot={{ r: 8, fill: '#D28F4F', stroke: '#fff', strokeWidth: 3 }}
/>
<Area
type="monotone"
dataKey="evening"
stroke="#A64452"
strokeWidth={5}
strokeWidth={4}
fillOpacity={1}
fill="url(#colorEvening)"
animationDuration={2000}
animationDuration={2500}
activeDot={{ r: 8, fill: '#A64452', stroke: '#fff', strokeWidth: 3 }}
/>
</AreaChart>
</ResponsiveContainer>
@@ -224,64 +292,132 @@ export default function Dashboard() {
</Card>
</motion.div>
{/* Categories & Trending */}
<motion.div
initial={{ opacity: 0, x: 20 }}
className="xl:col-span-4 space-y-8 md:space-y-10"
initial={{ opacity: 0, x: 30 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.5 }}
transition={{ delay: 0.6, duration: 0.8 }}
>
<Card className="glass-card warm-noise border-none h-full overflow-hidden rounded-[3rem] p-6 relative z-10">
<CardHeader className="p-8 border-b border-[#4A3A2C]/5 bg-[#FAF5E6]/40 rounded-t-[2.5rem]">
<CardTitle className="text-xl font-black flex items-center tracking-tight text-[#4A3A2C] uppercase tracking-widest">
<div className="w-10 h-10 rounded-[1.2rem] bg-white flex items-center justify-center mr-4 shadow-sm">
<Radio className="w-5 h-5 text-[#D28F4F]" />
</div>
热门频道排行
</CardTitle>
</CardHeader>
<CardContent className="p-8">
<div className="space-y-6">
{[1, 2, 3, 4, 5].map(i => (
<div
key={i}
className={`flex items-center justify-between p-5 rounded-[2rem] transition-all cursor-pointer group hover:scale-[1.03] border border-[#D28F4F]/5 relative overflow-hidden ${i === 1 ? 'bg-gradient-to-r from-[#D28F4F]/10 to-[#A64452]/5 border-[#D28F4F]/20 shadow-sm' : 'hover:bg-white/60'
}`}
>
<div className="flex items-center space-x-6 relative z-10">
<div className="w-14 h-14 rounded-2xl overflow-hidden relative shadow-md ring-4 ring-white">
<img src={`https://picsum.photos/seed/radio${i}/100/100`} alt="" className="object-cover w-full h-full group-hover:scale-125 transition-transform duration-1000" />
<div className="absolute inset-0 bg-[#4A3A2C]/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
<Play className="w-6 h-6 text-white fill-white" />
</div>
</div>
<div>
<div className="flex items-center gap-3">
<p className="text-base font-black text-[#4A3A2C]">爵士小镇 #{i}</p>
{i <= 3 && (
<div className={`w-2 h-2 rounded-full ${i === 1 ? 'bg-[#D28F4F]' : i === 2 ? 'bg-[#8C7E6C]' : 'bg-[#E29A66]'} shadow-[0_0_10px_currentColor]`} />
)}
</div>
<div className="audio-wave mt-2 opacity-40 group-hover:opacity-100 transition-opacity flex gap-0.5">
<span className="w-1 h-3 bg-[#D28F4F] rounded-full animate-wave" />
<span className="w-1 h-5 bg-[#D28F4F] rounded-full animate-wave-slow" />
<span className="w-1 h-2 bg-[#D28F4F] rounded-full animate-wave" />
<span className="w-1 h-4 bg-[#D28F4F] rounded-full animate-wave-slow" />
</div>
</div>
</div>
<div className="text-right relative z-10">
<p className="text-lg font-black text-[#4A3A2C]">{(1240 / i).toFixed(0)}</p>
<p className="text-[10px] text-[#8C7E6C] font-black uppercase tracking-widest">活跃度</p>
</div>
</div>
))}
<Card className="glass-card warm-noise border-none rounded-[2.5rem] md:rounded-[3rem] p-8 md:p-10 relative overflow-hidden shadow-xl bg-gradient-to-br from-[#FAF5E6] to-[#FAF5E6]">
<CardHeader className="p-0 mb-8 md:mb-10">
<div className="flex items-center justify-between">
<CardTitle className="text-xl md:text-2xl font-black text-[#4A3A2C] flex items-center gap-3">
<Flame className="w-5 h-5 text-rose-500 fill-rose-500" />
热门类目共振
</CardTitle>
<Button variant="ghost" size="icon" className="w-10 h-10 rounded-full hover:bg-white/50">
<ArrowUpRight className="w-4 h-4 text-[#D28F4F]" />
</Button>
</div>
<Button variant="ghost" className="w-full mt-10 rounded-[1.5rem] h-14 font-black text-xs uppercase tracking-[0.3em] text-[#8C7E6C] hover:text-[#D28F4F] hover:bg-white transition-all">
查看全量声波图谱
</Button>
</CardHeader>
<CardContent className="p-0 space-y-6 md:space-y-8">
{categoryData.map((item, i) => (
<div key={item.name} className="space-y-3 group cursor-pointer">
<div className="flex justify-between items-end">
<div className="flex items-center gap-4">
<span className="text-xs font-black text-[#8C7E6C]/30 tabular-nums">0{i + 1}</span>
<span className="text-base md:text-lg font-black text-[#4A3A2C] group-hover:text-[#D28F4F] transition-colors">{item.name}</span>
</div>
<span className="text-sm md:text-base font-black text-[#4A3A2C]/40 tabular-nums group-hover:text-[#4A3A2C] transition-colors">{item.value} Units</span>
</div>
<div className="h-2.5 md:h-3 w-full bg-[#4A3A2C]/5 rounded-full overflow-hidden shadow-inner">
<motion.div
initial={{ width: 0 }}
animate={{ width: `${(item.value / 400) * 100}%` }}
transition={{ delay: 1 + i * 0.1, duration: 1.5, ease: "easeOut" }}
className="h-full rounded-full shadow-lg relative"
style={{ backgroundColor: item.color }}
>
<div className="absolute top-0 left-0 w-full h-full bg-white/20 animate-pulse" />
</motion.div>
</div>
</div>
))}
</CardContent>
</Card>
<Card className="glass-card warm-noise border-none rounded-[2.5rem] md:rounded-[3rem] p-8 md:p-10 bg-[#A64452] text-white overflow-hidden relative group">
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_0%,rgba(255,255,255,0.2),transparent)] opacity-50 group-hover:opacity-100 transition-opacity" />
<Disc3 className="absolute -right-12 -bottom-12 w-48 h-48 opacity-10 group-hover:rotate-90 transition-transform duration-1000" />
<div className="relative z-10 space-y-6">
<div className="w-12 h-12 rounded-2xl bg-white/20 backdrop-blur-md flex items-center justify-center">
<Crown className="w-6 h-6 text-white" />
</div>
<h3 className="text-2xl md:text-3xl font-black leading-tight tracking-tight">VIP 专属生态<br />特权升级方案</h3>
<p className="text-white/60 text-sm font-medium leading-relaxed">
通过精细化的会员等级与多维度的定价策略，构建高粘性的听众社群，深度发掘商业潜能。
</p>
<Button className="w-full h-14 rounded-[1.2rem] md:rounded-[1.5rem] bg-white text-[#A64452] hover:bg-[#FAF5E6] font-black shadow-2xl transition-all hover:scale-105 active:scale-95 group/btn">
立即优化方案
<ArrowUpRight className="ml-3 w-5 h-5 group-hover/btn:translate-x-1 group-hover/btn:-translate-y-1 transition-transform" />
</Button>
</div>
</Card>
</motion.div>
</div>
{/* Recent Activity Section */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.8, duration: 0.8 }}
className="px-2"
>
<Card className="glass-card warm-noise border-none rounded-[2.5rem] md:rounded-[4rem] overflow-hidden shadow-2xl">
<CardHeader className="p-8 md:p-12 border-b border-[#4A3A2C]/5 bg-[#FAF5E6]/40 flex flex-col md:flex-row md:items-center justify-between gap-6">
<div className="space-y-2">
<CardTitle className="text-2xl md:text-3xl font-black text-[#4A3A2C] tracking-tight flex items-center gap-4">
<div className="w-3 h-10 bg-[#D28F4F] rounded-full" />
实时播报流
</CardTitle>
<p className="text-[#8C7E6C] text-xs md:text-sm font-medium ml-7 italic">系统内所有频道的最新动态与播控反馈</p>
</div>
<Button variant="outline" className="h-12 px-8 rounded-2xl border-[#D28F4F]/20 text-[#D28F4F] font-black hover:bg-[#D28F4F]/5 transition-all">
查看完整日志
</Button>
</CardHeader>
<CardContent className="p-0">
<div className="divide-y divide-[#4A3A2C]/5">
{[1, 2, 3, 4].map((i) => (
<div key={i} className="p-8 md:p-10 flex flex-col sm:flex-row sm:items-center justify-between gap-6 hover:bg-[#FAF5E6]/60 transition-colors group">
<div className="flex items-center gap-6">
<div className="w-16 h-16 rounded-[1.5rem] bg-white shadow-xl overflow-hidden p-1 border border-[#4A3A2C]/5 relative">
<img src={`https://picsum.photos/seed/${i + 10}/100/100`} alt="" className="w-full h-full object-cover rounded-[1.2rem]" />
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" />
<Play className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-6 h-6 text-white fill-current opacity-0 group-hover:opacity-100 transition-opacity" />
</div>
<div className="space-y-1.5">
<h4 className="text-lg md:text-xl font-black text-[#4A3A2C] group-hover:text-[#D28F4F] transition-colors line-clamp-1">城市森林：晨间漫步 0{i}</h4>
<div className="flex items-center gap-4">
<span className="flex items-center gap-2 text-xs font-black text-[#8C7E6C]/60 uppercase tracking-widest">
<Mic2 className="w-3 h-3" />
爵士之声频道
</span>
<div className="w-1.5 h-1.5 rounded-full bg-[#8C7E6C]/20" />
<span className="text-xs font-black text-[#8C7E6C]/60 italic tabular-nums">12:34 PM</span>
</div>
</div>
</div>
<div className="flex items-center gap-6 self-start sm:self-center">
<div className="flex flex-col items-end gap-1">
<div className="flex items-center gap-2 text-emerald-600">
<Star className="w-4 h-4 fill-current" />
<span className="text-sm font-black tabular-nums">+1,248</span>
</div>
<span className="text-[10px] font-black text-[#8C7E6C] uppercase tracking-widest">New Listeners</span>
</div>
<Button size="icon" variant="ghost" className="w-12 h-12 rounded-full border border-[#4A3A2C]/5 group-hover:bg-white group-hover:text-[#D28F4F] group-hover:border-[#D28F4F]/10 transition-all">
<ArrowUpRight className="w-5 h-5" />
</Button>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</motion.div>
</div>
);
}