diff --git a/docs/superpowers/specs/2026-09-08-modern-redesign-shadcn-design.md b/docs/superpowers/specs/2026-09-08-modern-redesign-shadcn-design.md new file mode 100644 index 0000000..fd6d4aa --- /dev/null +++ b/docs/superpowers/specs/2026-09-08-modern-redesign-shadcn-design.md @@ -0,0 +1,97 @@ +# 全站现代化重构(shadcn/radix 设计系统 + 公共表面)设计 / Modern site-wide redesign (shadcn/radix) design — phase 1 + +日期 2026-09-08。分支 `feat/ui-redesign`。状态:已获用户批准(五节设计逐节确认)。 + +## 目标 / Goal + +以 shadcn/radix 体系从零重做全部产品表面的布局与交互(不沿袭现有布局/交互,仅阅读器的翻页/翻章语义保留), +建立 light/dark 双主题设计系统;功能面与现状等价;移动端达到真正可用。 +本期(phase 1)= 设计底座 + 登录/应用壳/书架/admin 两页;阅读器 chrome 迁移为 phase 2(另立 spec)。 + +## 决策记录 / Decisions + +- 用户选定:方案 C(shadcn/radix),视觉基调=极简书架风(Notion/Linear/豆瓣读书),主题=双主题开关(默认 system)。 +- 功能等价重做;不做功能增减。明确否决/推迟:视图密度开关(=新功能,不做)、阅读器本期不动(phase 2)、 + 命令面板/键盘优先导航(不适合媒体浏览)。 +- 否决方案:仅换皮保结构(四项痛点都不回答)、手写 token 层不引框架(交互原语 a11y 自理成本高)。 +- `components/icons.tsx`(自研 SVG)删除,由 `lucide-react` 取代。 +- `components/ui.ts` 不整体删(phase-1 的 `/book/:id` 各表面仍引用):**收缩为 `btn`/`btnGhost`/`formatBadge` + 三个 deprecated 导出**供阅读器侧继续使用,phase 2 随阅读器迁移一并删除;其余导出(`input`/`card`/`pill`/ + `pillActive`/`btnPrimary`)随公共表面重做删除;`formatSize` 属数据格式化,迁 `lib/format.ts`。 +- `/book/:id`(`pages/Reader.tsx` + 四 reader 组件 + `Bookmarks` 面板)本期整体不重构、不套壳,维持现状。 + 例外边界:`Cover`/`Toaster` 是跨期共享组件,phase 1 改写时**保持 props 兼容**(EpubReader/App 等旧调用零改动), + 仅视觉入新 token。 +- 原生 `confirm()`(Shelf 删书、Users 删用户)→ radix AlertDialog。 +- API/路由/数据流零改动;后端不在本期范围。 + +## 技术底座 / Foundation + +- React 19.2 + Tailwind v4.3(`@tailwindcss/vite` 已在)+ react-router 7。新依赖(容器内安装,提交 lockfile): + `radix-ui`(统一新包,按需 import 子模块)、`class-variance-authority`、`clsx`、`tailwind-merge`、 + `lucide-react`、`tw-animate-css`。 +- `components.json` 放 `frontend/`,alias: `@/* → src/*`(与 tsconfig paths 同步)。 +- 工具:`src/lib/utils.ts` 提供 `cn = twMerge(clsx(...))`。 +- Token:shadcn 标准语义变量(`--background --foreground --card --card-foreground --popover --primary + --secondary --muted --accent --destructive --border --input --ring --chart-*` + `--radius`), + `@theme inline` 映射进 Tailwind;`:root` = light(纸白中性灰,`--primary` 暖墨黑,唯一彩色点缀朱橙), + `.dark` = 对应暗色套。全站禁止裸 `stone-*`/`amber-*` 直用(阅读器现有类在 phase 2 清理)。 +- 主题:`src/components/theme.tsx` ThemeProvider — `"system" | "light" | "dark"` 持久化于 + `localStorage("ui.theme")`(默认 system);`index.html` 内联脚本按同 key 预算 class 防 FOUC; + 入口=应用壳内 DropdownMenu(lucide Sun/Moon/Monitor,当前值打勾)。 + +## 应用壳 / AppShell + +- 新 `src/components/app-shell.tsx` 包裹 `/` 与 `/admin/*`(登录页不套壳,居中 Card 独立布局)。 +- 断点约定(Tailwind 默认值): + - `lg(≥1024)`:固定 `w-60` 左侧栏——品牌字标、导航(书架;admin 另加 库管理/用户管理)、 + 库筛选列表(全部+各库,来自 `GET /libraries`)、底部 主题切换 + 用户/退出。 + - `sm–lg`:图标窄栏(`w-14`,Tooltip 标注)。 + - `