681 lines
38 KiB
TypeScript
681 lines
38 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
||
import { adminAPI } from '@/api';
|
||
|
||
const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ children, size = 16 }) => (
|
||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
{children}
|
||
</svg>
|
||
);
|
||
|
||
const levelColors: Record<number, { bg: string; accent: string; label: string }> = {
|
||
0: { bg: 'var(--color-bg-tertiary)', accent: 'var(--color-text-secondary)', label: '免费版' },
|
||
1: { bg: 'rgba(99,102,241,0.1)', accent: '#818cf8', label: '基础版' },
|
||
2: { bg: 'rgba(34,197,94,0.1)', accent: '#22c55e', label: '专业版' },
|
||
3: { bg: 'rgba(245,158,11,0.1)', accent: '#f59e0b', label: '企业版' },
|
||
};
|
||
|
||
const Toggle: React.FC<{ checked: boolean; onChange: (v: boolean) => void }> = ({ checked, onChange }) => (
|
||
<button
|
||
onClick={() => onChange(!checked)}
|
||
style={{
|
||
width: 44, height: 24, borderRadius: 12, border: 'none',
|
||
background: checked ? 'var(--color-accent)' : 'var(--color-text-disabled)',
|
||
cursor: 'pointer', position: 'relative', transition: 'background 0.2s', flexShrink: 0,
|
||
}}
|
||
>
|
||
<span style={{
|
||
position: 'absolute', top: 3, left: checked ? 22 : 3,
|
||
width: 18, height: 18, borderRadius: '50%', background: '#fff',
|
||
transition: 'left 0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
|
||
}} />
|
||
</button>
|
||
);
|
||
|
||
interface Plan {
|
||
id: string; name: string; level: number; duration_type: string; price: number;
|
||
daily_free_tokens: number; features: string[]; free_app_ids: string[]; free_model_ids: string[];
|
||
is_active: boolean;
|
||
max_agents: number; max_workflows: number; max_knowledge_bases: number; max_storage_mb: number;
|
||
api_calls_per_day: number; api_calls_per_min: number;
|
||
can_publish_apps: boolean; can_create_api_keys: boolean; can_use_workflow: boolean;
|
||
can_use_mcp: boolean; can_use_code_exec: boolean; can_use_privacy_mode: boolean; can_use_dag: boolean;
|
||
allowed_model_tiers: string[]; permissions: Record<string, any>;
|
||
}
|
||
|
||
interface UserMembership {
|
||
user_id: string; username: string; email: string;
|
||
membership_plan_id: string; membership_plan_name: string; membership_level: number;
|
||
membership_expire_at: string; auto_renew: boolean; member_status: string;
|
||
}
|
||
|
||
interface GlobalConfig {
|
||
id: string; key: string; value: any; type: string; description: string;
|
||
}
|
||
|
||
const Membership: React.FC = () => {
|
||
const [activeTab, setActiveTab] = useState<'plans' | 'benefits' | 'users' | 'configs' | 'stats'>('plans');
|
||
const [plans, setPlans] = useState<Plan[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [editingPlan, setEditingPlan] = useState<Plan | null>(null);
|
||
const [showModal, setShowModal] = useState(false);
|
||
const [showAssignModal, setShowAssignModal] = useState(false);
|
||
const [assignUserId, setAssignUserId] = useState('');
|
||
const [assignPlanId, setAssignPlanId] = useState('');
|
||
const [assignDays, setAssignDays] = useState(30);
|
||
|
||
// User memberships
|
||
const [userMemberships, setUserMemberships] = useState<UserMembership[]>([]);
|
||
const [userTotal, setUserTotal] = useState(0);
|
||
const [userPage, setUserPage] = useState(1);
|
||
|
||
// Configs
|
||
const [configs, setConfigs] = useState<GlobalConfig[]>([]);
|
||
|
||
// Stats
|
||
const [stats, setStats] = useState<any>(null);
|
||
|
||
const fetchPlans = useCallback(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const res = await adminAPI.getPlans();
|
||
setPlans(Array.isArray(res.data) ? res.data : (Array.isArray(res) ? res : []));
|
||
} catch (e) { console.error('fetchPlans:', e); }
|
||
setLoading(false);
|
||
}, []);
|
||
|
||
const fetchUserMemberships = useCallback(async () => {
|
||
try {
|
||
const res = await adminAPI.getUserMemberships(userPage);
|
||
const d = res.data || res;
|
||
setUserMemberships(d?.items || []);
|
||
setUserTotal(d?.total || 0);
|
||
} catch (e) { console.error('fetchUserMemberships:', e); }
|
||
}, [userPage]);
|
||
|
||
const fetchConfigs = useCallback(async () => {
|
||
try {
|
||
const res = await adminAPI.getMembershipConfigs();
|
||
setConfigs(Array.isArray(res.data) ? res.data : (Array.isArray(res) ? res : []));
|
||
} catch (e) { console.error('fetchConfigs:', e); }
|
||
}, []);
|
||
|
||
const fetchStats = useCallback(async () => {
|
||
try {
|
||
const res = await adminAPI.getMembershipStats();
|
||
setStats(res.data || res);
|
||
} catch (e) { console.error('fetchStats:', e); }
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
fetchPlans();
|
||
}, [fetchPlans]);
|
||
|
||
useEffect(() => {
|
||
if (activeTab === 'users') fetchUserMemberships();
|
||
if (activeTab === 'configs') fetchConfigs();
|
||
if (activeTab === 'stats') fetchStats();
|
||
}, [activeTab, fetchUserMemberships, fetchConfigs, fetchStats]);
|
||
|
||
// ===================== Plan Edit Form =====================
|
||
const emptyForm: Plan = {
|
||
id: '', name: '', level: 0, duration_type: 'month', price: 0, daily_free_tokens: 0,
|
||
features: [], free_app_ids: [], free_model_ids: [], is_active: true,
|
||
max_agents: 5, max_workflows: 3, max_knowledge_bases: 2, max_storage_mb: 1024,
|
||
api_calls_per_day: 100, api_calls_per_min: 10,
|
||
can_publish_apps: false, can_create_api_keys: false, can_use_workflow: false,
|
||
can_use_mcp: false, can_use_code_exec: false, can_use_privacy_mode: false, can_use_dag: false,
|
||
allowed_model_tiers: ['free'], permissions: {},
|
||
};
|
||
const [form, setForm] = useState<Plan>(emptyForm);
|
||
const [newFeature, setNewFeature] = useState('');
|
||
|
||
const handleEdit = (plan: Plan) => {
|
||
setEditingPlan(plan);
|
||
setForm({ ...plan });
|
||
setShowModal(true);
|
||
};
|
||
|
||
const handleCreate = () => {
|
||
setEditingPlan(null);
|
||
setForm({ ...emptyForm });
|
||
setShowModal(true);
|
||
};
|
||
|
||
const handleSave = async () => {
|
||
try {
|
||
const params = new URLSearchParams();
|
||
Object.keys(form).forEach(k => {
|
||
if (k === 'id' || k === 'created_at' || k === 'updated_at') return;
|
||
const val = (form as any)[k];
|
||
if (val === null || val === undefined) return;
|
||
if (typeof val === 'boolean') params.append(k, String(val));
|
||
else if (Array.isArray(val)) params.append(k, JSON.stringify(val));
|
||
else if (typeof val === 'object') params.append(k, JSON.stringify(val));
|
||
else params.append(k, String(val));
|
||
});
|
||
if (editingPlan) {
|
||
await adminAPI.updatePlan(editingPlan.id, `?${params.toString()}`);
|
||
} else {
|
||
await adminAPI.addPlan(`?${params.toString()}`);
|
||
}
|
||
setShowModal(false);
|
||
fetchPlans();
|
||
} catch (e) { console.error('handleSave:', e); alert('保存失败: ' + (e as any)?.message); }
|
||
};
|
||
|
||
const handleDelete = async (id: string) => {
|
||
if (!confirm('确定删除此会员计划？')) return;
|
||
try {
|
||
await adminAPI.deletePlan(id);
|
||
fetchPlans();
|
||
} catch (e) { alert('删除失败: ' + (e as any)?.message); }
|
||
};
|
||
|
||
const addFeature = () => {
|
||
if (newFeature.trim()) {
|
||
setForm({ ...form, features: [...form.features, newFeature.trim()] });
|
||
setNewFeature('');
|
||
}
|
||
};
|
||
|
||
const toggleModelTier = (tier: string) => {
|
||
setForm(prev => ({
|
||
...prev,
|
||
allowed_model_tiers: prev.allowed_model_tiers.includes(tier)
|
||
? prev.allowed_model_tiers.filter(t => t !== tier)
|
||
: [...prev.allowed_model_tiers, tier],
|
||
}));
|
||
};
|
||
|
||
// ===================== Assign Plan =====================
|
||
const handleAssignPlan = async () => {
|
||
if (!assignUserId || !assignPlanId) { alert('请填写用户ID和选择计划'); return; }
|
||
try {
|
||
await adminAPI.assignPlan(assignUserId, assignPlanId, assignDays);
|
||
setShowAssignModal(false);
|
||
setAssignUserId(''); setAssignPlanId(''); setAssignDays(30);
|
||
fetchUserMemberships();
|
||
} catch (e) { alert('分配失败: ' + (e as any)?.message); }
|
||
};
|
||
|
||
const handleRevoke = async (userId: string, username: string) => {
|
||
if (!confirm(`确定撤销 ${username} 的会员？`)) return;
|
||
try {
|
||
await adminAPI.revokeMembership(userId);
|
||
fetchUserMemberships();
|
||
} catch (e) { alert('撤销失败: ' + (e as any)?.message); }
|
||
};
|
||
|
||
const handleUpdateConfig = async (key: string, value: any) => {
|
||
try {
|
||
const params = new URLSearchParams();
|
||
params.append('value', String(value));
|
||
await adminAPI.updateMembershipConfig(key, `?${params.toString()}`);
|
||
fetchConfigs();
|
||
} catch (e) { alert('更新失败: ' + (e as any)?.message); }
|
||
};
|
||
|
||
// ===================== Render =====================
|
||
const tabs = [
|
||
{ key: 'plans', label: '会员计划', icon: <><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/></> },
|
||
{ key: 'benefits', label: '权益对比', icon: <><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="3" y1="9" x2="21" y2="9"/></> },
|
||
{ key: 'users', label: '用户会员', icon: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/></> },
|
||
{ key: 'configs', label: '全局配置', icon: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></> },
|
||
{ key: 'stats', label: '统计概览', icon: <><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></> },
|
||
];
|
||
|
||
const inputStyle: React.CSSProperties = {
|
||
background: 'var(--color-bg-secondary)', border: '1px solid var(--color-border)',
|
||
borderRadius: 'var(--radius-md)', padding: '8px 12px', color: 'var(--color-text)',
|
||
fontSize: 'var(--text-sm)', width: '100%', outline: 'none',
|
||
};
|
||
const labelStyle: React.CSSProperties = {
|
||
fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)', fontWeight: 600, marginBottom: 4, display: 'block',
|
||
};
|
||
const sectionStyle: React.CSSProperties = {
|
||
padding: 'var(--space-lg)', borderBottom: '1px solid var(--color-border)',
|
||
};
|
||
|
||
return (
|
||
<div style={{ animation: 'fadeIn var(--transition-normal)' }}>
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-xl)' }}>
|
||
<h1 className="admin-page-title">会员订阅体系管理</h1>
|
||
{activeTab === 'plans' && (
|
||
<button className="admin-btn admin-btn-primary" onClick={handleCreate}>
|
||
<SVGIcon size={14}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></SVGIcon>
|
||
新建计划
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div style={{ display: 'flex', gap: 2, marginBottom: 'var(--space-xl)', borderBottom: '1px solid var(--color-border)' }}>
|
||
{tabs.map(tab => (
|
||
<button
|
||
key={tab.key}
|
||
onClick={() => setActiveTab(tab.key as any)}
|
||
style={{
|
||
padding: '10px 20px', border: 'none', cursor: 'pointer',
|
||
background: activeTab === tab.key ? 'var(--color-bg-secondary)' : 'transparent',
|
||
color: activeTab === tab.key ? 'var(--color-accent)' : 'var(--color-text-secondary)',
|
||
fontSize: 'var(--text-sm)', fontWeight: activeTab === tab.key ? 600 : 400,
|
||
borderBottom: activeTab === tab.key ? '2px solid var(--color-accent)' : '2px solid transparent',
|
||
transition: 'all 0.2s', display: 'flex', alignItems: 'center', gap: 6,
|
||
}}
|
||
>
|
||
<SVGIcon size={14}>{tab.icon}</SVGIcon>
|
||
{tab.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* ===================== Plans Tab ===================== */}
|
||
{activeTab === 'plans' && (
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 'var(--space-xl)' }}>
|
||
{plans.map((plan) => {
|
||
const colors = levelColors[plan.level] || levelColors[0];
|
||
return (
|
||
<div key={plan.id} className="admin-card" style={{ marginBottom: 0, borderTop: `3px solid ${colors.accent}` }}>
|
||
<div className="admin-card-header">
|
||
<div>
|
||
<span className="admin-badge" style={{ background: colors.bg, color: colors.accent, marginBottom: 4 }}>
|
||
{colors.label} · Level {plan.level}
|
||
</span>
|
||
<h3 style={{ fontSize: 'var(--text-lg)', fontWeight: 700, marginTop: 4 }}>{plan.name}</h3>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 4 }}>
|
||
<button className="admin-btn admin-btn-outline admin-btn-sm" onClick={() => handleEdit(plan)}>
|
||
<SVGIcon size={12}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></SVGIcon>
|
||
</button>
|
||
<button className="admin-btn admin-btn-outline admin-btn-sm" style={{ color: '#ef4444' }} onClick={() => handleDelete(plan.id)}>
|
||
<SVGIcon size={12}><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></SVGIcon>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Price */}
|
||
<div style={{ display: 'flex', gap: 'var(--space-md)', marginBottom: 'var(--space-lg)' }}>
|
||
<div style={{ flex: 1, textAlign: 'center', padding: 'var(--space-sm)', background: 'var(--color-bg-tertiary)', borderRadius: 'var(--radius-md)' }}>
|
||
<div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>价格</div>
|
||
<div style={{ fontSize: 'var(--text-lg)', fontWeight: 700, color: colors.accent }}>¥{plan.price}</div>
|
||
</div>
|
||
<div style={{ flex: 1, textAlign: 'center', padding: 'var(--space-sm)', background: 'var(--color-bg-tertiary)', borderRadius: 'var(--radius-md)' }}>
|
||
<div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>每日Token</div>
|
||
<div style={{ fontSize: 'var(--text-lg)', fontWeight: 700, color: colors.accent }}>{plan.daily_free_tokens?.toLocaleString()}</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quotas */}
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6, marginBottom: 'var(--space-md)' }}>
|
||
{[
|
||
{ label: 'Agent', value: plan.max_agents },
|
||
{ label: '工作流', value: plan.max_workflows },
|
||
{ label: '知识库', value: plan.max_knowledge_bases },
|
||
{ label: '存储(MB)', value: plan.max_storage_mb },
|
||
{ label: 'API/日', value: plan.api_calls_per_day },
|
||
{ label: 'API/分', value: plan.api_calls_per_min },
|
||
].map((item, i) => (
|
||
<div key={i} style={{ padding: '6px 8px', background: 'var(--color-bg-tertiary)', borderRadius: 'var(--radius-sm)', textAlign: 'center' }}>
|
||
<div style={{ fontSize: 'var(--text-2xs)', color: 'var(--color-text-tertiary)' }}>{item.label}</div>
|
||
<div style={{ fontSize: 'var(--text-sm)', fontWeight: 600 }}>{item.value >= 999 ? '∞' : item.value?.toLocaleString()}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Permissions */}
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 'var(--space-md)' }}>
|
||
{[
|
||
{ key: 'can_publish_apps', label: '发布应用' },
|
||
{ key: 'can_create_api_keys', label: 'API密钥' },
|
||
{ key: 'can_use_workflow', label: '工作流' },
|
||
{ key: 'can_use_mcp', label: 'MCP' },
|
||
{ key: 'can_use_code_exec', label: '代码执行' },
|
||
{ key: 'can_use_privacy_mode', label: '隐私模式' },
|
||
{ key: 'can_use_dag', label: 'DAG' },
|
||
].map(perm => {
|
||
const enabled = (plan as any)[perm.key];
|
||
return enabled ? (
|
||
<span key={perm.key} className="admin-badge" style={{ background: 'rgba(34,197,94,0.1)', color: '#22c55e', fontSize: 'var(--text-2xs)' }}>
|
||
✓ {perm.label}
|
||
</span>
|
||
) : (
|
||
<span key={perm.key} className="admin-badge" style={{ background: 'var(--color-bg-tertiary)', color: 'var(--color-text-tertiary)', fontSize: 'var(--text-2xs)' }}>
|
||
✗ {perm.label}
|
||
</span>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* Features */}
|
||
{plan.features && plan.features.length > 0 && (
|
||
<div>
|
||
<div style={{ fontSize: 'var(--text-xs)', fontWeight: 600, marginBottom: 4, color: 'var(--color-text-secondary)' }}>会员权益</div>
|
||
<ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||
{plan.features.map((f, i) => (
|
||
<li key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)' }}>
|
||
<SVGIcon size={12}><polyline points="20 6 9 17 4 12"/></SVGIcon>
|
||
{f}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{/* ===================== Benefits Comparison Tab ===================== */}
|
||
{activeTab === 'benefits' && (
|
||
<div className="admin-card" style={{ overflowX: 'auto' }}>
|
||
<table className="admin-table">
|
||
<thead>
|
||
<tr>
|
||
<th style={{ minWidth: 160 }}>权益项</th>
|
||
{plans.map(p => {
|
||
const c = levelColors[p.level] || levelColors[0];
|
||
return <th key={p.id} style={{ textAlign: 'center', minWidth: 120 }}>
|
||
<span className="admin-badge" style={{ background: c.bg, color: c.accent }}>{p.name}</span>
|
||
</th>;
|
||
})}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{[
|
||
{ key: 'price', label: '月价格(元)', type: 'number' },
|
||
{ key: 'daily_free_tokens', label: '每日免费Token', type: 'number' },
|
||
{ key: 'max_agents', label: '最大Agent数', type: 'number' },
|
||
{ key: 'max_workflows', label: '最大工作流数', type: 'number' },
|
||
{ key: 'max_knowledge_bases', label: '最大知识库数', type: 'number' },
|
||
{ key: 'max_storage_mb', label: '存储配额(MB)', type: 'number' },
|
||
{ key: 'api_calls_per_day', label: '每日API限额', type: 'number' },
|
||
{ key: 'api_calls_per_min', label: '每分钟API限额', type: 'number' },
|
||
{ key: 'can_publish_apps', label: '发布应用到市场', type: 'boolean' },
|
||
{ key: 'can_create_api_keys', label: '创建开发者API密钥', type: 'boolean' },
|
||
{ key: 'can_use_workflow', label: '工作流编排', type: 'boolean' },
|
||
{ key: 'can_use_mcp', label: 'MCP工具', type: 'boolean' },
|
||
{ key: 'can_use_code_exec', label: '代码执行', type: 'boolean' },
|
||
{ key: 'can_use_privacy_mode', label: '隐私模式', type: 'boolean' },
|
||
{ key: 'can_use_dag', label: 'DAG多Agent', type: 'boolean' },
|
||
{ key: 'allowed_model_tiers', label: '可用模型层级', type: 'list' },
|
||
].map(row => (
|
||
<tr key={row.key}>
|
||
<td style={{ fontWeight: 600 }}>{row.label}</td>
|
||
{plans.map(p => {
|
||
const val = (p as any)[row.key];
|
||
let display;
|
||
if (row.type === 'boolean') {
|
||
display = val ? <span style={{ color: '#22c55e' }}>✓</span> : <span style={{ color: 'var(--color-text-tertiary)' }}>✗</span>;
|
||
} else if (row.type === 'number') {
|
||
display = val >= 999 ? '不限' : (val?.toLocaleString() || '0');
|
||
} else if (row.type === 'list') {
|
||
display = Array.isArray(val) ? val.join(', ') : '-';
|
||
} else {
|
||
display = String(val ?? '-');
|
||
}
|
||
return <td key={p.id} style={{ textAlign: 'center', fontFamily: row.type === 'number' ? 'var(--font-mono)' : 'inherit' }}>{display}</td>;
|
||
})}
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
)}
|
||
|
||
{/* ===================== Users Tab ===================== */}
|
||
{activeTab === 'users' && (
|
||
<div>
|
||
<div style={{ marginBottom: 'var(--space-lg)', display: 'flex', justifyContent: 'flex-end' }}>
|
||
<button className="admin-btn admin-btn-primary" onClick={() => setShowAssignModal(true)}>
|
||
<SVGIcon size={14}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></SVGIcon>
|
||
分配会员
|
||
</button>
|
||
</div>
|
||
<div className="admin-card" style={{ overflowX: 'auto' }}>
|
||
<table className="admin-table">
|
||
<thead>
|
||
<tr>
|
||
<th>用户名</th><th>邮箱</th><th>会员计划</th><th>等级</th>
|
||
<th>到期时间</th><th>自动续费</th><th>状态</th><th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{userMemberships.length === 0 ? (
|
||
<tr><td colSpan={8} style={{ textAlign: 'center', padding: 'var(--space-2xl)', color: 'var(--color-text-tertiary)' }}>暂无数据</td></tr>
|
||
) : userMemberships.map(u => (
|
||
<tr key={u.user_id}>
|
||
<td style={{ fontWeight: 600 }}>{u.username}</td>
|
||
<td>{u.email || '-'}</td>
|
||
<td>{u.membership_plan_name}</td>
|
||
<td>Level {u.membership_level}</td>
|
||
<td>{u.membership_expire_at ? new Date(u.membership_expire_at).toLocaleString('zh-CN') : '-'}</td>
|
||
<td>{u.auto_renew ? '✓' : '✗'}</td>
|
||
<td>
|
||
<span className={`admin-badge ${u.member_status === 'active' ? 'badge-success' : u.member_status === 'expired' ? 'badge-danger' : 'badge-neutral'}`}>
|
||
{u.member_status === 'active' ? '活跃' : u.member_status === 'expired' ? '已过期' : '免费'}
|
||
</span>
|
||
</td>
|
||
<td>
|
||
{u.membership_level > 0 && (
|
||
<button className="admin-btn admin-btn-outline admin-btn-sm" style={{ color: '#ef4444' }} onClick={() => handleRevoke(u.user_id, u.username)}>
|
||
撤销
|
||
</button>
|
||
)}
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{userTotal > 20 && (
|
||
<div style={{ display: 'flex', justifyContent: 'center', gap: 'var(--space-md)', marginTop: 'var(--space-lg)' }}>
|
||
<button className="admin-btn admin-btn-outline admin-btn-sm" disabled={userPage <= 1} onClick={() => setUserPage(p => p - 1)}>上一页</button>
|
||
<span style={{ lineHeight: '32px', fontSize: 'var(--text-sm)' }}>第 {userPage} 页</span>
|
||
<button className="admin-btn admin-btn-outline admin-btn-sm" disabled={userPage * 20 >= userTotal} onClick={() => setUserPage(p => p + 1)}>下一页</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* ===================== Configs Tab ===================== */}
|
||
{activeTab === 'configs' && (
|
||
<div className="admin-card">
|
||
<div className="admin-card-header"><h3 className="admin-card-title">全局会员配置</h3></div>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
|
||
{configs.map(cfg => (
|
||
<div key={cfg.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 'var(--space-md)', background: 'var(--color-bg-tertiary)', borderRadius: 'var(--radius-md)' }}>
|
||
<div>
|
||
<div style={{ fontSize: 'var(--text-sm)', fontWeight: 600 }}>{cfg.description}</div>
|
||
<div style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-tertiary)' }}>{cfg.key}</div>
|
||
</div>
|
||
{cfg.type === 'boolean' ? (
|
||
<Toggle checked={!!cfg.value} onChange={(v) => handleUpdateConfig(cfg.key, v)} />
|
||
) : cfg.type === 'number' ? (
|
||
<input type="number" value={cfg.value} onChange={e => handleUpdateConfig(cfg.key, e.target.value)} style={{ ...inputStyle, width: 80 }} />
|
||
) : (
|
||
<input value={cfg.value} onChange={e => handleUpdateConfig(cfg.key, e.target.value)} style={{ ...inputStyle, width: 200 }} />
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ===================== Stats Tab ===================== */}
|
||
{activeTab === 'stats' && stats && (
|
||
<div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 'var(--space-lg)', marginBottom: 'var(--space-xl)' }}>
|
||
{[
|
||
{ label: '总用户数', value: stats.total_users, color: '#818cf8' },
|
||
{ label: '活跃会员', value: stats.active_members, color: '#22c55e' },
|
||
{ label: '已过期', value: stats.expired_members, color: '#ef4444' },
|
||
{ label: '免费用户', value: stats.free_users, color: 'var(--color-text-secondary)' },
|
||
{ label: '自动续费', value: stats.auto_renew_count, color: '#f59e0b' },
|
||
{ label: '今日新增', value: stats.today_new_subs, color: '#06b6d4' },
|
||
].map((s, i) => (
|
||
<div key={i} className="admin-card" style={{ marginBottom: 0, textAlign: 'center' }}>
|
||
<div style={{ fontSize: 'var(--text-2xl)', fontWeight: 800, color: s.color }}>{s.value?.toLocaleString()}</div>
|
||
<div style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-tertiary)', marginTop: 4 }}>{s.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div className="admin-card">
|
||
<div className="admin-card-header"><h3 className="admin-card-title">各计划订阅统计</h3></div>
|
||
<table className="admin-table">
|
||
<thead><tr><th>计划名称</th><th>等级</th><th>用户数</th><th>状态</th></tr></thead>
|
||
<tbody>
|
||
{stats.plan_stats?.map((ps: any) => (
|
||
<tr key={ps.plan_id}>
|
||
<td style={{ fontWeight: 600 }}>{ps.plan_name}</td>
|
||
<td>Level {ps.level}</td>
|
||
<td style={{ fontFamily: 'var(--font-mono)' }}>{ps.user_count}</td>
|
||
<td>{ps.is_active ? <span className="admin-badge badge-success">启用</span> : <span className="admin-badge badge-neutral">停用</span>}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ===================== Edit/Create Plan Modal ===================== */}
|
||
{showModal && (
|
||
<div style={{
|
||
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
||
background: 'rgba(0,0,0,0.5)', zIndex: 999,
|
||
display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
|
||
paddingTop: '4vh', animation: 'fadeIn 0.2s',
|
||
}} onClick={() => setShowModal(false)}>
|
||
<div style={{
|
||
background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-xl)',
|
||
width: 720, maxHeight: '90vh', overflow: 'auto',
|
||
boxShadow: 'var(--shadow-xl)',
|
||
}} onClick={e => e.stopPropagation()}>
|
||
<div style={{ padding: 'var(--space-xl) var(--space-2xl)', borderBottom: '1px solid var(--color-border)' }}>
|
||
<h3 style={{ fontSize: 'var(--text-lg)', fontWeight: 700 }}>
|
||
{editingPlan ? `编辑 ${editingPlan.name}` : '新建会员计划'}
|
||
</h3>
|
||
</div>
|
||
|
||
{/* Basic Info */}
|
||
<div style={sectionStyle}>
|
||
<div style={{ fontSize: 'var(--text-sm)', fontWeight: 700, marginBottom: 'var(--space-md)' }}>基础信息</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 'var(--space-md)' }}>
|
||
<div><label style={labelStyle}>计划名称</label><input style={inputStyle} value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} /></div>
|
||
<div><label style={labelStyle}>等级 (0-3)</label><input type="number" style={inputStyle} value={form.level} onChange={e => setForm({ ...form, level: Number(e.target.value) })} /></div>
|
||
<div><label style={labelStyle}>周期</label><select style={inputStyle} value={form.duration_type} onChange={e => setForm({ ...form, duration_type: e.target.value })}><option value="month">月</option><option value="quarter">季</option><option value="year">年</option></select></div>
|
||
<div><label style={labelStyle}>价格(元)</label><input type="number" style={inputStyle} value={form.price} onChange={e => setForm({ ...form, price: Number(e.target.value) })} /></div>
|
||
<div><label style={labelStyle}>每日免费Token</label><input type="number" style={inputStyle} value={form.daily_free_tokens} onChange={e => setForm({ ...form, daily_free_tokens: Number(e.target.value) })} /></div>
|
||
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
|
||
<label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer' }}>
|
||
<Toggle checked={form.is_active} onChange={v => setForm({ ...form, is_active: v })} />
|
||
<span style={{ fontSize: 'var(--text-sm)' }}>启用</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Quotas */}
|
||
<div style={sectionStyle}>
|
||
<div style={{ fontSize: 'var(--text-sm)', fontWeight: 700, marginBottom: 'var(--space-md)' }}>配额限制</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 'var(--space-md)' }}>
|
||
<div><label style={labelStyle}>最大Agent数</label><input type="number" style={inputStyle} value={form.max_agents} onChange={e => setForm({ ...form, max_agents: Number(e.target.value) })} /></div>
|
||
<div><label style={labelStyle}>最大工作流数</label><input type="number" style={inputStyle} value={form.max_workflows} onChange={e => setForm({ ...form, max_workflows: Number(e.target.value) })} /></div>
|
||
<div><label style={labelStyle}>最大知识库数</label><input type="number" style={inputStyle} value={form.max_knowledge_bases} onChange={e => setForm({ ...form, max_knowledge_bases: Number(e.target.value) })} /></div>
|
||
<div><label style={labelStyle}>存储配额(MB)</label><input type="number" style={inputStyle} value={form.max_storage_mb} onChange={e => setForm({ ...form, max_storage_mb: Number(e.target.value) })} /></div>
|
||
<div><label style={labelStyle}>每日API限额</label><input type="number" style={inputStyle} value={form.api_calls_per_day} onChange={e => setForm({ ...form, api_calls_per_day: Number(e.target.value) })} /></div>
|
||
<div><label style={labelStyle}>每分钟API限额</label><input type="number" style={inputStyle} value={form.api_calls_per_min} onChange={e => setForm({ ...form, api_calls_per_min: Number(e.target.value) })} /></div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Permissions */}
|
||
<div style={sectionStyle}>
|
||
<div style={{ fontSize: 'var(--text-sm)', fontWeight: 700, marginBottom: 'var(--space-md)' }}>功能权限</div>
|
||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-md)' }}>
|
||
{[
|
||
{ key: 'can_publish_apps', label: '发布应用到市场' },
|
||
{ key: 'can_create_api_keys', label: '创建开发者API密钥' },
|
||
{ key: 'can_use_workflow', label: '使用工作流编排' },
|
||
{ key: 'can_use_mcp', label: '使用MCP工具' },
|
||
{ key: 'can_use_code_exec', label: '使用代码执行' },
|
||
{ key: 'can_use_privacy_mode', label: '使用隐私模式' },
|
||
{ key: 'can_use_dag', label: '使用DAG多Agent' },
|
||
].map(perm => (
|
||
<label key={perm.key} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--color-bg-tertiary)', borderRadius: 'var(--radius-md)', cursor: 'pointer' }}>
|
||
<span style={{ fontSize: 'var(--text-sm)' }}>{perm.label}</span>
|
||
<Toggle checked={(form as any)[perm.key]} onChange={v => setForm({ ...form, [perm.key]: v })} />
|
||
</label>
|
||
))}
|
||
</div>
|
||
<div style={{ marginTop: 'var(--space-md)' }}>
|
||
<label style={labelStyle}>可用模型层级</label>
|
||
<div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
|
||
{['free', 'standard', 'premium'].map(tier => (
|
||
<label key={tier} style={{ display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer', padding: '4px 12px', background: form.allowed_model_tiers.includes(tier) ? 'var(--color-accent-subtle)' : 'var(--color-bg-tertiary)', borderRadius: 'var(--radius-full)', fontSize: 'var(--text-sm)' }}>
|
||
<input type="checkbox" checked={form.allowed_model_tiers.includes(tier)} onChange={() => toggleModelTier(tier)} style={{ accentColor: 'var(--color-accent)' }} />
|
||
{tier}
|
||
</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Features */}
|
||
<div style={sectionStyle}>
|
||
<div style={{ fontSize: 'var(--text-sm)', fontWeight: 700, marginBottom: 'var(--space-md)' }}>会员权益标签</div>
|
||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 'var(--space-sm)' }}>
|
||
{form.features.map((f, i) => (
|
||
<span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 10px', borderRadius: 'var(--radius-full)', background: 'var(--color-accent-subtle)', color: 'var(--color-accent)', fontSize: 'var(--text-xs)' }}>
|
||
{f}
|
||
<button onClick={() => setForm({ ...form, features: form.features.filter((_, j) => j !== i) })} style={{ cursor: 'pointer', color: 'inherit', padding: 0, lineHeight: 1, border: 'none', background: 'none' }}>×</button>
|
||
</span>
|
||
))}
|
||
</div>
|
||
<div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
|
||
<input style={{ ...inputStyle, flex: 1 }} value={newFeature} onChange={e => setNewFeature(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); addFeature(); } }} placeholder="输入权益名称，回车添加" />
|
||
<button className="admin-btn admin-btn-outline admin-btn-sm" onClick={addFeature}>添加</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Actions */}
|
||
<div style={{ padding: 'var(--space-lg) var(--space-2xl)', display: 'flex', justifyContent: 'flex-end', gap: 'var(--space-md)' }}>
|
||
<button className="admin-btn admin-btn-outline" onClick={() => setShowModal(false)}>取消</button>
|
||
<button className="admin-btn admin-btn-primary" onClick={handleSave}>保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ===================== Assign Plan Modal ===================== */}
|
||
{showAssignModal && (
|
||
<div style={{
|
||
position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
|
||
background: 'rgba(0,0,0,0.5)', zIndex: 999,
|
||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||
}} onClick={() => setShowAssignModal(false)}>
|
||
<div style={{ background: 'var(--color-bg-primary)', borderRadius: 'var(--radius-xl)', width: 480, padding: 'var(--space-2xl)' }} onClick={e => e.stopPropagation()}>
|
||
<h3 style={{ fontSize: 'var(--text-lg)', fontWeight: 700, marginBottom: 'var(--space-xl)' }}>分配会员计划</h3>
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
|
||
<div><label style={labelStyle}>用户ID</label><input style={inputStyle} value={assignUserId} onChange={e => setAssignUserId(e.target.value)} placeholder="输入用户ID" /></div>
|
||
<div><label style={labelStyle}>选择计划</label>
|
||
<select style={inputStyle} value={assignPlanId} onChange={e => setAssignPlanId(e.target.value)}>
|
||
<option value="">请选择...</option>
|
||
{plans.filter(p => p.is_active).map(p => <option key={p.id} value={p.id}>{p.name} (Level {p.level})</option>)}
|
||
</select>
|
||
</div>
|
||
<div><label style={labelStyle}>订阅时长(天)</label><input type="number" style={inputStyle} value={assignDays} onChange={e => setAssignDays(Number(e.target.value))} /></div>
|
||
</div>
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 'var(--space-md)', marginTop: 'var(--space-xl)' }}>
|
||
<button className="admin-btn admin-btn-outline" onClick={() => setShowAssignModal(false)}>取消</button>
|
||
<button className="admin-btn admin-btn-primary" onClick={handleAssignPlan}>确认分配</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Membership;
|