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
|