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

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-18 02:37:12 +08:00
parent b3a4b8bb03
commit fa713bfc3f
9 changed files with 1098 additions and 230 deletions
--- a/frontend/app/u/[id]/ProfileHeroAvatar.tsx
+++ b/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 ? (
--- a/frontend/app/u/[id]/UserProfileContent.tsx
+++ b/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>
--- a/frontend/app/u/[id]/page.tsx
+++ b/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>