jiang13-bbs/frontend/app/u/[id]/UserProfileContent.tsx

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），刷新/后退/分享链接均保持一致。
 * Tab 切换栏已移至 page.tsx 统一渲染（含 settings / security），此组件仅负责 posts / comments 列表。
 */
export default function UserProfileContent({
  userId,
  profile,
  tab,
  commentData,
  commentError,
  page,
  allowComments = true,
}: {
  userId: string;
  profile: UserProfile;
  tab: "posts" | "comments";
  commentData: UserCommentsResponse | null;
  commentError: boolean;
  page: number;
  allowComments?: boolean;
}) {
  return (
    <div>
      {tab === "posts" ? (
        <div>
          {Array.isArray(profile.posts) && profile.posts.length > 0 ? (
            <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 }}
                  >
                    <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>
                      <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="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>
          )}
          <Pagination
            total={profile.posts_total}
            page={page}
            size={20}
            basePath={`/u/${userId}`}
          />
        </div>
      ) : commentError ? (
        <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>
          <Link href={`/u/${userId}?tab=comments`} className="btn btn-line btn-sm">重新加载</Link>
        </div>
      ) : commentData && (commentData.comments?.length ?? 0) > 0 ? (
        <div>
          <div className="flex flex-col gap-2">
            {(commentData.comments ?? []).map((c) => (
              <Link
                key={c.id}
                href={`/post/${c.post_id}`}
                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>》
                </div>
                <p
                  className="text-[15px] leading-relaxed line-clamp-2"
                  style={{ color: "var(--ink)" }}
                >
                  {c.content}
                </p>
                <div
                  className="mt-2 text-[12px] tabular-nums"
                  style={{ color: "var(--ink-3)" }}
                >
                  {formatRelative(c.created_at)}
                </div>
              </Link>
            ))}
          </div>
          <Pagination
            total={commentData.total}
            page={commentData.page}
            size={20}
            basePath={`/u/${userId}`}
            query={{ tab: "comments" }}
          />
        </div>
      ) : (
        <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>
      )}
    </div>
  );
}