# 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