feat(web): throttled progress saver with keepalive flush, reader dispatch shell

2026-09-07 15:47:11 +08:00
parent 36a2014a8b
commit 97f6d2d3b6
5 changed files with 235 additions and 5 deletions
@@ -0,0 +1,96 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Suspense, 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";
+
+// reader 任务逐个往里加:Task 7 cbz → Task 8 txt/md → Task 9 pdf → Task 10 epub
+const READERS: Partial<Record<Format, LazyExoticComponent<ComponentType<ReaderProps>>>> = {};
+
+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>
+  );
+}