qyyfw
9ed9961b50
- Frontend: UserPortal.tsx with 5 tabs (Overview, API Keys, Recharge, Tenants, Analytics) - Backend: user_portal.py with 10 endpoints (user profile, API keys, billing, tenants, analytics) - Main.py: register portal router at /app/api/portal - api/index.ts: fix corrupted line, add 29 missing adminAPI methods, export request function - Billing.tsx: fix Package type missing description field - App.tsx: add portal route - All 7 portal API endpoints verified passing (7/7) - API Key creation verified working - Frontend build: 476 modules, 0 errors
210 lines
13 KiB
TypeScript
210 lines
13 KiB
TypeScript
import { useState, useEffect, useCallback } from 'react';
|
|
import { adminAPI } from '@/api';
|
|
|
|
interface Rule { id: string; name: string; billing_type: string; model_name: string; rate: number; free_quota: number; status: string; }
|
|
interface Package { id: string; name: string; description: string; tokens: number; bonus_tokens: number; price: number; original_price: number; is_popular: number; status: string; }
|
|
interface Transaction { id: string; user_id: string; username: string; transaction_type: string; amount: number; tokens: number; status: string; created_at: string; description: string; }
|
|
interface Stats { total_revenue: number; total_consumption: number; total_transactions: number; pending_invoices: number; active_rules: number; active_packages: number; daily_revenue_7d: { date: string; revenue: number }[]; }
|
|
|
|
const Billing: React.FC = () => {
|
|
const [tab, setTab] = useState<'overview' | 'rules' | 'packages' | 'transactions'>('overview');
|
|
const [rules, setRules] = useState<Rule[]>([]);
|
|
const [packages, setPackages] = useState<Package[]>([]);
|
|
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
|
const [total, setTotal] = useState(0);
|
|
const [page, setPage] = useState(1);
|
|
const [stats, setStats] = useState<Stats | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const fetchRules = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await adminAPI.getBillingRules();
|
|
const d = (res as any)?.data || res;
|
|
setRules(d?.items || []);
|
|
} catch (e) { console.error('fetchRules:', e); }
|
|
setLoading(false);
|
|
}, []);
|
|
|
|
const fetchPackages = useCallback(async () => {
|
|
try {
|
|
const res = await adminAPI.getBillingPackages();
|
|
const d = (res as any)?.data || res;
|
|
setPackages(Array.isArray(d) ? d : d?.items || []);
|
|
} catch (e) { console.error('fetchPackages:', e); }
|
|
}, []);
|
|
|
|
const fetchTransactions = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const res = await adminAPI.getBillingTransactions(page);
|
|
const d = (res as any)?.data || res;
|
|
setTransactions(d?.items || []);
|
|
setTotal(d?.total || 0);
|
|
} catch (e) { console.error('fetchTransactions:', e); }
|
|
setLoading(false);
|
|
}, [page]);
|
|
|
|
const fetchStats = useCallback(async () => {
|
|
try {
|
|
const res = await adminAPI.getBillingStats();
|
|
setStats((res as any)?.data || res);
|
|
} catch (e) { console.error('fetchStats:', e); }
|
|
}, []);
|
|
|
|
useEffect(() => { fetchStats(); }, [fetchStats]);
|
|
useEffect(() => { if (tab === 'rules') fetchRules(); }, [tab, fetchRules]);
|
|
useEffect(() => { if (tab === 'packages') fetchPackages(); }, [tab, fetchPackages]);
|
|
useEffect(() => { if (tab === 'transactions') fetchTransactions(); }, [tab, fetchTransactions, page]);
|
|
|
|
const typeColors: Record<string, string> = { per_token: '#6366f1', per_call: '#3b82f6', per_month: '#10b981', hybrid: '#f59e0b' };
|
|
const txColors: Record<string, string> = { recharge: '#10b981', consumption: '#ef4444', refund: '#f59e0b', gift: '#ec4899' };
|
|
|
|
return (
|
|
<div style={{ padding: '24px', color: '#e2e8f0' }}>
|
|
<h1 style={{ fontSize: '24px', fontWeight: 700, marginBottom: '24px' }}>计费与支付管理</h1>
|
|
|
|
{/* Stats */}
|
|
{stats && (
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px', marginBottom: '24px' }}>
|
|
{[
|
|
{ label: '总收入(元)', value: stats.total_revenue?.toFixed(2) || '0.00', color: '#10b981' },
|
|
{ label: '总消费(元)', value: stats.total_consumption?.toFixed(2) || '0.00', color: '#ef4444' },
|
|
{ label: '交易笔数', value: stats.total_transactions || 0, color: '#3b82f6' },
|
|
{ label: '待付账单', value: stats.pending_invoices || 0, color: '#f59e0b' },
|
|
].map((s, i) => (
|
|
<div key={i} style={{ background: '#1e293b', borderRadius: '12px', padding: '20px', border: `1px solid ${s.color}33` }}>
|
|
<div style={{ fontSize: '28px', fontWeight: 800, color: s.color }}>{s.value}</div>
|
|
<div style={{ fontSize: '13px', color: '#94a3b8', marginTop: '4px' }}>{s.label}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Tabs */}
|
|
<div style={{ display: 'flex', gap: '8px', marginBottom: '20px' }}>
|
|
{([['overview', '概览'], ['rules', '计费规则'], ['packages', '充值套餐'], ['transactions', '交易记录']] as const).map(([k, label]) => (
|
|
<button key={k} onClick={() => setTab(k)}
|
|
style={{ padding: '8px 20px', borderRadius: '8px', border: 'none', cursor: 'pointer',
|
|
background: tab === k ? '#6366f1' : '#1e293b', color: tab === k ? '#fff' : '#94a3b8', fontWeight: 600, fontSize: '14px' }}>{label}</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Overview */}
|
|
{tab === 'overview' && stats && (
|
|
<div style={{ background: '#1e293b', borderRadius: '12px', padding: '24px' }}>
|
|
<h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '20px' }}>近7天收入趋势</h3>
|
|
{stats.daily_revenue_7d && stats.daily_revenue_7d.length > 0 ? (
|
|
<div style={{ display: 'flex', alignItems: 'flex-end', gap: '12px', height: '200px', padding: '0 20px' }}>
|
|
{stats.daily_revenue_7d.map((d, i) => {
|
|
const max = Math.max(...stats.daily_revenue_7d.map(r => r.revenue), 1);
|
|
const h = (d.revenue / max) * 160;
|
|
return (
|
|
<div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
|
<div style={{ fontSize: '11px', color: '#94a3b8', marginBottom: '4px' }}>¥{d.revenue.toFixed(0)}</div>
|
|
<div style={{ width: '100%', height: `${h}px`, background: 'linear-gradient(180deg, #6366f1, #818cf8)', borderRadius: '4px 4px 0 0' }} />
|
|
<div style={{ fontSize: '11px', color: '#64748b', marginTop: '6px' }}>{d.date.substring(5)}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : <div style={{ textAlign: 'center', padding: '40px', color: '#64748b' }}>暂无收入数据</div>}
|
|
</div>
|
|
)}
|
|
|
|
{/* Rules */}
|
|
{tab === 'rules' && (
|
|
<table style={{ width: '100%', borderCollapse: 'collapse', background: '#1e293b', borderRadius: '12px', overflow: 'hidden' }}>
|
|
<thead><tr style={{ background: '#0f172a' }}>
|
|
{['规则名称', '计费类型', '关联模型', '单价', '免费额度', '状态'].map(h => (
|
|
<th key={h} style={{ padding: '12px 16px', textAlign: 'left', fontSize: '13px', color: '#94a3b8', fontWeight: 600 }}>{h}</th>
|
|
))}
|
|
</tr></thead>
|
|
<tbody>
|
|
{rules.map(r => (
|
|
<tr key={r.id} style={{ borderBottom: '1px solid #334155' }}>
|
|
<td style={{ padding: '12px 16px', fontSize: '14px', fontWeight: 600 }}>{r.name}</td>
|
|
<td style={{ padding: '12px 16px' }}>
|
|
<span style={{ padding: '2px 10px', borderRadius: '12px', fontSize: '12px', fontWeight: 600, background: `${typeColors[r.billing_type]}22`, color: typeColors[r.billing_type] }}>{r.billing_type}</span>
|
|
</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px', color: '#94a3b8' }}>{r.model_name || '通用'}</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '14px' }}>¥{r.rate.toFixed(6)}</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px', color: '#94a3b8' }}>{r.free_quota?.toLocaleString() || 0}</td>
|
|
<td style={{ padding: '12px 16px' }}>
|
|
<span style={{ color: r.status === 'active' ? '#10b981' : '#64748b', fontSize: '13px' }}>{r.status === 'active' ? '启用' : '停用'}</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
|
|
{/* Packages */}
|
|
{tab === 'packages' && (
|
|
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px' }}>
|
|
{packages.map(p => (
|
|
<div key={p.id} style={{ background: '#1e293b', borderRadius: '16px', padding: '24px', position: 'relative', border: p.is_popular ? '2px solid #6366f1' : '1px solid #334155' }}>
|
|
{p.is_popular === 1 && (
|
|
<div style={{ position: 'absolute', top: '-10px', right: '16px', background: '#6366f1', color: '#fff', padding: '2px 12px', borderRadius: '12px', fontSize: '11px', fontWeight: 700 }}>推荐</div>
|
|
)}
|
|
<h3 style={{ fontSize: '18px', fontWeight: 700, marginBottom: '8px' }}>{p.name}</h3>
|
|
<p style={{ fontSize: '13px', color: '#94a3b8', marginBottom: '16px' }}>{p.description || ''}</p>
|
|
<div style={{ fontSize: '32px', fontWeight: 800, color: '#6366f1' }}>¥{p.price}</div>
|
|
{p.original_price && <div style={{ fontSize: '14px', color: '#64748b', textDecoration: 'line-through' }}>¥{p.original_price}</div>}
|
|
<div style={{ marginTop: '16px', paddingTop: '16px', borderTop: '1px solid #334155', fontSize: '13px', color: '#94a3b8' }}>
|
|
<div>主额度: <span style={{ color: '#e2e8f0', fontWeight: 600 }}>{p.tokens.toLocaleString()}</span> tokens</div>
|
|
{p.bonus_tokens > 0 && <div>赠送: <span style={{ color: '#10b981', fontWeight: 600 }}>{p.bonus_tokens.toLocaleString()}</span> tokens</div>}
|
|
</div>
|
|
<div style={{ marginTop: '12px', fontSize: '12px' }}>
|
|
<span style={{ color: p.status === 'active' ? '#10b981' : '#64748b' }}>{p.status === 'active' ? '● 在售' : '○ 已停用'}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Transactions */}
|
|
{tab === 'transactions' && (
|
|
<>
|
|
{loading ? <div style={{ textAlign: 'center', padding: '40px', color: '#64748b' }}>加载中...</div> : (
|
|
<table style={{ width: '100%', borderCollapse: 'collapse', background: '#1e293b', borderRadius: '12px', overflow: 'hidden' }}>
|
|
<thead><tr style={{ background: '#0f172a' }}>
|
|
{['时间', '用户', '类型', '金额(元)', 'Tokens', '状态', '描述'].map(h => (
|
|
<th key={h} style={{ padding: '12px 16px', textAlign: 'left', fontSize: '13px', color: '#94a3b8', fontWeight: 600 }}>{h}</th>
|
|
))}
|
|
</tr></thead>
|
|
<tbody>
|
|
{transactions.map(t => (
|
|
<tr key={t.id} style={{ borderBottom: '1px solid #334155' }}>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px', color: '#64748b' }}>{t.created_at?.substring(0, 16)}</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '14px' }}>{t.username || t.user_id.substring(0, 8)}</td>
|
|
<td style={{ padding: '12px 16px' }}>
|
|
<span style={{ padding: '2px 10px', borderRadius: '12px', fontSize: '12px', fontWeight: 600, background: `${txColors[t.transaction_type]}22`, color: txColors[t.transaction_type] }}>{t.transaction_type}</span>
|
|
</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '14px', fontWeight: 600, color: t.transaction_type === 'recharge' ? '#10b981' : '#ef4444' }}>{t.amount > 0 ? '+' : ''}{t.amount.toFixed(2)}</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px', color: '#94a3b8' }}>{t.tokens?.toLocaleString() || '-'}</td>
|
|
<td style={{ padding: '12px 16px' }}>
|
|
<span style={{ color: t.status === 'completed' ? '#10b981' : '#f59e0b', fontSize: '13px' }}>{t.status}</span>
|
|
</td>
|
|
<td style={{ padding: '12px 16px', fontSize: '13px', color: '#64748b' }}>{t.description || '-'}</td>
|
|
</tr>
|
|
))}
|
|
{transactions.length === 0 && <tr><td colSpan={7} style={{ padding: '40px', textAlign: 'center', color: '#64748b' }}>暂无交易记录</td></tr>}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
{total > 20 && (
|
|
<div style={{ display: 'flex', justifyContent: 'center', gap: '8px', marginTop: '20px' }}>
|
|
<button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page <= 1} style={{ padding: '6px 16px', borderRadius: '6px', border: '1px solid #475569', background: '#1e293b', color: '#94a3b8', cursor: page <= 1 ? 'not-allowed' : 'pointer' }}>上一页</button>
|
|
<span style={{ padding: '6px 16px', color: '#94a3b8' }}>第 {page} 页</span>
|
|
<button onClick={() => setPage(p => p + 1)} disabled={page * 20 >= total} style={{ padding: '6px 16px', borderRadius: '6px', border: '1px solid #475569', background: '#1e293b', color: '#94a3b8', cursor: page * 20 >= total ? 'not-allowed' : 'pointer' }}>下一页</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Billing;
|