333 lines
9.8 KiB
TypeScript
333 lines
9.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { Check, Coins, Loader2, Paperclip } from "lucide-react";
|
|
import { apiDownloadPostAttachment, type PostAttachment } from "@/lib/api";
|
|
import { toast } from "@/lib/toast";
|
|
import Modal from "@/components/Modal";
|
|
|
|
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`;
|
|
}
|
|
|
|
function formatPoints(n: number) {
|
|
return n.toLocaleString("zh-CN");
|
|
}
|
|
|
|
function fileExt(name: string) {
|
|
const i = name.lastIndexOf(".");
|
|
if (i <= 0 || i === name.length - 1) return "FILE";
|
|
const ext = name.slice(i + 1).replace(/[^a-zA-Z0-9]/g, "");
|
|
if (!ext || ext.length > 5) return "FILE";
|
|
return ext.toUpperCase();
|
|
}
|
|
|
|
function fileKind(name: string, mime: string): "image" | "archive" | "doc" | "media" | "file" {
|
|
const m = (mime || "").toLowerCase();
|
|
const ext = (name.split(".").pop() || "").toLowerCase();
|
|
if (
|
|
m.startsWith("image/") ||
|
|
["png", "jpg", "jpeg", "gif", "webp", "svg", "bmp", "avif", "ico", "heic"].includes(ext)
|
|
) {
|
|
return "image";
|
|
}
|
|
if (
|
|
m.includes("zip") ||
|
|
m.includes("rar") ||
|
|
m.includes("7z") ||
|
|
m.includes("compress") ||
|
|
["zip", "rar", "7z", "tar", "gz", "bz2", "xz"].includes(ext)
|
|
) {
|
|
return "archive";
|
|
}
|
|
if (
|
|
m.startsWith("audio/") ||
|
|
m.startsWith("video/") ||
|
|
["mp3", "wav", "flac", "aac", "ogg", "mp4", "mkv", "webm", "mov", "avi"].includes(ext)
|
|
) {
|
|
return "media";
|
|
}
|
|
if (
|
|
m.includes("pdf") ||
|
|
m.includes("word") ||
|
|
m.includes("text") ||
|
|
m.includes("sheet") ||
|
|
m.includes("excel") ||
|
|
["pdf", "doc", "docx", "txt", "md", "xls", "xlsx", "ppt", "pptx", "csv"].includes(ext)
|
|
) {
|
|
return "doc";
|
|
}
|
|
return "file";
|
|
}
|
|
|
|
function saveBlob(blob: Blob, filename: string) {
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = filename;
|
|
a.rel = "noopener";
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
a.remove();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
function AttachmentFace({
|
|
a,
|
|
unlocked,
|
|
busy,
|
|
guestPaid,
|
|
}: {
|
|
a: PostAttachment;
|
|
unlocked: boolean;
|
|
busy: boolean;
|
|
guestPaid: boolean;
|
|
}) {
|
|
const paid = a.price_points > 0;
|
|
const cta = guestPaid
|
|
? "登录后下载"
|
|
: busy
|
|
? "处理中…"
|
|
: paid && !unlocked
|
|
? "支付下载"
|
|
: "下载";
|
|
return (
|
|
<>
|
|
<span className="j13-att-type" data-kind={fileKind(a.name, a.mime)} aria-hidden>
|
|
{fileExt(a.name)}
|
|
</span>
|
|
<span className="j13-att-main">
|
|
<span className="j13-att-name">{a.name}</span>
|
|
<span className="j13-att-meta">
|
|
{formatSize(a.size)}
|
|
{a.download_count > 0 ? ` · ${a.download_count} 次下载` : ""}
|
|
</span>
|
|
</span>
|
|
<span
|
|
className={`j13-att-price${paid ? (unlocked ? " is-unlocked" : "") : " is-free"}`}
|
|
aria-hidden
|
|
>
|
|
{paid ? (
|
|
<>
|
|
<span className="j13-att-price-num">{formatPoints(a.price_points)}</span>
|
|
<span className="j13-att-price-unit">
|
|
<Coins size={12} strokeWidth={2.4} />
|
|
{unlocked ? "已解锁" : "积分"}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<span className="j13-att-price-unit">免费</span>
|
|
)}
|
|
</span>
|
|
<span className={`j13-att-cta${paid && !unlocked ? " is-primary" : ""}`}>
|
|
{busy ? <Loader2 size={14} className="animate-spin" aria-hidden /> : null}
|
|
{!busy && unlocked && paid ? <Check size={14} aria-hidden /> : null}
|
|
{cta}
|
|
</span>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default function PostAttachments({
|
|
postId,
|
|
items,
|
|
loggedIn,
|
|
}: {
|
|
postId: number;
|
|
items: PostAttachment[];
|
|
loggedIn: boolean;
|
|
}) {
|
|
const router = useRouter();
|
|
const loginHref = `/login?redirect=${encodeURIComponent(`/post/${postId}`)}`;
|
|
const [busyId, setBusyId] = useState<number | null>(null);
|
|
const [pending, setPending] = useState<PostAttachment | null>(null);
|
|
const [unlockedIds, setUnlockedIds] = useState<number[]>([]);
|
|
const [freshId, setFreshId] = useState<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (freshId == null) return;
|
|
const t = window.setTimeout(() => setFreshId(null), 900);
|
|
return () => window.clearTimeout(t);
|
|
}, [freshId]);
|
|
|
|
if (!items.length) return null;
|
|
|
|
const isUnlocked = (a: PostAttachment) => a.unlocked || unlockedIds.includes(a.id);
|
|
|
|
const download = async (a: PostAttachment) => {
|
|
if (busyId != null) return;
|
|
const firstPaid = a.price_points > 0 && !isUnlocked(a);
|
|
setBusyId(a.id);
|
|
try {
|
|
const res = await apiDownloadPostAttachment(postId, a.id, a.name);
|
|
if (res.status === 401) {
|
|
setPending(null);
|
|
router.push(loginHref);
|
|
return;
|
|
}
|
|
if (res.error || !res.blob) {
|
|
toast(res.error || "下载失败");
|
|
return;
|
|
}
|
|
saveBlob(res.blob, res.filename || a.name);
|
|
setPending(null);
|
|
if (firstPaid) {
|
|
setUnlockedIds((prev) => (prev.includes(a.id) ? prev : [...prev, a.id]));
|
|
setFreshId(a.id);
|
|
toast("已解锁并开始下载", "ok");
|
|
} else {
|
|
toast("已开始下载", "ok");
|
|
}
|
|
router.refresh();
|
|
} catch {
|
|
toast("下载失败，请稍后重试");
|
|
} finally {
|
|
setBusyId(null);
|
|
}
|
|
};
|
|
|
|
const onActivate = (a: PostAttachment) => {
|
|
if (busyId != null) return;
|
|
if (a.price_points > 0 && !isUnlocked(a)) {
|
|
setPending(a);
|
|
return;
|
|
}
|
|
void download(a);
|
|
};
|
|
|
|
return (
|
|
<section className="j13-att" aria-labelledby="j13-att-title">
|
|
<header className="j13-att-head">
|
|
<h2 id="j13-att-title" className="j13-att-title">
|
|
<Paperclip size={15} strokeWidth={2.25} aria-hidden />
|
|
附件
|
|
</h2>
|
|
<span className="meta text-[12.5px]">{items.length} 个文件</span>
|
|
</header>
|
|
<ul className="j13-att-list">
|
|
{items.map((a) => {
|
|
const guestPaid = !loggedIn && a.price_points > 0;
|
|
const unlocked = isUnlocked(a);
|
|
const busy = busyId === a.id;
|
|
const paidLocked = a.price_points > 0 && !unlocked;
|
|
const label = guestPaid
|
|
? `登录后下载 ${a.name}，需 ${formatPoints(a.price_points)} 积分`
|
|
: paidLocked
|
|
? `下载 ${a.name}，需 ${formatPoints(a.price_points)} 积分`
|
|
: a.price_points > 0
|
|
? `下载 ${a.name}（已解锁）`
|
|
: `下载 ${a.name}（免费）`;
|
|
const className = [
|
|
"j13-att-card",
|
|
a.price_points > 0 ? "is-paid" : "",
|
|
unlocked && a.price_points > 0 ? "is-unlocked" : "",
|
|
busy ? "is-busy" : "",
|
|
freshId === a.id ? "is-fresh" : "",
|
|
]
|
|
.filter(Boolean)
|
|
.join(" ");
|
|
const face = (
|
|
<AttachmentFace a={a} unlocked={unlocked} busy={busy} guestPaid={guestPaid} />
|
|
);
|
|
return (
|
|
<li key={a.id}>
|
|
{guestPaid ? (
|
|
<Link href={loginHref} className={className} aria-label={label}>
|
|
{face}
|
|
</Link>
|
|
) : (
|
|
<button
|
|
type="button"
|
|
className={className}
|
|
aria-label={label}
|
|
aria-busy={busy || undefined}
|
|
disabled={busyId != null}
|
|
onClick={() => onActivate(a)}
|
|
>
|
|
{face}
|
|
</button>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
|
|
<Modal
|
|
open={!!pending}
|
|
title="确认支付"
|
|
description="支付一次后永久解锁，不重复扣费"
|
|
busy={busyId != null}
|
|
zIndexClass="z-[1100]"
|
|
maxWidthClass="max-w-sm"
|
|
panelClassName="p-5"
|
|
onClose={() => {
|
|
if (busyId != null) return;
|
|
setPending(null);
|
|
}}
|
|
footer={
|
|
<>
|
|
<button
|
|
type="button"
|
|
className="btn btn-line btn-sm"
|
|
disabled={busyId != null}
|
|
onClick={() => {
|
|
if (busyId != null) return;
|
|
setPending(null);
|
|
}}
|
|
>
|
|
取消
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-sm"
|
|
disabled={busyId != null || !pending}
|
|
onClick={() => {
|
|
if (!pending) return;
|
|
void download(pending);
|
|
}}
|
|
>
|
|
{busyId != null ? (
|
|
<>
|
|
<Loader2 size={14} className="animate-spin" aria-hidden />
|
|
处理中…
|
|
</>
|
|
) : (
|
|
`支付 ${pending ? formatPoints(pending.price_points) : ""} 积分`
|
|
)}
|
|
</button>
|
|
</>
|
|
}
|
|
>
|
|
{pending ? (
|
|
<div className="j13-att-pay">
|
|
<div className="j13-att-pay-file">
|
|
<span
|
|
className="j13-att-type"
|
|
data-kind={fileKind(pending.name, pending.mime)}
|
|
aria-hidden
|
|
>
|
|
{fileExt(pending.name)}
|
|
</span>
|
|
<div className="min-w-0">
|
|
<p className="j13-att-pay-name">{pending.name}</p>
|
|
<p className="meta text-[12px] !mb-0">{formatSize(pending.size)}</p>
|
|
</div>
|
|
</div>
|
|
<div className="j13-att-pay-hero">
|
|
<span className="j13-att-pay-num">{formatPoints(pending.price_points)}</span>
|
|
<span className="j13-att-pay-unit">
|
|
<Coins size={14} strokeWidth={2.4} aria-hidden />
|
|
积分
|
|
</span>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</Modal>
|
|
</section>
|
|
);
|
|
}
|