416 lines
13 KiB
TypeScript
416 lines
13 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Card, Col, Row, Typography, DatePicker, Button, Space } from 'antd';
|
|
import {
|
|
UserOutlined,
|
|
ProjectOutlined,
|
|
PlayCircleOutlined,
|
|
FileTextOutlined,
|
|
DollarOutlined,
|
|
WalletOutlined,
|
|
ArrowUpOutlined,
|
|
CalendarOutlined,
|
|
} from '@ant-design/icons';
|
|
import { getAdminStats, getSystemConfigs } from '../api';
|
|
import type { AdminStats, SystemConfig } from '../types';
|
|
import dayjs from 'dayjs';
|
|
import 'dayjs/locale/zh-cn';
|
|
|
|
dayjs.locale('zh-cn');
|
|
|
|
const AdminDashboard: React.FC = () => {
|
|
const [stats, setStats] = useState<AdminStats | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [startDate, setStartDate] = useState<[dayjs.Dayjs | null, dayjs.Dayjs | null]>([dayjs().startOf('day'), dayjs()]);
|
|
const [siteName, setSiteName] = useState<string>('数据概览');
|
|
|
|
const load = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const start = startDate[0]?.format('YYYY-MM-DD') || undefined;
|
|
const end = startDate[1]?.format('YYYY-MM-DD') || undefined;
|
|
const data = await getAdminStats(start, end);
|
|
setStats(data);
|
|
} catch { /* auth error handled by client */ }
|
|
setLoading(false);
|
|
};
|
|
|
|
const loadSiteName = async () => {
|
|
try {
|
|
const configs = await getSystemConfigs();
|
|
const siteConfig = configs.find((c: SystemConfig) => c.key === 'site_name');
|
|
if (siteConfig) {
|
|
const title = `${siteConfig.value} 管理后台`;
|
|
setSiteName(title);
|
|
document.title = title;
|
|
}
|
|
} catch {
|
|
setSiteName('数据概览');
|
|
document.title = '数据概览';
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
load();
|
|
loadSiteName();
|
|
}, []);
|
|
|
|
const handleToday = () => {
|
|
const dates: [dayjs.Dayjs, dayjs.Dayjs] = [dayjs().startOf('day'), dayjs()];
|
|
setStartDate(dates);
|
|
loadWithDates(dates);
|
|
};
|
|
|
|
const handleYesterday = () => {
|
|
const yesterday = dayjs().subtract(1, 'day');
|
|
const dates: [dayjs.Dayjs, dayjs.Dayjs] = [yesterday.startOf('day'), yesterday.endOf('day')];
|
|
setStartDate(dates);
|
|
loadWithDates(dates);
|
|
};
|
|
|
|
const handleWeek = () => {
|
|
const dates: [dayjs.Dayjs, dayjs.Dayjs] = [dayjs().startOf('week'), dayjs()];
|
|
setStartDate(dates);
|
|
loadWithDates(dates);
|
|
};
|
|
|
|
const handleMonth = () => {
|
|
const dates: [dayjs.Dayjs, dayjs.Dayjs] = [dayjs().startOf('month'), dayjs()];
|
|
setStartDate(dates);
|
|
loadWithDates(dates);
|
|
};
|
|
|
|
const loadWithDates = (dates: [dayjs.Dayjs, dayjs.Dayjs]) => {
|
|
const start = dates[0]?.format('YYYY-MM-DD') || undefined;
|
|
const end = dates[1]?.format('YYYY-MM-DD') || undefined;
|
|
setLoading(true);
|
|
getAdminStats(start, end).then(data => {
|
|
setStats(data);
|
|
setLoading(false);
|
|
}).catch(() => {
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
const handleDateChange = (dates: any) => {
|
|
if (dates) {
|
|
setStartDate([dates[0], dates[1]]);
|
|
loadWithDates([dates[0], dates[1]]);
|
|
}
|
|
};
|
|
|
|
const baseStats = stats ? [
|
|
{
|
|
title: '用户数量',
|
|
value: stats.totalUsers,
|
|
lastPeriodValue: stats.lastPeriodUsers,
|
|
icon: <UserOutlined />,
|
|
gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
prefix: '',
|
|
suffix: '位用户',
|
|
description: '平台注册用户总数'
|
|
},
|
|
{
|
|
title: '总项目数',
|
|
value: stats.totalProjects,
|
|
lastPeriodValue: stats.lastPeriodProjects,
|
|
icon: <ProjectOutlined />,
|
|
gradient: 'linear-gradient(135deg, #00d4ff 0%, #0099cc 100%)',
|
|
prefix: '',
|
|
suffix: '个项目',
|
|
description: '创建的项目总数'
|
|
},
|
|
{
|
|
title: '项目记录',
|
|
value: stats.totalRecords,
|
|
lastPeriodValue: stats.lastPeriodRecords,
|
|
icon: <FileTextOutlined />,
|
|
gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
|
prefix: '',
|
|
suffix: '条记录',
|
|
description: '项目记录总数'
|
|
},
|
|
{
|
|
title: '创作记录',
|
|
value: stats.totalGenerations,
|
|
lastPeriodValue: stats.lastPeriodGenerations,
|
|
icon: <PlayCircleOutlined />,
|
|
gradient: 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)',
|
|
prefix: '',
|
|
suffix: '次创作',
|
|
description: 'AI创作记录总数'
|
|
},
|
|
] : [];
|
|
|
|
const financeStats = stats ? [
|
|
{
|
|
title: '支付宝收入',
|
|
value: stats.todayAlipayRevenue,
|
|
icon: <WalletOutlined />,
|
|
gradient: 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)',
|
|
prefix: '¥',
|
|
suffix: '',
|
|
description: '支付宝收款',
|
|
tag: '支付宝'
|
|
},
|
|
{
|
|
title: '微信收入',
|
|
value: stats.todayWechatRevenue,
|
|
icon: <DollarOutlined />,
|
|
gradient: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
|
|
prefix: '¥',
|
|
suffix: '',
|
|
description: '微信收款',
|
|
tag: '微信支付'
|
|
},
|
|
{
|
|
title: '总收入',
|
|
value: stats.totalRevenue,
|
|
lastPeriodValue: stats.lastPeriodRevenue,
|
|
icon: <ArrowUpOutlined />,
|
|
gradient: 'linear-gradient(135deg, #ec4899 0%, #be185d 100%)',
|
|
prefix: '¥',
|
|
suffix: '',
|
|
description: '平台总收入',
|
|
tag: '总收入'
|
|
},
|
|
{
|
|
title: '消耗积分',
|
|
value: stats.creditsConsumedToday,
|
|
lastPeriodValue: stats.lastPeriodCreditsConsumed,
|
|
icon: <DollarOutlined />,
|
|
gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
|
|
prefix: '',
|
|
suffix: '积分',
|
|
description: '用户消耗积分',
|
|
tag: '积分消耗'
|
|
},
|
|
] : [];
|
|
|
|
const StatCard: React.FC<{
|
|
title: string;
|
|
value: number;
|
|
lastPeriodValue?: number;
|
|
icon: React.ReactNode;
|
|
gradient: string;
|
|
prefix?: string;
|
|
suffix?: string;
|
|
description?: string;
|
|
tag?: string;
|
|
}> = ({ title, value, lastPeriodValue, icon, gradient, prefix = '', suffix = '', description, tag }) => {
|
|
const change = lastPeriodValue !== undefined && lastPeriodValue > 0
|
|
? ((value - lastPeriodValue) / lastPeriodValue * 100).toFixed(1)
|
|
: null;
|
|
const isPositive = change !== null && parseFloat(change) >= 0;
|
|
|
|
return (
|
|
<Card
|
|
bordered={false}
|
|
loading={loading}
|
|
hoverable
|
|
style={{
|
|
borderRadius: 16,
|
|
border: '1px solid rgba(0,0,0,0.04)',
|
|
background: '#ffffff',
|
|
boxShadow: '0 4px 20px rgba(0,0,0,0.05)',
|
|
transition: 'all 0.3s ease',
|
|
overflow: 'hidden'
|
|
}}
|
|
>
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 16,
|
|
padding: '16px 0'
|
|
}}>
|
|
<div style={{
|
|
width: 52,
|
|
height: 52,
|
|
borderRadius: 14,
|
|
background: gradient,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: 24,
|
|
color: '#fff',
|
|
flexShrink: 0,
|
|
boxShadow: '0 8px 24px rgba(0,0,0,0.1)',
|
|
}}>
|
|
{icon}
|
|
</div>
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
marginBottom: 4
|
|
}}>
|
|
<Typography.Text style={{ color: '#64748b', fontSize: 13 }}>{title}</Typography.Text>
|
|
{tag && (
|
|
<span style={{
|
|
fontSize: 10,
|
|
padding: '2px 8px',
|
|
borderRadius: 10,
|
|
background: 'rgba(99,102,241,0.1)',
|
|
color: '#6366f1',
|
|
fontWeight: 500
|
|
}}>
|
|
{tag}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div style={{
|
|
fontSize: 28,
|
|
fontWeight: 800,
|
|
color: '#1e293b',
|
|
letterSpacing: -0.5,
|
|
marginBottom: 2
|
|
}}>
|
|
{prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
|
|
</div>
|
|
{description && (
|
|
<Typography.Text style={{ color: '#94a3b8', fontSize: 11 }}>
|
|
{description}
|
|
</Typography.Text>
|
|
)}
|
|
{change !== null && lastPeriodValue !== undefined && (
|
|
<div style={{
|
|
marginTop: 8,
|
|
paddingTop: 8,
|
|
borderTop: '1px solid #f1f5f9',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 8
|
|
}}>
|
|
<Typography.Text style={{ color: '#94a3b8', fontSize: 11 }}>
|
|
上一周期: {prefix}{lastPeriodValue.toLocaleString()}{suffix}
|
|
</Typography.Text>
|
|
<span style={{
|
|
fontSize: 11,
|
|
fontWeight: 500,
|
|
color: isPositive ? '#10b981' : '#ef4444',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 2
|
|
}}>
|
|
{isPositive ? '↑' : '↓'} {Math.abs(parseFloat(change))}%
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div style={{ padding: 0 }}>
|
|
<div style={{
|
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
|
padding: '24px 24px 32px',
|
|
borderRadius: 0,
|
|
marginBottom: -24,
|
|
position: 'relative',
|
|
overflow: 'hidden'
|
|
}}>
|
|
<div style={{
|
|
position: 'absolute',
|
|
top: -50,
|
|
right: -50,
|
|
width: 200,
|
|
height: 200,
|
|
background: 'rgba(255,255,255,0.1)',
|
|
borderRadius: '50%'
|
|
}} />
|
|
<div style={{
|
|
position: 'absolute',
|
|
bottom: -30,
|
|
left: -30,
|
|
width: 150,
|
|
height: 150,
|
|
background: 'rgba(255,255,255,0.08)',
|
|
borderRadius: '50%'
|
|
}} />
|
|
<div style={{ position: 'relative', zIndex: 1 }}>
|
|
<Typography.Title level={2} style={{ color: '#fff', marginBottom: 4, fontWeight: 700 }}>
|
|
{siteName}
|
|
</Typography.Title>
|
|
<Typography.Text style={{ color: 'rgba(255,255,255,0.8)', fontSize: 14 }}>
|
|
欢迎回来，查看平台运营数据统计
|
|
</Typography.Text>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ marginTop: 40 }}>
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 16 }}>
|
|
<Space>
|
|
<Button
|
|
type={!startDate[0] || !startDate[1] || startDate[0]?.isSame(dayjs().startOf('day')) && startDate[1]?.isSame(dayjs(), 'day') ? 'primary' : 'default'}
|
|
size="small"
|
|
onClick={handleToday}
|
|
>
|
|
今日
|
|
</Button>
|
|
<Button
|
|
type="default"
|
|
size="small"
|
|
onClick={handleYesterday}
|
|
>
|
|
昨日
|
|
</Button>
|
|
<Button
|
|
type="default"
|
|
size="small"
|
|
onClick={handleWeek}
|
|
>
|
|
本周
|
|
</Button>
|
|
<Button
|
|
type="default"
|
|
size="small"
|
|
onClick={handleMonth}
|
|
>
|
|
本月
|
|
</Button>
|
|
</Space>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, background: '#fff', border: '1px solid #e2e8f0', padding: '6px 12px', borderRadius: 8, boxShadow: '0 1px 2px rgba(0,0,0,0.05)' }}>
|
|
<CalendarOutlined style={{ color: '#64748b', fontSize: 14 }} />
|
|
<DatePicker.RangePicker
|
|
value={startDate}
|
|
onChange={handleDateChange}
|
|
placeholder={['开始日期', '结束日期']}
|
|
size="small"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div style={{ marginBottom: 16, paddingLeft: 4 }}>
|
|
<Typography.Text strong style={{ color: '#1e293b', fontSize: 15 }}>核心数据</Typography.Text>
|
|
<Typography.Text style={{ color: '#94a3b8', fontSize: 12, marginLeft: 8 }}>平台基础运营指标</Typography.Text>
|
|
</div>
|
|
<Row gutter={[16, 16]}>
|
|
{baseStats.map((s) => (
|
|
<Col xs={12} sm={8} lg={6} key={s.title}>
|
|
<StatCard {...s} />
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
</div>
|
|
|
|
<div style={{ marginTop: 24 }}>
|
|
<div style={{ marginBottom: 16, paddingLeft: 4 }}>
|
|
<Typography.Text strong style={{ color: '#1e293b', fontSize: 15 }}>财务统计</Typography.Text>
|
|
<Typography.Text style={{ color: '#94a3b8', fontSize: 12, marginLeft: 8 }}>收入与消耗数据</Typography.Text>
|
|
</div>
|
|
<Row gutter={[16, 16]}>
|
|
{financeStats.map((s) => (
|
|
<Col xs={12} sm={8} lg={6} key={s.title}>
|
|
<StatCard {...s} />
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdminDashboard;
|