Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 XingfenD
|
1e06ada135 |
@@ -1,4 +1,3 @@
|
||||
.env
|
||||
.superpowers/
|
||||
tasks/
|
||||
.playwright*/
|
||||
|
||||
+73
@@ -0,0 +1,73 @@
|
||||
# HANDOFF — book-comic-library / feat/ui-redesign
|
||||
|
||||
交接时间：2026-09-08。上一会话在 **phase-1 最终评审修复波派发刚发出即被取消** 处中断。工作树干净，HEAD = `7e08478`（分支 `feat/ui-redesign`）。
|
||||
|
||||
## Goal
|
||||
|
||||
个人书/漫画库（Go 后端 + React 前端，docker/podman compose 部署）的 `feat/ui-redesign` 分支承载两件事，均已按 SDD（subagent-driven-development）流程开发：
|
||||
|
||||
1. **CBZ 章节化连续阅读**（已完成并验收 ✅）——一章图片=一段连续长卷、默认滚动锁章（只能按钮/目录/滑条/书签切章）、连读开关、锁章时预渲染 0–3 章（默认 2）切章零白屏；移除旧 连读/整页/适高 三档。
|
||||
2. **全站现代化重构 phase 1**（代码完成，最终评审待修复 ⏳）——shadcn/Radix 设计系统 + light/dark 双主题 + 应用壳 + 登录/书架/admin 页从零重做；**阅读器（/book/:id 四 reader）本期刻意不动**，属 phase 2。
|
||||
|
||||
最终目的：本分支功能就绪后由用户决定合回 master / 开 PR（上一会话已问过一次，用户未选）。
|
||||
|
||||
## 关键文档（先读这些）
|
||||
|
||||
- Spec：`docs/superpowers/specs/2026-09-08-cbz-chapter-continuous-reading-design.md`、`docs/superpowers/specs/2026-09-08-modern-redesign-shadcn-design.md`
|
||||
- Plan：`docs/superpowers/plans/2026-09-08-cbz-chapter-continuous-reading.md`（已执行完）、`docs/superpowers/plans/2026-09-08-modern-redesign-phase1.md`（Task1–8 已执行完）
|
||||
- SDD 账本/评审包/各任务报告：`.superpowers/sdd/2026-09-08-modern-redesign-phase1/`（`progress.md` 记录任务完成与 parked minors；各 `task-N-report.md` 是实现证据；`review-*.diff` 是评审包）。前一计划账本已删除（收尾完成）。
|
||||
- 项目规约：`AGENTS.md`（分支命名/CHANGELOG 英中相邻行/npm 依赖必须容器内安装/渲染配置来自 tpl 等）。
|
||||
|
||||
## Current Progress
|
||||
|
||||
- 分支领先 master 约 33 个 commit（`git log --oneline master..HEAD`）。与本 handoff 相关的段：`bba82e5..e5dacc0` CBZ 功能、`2721df8` 上传 toast 修复、`ee676c2..7e08478` phase-1（11 commits，每个都过了任务级评审+修复轮）。
|
||||
- Phase-1 八个任务全部 DONE 且任务评审干净；`npm run -s check`（tsc+vitest 37+build）绿；Task 8 的 playwright 6 格矩阵（3 视口 × 2 主题）全过。
|
||||
- **中断点**：phase-1 的**最终整分支评审**判 “With fixes”（1 Critical + 7 Important + 2 Minor 入波），修复子代理刚派发即被取消——**修复波零进度，待重做**（清单见 Next Steps 1，全部裁决细节在下文）。
|
||||
- 之后收尾流程未走：SDD 收尾（删本计划 workspace）+ 分支合并方式询问。
|
||||
|
||||
## What Worked
|
||||
|
||||
- **SDD 流程本身**：任务简报（`task-brief` 脚本）+ 实现子代理 + 评审包（`review-package`，别用 HEAD~1）+ 限定 re-review，两轮修复都收敛干净；账本防上下文丢失。
|
||||
- **环境事实**：dev 栈= podman 别名 docker；容器名 `booklib_api_1 / booklib_web_1 / booklib_postgres_1 / booklib_redis_1`（下划线）；一切 npm/vitest 走 `docker exec -w /app booklib_web_1 …`（node_modules 只在容器里）；后端测试 `docker exec booklib_api_1 sh -c 'cd /app && go vet ./... && go test -p 1 -count=1 ./...'`；psql 走 postgres 容器 `printenv POSTGRES_USER/POSTGRES_DB`；前端 :5173 代理 /api（api 的 8080 不映射宿主！宿主 curl 只能打 5173）。
|
||||
- **登录凭据（dev）**：admin / `xfqcmNXrTz240dmQiTHJwepc`（= api 容器 `ADMIN_PASSWORD`）。重建 admin 的方法：清空 users 表 + `docker restart booklib_api_1`（seed 仅在 0 用户时建）。
|
||||
- **测试素材**：`deploy/api/storage/test/test_manga.zip`（4 章 32 页，ch4 长 20 页，= 宿主 storage 映射容器 `/data/books`）、`test_flat.zip`（扁平 6 页）。生成脚本逻辑在 `task-8-report.md` 时代记录过，必要时可再造。
|
||||
- **playwright-cli**（PATH 里就有）做 UI 验收很顺：`open/goto/snapshot/find/click/fill/press/mousewheel/resize/upload/eval/close`；`press` 键名小写；`fill` 到 range input 不触发 pointerup（会留下 scrub 假象）；隐藏 FileList 用 `upload` 前先 click 触发 chooser；产物目录 `.playwright-cli/` 用完 `rm -rf`（未 gitignore）。
|
||||
- shadcn CLI 生成 13 原语、`components/ui/` 与旧 `components/ui.ts` 并存过渡、URL-as-state（?lib/?q/?sort/?group）都成立。
|
||||
|
||||
## What Didn't Work（别重蹈）
|
||||
|
||||
- **shadcn CLI 在生成文件里写 `import { cn } from "cn"`**（误装名为 cn 的垃圾包）→ 必须批量改成 `@/lib/utils` 并卸载。
|
||||
- **本 TS 版本拒绝 `baseUrl`** → tsconfig 只用 `"paths": {"@/*": ["./src/*"]}`（无 baseUrl）；vite 用 `"@": "/src"`；vitest 用 `new URL("./src", import.meta.url).pathname`。
|
||||
- **计划内嵌代码的教训**（评审抓到，写计划时要自查）：`createContext` 不能包在 module 级 `useMemo` 里；`FileList` 是活引用（`input.value=""` 清空后 `.length` 归 0 → 上传 toast 报 0 的根因，`Array.from` 先快照）；Radix `DropdownMenuItem` 一律用 `onSelect`（onClick 键盘路径不触发）；react-router **NavLink 的 isActive 只看 pathname 忽略 search**（导致侧栏 `?lib=N` 全激活的 C1，见下）。
|
||||
- psql `-c "多语句"` 出现过只部分生效/难核对 → 逐条 `-c`。
|
||||
- 最终评审的修复清单若一次性派发被取消了：可以照单重发，内容仍然有效（HEAD 未动）。
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. **重发 phase-1 最终评审修复波（一个子代理、一个 commit）**，全部裁决如下（评审原文在 `.superpowers/sdd/2026-09-08-modern-redesign-phase1/` 会话记录中，此处为完整清单）：
|
||||
- **C1** `app-shell.tsx`：侧栏库筛选 NavLink 全部同时 active（isActive 忽略 search）。裁决：删掉侧栏「全部」项（书架即全部）；NavItem 显式传 `active`——书架= `pathname==="/" && !sp.get("lib")`，库项= `sp.get("lib")===String(l.id)`，admin 项按 pathname；移动端 Tab「书架」链到 `/`（去掉 `?lib=0`）。
|
||||
- **I1** md 图标栏链接无 accessible name（label `hidden lg:inline` 出 a11y 树）→ 给链接/按钮加 `aria-label`。
|
||||
- **I2** 书卡打开按钮 `focus-visible:outline-none` 且无替代焦点环 → 补 ring/outline（`Shelf.tsx:30`）。
|
||||
- **I3** 浅色主题 `text-accent`（oklch 0.68 朱橙）作小字不达 AA → 新增 `--accent-strong`（light≈oklch(0.55 0.17 46)；dark≈0.72）映射 `--color-accent-strong`，文本场景换用；顺带补 `--destructive-foreground` token，替换 Shelf/Users 两处手搓 `bg-destructive text-primary-foreground`。
|
||||
- **I4** 触屏摸不到卡 ⋯ 菜单（hover-only opacity）→ `<md` 常显：`opacity-100 md:opacity-0 md:group-hover:opacity-100 md:focus-within:opacity-100`。
|
||||
- **I5** Shelf 三处 DropdownMenuItem `onClick` → `onSelect`；删除项优先用生成件 `variant="destructive"`（先查本地 dropdown-menu.tsx 是否支持，不支持则留 className 并记一笔）。
|
||||
- **I6** lg 侧栏永远无 “BookLib” 字标（Brand 恒 compact）→ label `hidden lg:inline`。
|
||||
- **I7** 壳三处半透明漂移（card/60、card/90、background/90）→ 统一 `bg-background/85 backdrop-blur`。
|
||||
- **M-a** `ui.ts` 的死 re-export `formatSize`（无 importer，先 grep 确认）→ 删除（保留 btn/btnGhost/formatBadge+FORMAT_BADGE）。
|
||||
- **M-b** `docs/CHANGELOG_web.md` phase-1 条目里「icon-adorned inputs/图标输入框」措辞与最终登录不符 → 原地改（EN/ZH 保持相邻行规约）。
|
||||
- 修复波验证：tsc+`npm run -s check`；playwright 复核 C1（建两个空库 `fixw/fixw2` 即可验高亮，不必等 scanner）、I2/I4 焦点与触屏可见、I3 截图、主题键盘选择；随后删测试库（psql）+ 清 `.playwright-cli`。commit 建议：`fix(web): active lib highlight, rail a11y names, card focus ring, AA accent + destructive tokens, touch-reachable menu, brand wordmark, chrome unify`。
|
||||
- **然后一次限定 re-review**（`review-package PLAN 7e08478 <newHEAD>`），parked minors 由终审者复核（账本 `progress.md` 里有清单）。
|
||||
2. Phase-2 遗留票（不急，另立 spec）：阅读器 chrome 迁入设计系统（翻页/CBZ 章锁/连读/预读/书签逻辑与 localStorage 键原样保留；纸/米/夜 主题重映射语义变量并与全局 light/dark 定联动）；SectionHead 粘性偏移、tooltip 化图标栏、移动端库筛选 sheet、PWA meta dark 变体、toast 与底 Tab 重叠、明暗下 FORMAT_BADGE 可读性。
|
||||
3. 收尾：最终评审干净后删 `.superpowers/sdd/2026-09-08-modern-redesign-phase1/`（账本先补一行 Task 8 完成 + 修复波记录），再问用户分支去向（merge master / PR / 保持）。
|
||||
4. 顺带留意（非阻塞）：空库 `l` 使 api 日志每分钟一条 `scan rejected`（上传或删库行即愈）；周期 scanner 对缺目录只 reject 不清扫。
|
||||
|
||||
## 常用命令速查
|
||||
|
||||
```bash
|
||||
docker exec -w /app booklib_web_1 npm run -s check
|
||||
docker exec -w /app booklib_web_1 npx vitest run test/shelf.test.ts
|
||||
docker exec booklib_api_1 sh -c 'cd /app && go vet ./... && go test -p 1 -count=1 ./...'
|
||||
U=$(docker exec booklib_postgres_1 printenv POSTGRES_USER); D=$(docker exec booklib_postgres_1 printenv POSTGRES_DB)
|
||||
docker exec booklib_postgres_1 psql -U $U -d $D -c 'select * from libraries'
|
||||
SDD=.superpowers/sdd/2026-09-08-modern-redesign-phase1 # task-brief/review-package/sdd-workspace 脚本在 superpowers 技能目录 scripts/ 下
|
||||
```
|
||||
@@ -34,8 +34,8 @@ The format loosely follows Keep a Changelog and can be adapted to the team's hab
|
||||
- The web UI was rebuilt on a shadcn/Radix design system: semantic light/dark theme tokens with a system/light/dark switcher (remembered), a persistent app shell (desktop sidebar, tablet icon rail, mobile bottom tabs), a shelf driven by URL-state search/sort/group controls with a flat-first grid and menu-based card actions (confirm dialogs replace native popups), and rebuilt login/admin pages. Readers keep their current chrome and every reading interaction this round; their restyle lands next.
|
||||
- 网页 UI 以 shadcn/Radix 设计系统重做:语义化明暗主题 token + 系统/浅色/深色切换(记忆);常驻应用壳(桌面侧栏、平板图标栏、手机底部标签);书架改为 URL 状态驱动的搜索/排序/分组工具条,默认平铺网格,卡片操作收进菜单(删除改为对话框确认);登录页与 admin 两页同步重做。阅读器保持现状,改版随下一期到达。
|
||||
|
||||
- Shelf rebuilt into a content-first library UI: responsive cover grid (auto-fill 3:4 posters) with a pages/size caption, 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); login got a clean brand card; toasts animate with icons; missing covers render a serif-initial placeholder instead of an endless pulse.
|
||||
- 书架重构为「内容优先」的现代书库界面：响应式封面网格（自适应列宽、3:4 海报），封面下方显示页数/大小、格式彩色徽章、封面内嵌进度条、卡片错峰入场动画、骨架屏加载与空/错/搜索无结果专属状态；「继续阅读」改为横向续读卡片条（封面+进度+所属库）；登录页升级为主视觉卡片；Toast 带动画与图标；无封面书籍以衬线首字占位，不再无限脉冲。
|
||||
- Shelf rebuilt into a content-first library UI: responsive cover grid (auto-fill 3:4 posters) with a pages/size caption, 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); 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 海报），封面下方显示页数/大小、格式彩色徽章、封面内嵌进度条、卡片错峰入场动画、骨架屏加载与空/错/搜索无结果专属状态；「继续阅读」改为横向续读卡片条（封面+进度+所属库）；登录页升级为主视觉卡片与带图标输入框；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卷/部」行只作为正文文本,只有卷的书和以前一样退回伪章节切分;换章从下拉框改为「目录」侧边栏浮层——当前章高亮并自动居中可见,点击空白处或选定章节即收起。
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { BookMarked, BookOpen, FolderCog, LogOut, Users } from "lucide-react";
|
||||
import { Link, NavLink, Outlet, useLocation } from "react-router-dom";
|
||||
import { NavLink, Outlet, useLocation } from "react-router-dom";
|
||||
import { api } from "@/api/client";
|
||||
import { useAuth } from "@/auth/AuthContext";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -10,32 +10,31 @@ import { ThemeToggle } from "./theme-toggle";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
function Brand() {
|
||||
function Brand({ compact }: { compact?: boolean }) {
|
||||
return (
|
||||
<Link to="/" aria-label="BookLib 首页" className="flex h-12 shrink-0 items-center gap-2 rounded-md px-3 focus-visible:outline-2 focus-visible:outline-offset-2">
|
||||
<NavLink to="/" className="flex h-12 shrink-0 items-center gap-2 rounded-md px-3 focus-visible:outline-2 focus-visible:outline-offset-2">
|
||||
<span className="grid size-6 place-items-center rounded bg-accent text-accent-foreground">
|
||||
<BookMarked className="size-4" />
|
||||
</span>
|
||||
<span className="hidden text-[15px] font-semibold tracking-tight lg:inline">BookLib</span>
|
||||
</Link>
|
||||
{!compact && <span className="text-[15px] font-semibold tracking-tight">BookLib</span>}
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
|
||||
/* NavLink 不可用:其 isActive/aria-current 前缀匹配 "/" 会无视 search,导致 ?lib=N 全部同时高亮 */
|
||||
function NavItem({ to, icon, label, active }: { to: string; icon: ReactNode; label: string; active: boolean }) {
|
||||
function NavItem({ to, icon, label, search }: { to: string; icon: ReactNode; label: string; search?: string }) {
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
aria-label={label}
|
||||
aria-current={active ? "page" : undefined}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
|
||||
active && "bg-secondary font-medium text-foreground",
|
||||
)}
|
||||
<NavLink
|
||||
to={to + (search ?? "")}
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
"flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground",
|
||||
isActive && "bg-secondary font-medium text-foreground",
|
||||
)
|
||||
}
|
||||
>
|
||||
{icon}
|
||||
<span className="hidden lg:inline">{label}</span>
|
||||
</Link>
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -44,13 +43,12 @@ export function AppShell() {
|
||||
const loc = useLocation();
|
||||
const libsQ = useQuery({ queryKey: ["libraries"], queryFn: api.listLibraries });
|
||||
const libs = libsQ.data ?? [];
|
||||
const libParam = new URLSearchParams(loc.search).get("lib");
|
||||
|
||||
const account = (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="gap-2 px-2" aria-label={`账户 ${user?.username ?? ""}`}>
|
||||
<span className="grid size-7 place-items-center rounded-full bg-accent/15 text-xs font-semibold text-accent-strong">
|
||||
<Button variant="ghost" className="gap-2 px-2">
|
||||
<span className="grid size-7 place-items-center rounded-full bg-accent/15 text-xs font-semibold text-accent">
|
||||
{Array.from(user?.username ?? "?")[0]?.toUpperCase()}
|
||||
</span>
|
||||
<span className="hidden max-w-28 truncate text-sm lg:inline">{user?.username}</span>
|
||||
@@ -69,14 +67,14 @@ export function AppShell() {
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
{/* 桌面/平板侧栏;lg 全文标签,md 图标栏 */}
|
||||
<aside className="hidden w-14 shrink-0 flex-col gap-1 border-r bg-background/85 p-2 backdrop-blur md:flex lg:w-60">
|
||||
<Brand />
|
||||
<aside className="hidden w-14 shrink-0 flex-col gap-1 border-r bg-card/60 p-2 md:flex lg:w-60">
|
||||
<Brand compact />
|
||||
<nav aria-label="主导航" className="flex flex-col gap-1">
|
||||
<NavItem to="/" icon={<BookOpen className="size-4 shrink-0" />} label="书架" active={loc.pathname === "/" && !libParam} />
|
||||
<NavItem to="/" icon={<BookOpen className="size-4 shrink-0" />} label="书架" />
|
||||
{isAdmin && (
|
||||
<>
|
||||
<NavItem to="/admin/libraries" icon={<FolderCog className="size-4 shrink-0" />} label="库管理" active={loc.pathname.startsWith("/admin/libraries")} />
|
||||
<NavItem to="/admin/users" icon={<Users className="size-4 shrink-0" />} label="用户管理" active={loc.pathname.startsWith("/admin/users")} />
|
||||
<NavItem to="/admin/libraries" icon={<FolderCog className="size-4 shrink-0" />} label="库管理" />
|
||||
<NavItem to="/admin/users" icon={<Users className="size-4 shrink-0" />} label="用户管理" />
|
||||
</>
|
||||
)}
|
||||
</nav>
|
||||
@@ -84,8 +82,9 @@ export function AppShell() {
|
||||
<div className="mt-3 hidden min-h-0 flex-1 flex-col lg:flex">
|
||||
<p className="px-3 pb-1 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">书库</p>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto">
|
||||
<NavItem to="/" search="?lib=0" icon={<span className="size-1.5 shrink-0 rounded-full bg-muted-foreground/50" />} label="全部" />
|
||||
{libs.map((l) => (
|
||||
<NavItem key={l.id} to={`/?lib=${l.id}`} icon={<span className="size-1.5 shrink-0 rounded-full bg-accent/60" />} label={l.name} active={loc.pathname === "/" && libParam === String(l.id)} />
|
||||
<NavItem key={l.id} to="/" search={`?lib=${l.id}`} icon={<span className="size-1.5 shrink-0 rounded-full bg-accent/60" />} label={l.name} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,7 +98,7 @@ export function AppShell() {
|
||||
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
{/* 移动端顶栏 */}
|
||||
<header className="flex h-12 shrink-0 items-center justify-between border-b bg-background/85 px-3 backdrop-blur lg:hidden">
|
||||
<header className="flex h-12 shrink-0 items-center justify-between border-b bg-card/60 px-3 lg:hidden">
|
||||
<Brand />
|
||||
<div className="flex items-center gap-1">
|
||||
<ThemeToggle />
|
||||
@@ -110,8 +109,8 @@ export function AppShell() {
|
||||
<Outlet />
|
||||
</main>
|
||||
{/* 移动端底 Tab */}
|
||||
<nav aria-label="底部导航" className="flex h-14 shrink-0 items-stretch border-t bg-background/85 backdrop-blur md:hidden">
|
||||
<TabItem to="/" icon={<BookOpen className="size-5" />} label="书架" />
|
||||
<nav aria-label="底部导航" className="flex h-14 shrink-0 items-stretch border-t bg-card/90 backdrop-blur md:hidden">
|
||||
<TabItem to="/" icon={<BookOpen className="size-5" />} label="书架" search="?lib=0" />
|
||||
{isAdmin && <TabItem to="/admin/libraries" icon={<FolderCog className="size-5" />} label="库管理" />}
|
||||
{isAdmin && <TabItem to="/admin/users" icon={<Users className="size-5" />} label="用户" />}
|
||||
</nav>
|
||||
@@ -120,9 +119,9 @@ export function AppShell() {
|
||||
);
|
||||
}
|
||||
|
||||
function TabItem({ to, icon, label }: { to: string; icon: ReactNode; label: string }) {
|
||||
function TabItem({ to, icon, label, search }: { to: string; icon: ReactNode; label: string; search?: string }) {
|
||||
return (
|
||||
<NavLink to={to} end={to === "/"} className={({ isActive }) => cn("flex flex-col items-center justify-center gap-0.5 text-[11px] text-muted-foreground", isActive && "text-accent-strong")}>
|
||||
<NavLink to={to + (search ?? "")} className={({ isActive }) => cn("flex flex-col items-center justify-center gap-0.5 text-[11px] text-muted-foreground", isActive && "text-accent")}>
|
||||
{icon}
|
||||
{label}
|
||||
</NavLink>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import type { Format } from "../api/types";
|
||||
|
||||
export { formatSize } from "../lib/format"; // deprecated: phase-2 随阅读器清除
|
||||
|
||||
export const btn =
|
||||
"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 btnGhost =
|
||||
|
||||
@@ -18,10 +18,8 @@
|
||||
--muted: oklch(0.95 0.003 80);
|
||||
--muted-foreground: oklch(0.55 0.008 70);
|
||||
--accent: oklch(0.68 0.16 46);
|
||||
--accent-strong: oklch(0.55 0.17 46);
|
||||
--accent-foreground: oklch(0.985 0.002 80);
|
||||
--destructive: oklch(0.58 0.21 27);
|
||||
--destructive-foreground: oklch(0.98 0.002 80);
|
||||
--border: oklch(0.91 0.004 80);
|
||||
--input: oklch(0.91 0.004 80);
|
||||
--ring: oklch(0.62 0.01 70);
|
||||
@@ -40,10 +38,8 @@
|
||||
--muted: oklch(0.28 0.006 80);
|
||||
--muted-foreground: oklch(0.68 0.006 80);
|
||||
--accent: oklch(0.7 0.16 46);
|
||||
--accent-strong: oklch(0.72 0.16 46);
|
||||
--accent-foreground: oklch(0.19 0.006 80);
|
||||
--destructive: oklch(0.65 0.19 25);
|
||||
--destructive-foreground: oklch(0.19 0.006 80);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 14%);
|
||||
--ring: oklch(0.6 0.01 70);
|
||||
@@ -67,10 +63,8 @@
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-strong: var(--accent-strong);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
|
||||
@@ -27,12 +27,12 @@ function BookCard({ book, index, onOpen, onDelete }: { book: Book; index: number
|
||||
const pct = Math.round(book.percent * 100);
|
||||
return (
|
||||
<div className="group fx-rise relative flex flex-col" style={{ animationDelay: `${Math.min(index, 23) * 25}ms` }}>
|
||||
<button onClick={onOpen} className="block w-full rounded-md p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
|
||||
<button onClick={onOpen} className="block w-full p-0 text-left focus-visible:outline-none">
|
||||
<span className="relative block aspect-[3/4] overflow-hidden rounded-md border bg-muted shadow-sm transition group-hover:shadow-md group-hover:ring-2 group-hover:ring-accent/50">
|
||||
<Cover book={book} className="size-full" />
|
||||
<span className={formatBadge(book.format, "absolute left-1.5 top-1.5")}>{book.format}</span>
|
||||
{book.state === "error" && (
|
||||
<span className="absolute right-1.5 top-1.5 flex items-center gap-1 rounded bg-destructive px-1.5 py-0.5 text-[10px] font-semibold text-destructive-foreground" title={book.error}>
|
||||
<span className="absolute right-1.5 top-1.5 flex items-center gap-1 rounded bg-destructive px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground" title={book.error}>
|
||||
<TriangleAlert className="size-3" /> 损坏
|
||||
</span>
|
||||
)}
|
||||
@@ -47,7 +47,7 @@ function BookCard({ book, index, onOpen, onDelete }: { book: Book; index: number
|
||||
{book.path.includes("/") ? book.path.slice(0, book.path.lastIndexOf("/")) : `${book.pages > 0 ? book.pages + " 页 · " : ""}${formatSize(book.size)}`}
|
||||
</span>
|
||||
</button>
|
||||
<div className="absolute right-1 top-1 z-10 opacity-100 transition-opacity md:opacity-0 md:focus-within:opacity-100 md:group-hover:opacity-100">
|
||||
<div className="absolute right-1 top-1 z-10 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="secondary" size="icon" className="size-7 bg-background/80 backdrop-blur" aria-label={`《${book.title}》操作`}>
|
||||
@@ -55,11 +55,11 @@ function BookCard({ book, index, onOpen, onDelete }: { book: Book; index: number
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onSelect={onOpen}>打开</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={onOpen}>打开</DropdownMenuItem>
|
||||
{isAdmin && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem variant="destructive" onSelect={onDelete}>
|
||||
<DropdownMenuItem className="text-destructive focus:text-destructive" onClick={onDelete}>
|
||||
删除
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
@@ -74,7 +74,7 @@ function BookCard({ book, index, onOpen, onDelete }: { book: Book; index: number
|
||||
function SectionHead({ label, count }: { label: string; count: number }) {
|
||||
if (!label) return null;
|
||||
return (
|
||||
<h2 className="sticky top-0 z-10 mb-3 flex items-center gap-2 bg-background/85 py-1.5 text-sm font-medium backdrop-blur">
|
||||
<h2 className="sticky top-0 z-10 mb-3 flex items-center gap-2 bg-background/90 py-1.5 text-sm font-medium backdrop-blur">
|
||||
<FolderOpen className="size-4 text-muted-foreground" />
|
||||
{label}
|
||||
<span className="text-xs tabular-nums text-muted-foreground">{count}</span>
|
||||
@@ -148,7 +148,7 @@ export default function Shelf() {
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex w-full max-w-6xl flex-col px-4 pb-20 sm:px-6 md:pb-6">
|
||||
<div className="sticky top-0 z-20 -mx-4 mb-6 flex flex-wrap items-center gap-2 border-b bg-background/85 px-4 py-3 backdrop-blur sm:-mx-6 sm:px-6">
|
||||
<div className="sticky top-0 z-20 -mx-4 mb-6 flex flex-wrap items-center gap-2 border-b bg-background/90 px-4 py-3 backdrop-blur sm:-mx-6 sm:px-6">
|
||||
<div className="relative min-w-0 flex-1 sm:max-w-64">
|
||||
<Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input className="pl-8" type="search" aria-label="搜索标题" placeholder="搜索标题…" value={qRaw} onChange={(e) => setQRaw(e.target.value)} />
|
||||
@@ -163,7 +163,7 @@ export default function Shelf() {
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>排序</DropdownMenuLabel>
|
||||
{SORTS.map((k) => (
|
||||
<DropdownMenuItem key={k} onSelect={() => setParam("sort", k === "added" ? "" : k)} className={k === sort ? "font-medium text-accent-strong" : ""}>
|
||||
<DropdownMenuItem key={k} onClick={() => setParam("sort", k === "added" ? "" : k)} className={k === sort ? "font-medium text-accent" : ""}>
|
||||
{SORT_LABEL[k]}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
@@ -190,7 +190,7 @@ export default function Shelf() {
|
||||
{lib === LIB0 && <p className="sr-only" aria-live="polite">{`当前筛选:${libName}`}</p>}
|
||||
|
||||
{(libsQ.data ?? []).length === 0 && !libsQ.isPending && !searching && (
|
||||
<p className="mb-6 flex items-center gap-2 rounded-md border border-accent/30 bg-accent/10 px-3 py-2 text-sm text-accent-strong">
|
||||
<p className="mb-6 flex items-center gap-2 rounded-md border border-accent/30 bg-accent/10 px-3 py-2 text-sm text-accent">
|
||||
<LibraryBig className="size-4 shrink-0" />
|
||||
还没有书库。admin 请到「库管理」建库并扫描。
|
||||
</p>
|
||||
@@ -215,7 +215,7 @@ export default function Shelf() {
|
||||
<button onClick={() => nav(`/book/${b.id}`)} className="group flex w-56 items-center gap-3 rounded-md border bg-card p-2 text-left transition-colors hover:bg-secondary focus-visible:outline-2 focus-visible:outline-accent">
|
||||
<Cover book={b} className="aspect-[3/4] w-11 shrink-0 rounded" />
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="block truncate text-sm font-medium group-hover:text-accent-strong">{b.title}</span>
|
||||
<span className="block truncate text-sm font-medium group-hover:text-accent">{b.title}</span>
|
||||
<span className="mt-0.5 flex justify-between text-[11px] text-muted-foreground">
|
||||
<span>{r.library}</span>
|
||||
<span className="tabular-nums">{pct}%</span>
|
||||
@@ -282,7 +282,7 @@ export default function Shelf() {
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
className="bg-destructive text-primary-foreground hover:bg-destructive/90"
|
||||
onClick={() => {
|
||||
if (confirmDel) del.mutate(confirmDel.id);
|
||||
setConfirmDel(null);
|
||||
|
||||
@@ -96,7 +96,7 @@ export default function AdminUsers() {
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90" onClick={() => del.mutate(x.id)}>
|
||||
<AlertDialogAction className="bg-destructive text-primary-foreground hover:bg-destructive/90" onClick={() => del.mutate(x.id)}>
|
||||
删除
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
|
||||
@@ -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