feat(reader): remove admin delete button from reader header; shelf card hover remains the only delete entry

This commit is contained in:
2026-09-08 13:08:46 +08:00
parent a43b73dcef
commit ec3f2c587e
3 changed files with 8 additions and 34 deletions
+5
View File
@@ -36,6 +36,11 @@ The format loosely follows Keep a Changelog and can be adapted to the team's hab
- Whole UI restyled to a warm library palette (stone surfaces + amber accents, replacing cool zinc + emerald): warmer dark chrome, amber primary buttons/links, hover/press feedback on shelf cards (cover lift + glow), reader header with format badge and blur, pill-style CBZ page indicator, EPUB spread centered like a book page. - Whole UI restyled to a warm library palette (stone surfaces + amber accents, replacing cool zinc + emerald): warmer dark chrome, amber primary buttons/links, hover/press feedback on shelf cards (cover lift + glow), reader header with format badge and blur, pill-style CBZ page indicator, EPUB spread centered like a book page.
- 全站换为暖色「书房」配色(stone 深灰面 + amber 琥珀强调,替代冷色 zinc + emerald):书架封面悬停上浮高亮、阅读器顶栏带格式徽章与毛玻璃、CBZ 页码改为悬浮胶囊、EPUB 页面居中成书卷感,主按钮/链接统一琥珀色并补齐悬停/焦点反馈。 - 全站换为暖色「书房」配色(stone 深灰面 + amber 琥珀强调,替代冷色 zinc + emerald):书架封面悬停上浮高亮、阅读器顶栏带格式徽章与毛玻璃、CBZ 页码改为悬浮胶囊、EPUB 页面居中成书卷感,主按钮/链接统一琥珀色并补齐悬停/焦点反馈。
### Removed / 移除
- The admin 删除 button is gone from the reader header: deleting books now lives only in the shelf cover-card hover action, so a destructive tap can't happen one step away from the page-turn zone while reading.
- 阅读器顶栏右上角不再提供 admin「删除」按钮:删除入口仅保留在书架封面卡片的悬停操作中,避免阅读时误触翻页区旁的破坏性删除。
### Fixed / 修复 ### Fixed / 修复
- Comic continuous-scroll mode is contiguous again on phones: the size observer used to miss the scroll container (it was attached while the reader still showed "loading", so the box didn't exist), leaving page geometry computed from a stale 480px default width while pages rendered at the real (e.g. 390px) width — every page gained a constant dead gap. The observer now attaches when the box actually mounts; additionally, mobile address-bar show/hide no longer rebuilds the scroll geometry in continuous/whole-page modes, which used to wipe measured page heights and re-trigger a burst of image requests. - Comic continuous-scroll mode is contiguous again on phones: the size observer used to miss the scroll container (it was attached while the reader still showed "loading", so the box didn't exist), leaving page geometry computed from a stale 480px default width while pages rendered at the real (e.g. 390px) width — every page gained a constant dead gap. The observer now attaches when the box actually mounts; additionally, mobile address-bar show/hide no longer rebuilds the scroll geometry in continuous/whole-page modes, which used to wipe measured page heights and re-trigger a burst of image requests.
-6
View File
@@ -55,12 +55,6 @@ export const IconX = (p: P) => (
</Svg> </Svg>
); );
export const IconTrash = (p: P) => (
<Svg {...p}>
<path d="M4.5 6.5h15M9.5 6.5V4.75A.75.75 0 0 1 10.25 4h3.5a.75.75 0 0 1 .75.75v1.75M6.5 6.5l.8 12a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4l.8-12" />
</Svg>
);
export const IconLogout = (p: P) => ( export const IconLogout = (p: P) => (
<Svg {...p}> <Svg {...p}>
<path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14" /> <path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14" />
+3 -28
View File
@@ -1,11 +1,9 @@
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { Suspense, lazy, useCallback, useMemo, useState, type ComponentType, type LazyExoticComponent } from "react"; import { Suspense, lazy, useCallback, useMemo, useState, type ComponentType, type LazyExoticComponent } from "react";
import { Link, useNavigate, useParams } from "react-router-dom"; import { Link, useParams } from "react-router-dom";
import { api } from "../api/client"; import { api } from "../api/client";
import type { Format } from "../api/types"; import type { Format } from "../api/types";
import { useAuth } from "../auth/AuthContext"; import { IconArrowLeft } from "../components/icons";
import { IconArrowLeft, IconTrash } from "../components/icons";
import { toast } from "../components/Toaster";
import { btn, btnGhost, formatBadge } from "../components/ui"; import { btn, btnGhost, formatBadge } from "../components/ui";
import type { ReaderProps } from "../lib/useProgress"; import type { ReaderProps } from "../lib/useProgress";
@@ -20,9 +18,6 @@ const READERS: Partial<Record<Format, LazyExoticComponent<ComponentType<ReaderPr
export default function Reader() { export default function Reader() {
const { id: idStr } = useParams(); const { id: idStr } = useParams();
const id = Number(idStr); const id = Number(idStr);
const qc = useQueryClient();
const nav = useNavigate();
const { isAdmin } = useAuth();
const [chromeOn, setChromeOn] = useState(true); const [chromeOn, setChromeOn] = useState(true);
const toggle = useCallback(() => setChromeOn((v) => !v), []); const toggle = useCallback(() => setChromeOn((v) => !v), []);
@@ -31,15 +26,6 @@ export default function Reader() {
const bookQ = useQuery({ queryKey: ["book", id], queryFn: () => api.getBook(id), enabled: Number.isFinite(id) }); const bookQ = useQuery({ queryKey: ["book", id], queryFn: () => api.getBook(id), enabled: Number.isFinite(id) });
const progQ = useQuery({ queryKey: ["progress"], queryFn: api.listProgress }); 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 book = bookQ.data;
const body = (() => { const body = (() => {
@@ -81,17 +67,6 @@ export default function Reader() {
<span className="tabular-nums">{Math.round(book.percent * 100)}%</span> <span className="tabular-nums">{Math.round(book.percent * 100)}%</span>
</span> </span>
)} )}
{isAdmin && book && (
<button
className={btn + " ml-auto text-red-300"}
onClick={() => {
if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) del.mutate();
}}
>
<IconTrash className="size-4" />
删除
</button>
)}
</header> </header>
<div className="min-h-0 flex-1"> <div className="min-h-0 flex-1">
<Suspense fallback={<Msg text="加载阅读器…" />}>{body}</Suspense> <Suspense fallback={<Msg text="加载阅读器…" />}>{body}</Suspense>