feat(web): 整体替换 UI 框架为 Ant Design 6 并接入自定义主题
以 antd ConfigProvider + antd-style 承载 zinc 风格自定义主题(明暗双套 token), button/input/select/notification 用 createStyles 定制;三态主题经 darkAlgorithm 无刷新切换;use-toast 改基于 antd notification; 移除 shadcn/ui 组件目录与 radix 依赖;样式桥接层保证排版与多端布局不变。
This commit is contained in:
+7
-5
@@ -100,13 +100,13 @@
|
||||
| 框架 | React | 19.2.8 | 生态最大、md 渲染/编辑器组件最丰富 | — |
|
||||
| 语言 | TypeScript | 7.x(不动则 5.9) | 原生编译器版已可用;若第三方库兼容有问题回退 5.9 | — |
|
||||
| 构建 | Vite | 8.2.2 | 事实标准;部署在域名根,`base` 用默认值 `'/'`(相对 base 与 SPA 深链冲突,见 §8.3 与审评报告 P0-1) | — |
|
||||
| 样式/组件 | Tailwind CSS 4 + **shadcn/ui** | 4.3.3 / CLI 4.21.0 | CSS-first 无样板配置;shadcn 复制式组件零运行时、克制美观,正合内容型博客;按需叠加 Radix 原语 | Ant Design 6(重、后台味浓)、Chakra 3、HeroUI、Radix Themes |
|
||||
| 样式/组件 | Tailwind CSS 4 + **Ant Design 6** | 4.3.3 / 6.6.3 | Tailwind 负责页面排版与设计 token;交互组件统一用 antd(Button/Input/Table/Modal/Dropdown/Tooltip/notification 等),经 ConfigProvider 自定义主题对齐黑白灰品牌 token 并随三态主题切换明暗算法;v6 原生支持 React 19 | shadcn/ui + Radix(曾采用,组件需自维护,替换为 antd 降低长期维护成本)、Chakra 3、HeroUI |
|
||||
| 路由 | react-router | 8.3.1 | library mode 成熟,博客+后台两个区足够 | TanStack Router 1.x(类型安全更强,但本项目路由简单) |
|
||||
| 数据请求 | TanStack Query | 5.102.8 | 十几 kB 换来统一 loading/缓存/重试,值得 | 裸 fetch + 自写 hook |
|
||||
| Markdown 渲染 | react-markdown + remark-gfm + rehype-sanitize + **rehype-highlight** | 10.1.0 / 4.0.1 / 6.0.0 / 7.0.2 | 组合标准;高亮选 rehype-highlight(**纯 class 输出、零内联样式**)而非 shiki(inline style),与严格 CSP 兼容 | shiki 4.4.3(准确度最高但产 inline style)、prism-react-renderer(近停更,不推荐) |
|
||||
| Markdown 编辑器 | **CodeMirror 6**(@uiw/react-codemirror + @codemirror/lang-markdown) | 4.25.11 / 6.5.2 | 源码编辑 + 分屏实时预览,零魔法、可预期;图片粘贴自写 handler(≤50 行) | Tiptap 3.31(体验派,WYSIWYG+成熟图片上传,文档全);MDXEditor(重);ByteMD(字节已弃坑)、Vditor 4(体积大、心智旧) |
|
||||
| 状态管理 | React Query + Context(**不引入** zustand) | — | 会话态 + 服务端缓存已覆盖;确需跨页 UI 态再加 zustand(≈1kB) | redux(不必要) |
|
||||
| 图标 | lucide-react | 1.42.0 | 活跃、风格统一、与 shadcn 默认匹配 | — |
|
||||
| 图标 | lucide-react | 1.42.0 | 活跃、风格统一(antd 组件内亦复用) | — |
|
||||
|
||||
### 3.3 关键决策记录(ADR 摘要)
|
||||
|
||||
@@ -194,9 +194,11 @@ pure-note/
|
||||
│ └── src/
|
||||
│ ├── main.tsx / App.tsx / router.tsx
|
||||
│ ├── lib/ # api client、auth、csrf、格式化
|
||||
│ ├── components/ # shadcn/ui 生成目录 + 业务组件
|
||||
│ ├── theme/ # antd ConfigProvider 主题(品牌 token + 明暗算法)
|
||||
│ ├── components/ # 业务组件
|
||||
│ │ ├── markdown/ # MarkdownViewer(渲染管线,可替换)
|
||||
│ │ └── editor/ # Editor(CodeMirror)+ ImagePaste + Toolbar
|
||||
│ ├── hooks/ # use-toast(antd notification 封装)
|
||||
│ ├── features/ # notes / admin 业务 hooks
|
||||
│ └── pages/ # Home / Note / Tags / AdminLogin / AdminList / AdminTrash / AdminEdit
|
||||
└── deploy/
|
||||
@@ -705,7 +707,7 @@ timer 触发 `pn-maint.service`:先 `pn gc --commit`,后 `pn backup /backup/
|
||||
| react / react-dom | 19.2.8 | UI 框架 |
|
||||
| vite / @vitejs/plugin-react | 8.2.2 | 构建(base 默认 `'/'`) |
|
||||
| tailwindcss + @tailwindcss/vite + @tailwindcss/typography | 4.3.3 | 样式体系 |
|
||||
| shadcn/ui(CLI)+ Radix primitives | 4.21.0 | 组件库 |
|
||||
| antd + antd-style | 6.6.3 / 4.1.0 | 组件库(ConfigProvider 自定义主题 + createStyles 桥接) |
|
||||
| react-router | 8.3.1 | 路由 |
|
||||
| @tanstack/react-query | 5.102.8 | 服务端状态 |
|
||||
| react-markdown + remark-gfm + rehype-sanitize + rehype-highlight | 10.1.0 / 4.0.1 / 6.0.0 / 7.0.2 | Markdown 渲染与防 XSS |
|
||||
@@ -719,7 +721,7 @@ timer 触发 `pn-maint.service`:先 `pn gc --commit`,后 `pn backup /backup/
|
||||
- https://go.dev/dl/ · https://pkg.go.dev/modernc.org/sqlite
|
||||
- https://github.com/yuin/goldmark · https://github.com/microcosm-cc/bluemonday
|
||||
- https://github.com/facebook/react · https://github.com/vitejs/vite
|
||||
- https://github.com/shadcn-ui/ui · https://github.com/remix-run/react-router
|
||||
- https://github.com/ant-design/ant-design · https://github.com/remix-run/react-router
|
||||
- https://github.com/remarkjs/react-markdown · https://github.com/rehypejs/rehype-sanitize
|
||||
- https://github.com/ueberdosis/tiptap · https://github.com/uiwjs/react-codemirror
|
||||
|
||||
|
||||
Reference in New Issue
Block a user