diff --git a/video-gen-admin/src/pages/AdminPaymentStats.tsx b/video-gen-admin/src/pages/AdminPaymentStats.tsx
new file mode 100644
index 00000000..c76030e2
--- /dev/null
+++ b/video-gen-admin/src/pages/AdminPaymentStats.tsx
@@ -0,0 +1,193 @@
+import React, { useEffect, useState } from 'react';
+import {
+ Card, Col, Row, Space, Table, Tag, Typography, Statistic, message,
+} from 'antd';
+import {
+ DollarOutlined, CheckCircleOutlined, ClockCircleOutlined, CloseCircleOutlined,
+} from '@ant-design/icons';
+import { getPaymentStats } from '../api';
+import { formatDate } from '../utils/formatDate';
+
+const AdminPaymentStats: React.FC = () => {
+ const [loading, setLoading] = useState(false);
+ const [stats, setStats] = useState
(null);
+
+ const load = async () => {
+ try {
+ setLoading(true);
+ const data = await getPaymentStats();
+ setStats(data);
+ } catch {
+ message.error('加载支付统计失败');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => { load(); }, []);
+
+ const statusConfig: Record = {
+ paid: { color: 'green', label: '已支付', icon: },
+ pending: { color: 'gold', label: '待支付', icon: },
+ cancelled: { color: 'default', label: '已取消', icon: },
+ };
+
+ const methodConfig: Record = {
+ alipay: { color: 'blue', label: '支付宝' },
+ wechat: { color: 'green', label: '微信' },
+ };
+
+ const columns = [
+ { title: '订单号', dataIndex: 'order_no', key: 'order_no', width: 200 },
+ {
+ title: '支付方式', dataIndex: 'payment_method', key: 'payment_method', width: 100,
+ render: (m: string) => {
+ const c = methodConfig[m] || { color: 'default', label: m };
+ return {c.label};
+ },
+ },
+ {
+ title: '金额', dataIndex: 'amount', key: 'amount', width: 100,
+ render: (a: number) => ¥{a.toFixed(2)},
+ },
+ { title: '积分', dataIndex: 'credits', key: 'credits', width: 80 },
+ {
+ title: '状态', dataIndex: 'status', key: 'status', width: 100,
+ render: (s: string) => {
+ const c = statusConfig[s] || { color: 'default', label: s, icon: null };
+ return {c.label};
+ },
+ },
+ { title: '支付宝交易号', dataIndex: 'trade_no', key: 'trade_no', width: 200, render: (v: string) => v || '-' },
+ {
+ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 160,
+ render: (d: string) => {d ? formatDate(d) : '-'},
+ },
+ {
+ title: '支付时间', dataIndex: 'paid_at', key: 'paid_at', width: 160,
+ render: (d: string) => {d ? formatDate(d) : '-'},
+ },
+ ];
+
+ if (!stats) {
+ return 加载中…
;
+ }
+
+ const paidInfo = stats.by_status?.paid || { count: 0, amount: 0 };
+ const pendingInfo = stats.by_status?.pending || { count: 0, amount: 0 };
+ const cancelledInfo = stats.by_status?.cancelled || { count: 0, amount: 0 };
+ const totalOrders = paidInfo.count + pendingInfo.count + cancelledInfo.count;
+
+ return (
+
+ {/* Summary cards */}
+
+
+
+ }
+ suffix="元"
+ valueStyle={{ color: '#10b981', fontWeight: 700 }}
+ />
+
+ {stats.today.paid_count} 笔订单
+
+
+
+
+
+ }
+ suffix="元"
+ valueStyle={{ color: '#6366f1', fontWeight: 700 }}
+ />
+
+ {paidInfo.count} 笔订单
+
+
+
+
+
+ }
+ suffix="笔"
+ valueStyle={{ color: '#f59e0b', fontWeight: 700 }}
+ />
+
+ ¥{pendingInfo.amount.toFixed(2)} 待付
+
+
+
+
+
+ }
+ suffix="笔"
+ valueStyle={{ color: '#94a3b8', fontWeight: 700 }}
+ />
+
+ ¥{cancelledInfo.amount.toFixed(2)} 已取消
+
+
+
+
+
+ {/* Status breakdown */}
+
订单状态分布}>
+
+ {['paid', 'pending', 'cancelled'].map(s => {
+ const info = stats.by_status?.[s] || { count: 0, amount: 0 };
+ const c = statusConfig[s];
+ const pct = totalOrders > 0 ? ((info.count / totalOrders) * 100).toFixed(1) : '0.0';
+ return (
+
+
+
+ {c.label}
+ {pct}%
+
+
+ {info.count} 笔
+
+
+ ¥{info.amount.toFixed(2)}
+
+
+
+
+ {/* Recent orders table */}
+
最近 50 笔订单}>
+
+
+