会员订阅区分体验用户和付费用户:类型标签、筛选器、来源字段
This commit is contained in:
@@ -10,6 +10,7 @@ import type { MembershipEntry } from "@/types/ops";
|
||||
export function MembershipsPageClient() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [memberships, setMemberships] = useState<MembershipEntry[]>([]);
|
||||
const [filter, setFilter] = useState<"all" | "paid" | "trial">("all");
|
||||
|
||||
const load = async () => {
|
||||
setLoading(true);
|
||||
@@ -22,15 +23,45 @@ export function MembershipsPageClient() {
|
||||
|
||||
useEffect(() => { void load(); }, []);
|
||||
|
||||
const paid = memberships.filter((m) => !m.is_trial);
|
||||
const trials = memberships.filter((m) => m.is_trial);
|
||||
const filtered = filter === "paid" ? paid : filter === "trial" ? trials : memberships;
|
||||
|
||||
const planLabel = (code?: string) => {
|
||||
if (!code) return "—";
|
||||
if (code.startsWith("signup_trial")) return "3天体验";
|
||||
if (code === "pro_monthly") return "月付";
|
||||
if (code === "pro_quarterly") return "季付";
|
||||
if (code === "pro_yearly") return "年付";
|
||||
return code;
|
||||
};
|
||||
|
||||
if (loading) return <div className="text-slate-400 animate-pulse">加载中...</div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-white">会员订阅 ({memberships.length})</h1>
|
||||
<Button variant="outline" size="sm" onClick={load} className="gap-1.5">
|
||||
<RefreshCcw className="h-3.5 w-3.5" /> 刷新
|
||||
</Button>
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<h1 className="text-2xl font-bold text-white">
|
||||
会员订阅 ({memberships.length})
|
||||
<span className="text-sm font-normal text-slate-400 ml-3">
|
||||
付费 {paid.length} · 体验 {trials.length}
|
||||
</span>
|
||||
</h1>
|
||||
<div className="flex gap-2">
|
||||
{(["all", "paid", "trial"] as const).map((f) => (
|
||||
<Button
|
||||
key={f}
|
||||
variant={filter === f ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setFilter(f)}
|
||||
>
|
||||
{f === "all" ? "全部" : f === "paid" ? "付费" : "体验"}
|
||||
</Button>
|
||||
))}
|
||||
<Button variant="outline" size="sm" onClick={load} className="gap-1.5">
|
||||
<RefreshCcw className="h-3.5 w-3.5" /> 刷新
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
@@ -38,8 +69,8 @@ export function MembershipsPageClient() {
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-white/10 text-left text-slate-400">
|
||||
<th className="py-3 px-4 font-medium">类型</th>
|
||||
<th className="py-3 px-4 font-medium">邮箱</th>
|
||||
<th className="py-3 px-4 font-medium">用户ID</th>
|
||||
<th className="py-3 px-4 font-medium">方案</th>
|
||||
<th className="py-3 px-4 font-medium">起始</th>
|
||||
<th className="py-3 px-4 font-medium">到期</th>
|
||||
@@ -47,17 +78,27 @@ export function MembershipsPageClient() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{memberships.map((m, i) => (
|
||||
{filtered.map((m, i) => (
|
||||
<tr key={m.user_id || i} className="border-b border-white/5">
|
||||
<td className="py-2.5 px-4">
|
||||
{m.is_trial ? (
|
||||
<span className="inline-flex items-center rounded-full bg-amber-500/15 px-2 py-0.5 text-[11px] font-medium text-amber-400">
|
||||
体验
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center rounded-full bg-emerald-500/15 px-2 py-0.5 text-[11px] font-medium text-emerald-400">
|
||||
付费
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-2.5 px-4 text-white">{m.email ?? "—"}</td>
|
||||
<td className="py-2.5 px-4 text-slate-400 font-mono text-xs">{m.user_id?.slice(0, 12) ?? "—"}</td>
|
||||
<td className="py-2.5 px-4">{m.plan_code ?? "—"}</td>
|
||||
<td className="py-2.5 px-4">{planLabel(m.plan_code)}</td>
|
||||
<td className="py-2.5 px-4 text-slate-400 text-xs">{m.starts_at?.slice(0, 10) ?? "—"}</td>
|
||||
<td className="py-2.5 px-4 text-slate-400 text-xs">{m.expires_at?.slice(0, 10) ?? "—"}</td>
|
||||
<td className="py-2.5 px-4">{m.queued_days ?? 0}</td>
|
||||
</tr>
|
||||
))}
|
||||
{memberships.length === 0 && (
|
||||
{filtered.length === 0 && (
|
||||
<tr><td colSpan={6} className="py-8 text-center text-slate-500">暂无会员</td></tr>
|
||||
)}
|
||||
</tbody>
|
||||
|
||||
@@ -109,6 +109,8 @@ export type MembershipEntry = {
|
||||
queued_days?: number;
|
||||
queued_count?: number;
|
||||
plan_code?: string;
|
||||
source?: string;
|
||||
is_trial?: boolean;
|
||||
};
|
||||
|
||||
export type MembershipsPayload = {
|
||||
|
||||
@@ -76,6 +76,8 @@ def list_ops_memberships(request: Request, limit: int = 200) -> Dict[str, Any]:
|
||||
if isinstance(subscription_window, dict)
|
||||
else 0
|
||||
)
|
||||
source = str(item.get("source") or "")
|
||||
is_trial = source == "signup_trial" or str(item.get("plan_code") or "").startswith("signup_trial")
|
||||
row = {
|
||||
"user_id": user_id,
|
||||
"email": str(auth_user.get("email") or local_user.get("supabase_email") or ""),
|
||||
@@ -83,6 +85,8 @@ def list_ops_memberships(request: Request, limit: int = 200) -> Dict[str, Any]:
|
||||
"username": local_user.get("username"),
|
||||
"registered_at": local_user.get("created_at") or auth_user.get("created_at"),
|
||||
"plan_code": item.get("plan_code"),
|
||||
"source": source,
|
||||
"is_trial": is_trial,
|
||||
"starts_at": item.get("starts_at"),
|
||||
"current_expires_at": current_expires_at,
|
||||
"total_expires_at": total_expires_at or current_expires_at,
|
||||
|
||||
Reference in New Issue
Block a user