feat(ui): content-first shelf redesign — responsive cover grid, hover overlays, format badges, skeletons, sticky blurred top bar, brand login, SVG icon set, animated toasts
This commit is contained in:
@@ -28,6 +28,9 @@ The format loosely follows Keep a Changelog and can be adapted to the team's hab
|
||||
|
||||
### Changed / 变更
|
||||
|
||||
- Shelf rebuilt into a content-first library UI: responsive cover grid (auto-fill 3:4 posters) with hover overlays for pages/size, color-coded format badges, in-cover progress bars, staggered entrance animations, skeleton loading, and dedicated empty/error/searching states; 继续阅读 is now a horizontal resume strip (cover + progress + library); library filter became a segmented pill bar with an icon search field in a sticky blurred top bar (brand mark, admin nav pills, user chip, icon logout); login got a brand card with icon-adorned inputs; toasts animate with icons; missing covers render a serif-initial placeholder instead of an endless pulse.
|
||||
- 书架重构为「内容优先」的现代书库界面：响应式封面网格（自适应列宽、3:4 海报），悬停显示页数/大小浮层、格式彩色徽章、封面内嵌进度条、卡片错峰入场动画、骨架屏加载与空/错/搜索无结果专属状态；「继续阅读」改为横向续读卡片条（封面+进度+所属库）；库筛选变成分段 pill，搜索框带图标并移入毛玻璃吸顶顶栏（品牌标、管理导航 pill、用户胶囊、图标退出）；登录页升级为主视觉卡片与带图标输入框；Toast 带动画与图标；无封面书籍以衬线首字占位，不再无限脉冲。
|
||||
|
||||
- .txt chapter splitting no longer recognizes volumes: 「第X卷/部」 lines stay plain body text and volume-only books fall back to pseudo-sections as before; chapter switching moves from the dropdown to a 目录 sidebar overlay that highlights the current chapter, scrolls it into view, and closes on click-outside or after picking a chapter.
|
||||
- .txt 章节切分不再感知卷:「第X卷/部」行只作为正文文本,只有卷的书和以前一样退回伪章节切分;换章从下拉框改为「目录」侧边栏浮层——当前章高亮并自动居中可见,点击空白处或选定章节即收起。
|
||||
- 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.
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import type { Book } from "../api/types";
|
||||
import { fetchObjectUrl } from "../lib/authImage";
|
||||
import { btn } from "./ui";
|
||||
import { btn, formatBadge } from "./ui";
|
||||
import { IconAlert } from "./icons";
|
||||
|
||||
export function useAuthedImage(url: string | undefined): { src: string; failed: boolean; retry: () => void } {
|
||||
const [state, setState] = useState<{ key: string; src: string; failed: boolean }>({ key: "", src: "", failed: false });
|
||||
@@ -27,14 +28,29 @@ export function useAuthedImage(url: string | undefined): { src: string; failed:
|
||||
|
||||
export function Cover({ book, className }: { book: Book; className?: string }) {
|
||||
const { src, failed, retry } = useAuthedImage(book.cover_url);
|
||||
if (failed)
|
||||
if (!book.cover_url || failed) {
|
||||
return (
|
||||
<div className={`grid place-items-center bg-stone-900 ${className ?? ""}`}>
|
||||
<button className={btn} onClick={retry} aria-label="封面加载失败,重试">
|
||||
重试
|
||||
</button>
|
||||
<div
|
||||
className={`relative grid place-items-center overflow-hidden bg-linear-to-br from-stone-800 to-stone-900 ${className ?? ""}`}
|
||||
>
|
||||
<span className="select-none font-serif text-4xl text-stone-500">{Array.from(book.title)[0] ?? "?"}</span>
|
||||
<span className={formatBadge(book.format, "absolute bottom-1.5 right-1.5")}>{book.format}</span>
|
||||
{failed && (
|
||||
<button className={btn + " absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"} onClick={retry}>
|
||||
<IconAlert className="size-4" />
|
||||
封面重试
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
if (!src) return <div className={`animate-pulse bg-stone-800 ${className ?? ""}`} />;
|
||||
return <img src={src} alt="" loading="lazy" className={`bg-stone-900 object-cover ${className ?? ""}`} />;
|
||||
}
|
||||
if (!src) return <div className={`animate-pulse bg-stone-800/80 ${className ?? ""}`} role="presentation" />;
|
||||
return (
|
||||
<img
|
||||
src={src}
|
||||
alt={`《${book.title}》封面`}
|
||||
loading="lazy"
|
||||
className={`bg-stone-900 object-cover ${className ?? ""}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useEffect, useState, type ReactNode } from "react";
|
||||
import { IconAlert, IconCheck } from "./icons";
|
||||
|
||||
type Toast = { id: number; kind: "ok" | "err"; text: ReactNode };
|
||||
|
||||
@@ -31,10 +32,13 @@ export function Toaster() {
|
||||
<div
|
||||
key={t.id}
|
||||
role="status"
|
||||
className={`max-w-sm rounded-lg px-4 py-2 text-sm shadow-lg ring-1 ring-white/10 ${
|
||||
t.kind === "ok" ? "bg-emerald-900 text-emerald-100" : "bg-red-900 text-red-100"
|
||||
className={`fx-rise flex max-w-sm items-center gap-2 rounded-xl px-4 py-2.5 text-sm shadow-xl ring-1 backdrop-blur-md ${
|
||||
t.kind === "ok"
|
||||
? "bg-emerald-950/90 text-emerald-100 ring-emerald-500/25"
|
||||
: "bg-red-950/90 text-red-100 ring-red-500/30"
|
||||
}`}
|
||||
>
|
||||
{t.kind === "ok" ? <IconCheck className="size-4 shrink-0 text-emerald-400" /> : <IconAlert className="size-4 shrink-0 text-red-400" />}
|
||||
{t.text}
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -1,41 +1,64 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link, NavLink } from "react-router-dom";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import { btn } from "./ui";
|
||||
import { IconBooks, IconFolder, IconLogout, IconUser } from "./icons";
|
||||
import { btnGhost } from "./ui";
|
||||
|
||||
export function TopBar({ right }: { right?: ReactNode }) {
|
||||
const { user, isAdmin, logout } = useAuth();
|
||||
return (
|
||||
<header className="flex shrink-0 items-center gap-2 border-b border-stone-800/80 px-4 py-3">
|
||||
<Link to="/" className="font-serif text-lg font-semibold tracking-wide">
|
||||
Book<span className="text-amber-500">Lib</span>
|
||||
<header className="sticky top-0 z-30 flex shrink-0 items-center gap-1 border-b border-white/[0.06] bg-stone-950/80 px-4 py-2.5 backdrop-blur-md sm:px-6">
|
||||
<Link
|
||||
to="/"
|
||||
className="flex shrink-0 items-center gap-2 rounded-lg pr-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500"
|
||||
>
|
||||
<span className="grid size-7 place-items-center rounded-lg bg-linear-to-br from-amber-500 to-orange-600 text-stone-950 shadow-md shadow-amber-500/25">
|
||||
<IconBooks className="size-4.5" />
|
||||
</span>
|
||||
<span className="font-serif text-lg font-semibold tracking-wide">
|
||||
Book<span className="text-amber-400">Lib</span>
|
||||
</span>
|
||||
</Link>
|
||||
{isAdmin && (
|
||||
<Link
|
||||
className="rounded-md px-2 py-1 text-sm text-stone-400 transition-colors hover:bg-stone-800 hover:text-stone-100"
|
||||
to="/admin/users"
|
||||
>
|
||||
用户
|
||||
</Link>
|
||||
<nav aria-label="管理" className="ml-2 hidden items-center gap-1 sm:flex">
|
||||
<TabLink to="/admin/users">
|
||||
<IconUser className="size-4" />
|
||||
用户
|
||||
</TabLink>
|
||||
<TabLink to="/admin/libraries">
|
||||
<IconFolder className="size-4" />
|
||||
库管理
|
||||
</TabLink>
|
||||
</nav>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<Link
|
||||
className="rounded-md px-2 py-1 text-sm text-stone-400 transition-colors hover:bg-stone-800 hover:text-stone-100"
|
||||
to="/admin/libraries"
|
||||
>
|
||||
库管理
|
||||
</Link>
|
||||
)}
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
<div className="ml-auto flex items-center gap-2 sm:gap-3">
|
||||
{right}
|
||||
<span className="text-sm text-stone-400">
|
||||
{user?.username}
|
||||
{isAdmin ? "(admin)" : ""}
|
||||
<span className="flex items-center gap-2 rounded-full bg-white/[0.05] py-1 pl-1 pr-3 text-sm text-stone-300 ring-1 ring-white/[0.07]">
|
||||
<span className="grid size-6 shrink-0 place-items-center rounded-full bg-amber-500/20 text-[11px] font-semibold text-amber-300 ring-1 ring-amber-500/30">
|
||||
{Array.from(user?.username ?? "?")[0]?.toUpperCase()}
|
||||
</span>
|
||||
<span className="hidden max-w-28 truncate sm:inline">{user?.username}</span>
|
||||
{isAdmin && <span className="hidden rounded bg-amber-500/15 px-1 text-[10px] font-semibold text-amber-300 md:inline">admin</span>}
|
||||
</span>
|
||||
<button className={btn} onClick={logout}>
|
||||
退出
|
||||
<button className={btnGhost} onClick={logout} aria-label="退出登录" title="退出登录">
|
||||
<IconLogout className="size-4.5" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
function TabLink({ to, children }: { to: string; children: ReactNode }) {
|
||||
return (
|
||||
<NavLink
|
||||
to={to}
|
||||
className={({ isActive }) =>
|
||||
`flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 ${
|
||||
isActive ? "bg-white/[0.09] text-stone-100 ring-1 ring-white/10" : "text-stone-400 hover:bg-white/[0.06] hover:text-stone-100"
|
||||
}`
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
import type { SVGProps } from "react";
|
||||
|
||||
// 统一 1.7px 描边的线性图标(Phosphor 风格),尺寸由外部 className 控制
|
||||
function Svg({ children, ...p }: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.7}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
{...p}
|
||||
>
|
||||
{children}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
type P = SVGProps<SVGSVGElement>;
|
||||
|
||||
export const IconBooks = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<path d="M4 5.5A1.5 1.5 0 0 1 5.5 4H10a1.5 1.5 0 0 1 1.5 1.5V18a2 2 0 0 0-2-2H5.5A1.5 1.5 0 0 1 4 14.5v-9Z" />
|
||||
<path d="M13 8h4.5A1.5 1.5 0 0 1 19 9.5v8A1.5 1.5 0 0 1 17.5 19H13" />
|
||||
<path d="M7 4v12M16 12.5v4" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconSearch = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<circle cx="11" cy="11" r="6.5" />
|
||||
<path d="m16 16 4 4" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconRefresh = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<path d="M20 12a8 8 0 1 1-2.34-5.66" />
|
||||
<path d="M20 4v4.5h-4.5" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconScan = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<path d="M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16" />
|
||||
<path d="M7 12h10" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconX = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<path d="m6 6 12 12M18 6 6 18" />
|
||||
</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) => (
|
||||
<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="M10 8 6 12l4 4M6 12h10" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconArrowLeft = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<path d="M20 12H4m0 0 6-6m-6 6 6 6" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconBookOpen = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<path d="M12 6.5C10.5 5 8.5 4.5 4 4.5v13c4.5 0 6.5.5 8 2 1.5-1.5 3.5-2 8-2v-13c-4.5 0-6.5.5-8 2Z" />
|
||||
<path d="M12 6.5v13" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconUser = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<circle cx="12" cy="8" r="3.5" />
|
||||
<path d="M5 19.5c1.2-3 3.7-4.5 7-4.5s5.8 1.5 7 4.5" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconLock = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<rect x="5.5" y="10.5" width="13" height="9" rx="1.5" />
|
||||
<path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5M12 14v2.5" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconCheck = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<path d="m5 12.5 4.5 4.5L19 7" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconAlert = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<circle cx="12" cy="12" r="8.5" />
|
||||
<path d="M12 7.5V13m0 3.5v.01" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconClock = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<circle cx="12" cy="12" r="8.5" />
|
||||
<path d="M12 7.5V12l3 2" />
|
||||
</Svg>
|
||||
);
|
||||
|
||||
export const IconFolder = (p: P) => (
|
||||
<Svg {...p}>
|
||||
<path d="M4 6.5A1.5 1.5 0 0 1 5.5 5h3.2a1.5 1.5 0 0 1 1.2.6l.9 1.2a1.5 1.5 0 0 0 1.2.6h6.5A1.5 1.5 0 0 1 20 9.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5v-11Z" />
|
||||
</Svg>
|
||||
);
|
||||
@@ -1,7 +1,38 @@
|
||||
import type { Format } from "../api/types";
|
||||
|
||||
export const btn =
|
||||
"rounded-lg bg-stone-800 px-3 py-1.5 text-sm transition-colors hover:bg-stone-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:bg-stone-600 disabled:cursor-not-allowed disabled:opacity-50";
|
||||
"inline-flex items-center gap-1.5 rounded-lg bg-white/[0.06] px-3 py-1.5 text-sm ring-1 ring-white/10 transition-colors hover:bg-white/[0.11] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:bg-white/[0.15] disabled:cursor-not-allowed disabled:opacity-50";
|
||||
export const btnPrimary =
|
||||
"rounded-lg bg-amber-600 px-3 py-1.5 text-sm text-stone-950 transition-colors hover:bg-amber-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:bg-amber-400 disabled:cursor-not-allowed disabled:opacity-50";
|
||||
"inline-flex items-center gap-1.5 rounded-lg bg-amber-500 px-3 py-1.5 text-sm font-medium text-stone-950 shadow-md shadow-amber-500/20 transition-colors hover:bg-amber-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:bg-amber-300 disabled:cursor-not-allowed disabled:opacity-50";
|
||||
export const btnGhost =
|
||||
"inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-stone-400 transition-colors hover:bg-white/[0.07] hover:text-stone-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500";
|
||||
export const input =
|
||||
"rounded-lg border border-stone-700 bg-stone-900 px-3 py-1.5 text-sm outline-none transition-colors placeholder:text-stone-500 focus:border-amber-500/70";
|
||||
export const card = "rounded-xl border border-stone-800 bg-stone-900";
|
||||
"rounded-lg bg-white/[0.04] px-3 py-1.5 text-sm ring-1 ring-white/10 outline-none transition placeholder:text-stone-500 focus:bg-white/[0.06] focus:ring-2 focus:ring-amber-500/60";
|
||||
export const card = "rounded-xl bg-stone-900/70 ring-1 ring-white/[0.07]";
|
||||
|
||||
// 库/筛选分段 pill
|
||||
export const pill =
|
||||
"rounded-full px-3.5 py-1.5 text-sm text-stone-400 ring-1 ring-transparent transition-colors hover:bg-white/[0.07] hover:text-stone-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500";
|
||||
export const pillActive = "bg-amber-500/15 text-amber-300 ring-amber-500/30 hover:bg-amber-500/20 hover:text-amber-200";
|
||||
|
||||
// 格式徽章:按类型着色,色彩之外始终伴随文字,不依赖颜色单独传义
|
||||
export const FORMAT_BADGE: Record<Format, string> = {
|
||||
cbz: "bg-orange-500/15 text-orange-300 ring-orange-500/25",
|
||||
pdf: "bg-rose-500/15 text-rose-300 ring-rose-500/25",
|
||||
epub: "bg-sky-500/15 text-sky-300 ring-sky-500/25",
|
||||
txt: "bg-emerald-500/15 text-emerald-300 ring-emerald-500/25",
|
||||
md: "bg-teal-500/15 text-teal-300 ring-teal-500/25",
|
||||
};
|
||||
|
||||
export function formatBadge(fmt: Format, extra = ""): string {
|
||||
return `rounded px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide ring-1 ${FORMAT_BADGE[fmt]} ${extra}`;
|
||||
}
|
||||
|
||||
export function formatSize(bytes: number): string {
|
||||
if (bytes <= 0) return "";
|
||||
const units = ["B", "KB", "MB", "GB"];
|
||||
let i = 0;
|
||||
let n = bytes;
|
||||
for (; n >= 1024 && i < units.length - 1; i++) n /= 1024;
|
||||
return `${n >= 10 || i === 0 ? Math.round(n) : n.toFixed(1)} ${units[i]}`;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,17 @@ body,
|
||||
}
|
||||
body {
|
||||
@apply bg-stone-950 text-stone-100 antialiased;
|
||||
/* 顶部一抹极淡的琥珀氛围光,避免大面积纯黑的"朴素感" */
|
||||
background-image: radial-gradient(60rem 28rem at 50% -8rem, rgb(217 119 6 / 0.07), transparent 70%);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* 入场:卡片/区块轻微上浮淡入(列表 stagger 用 style.animationDelay) */
|
||||
@keyframes fx-rise {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
.fx-rise { animation: fx-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@@ -57,6 +67,7 @@ body {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.rd-sheet { animation: none; }
|
||||
.rd-rise-anim { transition: none !important; }
|
||||
.fx-rise { animation: none; }
|
||||
}
|
||||
|
||||
/* markdown 正文(仅 .md-body 作用域) */
|
||||
|
||||
@@ -1,9 +1,21 @@
|
||||
import { useState, type FormEvent } from "react";
|
||||
import { useState, type FormEvent, type ReactNode } from "react";
|
||||
import { Navigate, useLocation } from "react-router-dom";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import { IconBooks, IconLock, IconUser } from "../components/icons";
|
||||
import { toast } from "../components/Toaster";
|
||||
import { btnPrimary, card, input } from "../components/ui";
|
||||
|
||||
function Field({ icon, children }: { icon: ReactNode; children: ReactNode }) {
|
||||
return (
|
||||
<label className="block">
|
||||
<span className="relative block">
|
||||
<span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-stone-500">{icon}</span>
|
||||
{children}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Login() {
|
||||
const { login, user } = useAuth();
|
||||
const loc = useLocation() as { state?: { from?: string } };
|
||||
@@ -27,13 +39,39 @@ export default function Login() {
|
||||
|
||||
return (
|
||||
<div className="grid h-full place-items-center p-4">
|
||||
<form onSubmit={submit} className={`${card} w-full max-w-sm space-y-4 p-6`}>
|
||||
<h1 className="text-lg font-semibold">BookLib 登录</h1>
|
||||
<input className={input + " w-full"} value={u} onChange={(e) => setU(e.target.value)}
|
||||
aria-label="用户名" placeholder="用户名" autoFocus autoComplete="username" />
|
||||
<input className={input + " w-full"} type="password" value={p} onChange={(e) => setP(e.target.value)}
|
||||
aria-label="密码" placeholder="密码" autoComplete="current-password" />
|
||||
<button className={btnPrimary + " w-full"} disabled={busy || !u || !p}>
|
||||
<form onSubmit={submit} className={`${card} fx-rise w-full max-w-sm space-y-4 p-8 shadow-2xl shadow-black/40`}>
|
||||
<div className="flex flex-col items-center pb-2 text-center">
|
||||
<span className="grid size-12 place-items-center rounded-2xl bg-linear-to-br from-amber-500 to-orange-600 text-stone-950 shadow-lg shadow-amber-500/25">
|
||||
<IconBooks className="size-7" />
|
||||
</span>
|
||||
<h1 className="mt-4 font-serif text-2xl font-semibold tracking-wide">
|
||||
Book<span className="text-amber-400">Lib</span>
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-stone-500">你的漫画与书籍藏书馆</p>
|
||||
</div>
|
||||
<Field icon={<IconUser className="size-4" />}>
|
||||
<input
|
||||
className={input + " w-full pl-9"}
|
||||
value={u}
|
||||
onChange={(e) => setU(e.target.value)}
|
||||
aria-label="用户名"
|
||||
placeholder="用户名"
|
||||
autoFocus
|
||||
autoComplete="username"
|
||||
/>
|
||||
</Field>
|
||||
<Field icon={<IconLock className="size-4" />}>
|
||||
<input
|
||||
className={input + " w-full pl-9"}
|
||||
type="password"
|
||||
value={p}
|
||||
onChange={(e) => setP(e.target.value)}
|
||||
aria-label="密码"
|
||||
placeholder="密码"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</Field>
|
||||
<button className={btnPrimary + " w-full justify-center py-2"} disabled={busy || !u || !p}>
|
||||
{busy ? "登录中…" : "登录"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -4,8 +4,9 @@ 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 { IconArrowLeft, IconTrash } from "../components/icons";
|
||||
import { toast } from "../components/Toaster";
|
||||
import { btn } from "../components/ui";
|
||||
import { btn, btnGhost, formatBadge } from "../components/ui";
|
||||
import type { ReaderProps } from "../lib/useProgress";
|
||||
|
||||
const READERS: Partial<Record<Format, LazyExoticComponent<ComponentType<ReaderProps>>>> = {
|
||||
@@ -68,17 +69,15 @@ export default function Reader() {
|
||||
(chromeOn ? "h-11 py-2 opacity-100" : "h-0 border-b-0 py-0 opacity-0")
|
||||
}
|
||||
>
|
||||
<Link
|
||||
to="/"
|
||||
className="shrink-0 rounded-md px-2 py-1 text-stone-400 transition-colors hover:bg-stone-800 hover:text-stone-100"
|
||||
>
|
||||
← 书架
|
||||
<Link to="/" className={btnGhost + " shrink-0"}>
|
||||
<IconArrowLeft className="size-4" />
|
||||
书架
|
||||
</Link>
|
||||
<span className="truncate font-medium">{book?.title ?? "…"}</span>
|
||||
{book && (
|
||||
<span className="hidden shrink-0 items-center gap-2 text-xs text-stone-500 sm:flex">
|
||||
{book.library && <span>{book.library}</span>}
|
||||
<span className="rounded bg-stone-800/80 px-1.5 py-0.5 uppercase">{book.format}</span>
|
||||
<span className={formatBadge(book.format)}>{book.format}</span>
|
||||
<span className="tabular-nums">{Math.round(book.percent * 100)}%</span>
|
||||
</span>
|
||||
)}
|
||||
@@ -89,6 +88,7 @@ export default function Reader() {
|
||||
if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) del.mutate();
|
||||
}}
|
||||
>
|
||||
<IconTrash className="size-4" />
|
||||
删除
|
||||
</button>
|
||||
)}
|
||||
|
||||
+154
-74
@@ -5,63 +5,87 @@ import { api } from "../api/client";
|
||||
import type { Book } from "../api/types";
|
||||
import { useAuth } from "../auth/AuthContext";
|
||||
import { Cover } from "../components/Cover";
|
||||
import { IconAlert, IconBookOpen, IconClock, IconFolder, IconRefresh, IconScan, IconSearch, IconX } from "../components/icons";
|
||||
import { TopBar } from "../components/TopBar";
|
||||
import { toast } from "../components/Toaster";
|
||||
import { btn, btnPrimary, card, input } from "../components/ui";
|
||||
import { btn, card, formatBadge, formatSize, input, pill, pillActive } from "../components/ui";
|
||||
import { groupByDir } from "../lib/group";
|
||||
|
||||
function BookCard({
|
||||
book,
|
||||
index,
|
||||
onOpen,
|
||||
onDelete,
|
||||
}: {
|
||||
book: Book;
|
||||
index: number;
|
||||
onOpen: () => void;
|
||||
onDelete: () => void;
|
||||
}) {
|
||||
const { isAdmin } = useAuth();
|
||||
const pct = Math.round(book.percent * 100);
|
||||
return (
|
||||
<div className="group relative w-32 shrink-0">
|
||||
<button onClick={onOpen} className="block w-full text-left">
|
||||
<Cover
|
||||
book={book}
|
||||
className="aspect-[3/4] w-32 rounded-lg shadow-md ring-1 ring-stone-800 transition duration-200 group-hover:-translate-y-1 group-hover:shadow-xl group-hover:ring-stone-600"
|
||||
/>
|
||||
<p className="mt-1.5 truncate text-xs text-stone-200 transition-colors group-hover:text-amber-300">
|
||||
<div
|
||||
className="group fx-rise relative flex flex-col"
|
||||
style={{ animationDelay: `${Math.min(index, 23) * 25}ms` }}
|
||||
>
|
||||
<button onClick={onOpen} className="block w-full text-left focus-visible:outline-none">
|
||||
<div className="relative aspect-[3/4] w-full overflow-hidden rounded-lg shadow-md ring-1 ring-white/10 transition duration-200 will-change-transform group-hover:-translate-y-1 group-hover:shadow-xl group-hover:shadow-black/40 group-hover:ring-amber-500/40 group-focus-visible:-translate-y-1 group-focus-visible:ring-amber-500">
|
||||
<Cover book={book} className="size-full" />
|
||||
<span className={formatBadge(book.format, "absolute left-1.5 top-1.5 backdrop-blur-sm")}>{book.format}</span>
|
||||
{book.state === "error" && (
|
||||
<span
|
||||
className="absolute right-1.5 top-1.5 rounded bg-red-950/90 px-1.5 py-0.5 text-[10px] font-semibold text-red-200 ring-1 ring-red-500/40"
|
||||
title={book.error}
|
||||
>
|
||||
损坏
|
||||
</span>
|
||||
)}
|
||||
<span className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between gap-1 bg-linear-to-t from-black/80 via-black/30 to-transparent p-1.5 pt-6 text-[10px] tabular-nums text-stone-200 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100">
|
||||
<span>{book.pages > 0 ? `${book.pages} 页` : ""}</span>
|
||||
<span>{formatSize(book.size)}</span>
|
||||
</span>
|
||||
{pct > 0 && (
|
||||
<span className="absolute inset-x-0 bottom-0 h-1 bg-black/50" role="presentation">
|
||||
<span className="block h-full bg-amber-500" style={{ width: `${pct}%` }} />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-2 truncate text-xs font-medium text-stone-200 transition-colors group-hover:text-amber-300 group-focus-visible:text-amber-300">
|
||||
{book.title}
|
||||
</p>
|
||||
<p className="truncate text-[10px] text-stone-500">
|
||||
{book.format} · {book.path}
|
||||
</p>
|
||||
<p className="truncate text-[10px] text-stone-500">{book.path.includes("/") ? book.path.slice(0, book.path.lastIndexOf("/")) : "根目录"}</p>
|
||||
</button>
|
||||
{book.state === "error" && (
|
||||
<span
|
||||
className="absolute left-1 top-1 rounded bg-red-900 px-1 text-[10px] text-red-100"
|
||||
title={book.error}
|
||||
>
|
||||
损坏
|
||||
</span>
|
||||
)}
|
||||
{book.percent > 0 && (
|
||||
<div className="mt-1 h-1 w-32 overflow-hidden rounded-full bg-stone-800">
|
||||
<div className="h-full rounded-full bg-amber-500" style={{ width: `${Math.round(book.percent * 100)}%` }} />
|
||||
</div>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<button
|
||||
className="absolute right-1 top-1 hidden rounded bg-stone-900/80 px-1.5 text-xs text-red-300 group-hover:block"
|
||||
className="absolute right-1.5 top-1.5 z-10 rounded-md bg-stone-950/80 p-1 text-stone-300 opacity-0 ring-1 ring-white/10 backdrop-blur-sm transition hover:bg-red-950 hover:text-red-300 focus-visible:opacity-100 group-hover:opacity-100"
|
||||
title="删除(连磁盘文件)"
|
||||
aria-label={`删除《${book.title}》`}
|
||||
onClick={() => {
|
||||
if (confirm(`删除《${book.title}》?磁盘文件一并删除,阅读进度保留`)) onDelete();
|
||||
}}
|
||||
>
|
||||
✕
|
||||
<IconX className="size-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const GRID = "grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-x-4 gap-y-6 sm:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))]";
|
||||
|
||||
function Section({ title, icon, children }: { title: string; icon?: React.ReactNode; children: React.ReactNode }) {
|
||||
return (
|
||||
<section className="mb-10">
|
||||
<h2 className="mb-3 flex items-center gap-1.5 text-sm font-semibold tracking-wide text-stone-300">
|
||||
{icon}
|
||||
{title}
|
||||
</h2>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Shelf() {
|
||||
const qc = useQueryClient();
|
||||
const nav = useNavigate();
|
||||
@@ -110,90 +134,146 @@ export default function Shelf() {
|
||||
|
||||
const continueRows = (progQ.data ?? []).slice(0, 12);
|
||||
const libs = libsQ.data ?? [];
|
||||
const searching = q.length > 0;
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
<TopBar
|
||||
right={
|
||||
<>
|
||||
<button className={btn} onClick={() => qc.invalidateQueries({ queryKey: ["books"] })}>
|
||||
刷新
|
||||
</button>
|
||||
<div className="relative">
|
||||
<IconSearch className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-stone-500" />
|
||||
<input
|
||||
className={input + " w-36 pl-8 sm:w-52"}
|
||||
type="search"
|
||||
aria-label="搜索标题"
|
||||
placeholder="搜索标题…"
|
||||
value={qRaw}
|
||||
onChange={(e) => setQRaw(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{isAdmin && lib > 0 && (
|
||||
<button className={btn} disabled={scan.isPending} onClick={() => scan.mutate(lib)}>
|
||||
<IconScan className="size-4" />
|
||||
{scan.isPending ? "扫描中…" : "扫描此库"}
|
||||
</button>
|
||||
)}
|
||||
<input
|
||||
className={input + " w-44"}
|
||||
aria-label="搜索标题" placeholder="搜索标题…"
|
||||
value={qRaw}
|
||||
onChange={(e) => setQRaw(e.target.value)}
|
||||
/>
|
||||
<button className={btn} onClick={() => qc.invalidateQueries({ queryKey: ["books"] })} aria-label="刷新书目">
|
||||
<IconRefresh className="size-4" />
|
||||
<span className="hidden sm:inline">刷新</span>
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{libs.length === 0 && (
|
||||
<p className="text-sm text-stone-500">还没有书库。admin 请到「库管理」建库并扫描。</p>
|
||||
<div className="flex-1 overflow-y-auto px-4 py-5 sm:px-6">
|
||||
{libs.length === 0 && !libsQ.isPending && (
|
||||
<p className="mb-6 flex items-center gap-2 rounded-lg bg-amber-500/10 px-3 py-2 text-sm text-amber-200 ring-1 ring-amber-500/25">
|
||||
<IconAlert className="size-4 shrink-0" />
|
||||
还没有书库。admin 请到「库管理」建库并扫描。
|
||||
</p>
|
||||
)}
|
||||
<div className="mb-4 flex flex-wrap gap-2">
|
||||
<button className={lib === 0 ? btnPrimary : btn} onClick={() => setLib(0)}>
|
||||
全部
|
||||
</button>
|
||||
{libs.map((l) => (
|
||||
<button key={l.id} className={lib === l.id ? btnPrimary : btn} onClick={() => setLib(l.id)}>
|
||||
{l.name}
|
||||
{(libs.length > 0 || libsQ.isPending) && (
|
||||
<nav aria-label="按库筛选" className="mb-8 flex w-fit flex-wrap gap-1 rounded-full bg-white/[0.04] p-1 ring-1 ring-white/[0.07]">
|
||||
<button className={`${pill} ${lib === 0 ? pillActive : ""}`} aria-pressed={lib === 0} onClick={() => setLib(0)}>
|
||||
全部
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{libs.map((l) => (
|
||||
<button
|
||||
key={l.id}
|
||||
className={`${pill} ${lib === l.id ? pillActive : ""}`}
|
||||
aria-pressed={lib === l.id}
|
||||
onClick={() => setLib(l.id)}
|
||||
>
|
||||
{l.name}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
|
||||
{continueRows.length > 0 && (
|
||||
<section className="mb-8">
|
||||
<h2 className="mb-2 text-sm font-semibold text-stone-400">继续阅读</h2>
|
||||
<div className="flex gap-4 overflow-x-auto pb-2">
|
||||
{continueRows.map((r) => {
|
||||
{continueRows.length > 0 && !searching && (
|
||||
<Section title="继续阅读" icon={<IconClock className="size-4 text-amber-500/80" />}>
|
||||
<ul className="flex gap-3 overflow-x-auto pb-2" role="list">
|
||||
{continueRows.map((r, i) => {
|
||||
const b = booksByKey.get(`${r.library_id}/${r.path}`);
|
||||
if (!b)
|
||||
return (
|
||||
<div key={`${r.library_id}/${r.path}`} className={`w-28 shrink-0 p-2 text-xs text-stone-600 ${card}`}>
|
||||
<p className="truncate">{r.title || "已删除的书"}</p>
|
||||
<p>{Math.round(r.percent * 100)}%</p>
|
||||
</div>
|
||||
<li key={`${r.library_id}/${r.path}`} className={`fx-rise w-44 shrink-0 ${card} p-3`} style={{ animationDelay: `${i * 40}ms` }}>
|
||||
<p className="truncate text-xs text-stone-400">{r.title || "已删除的书"}</p>
|
||||
<p className="mt-1 text-[10px] text-stone-600">#{r.library_id}/{r.path} · 进度已保留</p>
|
||||
</li>
|
||||
);
|
||||
const pct = Math.round(r.percent * 100);
|
||||
return (
|
||||
<BookCard
|
||||
key={`${r.library_id}/${r.path}`}
|
||||
book={b}
|
||||
onOpen={() => nav(`/book/${b.id}`)}
|
||||
onDelete={() => del.mutate(b.id)}
|
||||
/>
|
||||
<li key={`${r.library_id}/${r.path}`} className="fx-rise shrink-0" style={{ animationDelay: `${i * 40}ms` }}>
|
||||
<button
|
||||
className="group flex w-64 items-center gap-3 rounded-xl p-2 text-left ring-1 ring-white/[0.07] transition-colors hover:bg-white/[0.05] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500"
|
||||
onClick={() => nav(`/book/${b.id}`)}
|
||||
>
|
||||
<Cover book={b} className="aspect-[3/4] w-14 shrink-0 rounded-md shadow ring-1 ring-white/10" />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate text-sm font-medium text-stone-100 group-hover:text-amber-300">{b.title}</span>
|
||||
<span className="mt-0.5 flex items-center gap-1.5 text-[11px] text-stone-500">
|
||||
{r.library}
|
||||
<span className="tabular-nums text-stone-400">{pct}%</span>
|
||||
</span>
|
||||
<span className="mt-1.5 block h-1 overflow-hidden rounded-full bg-white/10">
|
||||
<span className="block h-full rounded-full bg-amber-500" style={{ width: `${pct}%` }} />
|
||||
</span>
|
||||
</span>
|
||||
<IconBookOpen className="size-4 shrink-0 text-stone-600 transition-colors group-hover:text-amber-400" />
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</ul>
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{booksQ.isError && (
|
||||
<p className="mb-4 text-sm text-red-400">
|
||||
加载失败:{booksQ.error instanceof Error ? booksQ.error.message : ""}{" "}
|
||||
<div className={`fx-rise mb-8 flex flex-wrap items-center gap-3 rounded-xl bg-red-950/40 px-4 py-3 text-sm text-red-200 ring-1 ring-red-500/25`}>
|
||||
<IconAlert className="size-4 shrink-0" />
|
||||
<span>加载失败:{booksQ.error instanceof Error ? booksQ.error.message : "未知错误"}</span>
|
||||
<button className={btn} onClick={() => booksQ.refetch()}>
|
||||
<IconRefresh className="size-4" />
|
||||
重试
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{booksQ.isPending && !booksQ.isError && (
|
||||
<div className={GRID} aria-busy="true" aria-label="加载书目中">
|
||||
{Array.from({ length: 12 }).map((_, i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<div className="aspect-[3/4] animate-pulse rounded-lg bg-stone-800/70" />
|
||||
<div className="h-3 w-3/4 animate-pulse rounded bg-stone-800/70" />
|
||||
<div className="h-2 w-1/2 animate-pulse rounded bg-stone-800/50" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!booksQ.isPending && groups.length === 0 && !booksQ.isError && (
|
||||
<p className="text-sm text-stone-500">此库暂无书目(放入文件后等待扫描或点「扫描此库」)。</p>
|
||||
<div className="fx-rise flex flex-col items-center py-16 text-center">
|
||||
<IconFolder className="size-10 text-stone-700" />
|
||||
<h3 className="mt-3 text-sm font-medium text-stone-300">{searching ? `没有匹配「${q}」的书` : "此库暂无书目"}</h3>
|
||||
<p className="mt-1 text-sm text-stone-500">
|
||||
{searching ? "换个关键词试试。" : "放入文件后等待扫描,或点上方「扫描此库」。"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{groups.map((g) => (
|
||||
<section key={g.dir || "//"} className="mb-8">
|
||||
<h2 className="mb-2 text-sm font-semibold text-stone-400">{g.dir || "根目录"}</h2>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{g.books.map((b) => (
|
||||
<BookCard key={b.id} book={b} onOpen={() => nav(`/book/${b.id}`)} onDelete={() => del.mutate(b.id)} />
|
||||
<Section
|
||||
key={g.dir || "//"}
|
||||
title={g.dir || "根目录"}
|
||||
icon={<IconFolder className="size-4 text-stone-500" />}
|
||||
>
|
||||
<div className={GRID}>
|
||||
{g.books.map((b, i) => (
|
||||
<BookCard key={b.id} book={b} index={i} onOpen={() => nav(`/book/${b.id}`)} onDelete={() => del.mutate(b.id)} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</Section>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { formatSize } from "../src/components/ui";
|
||||
|
||||
describe("formatSize", () => {
|
||||
it("renders human sizes across units", () => {
|
||||
expect(formatSize(0)).toBe("");
|
||||
expect(formatSize(512)).toBe("512 B");
|
||||
expect(formatSize(2048)).toBe("2.0 KB");
|
||||
expect(formatSize(15 * 1024 * 1024)).toBe("15 MB");
|
||||
expect(formatSize(3.2 * 1024 ** 3)).toBe("3.2 GB");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user