WebApp（C端知识工作台）技术栈定版

C 端 Web 知识工作台，定位是高体验的学习工具。用户在浏览器里管理知识库、编辑知识点、查看学习进度。

框架：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

1.8 KiB Raw Blame History Unescape Escape