组件架构
Litopia 前端组件体系——shadcn/ui + Radix + 功能组件分层
组件分层
| 层级 | 目录 | 说明 |
|---|---|---|
| UI 基元 | src/components/ui/ | shadcn/ui 生成组件——Button、Card、Dialog、Sheet 等 |
| 功能组件 | src/components/ | 按功能分组的业务组件——layout、editor、article、ui |
| 页面 | src/pages/ | 路由页面——120+ 路由，全部 lazy-loaded |
技术栈
- 核心：React 18 + Vite + SWC
- UI：shadcn/ui (Radix primitives + Tailwind CSS)
- 状态管理：React Context (Auth 等全局状态) + TanStack Query (服务端状态)
- 路由：React Router v6 (lazy-loaded routes)
- 类型：class-variance-authority (CVA) 管理 UI 组件 variants
关键设计决策
- shadcn/ui 组件不直接修改——如需自定义，创建包装组件或传递 className
- 业务逻辑提取到 hooks——~86 个自定义 hooks 位于
src/hooks/ - 代码分割——所有路由页面 lazy-loaded (React.lazy + Suspense)