jiang13-bbs/frontend/components/PostRow.tsx

import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import type { PostListItem } from "@/lib/api";
import LikeButton from "./LikeButton";
import Avatar from "./Avatar";
import { IconComment, IconEye } from "./Icons";

/** 发帖/回复时间统一为相对时间：刚刚 / N分钟前 / N小时前 / N天前 / N个月前 / N年前 */
function formatRelative(dateStr: string) {
  const t = new Date(dateStr).getTime();
  const diff = Date.now() - t;
  const min = 60_000,
    hour = 60 * min,
    day = 24 * hour;
  if (diff < min) return "刚刚";
  if (diff < hour) return `${Math.floor(diff / min)}分钟前`;
  if (diff < day) return `${Math.floor(diff / hour)}小时前`;
  if (diff < 30 * day) return `${Math.floor(diff / day)}天前`;
  if (diff < 365 * day) return `${Math.floor(diff / (30 * day))}个月前`;
  return `${Math.floor(diff / (365 * day))}年前`;
}

/**
 * 帖子列表行（参考社区信息流样式）：
 * 大头像 + 加粗标题（徽章内联）+ 第二行「板块 · 作者 · 发布时间 ← 最后回复」+
 * 右侧评论数等统计垂直居中。用于首页/板块页/搜索结果。
 */
export default function PostRow({
  post,
  boardHref,
  index = 0,
  compact = false,
  showViews = true,
  showLike = true,
}: {
  post: PostListItem;
  index?: number;
  boardHref?: boolean;
  compact?: boolean;
  showViews?: boolean;
  showLike?: boolean;
}) {
  const lastReply = post.last_reply;
  const replied = lastReply && new Date(lastReply.created_at).getTime() > new Date(post.created_at).getTime() + 60_000;

  return (
    <div
      className="group relative flex items-center gap-3.5 sm:gap-4 px-4 sm:px-5 border-t transition-colors hover:bg-[var(--panel-2)] j13-fade-up"
      style={{
        borderColor: "var(--line)",
        paddingTop: compact ? 15 : 18,
        paddingBottom: compact ? 15 : 18,
        animationDelay: `${Math.min(index, 9) * 35}ms`,
      }}
    >
      <Link
        href={`/u/${post.user.id}`}
        className="shrink-0 above-link"
        aria-label={post.user.nickname}
        tabIndex={-1}
      >
        <Avatar name={post.user.nickname || post.user.username} size={compact ? 44 : 46} />
      </Link>

      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 min-w-0">
          {post.pinned > 0 && <span className="badge-pin shrink-0">置顶</span>}
          {post.recommended && <span className="badge-rec shrink-0">推荐</span>}
          <Link
            href={`/post/${post.id}`}
            className="stretch-link min-w-0 flex-1"
            aria-label={post.title}
          >
            <h3
              className="font-bold text-[16px] sm:text-[17px] leading-snug truncate transition-colors group-hover:text-[var(--accent)]"
              style={{ color: "var(--ink)" }}
            >
              {post.title}
            </h3>
          </Link>
        </div>
        <div className="meta relative z-[2] flex items-center gap-x-2 gap-y-1 mt-1.5 flex-wrap text-[13px]">
          {boardHref && (
            <Link
              href={`/board/${post.board.id}`}
              className={`av-${post.board.id % 8} rounded-md px-1.5 py-px text-[11px] font-bold leading-[1.5] transition-opacity hover:opacity-85`}
            >
              {post.board.name}
            </Link>
          )}
          <Link
            href={`/u/${post.user.id}`}
            className="font-semibold hover:text-[var(--accent)] transition-colors"
            style={{ color: "var(--ink-2)" }}
          >
            {post.user.nickname}
          </Link>
          <span aria-hidden>·</span>
          <span className="tabular-nums">{formatRelative(post.created_at)}</span>
          {replied && (
            <span className="inline-flex items-center gap-1 min-w-0">
              <ArrowLeft size={13} className="shrink-0" aria-hidden />
              <Link
                href={`/u/${lastReply!.user.id}`}
                className="font-medium hover:text-[var(--accent)] transition-colors truncate max-w-[8em]"
              >
                {lastReply!.user.nickname || lastReply!.user.username}
              </Link>
              <span className="tabular-nums shrink-0">{formatRelative(lastReply!.created_at)}</span>
            </span>
          )}
        </div>
      </div>

      <div className="above-link flex items-center gap-3 sm:gap-4 shrink-0">
        <Link
          href={`/post/${post.id}`}
          tabIndex={-1}
          aria-label={`${post.comment_count} 条评论`}
          className={`${showViews ? "hidden sm:inline-flex" : "inline-flex"} items-center gap-1.5 meta tabular-nums text-[13.5px] hover:text-[var(--accent)] transition-colors`}
        >
          <IconComment size={17} />
          {post.comment_count}
        </Link>
        {showViews && (
          <span
            className="hidden md:inline-flex items-center gap-1.5 meta tabular-nums"
            aria-label={`${post.view_count} 次浏览`}
          >
            <IconEye size={15} />
            {post.view_count}
          </span>
        )}
        {showLike && (
          <LikeButton
            postId={String(post.id)}
            liked={post.liked}
            likeCount={post.like_count}
            variant="compact"
          />
        )}
      </div>
    </div>
  );
}