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>
         )}

frontend/app/globals.css

@@ -32,6 +32,18 @@
   --ok: #137333;
   --ok-soft: rgba(19, 115, 51, 0.1);
 
+  /* 积分看板最近流水：金额与类型标签 */
+  --ledger-in: #16a34a;
+  --ledger-out: #dc2626;
+  --ledger-checkin-bg: #dcfce7;
+  --ledger-checkin-fg: #15803d;
+  --ledger-bounty-bg: #ffedd5;
+  --ledger-bounty-fg: #c2410c;
+  --ledger-file-bg: #dbeafe;
+  --ledger-file-fg: #1d4ed8;
+  --ledger-typed-bg: #f3e8ff;
+  --ledger-typed-fg: #7e22ce;
+
   /* 工作台语义：导航选中态 / 榜单奖牌色 */
   --nav-active-bg: var(--accent-soft);
   --nav-active-ink: var(--accent);
@@ -94,6 +106,17 @@
   --ok: #58d18a;
   --ok-soft: rgba(88, 209, 138, 0.15);
 
+  --ledger-in: #4ade80;
+  --ledger-out: #f87171;
+  --ledger-checkin-bg: rgba(22, 163, 74, 0.22);
+  --ledger-checkin-fg: #86efac;
+  --ledger-bounty-bg: rgba(194, 65, 12, 0.28);
+  --ledger-bounty-fg: #fdba74;
+  --ledger-file-bg: rgba(29, 78, 216, 0.28);
+  --ledger-file-fg: #93c5fd;
+  --ledger-typed-bg: rgba(126, 34, 206, 0.28);
+  --ledger-typed-fg: #e9d5ff;
+
   /* 工作台语义 */
   --nav-active-bg: rgba(141, 163, 255, 0.14);
   --nav-active-ink: #a9b8ff;
@@ -3112,6 +3135,75 @@ a.j13-mention-token:hover {
     color: var(--accent);
   }
 
