feat(reader): remove admin delete button from reader header; shelf card hover remains the only delete entry
This commit is contained in:
@@ -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.
|
||||||
|
|||||||
@@ -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" />
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user