feat: 优化样式
This commit is contained in:
Blizzard
+1
-1
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/jpeg" href="/favicon.jpg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Good Morning</title>
|
||||
<title>全声汇 - 广播管理系统</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -24,3 +24,7 @@ export const deleteProgramApi = (data: { ids: (string | number)[] }) => request.
|
||||
|
||||
export const getAllCategoryListApi = () => request.get('/radio/category/list');
|
||||
export const getCategoryTreeApi = () => request.get('/radio/category/tree');
|
||||
|
||||
// --- VIP API ---
|
||||
export const getVipConfigDetailApi = () => request.post('/vip/config/detail');
|
||||
export const updateVipConfigApi = (data: any) => request.post('/vip/config/update', data);
|
||||
|
||||
@@ -9,7 +9,8 @@ import {
|
||||
FolderOpen,
|
||||
LogOut,
|
||||
User as UserIcon,
|
||||
ChevronDown
|
||||
ChevronDown,
|
||||
Crown
|
||||
} from 'lucide-react';
|
||||
import { Button } from '../components/ui/button';
|
||||
import {
|
||||
@@ -48,6 +49,7 @@ export default function AdminLayout() {
|
||||
{ name: '频道分类', path: '/radio/category', icon: ListMusic },
|
||||
{ name: '频道管理', path: '/radio/channel', icon: Mic2 },
|
||||
{ name: '节目管理', path: '/radio/program', icon: Disc3 },
|
||||
{ name: 'VIP配置', path: '/radio/vip', icon: Crown },
|
||||
{ name: '文件管理', path: '/system/oss', icon: FolderOpen },
|
||||
];
|
||||
|
||||
@@ -60,7 +62,7 @@ export default function AdminLayout() {
|
||||
<img src="/favicon.jpg" alt="logo" className="w-full h-full object-cover p-1 bg-white" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-black text-lg tracking-tight leading-none text-white">早安和傍晚</span>
|
||||
<span className="font-black text-lg tracking-tight leading-none text-white">全声汇</span>
|
||||
<span className="text-[10px] uppercase tracking-[0.2em] text-white/40 mt-1">广播控制台</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+267
-131
@@ -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>
|
||||
系统运行良好。当前有 <span className="text-[#D28F4F] font-black underline decoration-2 underline-offset-4">1,248</span> 名听众正在共度美好时光。
|
||||
))}
|
||||
</div>
|
||||
</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" />}
|
||||
<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>
|
||||
<span className="text-[10px] font-black text-[#8C7E6C]/40 uppercase tracking-[0.2em]">增长率</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<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>
|
||||
<CardTitle className="text-2xl md:text-3xl font-black text-[#4A3A2C] tracking-tight">声波极化趋势</CardTitle>
|
||||
</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>
|
||||
<p className="text-[#8C7E6C] text-xs md:text-sm font-medium ml-14 md:ml-16 italic">实时捕捉全网音频流的活跃度与用户共鸣度</p>
|
||||
</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>
|
||||
<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>
|
||||
热门频道排行
|
||||
<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>
|
||||
</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'
|
||||
}`}
|
||||
<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="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 className="absolute top-0 left-0 w-full h-full bg-white/20 animate-pulse" />
|
||||
</motion.div>
|
||||
</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]`} />
|
||||
)}
|
||||
))}
|
||||
</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>
|
||||
<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" />
|
||||
<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="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 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>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+176
-84
@@ -6,7 +6,7 @@ import { toast } from 'sonner';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { Input } from '../../components/ui/input';
|
||||
import { Label } from '../../components/ui/label';
|
||||
import { ShieldCheck, Disc3, ArrowRight, Heart } from 'lucide-react';
|
||||
import { ShieldCheck, Disc3, ArrowRight, Heart, Sparkles, Waves } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export default function Login() {
|
||||
@@ -58,7 +58,7 @@ export default function Login() {
|
||||
captcha,
|
||||
captchaId
|
||||
});
|
||||
toast.success('欢迎回来');
|
||||
toast.success('欢迎回来，首席播音官');
|
||||
setToken(res.token);
|
||||
setUserInfo(res.user);
|
||||
navigate('/');
|
||||
@@ -71,168 +71,260 @@ export default function Login() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#FAF5E6] relative overflow-hidden font-sans warm-noise">
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#FAF5E6] relative overflow-hidden font-sans warm-noise selection:bg-[#D28F4F]/30 selection:text-[#4A3A2C]">
|
||||
{/* Ambient Background Elements */}
|
||||
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-gradient-to-br from-[#D28F4F]/10 to-transparent rounded-full blur-[120px] animate-pulse" />
|
||||
<div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-gradient-to-tr from-[#A64452]/10 to-transparent rounded-full blur-[140px] animate-pulse" />
|
||||
<div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-gradient-to-br from-[#D28F4F]/15 via-transparent to-transparent rounded-full blur-[160px] animate-pulse" />
|
||||
<div className="absolute bottom-[-15%] right-[-5%] w-[55%] h-[55%] bg-gradient-to-tr from-[#A64452]/10 via-transparent to-transparent rounded-full blur-[140px] animate-pulse transition-duration-[4s]" />
|
||||
|
||||
{/* Animated Floating Particles */}
|
||||
<div className="absolute inset-0 pointer-events-none opacity-20">
|
||||
<motion.div
|
||||
animate={{ y: [0, -40, 0], opacity: [0.1, 0.4, 0.1] }}
|
||||
transition={{ duration: 10, repeat: Infinity }}
|
||||
className="absolute top-1/4 left-1/4 w-32 h-32 bg-[#D28F4F] rounded-full blur-[80px]"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{ y: [0, 50, 0], opacity: [0.1, 0.3, 0.1] }}
|
||||
transition={{ duration: 12, repeat: Infinity, delay: 1 }}
|
||||
className="absolute bottom-1/4 right-1/3 w-40 h-40 bg-[#A64452] rounded-full blur-[90px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
initial={{ opacity: 0, scale: 0.98, y: 15 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
transition={{ duration: 1, ease: "easeOut" }}
|
||||
className="w-full max-w-[1100px] grid grid-cols-1 lg:grid-cols-2 bg-white/30 backdrop-blur-3xl rounded-[4rem] shadow-glass border border-white/40 overflow-hidden relative z-10 m-4"
|
||||
transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="w-full max-w-[1240px] grid grid-cols-1 lg:grid-cols-2 bg-white/40 backdrop-blur-3xl rounded-[4.5rem] shadow-[0_40px_100px_-20px_rgba(74,58,44,0.12)] border border-white/60 overflow-hidden relative z-10 m-6 ring-1 ring-[#D28F4F]/5"
|
||||
>
|
||||
{/* Visual Side (Twilight) */}
|
||||
<div className="hidden lg:flex flex-col justify-between p-16 sidebar-noise text-white relative overflow-hidden group">
|
||||
<div className="absolute inset-0 opacity-40 mix-blend-overlay pointer-events-none" />
|
||||
<div className="absolute top-[-20%] right-[-20%] w-80 h-80 bg-[#D28F4F]/30 rounded-full blur-[100px] group-hover:scale-125 transition-transform duration-1000" />
|
||||
{/* Visual Side (Japanese Zen/Retro Radio Vibe) */}
|
||||
<div className="hidden lg:flex flex-col justify-between p-20 sidebar-noise text-white relative overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-[#4A3A2C]/10 mix-blend-overlay pointer-events-none" />
|
||||
<div className="absolute top-[-30%] right-[-20%] w-[120%] h-[120%] bg-gradient-to-bl from-[#D28F4F]/40 via-transparent to-transparent rounded-full blur-[120px] group-hover:scale-110 transition-transform duration-[4s]" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<motion.div
|
||||
initial={{ x: -20, opacity: 0 }}
|
||||
initial={{ x: -30, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="flex items-center gap-4"
|
||||
transition={{ delay: 0.4, duration: 0.8 }}
|
||||
className="flex items-center gap-6"
|
||||
>
|
||||
<div className="w-16 h-16 bg-white rounded-3xl flex items-center justify-center shadow-2xl shadow-[#D28F4F]/20 ring-1 ring-white/20 overflow-hidden relative group p-2">
|
||||
<img src="/favicon.jpg" alt="logo" className="w-full h-full object-cover rounded-2xl" />
|
||||
<div className="absolute inset-0 bg-[#D28F4F] opacity-0 group-hover:opacity-10 transition-opacity" />
|
||||
<div className="w-20 h-20 bg-white rounded-[2.5rem] flex items-center justify-center shadow-2xl shadow-[#D28F4F]/30 ring-1 ring-white/40 overflow-hidden relative group p-2.5">
|
||||
<img src="/favicon.jpg" alt="logo" className="w-full h-full object-cover rounded-[1.8rem]" />
|
||||
<div className="absolute inset-0 bg-[#D28F4F] opacity-0 group-hover:opacity-20 transition-opacity" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xl font-black tracking-tighter uppercase leading-none">Morning Radio</span>
|
||||
<span className="text-[10px] uppercase font-black tracking-[0.3em] opacity-40 mt-1">Management Console</span>
|
||||
<span className="text-3xl font-black tracking-tightest leading-none drop-shadow-sm">全声汇</span>
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<span className="text-[10px] uppercase font-black tracking-[0.4em] opacity-50 px-2 py-0.5 rounded-full border border-white/20">QUAN SHENG HUI</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="mt-20 space-y-8">
|
||||
<h2 className="text-5xl font-black text-white leading-[1.1] tracking-tighter">
|
||||
声音的<span className="text-[#D28F4F] italic px-2">温度</span><br />
|
||||
伴随每个<br />
|
||||
清晨与黄昏。
|
||||
</h2>
|
||||
<p className="text-white/40 text-lg font-medium max-w-sm leading-relaxed border-l-2 border-[#D28F4F]/30 pl-6">
|
||||
重新设计的管理架构，在日式简练与法式优雅间，寻找高效操作的节奏感。
|
||||
<div className="mt-28 space-y-10">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.6, duration: 1 }}
|
||||
className="text-6xl font-black text-white leading-[1.05] tracking-tighter"
|
||||
>
|
||||
听见<span className="text-white/40 italic font-serif mx-1">万物</span><br />
|
||||
汇聚<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#D28F4F] to-[#E29A66] italic px-2">共振</span>之旅。
|
||||
</motion.h2>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.8 }}
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<p className="text-white/60 text-xl font-medium max-w-sm leading-relaxed border-l-3 border-[#D28F4F] pl-8">
|
||||
专业音频管理中枢，<br />
|
||||
在简约之中，掌控声音的力量。
|
||||
</p>
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="h-px w-12 bg-white/20" />
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.4em] text-white/30">System v2.5.0 Premium</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex items-center gap-10">
|
||||
<div className="relative z-10 flex items-end justify-between">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[#D28F4F] text-3xl font-black">2.5</span>
|
||||
<span className="text-white/20 text-[10px] uppercase font-black tracking-widest mt-1">Version Control</span>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Waves className="w-5 h-5 text-[#D28F4F]" />
|
||||
<span className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">Live Interaction Index</span>
|
||||
</div>
|
||||
<div className="w-px h-10 bg-white/10" />
|
||||
<div className="text-white/60 text-sm font-bold flex items-center gap-2">
|
||||
<div className="text-4xl font-black flex items-baseline gap-2">
|
||||
99.9%
|
||||
<span className="text-xs text-white/40 font-bold uppercase">Up-time</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-xl rounded-[2rem] px-6 py-4 border border-white/10 flex items-center gap-4 group cursor-help hover:bg-white/20 transition-all">
|
||||
<div className="w-3 h-3 rounded-full bg-emerald-500 shadow-[0_0_12px_#10b981]" />
|
||||
<span className="text-sm font-black tracking-wide text-white/80 flex items-center gap-2">
|
||||
<ShieldCheck className="w-4 h-4 text-[#D28F4F]" />
|
||||
安全加固基建
|
||||
军用级加密信道
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Side (Warm Cream) */}
|
||||
<div className="p-10 lg:p-20 flex flex-col justify-center bg-[#FAF5E6]/40 backdrop-blur-md relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-[#D28F4F]/5 rounded-full blur-3xl" />
|
||||
{/* Form Side (Clean Japanese Creamy Minimalist) */}
|
||||
<div className="p-12 lg:p-24 flex flex-col justify-center bg-[#FAF5E6]/30 backdrop-blur-2xl relative overflow-hidden group">
|
||||
<div className="absolute top-0 right-0 w-64 h-64 bg-[#D28F4F]/5 rounded-full blur-[100px] pointer-events-none" />
|
||||
|
||||
<div className="max-w-md mx-auto w-full relative z-10">
|
||||
<div className="mb-14">
|
||||
<h3 className="text-4xl font-black text-[#4A3A2C] tracking-tight mb-3">欢迎回来</h3>
|
||||
<div className="flex items-center gap-3">
|
||||
<p className="text-[#8C7E6C]/60 font-black uppercase text-[10px] tracking-[0.4em]">Control Center Access</p>
|
||||
<div className="h-px flex-1 bg-[#4A3A2C]/5" />
|
||||
</div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="mb-16"
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-3">
|
||||
<Sparkles className="w-5 h-5 text-[#D28F4F]" />
|
||||
<span className="text-[11px] font-black text-[#D28F4F] uppercase tracking-[0.5em] opacity-70">Identity Authentication</span>
|
||||
</div>
|
||||
<h3 className="text-5xl font-black text-[#4A3A2C] tracking-tight leading-tight">管理员登入</h3>
|
||||
<div className="h-1.5 w-24 bg-gradient-to-r from-[#D28F4F] to-transparent rounded-full mt-6" />
|
||||
</motion.div>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-10">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">管理员身份账号</Label>
|
||||
<form onSubmit={handleLogin} className="space-y-12">
|
||||
<div className="space-y-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.7 }}
|
||||
className="space-y-4"
|
||||
>
|
||||
<Label className="text-[12px] uppercase font-black tracking-[0.2em] text-[#8C7E6C] ml-2 flex items-center gap-2">
|
||||
<div className="w-1 h-1 rounded-full bg-[#D28F4F]" />
|
||||
账户标识
|
||||
</Label>
|
||||
<Input
|
||||
placeholder="Username / Email"
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 placeholder:text-[#8C7E6C]/30"
|
||||
placeholder="Admin / Operator ID"
|
||||
className="h-20 rounded-[2rem] border-none bg-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/15 transition-all pl-10 placeholder:text-[#8C7E6C]/30 text-lg group-hover:shadow-[0_8px_30px_rgba(210,143,79,0.08)]"
|
||||
value={account}
|
||||
onChange={(e) => setAccount(e.target.value)}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">受限制加密密码</Label>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.8 }}
|
||||
className="space-y-4"
|
||||
>
|
||||
<Label className="text-[12px] uppercase font-black tracking-[0.2em] text-[#8C7E6C] ml-2 flex items-center gap-2">
|
||||
<div className="w-1 h-1 rounded-full bg-[#D28F4F]" />
|
||||
安全密钥
|
||||
</Label>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Security Token"
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 placeholder:text-[#8C7E6C]/30"
|
||||
placeholder="Secure Passphrase"
|
||||
className="h-20 rounded-[2rem] border-none bg-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/15 transition-all pl-10 placeholder:text-[#8C7E6C]/30 text-lg group-hover:shadow-[0_8px_30px_rgba(210,143,79,0.08)]"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">即时验证码</Label>
|
||||
<div className="flex gap-4">
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.9 }}
|
||||
className="space-y-4"
|
||||
>
|
||||
<Label className="text-[12px] uppercase font-black tracking-[0.2em] text-[#8C7E6C] ml-2 flex items-center gap-2">
|
||||
<div className="w-1 h-1 rounded-full bg-[#D28F4F]" />
|
||||
灵态验证
|
||||
</Label>
|
||||
<div className="flex gap-5">
|
||||
<Input
|
||||
placeholder="Code"
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 flex-1 placeholder:text-[#8C7E6C]/30"
|
||||
className="h-20 rounded-[2rem] border-none bg-white shadow-[0_8px_30px_rgb(0,0,0,0.04)] font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/15 transition-all pl-10 flex-1 placeholder:text-[#8C7E6C]/30 text-lg"
|
||||
value={captcha}
|
||||
onChange={(e) => setCaptcha(e.target.value)}
|
||||
disabled={loading}
|
||||
/>
|
||||
<div
|
||||
className="h-16 w-36 bg-white rounded-[1.5rem] p-2 shadow-sm border border-[#D28F4F]/10 cursor-pointer hover:ring-4 ring-[#D28F4F]/10 transition-all flex items-center justify-center overflow-hidden group"
|
||||
className="h-20 w-44 bg-white rounded-[2rem] p-3 shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-[#D28F4F]/10 cursor-pointer hover:ring-4 ring-[#D28F4F]/20 transition-all flex items-center justify-center overflow-hidden group/captcha"
|
||||
onClick={fetchCaptcha}
|
||||
>
|
||||
{captchaImage ? (
|
||||
<img src={captchaImage} alt="captcha" className="h-full object-contain filter group-hover:scale-110 transition-transform" />
|
||||
<img src={captchaImage} alt="captcha" className="h-full w-full object-contain filter group-hover/captcha:scale-110 transition-transform duration-500 contrast-125" />
|
||||
) : (
|
||||
<Disc3 className="w-5 h-5 text-[#8C7E6C]/20 animate-spin" />
|
||||
<Disc3 className="w-6 h-6 text-[#D28F4F]/40 animate-spin" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 1.1 }}
|
||||
>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full h-20 rounded-[2.2rem] bg-gradient-to-r from-[#D28F4F] to-[#A64452] hover:scale-[1.02] active:scale-[0.98] transition-all shadow-2xl shadow-[#D28F4F]/30 border-none group overflow-hidden relative"
|
||||
className="w-full h-24 rounded-[2.5rem] bg-gradient-to-r from-[#D28F4F] to-[#A64452] hover:scale-[1.02] active:scale-[0.98] transition-all shadow-2xl shadow-[#D28F4F]/30 border-none group overflow-hidden relative"
|
||||
>
|
||||
<div className="relative z-10 flex items-center justify-center gap-4 text-xl font-black tracking-tight text-white">
|
||||
<div className="relative z-10 flex items-center justify-center gap-6 text-2xl font-black tracking-tight text-white">
|
||||
{loading ? (
|
||||
<>
|
||||
<Disc3 className="w-6 h-6 animate-spin" />
|
||||
同步权限中...
|
||||
<Disc3 className="w-8 h-8 animate-spin" />
|
||||
<span>同步核心中...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
进入广播控制中心
|
||||
<span>进入播控中心</span>
|
||||
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center group-hover:bg-white/30 transition-colors">
|
||||
<ArrowRight className="w-6 h-6 group-hover:translate-x-1.5 transition-transform" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
{/* Liquid gradient animation effect */}
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent -translate-x-full"
|
||||
animate={{ translateX: ['-100%', '200%'] }}
|
||||
transition={{ duration: 2.5, repeat: Infinity, ease: "linear" }}
|
||||
/>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</form>
|
||||
|
||||
<div className="mt-16 pt-10 border-t border-[#4A3A2C]/5 flex items-center justify-between">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 1.3 }}
|
||||
className="mt-20 pt-10 border-t border-[#4A3A2C]/5 flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="w-2 h-2 rounded-full bg-[#A64452]/20 border border-[#A64452]/40" />
|
||||
<span className="text-[10px] font-black text-[#8C7E6C]/50 uppercase tracking-[0.25em]">Crafted For Visual Harmony</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Heart className="w-3.5 h-3.5 text-[#A64452] fill-[#A64452]/20 animate-pulse" />
|
||||
<span className="text-[10px] font-black text-[#8C7E6C]/40 uppercase tracking-[0.2em]">Crafted with Soul</span>
|
||||
</div>
|
||||
<button className="text-[10px] font-black text-[#D28F4F] uppercase tracking-[0.2em] hover:underline underline-offset-4">
|
||||
无法访问?
|
||||
</button>
|
||||
<Heart className="w-3.5 h-3.5 text-[#A64452] fill-[#A64452]/30 animate-pulse" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Micro Interaction Decorative elements */}
|
||||
<div className="absolute bottom-20 left-20 flex gap-3 rotate-12 opacity-5 pointer-events-none">
|
||||
<div className="w-3 h-12 bg-[#D28F4F] rounded-full" />
|
||||
<div className="w-3 h-24 bg-[#D28F4F] rounded-full mt-6" />
|
||||
<div className="w-3 h-12 bg-[#D28F4F] rounded-full mt-3" />
|
||||
{/* Decorative Kanji/Background elements for Japanese Zen Vibe */}
|
||||
<div className="absolute top-20 left-20 pointer-events-none select-none opacity-[0.03] flex flex-col items-center">
|
||||
<span className="text-[200px] font-serif leading-none">声</span>
|
||||
<span className="text-[100px] font-serif leading-none mt-[-40px]">汇</span>
|
||||
</div>
|
||||
<div className="absolute top-20 right-20 flex gap-3 -rotate-12 opacity-5 pointer-events-none">
|
||||
<div className="w-3 h-12 bg-[#A64452] rounded-full" />
|
||||
<div className="w-3 h-24 bg-[#A64452] rounded-full mt-6" />
|
||||
<div className="w-3 h-12 bg-[#A64452] rounded-full mt-3" />
|
||||
|
||||
<div className="absolute bottom-12 right-12 flex gap-4 opacity-[0.05] pointer-events-none">
|
||||
<div className="w-4 h-32 bg-[#D28F4F] rounded-full blur-[1px]" />
|
||||
<div className="w-4 h-48 bg-[#D28F4F] rounded-full mt-10 blur-[1px]" />
|
||||
<div className="w-4 h-32 bg-[#D28F4F] rounded-full mt-4 blur-[1px]" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -5,7 +5,6 @@ import {
|
||||
updateCategoryApi,
|
||||
deleteCategoryApi
|
||||
} from '../../../api/radio';
|
||||
import { FileUploader } from '../../../components/FileUploader';
|
||||
import { DeleteConfirm } from '../../../components/DeleteConfirm';
|
||||
import { Button } from '../../../components/ui/button';
|
||||
import { Input } from '../../../components/ui/input';
|
||||
@@ -20,8 +19,7 @@ import {
|
||||
Search,
|
||||
Disc3,
|
||||
Layers,
|
||||
LayoutGrid,
|
||||
Image as ImageIcon
|
||||
Tag
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { motion } from 'framer-motion';
|
||||
@@ -42,10 +40,6 @@ export default function Category() {
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
iconId: '',
|
||||
iconUrl: '',
|
||||
coverId: '',
|
||||
coverUrl: '',
|
||||
sort: 0,
|
||||
status: 1
|
||||
});
|
||||
@@ -85,7 +79,7 @@ export default function Category() {
|
||||
|
||||
const handleOpenAdd = () => {
|
||||
setIsEdit(false);
|
||||
setFormData({ id: '', name: '', description: '', iconId: '', iconUrl: '', coverId: '', coverUrl: '', sort: 0, status: 1 });
|
||||
setFormData({ id: '', name: '', description: '', sort: 0, status: 1 });
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
@@ -95,10 +89,6 @@ export default function Category() {
|
||||
id: String(record.ID || record.id || ""),
|
||||
name: record.name,
|
||||
description: record.description,
|
||||
iconId: record.iconId || "",
|
||||
iconUrl: record.icon?.url || record.iconUrl || "",
|
||||
coverId: record.coverId || "",
|
||||
coverUrl: record.cover?.url || record.coverUrl || "",
|
||||
sort: record.sort,
|
||||
status: record.status
|
||||
});
|
||||
@@ -151,32 +141,32 @@ export default function Category() {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="space-y-8 pb-10"
|
||||
className="space-y-6 md:space-y-8 pb-10"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 px-2">
|
||||
<div>
|
||||
<h1 className="text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-4">
|
||||
<h1 className="text-3xl md:text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-4">
|
||||
频道分类
|
||||
<div className="w-3 h-3 rounded-full bg-[#D28F4F] shadow-[0_0_20px_rgba(210,143,79,0.5)] animate-pulse" />
|
||||
</h1>
|
||||
<p className="text-[#8C7E6C] font-medium mt-2">打理电台分类体系，让每一个好声音有序可循。</p>
|
||||
<p className="text-[#8C7E6C] font-medium mt-2 text-sm md:text-base">打理电台分类体系，让每一个好声音有序可循。</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleOpenAdd}
|
||||
className="rounded-[1.5rem] h-14 px-8 font-black shadow-xl shadow-[#D28F4F]/20 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none group"
|
||||
className="rounded-[1.2rem] md:rounded-[1.5rem] h-12 md:h-14 px-6 md:px-8 font-black shadow-xl shadow-[#D28F4F]/20 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none group"
|
||||
>
|
||||
<Plus className="w-5 h-5 mr-3 group-hover:rotate-90 transition-transform" />
|
||||
<Plus className="w-5 h-5 mr-2 md:mr-3 group-hover:rotate-90 transition-transform" />
|
||||
新增架构分类
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card className="glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden min-h-[600px] relative z-10">
|
||||
<CardHeader className="p-10 border-b border-[#4A3A2C]/5 flex flex-col sm:flex-row sm:items-center justify-between gap-6 bg-[#FAF5E6]/40">
|
||||
<Card className="glass-card warm-noise border-none shadow-glass rounded-[1.5rem] md:rounded-[2.5rem] overflow-hidden min-h-[500px] md:min-h-[600px] relative z-10">
|
||||
<CardHeader className="p-6 md:p-10 border-b border-[#4A3A2C]/5 flex flex-col md:flex-row md:items-center justify-between gap-6 bg-[#FAF5E6]/40">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 rounded-2xl bg-[#D28F4F]/10">
|
||||
<Layers className="w-6 h-6 text-[#D28F4F]" />
|
||||
<div className="p-2.5 md:p-3 rounded-xl md:rounded-2xl bg-[#D28F4F]/10">
|
||||
<Layers className="w-5 h-5 md:w-6 md:h-6 text-[#D28F4F]" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl font-black tracking-tight text-[#4A3A2C]">分类架构总览</CardTitle>
|
||||
<CardTitle className="text-xl md:text-2xl font-black tracking-tight text-[#4A3A2C]">分类架构总览</CardTitle>
|
||||
</div>
|
||||
<div className="relative group w-full max-w-sm">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[#8C7E6C] group-focus-within:text-[#D28F4F] transition-colors" />
|
||||
@@ -184,18 +174,17 @@ export default function Category() {
|
||||
placeholder="搜索分类名称..."
|
||||
value={searchName}
|
||||
onChange={(e) => setSearchName(e.target.value)}
|
||||
className="pl-12 h-12 rounded-2xl border-none bg-[#FAF5E6]/80 focus:bg-white shadow-inner transition-all font-bold text-[#4A3A2C]"
|
||||
className="pl-12 h-10 md:h-12 rounded-xl md:rounded-2xl border-none bg-[#FAF5E6]/80 focus:bg-white shadow-inner transition-all font-bold text-[#4A3A2C]"
|
||||
/>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<div className="overflow-x-auto overflow-y-hidden">
|
||||
<Table className="min-w-[800px]">
|
||||
<TableHeader className="bg-[#FAF5E6]/50">
|
||||
<TableRow className="hover:bg-transparent border-[#4A3A2C]/5">
|
||||
<TableHead className="w-[80px] pl-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">图标</TableHead>
|
||||
<TableHead className="w-[100px] pl-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">索引</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">分类名称</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">核心视觉</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">描述摘要</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C] text-center">优先级</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C] text-center">状态控制</TableHead>
|
||||
@@ -204,44 +193,36 @@ export default function Category() {
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading && data.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={7} className="h-96 text-center text-[#8C7E6C] font-black uppercase"><Disc3 className="w-12 h-12 mx-auto animate-spin-slow mb-4 text-[#D28F4F]/50" />同步中...</TableCell></TableRow>
|
||||
<TableRow><TableCell colSpan={6} className="h-96 text-center text-[#8C7E6C] font-black uppercase"><Disc3 className="w-12 h-12 mx-auto animate-spin-slow mb-4 text-[#D28F4F]/50" />同步中...</TableCell></TableRow>
|
||||
) : data.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={7} className="h-96 text-center text-[#8C7E6C] text-sm font-black tracking-widest uppercase">暂无分类架构</TableCell></TableRow>
|
||||
<TableRow><TableCell colSpan={6} className="h-96 text-center text-[#8C7E6C] text-sm font-black tracking-widest uppercase">暂无分类架构</TableCell></TableRow>
|
||||
) : (
|
||||
data.map((item: any) => (
|
||||
data.map((item: any, index: number) => (
|
||||
<TableRow
|
||||
key={item.ID || item.id}
|
||||
className="group border-[#4A3A2C]/5 hover:bg-[#FAF5E6]/80 transition-all duration-300 transform hover:scale-[1.001]"
|
||||
className="group border-[#4A3A2C]/5 hover:bg-[#FAF5E6]/80 transition-all duration-300 transform md:hover:scale-[1.002]"
|
||||
>
|
||||
<TableCell className="pl-10 py-6">
|
||||
<div className="w-12 h-12 rounded-2xl bg-white shadow-md flex items-center justify-center border border-[#4A3A2C]/5 p-2 overflow-hidden group-hover:rotate-12 transition-transform">
|
||||
{(item.icon?.url || item.iconUrl) ? (
|
||||
<img src={item.icon?.url || item.iconUrl} alt="" className="w-full h-full object-contain" />
|
||||
) : (
|
||||
<LayoutGrid className="w-6 h-6 text-[#F2EDE4]" />
|
||||
)}
|
||||
<div className="w-10 h-10 rounded-xl bg-white shadow-sm flex items-center justify-center border border-[#4A3A2C]/5 font-black text-[#D28F4F] text-xs">
|
||||
{(page - 1) * pageSize + index + 1}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-6">
|
||||
<p className="font-black text-[#4A3A2C] group-hover:text-[#D28F4F] transition-colors text-base tracking-tight">{item.name}</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<Tag className="w-4 h-4 text-[#D28F4F]/30" />
|
||||
<div>
|
||||
<p className="font-black text-[#4A3A2C] md:group-hover:text-[#D28F4F] transition-colors text-base tracking-tight">{item.name}</p>
|
||||
<p className="text-[10px] font-bold text-[#8C7E6C]/50 mt-0.5 tracking-tighter">ID: {item.ID || item.id}</p>
|
||||
</TableCell>
|
||||
<TableCell className="py-6">
|
||||
<div className="w-20 h-12 rounded-2xl overflow-hidden shadow-sm ring-4 ring-white transition-all group-hover:ring-[#D28F4F]/20 bg-[#F2EDE4]">
|
||||
{(item.cover?.url || item.coverUrl) ? (
|
||||
<img src={item.cover?.url || item.coverUrl} alt="" className="w-full h-full object-cover group-hover:scale-125 transition-transform duration-1000" />
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center"><ImageIcon className="w-5 h-5 text-[#8C7E6C]/20" /></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-6 max-w-[200px]">
|
||||
<TableCell className="py-6 max-w-[350px]">
|
||||
<p className="text-[12px] font-bold text-[#8C7E6C] line-clamp-2 italic leading-relaxed">
|
||||
{item.description || "— 暂无描述 —"}
|
||||
</p>
|
||||
</TableCell>
|
||||
<TableCell className="py-6 text-center">
|
||||
<span className="text-[11px] font-black px-4 py-1.5 rounded-full bg-[#FAF5E6] text-[#D28F4F] shadow-sm border border-[#D28F4F]/10">
|
||||
<span className="text-[10px] md:text-[11px] font-black px-3 md:px-4 py-1.5 rounded-full bg-[#FAF5E6] text-[#D28F4F] shadow-sm border border-[#D28F4F]/10">
|
||||
LV.{item.sort}
|
||||
</span>
|
||||
</TableCell>
|
||||
@@ -255,12 +236,12 @@ export default function Category() {
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right pr-10 py-6">
|
||||
<div className="flex items-center justify-end gap-3 opacity-0 group-hover:opacity-100 transition-all translate-x-4 group-hover:translate-x-0">
|
||||
<div className="flex items-center justify-end gap-3 opacity-0 md:group-hover:opacity-100 transition-all translate-x-4 md:group-hover:translate-x-0 group-focus-within:opacity-100 group-focus-within:translate-x-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleOpenEdit(item)}
|
||||
className="w-12 h-12 rounded-[1.2rem] hover:bg-white hover:text-[#D28F4F] transition-all border border-[#4A3A2C]/5 shadow-sm hover:shadow-md"
|
||||
className="w-10 h-10 md:w-12 md:h-12 rounded-xl md:rounded-[1.2rem] hover:bg-white hover:text-[#D28F4F] transition-all border border-[#4A3A2C]/5 shadow-sm hover:shadow-md"
|
||||
>
|
||||
<Edit className="w-5 h-5" />
|
||||
</Button>
|
||||
@@ -268,7 +249,7 @@ export default function Category() {
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteClick(item.ID || item.id)}
|
||||
className="w-12 h-12 rounded-[1.2rem] hover:bg-rose-50 hover:text-rose-600 transition-all border border-[#4A3A2C]/5 shadow-sm"
|
||||
className="w-10 h-10 md:w-12 md:h-12 rounded-xl md:rounded-[1.2rem] hover:bg-rose-50 hover:text-rose-600 transition-all border border-[#4A3A2C]/5 shadow-sm"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</Button>
|
||||
@@ -281,17 +262,17 @@ export default function Category() {
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
<div className="p-10 border-t border-[#4A3A2C]/5 flex items-center justify-between bg-[#FAF5E6]/40 backdrop-blur-md">
|
||||
<div className="p-6 md:p-10 border-t border-[#4A3A2C]/5 flex flex-col md:flex-row items-center justify-between gap-6 bg-[#FAF5E6]/40 backdrop-blur-md">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-[10px] font-black text-[#8C7E6C] uppercase tracking-widest">全局统计:</span>
|
||||
<span className="px-4 py-1.5 bg-white shadow-sm rounded-full text-[11px] font-black text-[#D28F4F]">已建立 {total} 个分类</span>
|
||||
<span className="text-[10px] font-black text-[#8C7E6C] uppercase tracking-widest hidden sm:inline">全局统计:</span>
|
||||
<span className="px-4 py-1.5 bg-white shadow-sm rounded-full text-[10px] md:text-[11px] font-black text-[#D28F4F]">已建立 {total} 个分类</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setPage(p => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
className="rounded-2xl h-11 px-6 font-black uppercase tracking-widest text-[10px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
|
||||
className="rounded-xl md:rounded-2xl h-10 md:h-11 px-4 md:px-6 font-black uppercase tracking-widest text-[10px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
|
||||
>
|
||||
上一页
|
||||
</Button>
|
||||
@@ -299,7 +280,7 @@ export default function Category() {
|
||||
variant="ghost"
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
disabled={data.length < pageSize}
|
||||
className="rounded-2xl h-11 px-6 font-black uppercase tracking-widest text-[10px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
|
||||
className="rounded-xl md:rounded-2xl h-10 md:h-11 px-4 md:px-6 font-black uppercase tracking-widest text-[10px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
|
||||
>
|
||||
下一页
|
||||
</Button>
|
||||
@@ -308,27 +289,26 @@ export default function Category() {
|
||||
</Card>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="sm:max-w-[750px] glass-card warm-noise border-none rounded-[3rem] p-0 overflow-hidden shadow-2xl">
|
||||
<div className="bg-gradient-to-r from-[#D28F4F] to-[#A64452] p-12 text-white relative">
|
||||
<DialogTitle className="text-3xl font-black tracking-tight">{isEdit ? '编辑分类方案' : '定义新分类架构'}</DialogTitle>
|
||||
<p className="text-white/60 text-xs font-black uppercase tracking-[0.3em] mt-3">Architecture Blueprinting</p>
|
||||
<Disc3 className="absolute right-12 top-1/2 -translate-y-1/2 w-24 h-24 text-white/10 animate-spin-slow" />
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[600px] glass-card warm-noise border-none rounded-[1.5rem] md:rounded-[3rem] p-0 overflow-hidden shadow-2xl">
|
||||
<div className="bg-gradient-to-r from-[#D28F4F] to-[#A64452] p-8 md:p-12 text-white relative">
|
||||
<DialogTitle className="text-2xl md:text-3xl font-black tracking-tight">{isEdit ? '编辑分类方案' : '定义新分类架构'}</DialogTitle>
|
||||
<p className="text-white/60 text-[10px] md:text-xs font-black uppercase tracking-[0.3em] mt-3">Architecture Blueprinting</p>
|
||||
<Disc3 className="absolute right-6 md:right-12 top-1/2 -translate-y-1/2 w-16 h-16 md:w-24 md:h-24 text-white/10 animate-spin-slow hidden sm:block" />
|
||||
</div>
|
||||
<div className="p-12 space-y-10 max-h-[70vh] overflow-y-auto custom-scrollbar bg-[#FAF5E6]/60 backdrop-blur-3xl">
|
||||
<div className="grid grid-cols-2 gap-10">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">分类名称</Label>
|
||||
<div className="p-6 md:p-12 space-y-8 md:space-y-10 max-h-[70vh] overflow-y-auto custom-scrollbar bg-[#FAF5E6]/60 backdrop-blur-3xl">
|
||||
<div className="space-y-6 md:space-y-8">
|
||||
<div className="space-y-2 md:space-y-3">
|
||||
<Label className="text-[10px] md:text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">分类名称</Label>
|
||||
<Input
|
||||
placeholder="输入辨识度高的名称..."
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
|
||||
className="h-14 md:h-16 rounded-[1.2rem] md:rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-6 md:pl-8 text-base md:text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">排序权重</Label>
|
||||
<div className="grid grid-cols-2 gap-4 md:gap-6">
|
||||
<div className="space-y-2 md:space-y-3">
|
||||
<Label className="text-[10px] md:text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">排序权重</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={formData.sort ?? ""}
|
||||
@@ -336,13 +316,13 @@ export default function Category() {
|
||||
const val = e.target.value;
|
||||
setFormData({ ...formData, sort: val === "" ? "" : parseInt(val) });
|
||||
}}
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-center text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all text-lg"
|
||||
className="h-14 md:h-16 rounded-[1.2rem] md:rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-center text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all text-base md:text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">可见状态</Label>
|
||||
<div className="space-y-2 md:space-y-3">
|
||||
<Label className="text-[10px] md:text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">可见状态</Label>
|
||||
<select
|
||||
className="w-full h-16 rounded-[1.5rem] bg-white shadow-sm px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-lg appearance-none cursor-pointer"
|
||||
className="w-full h-14 md:h-16 rounded-[1.2rem] md:rounded-[1.5rem] bg-white shadow-sm px-4 md:px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-base md:text-lg appearance-none cursor-pointer"
|
||||
value={formData.status}
|
||||
onChange={e => setFormData({ ...formData, status: parseInt(e.target.value) })}
|
||||
>
|
||||
@@ -352,52 +332,27 @@ export default function Category() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="space-y-3 font-bold">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">分类图标</Label>
|
||||
<FileUploader
|
||||
label=""
|
||||
accept="image/*"
|
||||
value={formData.iconId}
|
||||
initialPreview={formData.iconUrl}
|
||||
onChange={(id) => setFormData({ ...formData, iconId: id })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3 font-bold">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">背景封面</Label>
|
||||
<FileUploader
|
||||
label=""
|
||||
accept="image/*"
|
||||
value={formData.coverId}
|
||||
initialPreview={formData.coverUrl}
|
||||
onChange={(id) => setFormData({ ...formData, coverId: id })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">分类核心描述</Label>
|
||||
<div className="space-y-2 md:space-y-3">
|
||||
<Label className="text-[10px] md:text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">分类核心描述</Label>
|
||||
<textarea
|
||||
className="w-full min-h-[140px] rounded-[2rem] border-none bg-white shadow-sm p-8 font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none resize-none placeholder:text-[#8C7E6C]/30"
|
||||
className="w-full min-h-[120px] md:min-h-[140px] rounded-[1.2rem] md:rounded-[2rem] border-none bg-white shadow-sm p-6 md:p-8 font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none resize-none placeholder:text-[#8C7E6C]/30 text-base md:text-lg"
|
||||
placeholder="描述此分类涵盖的内容风格与核心特质..."
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-10 bg-white/40 backdrop-blur-xl flex justify-between items-center border-t border-[#4A3A2C]/5">
|
||||
<div className="p-8 md:p-10 bg-white/40 backdrop-blur-xl flex flex-col sm:flex-row gap-4 sm:justify-between items-center border-t border-[#4A3A2C]/5">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setOpen(false)}
|
||||
className="rounded-[1.5rem] h-14 px-10 font-black uppercase tracking-[0.2em] text-xs hover:bg-white text-[#8C7E6C]"
|
||||
className="w-full sm:w-auto rounded-[1rem] md:rounded-[1.5rem] h-12 md:h-14 px-10 font-black uppercase tracking-[0.2em] text-[10px] md:text-xs hover:bg-white text-[#8C7E6C]"
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="rounded-[1.5rem] h-14 px-12 font-black shadow-2xl shadow-[#D28F4F]/30 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none"
|
||||
className="w-full sm:w-auto rounded-[1rem] md:rounded-[1.5rem] h-12 md:h-14 px-10 md:px-12 font-black shadow-2xl shadow-[#D28F4F]/30 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none text-white text-[11px] md:text-sm"
|
||||
>
|
||||
{isEdit ? '保存架构变更' : '部署新架构节点'}
|
||||
</Button>
|
||||
|
||||
+206
-200
@@ -6,7 +6,6 @@ import {
|
||||
deleteChannelApi,
|
||||
getAllCategoryListApi
|
||||
} from '../../../api/radio';
|
||||
import { FileUploader } from '../../../components/FileUploader';
|
||||
import { DeleteConfirm } from '../../../components/DeleteConfirm';
|
||||
import { Button } from '../../../components/ui/button';
|
||||
import { Input } from '../../../components/ui/input';
|
||||
@@ -19,15 +18,24 @@ import {
|
||||
Edit,
|
||||
Trash2,
|
||||
Search,
|
||||
Disc3,
|
||||
Crown,
|
||||
Zap,
|
||||
LayoutGrid,
|
||||
CalendarDays
|
||||
CalendarDays,
|
||||
Palette,
|
||||
Smile
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
const EMOJI_LIST = [
|
||||
'📻', '🎙️', '🎵', '🎶', '🎧', '🌙', '☀️', '🌊', '🌲', '🌌',
|
||||
'🍵', '🏮', '🎐', '🌸', '🎋', '🧘', '💆', '🕯️', '🕊️', '☁️',
|
||||
'🍃', '🐚', '🏔️', '🦊', '🦉', '🦋', '🎈', '🎨', '📚', '⌛',
|
||||
'🌈', '✨', '💎', '🦄', '🍀', '🍎', '🍓', '🍰', '🧁', '🍦',
|
||||
'🧸', '🎮', '🛸', '🚀', '🔭', '🌍', '🏠', '⛺', '🚂', '🚲'
|
||||
];
|
||||
|
||||
export default function Channel() {
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
@@ -52,9 +60,7 @@ export default function Channel() {
|
||||
monthlyPrice: 0,
|
||||
quarterlyPrice: 0,
|
||||
annualPrice: 0,
|
||||
coverId: '',
|
||||
coverUrl: '',
|
||||
tags: '',
|
||||
cover: '📻',
|
||||
sort: 0,
|
||||
status: 1
|
||||
});
|
||||
@@ -62,6 +68,13 @@ export default function Channel() {
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [deleteId, setDeleteId] = useState<any>(null);
|
||||
|
||||
// Helpers for Cents/Yuan conversion
|
||||
const toYuan = (cents: number) => cents === 0 ? "0" : (cents / 100).toString();
|
||||
const toCents = (yuan: string) => {
|
||||
const val = parseFloat(yuan);
|
||||
return isNaN(val) ? 0 : Math.round(val * 100);
|
||||
};
|
||||
|
||||
const fetchCategories = async () => {
|
||||
try {
|
||||
const res: any = await getAllCategoryListApi();
|
||||
@@ -117,9 +130,7 @@ export default function Channel() {
|
||||
monthlyPrice: 0,
|
||||
quarterlyPrice: 0,
|
||||
annualPrice: 0,
|
||||
coverId: '',
|
||||
coverUrl: '',
|
||||
tags: '',
|
||||
cover: '📻',
|
||||
sort: 0,
|
||||
status: 1
|
||||
});
|
||||
@@ -138,9 +149,7 @@ export default function Channel() {
|
||||
monthlyPrice: record.monthlyPrice || 0,
|
||||
quarterlyPrice: record.quarterlyPrice || 0,
|
||||
annualPrice: record.annualPrice || 0,
|
||||
coverId: record.coverId,
|
||||
coverUrl: record.cover?.url || record.coverUrl || "",
|
||||
tags: record.tags,
|
||||
cover: record.cover || '📻',
|
||||
sort: record.sort,
|
||||
status: record.status
|
||||
});
|
||||
@@ -170,17 +179,32 @@ export default function Channel() {
|
||||
if (!formData.name) return toast.error('请填写频道名称');
|
||||
if (!formData.categoryId) return toast.error('请选择所属分类');
|
||||
|
||||
// Create a copy for submission
|
||||
const submitData = { ...formData };
|
||||
if (submitData.sort === "" || submitData.sort === undefined || submitData.sort === null) submitData.sort = 0;
|
||||
if (submitData.monthlyPrice === "" || submitData.monthlyPrice === undefined || submitData.monthlyPrice === null) submitData.monthlyPrice = 0;
|
||||
if (submitData.quarterlyPrice === "" || submitData.quarterlyPrice === undefined || submitData.quarterlyPrice === null) submitData.quarterlyPrice = 0;
|
||||
if (submitData.annualPrice === "" || submitData.annualPrice === undefined || submitData.annualPrice === null) submitData.annualPrice = 0;
|
||||
|
||||
// 关键逻辑：如果设定为免费或 VIP 专属，价格应当归零
|
||||
if (submitData.isFree === 1 || submitData.isVipOnly === 1) {
|
||||
submitData.monthlyPrice = 0;
|
||||
submitData.quarterlyPrice = 0;
|
||||
submitData.annualPrice = 0;
|
||||
}
|
||||
|
||||
// 确保排序字段合法
|
||||
if (submitData.sort === "" || submitData.sort === undefined || submitData.sort === null) {
|
||||
submitData.sort = 0;
|
||||
}
|
||||
|
||||
// 确保分类 ID 为字符串（对齐 Swagger）
|
||||
submitData.categoryId = String(submitData.categoryId);
|
||||
|
||||
try {
|
||||
if (isEdit) {
|
||||
if (!submitData.id) return toast.error('缺少频道 ID');
|
||||
await updateChannelApi(submitData);
|
||||
toast.success('更新成功');
|
||||
} else {
|
||||
// 新增模式下，严禁携带 id 字段，否则可能被后端判定为合法的空 ID 或引发冲突
|
||||
delete submitData.id;
|
||||
await saveChannelApi(submitData);
|
||||
toast.success('创建成功');
|
||||
}
|
||||
@@ -195,40 +219,41 @@ export default function Channel() {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="space-y-8 pb-10"
|
||||
className="space-y-6 md:space-y-8 pb-10"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 px-2">
|
||||
<div>
|
||||
<h1 className="text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-4">
|
||||
<h1 className="text-3xl md:text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-4">
|
||||
频道管理
|
||||
<div className="w-3 h-3 rounded-full bg-[#D28F4F] shadow-[0_0_20px_rgba(210,143,79,0.5)] animate-pulse" />
|
||||
<Smile className="w-8 h-8 text-[#D28F4F] animate-bounce" />
|
||||
</h1>
|
||||
<p className="text-[#8C7E6C] font-medium mt-2">构建多元化的电台生态，管理每一个声音频道。</p>
|
||||
<p className="text-[#8C7E6C] font-medium mt-2 text-sm md:text-base">构建多元化的电台生态，用 Emoji 编织多彩频道。</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleOpenAdd}
|
||||
className="rounded-[1.5rem] h-14 px-8 font-black shadow-xl shadow-[#D28F4F]/20 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none group"
|
||||
className="rounded-[1.2rem] md:rounded-[1.5rem] h-12 md:h-14 px-6 md:px-8 font-black shadow-xl shadow-[#D28F4F]/20 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none group"
|
||||
>
|
||||
<Plus className="w-5 h-5 mr-3 group-hover:rotate-90 transition-transform" />
|
||||
<Plus className="w-5 h-5 mr-2 md:mr-3 group-hover:rotate-90 transition-transform" />
|
||||
创建新频道
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
|
||||
<div className="md:col-span-3 lg:col-span-2 space-y-6 sticky top-28">
|
||||
<Card className="glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden relative">
|
||||
<CardHeader className="p-8 border-b border-[#4A3A2C]/5 bg-[#FAF5E6]/60 backdrop-blur-md">
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8 items-start">
|
||||
{/* Sidebar Categories */}
|
||||
<div className="md:col-span-3 lg:col-span-2 space-y-6 md:sticky md:top-28">
|
||||
<Card className="glass-card warm-noise border-none shadow-glass rounded-[1.5rem] md:rounded-[2.5rem] overflow-hidden relative">
|
||||
<CardHeader className="p-4 md:p-8 border-b border-[#4A3A2C]/5 bg-[#FAF5E6]/60 backdrop-blur-md">
|
||||
<CardTitle className="text-[10px] font-black uppercase tracking-[0.3em] text-[#D28F4F] flex items-center gap-3">
|
||||
<LayoutGrid className="w-4 h-4" />
|
||||
频道分类
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 bg-[#FAF5E6]/20">
|
||||
<div className="space-y-3">
|
||||
<CardContent className="p-2 md:p-4 bg-[#FAF5E6]/20">
|
||||
<div className="flex md:flex-col gap-2 md:gap-3 overflow-x-auto md:overflow-x-visible pb-2 md:pb-0">
|
||||
<button
|
||||
onClick={() => setSelectedCategoryId("")}
|
||||
className={`w-full flex items-center px-6 py-4 rounded-3xl text-sm font-black transition-all ${selectedCategoryId === ""
|
||||
? 'bg-white shadow-md text-[#D28F4F] ring-4 ring-[#D28F4F]/10'
|
||||
className={`whitespace-nowrap flex items-center px-4 md:px-6 py-3 md:py-4 rounded-2xl md:rounded-3xl text-sm font-black transition-all flex-shrink-0 ${selectedCategoryId === ""
|
||||
? 'bg-white shadow-md text-[#D28F4F] ring-2 md:ring-4 ring-[#D28F4F]/10'
|
||||
: 'text-[#8C7E6C] hover:text-[#4A3A2C] hover:bg-white/40'
|
||||
}`}
|
||||
>
|
||||
@@ -241,13 +266,13 @@ export default function Channel() {
|
||||
<button
|
||||
key={catId}
|
||||
onClick={() => setSelectedCategoryId(catId)}
|
||||
className={`w-full flex items-center justify-between px-6 py-4 rounded-3xl text-sm font-black transition-all ${isSelected
|
||||
? 'bg-white shadow-md text-[#D28F4F] ring-4 ring-[#D28F4F]/10'
|
||||
className={`whitespace-nowrap flex items-center justify-between px-4 md:px-6 py-3 md:py-4 rounded-2xl md:rounded-3xl text-sm font-black transition-all flex-shrink-0 ${isSelected
|
||||
? 'bg-white shadow-md text-[#D28F4F] ring-2 md:ring-4 ring-[#D28F4F]/10'
|
||||
: 'text-[#8C7E6C] hover:text-[#4A3A2C] hover:bg-white/40'
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{category.name}</span>
|
||||
{isSelected && <div className="w-2 h-2 rounded-full bg-[#D28F4F] shadow-[0_0_10px_var(--primary)]" />}
|
||||
{isSelected && <div className="hidden md:block w-2 h-2 rounded-full bg-[#D28F4F] shadow-[0_0_10px_var(--primary)]" />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@@ -256,11 +281,12 @@ export default function Channel() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="md:col-span-9 lg:col-span-10 glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden min-h-[700px] relative z-10">
|
||||
<CardHeader className="p-10 border-b border-[#4A3A2C]/5 flex flex-col sm:flex-row sm:items-center justify-between gap-6 bg-[#FAF5E6]/40">
|
||||
{/* Main Table Content */}
|
||||
<Card className="md:col-span-9 lg:col-span-10 glass-card warm-noise border-none shadow-glass rounded-[1.5rem] md:rounded-[2.5rem] overflow-hidden min-h-[500px] md:min-h-[700px] relative z-10">
|
||||
<CardHeader className="p-6 md:p-10 border-b border-[#4A3A2C]/5 flex flex-col md:flex-row md:items-center justify-between gap-6 bg-[#FAF5E6]/40">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-1.5 h-8 bg-[#D28F4F] rounded-full shadow-[0_0_12px_#D28F4F]" />
|
||||
<CardTitle className="text-2xl font-black tracking-tight text-[#4A3A2C]">
|
||||
<div className="w-1.5 h-6 md:h-8 bg-[#D28F4F] rounded-full shadow-[0_0_12px_#D28F4F]" />
|
||||
<CardTitle className="text-xl md:text-2xl font-black tracking-tight text-[#4A3A2C]">
|
||||
{selectedCategoryId ? categories.find(c => String(c.ID || c.id) === selectedCategoryId)?.name : '电台频道全集'}
|
||||
</CardTitle>
|
||||
</div>
|
||||
@@ -270,16 +296,16 @@ export default function Channel() {
|
||||
placeholder="搜索频道名称..."
|
||||
value={searchName}
|
||||
onChange={(e) => setSearchName(e.target.value)}
|
||||
className="pl-12 h-12 rounded-2xl border-none bg-[#FAF5E6]/80 focus:bg-white shadow-inner transition-all font-bold text-[#4A3A2C]"
|
||||
className="pl-12 h-10 md:h-12 rounded-xl md:rounded-2xl border-none bg-[#FAF5E6]/80 focus:bg-white shadow-inner transition-all font-bold text-[#4A3A2C]"
|
||||
/>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<div className="overflow-x-auto overflow-y-hidden">
|
||||
<Table className="min-w-[800px]">
|
||||
<TableHeader className="bg-[#FAF5E6]/50">
|
||||
<TableRow className="hover:bg-transparent border-[#4A3A2C]/5">
|
||||
<TableHead className="w-[100px] pl-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">视觉封面</TableHead>
|
||||
<TableHead className="w-[100px] pl-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">Emoji 封面</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">频道信息</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">价格体系 (元)</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C] text-center">准入权限</TableHead>
|
||||
@@ -289,57 +315,53 @@ export default function Channel() {
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow><TableCell colSpan={6} className="h-96 text-center text-[#8C7E6C] font-black uppercase"><Disc3 className="w-12 h-12 mx-auto animate-spin-slow mb-4 text-[#D28F4F]/50" />同步数据中...</TableCell></TableRow>
|
||||
<TableRow><TableCell colSpan={6} className="h-96 text-center text-[#8C7E6C] font-black uppercase"><Palette className="w-12 h-12 mx-auto animate-spin-slow mb-4 text-[#D28F4F]/50" />同步视觉数据...</TableCell></TableRow>
|
||||
) : data.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={6} className="h-96 text-center text-[#8C7E6C] text-sm font-black tracking-widest uppercase">未发现相关频道</TableCell></TableRow>
|
||||
) : (
|
||||
data.map((item: any) => (
|
||||
<TableRow
|
||||
key={item.ID || item.id}
|
||||
className="group border-[#4A3A2C]/5 hover:bg-[#FAF5E6]/80 transition-all duration-300 transform hover:scale-[1.002] relative"
|
||||
className="group border-[#4A3A2C]/5 hover:bg-[#FAF5E6]/80 transition-all duration-300 transform md:hover:scale-[1.002] relative"
|
||||
>
|
||||
<TableCell className="pl-10 py-6">
|
||||
<div className="w-20 h-14 rounded-2xl overflow-hidden shadow-md ring-4 ring-white transition-all group-hover:ring-[#D28F4F]/20 bg-[#F2EDE4]">
|
||||
<img
|
||||
src={item.cover?.url || item.coverUrl || 'https://picsum.photos/seed/channel/100/100'}
|
||||
alt=""
|
||||
className="w-full h-full object-cover group-hover:scale-125 transition-transform duration-1000"
|
||||
/>
|
||||
<div className="w-16 h-16 md:w-20 md:h-20 rounded-2xl md:rounded-[2rem] bg-white shadow-sm flex items-center justify-center text-3xl md:text-5xl group-hover:scale-110 group-hover:rotate-6 transition-all border border-[#FAF5E6]">
|
||||
{item.cover || '📻'}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-6">
|
||||
<div className="max-w-[200px]">
|
||||
<p className="font-black text-[#4A3A2C] group-hover:text-[#D28F4F] transition-colors text-base tracking-tight">{item.name}</p>
|
||||
<p className="font-black text-[#4A3A2C] md:group-hover:text-[#D28F4F] transition-colors text-base md:text-lg tracking-tight">{item.name}</p>
|
||||
<p className="text-[11px] font-bold text-[#8C7E6C]/60 mt-1 line-clamp-1 italic">#{categories.find(c => String(c.ID || c.id) === String(item.categoryId))?.name || '未分类'}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-6">
|
||||
<div className="flex gap-4">
|
||||
<div className="text-center group/price hover:translate-y-[-2px] transition-transform">
|
||||
<div className="text-center group/price md:hover:translate-y-[-2px] transition-transform">
|
||||
<p className="text-[10px] font-black text-[#8C7E6C]/50 uppercase">包月</p>
|
||||
<p className="text-xs font-black text-[#4A3A2C]">¥{(item.monthlyPrice / 100).toFixed(2)}</p>
|
||||
<p className="text-xs md:text-sm font-black text-[#4A3A2C]">¥{(item.monthlyPrice / 100).toFixed(2).replace(/\.00$/, '')}</p>
|
||||
</div>
|
||||
<div className="w-px h-8 bg-[#4A3A2C]/5 mt-1" />
|
||||
<div className="text-center group/price hover:translate-y-[-2px] transition-transform">
|
||||
<div className="text-center group/price md:hover:translate-y-[-2px] transition-transform">
|
||||
<p className="text-[10px] font-black text-[#8C7E6C]/50 uppercase">包季</p>
|
||||
<p className="text-xs font-black text-[#4A3A2C]">¥{(item.quarterlyPrice / 100).toFixed(2)}</p>
|
||||
<p className="text-xs md:text-sm font-black text-[#4A3A2C]">¥{(item.quarterlyPrice / 100).toFixed(2).replace(/\.00$/, '')}</p>
|
||||
</div>
|
||||
<div className="w-px h-8 bg-[#4A3A2C]/5 mt-1" />
|
||||
<div className="text-center group/price hover:translate-y-[-2px] transition-transform">
|
||||
<div className="text-center group/price md:hover:translate-y-[-2px] transition-transform">
|
||||
<p className="text-[10px] font-black text-[#D28F4F]/60 uppercase">包年</p>
|
||||
<p className="text-xs font-black text-[#D28F4F]">¥{(item.annualPrice / 100).toFixed(2)}</p>
|
||||
<p className="text-xs md:text-sm font-black text-[#D28F4F]">¥{(item.annualPrice / 100).toFixed(2).replace(/\.00$/, '')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-6 text-center">
|
||||
<div className="flex justify-center">
|
||||
{item.isVipOnly === 1 ? (
|
||||
<div className="flex items-center gap-1.5 px-4 py-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200 shadow-sm">
|
||||
<div className="flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-amber-50 text-amber-700 border border-amber-200 shadow-sm">
|
||||
<Crown className="w-3.5 h-3.5 fill-amber-500" />
|
||||
<span className="text-[10px] font-black uppercase">VIP 专属</span>
|
||||
</div>
|
||||
) : item.isFree === 1 ? (
|
||||
<div className="flex items-center gap-1.5 px-4 py-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 shadow-sm">
|
||||
<div className="flex items-center gap-1.5 px-4 py-1.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 shadow-sm">
|
||||
<Zap className="w-3.5 h-3.5 fill-emerald-500" />
|
||||
<span className="text-[10px] font-black uppercase tracking-tighter">全员免费</span>
|
||||
</div>
|
||||
@@ -349,7 +371,7 @@ export default function Channel() {
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-6 text-center">
|
||||
<div className={`flex items-center mx-auto w-fit px-3 py-1 rounded-full text-[10px] font-black uppercase border shadow-sm ${item.status === 1
|
||||
<div className={`flex items-center mx-auto w-fit px-4 py-1.5 rounded-full text-[10px] font-black uppercase border shadow-sm ${item.status === 1
|
||||
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
|
||||
: 'bg-rose-50 text-rose-600 border-rose-200'
|
||||
}`}>
|
||||
@@ -358,12 +380,12 @@ export default function Channel() {
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right pr-10 py-6">
|
||||
<div className="flex items-center justify-end gap-3 opacity-0 group-hover:opacity-100 transition-all translate-x-4 group-hover:translate-x-0">
|
||||
<div className="flex items-center justify-end gap-3 opacity-0 md:group-hover:opacity-100 transition-all translate-x-4 md:group-hover:translate-x-0 group-focus-within:opacity-100 group-focus-within:translate-x-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleOpenEdit(item)}
|
||||
className="w-12 h-12 rounded-[1.2rem] hover:bg-white hover:text-[#D28F4F] transition-all border border-[#4A3A2C]/5 shadow-sm hover:shadow-md"
|
||||
className="w-10 h-10 md:w-12 md:h-12 rounded-[1rem] md:rounded-[1.2rem] hover:bg-white hover:text-[#D28F4F] transition-all border border-[#4A3A2C]/5 shadow-sm hover:shadow-md"
|
||||
>
|
||||
<Edit className="w-5 h-5" />
|
||||
</Button>
|
||||
@@ -371,7 +393,7 @@ export default function Channel() {
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteClick(item.ID || item.id)}
|
||||
className="w-12 h-12 rounded-[1.2rem] hover:bg-rose-50 hover:text-rose-600 transition-all border border-[#4A3A2C]/5 shadow-sm"
|
||||
className="w-10 h-10 md:w-12 md:h-12 rounded-[1rem] md:rounded-[1.2rem] hover:bg-rose-50 hover:text-rose-600 transition-all border border-[#4A3A2C]/5 shadow-sm"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</Button>
|
||||
@@ -390,25 +412,25 @@ export default function Channel() {
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 10 }}
|
||||
className="p-10 border-t border-[#4A3A2C]/5 flex items-center justify-center bg-[#FAF5E6]/40 backdrop-blur-md"
|
||||
className="p-6 md:p-10 border-t border-[#4A3A2C]/5 flex items-center justify-center bg-[#FAF5E6]/40 backdrop-blur-md"
|
||||
>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-4 md:gap-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setPage(p => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
className="rounded-2xl px-8 h-12 font-black uppercase tracking-widest text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
|
||||
className="rounded-xl md:rounded-2xl px-4 md:px-8 h-10 md:h-12 font-black uppercase tracking-widest text-[10px] md:text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
|
||||
>
|
||||
上一页
|
||||
</Button>
|
||||
<div className="px-8 py-2.5 bg-white/60 backdrop-blur-md rounded-full shadow-inner border border-[#D28F4F]/10 text-[11px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">
|
||||
<div className="px-4 md:px-8 py-2 md:py-2.5 bg-white/60 backdrop-blur-md rounded-full shadow-inner border border-[#D28F4F]/10 text-[10px] md:text-[11px] font-black uppercase tracking-[0.2em] text-[#8C7E6C] whitespace-nowrap">
|
||||
第 <span className="text-[#D28F4F]">{page}</span> / {Math.ceil(total / pageSize)} 页
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
disabled={data.length < pageSize}
|
||||
className="rounded-2xl px-8 h-12 font-black uppercase tracking-widest text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
|
||||
className="rounded-xl md:rounded-2xl px-4 md:px-8 h-10 md:h-12 font-black uppercase tracking-widest text-[10px] md:text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
|
||||
>
|
||||
下一页
|
||||
</Button>
|
||||
@@ -419,29 +441,61 @@ export default function Channel() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Responsive Modal / Dialog */}
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="sm:max-w-[850px] glass-card warm-noise border-none rounded-[3.5rem] p-0 overflow-hidden shadow-2xl">
|
||||
<div className="bg-gradient-to-r from-[#D28F4F] to-[#A64452] p-12 text-white relative">
|
||||
<DialogTitle className="text-3xl font-black tracking-tight">{isEdit ? '编辑频道方案' : '策划全新广播频道'}</DialogTitle>
|
||||
<p className="text-white/60 text-xs font-black uppercase tracking-[0.3em] mt-3">Channel Ecosystem Design</p>
|
||||
<Disc3 className="absolute right-12 top-1/2 -translate-y-1/2 w-24 h-24 text-white/10 animate-spin-slow" />
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[850px] glass-card warm-noise border-none rounded-[2rem] md:rounded-[4rem] p-0 overflow-hidden shadow-2xl">
|
||||
<div className="bg-gradient-to-r from-[#D28F4F] to-[#A64452] p-8 md:p-14 text-white relative">
|
||||
<div className="flex flex-col md:flex-row md:items-center gap-8">
|
||||
<motion.div
|
||||
animate={{ rotate: [0, 5, -5, 0] }}
|
||||
transition={{ repeat: Infinity, duration: 4 }}
|
||||
className="w-24 h-24 md:w-32 md:h-32 rounded-[2rem] md:rounded-[3rem] bg-white shadow-2xl flex items-center justify-center text-5xl md:text-7xl shrink-0"
|
||||
>
|
||||
{formData.cover}
|
||||
</motion.div>
|
||||
<div className="space-y-2">
|
||||
<DialogTitle className="text-3xl md:text-5xl font-black tracking-tighter">{isEdit ? '更新频道核心' : '注入全新共鸣'}</DialogTitle>
|
||||
<p className="text-white/60 text-xs md:text-sm font-black uppercase tracking-[0.4em]">Emoji Driven Identity</p>
|
||||
</div>
|
||||
<div className="p-12 space-y-10 max-h-[75vh] overflow-y-auto custom-scrollbar bg-[#FAF5E6]/60 backdrop-blur-3xl">
|
||||
<div className="grid grid-cols-2 gap-10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 md:p-14 space-y-10 md:space-y-12 max-h-[60vh] overflow-y-auto custom-scrollbar bg-[#FAF5E6]/60 backdrop-blur-3xl">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-14">
|
||||
{/* Form Left Side */}
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">频道名称</Label>
|
||||
<section className="space-y-4">
|
||||
<Label className="text-[10px] md:text-[11px] uppercase font-black tracking-widest text-[#D28F4F] ml-1 flex items-center gap-2">
|
||||
<Smile className="w-4 h-4" />
|
||||
选择频道 Emoji 封面
|
||||
</Label>
|
||||
<div className="grid grid-cols-5 md:grid-cols-10 gap-2 p-4 rounded-[2rem] bg-white/40 border border-[#D28F4F]/10">
|
||||
{EMOJI_LIST.map(emoji => (
|
||||
<button
|
||||
key={emoji}
|
||||
onClick={() => setFormData({ ...formData, cover: emoji })}
|
||||
className={`w-10 h-10 md:w-12 md:h-12 flex items-center justify-center text-xl md:text-2xl rounded-xl transition-all ${formData.cover === emoji ? 'bg-[#D28F4F] shadow-lg scale-110' : 'hover:bg-white/60'}`}
|
||||
>
|
||||
{emoji}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label className="text-[10px] md:text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">频道方案名称</Label>
|
||||
<Input
|
||||
placeholder="输入辨识度高的名称..."
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
|
||||
className="h-14 md:h-16 rounded-2xl md:rounded-3xl border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-6 md:pl-8 text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">所属分类</Label>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label className="text-[10px] md:text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">所属架构分类</Label>
|
||||
<select
|
||||
className="w-full h-16 rounded-[1.5rem] bg-white shadow-sm px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-lg appearance-none cursor-pointer"
|
||||
className="w-full h-14 md:h-16 rounded-2xl md:rounded-3xl bg-white shadow-sm px-6 md:px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-lg appearance-none cursor-pointer"
|
||||
value={formData.categoryId}
|
||||
onChange={e => setFormData({ ...formData, categoryId: e.target.value })}
|
||||
>
|
||||
@@ -451,9 +505,52 @@ export default function Channel() {
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Form Right Side */}
|
||||
<div className="space-y-8">
|
||||
<div className="rounded-[2.5rem] md:rounded-[3rem] border border-[#D28F4F]/10 shadow-sm bg-white/40 p-8 md:p-10 space-y-8">
|
||||
<Label className="text-[10px] md:text-[11px] uppercase font-black tracking-widest text-[#D28F4F] flex items-center gap-2">
|
||||
<CalendarDays className="w-4 h-4" />
|
||||
价格策略体系 (元)
|
||||
</Label>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-6 bg-white p-4 rounded-3xl shadow-sm">
|
||||
<span className="text-[11px] font-black text-[#8C7E6C] uppercase w-12 text-center">包月</span>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={toYuan(formData.monthlyPrice)}
|
||||
onChange={e => setFormData({ ...formData, monthlyPrice: toCents(e.target.value) })}
|
||||
className="h-12 border-none shadow-none font-black text-xl text-right flex-1 bg-transparent text-[#4A3A2C]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-6 bg-white p-4 rounded-3xl shadow-sm">
|
||||
<span className="text-[11px] font-black text-[#8C7E6C] uppercase w-12 text-center">包季</span>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={toYuan(formData.quarterlyPrice)}
|
||||
onChange={e => setFormData({ ...formData, quarterlyPrice: toCents(e.target.value) })}
|
||||
className="h-12 border-none shadow-none font-black text-xl text-right flex-1 bg-transparent text-[#4A3A2C]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-6 bg-gradient-to-r from-[#D28F4F]/10 to-[#A64452]/10 p-4 rounded-3xl ring-2 ring-[#D28F4F]/20 shadow-sm">
|
||||
<span className="text-[11px] font-black text-[#D28F4F] uppercase w-12 text-center font-serif italic">包年</span>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={toYuan(formData.annualPrice)}
|
||||
onChange={e => setFormData({ ...formData, annualPrice: toCents(e.target.value) })}
|
||||
className="h-12 border-none shadow-none font-black text-2xl text-right flex-1 bg-transparent text-[#A64452]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">排序权重</Label>
|
||||
<Label className="text-[10px] md:text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">排序权重</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={formData.sort ?? ""}
|
||||
@@ -461,151 +558,60 @@ export default function Channel() {
|
||||
const val = e.target.value;
|
||||
setFormData({ ...formData, sort: val === "" ? "" : parseInt(val) });
|
||||
}}
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-center text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all text-lg"
|
||||
className="h-14 md:h-16 rounded-3xl border-none bg-white shadow-sm font-black text-center text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all text-xl"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">启用状态</Label>
|
||||
<Label className="text-[10px] md:text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">准入权限模式</Label>
|
||||
<select
|
||||
className="w-full h-16 rounded-[1.5rem] bg-white shadow-sm px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-lg appearance-none cursor-pointer"
|
||||
value={formData.status}
|
||||
onChange={e => setFormData({ ...formData, status: parseInt(e.target.value) })}
|
||||
>
|
||||
<option value={1}>启用</option>
|
||||
<option value={0}>下架</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-6 p-6 rounded-[2.5rem] bg-[#FAF5E6] border border-[#D28F4F]/10 shadow-inner">
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[10px] uppercase font-black text-[#8C7E6C] ml-1">收费模式</Label>
|
||||
<select
|
||||
className="w-full h-12 rounded-[1.2rem] bg-white text-sm font-black text-[#4A3A2C] border-none shadow-sm appearance-none px-4"
|
||||
value={formData.isFree}
|
||||
className="w-full h-14 md:h-16 rounded-3xl bg-white shadow-sm px-6 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-base appearance-none cursor-pointer"
|
||||
value={formData.isVipOnly === 1 ? 'vip' : formData.isFree === 1 ? 'free' : 'standard'}
|
||||
onChange={e => {
|
||||
const val = parseInt(e.target.value);
|
||||
setFormData({ ...formData, isFree: val });
|
||||
const val = e.target.value;
|
||||
if (val === 'vip') {
|
||||
setFormData({ ...formData, isVipOnly: 1, isFree: 0 });
|
||||
} else if (val === 'free') {
|
||||
setFormData({ ...formData, isVipOnly: 0, isFree: 1 });
|
||||
} else {
|
||||
setFormData({ ...formData, isVipOnly: 0, isFree: 0 });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<option value={0}>普通收费</option>
|
||||
<option value={1}>全员免费</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[10px] uppercase font-black text-[#8C7E6C] ml-1">VIP权限</Label>
|
||||
<select
|
||||
className="w-full h-12 rounded-[1.2rem] bg-white text-sm font-black text-[#4A3A2C] border-none shadow-sm appearance-none px-4"
|
||||
value={formData.isVipOnly}
|
||||
onChange={e => {
|
||||
const val = parseInt(e.target.value);
|
||||
setFormData({
|
||||
...formData,
|
||||
isVipOnly: val,
|
||||
isFree: val === 1 ? 0 : formData.isFree
|
||||
});
|
||||
}}
|
||||
>
|
||||
<option value={0}>公开访问</option>
|
||||
<option value={1}>仅限VIP</option>
|
||||
<option value="standard">标准访问 (按价格收费)</option>
|
||||
<option value="vip">VIP 专属 (仅限 VIP 听众)</option>
|
||||
<option value="free">全员免费 (无需付费/VIP)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-3 font-bold">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">视觉封面设计</Label>
|
||||
<FileUploader
|
||||
label=""
|
||||
accept="image/*"
|
||||
placeholder="上传封面图片 (jpg, png, webp)"
|
||||
value={formData.coverId}
|
||||
initialPreview={formData.coverUrl}
|
||||
onChange={(id) => setFormData({ ...formData, coverId: id })}
|
||||
/>
|
||||
</div>
|
||||
<div className="rounded-[2.5rem] border border-[#D28F4F]/10 shadow-sm bg-white/30 p-8 space-y-6">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#D28F4F] flex items-center gap-2">
|
||||
<CalendarDays className="w-4 h-4" />
|
||||
价格策略配置 (元)
|
||||
</Label>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<div className="flex items-center gap-6 bg-white p-4 rounded-[1.5rem] shadow-sm">
|
||||
<span className="text-[11px] font-black text-[#8C7E6C] uppercase w-12 text-center">包月</span>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={formData.monthlyPrice === 0 ? "0" : (formData.monthlyPrice ? (formData.monthlyPrice / 100).toString() : "")}
|
||||
onChange={e => {
|
||||
const val = e.target.value;
|
||||
setFormData({ ...formData, monthlyPrice: val === "" ? "" : Math.round(parseFloat(val) * 100) });
|
||||
}}
|
||||
className="h-10 border-none shadow-none font-black text-lg text-right flex-1 bg-transparent text-[#4A3A2C]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-6 bg-white p-4 rounded-[1.5rem] shadow-sm">
|
||||
<span className="text-[11px] font-black text-[#8C7E6C] uppercase w-12 text-center">包季</span>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={formData.quarterlyPrice === 0 ? "0" : (formData.quarterlyPrice ? (formData.quarterlyPrice / 100).toString() : "")}
|
||||
onChange={e => {
|
||||
const val = e.target.value;
|
||||
setFormData({ ...formData, quarterlyPrice: val === "" ? "" : Math.round(parseFloat(val) * 100) });
|
||||
}}
|
||||
className="h-10 border-none shadow-none font-black text-lg text-right flex-1 bg-transparent text-[#4A3A2C]"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-6 bg-[#D28F4F]/5 p-4 rounded-[1.5rem] ring-2 ring-[#D28F4F]/20 shadow-sm">
|
||||
<span className="text-[11px] font-black text-[#D28F4F] uppercase w-12 text-center">包年</span>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={formData.annualPrice === 0 ? "0" : (formData.annualPrice ? (formData.annualPrice / 100).toString() : "")}
|
||||
onChange={e => {
|
||||
const val = e.target.value;
|
||||
setFormData({ ...formData, annualPrice: val === "" ? "" : Math.round(parseFloat(val) * 100) });
|
||||
}}
|
||||
className="h-10 border-none shadow-none font-black text-lg text-right flex-1 bg-transparent text-[#D28F4F]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">专属标签 (逗号隔开)</Label>
|
||||
<Input
|
||||
placeholder="例：故事, 催眠, 纯音乐..."
|
||||
value={formData.tags}
|
||||
onChange={(e) => setFormData({ ...formData, tags: e.target.value })}
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">频道深度介绍</Label>
|
||||
|
||||
{/* Textareas */}
|
||||
<div className="space-y-6">
|
||||
<Label className="text-[10px] md:text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">频道深度介绍</Label>
|
||||
<textarea
|
||||
className="w-full min-h-[140px] rounded-[2rem] border-none bg-white shadow-sm p-8 font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none resize-none placeholder:text-[#8C7E6C]/30"
|
||||
className="w-full min-h-[140px] rounded-[2.5rem] border-none bg-white shadow-sm p-8 font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none resize-none placeholder:text-[#8C7E6C]/30 text-lg"
|
||||
placeholder="描述此频道的独特魅力与听众受众..."
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-12 bg-white/40 backdrop-blur-xl flex justify-between items-center border-t border-[#4A3A2C]/5 font-black">
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="p-8 md:p-14 bg-white/60 backdrop-blur-2xl flex flex-col sm:flex-row gap-6 sm:justify-between items-center border-t border-[#4A3A2C]/5 font-black">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setOpen(false)}
|
||||
className="rounded-[1.5rem] h-14 px-10 uppercase tracking-[0.2em] text-xs hover:bg-white text-[#8C7E6C]"
|
||||
className="w-full sm:w-auto rounded-3xl h-14 md:h-16 px-12 uppercase tracking-[0.3em] text-xs hover:bg-white text-[#8C7E6C]"
|
||||
>
|
||||
取消返回
|
||||
舍弃变更
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="rounded-[1.5rem] h-14 px-12 shadow-2xl shadow-[#D28F4F]/30 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none"
|
||||
className="w-full sm:w-auto rounded-3xl h-14 md:h-16 px-14 md:px-16 shadow-2xl shadow-[#D28F4F]/30 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none text-white text-base"
|
||||
>
|
||||
{isEdit ? '保存频道更新' : '立即发布频道'}
|
||||
{isEdit ? '注入数据更新' : '立即发布频道'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
|
||||
+291
-330
@@ -4,7 +4,7 @@ import {
|
||||
saveProgramApi,
|
||||
updateProgramApi,
|
||||
deleteProgramApi,
|
||||
getCategoryTreeApi
|
||||
getChannelListApi
|
||||
} from '../../../api/radio';
|
||||
import { FileUploader } from '../../../components/FileUploader';
|
||||
import { DeleteConfirm } from '../../../components/DeleteConfirm';
|
||||
@@ -18,20 +18,29 @@ import {
|
||||
Plus,
|
||||
Edit,
|
||||
Trash2,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Search,
|
||||
Play,
|
||||
Pause,
|
||||
Headphones,
|
||||
ListMusic,
|
||||
Music,
|
||||
Clock,
|
||||
Tag,
|
||||
Disc3,
|
||||
ThumbsUp,
|
||||
Search,
|
||||
Clock
|
||||
ArrowRight,
|
||||
Headphones,
|
||||
FileAudio,
|
||||
Smile
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
const EMOJI_LIST = [
|
||||
'🎵', '🎶', '📻', '🎙️', '🎧', '🌙', '☀️', '🌊', '🌲', '🌌',
|
||||
'🍵', '🏮', '🎐', '🌸', '🎋', '🧘', '💆', '🕯️', '🕊️', '☁️',
|
||||
'🍃', '🐚', '🏔️', '🦊', '🦉', '🦋', '🎈', '🎨', '📚', '⌛',
|
||||
'🌈', '✨', '💎', '🦄', '🍀', '🍎', '🍓', '🍰', '🧁', '🍦',
|
||||
'🧸', '🎮', '🛸', '🚀', '🔭', '🌍', '🏠', '⛺', '🚂', '🚲'
|
||||
];
|
||||
|
||||
export default function Program() {
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
@@ -47,65 +56,41 @@ export default function Program() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
const [formData, setFormData] = useState<any>({
|
||||
id: '',
|
||||
id: undefined,
|
||||
channelId: '',
|
||||
title: '',
|
||||
description: '',
|
||||
content: '',
|
||||
duration: 0,
|
||||
audioId: '',
|
||||
audioUrl: '',
|
||||
duration: 0,
|
||||
cover: '🎵',
|
||||
tags: '',
|
||||
status: 1
|
||||
});
|
||||
|
||||
const [treeData, setTreeData] = useState<any[]>([]);
|
||||
const [expandedCategories, setExpandedCategories] = useState<string[]>([]);
|
||||
const [playingId, setPlayingId] = useState<string | null>(null);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [deleteIds, setDeleteIds] = useState<any[]>([]);
|
||||
|
||||
const [playingId, setPlayingId] = useState<any>(null);
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [deleteId, setDeleteId] = useState<any>(null);
|
||||
|
||||
const fetchTreeData = async () => {
|
||||
const fetchChannels = async () => {
|
||||
try {
|
||||
const res: any = await getCategoryTreeApi();
|
||||
const list = res.list || res || [];
|
||||
setTreeData(list);
|
||||
|
||||
const allChannels: any = [];
|
||||
list.forEach((cat: any) => {
|
||||
const channelList = cat.channels || cat.channelList || [];
|
||||
allChannels.push(...channelList);
|
||||
});
|
||||
setChannels(allChannels);
|
||||
|
||||
if (list.length > 0) {
|
||||
const firstCatId = String(list[0].ID || list[0].id || "");
|
||||
setExpandedCategories(prev => prev.length === 0 ? [firstCatId] : prev);
|
||||
|
||||
if (selectedChannelId === "") {
|
||||
const firstCatChannels = list[0].channels || list[0].channelList || [];
|
||||
if (firstCatChannels.length > 0) {
|
||||
const firstChanId = String(firstCatChannels[0].ID || firstCatChannels[0].id || "");
|
||||
setSelectedChannelId(firstChanId);
|
||||
}
|
||||
}
|
||||
}
|
||||
const res: any = await getChannelListApi({ pageSize: 100 });
|
||||
setChannels(res.list || res || []);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
const fetchData = async () => {
|
||||
if (!selectedChannelId) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const res: any = await getProgramListApi({
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
title: debouncedSearch || "",
|
||||
channelId: selectedChannelId || ""
|
||||
title: debouncedSearch,
|
||||
channelId: selectedChannelId || undefined
|
||||
});
|
||||
setData(res.list || res || []);
|
||||
setTotal(res.total || 0);
|
||||
@@ -117,18 +102,11 @@ export default function Program() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchTreeData();
|
||||
audioRef.current = new Audio();
|
||||
return () => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
audioRef.current.src = "";
|
||||
}
|
||||
};
|
||||
fetchChannels();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChannelId) fetchData();
|
||||
fetchData();
|
||||
}, [page, pageSize, selectedChannelId, debouncedSearch]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -139,43 +117,17 @@ export default function Program() {
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchTitle]);
|
||||
|
||||
const togglePlay = (record: any) => {
|
||||
const id = String(record.ID || record.id || "");
|
||||
const url = record.audio?.url || record.audioUrl;
|
||||
|
||||
if (!url || !audioRef.current) {
|
||||
toast.error("无可播放音频");
|
||||
return;
|
||||
}
|
||||
|
||||
if (playingId === id) {
|
||||
audioRef.current.pause();
|
||||
setPlayingId(null);
|
||||
} else {
|
||||
audioRef.current.src = url;
|
||||
audioRef.current.play().catch(e => {
|
||||
toast.error("播放失败: " + e.message);
|
||||
setPlayingId(null);
|
||||
});
|
||||
setPlayingId(id);
|
||||
}
|
||||
};
|
||||
|
||||
if (audioRef.current) {
|
||||
audioRef.current.onended = () => setPlayingId(null);
|
||||
}
|
||||
|
||||
const handleOpenAdd = () => {
|
||||
setIsEdit(false);
|
||||
setFormData({
|
||||
id: '',
|
||||
channelId: selectedChannelId,
|
||||
id: undefined,
|
||||
channelId: selectedChannelId || '',
|
||||
title: '',
|
||||
description: '',
|
||||
content: '',
|
||||
duration: 0,
|
||||
audioId: '',
|
||||
audioUrl: '',
|
||||
duration: 0,
|
||||
cover: '🎵',
|
||||
tags: '',
|
||||
status: 1
|
||||
});
|
||||
@@ -190,48 +142,44 @@ export default function Program() {
|
||||
title: record.title,
|
||||
description: record.description,
|
||||
content: record.content,
|
||||
audioId: record.audioId || "",
|
||||
duration: record.duration,
|
||||
audioId: record.audioId,
|
||||
audioUrl: record.audio?.url || record.audioUrl || "",
|
||||
tags: record.tags,
|
||||
cover: record.cover || '🎵',
|
||||
tags: record.tags || "",
|
||||
status: record.status
|
||||
});
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (id: any) => {
|
||||
setDeleteId(id);
|
||||
setDeleteIds([String(id)]);
|
||||
setDeleteOpen(true);
|
||||
};
|
||||
|
||||
const confirmDelete = async () => {
|
||||
if (!deleteId) return;
|
||||
if (deleteIds.length === 0) return;
|
||||
try {
|
||||
await deleteProgramApi({ ids: [String(deleteId)] });
|
||||
await deleteProgramApi({ ids: deleteIds });
|
||||
toast.success('删除成功');
|
||||
fetchData();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
setDeleteOpen(false);
|
||||
setDeleteId(null);
|
||||
setDeleteIds([]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.title) return toast.error('请填写标题');
|
||||
|
||||
const submitData = { ...formData };
|
||||
if (submitData.duration === "" || submitData.duration === undefined || submitData.duration === null) {
|
||||
submitData.duration = 0;
|
||||
}
|
||||
if (!formData.title) return toast.error('请填写节目标题');
|
||||
if (!formData.channelId) return toast.error('请选择所属频道');
|
||||
|
||||
try {
|
||||
if (isEdit) {
|
||||
await updateProgramApi(submitData);
|
||||
await updateProgramApi(formData);
|
||||
toast.success('更新成功');
|
||||
} else {
|
||||
await saveProgramApi(submitData);
|
||||
await saveProgramApi(formData);
|
||||
toast.success('创建成功');
|
||||
}
|
||||
setOpen(false);
|
||||
@@ -241,374 +189,387 @@ export default function Program() {
|
||||
}
|
||||
};
|
||||
|
||||
const toggleCategory = (catId: string) => {
|
||||
setExpandedCategories(prev =>
|
||||
prev.includes(catId) ? prev.filter(id => id !== catId) : [...prev, catId]
|
||||
);
|
||||
const togglePlay = (record: any) => {
|
||||
const audioUrl = record.audio?.url || record.audioId;
|
||||
if (!audioUrl) return toast.error('无可用音频文件');
|
||||
|
||||
if (playingId === (record.ID || record.id)) {
|
||||
audioRef.current?.pause();
|
||||
setPlayingId(null);
|
||||
} else {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.src = audioUrl;
|
||||
audioRef.current.play();
|
||||
setPlayingId(record.ID || record.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const formatDuration = (seconds: number) => {
|
||||
const m = Math.floor(seconds / 60);
|
||||
const s = Math.floor(seconds % 60);
|
||||
return `${m}:${s < 10 ? '0' : ''}${s}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
initial={{ opacity: 0, scale: 0.98 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="space-y-8 pb-10"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<audio ref={audioRef} onEnded={() => setPlayingId(null)} className="hidden" />
|
||||
|
||||
<div className="flex flex-col xl:flex-row xl:items-end justify-between gap-8 px-2">
|
||||
<div>
|
||||
<h1 className="text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-3">
|
||||
节目管理
|
||||
<div className="w-3 h-3 rounded-full bg-[#D28F4F] shadow-[0_0_20px_rgba(210,143,79,0.5)] animate-pulse" />
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<span className="px-4 py-1 rounded-full bg-[#A64452]/10 border border-[#A64452]/20 text-[#A64452] text-[10px] font-black uppercase tracking-[0.3em]">
|
||||
Content Studio
|
||||
</span>
|
||||
<div className="w-2 h-2 rounded-full bg-[#A64452] animate-ping" />
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-black tracking-tighter text-[#4A3A2C] leading-tight">
|
||||
声音单元<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#D28F4F] to-[#A64452] mx-2 italic font-serif">编辑室</span>
|
||||
</h1>
|
||||
<p className="text-[#8C7E6C] font-medium mt-2">管理和分发每一个温暖人心的广播节目信息。</p>
|
||||
<p className="text-[#8C7E6C] font-medium mt-4 text-sm md:text-base max-w-xl">
|
||||
在这里雕琢每一个播音瞬间，通过 Emoji 为每一段声音赋予独特的视觉生命。
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleOpenAdd}
|
||||
className="rounded-[1.5rem] h-14 px-8 font-black shadow-xl shadow-[#D28F4F]/20 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none group"
|
||||
className="h-16 px-10 rounded-[2rem] bg-[#4A3A2C] hover:bg-[#D28F4F] text-white font-black shadow-2xl transition-all hover:scale-105 active:scale-95 group border-none"
|
||||
>
|
||||
<Plus className="w-5 h-5 mr-3 group-hover:rotate-90 transition-transform" />
|
||||
发布新节目
|
||||
发布新声音单元
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-start">
|
||||
<div className="md:col-span-3 lg:col-span-2 space-y-6 sticky top-28">
|
||||
<Card className="glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden relative z-10">
|
||||
<CardHeader className="p-8 border-b border-[#4A3A2C]/5 bg-[#FAF5E6]/60 backdrop-blur-md">
|
||||
<CardTitle className="text-[10px] font-black uppercase tracking-[0.25em] text-[#D28F4F] flex items-center gap-3">
|
||||
<ListMusic className="w-4 h-4" />
|
||||
频道导航
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
|
||||
{/* Channel Selector Sidebar */}
|
||||
<Card className="lg:col-span-3 glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden lg:sticky lg:top-28">
|
||||
<CardHeader className="p-8 border-b border-[#4A3A2C]/5 bg-[#FAF5E6]/40">
|
||||
<CardTitle className="text-xs font-black uppercase tracking-[0.3em] text-[#8C7E6C] flex items-center gap-3">
|
||||
<Headphones className="w-4 h-4" />
|
||||
选择目标频道
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 max-h-[calc(100vh-320px)] overflow-y-auto custom-scrollbar bg-[#FAF5E6]/20">
|
||||
<div className="space-y-3">
|
||||
{treeData.map((category: any) => {
|
||||
const catId = String(category.ID || category.id || "");
|
||||
const isExpanded = expandedCategories.includes(catId);
|
||||
return (
|
||||
<div key={catId} className="space-y-2">
|
||||
<div className="p-4 space-y-2">
|
||||
<button
|
||||
onClick={() => toggleCategory(catId)}
|
||||
className={`w-full flex items-center justify-between px-5 py-4 rounded-3xl transition-all group ${isExpanded ? 'bg-[#D28F4F]/10 text-[#D28F4F] shadow-sm' : 'hover:bg-white/50 text-[#8C7E6C]'
|
||||
}`}
|
||||
onClick={() => setSelectedChannelId("")}
|
||||
className={`w-full text-left px-6 py-4 rounded-3xl text-sm font-black transition-all flex items-center justify-between group ${selectedChannelId === "" ? 'bg-[#D28F4F] text-white shadow-xl' : 'text-[#8C7E6C] hover:bg-white/60'}`}
|
||||
>
|
||||
全部单元
|
||||
<Disc3 className={`w-4 h-4 ${selectedChannelId === "" ? 'animate-spin-slow' : 'opacity-0 group-hover:opacity-100'}`} />
|
||||
</button>
|
||||
{channels.map((channel: any) => (
|
||||
<button
|
||||
key={channel.ID || channel.id}
|
||||
onClick={() => setSelectedChannelId(String(channel.ID || channel.id))}
|
||||
className={`w-full text-left px-6 py-4 rounded-3xl text-sm font-black transition-all flex items-center justify-between group ${selectedChannelId === String(channel.ID || channel.id) ? 'bg-[#4A3A2C] text-white shadow-xl' : 'text-[#8C7E6C] hover:bg-white/60'}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-2 h-2 rounded-full transition-all ${isExpanded ? 'bg-[#D28F4F] scale-125 shadow-[0_0_10px_var(--primary)]' : 'bg-[#D28F4F]/20'
|
||||
}`} />
|
||||
<span className="text-sm font-black tracking-tight">{category.name}</span>
|
||||
<span className="text-xl shrink-0">{channel.cover || '📻'}</span>
|
||||
<span className="truncate">{channel.name}</span>
|
||||
</div>
|
||||
{isExpanded ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4 opacity-40 group-hover:opacity-100" />}
|
||||
<ArrowRight className={`w-4 h-4 ${selectedChannelId === String(channel.ID || channel.id) ? '' : 'opacity-0 group-hover:opacity-100'}`} />
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{isExpanded && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="space-y-2 pl-6 overflow-hidden mt-1"
|
||||
>
|
||||
{(category.channels || category.channelList || []).map((channel: any) => {
|
||||
const chanId = String(channel.ID || channel.id || "");
|
||||
const isSelected = chanId === String(selectedChannelId);
|
||||
return (
|
||||
<button
|
||||
key={chanId}
|
||||
onClick={() => { setSelectedChannelId(chanId); setPage(1); }}
|
||||
className={`w-full flex items-center px-4 py-3 rounded-2xl text-[11px] font-black transition-all ${isSelected
|
||||
? 'bg-white shadow-md text-[#D28F4F] ring-4 ring-[#D28F4F]/5'
|
||||
: 'text-[#8C7E6C] hover:text-[#4A3A2C] hover:translate-x-1'
|
||||
}`}
|
||||
>
|
||||
<div className={`w-1.5 h-1.5 rounded-full mr-3 ${isSelected ? 'bg-[#D28F4F]' : 'bg-transparent'}`} />
|
||||
{channel.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-9 lg:col-span-10 space-y-8">
|
||||
<Card className="glass-card warm-noise border-none shadow-glass rounded-[2.5rem] overflow-hidden min-h-[600px] relative z-10">
|
||||
<CardHeader className="p-10 border-b border-[#4A3A2C]/5 flex flex-col sm:flex-row sm:items-center justify-between gap-6 bg-[#FAF5E6]/40">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-1.5 h-8 bg-[#D28F4F] rounded-full shadow-[0_0_12px_#D28F4F]" />
|
||||
<CardTitle className="text-2xl font-black tracking-tight text-[#4A3A2C]">
|
||||
{channels.find(c => String(c.ID || c.id) === selectedChannelId)?.name || '节目大厅'}
|
||||
</CardTitle>
|
||||
{/* Programs Table */}
|
||||
<Card className="lg:col-span-9 glass-card warm-noise border-none shadow-glass rounded-[3rem] overflow-hidden min-h-[600px] relative z-10 bg-white/40">
|
||||
<CardHeader className="p-10 border-b border-[#4A3A2C]/5 flex flex-col md:flex-row md:items-center justify-between gap-8 bg-[#FAF5E6]/60 backdrop-blur-md">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="p-4 rounded-[1.5rem] bg-white shadow-xl rotate-[-3deg]">
|
||||
<Music className="w-6 h-6 text-[#A64452]" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-2xl font-black text-[#4A3A2C] tracking-tight">单元列表清单</CardTitle>
|
||||
<p className="text-[10px] font-black uppercase text-[#8C7E6C]/60 tracking-[0.2em] mt-1">Total {total} Episodes recorded</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative group w-full max-w-sm">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[#8C7E6C] group-focus-within:text-[#D28F4F] transition-colors" />
|
||||
<Input
|
||||
placeholder="搜索节目标题关键词..."
|
||||
placeholder="按标题检索内容..."
|
||||
value={searchTitle}
|
||||
onChange={(e) => setSearchTitle(e.target.value)}
|
||||
className="pl-12 h-12 rounded-2xl border-none bg-[#FAF5E6]/80 focus:bg-white shadow-inner transition-all font-bold text-[#4A3A2C]"
|
||||
className="pl-12 h-14 rounded-3xl border-none bg-white shadow-inner transition-all font-bold text-[#4A3A2C] placeholder:opacity-30"
|
||||
/>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader className="bg-[#FAF5E6]/50">
|
||||
<div className="overflow-x-auto overflow-y-hidden">
|
||||
<Table className="min-w-[900px]">
|
||||
<TableHeader className="bg-[#FAF5E6]/40">
|
||||
<TableRow className="hover:bg-transparent border-[#4A3A2C]/5">
|
||||
<TableHead className="w-[100px] pl-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">播控</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">节目详情</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">时长</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">数据统计</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">状态标签</TableHead>
|
||||
<TableHead className="text-right pr-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">管理指令</TableHead>
|
||||
<TableHead className="w-[80px] pl-10 py-6 text-[10px] font-black uppercase tracking-[0.3em] text-[#8C7E6C]">视觉</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.3em] text-[#8C7E6C]">声音单元详情</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.3em] text-[#8C7E6C]">播报规格</TableHead>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.3em] text-[#8C7E6C] text-center">当前状态控制</TableHead>
|
||||
<TableHead className="text-right pr-10 py-6 text-[10px] font-black uppercase tracking-[0.3em] text-[#8C7E6C]">调度录入</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow><TableCell colSpan={6} className="h-96 text-center text-[#8C7E6C] font-black uppercase"><Disc3 className="w-12 h-12 mx-auto animate-spin-slow mb-4 text-[#D28F4F]/50" />同步中...</TableCell></TableRow>
|
||||
<TableRow><TableCell colSpan={5} className="h-96 text-center text-[#8C7E6C] font-black uppercase tracking-[0.5em]"><Disc3 className="w-16 h-16 mx-auto animate-spin-slow mb-6 text-[#A64452]/40" />Synchronizing Session...</TableCell></TableRow>
|
||||
) : data.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={6} className="h-96 text-center text-[#8C7E6C] text-sm font-black tracking-widest uppercase">暂无已排期节目</TableCell></TableRow>
|
||||
<TableRow><TableCell colSpan={5} className="h-96 text-center text-[#8C7E6C] text-xs font-black tracking-[0.5em] uppercase">No Audio Units Found</TableCell></TableRow>
|
||||
) : (
|
||||
data.map((item: any) => {
|
||||
const id = String(item.ID || item.id || "");
|
||||
const isPlaying = playingId === id;
|
||||
return (
|
||||
<TableRow key={id} className="group border-[#4A3A2C]/5 hover:bg-[#FAF5E6]/80 transition-all duration-300 transform hover:scale-[1.002]">
|
||||
<TableCell className="pl-10 py-6">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => togglePlay(item)}
|
||||
className={`w-14 h-14 rounded-2xl transition-all shadow-md group-hover:scale-110 ${isPlaying
|
||||
? 'bg-[#D28F4F] text-white scale-110 shadow-[#D28F4F]/30 ring-4 ring-[#D28F4F]/20'
|
||||
: 'bg-white text-[#8C7E6C] hover:text-[#D28F4F] hover:bg-[#D28F4F]/5'
|
||||
}`}
|
||||
data.map((item: any) => (
|
||||
<TableRow
|
||||
key={item.ID || item.id}
|
||||
className="group border-[#4A3A2C]/5 hover:bg-white/80 transition-all duration-500"
|
||||
>
|
||||
{isPlaying ? <Pause className="fill-current" /> : <Play className="fill-current ml-1" />}
|
||||
</Button>
|
||||
<TableCell className="pl-10 py-8">
|
||||
<div className="relative group/cover">
|
||||
<div className="w-16 h-16 md:w-20 md:h-20 rounded-3xl bg-white shadow-2xl flex items-center justify-center text-3xl md:text-5xl group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 border border-[#FAF5E6] z-10 relative">
|
||||
{item.cover || '🎵'}
|
||||
</div>
|
||||
<div className="absolute -inset-2 bg-gradient-to-br from-[#D28F4F]/20 to-[#A64452]/20 blur-2xl opacity-0 group-hover/cover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-6">
|
||||
<div className="max-w-[280px]">
|
||||
<p className="font-black text-[#4A3A2C] group-hover:text-[#D28F4F] transition-colors text-base tracking-tight mb-1">{item.title}</p>
|
||||
<p className="text-[11px] font-bold text-[#8C7E6C]/60 line-clamp-1 italic italic">
|
||||
{item.description || "— 暂无节目简介 —"}
|
||||
<TableCell className="py-8">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={() => togglePlay(item)}
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center transition-all ${playingId === (item.ID || item.id) ? 'bg-[#A64452] text-white animate-pulse' : 'bg-[#4A3A2C] text-white hover:bg-[#D28F4F] shadow-lg hover:scale-110'}`}
|
||||
>
|
||||
{playingId === (item.ID || item.id) ? <Pause className="w-4 h-4 fill-current" /> : <Play className="w-4 h-4 fill-current ml-0.5" />}
|
||||
</button>
|
||||
<div>
|
||||
<h4 className="text-lg font-black text-[#4A3A2C] group-hover:text-[#D28F4F] transition-colors line-clamp-1">{item.title}</h4>
|
||||
<p className="text-[10px] font-black uppercase text-[#8C7E6C]/50 tracking-widest flex items-center gap-2 mt-1">
|
||||
<Tag className="w-3 h-3 text-[#A64452]/40" />
|
||||
{channels.find(c => String(c.ID || c.id) === String(item.channelId))?.name || '公域单元'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs font-medium text-[#8C7E6C] line-clamp-2 max-w-[300px] italic leading-relaxed pl-14 opacity-80 group-hover:opacity-100 transition-opacity">
|
||||
{item.description || "— 此单元尚未注入灵魂描述 —"}
|
||||
</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-3.5 h-3.5 text-[#D28F4F]/40" />
|
||||
<span className="text-xs font-black text-[#4A3A2C]">
|
||||
{Math.floor(item.duration / 60)}:{(item.duration % 60).toString().padStart(2, '0')}
|
||||
</span>
|
||||
<TableCell className="py-8">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3 text-[#8C7E6C]">
|
||||
<Clock className="w-3.5 h-3.5" />
|
||||
<span className="text-sm font-black tabular-nums">{formatDuration(item.duration)}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Headphones className="w-3.5 h-3.5 text-emerald-600/60" />
|
||||
<span className="text-[11px] font-black text-[#8C7E6C]">{item.playCount || 0} 次收听</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<ThumbsUp className="w-3.5 h-3.5 text-blue-600/60" />
|
||||
<span className="text-[10px] font-black text-[#8C7E6C]/60">{item.likeCount || 0} 喜欢</span>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-6">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{item.tags?.split(',').filter(Boolean).map((tag: string) => (
|
||||
<span key={tag} className="px-3 py-1 rounded-full bg-[#FAF5E6] text-[10px] font-black text-[#8C7E6C]/80 uppercase tracking-tighter border border-[#D28F4F]/10 shadow-sm">
|
||||
{(item.tags || "").split(/[，, ]/).filter((t: string) => t).map((tag: string, i: number) => (
|
||||
<span key={i} className="px-3 py-1 bg-white border border-[#4A3A2C]/5 rounded-full text-[9px] font-black text-[#8C7E6C] hover:border-[#D28F4F]/30 hover:text-[#D28F4F] transition-all cursor-default">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
<div className={`flex items-center px-4 py-1 rounded-full text-[10px] font-black uppercase border shadow-sm ${item.status === 1
|
||||
? 'bg-emerald-50 text-emerald-700 border-emerald-200'
|
||||
: 'bg-rose-50 text-rose-600 border-rose-200'
|
||||
}`}>
|
||||
<div className={`w-1.5 h-1.5 rounded-full mr-2 ${item.status === 1 ? 'bg-emerald-500 animate-pulse' : 'bg-rose-500'}`} />
|
||||
{item.status === 1 ? '启用' : '隐藏'}
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right pr-10 py-6">
|
||||
<div className="flex items-center justify-end gap-3 opacity-0 group-hover:opacity-100 transition-all translate-x-4 group-hover:translate-x-0">
|
||||
<TableCell className="py-8 text-center">
|
||||
<div className={`mx-auto w-fit flex items-center px-4 py-2 rounded-full text-[10px] font-black uppercase border shadow-inner tracking-widest ${item.status === 1
|
||||
? 'bg-emerald-50 text-emerald-700 border-emerald-100/50'
|
||||
: 'bg-rose-50 text-rose-600 border-rose-100/50'
|
||||
}`}>
|
||||
<div className={`w-2 h-2 rounded-full mr-2.5 ${item.status === 1 ? 'bg-emerald-500 animate-pulse shadow-[0_0_8px_#10b981]' : 'bg-rose-500'}`} />
|
||||
{item.status === 1 ? '正在发布' : '仓库封存'}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right pr-10 py-8">
|
||||
<div className="flex items-center justify-end gap-4 opacity-0 group-hover:opacity-100 transition-all translate-x-4 group-hover:translate-x-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleOpenEdit(item)}
|
||||
className="w-12 h-12 rounded-[1.2rem] hover:bg-white hover:text-[#D28F4F] transition-all border border-[#4A3A2C]/5 shadow-sm hover:shadow-md"
|
||||
className="w-12 h-12 rounded-2xl hover:bg-white hover:text-[#D28F4F] shadow-sm hover:shadow-xl transition-all border border-[#4A3A2C]/5"
|
||||
>
|
||||
<Edit className="w-5 h-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteClick(id)}
|
||||
className="w-12 h-12 rounded-[1.2rem] hover:bg-rose-50 hover:text-rose-600 transition-all border border-[#4A3A2C]/5 shadow-sm"
|
||||
onClick={() => handleDeleteClick(item.ID || item.id)}
|
||||
className="w-12 h-12 rounded-2xl hover:bg-rose-50 hover:text-rose-600 shadow-sm transition-all border border-[#4A3A2C]/5"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
{total > pageSize && (
|
||||
<div className="p-10 border-t border-[#4A3A2C]/5 flex items-center justify-center bg-[#FAF5E6]/40 backdrop-blur-md">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="p-10 border-t border-[#4A3A2C]/5 flex flex-col sm:flex-row items-center justify-between gap-8 bg-[#FAF5E6]/40 backdrop-blur-xl">
|
||||
<div className="flex items-center gap-4">
|
||||
<Headphones className="w-5 h-5 text-[#D28F4F] opacity-40" />
|
||||
<span className="text-[10px] font-black text-[#8C7E6C] uppercase tracking-[0.4em]">Audio Master Control</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setPage(p => Math.max(1, p - 1))}
|
||||
disabled={page === 1}
|
||||
className="rounded-2xl px-8 h-12 font-black uppercase tracking-widest text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
|
||||
className="rounded-2xl h-12 px-8 font-black uppercase tracking-widest text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#A64452] border border-transparent hover:border-[#A64452]/10"
|
||||
>
|
||||
上一页
|
||||
</Button>
|
||||
<div className="px-8 py-2.5 bg-white/60 backdrop-blur-md rounded-full shadow-inner border border-[#D28F4F]/10 text-[11px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">
|
||||
第 <span className="text-[#D28F4F]">{page}</span> / {Math.ceil(total / pageSize)} 页
|
||||
<div className="px-6 py-2 bg-white/50 rounded-full font-black text-[11px] text-[#4A3A2C] shadow-inner border border-white">
|
||||
{page}
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setPage(p => p + 1)}
|
||||
disabled={data.length < pageSize}
|
||||
className="rounded-2xl px-8 h-12 font-black uppercase tracking-widest text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#D28F4F]"
|
||||
className="rounded-2xl h-12 px-8 font-black uppercase tracking-widest text-[11px] hover:bg-white text-[#8C7E6C] hover:text-[#A64452] border border-transparent hover:border-[#A64452]/10"
|
||||
>
|
||||
下一页
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<audio ref={audioRef} />
|
||||
|
||||
{/* Program Edit/Create Modal */}
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="sm:max-w-[800px] glass-card warm-noise border-none rounded-[3.5rem] p-0 overflow-hidden shadow-2xl">
|
||||
<div className="bg-gradient-to-r from-[#D28F4F] to-[#A64452] p-12 text-white relative">
|
||||
<DialogTitle className="text-3xl font-black tracking-tight">{isEdit ? '编辑节目方案' : '策划全新广播节目'}</DialogTitle>
|
||||
<p className="text-white/60 text-xs font-black uppercase tracking-[0.3em] mt-3">Program Content Design</p>
|
||||
<Disc3 className="absolute right-12 top-1/2 -translate-y-1/2 w-24 h-24 text-white/10 animate-spin-slow" />
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[900px] glass-card warm-noise border-none rounded-[3rem] p-0 overflow-hidden shadow-2xl flex flex-col md:flex-row">
|
||||
{/* Artistic Side Sidebar */}
|
||||
<div className="md:w-1/3 bg-gradient-to-b from-[#4A3A2C] to-[#2D241C] p-10 md:p-14 text-white space-y-12">
|
||||
<div className="space-y-4">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.5em] text-[#D28F4F]">Visual Anchor</span>
|
||||
<motion.div
|
||||
animate={{ y: [0, -10, 0] }}
|
||||
transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
|
||||
className="w-full aspect-square rounded-[3rem] bg-white/5 backdrop-blur-3xl border border-white/10 shadow-3xl flex items-center justify-center text-8xl md:text-9xl group relative overflow-hidden"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#D28F4F]/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
{formData.cover}
|
||||
</motion.div>
|
||||
</div>
|
||||
<div className="p-12 space-y-10 max-h-[75vh] overflow-y-auto custom-scrollbar bg-[#FAF5E6]/60 backdrop-blur-3xl">
|
||||
<div className="grid grid-cols-2 gap-10">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">节目标题</Label>
|
||||
<Input
|
||||
placeholder="输入辨识度高的标题..."
|
||||
value={formData.title}
|
||||
onChange={e => setFormData({ ...formData, title: e.target.value })}
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-3xl font-black tracking-tight leading-tight">单元视觉<br />体系定义</h3>
|
||||
<p className="text-white/40 text-[11px] font-medium leading-relaxed">
|
||||
为您的声音单元选择最契合的 Emoji，它将在听众的播放列表中作为核心视觉唤起情感。
|
||||
</p>
|
||||
</div>
|
||||
<FileUploader
|
||||
label="同步音频源"
|
||||
accept="audio/*"
|
||||
value={formData.audioId}
|
||||
onChange={(url) => setFormData({ ...formData, audioId: url })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">所属频道</Label>
|
||||
|
||||
{/* Main Form Fields */}
|
||||
<div className="flex-1 p-10 md:p-14 space-y-10 bg-[#FAF5E6]/95 backdrop-blur-3xl overflow-y-auto max-h-[85vh] custom-scrollbar">
|
||||
<div className="space-y-2">
|
||||
<DialogTitle className="text-4xl font-black text-[#4A3A2C] tracking-tighter">
|
||||
{isEdit ? '深度打磨单元' : '开启声音共鸣'}
|
||||
</DialogTitle>
|
||||
<p className="text-[#8C7E6C] text-xs font-black uppercase tracking-[0.3em]">Audio Engineering Workshop</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">1. 标题映射</Label>
|
||||
<Input
|
||||
placeholder="输入引发共鸣的标题..."
|
||||
value={formData.title}
|
||||
onChange={(e) => setFormData({ ...formData, title: e.target.value })}
|
||||
className="h-16 rounded-[1.5rem] md:rounded-[2rem] border-none bg-white shadow-xl px-10 font-bold text-[#4A3A2C] text-lg focus:ring-4 ring-[#D28F4F]/10 transition-all"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">2. 归属频道</Label>
|
||||
<select
|
||||
className="w-full h-16 rounded-[1.5rem] bg-white shadow-sm px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-lg appearance-none cursor-pointer"
|
||||
className="w-full h-16 rounded-[1.5rem] md:rounded-[2rem] bg-white shadow-xl px-10 font-bold text-[#4A3A2C] border-none outline-none appearance-none cursor-pointer focus:ring-4 ring-[#D28F4F]/10 transition-all"
|
||||
value={formData.channelId}
|
||||
onChange={e => setFormData({ ...formData, channelId: e.target.value })}
|
||||
>
|
||||
<option value="" disabled>选择所属广播频道</option>
|
||||
<option value="" disabled>选择声音所属的平行世界</option>
|
||||
{channels.map((c: any) => (
|
||||
<option key={String(c.ID || c.id)} value={String(c.ID || c.id)}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">音轨时长 (秒)</Label>
|
||||
<div className="space-y-4">
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">3. 时长(秒)与标签</Label>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Input
|
||||
type="number"
|
||||
placeholder="时长"
|
||||
value={formData.duration ?? ""}
|
||||
onChange={e => {
|
||||
const val = e.target.value;
|
||||
setFormData({ ...formData, duration: val === "" ? "" : parseInt(val) });
|
||||
}}
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-center text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all text-lg"
|
||||
onChange={e => setFormData({ ...formData, duration: parseInt(e.target.value) || 0 })}
|
||||
className="h-16 rounded-3xl border-none bg-white shadow-xl px-8 font-black text-center text-[#4A3A2C]"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">服务状态</Label>
|
||||
<select
|
||||
className="w-full h-16 rounded-[1.5rem] bg-white shadow-sm px-8 font-bold text-[#4A3A2C] border-none focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none text-lg appearance-none cursor-pointer"
|
||||
value={formData.status}
|
||||
onChange={e => setFormData({ ...formData, status: parseInt(e.target.value) })}
|
||||
>
|
||||
<option value={1}>正式发布</option>
|
||||
<option value={0}>存入草稿</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-3 font-bold">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">音频资产部署</Label>
|
||||
<FileUploader
|
||||
label=""
|
||||
accept="audio/*"
|
||||
placeholder="上传音频文件 (mp3, wav, etc.)"
|
||||
value={formData.audioId}
|
||||
initialPreview={formData.audioUrl}
|
||||
onChange={(id) => setFormData({ ...formData, audioId: id })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">专属标签 (逗号隔开)</Label>
|
||||
<Input
|
||||
placeholder="例：纯音乐, 睡眠, 治愈..."
|
||||
placeholder="标签(空格分隔)"
|
||||
value={formData.tags}
|
||||
onChange={e => setFormData({ ...formData, tags: e.target.value })}
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
|
||||
className="h-16 rounded-3xl border-none bg-white shadow-xl px-6 font-bold text-[#4A3A2C]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">节目简短介绍</Label>
|
||||
<Input
|
||||
placeholder="一句话吸引听众..."
|
||||
value={formData.description}
|
||||
onChange={e => setFormData({ ...formData, description: e.target.value })}
|
||||
className="h-16 rounded-[1.5rem] border-none bg-white shadow-sm font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all pl-8 text-lg"
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F] flex items-center gap-2">
|
||||
<Smile className="w-4 h-4" />
|
||||
4. 视觉识别 Emoji
|
||||
</Label>
|
||||
<div className="grid grid-cols-6 lg:grid-cols-8 gap-2 p-6 rounded-[2.5rem] bg-white/60 shadow-inner border border-[#D28F4F]/10">
|
||||
{EMOJI_LIST.map(emoji => (
|
||||
<button
|
||||
key={emoji}
|
||||
type="button"
|
||||
onClick={() => setFormData({ ...formData, cover: emoji })}
|
||||
className={`w-10 h-10 md:w-11 md:h-11 flex items-center justify-center text-xl rounded-2xl transition-all ${formData.cover === emoji ? 'bg-[#D28F4F] text-white shadow-lg scale-110 rotate-12' : 'hover:bg-white hover:shadow-md'}`}
|
||||
>
|
||||
{emoji}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Label className="text-[11px] uppercase font-black tracking-widest text-[#8C7E6C] ml-1">深度播送内容</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">5. 艺术描述与核心内容</Label>
|
||||
<div className="space-y-4">
|
||||
<textarea
|
||||
className="w-full min-h-[160px] rounded-[2rem] border-none bg-white shadow-sm p-8 font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none resize-none placeholder:text-[#8C7E6C]/30"
|
||||
placeholder="输入该节目的具体文字剧本或深度介绍..."
|
||||
className="w-full min-h-[100px] rounded-3xl border-none bg-white shadow-xl p-8 font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none resize-none placeholder:text-[#8C7E6C]/30 text-base italic"
|
||||
placeholder="描述此单元的氛围、背景与核心价值..."
|
||||
value={formData.description}
|
||||
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||
/>
|
||||
<textarea
|
||||
className="w-full min-h-[160px] rounded-3xl border-none bg-white shadow-xl p-8 font-bold text-[#4A3A2C] focus:ring-4 ring-[#D28F4F]/10 transition-all outline-none resize-none placeholder:text-[#8C7E6C]/30 text-lg"
|
||||
placeholder="在这里输入播报的核心文案或详细内容板块..."
|
||||
value={formData.content}
|
||||
onChange={e => setFormData({ ...formData, content: e.target.value })}
|
||||
onChange={(e) => setFormData({ ...formData, content: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-12 bg-white/40 backdrop-blur-xl flex justify-between items-center border-t border-[#4A3A2C]/5 font-black">
|
||||
|
||||
<div className="pt-10 flex flex-col sm:flex-row gap-6 items-center justify-between">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => setOpen(false)}
|
||||
className="rounded-[1.5rem] h-14 px-10 uppercase tracking-[0.2em] text-xs hover:bg-white text-[#8C7E6C]"
|
||||
className="w-full sm:w-auto rounded-3xl h-16 px-12 font-black uppercase tracking-[0.4em] text-xs hover:bg-white text-[#8C7E6C]"
|
||||
>
|
||||
取消返回
|
||||
撤回单元
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="rounded-[1.5rem] h-14 px-12 shadow-2xl shadow-[#D28F4F]/30 hover:scale-105 transition-all bg-gradient-to-r from-[#D28F4F] to-[#A64452] border-none"
|
||||
className="w-full sm:w-auto rounded-3xl h-16 px-16 shadow-3xl shadow-[#A64452]/20 hover:scale-[1.02] transition-all bg-gradient-to-r from-[#4A3A2C] to-[#2D241C] border-none text-[#D28F4F] font-black text-lg"
|
||||
>
|
||||
{isEdit ? '保存节目更新' : '立即发布节目'}
|
||||
{isEdit ? '注入数据进化' : '正式发布声音单元'}
|
||||
<ArrowRight className="ml-4 w-5 h-5 shadow-2xl" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ import Dashboard from '../pages/Dashboard';
|
||||
import Category from '../pages/Radio/Category';
|
||||
import Channel from '../pages/Radio/Channel';
|
||||
import Program from '../pages/Radio/Program';
|
||||
import VipConfig from '../pages/Radio/VipConfig';
|
||||
import Oss from '../pages/System/Oss';
|
||||
|
||||
const router = createBrowserRouter([
|
||||
@@ -32,6 +33,10 @@ const router = createBrowserRouter([
|
||||
path: 'radio/program',
|
||||
element: <Program />,
|
||||
},
|
||||
{
|
||||
path: 'radio/vip',
|
||||
element: <VipConfig />,
|
||||
},
|
||||
{
|
||||
path: 'system/oss',
|
||||
element: <Oss />,
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8889',
|
||||
target: 'http://localhost:8888',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user