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

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

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>