feat: 去掉any
This commit is contained in:
Blizzard
+2
-2
@@ -1,10 +1,10 @@
|
||||
import request from '../utils/request';
|
||||
|
||||
export const loginApi = (data: any) => {
|
||||
export const loginApi = (data: { account: string; password: string; captcha: string; captchaId: string }): Promise<{ token: string; user: { id: string; nickname: string; avatar: string; roleList?: string[] } }> => {
|
||||
return request.post('/auth/login', data);
|
||||
};
|
||||
|
||||
export const getCaptchaApi = () => {
|
||||
export const getCaptchaApi = (): Promise<{ captcha: string; captchaId: string }> => {
|
||||
return request.get('/auth/captcha');
|
||||
};
|
||||
|
||||
|
||||
+1
-1
@@ -8,6 +8,6 @@ export const uploadFileApi = (formData: FormData) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const getFileListApi = (data: any) => request.post('/oss/getFileList', data);
|
||||
export const getFileListApi = (data: { current?: number; pageSize?: number; keyword?: string }) => request.post('/oss/getFileList', data);
|
||||
export const deleteFileApi = (data: { ids: (string | number)[] }) => request.post('/oss/delete', data);
|
||||
export const getFileDetailApi = (id: string | number) => request.get('/oss/getFile', { params: { id } });
|
||||
|
||||
+65
-21
@@ -1,30 +1,74 @@
|
||||
import request from '../utils/request';
|
||||
import type {
|
||||
PageResult,
|
||||
RadioCategory,
|
||||
RadioChannel,
|
||||
RadioProgram,
|
||||
RadioUserItem,
|
||||
RadioUserListParams,
|
||||
ProgramListParams,
|
||||
} from '../types/radio';
|
||||
|
||||
// --- Category API ---
|
||||
export const getCategoryPageApi = (data: any) => request.post('/radio/category/page', data);
|
||||
export const getCategoryListApi = (data: any = {}) => request.post('/radio/category/list', data);
|
||||
export const getCategoryDetailApi = (id: string | number) => request.get('/radio/category/detail', { params: { id } });
|
||||
export const saveCategoryApi = (data: any) => request.post('/radio/category/save', data);
|
||||
export const updateCategoryApi = (data: any) => request.post('/radio/category/update', data);
|
||||
export const deleteCategoryApi = (data: { id: string | number }) => request.post('/radio/category/delete', data);
|
||||
export const getCategoryPageApi = (data: { current?: number; pageSize?: number; name?: string; status?: number }): Promise<PageResult<RadioCategory>> =>
|
||||
request.post('/radio/category/page', data);
|
||||
export const saveCategoryApi = (data: Partial<RadioCategory> | Record<string, unknown>): Promise<void> =>
|
||||
request.post('/radio/category/save', data);
|
||||
export const updateCategoryApi = (data: Partial<RadioCategory> | Record<string, unknown>): Promise<void> =>
|
||||
request.post('/radio/category/update', data);
|
||||
export const deleteCategoryApi = (data: { id: string | number }): Promise<void> =>
|
||||
request.post('/radio/category/delete', data);
|
||||
export const getAllCategoryListApi = (): Promise<{ list: RadioCategory[] } | RadioCategory[]> =>
|
||||
request.get('/radio/category/list');
|
||||
|
||||
// --- Channel API ---
|
||||
export const getChannelListApi = (data: any = {}) => request.post('/radio/channel/list', data);
|
||||
export const getChannelDetailApi = (id: string | number) => request.get('/radio/channel/detail', { params: { id } });
|
||||
export const saveChannelApi = (data: any) => request.post('/radio/channel/save', data);
|
||||
export const updateChannelApi = (data: any) => request.post('/radio/channel/update', data);
|
||||
export const deleteChannelApi = (data: { id: string | number }) => request.post('/radio/channel/delete', data);
|
||||
export const getChannelListApi = (data: { pageSize?: number; categoryId?: string; current?: number; name?: string }): Promise<PageResult<RadioChannel>> =>
|
||||
request.post('/radio/channel/list', data);
|
||||
export const saveChannelApi = (data: Partial<RadioChannel>): Promise<void> =>
|
||||
request.post('/radio/channel/save', data);
|
||||
export const updateChannelApi = (data: Partial<RadioChannel>): Promise<void> =>
|
||||
request.post('/radio/channel/update', data);
|
||||
export const deleteChannelApi = (data: { id: string | number }): Promise<void> =>
|
||||
request.post('/radio/channel/delete', data);
|
||||
|
||||
// --- Program API ---
|
||||
export const getProgramListApi = (data: any = {}) => request.post('/radio/program/list', data);
|
||||
export const getProgramDetailApi = (id: string | number) => request.get('/radio/program/detail', { params: { id } });
|
||||
export const saveProgramApi = (data: any) => request.post('/radio/program/save', data);
|
||||
export const updateProgramApi = (data: any) => request.post('/radio/program/update', data);
|
||||
export const deleteProgramApi = (data: { ids: (string | number)[] }) => request.post('/radio/program/delete', data);
|
||||
|
||||
export const getAllCategoryListApi = () => request.get('/radio/category/list');
|
||||
export const getCategoryTreeApi = () => request.get('/radio/category/tree');
|
||||
export const getProgramListApi = (data: ProgramListParams): Promise<PageResult<RadioProgram>> =>
|
||||
request.post('/radio/program/list', data);
|
||||
export const saveProgramApi = (data: Partial<RadioProgram>): Promise<void> =>
|
||||
request.post('/radio/program/save', data);
|
||||
export const updateProgramApi = (data: Partial<RadioProgram>): Promise<void> =>
|
||||
request.post('/radio/program/update', data);
|
||||
export const deleteProgramApi = (data: { ids: (string | number)[] }): Promise<void> =>
|
||||
request.post('/radio/program/delete', data);
|
||||
export const generateTtsApi = (id: string | number): Promise<void> =>
|
||||
request.get('/radio/program/generate-tts', { params: { id } });
|
||||
|
||||
// --- VIP API ---
|
||||
export const getVipConfigDetailApi = () => request.post('/vip/config/detail');
|
||||
export const updateVipConfigApi = (data: any) => request.post('/vip/config/update', data);
|
||||
export const getVipConfigDetailApi = (): Promise<Record<string, unknown>> => request.post('/vip/config/detail');
|
||||
export const updateVipConfigApi = (data: Record<string, unknown>): Promise<void> => request.post('/vip/config/update', data);
|
||||
|
||||
// --- Analytics API ---
|
||||
export const getListeningTrendApi = (params: Record<string, unknown>): Promise<any> =>
|
||||
request.get('/radio/analytics/listening-trend', { params });
|
||||
export const getSubscriptionTrendApi = (params: Record<string, unknown>): Promise<any> =>
|
||||
request.get('/radio/analytics/subscription-trend', { params });
|
||||
export const getRenewalTrendApi = (params: Record<string, unknown>): Promise<any> =>
|
||||
request.get('/radio/analytics/renewal-trend', { params });
|
||||
export const getSubscriberStatsApi = (params: Record<string, unknown>): Promise<any> =>
|
||||
request.get('/radio/analytics/subscriber-stats', { params });
|
||||
export const getContentQualityApi = (params: Record<string, unknown>): Promise<any> =>
|
||||
request.get('/radio/analytics/content-quality', { params });
|
||||
export const getUserStickinessApi = (params: Record<string, unknown>): Promise<any> =>
|
||||
request.get('/radio/analytics/user-stickiness', { params });
|
||||
export const getBusinessConversionApi = (params: Record<string, unknown>): Promise<any> =>
|
||||
request.get('/radio/analytics/business-conversion', { params });
|
||||
export const getPreferenceApi = (): Promise<any> =>
|
||||
request.get('/radio/analytics/preference');
|
||||
export const getChannelListAnalyticsApi = (params: Record<string, unknown>): Promise<any> =>
|
||||
request.get('/radio/channel/list', { params });
|
||||
export const getVipStatsApi = (params: Record<string, unknown> = {}): Promise<any> =>
|
||||
request.get('/radio/analytics/vip-stats', { params });
|
||||
|
||||
// --- User API ---
|
||||
export const getRadioUserListApi = (params: RadioUserListParams): Promise<PageResult<RadioUserItem>> =>
|
||||
request.get('/radio/user/list', { params });
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
||||
interface AnalogMeterProps {
|
||||
label: string;
|
||||
value: string | number;
|
||||
subLabel?: string;
|
||||
icon: LucideIcon;
|
||||
percentage: number; // 0 to 100
|
||||
color?: 'amber' | 'green' | 'red';
|
||||
}
|
||||
|
||||
export const AnalogMeter: React.FC<AnalogMeterProps> = ({
|
||||
label,
|
||||
value,
|
||||
subLabel,
|
||||
icon: Icon,
|
||||
percentage,
|
||||
color = 'amber'
|
||||
}) => {
|
||||
const glowClass = color === 'amber' ? 'glow-amber' : color === 'green' ? 'glow-green' : 'glow-red';
|
||||
const barColor = color === 'amber' ? 'bg-studio-glow-amber' : color === 'green' ? 'bg-studio-glow-green' : 'bg-studio-glow-red';
|
||||
const shadowColor = color === 'amber' ? 'shadow-[0_0_10px_var(--studio-glow-amber)]' : color === 'green' ? 'shadow-[0_0_10px_var(--studio-glow-green)]' : 'shadow-[0_0_10px_var(--studio-glow-red)]';
|
||||
|
||||
return (
|
||||
<div className="radio-rack p-6 rounded-xl flex flex-col gap-6 group hover:shadow-2xl transition-all duration-500 overflow-hidden">
|
||||
{/* Label and Icon */}
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em] opacity-40">{label}</span>
|
||||
<h3 className={`text-2xl font-black font-mono tracking-tight mt-1 ${glowClass}`}>
|
||||
{value}
|
||||
</h3>
|
||||
{subLabel && <span className="text-[9px] font-bold text-muted-foreground/60 mt-1 uppercase tracking-widest">{subLabel}</span>}
|
||||
</div>
|
||||
<div className="p-3 bg-studio-inset border border-studio-edge rounded-lg group-hover:bg-studio-edge transition-colors duration-500">
|
||||
<Icon className={`w-5 h-5 ${glowClass}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analog/LED Meter */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center text-[8px] font-black text-muted-foreground uppercase tracking-widest opacity-30">
|
||||
<span>Min</span>
|
||||
<span>Peak</span>
|
||||
</div>
|
||||
|
||||
<div className="studio-inset h-10 p-1 flex items-center gap-0.5 overflow-hidden">
|
||||
{/* LED Segments */}
|
||||
{Array.from({ length: 24 }).map((_, i) => {
|
||||
const isActive = (i / 23) * 100 <= percentage;
|
||||
const isCritical = i > 18;
|
||||
const segmentColor = isCritical ? 'bg-studio-glow-red' : isActive ? barColor : 'bg-studio-edge';
|
||||
const segmentShadow = (isActive && !isCritical) ? shadowColor : (isActive && isCritical) ? 'shadow-[0_0_10px_var(--studio-glow-red)]' : '';
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: isActive ? 1 : 0.2 }}
|
||||
transition={{ delay: i * 0.02 }}
|
||||
className={`flex-1 h-full rounded-sm ${segmentColor} ${segmentShadow} transition-all duration-300`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metric Detail Overlay (Subtle Gradient) */}
|
||||
<div className="absolute inset-x-0 bottom-0 h-1 bg-gradient-to-r from-transparent via-studio-glow-amber/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,108 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts';
|
||||
|
||||
interface OscilloscopeChartProps {
|
||||
data: any[];
|
||||
dataKey: string;
|
||||
xKey: string;
|
||||
color?: string;
|
||||
title: string;
|
||||
unit?: string;
|
||||
}
|
||||
|
||||
export const OscilloscopeChart: React.FC<OscilloscopeChartProps> = ({
|
||||
data,
|
||||
dataKey,
|
||||
xKey,
|
||||
color = '#FFB347',
|
||||
title,
|
||||
unit = ''
|
||||
}) => {
|
||||
return (
|
||||
<div className="radio-rack p-8 rounded-xl flex flex-col gap-6 overflow-hidden min-h-[400px]">
|
||||
<div className="flex justify-between items-center border-b border-studio-edge pb-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] font-black text-muted-foreground uppercase tracking-widest opacity-40">Waveform Analyzer</span>
|
||||
<h3 className="text-xl font-black font-mono text-white mt-1 uppercase tracking-tight">{title}</h3>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-[8px] font-black text-muted-foreground uppercase opacity-30">Scan Frequency</span>
|
||||
<span className="text-xs font-mono font-bold glow-green">60Hz</span>
|
||||
</div>
|
||||
<div className="w-1 h-8 bg-studio-glow-amber/20 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="studio-inset flex-1 relative p-4 group">
|
||||
{/* Oscilloscope Grid Overlay (Visual Only) */}
|
||||
<div className="absolute inset-0 pointer-events-none opacity-20 z-10"
|
||||
style={{
|
||||
backgroundImage: 'linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px)',
|
||||
backgroundSize: '40px 40px'
|
||||
}} />
|
||||
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={data} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id="colorWave" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={color} stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor={color} stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="rgba(255,255,255,0.05)" />
|
||||
<XAxis
|
||||
dataKey={xKey}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: '#737373', fontSize: 10, fontFamily: 'monospace' }}
|
||||
dy={10}
|
||||
tickFormatter={(val) => val.toString().split('-').slice(1).join('/')}
|
||||
/>
|
||||
<YAxis hide domain={['auto', 'auto']} />
|
||||
<Tooltip
|
||||
cursor={{ stroke: color, strokeWidth: 1, strokeDasharray: '5 5' }}
|
||||
content={({ active, payload, label }) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="studio-inset p-4 border border-studio-edge shadow-2xl min-w-[140px]">
|
||||
<p className="text-[9px] font-mono font-black text-muted-foreground uppercase tracking-widest mb-3 border-b border-studio-edge pb-1 leading-none">{label}</p>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-[10px] font-black text-white uppercase tracking-tight">Signal</span>
|
||||
<span className="text-sm font-mono font-black" style={{ color, textShadow: `0 0 10px ${color}` }}>
|
||||
{payload[0].value} {unit}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="stepAfter" // More technical/stepped look
|
||||
dataKey={dataKey}
|
||||
stroke={color}
|
||||
strokeWidth={2}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorWave)"
|
||||
animationDuration={1000}
|
||||
activeDot={{ r: 4, fill: color, stroke: '#000', strokeWidth: 2 }}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
{/* Glow effect on the bottom */}
|
||||
<div className="absolute inset-x-0 bottom-0 h-px bg-studio-glow-green/30 blur-sm pointer-events-none" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,83 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Radio, Zap } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export const StudioHeader: React.FC = () => {
|
||||
const [time, setTime] = useState(new Date());
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => setTime(new Date()), 1000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
const formatTime = (date: Date) => {
|
||||
return date.toLocaleTimeString('en-US', {
|
||||
hour12: false,
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="radio-rack w-full py-6 px-8 rounded-xl flex flex-col md:flex-row items-center justify-between gap-6 overflow-hidden">
|
||||
{/* Brand & Status */}
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="relative">
|
||||
<div className="w-16 h-16 rounded-full bg-studio-inset border border-studio-edge flex items-center justify-center shadow-lg">
|
||||
<Radio className="w-8 h-8 glow-amber" />
|
||||
</div>
|
||||
<motion.div
|
||||
animate={{ opacity: [1, 0.5, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-studio-glow-red border-2 border-studio-panel shadow-[0_0_10px_var(--studio-glow-red)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<h1 className="text-3xl font-black tracking-tighter text-white font-mono uppercase">
|
||||
Morning <span className="glow-amber">Radio</span>
|
||||
</h1>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-[0.2em]">Broadcast Studio 01</span>
|
||||
<div className="h-1 w-1 rounded-full bg-studio-glow-green shadow-[0_0_5px_var(--studio-glow-green)]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Center Display: Time & On Air */}
|
||||
<div className="flex items-center gap-8 studio-inset py-3 px-10">
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-[9px] font-black text-muted-foreground uppercase tracking-widest opacity-50 mb-1">Local Time</span>
|
||||
<span className="text-3xl font-mono font-black glow-green tracking-widest">
|
||||
{formatTime(time)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="h-10 w-px bg-studio-edge" />
|
||||
|
||||
<div className="flex flex-col items-center">
|
||||
<span className="text-[9px] font-black text-muted-foreground uppercase tracking-widest opacity-50 mb-1">Status</span>
|
||||
<div className="px-4 py-1 rounded bg-studio-glow-red/10 border border-studio-glow-red/30">
|
||||
<span className="text-sm font-black text-studio-glow-red uppercase tracking-widest animate-pulse">On Air</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metrics Mini-Readout */}
|
||||
<div className="hidden xl:flex items-center gap-6">
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-[10px] font-black text-muted-foreground uppercase tracking-widest opacity-50">Signal Strength</span>
|
||||
<div className="flex gap-1 mt-1">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<div key={i} className={`w-1.5 h-4 rounded-full ${i <= 4 ? 'bg-studio-glow-green shadow-[0_0_5px_var(--studio-glow-green)]' : 'bg-studio-edge'}`} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg bg-studio-inset border border-studio-edge">
|
||||
<Zap className="w-5 h-5 text-amber-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,98 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts';
|
||||
|
||||
interface TrendLineChartProps {
|
||||
data: any[];
|
||||
dataKey: string;
|
||||
xKey: string;
|
||||
color?: string;
|
||||
title: string;
|
||||
unit?: string;
|
||||
}
|
||||
|
||||
export const TrendLineChart: React.FC<TrendLineChartProps> = ({
|
||||
data,
|
||||
dataKey,
|
||||
xKey,
|
||||
color = '#D28F4F',
|
||||
title,
|
||||
unit = ''
|
||||
}) => {
|
||||
return (
|
||||
<div className="relative p-6 md:p-8 rounded-2xl bg-card border border-border shadow-sm flex flex-col gap-6 overflow-hidden min-h-[400px] transition-all duration-300 hover:shadow-md">
|
||||
{/* Header section */}
|
||||
<div className="flex justify-between items-start z-10">
|
||||
<div className="flex flex-col">
|
||||
<h3 className="text-xl md:text-2xl font-bold text-card-foreground tracking-tight">{title}</h3>
|
||||
<span className="text-xs font-medium text-muted-foreground tracking-wider uppercase mt-1">数据趋势分析</span>
|
||||
</div>
|
||||
<div className="px-3 py-1.5 rounded-full bg-muted border border-border flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full animate-pulse" style={{ backgroundColor: color, boxShadow: `0 0 8px ${color}` }} />
|
||||
<span className="text-xs font-semibold text-muted-foreground">实时</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full relative z-10 mt-2 h-[320px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={data} margin={{ top: 20, right: 10, left: -20, bottom: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id={`colorGradient-${dataKey}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={color} stopOpacity={0.3} />
|
||||
<stop offset="95%" stopColor={color} stopOpacity={0.0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="4 4" vertical={false} stroke="var(--border)" opacity={0.5} />
|
||||
<XAxis
|
||||
dataKey={xKey}
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: 'var(--muted-foreground)', fontSize: 11, fontWeight: 500 }}
|
||||
dy={15}
|
||||
tickFormatter={(val) => val ? val.toString().split('-').slice(1).join('-') : ''}
|
||||
minTickGap={20}
|
||||
/>
|
||||
<YAxis hide domain={['auto', 'auto']} />
|
||||
<Tooltip
|
||||
cursor={{ stroke: color, strokeWidth: 1, strokeDasharray: '4 4' }}
|
||||
content={({ active, payload, label }) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<div className="px-4 py-3 rounded-xl bg-popover border border-border shadow-xl min-w-[150px]">
|
||||
<p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-2 border-b border-border pb-2">{label}</p>
|
||||
<div className="flex items-center justify-between gap-4 mt-1">
|
||||
<span className="text-xs font-semibold text-popover-foreground">数值</span>
|
||||
<span className="text-lg font-bold" style={{ color }}>
|
||||
{payload[0].value} {unit}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone" // Smooth curve
|
||||
dataKey={dataKey}
|
||||
stroke={color}
|
||||
strokeWidth={3}
|
||||
fillOpacity={1}
|
||||
fill={`url(#colorGradient-${dataKey})`}
|
||||
animationDuration={1500}
|
||||
animationEasing="ease-in-out"
|
||||
activeDot={{ r: 6, fill: 'var(--background)', stroke: color, strokeWidth: 3 }}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+60
-12
@@ -79,32 +79,80 @@
|
||||
--glass-bg: rgba(255, 253, 235, 0.4);
|
||||
--glass-border: rgba(255, 255, 255, 0.6);
|
||||
--glass-shadow: 0 20px 50px rgba(74, 58, 44, 0.1);
|
||||
|
||||
/* Studio Analog Tokens */
|
||||
--studio-panel: #2C2C2C;
|
||||
--studio-edge: #3D3D3D;
|
||||
--studio-inset: #1A1A1A;
|
||||
--studio-glow-amber: #FFB347;
|
||||
--studio-glow-green: #00FF41;
|
||||
--studio-glow-red: #FF3131;
|
||||
--studio-text-mono: 'JetBrains Mono', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: #1A1A1A;
|
||||
--foreground: #E8E1D9;
|
||||
--card: rgba(30, 30, 30, 0.8);
|
||||
--card-foreground: #E8E1D9;
|
||||
--popover: rgba(30, 30, 30, 0.9);
|
||||
--popover-foreground: #E8E1D9;
|
||||
--background: #121212;
|
||||
--foreground: #D4D4D4;
|
||||
--card: #1E1E1E;
|
||||
--card-foreground: #D4D4D4;
|
||||
--popover: #1E1E1E;
|
||||
--popover-foreground: #D4D4D4;
|
||||
--primary: #D28F4F;
|
||||
--primary-foreground: #FFFFFF;
|
||||
--secondary: #6A7F6A;
|
||||
--secondary-foreground: #FFFFFF;
|
||||
--muted: #2D2D2D;
|
||||
--muted-foreground: #8C7E6C;
|
||||
--muted: #262626;
|
||||
--muted-foreground: #737373;
|
||||
--accent: rgba(210, 143, 79, 0.2);
|
||||
--accent-foreground: #D28F4F;
|
||||
--destructive: #A64452;
|
||||
--border: rgba(255, 255, 255, 0.1);
|
||||
--input: rgba(255, 255, 255, 0.1);
|
||||
--destructive: #EF4444;
|
||||
--border: #262626;
|
||||
--input: #262626;
|
||||
--ring: #D28F4F;
|
||||
|
||||
--glass-bg: rgba(30, 30, 30, 0.6);
|
||||
--glass-bg: rgba(30, 30, 30, 0.8);
|
||||
--glass-border: rgba(255, 255, 255, 0.05);
|
||||
|
||||
/* Studio Analog Tokens Dark */
|
||||
--studio-panel: #1A1A1A;
|
||||
--studio-edge: #2A2A2A;
|
||||
--studio-inset: #0A0A0A;
|
||||
}
|
||||
|
||||
/* Radio Rack Style */
|
||||
.radio-rack {
|
||||
background: var(--studio-panel);
|
||||
border: 1px solid var(--studio-edge);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,0.05),
|
||||
0 10px 30px rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio-rack::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Inset Panel for Readouts */
|
||||
.studio-inset {
|
||||
background: var(--studio-inset);
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 2px 10px rgba(0,0,0,0.8);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
/* Vacuum Tube Glow */
|
||||
.glow-amber { text-shadow: 0 0 10px var(--studio-glow-amber), 0 0 20px var(--studio-glow-amber); color: var(--studio-glow-amber); }
|
||||
.glow-green { text-shadow: 0 0 10px var(--studio-glow-green), 0 0 20px var(--studio-glow-green); color: var(--studio-glow-green); }
|
||||
.glow-red { text-shadow: 0 0 10px var(--studio-glow-red), 0 0 20px var(--studio-glow-red); color: var(--studio-glow-red); }
|
||||
|
||||
.glass-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
|
||||
@@ -50,6 +50,7 @@ export default function AdminLayout() {
|
||||
{ name: '频道管理', path: '/radio/channel', icon: Mic2 },
|
||||
{ name: '节目管理', path: '/radio/program', icon: Disc3 },
|
||||
{ name: 'VIP配置', path: '/radio/vip', icon: Crown },
|
||||
{ name: '用户管理', path: '/radio/user', icon: UserIcon },
|
||||
{ name: '文件管理', path: '/system/oss', icon: FolderOpen },
|
||||
];
|
||||
|
||||
@@ -162,7 +163,7 @@ export default function AdminLayout() {
|
||||
{/* Page Content */}
|
||||
<main className="flex-1 overflow-y-auto p-6 md:p-8 scroll-smooth relative">
|
||||
<div className="absolute top-0 left-0 w-full h-[500px] bg-gradient-to-b from-[#D28F4F]/5 to-transparent pointer-events-none" />
|
||||
<div className="max-w-7xl mx-auto h-full relative">
|
||||
<div className="w-full h-full relative">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
+611
-330
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { loginApi, getCaptchaApi } from '../../api/auth';
|
||||
import { useAuthStore } from '@/store/authStore.ts';
|
||||
import { loginApi, getCaptchaApi } from '@/api/auth.ts';
|
||||
import { toast } from 'sonner';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { Input } from '../../components/ui/input';
|
||||
@@ -25,7 +25,7 @@ export default function Login() {
|
||||
|
||||
const fetchCaptcha = async () => {
|
||||
try {
|
||||
const res: any = await getCaptchaApi();
|
||||
const res = await getCaptchaApi();
|
||||
const b64 = res.captcha;
|
||||
if (b64 && !b64.startsWith('data:')) {
|
||||
setCaptchaImage(`data:image/png;base64,${b64}`);
|
||||
@@ -52,7 +52,7 @@ export default function Login() {
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const res: any = await loginApi({
|
||||
const res = await loginApi({
|
||||
account,
|
||||
password,
|
||||
captcha,
|
||||
@@ -62,7 +62,8 @@ export default function Login() {
|
||||
setToken(res.token);
|
||||
setUserInfo(res.user);
|
||||
navigate('/');
|
||||
} catch (error: any) {
|
||||
} catch (error: Error | unknown) {
|
||||
console.error(error);
|
||||
fetchCaptcha();
|
||||
setCaptcha('');
|
||||
} finally {
|
||||
|
||||
@@ -4,14 +4,15 @@ import {
|
||||
saveCategoryApi,
|
||||
updateCategoryApi,
|
||||
deleteCategoryApi
|
||||
} from '../../../api/radio';
|
||||
import { DeleteConfirm } from '../../../components/DeleteConfirm';
|
||||
import { Button } from '../../../components/ui/button';
|
||||
import { Input } from '../../../components/ui/input';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table';
|
||||
import { Dialog, DialogContent, DialogTitle } from '../../../components/ui/dialog';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
|
||||
import { Label } from '../../../components/ui/label';
|
||||
} from '@/api/radio.ts';
|
||||
import type {RadioCategory, CategoryFormData} from '@/types/radio.ts';
|
||||
import { DeleteConfirm } from '@/components/DeleteConfirm.tsx';
|
||||
import { Button } from '@/components/ui/button.tsx';
|
||||
import { Input } from '@/components/ui/input.tsx';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.tsx';
|
||||
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog.tsx';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.tsx';
|
||||
import { Label } from '@/components/ui/label.tsx';
|
||||
import {
|
||||
Plus,
|
||||
Edit,
|
||||
@@ -25,7 +26,7 @@ import { toast } from 'sonner';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export default function Category() {
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [data, setData] = useState<RadioCategory[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -36,7 +37,7 @@ export default function Category() {
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
const [formData, setFormData] = useState<any>({
|
||||
const [formData, setFormData] = useState<CategoryFormData>({
|
||||
id: '',
|
||||
name: '',
|
||||
description: '',
|
||||
@@ -45,12 +46,12 @@ export default function Category() {
|
||||
});
|
||||
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [deleteId, setDeleteId] = useState<any>(null);
|
||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res: any = await getCategoryPageApi({
|
||||
const res = await getCategoryPageApi({
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
name: debouncedSearch,
|
||||
@@ -83,10 +84,10 @@ export default function Category() {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleOpenEdit = (record: any) => {
|
||||
const handleOpenEdit = (record: RadioCategory) => {
|
||||
setIsEdit(true);
|
||||
setFormData({
|
||||
id: String(record.ID || record.id || ""),
|
||||
id: record.id,
|
||||
name: record.name,
|
||||
description: record.description,
|
||||
sort: record.sort,
|
||||
@@ -95,7 +96,7 @@ export default function Category() {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (id: any) => {
|
||||
const handleDeleteClick = (id: string) => {
|
||||
setDeleteId(id);
|
||||
setDeleteOpen(true);
|
||||
};
|
||||
@@ -197,9 +198,9 @@ export default function Category() {
|
||||
) : 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, index: number) => (
|
||||
data.map((item, index) => (
|
||||
<TableRow
|
||||
key={item.ID || item.id}
|
||||
key={item.id}
|
||||
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">
|
||||
@@ -212,7 +213,7 @@ export default function Category() {
|
||||
<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>
|
||||
<p className="text-[10px] font-bold text-[#8C7E6C]/50 mt-0.5 tracking-tighter">ID: {item.id}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -248,7 +249,7 @@ export default function Category() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteClick(item.ID || item.id)}
|
||||
onClick={() => handleDeleteClick(item.id)}
|
||||
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" />
|
||||
|
||||
@@ -5,14 +5,15 @@ import {
|
||||
updateChannelApi,
|
||||
deleteChannelApi,
|
||||
getAllCategoryListApi
|
||||
} from '../../../api/radio';
|
||||
import { DeleteConfirm } from '../../../components/DeleteConfirm';
|
||||
import { Button } from '../../../components/ui/button';
|
||||
import { Input } from '../../../components/ui/input';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table';
|
||||
import { Dialog, DialogContent, DialogTitle } from '../../../components/ui/dialog';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
|
||||
import { Label } from '../../../components/ui/label';
|
||||
} from '@/api/radio.ts';
|
||||
import type {RadioChannel, RadioCategory, ChannelFormData} from '@/types/radio.ts';
|
||||
import { DeleteConfirm } from '@/components/DeleteConfirm.tsx';
|
||||
import { Button } from '@/components/ui/button.tsx';
|
||||
import { Input } from '@/components/ui/input.tsx';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.tsx';
|
||||
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog.tsx';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.tsx';
|
||||
import { Label } from '@/components/ui/label.tsx';
|
||||
import {
|
||||
Plus,
|
||||
Edit,
|
||||
@@ -23,7 +24,9 @@ import {
|
||||
LayoutGrid,
|
||||
CalendarDays,
|
||||
Palette,
|
||||
Smile
|
||||
Smile,
|
||||
Disc3,
|
||||
ArrowRight
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
@@ -37,10 +40,10 @@ const EMOJI_LIST = [
|
||||
];
|
||||
|
||||
export default function Channel() {
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [data, setData] = useState<RadioChannel[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [categories, setCategories] = useState<any[]>([]);
|
||||
const [categories, setCategories] = useState<RadioCategory[]>([]);
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<string>("");
|
||||
|
||||
const [page, setPage] = useState(1);
|
||||
@@ -50,7 +53,7 @@ export default function Channel() {
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
const [formData, setFormData] = useState<any>({
|
||||
const [formData, setFormData] = useState<ChannelFormData>({
|
||||
id: undefined,
|
||||
categoryId: '',
|
||||
name: '',
|
||||
@@ -61,12 +64,13 @@ export default function Channel() {
|
||||
quarterlyPrice: 0,
|
||||
annualPrice: 0,
|
||||
cover: '📻',
|
||||
tags: '',
|
||||
sort: 0,
|
||||
status: 1
|
||||
});
|
||||
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [deleteId, setDeleteId] = useState<any>(null);
|
||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||
|
||||
// Helpers for Cents/Yuan conversion
|
||||
const toYuan = (cents: number) => cents === 0 ? "0" : (cents / 100).toString();
|
||||
@@ -77,8 +81,8 @@ export default function Channel() {
|
||||
|
||||
const fetchCategories = async () => {
|
||||
try {
|
||||
const res: any = await getAllCategoryListApi();
|
||||
setCategories(res.list || res || []);
|
||||
const res = await getAllCategoryListApi();
|
||||
setCategories(Array.isArray(res) ? res : ('list' in res ? res.list : []));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
@@ -87,13 +91,13 @@ export default function Channel() {
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res: any = await getChannelListApi({
|
||||
const res = await getChannelListApi({
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
name: debouncedSearch || "",
|
||||
categoryId: selectedCategoryId || ""
|
||||
});
|
||||
setData(res.list || res || []);
|
||||
setData(res.list || []);
|
||||
setTotal(res.total || 0);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -131,16 +135,17 @@ export default function Channel() {
|
||||
quarterlyPrice: 0,
|
||||
annualPrice: 0,
|
||||
cover: '📻',
|
||||
tags: '',
|
||||
sort: 0,
|
||||
status: 1
|
||||
});
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleOpenEdit = (record: any) => {
|
||||
const handleOpenEdit = (record: RadioChannel) => {
|
||||
setIsEdit(true);
|
||||
setFormData({
|
||||
id: String(record.ID || record.id || ""),
|
||||
id: record.id,
|
||||
categoryId: record.categoryId,
|
||||
name: record.name,
|
||||
description: record.description,
|
||||
@@ -150,13 +155,14 @@ export default function Channel() {
|
||||
quarterlyPrice: record.quarterlyPrice || 0,
|
||||
annualPrice: record.annualPrice || 0,
|
||||
cover: record.cover || '📻',
|
||||
tags: record.tags || '',
|
||||
sort: record.sort,
|
||||
status: record.status
|
||||
});
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (id: any) => {
|
||||
const handleDeleteClick = (id: string) => {
|
||||
setDeleteId(id);
|
||||
setDeleteOpen(true);
|
||||
};
|
||||
@@ -190,7 +196,7 @@ export default function Channel() {
|
||||
}
|
||||
|
||||
// 确保排序字段合法
|
||||
if (submitData.sort === "" || submitData.sort === undefined || submitData.sort === null) {
|
||||
if (submitData.sort === undefined || submitData.sort === null) {
|
||||
submitData.sort = 0;
|
||||
}
|
||||
|
||||
@@ -238,56 +244,55 @@ export default function Channel() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8 items-start">
|
||||
<div className="grid grid-cols-1 lg: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">
|
||||
<Card className="lg:col-span-3 glass-card warm-noise border-none shadow-glass rounded-[1.5rem] md:rounded-[2.5rem] overflow-hidden relative lg:sticky lg:top-28">
|
||||
<CardHeader className="p-4 md: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">
|
||||
<LayoutGrid className="w-4 h-4" />
|
||||
频道分类
|
||||
分类筛选
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<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">
|
||||
<CardContent className="p-4 bg-[#FAF5E6]/20">
|
||||
<div className="flex flex-col gap-2 max-h-[60vh] overflow-y-auto custom-scrollbar">
|
||||
<button
|
||||
onClick={() => setSelectedCategoryId("")}
|
||||
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'
|
||||
className={`w-full text-left px-5 py-4 rounded-3xl text-sm font-black transition-all flex items-center justify-between group ${selectedCategoryId === ""
|
||||
? 'bg-[#D28F4F] text-white shadow-lg'
|
||||
: 'text-[#8C7E6C] hover:bg-white/60 hover:text-[#4A3A2C]'
|
||||
}`}
|
||||
>
|
||||
全部频道
|
||||
全部频道全集
|
||||
<Disc3 className={`w-4 h-4 ${selectedCategoryId === "" ? 'animate-spin-slow' : 'opacity-0 group-hover:opacity-100'} transition-opacity`} />
|
||||
</button>
|
||||
{categories.map((category: any) => {
|
||||
const catId = String(category.ID || category.id || "");
|
||||
{categories.map((category) => {
|
||||
const catId = String(category.id);
|
||||
const isSelected = selectedCategoryId === catId;
|
||||
return (
|
||||
<button
|
||||
key={catId}
|
||||
onClick={() => setSelectedCategoryId(catId)}
|
||||
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'
|
||||
className={`w-full text-left px-5 py-4 rounded-3xl text-sm font-black transition-all flex items-center justify-between group ${isSelected
|
||||
? 'bg-[#4A3A2C] text-white shadow-lg'
|
||||
: 'text-[#8C7E6C] hover:bg-white/60 hover:text-[#4A3A2C]'
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{category.name}</span>
|
||||
{isSelected && <div className="hidden md:block w-2 h-2 rounded-full bg-[#D28F4F] shadow-[0_0_10px_var(--primary)]" />}
|
||||
<ArrowRight className={`w-4 h-4 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`} />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<Card className="lg:col-span-9 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-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 : '电台频道全集'}
|
||||
{selectedCategoryId ? categories.find(c => c.id === selectedCategoryId)?.name : '电台频道全集'}
|
||||
</CardTitle>
|
||||
</div>
|
||||
<div className="relative group w-full max-w-sm">
|
||||
@@ -319,9 +324,9 @@ export default function Channel() {
|
||||
) : 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) => (
|
||||
data.map((item) => (
|
||||
<TableRow
|
||||
key={item.ID || item.id}
|
||||
key={item.id}
|
||||
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">
|
||||
@@ -332,7 +337,7 @@ export default function Channel() {
|
||||
<TableCell className="py-6">
|
||||
<div className="max-w-[200px]">
|
||||
<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>
|
||||
<p className="text-[11px] font-bold text-[#8C7E6C]/60 mt-1 line-clamp-1 italic">#{categories.find(c => c.id === String(item.categoryId))?.name || '未分类'}</p>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-6">
|
||||
@@ -392,7 +397,7 @@ export default function Channel() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteClick(item.ID || item.id)}
|
||||
onClick={() => handleDeleteClick(item.id)}
|
||||
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" />
|
||||
@@ -500,8 +505,8 @@ export default function Channel() {
|
||||
onChange={e => setFormData({ ...formData, categoryId: e.target.value })}
|
||||
>
|
||||
<option value="" disabled>选择一个分类定位</option>
|
||||
{categories.map((c: any) => (
|
||||
<option key={String(c.ID || c.id)} value={String(c.ID || c.id)}>{c.name}</option>
|
||||
{categories.map((c) => (
|
||||
<option key={c.id} value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
@@ -556,7 +561,7 @@ export default function Channel() {
|
||||
value={formData.sort ?? ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
setFormData({ ...formData, sort: val === "" ? "" : parseInt(val) });
|
||||
setFormData({ ...formData, sort: val === "" ? 0 : parseInt(val) });
|
||||
}}
|
||||
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"
|
||||
/>
|
||||
|
||||
@@ -4,16 +4,18 @@ import {
|
||||
saveProgramApi,
|
||||
updateProgramApi,
|
||||
deleteProgramApi,
|
||||
getChannelListApi
|
||||
} 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';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table';
|
||||
import { Dialog, DialogContent, DialogTitle } from '../../../components/ui/dialog';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
|
||||
import { Label } from '../../../components/ui/label';
|
||||
getChannelListApi,
|
||||
generateTtsApi, getAllCategoryListApi
|
||||
} from '@/api/radio.ts';
|
||||
import type {RadioProgram, RadioChannel, RadioCategory, ProgramFormData} from '@/types/radio.ts';
|
||||
import {FileUploader} from '@/components/FileUploader.tsx';
|
||||
import {DeleteConfirm} from '@/components/DeleteConfirm.tsx';
|
||||
import {Button} from '@/components/ui/button.tsx';
|
||||
import {Input} from '@/components/ui/input.tsx';
|
||||
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from '@/components/ui/table.tsx';
|
||||
import {Dialog, DialogContent, DialogTitle} from '@/components/ui/dialog.tsx';
|
||||
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card.tsx';
|
||||
import {Label} from '@/components/ui/label.tsx';
|
||||
import {
|
||||
Plus,
|
||||
Edit,
|
||||
@@ -27,11 +29,15 @@ import {
|
||||
Disc3,
|
||||
ArrowRight,
|
||||
Headphones,
|
||||
FileAudio,
|
||||
Smile
|
||||
Smile,
|
||||
Wand2,
|
||||
RefreshCw,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
FolderOpen
|
||||
} from 'lucide-react';
|
||||
import {toast} from 'sonner';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {motion} from 'framer-motion';
|
||||
|
||||
const EMOJI_LIST = [
|
||||
'🎵', '🎶', '📻', '🎙️', '🎧', '🌙', '☀️', '🌊', '🌲', '🌌',
|
||||
@@ -42,11 +48,13 @@ const EMOJI_LIST = [
|
||||
];
|
||||
|
||||
export default function Program() {
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [data, setData] = useState<RadioProgram[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [channels, setChannels] = useState<any[]>([]);
|
||||
const [channels, setChannels] = useState<RadioChannel[]>([]);
|
||||
const [categories, setCategories] = useState<RadioCategory[]>([]);
|
||||
const [selectedChannelId, setSelectedChannelId] = useState<string>("");
|
||||
const [expandedCats, setExpandedCats] = useState<Set<string>>(new Set());
|
||||
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize] = useState(10);
|
||||
@@ -55,7 +63,7 @@ export default function Program() {
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isEdit, setIsEdit] = useState(false);
|
||||
const [formData, setFormData] = useState<any>({
|
||||
const [formData, setFormData] = useState<ProgramFormData>({
|
||||
id: undefined,
|
||||
channelId: '',
|
||||
title: '',
|
||||
@@ -69,30 +77,49 @@ export default function Program() {
|
||||
});
|
||||
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [deleteIds, setDeleteIds] = useState<any[]>([]);
|
||||
const [deleteIds, setDeleteIds] = useState<string[]>([]);
|
||||
|
||||
const [playingId, setPlayingId] = useState<any>(null);
|
||||
const [playingId, setPlayingId] = useState<string | null>(null);
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
|
||||
const fetchChannels = async () => {
|
||||
try {
|
||||
const res: any = await getChannelListApi({ pageSize: 100 });
|
||||
setChannels(res.list || res || []);
|
||||
const res = await getChannelListApi({pageSize: 100});
|
||||
setChannels(res.list || []);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
const fetchCategories = async () => {
|
||||
try {
|
||||
const res = await getAllCategoryListApi();
|
||||
const list: RadioCategory[] = Array.isArray(res) ? res : ('list' in res ? res.list : []);
|
||||
setCategories(list);
|
||||
setExpandedCats(new Set(list.map((c) => String(c.id))));
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
const toggleCat = (catId: string) => {
|
||||
setExpandedCats(prev => {
|
||||
const next = new Set(prev);
|
||||
next.has(catId) ? next.delete(catId) : next.add(catId);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res: any = await getProgramListApi({
|
||||
const res = await getProgramListApi({
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
title: debouncedSearch,
|
||||
channelId: selectedChannelId || undefined
|
||||
});
|
||||
setData(res.list || res || []);
|
||||
setData(res.list || []);
|
||||
setTotal(res.total || 0);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -103,6 +130,7 @@ export default function Program() {
|
||||
|
||||
useEffect(() => {
|
||||
fetchChannels();
|
||||
fetchCategories();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -134,10 +162,10 @@ export default function Program() {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleOpenEdit = (record: any) => {
|
||||
const handleOpenEdit = (record: RadioProgram) => {
|
||||
setIsEdit(true);
|
||||
setFormData({
|
||||
id: String(record.ID || record.id || ""),
|
||||
id: record.id,
|
||||
channelId: record.channelId,
|
||||
title: record.title,
|
||||
description: record.description,
|
||||
@@ -151,8 +179,8 @@ export default function Program() {
|
||||
setOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteClick = (id: any) => {
|
||||
setDeleteIds([String(id)]);
|
||||
const handleDeleteClick = (id: string) => {
|
||||
setDeleteIds([id]);
|
||||
setDeleteOpen(true);
|
||||
};
|
||||
|
||||
@@ -170,6 +198,16 @@ export default function Program() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerateTts = async (id: string) => {
|
||||
try {
|
||||
await generateTtsApi(id);
|
||||
toast.success('语音生成任务已提交');
|
||||
fetchData();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.title) return toast.error('请填写节目标题');
|
||||
if (!formData.channelId) return toast.error('请选择所属频道');
|
||||
@@ -189,18 +227,18 @@ export default function Program() {
|
||||
}
|
||||
};
|
||||
|
||||
const togglePlay = (record: any) => {
|
||||
const togglePlay = (record: RadioProgram) => {
|
||||
const audioUrl = record.audio?.url || record.audioId;
|
||||
if (!audioUrl) return toast.error('无可用音频文件');
|
||||
|
||||
if (playingId === (record.ID || record.id)) {
|
||||
if (playingId === record.id) {
|
||||
audioRef.current?.pause();
|
||||
setPlayingId(null);
|
||||
} else {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.src = audioUrl;
|
||||
audioRef.current.play();
|
||||
setPlayingId(record.ID || record.id);
|
||||
setPlayingId(record.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -222,13 +260,15 @@ export default function Program() {
|
||||
<div className="flex flex-col xl:flex-row xl:items-end justify-between gap-8 px-2">
|
||||
<div>
|
||||
<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]">
|
||||
<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>
|
||||
声音单元<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-4 text-sm md:text-base max-w-xl">
|
||||
在这里雕琢每一个播音瞬间，通过 Emoji 为每一段声音赋予独特的视觉生命。
|
||||
@@ -244,52 +284,118 @@ export default function Program() {
|
||||
</div>
|
||||
|
||||
<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">
|
||||
{/* Category → Channel Tree 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
|
||||
className="text-xs font-black uppercase tracking-[0.3em] text-[#8C7E6C] flex items-center gap-3">
|
||||
<FolderOpen className="w-4 h-4"/>
|
||||
分类 / 频道筛选
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<div className="p-4 space-y-2">
|
||||
<div className="p-4 space-y-1 max-h-[60vh] overflow-y-auto custom-scrollbar">
|
||||
<button
|
||||
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'}`} />
|
||||
全部节目
|
||||
<Disc3
|
||||
className={`w-4 h-4 ${selectedChannelId === "" ? 'animate-spin-slow' : 'opacity-0 group-hover:opacity-100'}`}/>
|
||||
</button>
|
||||
{channels.map((channel: any) => (
|
||||
|
||||
{categories.map((cat) => {
|
||||
const catId = String(cat.id);
|
||||
const catChannels = channels.filter((ch) => String(ch.categoryId) === catId);
|
||||
const isExpanded = expandedCats.has(catId);
|
||||
const hasSelectedChild = catChannels.some((ch) => selectedChannelId === String(ch.id));
|
||||
|
||||
if (catChannels.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={catId} className="mt-1">
|
||||
<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'}`}
|
||||
onClick={() => toggleCat(catId)}
|
||||
className={`w-full text-left px-5 py-3 rounded-2xl text-xs font-black uppercase tracking-[0.15em] transition-all flex items-center gap-3 ${hasSelectedChild ? 'text-[#D28F4F] bg-[#D28F4F]/5' : 'text-[#8C7E6C]/70 hover:bg-white/40 hover:text-[#4A3A2C]'}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xl shrink-0">{channel.cover || '📻'}</span>
|
||||
<span className="truncate">{channel.name}</span>
|
||||
</div>
|
||||
<ArrowRight className={`w-4 h-4 ${selectedChannelId === String(channel.ID || channel.id) ? '' : 'opacity-0 group-hover:opacity-100'}`} />
|
||||
{isExpanded
|
||||
? <ChevronDown className="w-3.5 h-3.5 shrink-0"/>
|
||||
: <ChevronRight className="w-3.5 h-3.5 shrink-0"/>}
|
||||
<span className="truncate">{cat.name}</span>
|
||||
<span className="ml-auto text-[10px] opacity-50">{catChannels.length}</span>
|
||||
</button>
|
||||
))}
|
||||
{isExpanded && (
|
||||
<div className="ml-4 pl-3 border-l-2 border-[#D28F4F]/10 space-y-1 mt-1">
|
||||
{catChannels.map((channel) => {
|
||||
const chId = String(channel.id);
|
||||
return (
|
||||
<button key={chId} onClick={() => setSelectedChannelId(chId)}
|
||||
className={`w-full text-left px-5 py-3 rounded-2xl text-sm font-bold transition-all flex items-center justify-between group ${selectedChannelId === chId ? 'bg-[#4A3A2C] text-white shadow-lg' : 'text-[#8C7E6C] hover:bg-white/60'}`}>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span
|
||||
className="text-base shrink-0">{channel.cover || '📻'}</span>
|
||||
<span className="truncate text-[13px]">{channel.name}</span>
|
||||
</div>
|
||||
<ArrowRight
|
||||
className={`w-3.5 h-3.5 shrink-0 ${selectedChannelId === chId ? '' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Uncategorized channels */}
|
||||
{(() => {
|
||||
const catIds = new Set(categories.map((c) => String(c.id)));
|
||||
const uncategorized = channels.filter((ch) => !catIds.has(String(ch.categoryId)));
|
||||
if (uncategorized.length === 0) return null;
|
||||
return (
|
||||
<div className="mt-2 pt-2 border-t border-[#4A3A2C]/5">
|
||||
<div
|
||||
className="px-5 py-2 text-[10px] font-black uppercase tracking-[0.15em] text-[#8C7E6C]/40">未分类
|
||||
</div>
|
||||
{uncategorized.map((channel) => {
|
||||
const chId = String(channel.id);
|
||||
return (
|
||||
<button key={chId} onClick={() => setSelectedChannelId(chId)}
|
||||
className={`w-full text-left px-6 py-3 rounded-2xl text-sm font-bold transition-all flex items-center justify-between group ${selectedChannelId === chId ? 'bg-[#4A3A2C] text-white shadow-lg' : 'text-[#8C7E6C] hover:bg-white/60'}`}>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="text-base shrink-0">{channel.cover || '📻'}</span>
|
||||
<span className="truncate text-[13px]">{channel.name}</span>
|
||||
</div>
|
||||
<ArrowRight
|
||||
className={`w-3.5 h-3.5 shrink-0 ${selectedChannelId === chId ? '' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}/>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 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">
|
||||
<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>
|
||||
<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" />
|
||||
<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="按标题检索内容..."
|
||||
value={searchTitle}
|
||||
@@ -300,33 +406,45 @@ export default function Program() {
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto overflow-y-hidden">
|
||||
<Table className="min-w-[900px]">
|
||||
<Table className="min-w-[1200px]">
|
||||
<TableHeader className="bg-[#FAF5E6]/40">
|
||||
<TableRow className="hover:bg-transparent border-[#4A3A2C]/5">
|
||||
<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>
|
||||
<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={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>
|
||||
<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={5} className="h-96 text-center text-[#8C7E6C] text-xs font-black tracking-[0.5em] uppercase">No Audio Units Found</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) => (
|
||||
data.map((item) => (
|
||||
<TableRow
|
||||
key={item.ID || item.id}
|
||||
key={item.id}
|
||||
className="group border-[#4A3A2C]/5 hover:bg-white/80 transition-all duration-500"
|
||||
>
|
||||
<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">
|
||||
<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
|
||||
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-8">
|
||||
@@ -334,19 +452,21 @@ export default function Program() {
|
||||
<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'}`}
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center transition-all ${playingId === 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" />}
|
||||
{playingId === 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 || '公域单元'}
|
||||
{channels.find(c => 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">
|
||||
<p className="text-xs font-medium text-[#8C7E6C] line-clamp-3 max-w-[500px] italic leading-relaxed pl-14 opacity-80 group-hover:opacity-100 transition-opacity">
|
||||
{item.description || "— 此单元尚未注入灵魂描述 —"}
|
||||
</p>
|
||||
</div>
|
||||
@@ -355,11 +475,13 @@ export default function Program() {
|
||||
<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>
|
||||
<span
|
||||
className="text-sm font-black tabular-nums">{formatDuration(item.duration)}</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(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">
|
||||
<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>
|
||||
))}
|
||||
@@ -367,31 +489,58 @@ export default function Program() {
|
||||
</div>
|
||||
</TableCell>
|
||||
<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
|
||||
<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'}`} />
|
||||
<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">
|
||||
<div className="flex items-center justify-end gap-3 transition-all">
|
||||
{(() => {
|
||||
const isGenerating = item.audioStatus === 1;
|
||||
const hasAudio = !!item.audioId || item.audioStatus === 2;
|
||||
return (
|
||||
<Button
|
||||
variant={hasAudio || isGenerating ? "outline" : "default"}
|
||||
size="sm"
|
||||
onClick={() => handleGenerateTts(item.id)}
|
||||
disabled={hasAudio || isGenerating}
|
||||
className={`h-9 px-4 rounded-xl shadow-sm transition-all border border-[#4A3A2C]/5 ${hasAudio || isGenerating ? 'text-[#8C7E6C]/50 bg-gray-50/50 cursor-not-allowed' : 'bg-[#FAF5E6] text-[#D28F4F] hover:bg-white hover:shadow-md hover:text-[#A64452]'}`}
|
||||
title={hasAudio ? "语音文件已存在" : (isGenerating ? "正在生成中" : "生成语音文件")}
|
||||
>
|
||||
{isGenerating ? (
|
||||
<RefreshCw
|
||||
className="w-4 h-4 mr-1.5 animate-spin"/>
|
||||
) : (
|
||||
<Wand2
|
||||
className={`w-4 h-4 mr-1.5 ${hasAudio ? '' : 'animate-pulse'}`}/>
|
||||
)}
|
||||
{hasAudio ? '已生成语音' : (isGenerating ? '正在生成...' : '生成语音')}
|
||||
</Button>
|
||||
);
|
||||
})()}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
size="sm"
|
||||
onClick={() => handleOpenEdit(item)}
|
||||
className="w-12 h-12 rounded-2xl hover:bg-white hover:text-[#D28F4F] shadow-sm hover:shadow-xl transition-all border border-[#4A3A2C]/5"
|
||||
className="h-9 px-4 rounded-xl bg-[#f8f9fa] hover:bg-white hover:text-[#D28F4F] shadow-sm transition-all border border-[#4A3A2C]/5"
|
||||
>
|
||||
<Edit className="w-5 h-5" />
|
||||
<Edit className="w-4 h-4 mr-1.5"/>
|
||||
编辑
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
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"
|
||||
size="sm"
|
||||
onClick={() => handleDeleteClick(item.id)}
|
||||
className="h-9 px-4 rounded-xl bg-[#fff0f0] hover:bg-rose-50 hover:text-rose-600 shadow-sm transition-all border border-[#4A3A2C]/5"
|
||||
>
|
||||
<Trash2 className="w-5 h-5" />
|
||||
<Trash2 className="w-4 h-4 mr-1.5"/>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
@@ -402,7 +551,8 @@ export default function Program() {
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
<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="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>
|
||||
@@ -416,7 +566,8 @@ export default function Program() {
|
||||
>
|
||||
上一页
|
||||
</Button>
|
||||
<div className="px-6 py-2 bg-white/50 rounded-full font-black text-[11px] text-[#4A3A2C] shadow-inner border border-white">
|
||||
<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
|
||||
@@ -434,9 +585,11 @@ export default function Program() {
|
||||
|
||||
{/* Program Edit/Create Modal */}
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<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">
|
||||
<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="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
|
||||
@@ -444,7 +597,8 @@ export default function Program() {
|
||||
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" />
|
||||
<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>
|
||||
@@ -463,18 +617,21 @@ export default function Program() {
|
||||
</div>
|
||||
|
||||
{/* 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="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>
|
||||
<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>
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">1.
|
||||
标题映射</Label>
|
||||
<Input
|
||||
placeholder="输入引发共鸣的标题..."
|
||||
value={formData.title}
|
||||
@@ -483,26 +640,32 @@ export default function Program() {
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">2. 归属频道</Label>
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">2.
|
||||
归属频道</Label>
|
||||
<select
|
||||
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>
|
||||
{channels.map((c: any) => (
|
||||
<option key={String(c.ID || c.id)} value={String(c.ID || c.id)}>{c.name}</option>
|
||||
{channels.map((c) => (
|
||||
<option key={c.id}
|
||||
value={c.id}>{c.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">3. 时长(秒)与标签</Label>
|
||||
<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 => setFormData({ ...formData, duration: parseInt(e.target.value) || 0 })}
|
||||
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]"
|
||||
/>
|
||||
<Input
|
||||
@@ -516,11 +679,13 @@ export default function Program() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F] flex items-center gap-2">
|
||||
<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">
|
||||
<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}
|
||||
@@ -536,7 +701,8 @@ export default function Program() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">5. 艺术描述与核心内容</Label>
|
||||
<Label className="text-[10px] uppercase font-black tracking-widest text-[#D28F4F]">5.
|
||||
艺术描述与核心内容</Label>
|
||||
<div className="space-y-4">
|
||||
<textarea
|
||||
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"
|
||||
|
||||
@@ -0,0 +1,222 @@
|
||||
import {useState, useEffect} from 'react';
|
||||
import {getRadioUserListApi} from '@/api/radio.ts';
|
||||
import type {RadioUserItem} from '@/types/radio.ts';
|
||||
import { Button } from '@/components/ui/button.tsx';
|
||||
import { Input } from '@/components/ui/input.tsx';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.tsx';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.tsx';
|
||||
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog.tsx';
|
||||
import { Search, Users, Crown, Headphones, Heart, ShoppingBag, Clock, MapPin, ChevronLeft, ChevronRight, Eye } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
export default function UserManagement() {
|
||||
const [data, setData] = useState<RadioUserItem[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize] = useState(10);
|
||||
const [searchName, setSearchName] = useState('');
|
||||
const [debouncedSearch, setDebouncedSearch] = useState('');
|
||||
const [vipFilter, setVipFilter] = useState(0);
|
||||
const [detailOpen, setDetailOpen] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState<RadioUserItem | null>(null);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getRadioUserListApi({current: page, pageSize, keyword: debouncedSearch || '', isVip: vipFilter});
|
||||
setData(res.list || []);
|
||||
setTotal(res.total || 0);
|
||||
} catch (e) { console.error(e); } finally { setLoading(false); }
|
||||
};
|
||||
useEffect(() => { fetchData(); }, [page, pageSize, debouncedSearch, vipFilter]);
|
||||
useEffect(() => { const t = setTimeout(() => { setDebouncedSearch(searchName); setPage(1); }, 500); return () => clearTimeout(t); }, [searchName]);
|
||||
|
||||
const fmt = (d: string | null) => !d ? '-' : new Date(d).toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
|
||||
const toYuan = (c: number) => c === 0 ? '0.00' : (c / 100).toFixed(2);
|
||||
const vipTabs = [{ label: '全部用户', value: 0 }, { label: 'VIP 用户', value: 1 }, { label: '普通用户', value: 2 }];
|
||||
|
||||
return (
|
||||
<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} 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 px-2">
|
||||
<div>
|
||||
<h1 className="text-3xl md:text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-4">
|
||||
用户管理 <Users className="w-8 h-8 text-[#D28F4F] animate-bounce" />
|
||||
</h1>
|
||||
<p className="text-[#8C7E6C] font-medium mt-2 text-sm md:text-base">洞察每一位听众的收听旅程，构建深度用户画像。</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 bg-white/60 backdrop-blur-md rounded-2xl p-1.5 border border-[#D28F4F]/10 shadow-sm">
|
||||
{vipTabs.map(tab => (
|
||||
<button key={tab.value} onClick={() => { setVipFilter(tab.value); setPage(1); }}
|
||||
className={`px-5 py-2.5 rounded-xl text-sm font-black transition-all ${vipFilter === tab.value ? 'bg-gradient-to-r from-[#D28F4F] to-[#A64452] text-white shadow-lg shadow-[#D28F4F]/20' : 'text-[#8C7E6C] hover:text-[#4A3A2C] hover:bg-white/60'}`}>
|
||||
{tab.value === 1 && <Crown className="w-3.5 h-3.5 inline mr-1.5 -mt-0.5" />}{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="glass-card warm-noise border-none shadow-glass rounded-[1.5rem] md:rounded-[2.5rem] overflow-hidden min-h-[500px] 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-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]">听众档案 <span className="text-[#8C7E6C] text-sm font-bold ml-2">共 {total} 位</span></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" />
|
||||
<Input placeholder="搜索昵称 / 手机号 / 账号..." value={searchName} onChange={(e) => setSearchName(e.target.value)}
|
||||
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 overflow-y-hidden">
|
||||
<Table className="min-w-[900px]">
|
||||
<TableHeader className="bg-[#FAF5E6]/50">
|
||||
<TableRow className="hover:bg-transparent border-[#4A3A2C]/5">
|
||||
<TableHead className="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] text-center">会员</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>
|
||||
<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>
|
||||
<TableHead className="py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C] text-center">注册时间</TableHead>
|
||||
<TableHead className="text-right pr-10 py-6 text-[10px] font-black uppercase tracking-[0.2em] text-[#8C7E6C]">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow><TableCell colSpan={8} className="h-96 text-center text-[#8C7E6C] font-black uppercase"><Users className="w-12 h-12 mx-auto animate-spin-slow mb-4 text-[#D28F4F]/50" />加载听众数据...</TableCell></TableRow>
|
||||
) : data.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={8} className="h-96 text-center text-[#8C7E6C] text-sm font-black tracking-widest uppercase">未发现相关用户</TableCell></TableRow>
|
||||
) : data.map((item) => (
|
||||
<TableRow key={item.id} className="group border-[#4A3A2C]/5 hover:bg-[#FAF5E6]/80 transition-all duration-300 md:hover:scale-[1.002] relative">
|
||||
<TableCell className="pl-10 py-5">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[#D28F4F]/20 to-[#A64452]/20 flex items-center justify-center text-lg font-black text-[#D28F4F] overflow-hidden border border-[#FAF5E6] shadow-sm">
|
||||
{item.avatarUrl ? <img src={item.avatarUrl} className="w-full h-full object-cover" /> : (item.name?.[0] || '👤')}
|
||||
</div>
|
||||
{item.isVip === 1 && <Crown className="absolute -top-1 -right-1 w-4 h-4 text-amber-500 fill-amber-400 drop-shadow" />}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-black text-[#4A3A2C] text-sm group-hover:text-[#D28F4F] transition-colors">{item.name || '匿名用户'}</p>
|
||||
<p className="text-[10px] text-[#8C7E6C]/60 font-bold mt-0.5">{item.phone || item.account || '-'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="py-5 text-center">
|
||||
{item.isVip === 1
|
||||
? <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200 shadow-sm"><Crown className="w-3 h-3 fill-amber-500" /><span className="text-[10px] font-black uppercase">VIP</span></div>
|
||||
: <span className="text-[11px] font-black text-[#8C7E6C]/40 uppercase">普通</span>}
|
||||
</TableCell>
|
||||
<TableCell className="py-5 text-center"><div className="inline-flex items-center gap-1.5 text-sm font-black text-[#4A3A2C]"><Headphones className="w-3.5 h-3.5 text-[#D28F4F]/60" />{item.subscribeCount}</div></TableCell>
|
||||
<TableCell className="py-5 text-center"><span className="text-sm font-black text-[#4A3A2C]">{item.listenCount}</span></TableCell>
|
||||
<TableCell className="py-5 text-center"><div className="inline-flex items-center gap-1 text-sm font-black text-[#4A3A2C]"><Heart className="w-3.5 h-3.5 text-rose-400/60" />{item.favoriteCount}</div></TableCell>
|
||||
<TableCell className="py-5 text-center"><span className="text-sm font-black text-[#D28F4F]">¥{toYuan(item.totalSpent)}</span></TableCell>
|
||||
<TableCell className="py-5 text-center"><span className="text-[11px] font-bold text-[#8C7E6C]">{fmt(item.createdAt)}</span></TableCell>
|
||||
<TableCell className="text-right pr-10 py-5">
|
||||
<Button variant="ghost" size="icon" onClick={() => { setSelectedUser(item); setDetailOpen(true); }}
|
||||
className="w-10 h-10 rounded-xl hover:bg-white hover:text-[#D28F4F] transition-all border border-[#4A3A2C]/5 shadow-sm hover:shadow-md opacity-0 group-hover:opacity-100 translate-x-4 group-hover:translate-x-0">
|
||||
<Eye className="w-4 h-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
<AnimatePresence>
|
||||
{total > pageSize && (
|
||||
<motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 10 }}
|
||||
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-4 md:gap-6">
|
||||
<Button variant="ghost" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}
|
||||
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]">
|
||||
<ChevronLeft className="w-4 h-4 mr-1" />上一页
|
||||
</Button>
|
||||
<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-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]">
|
||||
下一页<ChevronRight className="w-4 h-4 ml-1" />
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</Card>
|
||||
<Dialog open={detailOpen} onOpenChange={setDetailOpen}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[600px] glass-card warm-noise border-none rounded-[2rem] 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">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="w-20 h-20 rounded-[1.5rem] bg-white shadow-2xl flex items-center justify-center text-3xl overflow-hidden shrink-0">
|
||||
{selectedUser?.avatarUrl
|
||||
? <img src={selectedUser.avatarUrl} className="w-full h-full object-cover" />
|
||||
: <span className="text-[#D28F4F] font-black">{selectedUser?.nickName?.[0] || '👤'}</span>}
|
||||
</div>
|
||||
<div>
|
||||
<DialogTitle className="text-2xl md:text-3xl font-black tracking-tight flex items-center gap-2">
|
||||
{selectedUser?.nickName || '匿名用户'}
|
||||
{selectedUser?.isVip === 1 && <Crown className="w-5 h-5 fill-amber-300 text-amber-200" />}
|
||||
</DialogTitle>
|
||||
<p className="text-white/60 text-xs font-bold mt-1">
|
||||
{selectedUser?.phone || selectedUser?.account || 'N/A'} · {selectedUser?.gender === 1 ? '男' : selectedUser?.gender === 2 ? '女' : '未知'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-8 md:p-10 space-y-6 bg-[#FAF5E6]/60">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="rounded-2xl bg-white p-4 text-center shadow-sm border border-[#4A3A2C]/5">
|
||||
<Headphones className="w-5 h-5 mx-auto mb-2 text-blue-600" />
|
||||
<p className="text-lg font-black text-[#4A3A2C]">{selectedUser?.subscribeCount}</p>
|
||||
<p className="text-[10px] font-bold text-[#8C7E6C] uppercase tracking-wider mt-1">订阅频道</p>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-white p-4 text-center shadow-sm border border-[#4A3A2C]/5">
|
||||
<Heart className="w-5 h-5 mx-auto mb-2 text-rose-600" />
|
||||
<p className="text-lg font-black text-[#4A3A2C]">{selectedUser?.favoriteCount}</p>
|
||||
<p className="text-[10px] font-bold text-[#8C7E6C] uppercase tracking-wider mt-1">收藏节目</p>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-white p-4 text-center shadow-sm border border-[#4A3A2C]/5">
|
||||
<ShoppingBag className="w-5 h-5 mx-auto mb-2 text-amber-600" />
|
||||
<p className="text-lg font-black text-[#4A3A2C]">¥{toYuan(selectedUser?.totalSpent || 0)}</p>
|
||||
<p className="text-[10px] font-bold text-[#8C7E6C] uppercase tracking-wider mt-1">累计消费</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="rounded-2xl bg-white p-4 flex items-center gap-3 shadow-sm border border-[#4A3A2C]/5">
|
||||
<Headphones className="w-4 h-4 text-[#D28F4F]" />
|
||||
<div><p className="text-sm font-black text-[#4A3A2C]">{selectedUser?.listenCount}</p><p className="text-[10px] font-bold text-[#8C7E6C]">收听次数</p></div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-white p-4 flex items-center gap-3 shadow-sm border border-[#4A3A2C]/5">
|
||||
<ShoppingBag className="w-4 h-4 text-[#D28F4F]" />
|
||||
<div><p className="text-sm font-black text-[#4A3A2C]">{selectedUser?.orderCount}</p><p className="text-[10px] font-bold text-[#8C7E6C]">订单数量</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-white p-5 space-y-3 shadow-sm border border-[#4A3A2C]/5">
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<Clock className="w-4 h-4 text-[#8C7E6C]" /><span className="text-[#8C7E6C] font-bold">注册时间</span>
|
||||
<span className="ml-auto text-[#4A3A2C] font-black">{fmt(selectedUser?.createdAt ?? null)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<Clock className="w-4 h-4 text-[#8C7E6C]" /><span className="text-[#8C7E6C] font-bold">最后登录</span>
|
||||
<span className="ml-auto text-[#4A3A2C] font-black">{fmt(selectedUser?.lastLoginAt ?? null)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<MapPin className="w-4 h-4 text-[#8C7E6C]" /><span className="text-[#8C7E6C] font-bold">登录 IP</span>
|
||||
<span className="ml-auto text-[#4A3A2C] font-black font-mono text-xs">{selectedUser?.lastLoginIp || '-'}</span>
|
||||
</div>
|
||||
{selectedUser?.isVip === 1 && (
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<Crown className="w-4 h-4 text-amber-500" /><span className="text-[#8C7E6C] font-bold">VIP 到期</span>
|
||||
<span className="ml-auto text-amber-600 font-black">{fmt(selectedUser?.vipExpireAt ?? null)}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
getVipConfigDetailApi,
|
||||
updateVipConfigApi
|
||||
} from '@/api/radio.ts';
|
||||
import { Button } from '@/components/ui/button.tsx';
|
||||
import { Input } from '@/components/ui/input.tsx';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.tsx';
|
||||
import { Label } from '@/components/ui/label.tsx';
|
||||
import {
|
||||
Crown,
|
||||
Save,
|
||||
RefreshCw,
|
||||
ShieldCheck,
|
||||
Coins,
|
||||
Sparkles,
|
||||
Zap
|
||||
} from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
export default function VipConfig() {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [formData, setFormData] = useState<{ id: string; price: number; discountedPrice: number; remark: string }>({
|
||||
id: '',
|
||||
price: 0,
|
||||
discountedPrice: 0,
|
||||
remark: ''
|
||||
});
|
||||
|
||||
// Helper to format cents (from backend) to yuan (for frontend display)
|
||||
const toYuan = (cents: number) => (cents / 100).toString();
|
||||
// Helper to format yuan (from user input) to cents (for backend storage)
|
||||
const toCents = (yuan: string) => Math.round(parseFloat(yuan) * 100) || 0;
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await getVipConfigDetailApi();
|
||||
if (res) {
|
||||
setFormData({
|
||||
id: String(res.id || ""),
|
||||
price: (res.price as number) || 0,
|
||||
discountedPrice: (res.discountedPrice as number) || 0,
|
||||
remark: (res.remark as string) || ""
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
toast.error('获取VIP配置失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (formData.price <= 0) return toast.error('请输入有效价格');
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
// Already in cents within formData
|
||||
await updateVipConfigApi(formData);
|
||||
toast.success('VIP配置更新成功');
|
||||
fetchData();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
toast.error('更新失败');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="space-y-6 md:space-y-8 pb-10"
|
||||
>
|
||||
{/* Header Section */}
|
||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 px-2">
|
||||
<div>
|
||||
<h1 className="text-3xl md:text-4xl font-black tracking-tight text-[#4A3A2C] flex items-center gap-4">
|
||||
VIP 配置中心
|
||||
<div className="w-8 h-8 md:w-10 md:h-10 rounded-xl md:rounded-2xl bg-gradient-to-br from-amber-400 to-orange-600 flex items-center justify-center shadow-lg shadow-orange-500/20">
|
||||
<Crown className="w-5 h-5 md:w-6 md:h-6 text-white" />
|
||||
</div>
|
||||
</h1>
|
||||
<p className="text-[#8C7E6C] font-medium mt-2 italic text-sm md:text-base">定义尊贵权益，为忠实听众提供更纯粹的声音体验。</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 overflow-x-auto pb-2 md:pb-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={fetchData}
|
||||
disabled={loading}
|
||||
className="rounded-2xl h-12 md:h-14 px-4 md:px-6 font-black text-[#8C7E6C] hover:bg-white/60 transition-all border border-[#4A3A2C]/5 whitespace-nowrap"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3 ${loading ? 'animate-spin' : ''}`} />
|
||||
同步数据
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={saving}
|
||||
className="rounded-[1.2rem] md:rounded-[1.5rem] h-12 md:h-14 px-6 md:px-10 font-black shadow-xl shadow-[#D28F4F]/20 hover:scale-105 transition-all bg-gradient-to-r from-amber-500 to-[#D28F4F] border-none group whitespace-nowrap"
|
||||
>
|
||||
{saving ? (
|
||||
<RefreshCw className="w-4 h-4 md:w-5 md:h-5 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Save className="w-4 h-4 md:w-5 md:h-5 mr-2 md:mr-3 group-hover:scale-110 transition-transform" />
|
||||
)}
|
||||
部署配置
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 md:gap-10">
|
||||
{/* Form Section */}
|
||||
<div className="lg:col-span-8 space-y-6 md:space-y-10 order-2 lg:order-1">
|
||||
<Card className="glass-card warm-noise border-none shadow-glass rounded-[2rem] md:rounded-[3rem] overflow-hidden relative z-10">
|
||||
<CardHeader className="p-6 md:p-12 border-b border-[#4A3A2C]/5 bg-[#FAF5E6]/40">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 md:p-4 rounded-[1.2rem] md:rounded-[1.5rem] bg-amber-500/10">
|
||||
<Coins className="w-6 h-6 md:w-8 md:h-8 text-amber-600" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-xl md:text-2xl font-black tracking-tight text-[#4A3A2C]">核心价格方案</CardTitle>
|
||||
<p className="text-[#8C7E6C] text-[10px] md:text-sm font-bold opacity-60 mt-1 uppercase tracking-widest">Pricing Strategy</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6 md:p-12 space-y-8 md:space-y-10 bg-[#FAF5E6]/20">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-10">
|
||||
<div className="space-y-4">
|
||||
<Label className="text-[10px] md:text-xs uppercase font-black tracking-[0.2em] text-[#8C7E6C] ml-2 flex items-center gap-2">
|
||||
标准订阅价格 (元)
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-amber-500" />
|
||||
</Label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-6 top-1/2 -translate-y-1/2 text-xl md:text-2xl font-black text-[#D28F4F]">¥</div>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
value={toYuan(formData.price)}
|
||||
onChange={(e) => setFormData({ ...formData, price: toCents(e.target.value) })}
|
||||
className="h-16 md:h-20 rounded-[1.5rem] md:rounded-[2rem] border-none bg-white shadow-inner font-black text-[#4A3A2C] focus:ring-8 ring-amber-500/5 transition-all pl-12 text-2xl md:text-3xl"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[10px] text-[#8C7E6C] font-bold px-4 italic leading-relaxed">此价格代表VIP会员的原始标准定价。</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<Label className="text-[10px] md:text-xs uppercase font-black tracking-[0.2em] text-[#8C7E6C] ml-2 flex items-center gap-2">
|
||||
限时优享价格 (元)
|
||||
<Sparkles className="w-3 h-3 text-amber-500 animate-pulse" />
|
||||
</Label>
|
||||
<div className="relative group">
|
||||
<div className="absolute left-6 top-1/2 -translate-y-1/2 text-xl md:text-2xl font-black text-rose-500">¥</div>
|
||||
<Input
|
||||
type="number"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
value={toYuan(formData.discountedPrice)}
|
||||
onChange={(e) => setFormData({ ...formData, discountedPrice: toCents(e.target.value) })}
|
||||
className="h-16 md:h-20 rounded-[1.5rem] md:rounded-[2rem] border-none bg-white shadow-inner font-black text-rose-600 focus:ring-8 ring-rose-500/5 transition-all pl-12 text-2xl md:text-3xl"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-[10px] text-[#8C7E6C] font-bold px-4 italic leading-relaxed">当前正在生效的实际支付价格，通常应小于标准价。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Label className="text-[10px] md:text-xs uppercase font-black tracking-[0.2em] text-[#8C7E6C] ml-2">权益详情备注</Label>
|
||||
<textarea
|
||||
className="w-full min-h-[150px] md:min-h-[180px] rounded-[1.5rem] md:rounded-[2.5rem] border-none bg-white shadow-inner p-6 md:p-10 font-bold text-[#4A3A2C] focus:ring-8 ring-amber-500/5 transition-all outline-none resize-none placeholder:text-[#8C7E6C]/30 text-base md:text-lg leading-relaxed"
|
||||
placeholder="描述VIP持卡人的专属权益，例如：去广告、高清音质、专属勋章等..."
|
||||
value={formData.remark}
|
||||
onChange={(e) => setFormData({ ...formData, remark: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-8">
|
||||
<motion.div whileHover={{ y: -5 }} className="glass-card warm-noise p-6 md:p-8 rounded-[1.5rem] md:rounded-[2.5rem] border-none flex items-start gap-4 md:gap-6 shadow-sm">
|
||||
<div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-emerald-500/10 flex items-center justify-center flex-shrink-0">
|
||||
<ShieldCheck className="w-5 h-5 md:w-7 md:h-7 text-emerald-600" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base md:text-lg font-black text-[#4A3A2C]">高等级安全性</h3>
|
||||
<p className="text-xs md:text-sm text-[#8C7E6C] font-medium mt-1 leading-relaxed">交易流程经过加密处理，确保每一笔VIP订单的资金流向透明且安全。</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<motion.div whileHover={{ y: -5 }} className="glass-card warm-noise p-6 md:p-8 rounded-[1.5rem] md:rounded-[2.5rem] border-none flex items-start gap-4 md:gap-6 shadow-sm">
|
||||
<div className="w-10 h-10 md:w-14 md:h-14 rounded-xl md:rounded-2xl bg-[#D28F4F]/10 flex items-center justify-center flex-shrink-0">
|
||||
<Zap className="w-5 h-5 md:w-7 md:h-7 text-[#D28F4F]" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base md:text-lg font-black text-[#4A3A2C]">实时配置热更新</h3>
|
||||
<p className="text-xs md:text-sm text-[#8C7E6C] font-medium mt-1 leading-relaxed">在此更改价格后，小程序端将立即同步最新的VIP开通方案。</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Preview Section */}
|
||||
<div className="lg:col-span-4 space-y-10 order-1 lg:order-2">
|
||||
<Card className="glass-card warm-noise border-none shadow-glass rounded-[2rem] md:rounded-[3rem] overflow-hidden sticky top-8">
|
||||
<div className="h-2 bg-gradient-to-r from-amber-400 via-[#D28F4F] to-rose-500 w-full" />
|
||||
<CardHeader className="p-6 md:p-10 text-center">
|
||||
<div className="w-12 h-12 md:w-20 md:h-20 bg-amber-500/10 rounded-full flex items-center justify-center mx-auto mb-4 md:mb-6">
|
||||
<Crown className="w-6 h-6 md:w-10 md:h-10 text-amber-600" />
|
||||
</div>
|
||||
<CardTitle className="text-xl md:text-2xl font-black text-[#4A3A2C]">小程序预览态</CardTitle>
|
||||
<p className="text-[10px] md:text-xs font-black text-[#8C7E6C]/60 uppercase tracking-widest mt-2">MP Interface Mockup</p>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6 md:p-10 pt-0">
|
||||
<div className="bg-[#1A1A1A] rounded-[2.5rem] md:rounded-[3.5rem] p-4 md:p-6 shadow-2xl relative overflow-hidden aspect-[9/16] border-8 border-[#2A2A2A] mx-auto max-w-[300px] lg:max-w-none">
|
||||
<div className="absolute top-0 left-0 w-full h-40 bg-gradient-to-b from-amber-500/20 to-transparent" />
|
||||
|
||||
<div className="relative z-10 space-y-6 md:space-y-8">
|
||||
<div className="flex items-center justify-center pt-6 md:pt-10">
|
||||
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full border-4 border-amber-500/30 p-1">
|
||||
<div className="w-full h-full rounded-full bg-slate-700 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center space-y-1 md:space-y-2">
|
||||
<h4 className="text-white text-lg md:text-xl font-black">限时开通VIP</h4>
|
||||
<p className="text-amber-500/80 text-[10px] md:text-xs font-bold tracking-widest uppercase">Premium Membership</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/5 backdrop-blur-md rounded-[1.5rem] md:rounded-3xl p-6 md:p-8 border border-white/10 text-center space-y-3 md:space-y-4">
|
||||
<div className="flex items-end justify-center gap-1">
|
||||
<span className="text-amber-500 text-sm md:text-lg font-black pb-1">¥</span>
|
||||
<span className="text-white text-3xl md:text-5xl font-black">{(formData.discountedPrice || formData.price || 0) / 100}</span>
|
||||
</div>
|
||||
<div className="text-white/40 text-[10px] md:text-xs font-bold line-through italic">原价 ¥{formData.price / 100}</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 md:space-y-4">
|
||||
<div className="h-2 md:h-3 w-full bg-white/5 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-amber-500 w-2/3" />
|
||||
</div>
|
||||
<p className="text-white/40 text-[9px] md:text-[10px] font-bold text-center italic line-clamp-2">“ {formData.remark || "暂无备注详情"} ”</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-r from-amber-500 to-orange-600 h-12 md:h-16 rounded-xl md:rounded-2xl flex items-center justify-center shadow-lg shadow-orange-500/20">
|
||||
<span className="text-white font-black tracking-widest text-[10px] md:text-sm uppercase">立即开启非凡体验</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 md:mt-10 p-4 md:p-6 bg-amber-50 border border-amber-100 rounded-[1.2rem] md:rounded-[1.5rem]">
|
||||
<h4 className="text-amber-900 font-black text-xs md:text-sm flex items-center gap-2 md:gap-3">
|
||||
<Sparkles className="w-3 h-3 md:w-4 md:h-4 text-amber-600" />
|
||||
设计说明
|
||||
</h4>
|
||||
<p className="text-[10px] md:text-xs text-amber-800/60 font-medium mt-2 md:mt-3 leading-relaxed">右侧为 VIP 购买界面的风格预览。请确保填写的备注简洁有力，能直接触达用户的订阅欲望。</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -3,14 +3,14 @@ import {
|
||||
getFileListApi,
|
||||
deleteFileApi,
|
||||
uploadFileApi
|
||||
} from '../../../api/oss';
|
||||
import { DeleteConfirm } from '../../../components/DeleteConfirm';
|
||||
import { Button } from '../../../components/ui/button';
|
||||
import { Input } from '../../../components/ui/input';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../components/ui/table';
|
||||
import { Dialog, DialogContent, DialogTitle } from '../../../components/ui/dialog';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '../../../components/ui/card';
|
||||
import { Label } from '../../../components/ui/label';
|
||||
} from '@/api/oss.ts';
|
||||
import { DeleteConfirm } from '@/components/DeleteConfirm.tsx';
|
||||
import { Button } from '@/components/ui/button.tsx';
|
||||
import { Input } from '@/components/ui/input.tsx';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table.tsx';
|
||||
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog.tsx';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card.tsx';
|
||||
import { Label } from '@/components/ui/label.tsx';
|
||||
import {
|
||||
Trash2,
|
||||
Copy,
|
||||
@@ -25,8 +25,15 @@ import {
|
||||
import { toast } from 'sonner';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
interface OssFile {
|
||||
ID: string | number;
|
||||
name: string;
|
||||
url: string;
|
||||
suffix: string;
|
||||
}
|
||||
|
||||
export default function Oss() {
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [data, setData] = useState<OssFile[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
@@ -40,16 +47,16 @@ export default function Oss() {
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [deleteId, setDeleteId] = useState<any>(null);
|
||||
const [deleteId, setDeleteId] = useState<string | number | null>(null);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res: any = await getFileListApi({
|
||||
const res = await getFileListApi({
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
keyword: debouncedSearch
|
||||
});
|
||||
}) as { list?: OssFile[], total?: number };
|
||||
setData(res.list || []);
|
||||
setTotal(res.total || 0);
|
||||
} catch (e) {
|
||||
@@ -71,7 +78,7 @@ export default function Oss() {
|
||||
return () => clearTimeout(timer);
|
||||
}, [keyword]);
|
||||
|
||||
const handleDeleteClick = (id: any) => {
|
||||
const handleDeleteClick = (id: string | number) => {
|
||||
setDeleteId(id);
|
||||
setDeleteOpen(true);
|
||||
};
|
||||
@@ -178,7 +185,7 @@ export default function Oss() {
|
||||
) : data.length === 0 ? (
|
||||
<TableRow><TableCell colSpan={5} className="h-96 text-center text-[#8C7E6C] text-sm font-black tracking-widest uppercase">暂无云端资产记录</TableCell></TableRow>
|
||||
) : (
|
||||
data.map((item: any) => (
|
||||
data.map((item) => (
|
||||
<TableRow
|
||||
key={item.ID}
|
||||
className="group border-[#4A3A2C]/5 hover:bg-[#FAF5E6]/80 transition-all duration-300 transform hover:scale-[1.001]"
|
||||
|
||||
@@ -6,6 +6,7 @@ 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 UserManagement from '../pages/Radio/User';
|
||||
import Oss from '../pages/System/Oss';
|
||||
|
||||
const router = createBrowserRouter([
|
||||
@@ -41,6 +42,10 @@ const router = createBrowserRouter([
|
||||
path: 'system/oss',
|
||||
element: <Oss />,
|
||||
},
|
||||
{
|
||||
path: 'radio/user',
|
||||
element: <UserManagement />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,150 @@
|
||||
/** 通用基础模型（对应后端 global.BaseModel） */
|
||||
export interface BaseModel {
|
||||
id: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
createdAtStr: string;
|
||||
}
|
||||
|
||||
/** 分页请求参数 */
|
||||
export interface PageParams {
|
||||
current?: number;
|
||||
pageSize?: number;
|
||||
}
|
||||
|
||||
/** 分页响应 */
|
||||
export interface PageResult<T> {
|
||||
list: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
/** OSS 文件 */
|
||||
export interface OssFile extends BaseModel {
|
||||
url: string;
|
||||
name: string;
|
||||
tag: string;
|
||||
key: string;
|
||||
}
|
||||
|
||||
/** 频道分类 */
|
||||
export interface RadioCategory extends BaseModel {
|
||||
name: string;
|
||||
description: string;
|
||||
sort: number;
|
||||
status: number;
|
||||
channels?: RadioChannel[];
|
||||
}
|
||||
|
||||
/** 电台频道 */
|
||||
export interface RadioChannel extends BaseModel {
|
||||
categoryId: string;
|
||||
name: string;
|
||||
description: string;
|
||||
isFree: number;
|
||||
isVipOnly: number;
|
||||
monthlyPrice: number;
|
||||
quarterlyPrice: number;
|
||||
annualPrice: number;
|
||||
cover: string;
|
||||
tags: string;
|
||||
sort: number;
|
||||
status: number;
|
||||
hasSubscribed: number;
|
||||
expiredAt: string | null;
|
||||
programs?: RadioProgram[];
|
||||
}
|
||||
|
||||
/** 电台节目 */
|
||||
export interface RadioProgram extends BaseModel {
|
||||
channelId: string;
|
||||
title: string;
|
||||
description: string;
|
||||
content: string;
|
||||
cover: string;
|
||||
audioId: string;
|
||||
audio?: OssFile | null;
|
||||
audioStatus: number;
|
||||
duration: number;
|
||||
tags: string;
|
||||
playCount: number;
|
||||
likeCount: number;
|
||||
status: number;
|
||||
channel?: RadioChannel | null;
|
||||
hasLiked: number;
|
||||
hasFavorite: number;
|
||||
}
|
||||
|
||||
/** 电台用户列表项 */
|
||||
export interface RadioUserItem {
|
||||
id: string;
|
||||
name: string;
|
||||
nickName: string;
|
||||
account: string;
|
||||
phone: string;
|
||||
avatarUrl: string;
|
||||
gender: number;
|
||||
isVip: number;
|
||||
vipExpireAt: string | null;
|
||||
lastLoginAt: string | null;
|
||||
lastLoginIp: string;
|
||||
createdAt: string;
|
||||
subscribeCount: number;
|
||||
listenCount: number;
|
||||
favoriteCount: number;
|
||||
totalSpent: number;
|
||||
orderCount: number;
|
||||
}
|
||||
|
||||
/** 节目表单数据 */
|
||||
export interface ProgramFormData {
|
||||
id?: string;
|
||||
channelId: string;
|
||||
title: string;
|
||||
description: string;
|
||||
content: string;
|
||||
audioId: string;
|
||||
duration: number;
|
||||
cover: string;
|
||||
tags: string;
|
||||
status: number;
|
||||
}
|
||||
|
||||
/** 用户列表请求参数 */
|
||||
export interface RadioUserListParams extends PageParams {
|
||||
keyword?: string;
|
||||
isVip?: number;
|
||||
}
|
||||
|
||||
/** 节目列表请求参数 */
|
||||
export interface ProgramListParams extends PageParams {
|
||||
title?: string;
|
||||
channelId?: string;
|
||||
}
|
||||
|
||||
/** 分类表单数据 */
|
||||
export interface CategoryFormData {
|
||||
id?: string;
|
||||
name: string;
|
||||
description: string;
|
||||
sort: number | string;
|
||||
status: number;
|
||||
}
|
||||
|
||||
/** 频道表单数据 */
|
||||
export interface ChannelFormData {
|
||||
id?: string;
|
||||
categoryId: string;
|
||||
name: string;
|
||||
description: string;
|
||||
isFree: number;
|
||||
isVipOnly: number;
|
||||
monthlyPrice: number;
|
||||
quarterlyPrice: number;
|
||||
annualPrice: number;
|
||||
cover: string;
|
||||
tags: string;
|
||||
sort: number;
|
||||
status: number;
|
||||
}
|
||||
Reference in New Issue
Block a user