jiang13-bbs/frontend/components/PostAttachments.tsx

"use client";

import { Download } from "lucide-react";
import { postAttachmentDownloadURL, type PostAttachment } from "@/lib/api";
import { toast } from "@/lib/toast";

function formatSize(n: number) {
  if (n < 1024) return `${n} B`;
  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
  return `${(n / 1024 / 1024).toFixed(1)} MB`;
}

export default function PostAttachments({
  postId,
  items,
}: {
  postId: number;
  items: PostAttachment[];
}) {
  if (!items.length) return null;

  const onClick = (a: PostAttachment) => {
    if (a.price_points > 0 && !a.unlocked) {
      // 仍走下载 URL：后端会扣积分或 402
      toast(`将消耗 ${a.price_points} 积分下载`, "ok");
    }
    window.location.href = postAttachmentDownloadURL(postId, a.id);
  };

  return (
    <section className="mt-8 pt-6" style={{ borderTop: "1px solid var(--line)" }}>
      <h2 className="font-extrabold text-[15px] mb-3" style={{ color: "var(--ink)" }}>
        附件
      </h2>
      <ul className="space-y-2">
        {items.map((a) => (
          <li key={a.id}>
            <button
              type="button"
              onClick={() => onClick(a)}
              className="w-full flex items-center gap-3 px-3.5 py-3 rounded-[12px] text-left transition-colors hover:bg-[var(--accent-soft)]"
              style={{ border: "1px solid var(--line)", background: "var(--panel)" }}
            >
              <Download size={16} style={{ color: "var(--accent)" }} />
              <div className="min-w-0 flex-1">
                <div className="truncate font-semibold text-[14px]" style={{ color: "var(--ink)" }}>
                  {a.name}
                </div>
                <div className="meta text-[12px]">
                  {formatSize(a.size)}
                  {a.price_points > 0
                    ? a.unlocked
                      ? " · 已解锁"
                      : ` · ${a.price_points} 积分`
                    : " · 免费"}
                  {a.download_count > 0 ? ` · ${a.download_count} 次下载` : ""}
                </div>
              </div>
              <span className="btn btn-line btn-sm shrink-0">下载</span>
            </button>
          </li>
        ))}
      </ul>
    </section>
  );
}