54 lines
1.8 KiB
Markdown
54 lines
1.8 KiB
Markdown
# WebApp（C端知识工作台）技术栈定版
|
||
|
||
C 端 Web 知识工作台，定位是高体验的学习工具。用户在浏览器里管理知识库、编辑知识点、查看学习进度。
|
||
|
||
```text
|
||
框架：Vite + React + TypeScript
|
||
UI：shadcn/ui + Tailwind CSS
|
||
编辑器：Tiptap
|
||
路由：React Router
|
||
服务端状态：TanStack Query
|
||
本地状态：Zustand
|
||
API Client：OpenAPI + Orval
|
||
表单：React Hook Form + Zod
|
||
认证：JWT（与 iOS 共享同一套后端）
|
||
部署：4核4G Nginx 静态托管
|
||
```
|
||
|
||
## 一、为什么用 Vite + React 而不是 Next.js
|
||
|
||
WebApp 不需要 SSR/SEO。用户登录后才能使用所有功能。Vite 构建产物直接托管到 Nginx。
|
||
|
||
## 二、为什么用 shadcn/ui
|
||
|
||
C 端产品需要精致、不臃肿的体验。知识工作台是沉浸式工具，不是表格/表单密集的后台。
|
||
|
||
## 三、为什么用 Tiptap
|
||
|
||
基于 ProSeMirror，支持富文本编辑、Markdown 快捷输入、代码块、数学公式、图片拖拽、自定义节点。
|
||
|
||
## 四、状态管理
|
||
|
||
| 类型 | 方案 | 用途 |
|
||
|------|------|------|
|
||
| 服务端状态 | TanStack Query | 知识库列表、知识点、学习记录、用户信息 |
|
||
| 本地状态 | Zustand | 侧边栏、编辑器焦点、选中知识点、主题 |
|
||
|
||
## 五、API
|
||
|
||
OpenAPI → Orval 生成类型安全 client → TanStack Query hooks
|
||
|
||
## 六、页面清单
|
||
|
||
知识库：列表页、详情页、创建页、知识源、导入进度、候选知识点确认
|
||
学习：知识点详情/编辑(Tiptap)、主动回忆、AI分析结果、待巩固项、复习卡片
|
||
个人：设置、会员/额度、学习统计
|
||
|
||
## 七、部署
|
||
|
||
4核4G Nginx 静态托管，域名 app.longde.cloud，API 走 api.longde.cloud
|
||
|
||
## 八、最终拍板
|
||
|
||
Vite + React + TypeScript + shadcn/ui + Tiptap + React Router + TanStack Query + Zustand + Orval + React Hook Form + Zod
|