feat: 积分流水互转合并展示，并优化个人主页与经济看板

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/app/admin/economy/EconomyClient.tsx

@@ -1,12 +1,14 @@
 "use client";
 
+import { useMemo, useState } from "react";
 import Link from "next/link";
-import { Coins, Flame, Gift, TrendingUp } from "lucide-react";
-import type { EconomyStats } from "@/lib/api";
+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, AdminStatCard } from "@/components/admin";
+import { AdminPageHeader, AdminSegmented, AdminStatCard } from "@/components/admin";
+import Avatar from "@/components/Avatar";
 import {
   AdminChartCard,
   DeltaBarChart,
@@ -22,7 +24,223 @@ function netDeltaLabel(n: number) {
   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,
@@ -41,6 +259,11 @@ export default function EconomyClient({ stats }: { stats: EconomyStats }) {
     .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>
@@ -122,37 +345,42 @@ export default function EconomyClient({ stats }: { stats: EconomyStats }) {
         </AdminChartCard>
       </div>
 
-      <section className="panel overflow-hidden">
+      <section className="panel overflow-hidden ledger-feed">
         <div
-          className="px-5 py-3.5 font-medium text-[15px]"
-          style={{ borderBottom: "1px solid var(--line)", color: "var(--ink)" }}
+          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>
-        {(stats.recent_ledger || []).length === 0 ? (
+        <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>
-            {stats.recent_ledger.map((it, idx) => (
-              <li
-                key={it.id}
-                className="px-5 py-3 flex items-start justify-between gap-3"
-                style={idx === 0 ? undefined : { borderTop: "1px solid var(--line)" }}
-              >
-                <div className="min-w-0">
-                  <p className="text-[13.5px] truncate" style={{ color: "var(--ink)" }}>
-                    {pointReasonLabel(it.reason)}
-                    {it.note ? ` · ${it.note}` : ""}
-                  </p>
-                  <p className="meta text-[12px] mt-0.5">{formatRelative(it.created_at)}</p>
-                </div>
-                <span
-                  className="tabular-nums font-medium shrink-0"
-                  style={{ color: it.delta >= 0 ? "var(--accent)" : "var(--danger)" }}
-                >
-                  {it.delta >= 0 ? `+${it.delta}` : it.delta}
-                </span>
-              </li>
+            {filtered.map((it) => (
+              <RecentLedgerRow key={it.id} it={it} />
             ))}
           </ul>
         )}