102 lines
3.7 KiB
TypeScript
102 lines
3.7 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { Suspense, lazy, type ComponentType, type LazyExoticComponent } from "react";
|
|
import { Link, useNavigate, useParams } from "react-router-dom";
|
|
import { api } from "../api/client";
|
|
import type { Format } from "../api/types";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
import { toast } from "../components/Toaster";
|
|
import { btn } from "../components/ui";
|
|
import type { ReaderProps } from "../lib/useProgress";
|
|
|
|
const READERS: Partial<Record<Format, LazyExoticComponent<ComponentType<ReaderProps>>>> = {
|
|
cbz: lazy(() => import("../readers/CbzReader")),
|
|
txt: lazy(() => import("../readers/TextReader")),
|
|
md: lazy(() => import("../readers/TextReader")),
|
|
pdf: lazy(() => import("../readers/PdfReader")),
|
|
epub: lazy(() => import("../readers/EpubReader")),
|
|
};
|
|
|
|
export default function Reader() {
|
|
const { id: idStr } = useParams();
|
|
const id = Number(idStr);
|
|
const qc = useQueryClient();
|
|
const nav = useNavigate();
|
|
const { isAdmin } = useAuth();
|
|
|
|
const bookQ = useQuery({ queryKey: ["book", id], queryFn: () => api.getBook(id), enabled: Number.isFinite(id) });
|
|
const progQ = useQuery({ queryKey: ["progress"], queryFn: api.listProgress });
|
|
const del = useMutation({
|
|
mutationFn: () => api.deleteBook(id),
|
|
onSuccess: () => {
|
|
toast("ok", "已删除");
|
|
qc.invalidateQueries({ queryKey: ["books"] });
|
|
nav("/");
|
|
},
|
|
onError: (e) => toast("err", e instanceof Error ? e.message : "删除失败"),
|
|
});
|
|
|
|
const book = bookQ.data;
|
|
const body = (() => {
|
|
if (!Number.isFinite(id)) return <Msg text="无效的书 id" />;
|
|
if (bookQ.isPending) return <Msg text="加载中…" />;
|
|
if (bookQ.isError)
|
|
return (
|
|
<Msg
|
|
text={"加载失败:" + (bookQ.error instanceof Error ? bookQ.error.message : "")}
|
|
retry={() => bookQ.refetch()}
|
|
/>
|
|
);
|
|
if (!book) return <Msg text="未找到这本书" />;
|
|
if (book.state === "error") return <Msg text={`文件损坏:${book.error}`} />;
|
|
if (progQ.isPending) return <Msg text="恢复进度…" />;
|
|
const R = READERS[book.format];
|
|
if (!R) return <Msg text={`暂不支持的格式:${book.format}`} />;
|
|
const row = (progQ.data ?? []).find((r) => r.library_id === book.library_id && r.path === book.path);
|
|
return <R book={book} initialLocator={row?.locator} />;
|
|
})();
|
|
|
|
return (
|
|
<div className="flex h-full flex-col">
|
|
<header className="flex shrink-0 items-center gap-3 border-b border-zinc-800 px-4 py-2 text-sm">
|
|
<Link to="/" className="text-zinc-400 hover:text-zinc-100">
|
|
← 书架
|
|
</Link>
|
|
<span className="truncate font-medium">{book?.title ?? "…"}</span>
|
|
<span className="text-zinc-500">
|
|
{book?.library ? book.library + " · " : ""}
|
|
{book?.format}
|
|
{book ? ` · ${Math.round(book.percent * 100)}%` : ""}
|
|
</span>
|
|
{isAdmin && book && (
|
|
<button
|
|
className={btn + " ml-auto text-red-300"}
|
|
onClick={() => {
|
|
if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) del.mutate();
|
|
}}
|
|
>
|
|
删除
|
|
</button>
|
|
)}
|
|
</header>
|
|
<div className="min-h-0 flex-1">
|
|
<Suspense fallback={<Msg text="加载阅读器…" />}>{body}</Suspense>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Msg({ text, retry }: { text: string; retry?: () => void }) {
|
|
return (
|
|
<div className="grid h-full place-items-center p-8 text-center text-zinc-500">
|
|
<div>
|
|
<p className="mb-3">{text}</p>
|
|
{retry && (
|
|
<button className={btn} onClick={retry}>
|
|
重试
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|