399 lines
12 KiB
TypeScript
399 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo, useState } from "react";
|
|
import Link from "next/link";
|
|
import { ArrowRight, Coins, Flame, Gift, TrendingUp } from "lucide-react";
|
|
import type { EconomyStats, LedgerParty, PointLedgerItem } from "@/lib/api";
|
|
import { postTypeLabel } from "@/lib/postMeta";
|
|
import { pointReasonLabel } from "@/lib/points";
|
|
import { formatRelative } from "@/lib/format";
|
|
import { AdminPageHeader, AdminSegmented, AdminStatCard } from "@/components/admin";
|
|
import Avatar from "@/components/Avatar";
|
|
import {
|
|
AdminChartCard,
|
|
DeltaBarChart,
|
|
NamedBarChart,
|
|
NamedPieChart,
|
|
SingleAreaChart,
|
|
} from "@/components/admin/charts";
|
|
|
|
const fmt = (n: number) => n.toLocaleString("zh-CN");
|
|
|
|
function netDeltaLabel(n: number) {
|
|
if (n > 0) return `+${fmt(n)}`;
|
|
return fmt(n);
|
|
}
|
|
|
|
type LedgerKind = "checkin" | "bounty" | "file" | "typed" | "system";
|
|
type LedgerFilter =
|
|
| "all"
|
|
| "granted"
|
|
| "spent"
|
|
| "poll"
|
|
| "lottery"
|
|
| "discussion"
|
|
| "question";
|
|
|
|
const LEDGER_FILTERS: { key: LedgerFilter; label: string }[] = [
|
|
{ key: "all", label: "全部" },
|
|
{ key: "granted", label: "发放" },
|
|
{ key: "spent", label: "消耗" },
|
|
{ key: "poll", label: "投票" },
|
|
{ key: "lottery", label: "抽奖" },
|
|
{ key: "discussion", label: "讨论" },
|
|
{ key: "question", label: "问答" },
|
|
];
|
|
|
|
const EMPTY_LEDGER: PointLedgerItem[] = [];
|
|
|
|
const NOTE_STRIP_EXTRAS = [
|
|
"解锁帖子",
|
|
"下载附件",
|
|
"附件收益",
|
|
"正文解锁收益",
|
|
"悬赏采纳",
|
|
"悬赏截止后采纳扣款",
|
|
"悬赏过期退回",
|
|
"历史签到积分回填",
|
|
"每日签到",
|
|
];
|
|
|
|
function partyName(u: LedgerParty) {
|
|
return u.nickname || u.username || `#${u.id}`;
|
|
}
|
|
|
|
function isToday(iso: string) {
|
|
const d = new Date(iso);
|
|
if (Number.isNaN(d.getTime())) return false;
|
|
const n = new Date();
|
|
return (
|
|
d.getFullYear() === n.getFullYear() &&
|
|
d.getMonth() === n.getMonth() &&
|
|
d.getDate() === n.getDate()
|
|
);
|
|
}
|
|
|
|
function ledgerKind(reason: string): LedgerKind {
|
|
switch (reason) {
|
|
case "checkin":
|
|
case "migrate_checkin":
|
|
return "checkin";
|
|
case "bounty_escrow":
|
|
case "bounty_refund":
|
|
case "bounty_award":
|
|
return "bounty";
|
|
case "download_file":
|
|
return "file";
|
|
default: {
|
|
const blob = pointReasonLabel(reason);
|
|
if (/投票|抽奖|问答/.test(blob)) return "typed";
|
|
return "system";
|
|
}
|
|
}
|
|
}
|
|
|
|
function ledgerKindEmoji(kind: LedgerKind) {
|
|
if (kind === "checkin") return "📅";
|
|
if (kind === "bounty") return "🎯";
|
|
if (kind === "file") return "📎";
|
|
if (kind === "typed") return "🗳";
|
|
return "⚙";
|
|
}
|
|
|
|
function blobOf(it: PointLedgerItem) {
|
|
return `${pointReasonLabel(it.reason)} ${it.note || ""} ${it.reason}`;
|
|
}
|
|
|
|
function matchLedgerFilter(it: PointLedgerItem, filter: LedgerFilter) {
|
|
if (filter === "all") return true;
|
|
const delta = Number(it.delta) || 0;
|
|
const transfer = Boolean(it.from && it.to);
|
|
if (filter === "granted") return transfer || delta > 0;
|
|
if (filter === "spent") return transfer || delta < 0;
|
|
const blob = blobOf(it);
|
|
if (filter === "poll") return /投票/.test(blob);
|
|
if (filter === "lottery") return /抽奖/.test(blob);
|
|
if (filter === "question") return /问答/.test(blob);
|
|
if (filter === "discussion") return it.reason === "unlock_post" || /讨论/.test(blob);
|
|
return true;
|
|
}
|
|
|
|
/** 去掉与类型标签重复的前缀，避免「悬赏托管：悬赏托管：悬赏」 */
|
|
function ledgerDesc(reason: string, note: string) {
|
|
const label = pointReasonLabel(reason);
|
|
let s = (note || "").trim();
|
|
const prefixes = [label, ...NOTE_STRIP_EXTRAS].filter(Boolean);
|
|
let guard = 0;
|
|
let changed = true;
|
|
while (changed && s && guard < 8) {
|
|
changed = false;
|
|
guard += 1;
|
|
for (const p of prefixes) {
|
|
if (s.startsWith(p)) {
|
|
s = s.slice(p.length).replace(/^[\s:：·\-—]+/, "");
|
|
changed = true;
|
|
}
|
|
}
|
|
}
|
|
if (s === label) return "";
|
|
return s;
|
|
}
|
|
|
|
function todayDelta(items: PointLedgerItem[]) {
|
|
let granted = 0;
|
|
let spent = 0;
|
|
for (const it of items) {
|
|
if (!isToday(it.created_at)) continue;
|
|
const n = Math.abs(Number(it.delta) || 0);
|
|
if (n === 0) continue;
|
|
if (it.from && it.to) {
|
|
granted += n;
|
|
spent += n;
|
|
continue;
|
|
}
|
|
if ((it.delta || 0) > 0) granted += n;
|
|
else spent += n;
|
|
}
|
|
return { granted, spent };
|
|
}
|
|
|
|
function LedgerUserLink({ user, compact }: { user: LedgerParty; compact?: boolean }) {
|
|
const name = partyName(user);
|
|
return (
|
|
<Link
|
|
href={`/u/${user.id}`}
|
|
className="flex items-center gap-1.5 min-w-0 max-w-[128px] rounded-md hover:bg-[var(--panel-2)] -mx-0.5 px-0.5 py-0.5 transition-colors"
|
|
title={`${name} @${user.username}`}
|
|
>
|
|
<Avatar name={name} src={user.avatar || undefined} size={compact ? 22 : 24} />
|
|
<span className="text-[13px] truncate" style={{ color: "var(--ink)" }}>
|
|
{name}
|
|
</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function ledgerAria(it: PointLedgerItem) {
|
|
const reason = pointReasonLabel(it.reason);
|
|
const delta = Number(it.delta) || 0;
|
|
const signed = delta > 0 ? `+${fmt(delta)}` : fmt(delta);
|
|
if (it.from && it.to) {
|
|
return `${partyName(it.from)} 向 ${partyName(it.to)} 支付 ${fmt(Math.abs(delta))} 积分，${reason}`;
|
|
}
|
|
const who = it.user ? partyName(it.user) : "未知用户";
|
|
return `${who} ${signed} 积分，${reason}`;
|
|
}
|
|
|
|
function RecentLedgerRow({ it }: { it: PointLedgerItem }) {
|
|
const payer = it.from || it.user;
|
|
const payee = it.from && it.to ? it.to : undefined;
|
|
const kind = ledgerKind(it.reason);
|
|
const desc = ledgerDesc(it.reason, it.note || "");
|
|
const delta = Number(it.delta);
|
|
const showAmount = Number.isFinite(delta) && delta !== 0;
|
|
|
|
return (
|
|
<li className="ledger-row" aria-label={ledgerAria(it)}>
|
|
<span className={`ledger-kind-icon is-${kind}`} aria-hidden>
|
|
{ledgerKindEmoji(kind)}
|
|
</span>
|
|
|
|
{payer ? (
|
|
<LedgerUserLink user={payer} />
|
|
) : (
|
|
<span className="text-[13px] shrink-0" style={{ color: "var(--ink-3)" }}>
|
|
未知用户
|
|
</span>
|
|
)}
|
|
|
|
{payee ? (
|
|
<span className="hidden md:flex items-center gap-1.5 min-w-0 shrink-0">
|
|
<ArrowRight size={13} className="shrink-0" style={{ color: "var(--ink-3)" }} aria-hidden />
|
|
<LedgerUserLink user={payee} compact />
|
|
</span>
|
|
) : null}
|
|
|
|
<div className="min-w-0 flex-1 flex items-center gap-2">
|
|
<span className={`ledger-kind-tag is-${kind}`}>{pointReasonLabel(it.reason)}</span>
|
|
{desc ? (
|
|
<span className="min-w-0 flex-1 truncate text-[12.5px]" style={{ color: "var(--ink-2)" }}>
|
|
{desc}
|
|
</span>
|
|
) : (
|
|
<span className="min-w-0 flex-1" />
|
|
)}
|
|
<span className="shrink-0 text-[12px] tabular-nums" style={{ color: "var(--ink-3)" }}>
|
|
{formatRelative(it.created_at)}
|
|
</span>
|
|
</div>
|
|
|
|
<span
|
|
className="ledger-amount"
|
|
style={showAmount ? { color: delta > 0 ? "var(--ledger-in)" : "var(--ledger-out)" } : undefined}
|
|
>
|
|
{showAmount ? (delta > 0 ? `+${fmt(delta)}` : fmt(delta)) : null}
|
|
</span>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
export default function EconomyClient({ stats }: { stats: EconomyStats }) {
|
|
const [filter, setFilter] = useState<LedgerFilter>("all");
|
|
const ledger = stats.recent_ledger ?? EMPTY_LEDGER;
|
|
|
|
const checkinSeries = (stats.checkin_series || []).map((d) => ({
|
|
date: d.date,
|
|
count: d.count,
|
|
}));
|
|
|
|
const ledgerByReason = (stats.ledger_by_reason || []).map((r) => ({
|
|
label: pointReasonLabel(r.key || r.label),
|
|
count: r.count,
|
|
}));
|
|
|
|
const deltaSeries = stats.delta_series || [];
|
|
|
|
const postsByType = Object.entries(stats.posts_by_type || {})
|
|
.map(([t, n]) => ({ label: postTypeLabel(t), count: Number(n) || 0 }))
|
|
.filter((d) => d.count > 0)
|
|
.sort((a, b) => b.count - a.count);
|
|
|
|
const net = stats.net_delta_7d ?? 0;
|
|
const today = useMemo(() => todayDelta(ledger), [ledger]);
|
|
const filtered = useMemo(
|
|
() => ledger.filter((it) => matchLedgerFilter(it, filter)),
|
|
[ledger, filter]
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<AdminPageHeader
|
|
icon={Coins}
|
|
title="积分与类型帖看板"
|
|
description="观察全站积分流通、悬赏托管与帖子类型分布"
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 mb-5">
|
|
<AdminStatCard
|
|
label="用户余额合计"
|
|
value={fmt(stats.total_balance)}
|
|
hint="全站可用积分之和"
|
|
icon={<Coins size={16} />}
|
|
/>
|
|
<AdminStatCard
|
|
label="今日签到"
|
|
value={fmt(stats.checkin_today)}
|
|
hint="今日已签到人数"
|
|
icon={<Flame size={16} />}
|
|
color="var(--clay)"
|
|
soft="var(--clay-soft)"
|
|
/>
|
|
<AdminStatCard
|
|
label="托管中悬赏"
|
|
value={`${fmt(stats.open_bounties)} / ${fmt(stats.escrowed_points)}`}
|
|
hint="未结算帖数 / 托管积分"
|
|
icon={<Gift size={16} />}
|
|
color="var(--gold)"
|
|
soft="var(--gold-soft)"
|
|
/>
|
|
<AdminStatCard
|
|
label="近 7 日净变动"
|
|
value={netDeltaLabel(net)}
|
|
hint="发放减去消耗"
|
|
icon={<TrendingUp size={16} />}
|
|
color={net >= 0 ? "var(--ok)" : "var(--danger)"}
|
|
soft={net >= 0 ? "var(--ok-soft)" : "var(--danger-soft)"}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-4">
|
|
<AdminChartCard title="签到趋势" hint="近 14 日每日签到人数">
|
|
{checkinSeries.length === 0 ? (
|
|
<p className="meta text-center py-16">暂无签到数据</p>
|
|
) : (
|
|
<SingleAreaChart
|
|
data={checkinSeries}
|
|
dataKey="count"
|
|
name="签到"
|
|
color="var(--clay)"
|
|
/>
|
|
)}
|
|
</AdminChartCard>
|
|
|
|
<AdminChartCard title="流水原因分布" hint="按入账原因聚合条数">
|
|
{ledgerByReason.length === 0 ? (
|
|
<p className="meta text-center py-16">暂无流水</p>
|
|
) : (
|
|
<NamedBarChart data={ledgerByReason} layout="horizontal" />
|
|
)}
|
|
</AdminChartCard>
|
|
|
|
<AdminChartCard title="发放 / 消耗" hint="近 14 日积分进出">
|
|
{deltaSeries.length === 0 ? (
|
|
<p className="meta text-center py-16">暂无数据</p>
|
|
) : (
|
|
<DeltaBarChart data={deltaSeries} />
|
|
)}
|
|
</AdminChartCard>
|
|
|
|
<AdminChartCard title="帖子类型分布" hint="全站帖子按类型占比">
|
|
{postsByType.length === 0 ? (
|
|
<p className="meta text-center py-16">暂无数据</p>
|
|
) : (
|
|
<NamedPieChart data={postsByType} />
|
|
)}
|
|
</AdminChartCard>
|
|
</div>
|
|
|
|
<section className="panel overflow-hidden ledger-feed">
|
|
<div
|
|
className="px-5 py-3 flex items-start justify-between gap-3 flex-wrap"
|
|
style={{ borderBottom: "1px solid var(--line)" }}
|
|
>
|
|
<p className="font-medium text-[15px] pt-0.5" style={{ color: "var(--ink)" }}>
|
|
最近流水
|
|
</p>
|
|
<AdminSegmented
|
|
size="sm"
|
|
role="group"
|
|
ariaLabel="按类型筛选最近流水"
|
|
options={LEDGER_FILTERS}
|
|
value={filter}
|
|
onChange={setFilter}
|
|
/>
|
|
</div>
|
|
<p className="px-5 py-2 text-[12.5px]" style={{ borderBottom: "1px solid var(--line)", color: "var(--ink-2)" }}>
|
|
今日 发放{" "}
|
|
<span className="tabular-nums font-semibold" style={{ color: "var(--ledger-in)" }}>
|
|
+{fmt(today.granted)}
|
|
</span>
|
|
{" · "}
|
|
消耗{" "}
|
|
<span className="tabular-nums font-semibold" style={{ color: "var(--ledger-out)" }}>
|
|
-{fmt(today.spent)}
|
|
</span>
|
|
</p>
|
|
{ledger.length === 0 ? (
|
|
<p className="meta text-center py-10">暂无流水</p>
|
|
) : filtered.length === 0 ? (
|
|
<p className="meta text-center py-10">该分类下暂无流水</p>
|
|
) : (
|
|
<ul>
|
|
{filtered.map((it) => (
|
|
<RecentLedgerRow key={it.id} it={it} />
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
|
|
<p className="meta text-[12.5px] mt-5">
|
|
用户可在{" "}
|
|
<Link href="/points" className="hover:text-[var(--accent)]">
|
|
/points
|
|
</Link>{" "}
|
|
查看个人流水。
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|