+  .ledger-feed {
+    max-width: 1000px;
+  }
+  .ledger-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    height: 64px;
+    padding: 12px 20px;
+    border-top: 1px solid var(--line);
+  }
+  .ledger-row:first-child {
+    border-top: none;
+  }
+  .ledger-kind-icon {
+    width: 30px;
+    height: 30px;
+    border-radius: 999px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    font-size: 14px;
+    line-height: 1;
+  }
+  .ledger-kind-tag {
+    font-size: 11px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-weight: 500;
+    line-height: 1.4;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+  .ledger-kind-icon.is-checkin,
+  .ledger-kind-tag.is-checkin {
+    background: var(--ledger-checkin-bg);
+    color: var(--ledger-checkin-fg);
+  }
+  .ledger-kind-icon.is-bounty,
+  .ledger-kind-tag.is-bounty {
+    background: var(--ledger-bounty-bg);
+    color: var(--ledger-bounty-fg);
+  }
+  .ledger-kind-icon.is-file,
+  .ledger-kind-tag.is-file {
+    background: var(--ledger-file-bg);
+    color: var(--ledger-file-fg);
+  }
+  .ledger-kind-icon.is-typed,
+  .ledger-kind-tag.is-typed {
+    background: var(--ledger-typed-bg);
+    color: var(--ledger-typed-fg);
+  }
+  .ledger-kind-icon.is-system,
+  .ledger-kind-tag.is-system {
+    background: var(--tint);
+    color: var(--ink-2);
+  }
+  .ledger-amount {
+    width: 80px;
+    flex-shrink: 0;
+    text-align: right;
+    font-size: 15px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+  }
+
   .admin-toolbar {
     display: flex;
     flex-direction: column;

frontend/app/u/[id]/ProfileHeroAvatar.tsx

@@ -4,12 +4,15 @@ import { useState } from "react";
 import Avatar from "@/components/Avatar";
 import ImageLightbox from "@/components/markdown/ImageLightbox";
 
+/** Hero 约 120px 高时的头像边长 */
+const AVATAR_SIZE = 72;
+
 const RING_STYLE = {
-  width: 80,
-  height: 80,
+  width: AVATAR_SIZE,
+  height: AVATAR_SIZE,
   lineHeight: 0,
   boxShadow:
-    "0 0 0 4px var(--panel), 0 0 0 6px color-mix(in srgb, var(--accent) 38%, transparent)",
+    "0 0 0 3px var(--panel), 0 0 0 4.5px color-mix(in srgb, var(--accent) 38%, transparent)",
 } as const;
 
 const RING_CLASS =
@@ -38,11 +41,11 @@ export default function ProfileHeroAvatar({
           data-tip="查看头像"
           onClick={() => setOpen(true)}
         >
-          <Avatar name={name} src={src} size={80} />
+          <Avatar name={name} src={src} size={AVATAR_SIZE} />
         </button>
       ) : (
         <span className={RING_CLASS} style={RING_STYLE}>
-          <Avatar name={name} src={src} size={80} />
+          <Avatar name={name} src={src} size={AVATAR_SIZE} />
         </span>
       )}
       {open && src ? (

frontend/app/u/[id]/UserProfileContent.tsx

@@ -2,8 +2,15 @@ import Link from "next/link";
 import { FileText, MessageCircle, AlertCircle } from "lucide-react";
 import Pagination from "@/components/Pagination";
 import { IconComment, IconEye, IconHeart } from "@/components/Icons";
+import { formatRelative } from "@/lib/format";
 import type { UserProfile, UserCommentsResponse } from "@/lib/api";
 
+/** 本页卡片统一阴影；用 color-mix 让暗色主题自动加深，避免写死浅色阴影 */
+const CARD_SHADOW = "0 1px 3px color-mix(in srgb, #000 18%, transparent)";
+
+const ITEM_BASE =
+  "group block rounded-xl px-6 py-5 border transition-[background-color,box-shadow,border-color] duration-150";
+
 /**
  * 用户主页内容区（纯服务端渲染）：
  * tab 与分页全部走 URL（?tab=comments&page=N），刷新/后退/分享链接均保持一致。
@@ -31,44 +38,88 @@ export default function UserProfileContent({
       {tab === "posts" ? (
         <div>
           {Array.isArray(profile.posts) && profile.posts.length > 0 ? (
-            <div className="panel overflow-hidden p-0">
-              {profile.posts.map((post, i) => (
-                <Link
-                  key={post.id}
-                  href={`/post/${post.id}`}
-                  className="group block px-4 sm:px-5 py-4 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
-                  style={{ borderTop: i === 0 ? "none" : "1px solid var(--line)" }}
-                >
-                  <div className="flex items-center gap-2 mb-2 flex-wrap">
-                    <span className="j13-board-tag">{post.board.name}</span>
-                    {post.pinned > 0 && <span className="badge-pin">置顶</span>}
-                    {post.recommended && <span className="badge-rec">推荐</span>}
-                  </div>
-                  <h2
-                    className="font-semibold mb-2 leading-snug transition-colors group-hover:text-[var(--accent)]"
-                    style={{ color: "var(--ink)" }}
+            <div className="flex flex-col gap-2">
+              {profile.posts.map((post) => {
+                const pinned = post.pinned > 0;
+                return (
+                  <Link
+                    key={post.id}
+                    href={`/post/${post.id}`}
+                    className={`${ITEM_BASE} ${
+                      pinned
+                        ? "bg-[color-mix(in_srgb,#fde68a_22%,var(--panel))] border-[color-mix(in_srgb,#fde68a_70%,var(--line))] hover:bg-[color-mix(in_srgb,#fde68a_30%,var(--panel))]"
+                        : "bg-[var(--panel)] border-[var(--line)] hover:bg-[color-mix(in_srgb,var(--ink)_3.5%,var(--panel))]"
+                    }`}
+                    style={{ boxShadow: CARD_SHADOW }}
                   >
-                    {post.title}
-                  </h2>
-                  <div className="flex items-center gap-4 meta text-[12px]">
-                    <span className="tabular-nums">{new Date(post.created_at).toLocaleDateString("zh-CN")}</span>
-                    {allowComments ? (
-                      <span className="inline-flex items-center gap-1">
-                        <IconComment size={12} /> {post.comment_count}
+                    <div className="flex items-start gap-2">
+                      {pinned && (
+                        <span
+                          className="mt-0.5 inline-flex shrink-0 items-center rounded px-1.5 py-px text-[11px] font-semibold leading-[1.5] text-white"
+                          style={{ background: "#f59e0b" }}
+                        >
+                          置顶
+                        </span>
+                      )}
+                      <h2
+                        className="min-w-0 flex-1 text-[18px] font-semibold leading-snug transition-colors duration-150 group-hover:text-[var(--accent)]"
+                        style={{ color: "var(--ink)" }}
+                      >
+                        {post.title}
+                      </h2>
+                      {post.recommended && <span className="badge-rec shrink-0">推荐</span>}
+                    </div>
+                    <div
+                      className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[12px]"
+                      style={{ color: "var(--ink-3)" }}
+                    >
+                      <span
+                        className="inline-flex items-center rounded px-1.5 py-px text-[11px] font-medium leading-[1.5]"
+                        style={{
+                          background: "var(--panel-2)",
+                          color: "var(--ink)",
+                        }}
+                      >
+                        {post.board.name}
                       </span>
-                    ) : null}
-                    <span className="inline-flex items-center gap-1">
-                      <IconEye size={12} /> {post.view_count}
-                    </span>
-                    <span className="inline-flex items-center gap-1">
-                      <IconHeart size={12} /> {post.like_count}
-                    </span>
-                  </div>
-                </Link>
-              ))}
+                      <span className="tabular-nums">{formatRelative(post.created_at)}</span>
+                      {allowComments ? (
+                        <span className="inline-flex items-center gap-1">
+                          <IconComment size={12} />
+                          <span className="inline-flex items-center gap-1 tabular-nums">
+                            {post.comment_count}
+                            <span>评论</span>
+                          </span>
+                        </span>
+                      ) : null}
+                      <span className="inline-flex items-center gap-1">
+                        <IconEye size={12} />
+                        <span className="inline-flex items-center gap-1 tabular-nums">
+                          {post.view_count}
+                          <span>浏览</span>
+                        </span>
+                      </span>
+                      <span className="inline-flex items-center gap-1">
+                        <IconHeart size={12} />
+                        <span className="inline-flex items-center gap-1 tabular-nums">
+                          {post.like_count}
+                          <span>点赞</span>
+                        </span>
+                      </span>
+                    </div>
+                  </Link>
+                );
+              })}
             </div>
           ) : (
-            <div className="panel text-center py-16 px-6">
+            <div
+              className="rounded-xl text-center py-16 px-6"
+              style={{
+                background: "var(--panel)",
+                border: "1px solid var(--line)",
+                boxShadow: CARD_SHADOW,
+              }}
+            >
               <FileText size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
               <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>暂无发帖</p>
             </div>
@@ -81,7 +132,15 @@ export default function UserProfileContent({
           />
         </div>
       ) : commentError ? (
-        <div className="panel text-center py-16 px-6" role="alert">
+        <div
+          className="rounded-xl text-center py-16 px-6"
+          role="alert"
+          style={{
+            background: "var(--panel)",
+            border: "1px solid var(--line)",
+            boxShadow: CARD_SHADOW,
+          }}
+        >
           <AlertCircle size={26} className="mx-auto mb-3" style={{ color: "var(--danger)" }} />
           <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>评论加载失败</p>
           <p className="meta mt-1.5 mb-4">网络异常，请稍后重试</p>
@@ -89,13 +148,13 @@ export default function UserProfileContent({
         </div>
       ) : commentData && (commentData.comments?.length ?? 0) > 0 ? (
         <div>
-          <div className="panel overflow-hidden p-0">
-            {(commentData.comments ?? []).map((c, i) => (
+          <div className="flex flex-col gap-2">
+            {(commentData.comments ?? []).map((c) => (
               <Link
                 key={c.id}
                 href={`/post/${c.post_id}`}
-                className="block px-4 sm:px-5 py-4 transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]"
-                style={{ borderTop: i === 0 ? "none" : "1px solid var(--line)" }}
+                className={`${ITEM_BASE} bg-[var(--panel)] border-[var(--line)] hover:bg-[color-mix(in_srgb,var(--ink)_3.5%,var(--panel))]`}
+                style={{ boxShadow: CARD_SHADOW }}
               >
                 <div className="meta text-xs mb-2">
                   评论于《<span style={{ color: "var(--accent)" }}>{c.post_title}</span>》
@@ -106,8 +165,11 @@ export default function UserProfileContent({
                 >
                   {c.content}
                 </p>
-                <div className="meta text-xs mt-2 tabular-nums">
-                  {new Date(c.created_at).toLocaleString("zh-CN")}
+                <div
+                  className="mt-2 text-[12px] tabular-nums"
+                  style={{ color: "var(--ink-3)" }}
+                >
+                  {formatRelative(c.created_at)}
                 </div>
               </Link>
             ))}
@@ -121,7 +183,14 @@ export default function UserProfileContent({
           />
         </div>
       ) : (
-        <div className="panel text-center py-16 px-6">
+        <div
+          className="rounded-xl text-center py-16 px-6"
+          style={{
+            background: "var(--panel)",
+            border: "1px solid var(--line)",
+            boxShadow: CARD_SHADOW,
+          }}
+        >
           <MessageCircle size={26} className="mx-auto mb-3" style={{ color: "var(--ink-3)" }} />
           <p className="text-sm font-semibold" style={{ color: "var(--ink-2)" }}>暂无评论</p>
         </div>

frontend/app/u/[id]/page.tsx

@@ -121,6 +121,7 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
   const u = data.user;
   const joinDate = new Date(u.created_at).toLocaleDateString("zh-CN");
   const showPoints = data.stats.points > 0 || isOwner;
+  const hasHeroActions = isOwner || !!currentUser;
 
   // 导航项（桌面左栏 / 移动 chips 共用定义）
   const navItems: { key: UserTab; label: string; count?: number; icon: React.ReactNode; ownerOnly?: boolean }[] = [
@@ -134,12 +135,8 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
   const visibleNav = navItems.filter((t) => !t.ownerOnly || isOwner);
   const tabHref = (t: UserTab) => (t === "posts" ? `/u/${id}` : `/u/${id}?tab=${t}`);
 
-  // 统计条数据
-  const heroStats = [
-    { label: "发帖", value: data.stats.post_count },
-    ...(allowComments ? [{ label: "评论", value: data.stats.comment_count }] : []),
-    { label: "积分", value: data.stats.points, foot: data.stats.streak > 0 ? `连签 ${data.stats.streak} 天` : undefined },
-  ];
+  /** 本页卡片统一阴影；暗色随 color-mix 自动加深 */
+  const cardShadow = "0 1px 3px color-mix(in srgb, #000 18%, transparent)";
 
   return (
     <div>
@@ -149,8 +146,11 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
         <span style={{ color: "var(--accent)" }}>{u.nickname || u.username}</span>
       </nav>
 
-      {/* ═══ Hero：石墨面板 + 淡靛几何装饰 + 身份信息 + 统计条 ═══ */}
-      <section className="panel relative mb-6">
+      {/* ═══ Hero：头像 + 昵称 + 简介 + 行内统计，约 120px 高 ═══ */}
+      <section
+        className="panel relative mb-5 transition-[background-color,box-shadow] duration-150"
+        style={{ boxShadow: cardShadow }}
+      >
         {/* 装饰层单独裁圆角，避免 overflow-hidden 裁掉管理下拉菜单 */}
         <div aria-hidden className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
           <span
@@ -167,9 +167,9 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
           />
         </div>
 
-        {/* 本人操作按钮 / 访客私聊 */}
+        {/* 本人操作按钮 / 访客私聊：绝对定位在卡片右上角 */}
         {isOwner ? (
-          <div className="absolute top-3 right-3 sm:top-4 sm:right-4 z-20 flex items-center gap-2">
+          <div className="absolute top-3 right-3 z-20 flex items-center gap-2">
             <Link href={`/u/${id}?tab=settings`} className="btn btn-line btn-sm">
               <PenLine size={13.5} />
               <span className="hidden sm:inline">编辑资料</span>
@@ -178,14 +178,14 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
               href={`/u/${id}?tab=security`}
               aria-label="安全设置"
               data-tip="安全设置"
-              className="inline-flex w-8 h-8 items-center justify-center rounded-full border transition-colors hover:border-[var(--accent)] hover:text-[var(--accent)]"
+              className="inline-flex w-8 h-8 items-center justify-center rounded-full border transition-colors duration-150 hover:border-[var(--accent)] hover:text-[var(--accent)]"
               style={{ background: "var(--panel)", borderColor: "var(--line-2)", color: "var(--ink-2)" }}
             >
               <Shield size={14} />
             </Link>
           </div>
         ) : currentUser ? (
-          <div className="absolute top-3 right-3 sm:top-4 sm:right-4 z-20 flex items-center gap-2">
+          <div className="absolute top-3 right-3 z-20 flex items-center gap-2">
             <StaffUserMenu
               target={{
                 id: u.id,
@@ -200,83 +200,79 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
           </div>
         ) : null}
 
-        {/* 身份信息：纯文档流，头像 + 右侧文字 baseline 对齐 */}
-        <div className="relative z-10 px-5 sm:px-7 pt-5 sm:pt-6">
-          <div className="flex items-center gap-4">
-            <ProfileHeroAvatar
-              name={u.nickname || u.username}
-              src={u.avatar || undefined}
-            />
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2 flex-wrap">
-                <h1
-                  className="text-[19px] sm:text-[22px] font-extrabold tracking-tight leading-tight truncate"
-                  style={{ color: "var(--ink)" }}
-                >
-                  {u.nickname || u.username}
-                </h1>
-                {u.role !== "user" && (
-                  <RoleBadge role={u.role} boardIds={u.board_ids} />
-                )}
-                {u.banned === true && (
-                  <span
-                    className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold"
-                    style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
-                  >
-                    已封禁
-                  </span>
-                )}
-              </div>
-              <p className="meta mt-1 flex items-center gap-1.5 text-[12.5px] flex-wrap">
-                <span>@{u.username}</span>
-                <span aria-hidden>·</span>
-                <Calendar size={12} />
-                <span>{joinDate} 加入</span>
-              </p>
-            </div>
-          </div>
-          {u.signature && (
-            <p
-              className="mt-3.5 text-[13.5px] leading-relaxed"
-              style={{ color: "var(--ink-2)" }}
-            >
-              {u.signature}
-            </p>
-          )}
-        </div>
-
-        {/* 统计条 */}
+        {/* 身份 + 行内统计：垂直居中，高度约 120px */}
         <div
-          className={`relative z-10 grid mt-4 border-t ${heroStats.length === 3 ? "grid-cols-3" : "grid-cols-2"}`}
-          style={{ borderColor: "var(--line)" }}
+          className={`relative z-10 flex min-h-[120px] items-center gap-3.5 px-5 sm:px-6 py-3.5 ${
+            hasHeroActions ? "pr-24 sm:pr-32" : ""
+          }`}
         >
-          {heroStats.map((s, i) => (
-            <div
-              key={s.label}
-              className="px-5 sm:px-7 py-3.5"
-              style={i > 0 ? { borderLeft: "1px solid var(--line)" } : undefined}
-            >
-              <p
-                className="text-[19px] sm:text-[21px] font-extrabold leading-none tabular-nums"
+          <ProfileHeroAvatar
+            name={u.nickname || u.username}
+            src={u.avatar || undefined}
+          />
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              <h1
+                className="text-[18px] sm:text-[20px] font-extrabold tracking-tight leading-tight truncate"
                 style={{ color: "var(--ink)" }}
               >
-                {s.value}
-              </p>
-              <p className="mt-1.5 text-[11.5px] flex items-center gap-1" style={{ color: "var(--ink-3)" }}>
-                {s.label}
-                {s.foot && (
-                  <span className="hidden sm:inline-flex items-center gap-0.5 font-semibold" style={{ color: "var(--gold)" }}>
-                    <Flame size={10.5} /> {s.foot}
-                  </span>
-                )}
-              </p>
+                {u.nickname || u.username}
+              </h1>
+              {u.role !== "user" && (
+                <RoleBadge role={u.role} boardIds={u.board_ids} />
+              )}
+              {u.banned === true && (
+                <span
+                  className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold"
+                  style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
+                >
+                  已封禁
+                </span>
+              )}
             </div>
-          ))}
+            <p className="mt-1.5 text-[14px] leading-snug flex flex-wrap items-center" style={{ color: "var(--ink-2)" }}>
+              <span>
+                <span className="tabular-nums font-semibold" style={{ color: "var(--ink)" }}>{data.stats.post_count}</span>
+                {" "}帖子
+              </span>
+              {allowComments && (
+                <>
+                  <span aria-hidden className="mx-1.5">·</span>
+                  <span>
+                    <span className="tabular-nums font-semibold" style={{ color: "var(--ink)" }}>{data.stats.comment_count}</span>
+                    {" "}评论
+                  </span>
+                </>
+              )}
+              <span aria-hidden className="mx-1.5">·</span>
+              <span>
+                <span className="tabular-nums font-semibold" style={{ color: "var(--ink)" }}>{data.stats.points}</span>
+                {" "}积分
+              </span>
+              {data.stats.streak > 0 && (
+                <>
+                  <span aria-hidden className="mx-1.5">·</span>
+                  <span className="inline-flex items-center gap-0.5 font-semibold" style={{ color: "var(--gold)" }}>
+                    <Flame size={13} />
+                    {data.stats.streak}天连签
+                  </span>
+                </>
+              )}
+            </p>
+            {u.signature && (
+              <p
+                className="mt-1 text-[13px] leading-snug line-clamp-1"
+                style={{ color: "var(--ink-2)" }}
+              >
+                {u.signature}
+              </p>
+            )}
+          </div>
         </div>
       </section>
 
-      {/* 移动端 Tab chips（lg 以下） */}
-      <div className="lg:hidden -mx-4 sm:-mx-6 px-4 sm:px-6 mb-5">
+      {/* 移动端 Tab chips（md 以下，约 768px） */}
+      <div className="md:hidden -mx-4 sm:-mx-6 px-4 sm:px-6 mb-5">
         <div className="j13-chips">
           {visibleNav.map((t) => (
             <Link
@@ -295,11 +291,14 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
         </div>
       </div>
 
-      {/* ═══ 三栏：左导航 / 中内容 / 右信息 ═══ */}
-      <div className="grid grid-cols-1 items-start lg:grid-cols-[224px_minmax(0,1fr)_280px] xl:grid-cols-[240px_minmax(0,1fr)_300px] gap-x-6 xl:gap-x-7">
+      {/* ═══ 三栏：左 240 / 中自适应 / 右 300；md 以下侧栏折叠 ═══ */}
+      <div className="grid grid-cols-1 items-start md:grid-cols-[240px_minmax(0,1fr)_300px] gap-x-6 xl:gap-x-7">
         {/* 左栏：Tab 导航 */}
-        <aside className="hidden lg:flex w-56 xl:w-60 shrink-0 sticky top-[var(--rail-top)] flex-col gap-4">
-          <section className="j13-module !p-2">
+        <aside className="hidden md:flex w-[240px] shrink-0 sticky top-[var(--rail-top)] flex-col gap-4">
+          <section
+            className="j13-module !p-2 transition-[background-color,box-shadow] duration-150"
+            style={{ boxShadow: cardShadow }}
+          >
             <p
               className="px-2.5 pt-1.5 pb-2 text-[11.5px] font-bold tracking-[0.08em] uppercase"
               style={{ color: "var(--ink-3)" }}
@@ -364,37 +363,40 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
         </div>
 
         {/* 右栏：账号信息 + 积分 + 安全提示 */}
-        <aside className="hidden lg:flex w-[280px] xl:w-[300px] shrink-0 sticky top-[var(--rail-top)] flex-col gap-4 max-h-[var(--rail-max-h)] overflow-hidden">
-          <section className="j13-module">
-            <p className="j13-module-title mb-3">
+        <aside className="hidden md:flex w-[300px] shrink-0 sticky top-[var(--rail-top)] flex-col gap-4 max-h-[var(--rail-max-h)] overflow-hidden">
+          <section
+            className="j13-module !p-4 transition-[background-color,box-shadow] duration-150 hover:bg-[color-mix(in_srgb,var(--ink)_2%,var(--panel))]"
+            style={{ boxShadow: cardShadow }}
+          >
+            <p className="j13-module-title mb-2.5">
               <Hash size={15} style={{ color: "var(--accent)" }} /> 账号信息
             </p>
-            <div className="space-y-3">
+            <div className="flex flex-col gap-2">
               <div>
-                <p className="j13-pulse-lab">用户名</p>
-                <p className="text-[13px] font-semibold mt-0.5" style={{ color: "var(--ink)" }}>
+                <p className="text-[11px] leading-none" style={{ color: "var(--ink-3)" }}>用户名</p>
+                <p className="text-[13px] font-semibold mt-1" style={{ color: "var(--ink)" }}>
                   {u.username}
                 </p>
               </div>
-              <div className="pt-3 border-t" style={{ borderColor: "var(--line)" }}>
-                <p className="j13-pulse-lab">
-                  <Calendar size={11.5} /> 注册时间
+              <div>
+                <p className="text-[11px] leading-none flex items-center gap-1" style={{ color: "var(--ink-3)" }}>
+                  <Calendar size={11} /> 注册时间
                 </p>
-                <p className="text-[13px] font-semibold mt-0.5 tabular-nums" style={{ color: "var(--ink)" }}>
+                <p className="text-[13px] font-semibold mt-1 tabular-nums" style={{ color: "var(--ink)" }}>
                   {joinDate}
                 </p>
               </div>
-              <div className="pt-3 border-t" style={{ borderColor: "var(--line)" }}>
-                <p className="j13-pulse-lab">
-                  <Shield size={11.5} /> 角色
+              <div>
+                <p className="text-[11px] leading-none flex items-center gap-1" style={{ color: "var(--ink-3)" }}>
+                  <Shield size={11} /> 角色
                 </p>
-                <p className="text-[13px] font-semibold mt-0.5" style={{ color: "var(--ink)" }}>
+                <p className="text-[13px] font-semibold mt-1" style={{ color: "var(--ink)" }}>
                   {roleMeta(u.role).label}
                 </p>
               </div>
-              <div className="pt-3 border-t" style={{ borderColor: "var(--line)" }}>
-                <p className="j13-pulse-lab">用户 ID</p>
-                <p className="text-[13px] font-semibold mt-0.5 tabular-nums" style={{ color: "var(--ink)" }}>
+              <div>
+                <p className="text-[11px] leading-none" style={{ color: "var(--ink-3)" }}>用户 ID</p>
+                <p className="text-[13px] font-semibold mt-1 tabular-nums" style={{ color: "var(--ink)" }}>
                   #{u.id}
                 </p>
               </div>
@@ -402,22 +404,32 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
           </section>
 
           {showPoints && (
-            <section className="j13-module">
-              <div className="flex items-center justify-between">
+            <section
+              className="j13-module !p-4 transition-[background-color,box-shadow] duration-150"
+              style={{
+                boxShadow: cardShadow,
+                background: "color-mix(in srgb, var(--accent) 7%, var(--panel))",
+              }}
+            >
+              <div className="flex items-center justify-between gap-2">
                 <p className="j13-module-title">
                   <Flame size={15} style={{ color: "var(--clay)" }} /> 积分
                 </p>
                 {data.stats.streak > 0 && (
                   <span
-                    className="inline-flex items-center gap-1 text-[11.5px] font-bold tabular-nums"
-                    style={{ color: "var(--gold)" }}
+                    className="inline-flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[11px] font-semibold tabular-nums"
+                    style={{
+                      background: "color-mix(in srgb, var(--gold) 16%, var(--panel))",
+                      color: "var(--gold)",
+                    }}
                   >
-                    <Flame size={11.5} /> {data.stats.streak} 天连签
+                    <Flame size={11} />
+                    {data.stats.streak}天连签
                   </span>
                 )}
               </div>
               <p
-                className="mt-2 text-[26px] font-extrabold tabular-nums leading-none"
+                className="mt-2.5 text-[28px] font-bold tabular-nums leading-none"
                 style={{ color: "var(--accent)" }}
               >
                 {data.stats.points}
@@ -426,8 +438,8 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
               {isOwner && (
                 <Link
                   href="/points"
-                  className="inline-flex mt-3 text-[12.5px] font-semibold hover:text-[var(--accent)] transition-colors"
-                  style={{ color: "var(--ink-2)" }}
+                  className="inline-flex mt-3 text-[13px] font-semibold transition-colors duration-150 hover:text-[var(--accent-hi)]"
+                  style={{ color: "var(--accent)" }}
                 >
                   查看流水 →
                 </Link>
@@ -436,7 +448,10 @@ export default async function UserPage({ params, searchParams }: UserPageProps)
           )}
 
           {isOwner && (effectiveTab === "settings" || effectiveTab === "security") && (
-            <section className="j13-module">
+            <section
+              className="j13-module !p-4 transition-[background-color,box-shadow] duration-150 hover:bg-[color-mix(in_srgb,var(--ink)_2%,var(--panel))]"
+              style={{ boxShadow: cardShadow }}
+            >
               <p className="j13-module-title mb-3">
                 <Info size={15} style={{ color: "var(--accent)" }} /> 安全提示
               </p>