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

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

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>