跳到主要内容

01 · 分层全景

## 六层栈：从语言底座到领域能力

点步进器或图里的任意一层聚焦；下方详情会列出该层的真实依赖与选它的理由。上层依赖下层，越往上越重、越该慎选。

上层依赖下层

提示：悬停某一层看它的一句话定位，点击则展开该层的依赖清单与选型理由。

01

键盘 ← → 切层 · P 导览 · Esc 退出聚焦

02 · 选型原则

## 四条不成文的规矩

这些原则不写在代码里，但决定了上面每一层为什么长这样。

### 无头优先

交互逻辑与可访问性交给无头库（Radix / Base UI / Ariakit），样式全权自持。升级不被组件库的视觉锁死，改一处 token 全站跟着变。

### 单向依赖

底层零业务、上层不反向依赖下层的实现细节。`cn()` 收口所有 class 合并，主题走 `next-themes` 一处切换，杜绝散落的样式判断。

### 一处一职、允许并存

同类库只在边界清晰时并存：Zustand 管全局、Jotai 管原子；dnd-kit 走新功能、react-dnd 留存量。并存是过渡态，不是终态。

### 可回退

每个重依赖都留退路。成品组件库只占各自的垂直页面，拆掉不伤主干；越靠上层越贵的依赖，越要能被换掉。

03 · 关键抉择

## 六个岔路口，选了什么、放弃了什么

每一条都有真实备选。列出来是为了让「为什么不是那个」也留痕。

### 富文本编辑器

选择 | PlateJS 52（基于 Slate）
备选 | TipTap / Lexical
理由 | 40+ 官方插件、docx 与 markdown 双向、评论 / 建议 / 协同齐活；生态深度压过迁移成本。

### 样式方案

选择 | Tailwind v4 + shadcn 模式
备选 | CSS-in-JS / 组件库全家桶
理由 | 原子类零运行时，cva 管变体，组件源码在自己仓库；改样式不排队等上游。

### 状态管理

选择 | Zustand + Jotai
备选 | Redux Toolkit / 单一大 store
理由 | 全局用 Zustand store、局部用 Jotai 原子，零样板；未引入 Redux。

### AI 对话 UI

选择 | assistant-ui + Vercel AI SDK
备选 | 全自建对话层
理由 | 流式、工具卡、Markdown 渲染开箱即用；后端接 Mastra 运行时，前端不重造轮子。

### 数据获取

选择 | RSC + Server Actions + axios
备选 | TanStack Query
理由 | 服务端组件直取数据，客户端只留必要请求；未引入 React Query，减一层缓存心智。

### 表格与长列表

选择 | TanStack Table + Virtual
备选 | AntD Table 独大
理由 | 无头表格配自建样式，万行列表交给 react-virtual；AntD 只在重后台页兜底。

04 · 完整选型清单

## 14 个域，一屏看全前端依赖

逐条取自 `apps/web/package.json`。颜色标出每个依赖在选型里的角色。

### 前端依赖面板

核心主干撑起日常；成品库只在垂直场景空降；无头 / 自建 / 构建类是骨架；虚线红 是存量或可替换项。

框架 & 底座framework
Next.js 16 React 19 TypeScript 5.9 Turbopack Vite 7 Vitest 4 ESLint 9 biome check
样式系统styling
Tailwind v4 cva clsx tailwind-merge next-themes tw-animate-css scrollbar-hide sonner
无头原语headless
radix-ui @base-ui/react @ariakit/react cmdk vaul input-otp
成品组件库components
shadcn 自建 ×152 antd 6 @lobehub/ui
富文本编辑器editor
platejs 52 @platejs/* 40+ @udecode/cn @excalidraw/excalidraw
AI & 对话ai
ai · Vercel AI SDK @ai-sdk/openai @assistant-ui/react @mastra/core mcp-handler
状态 & 数据data
zustand jotai zod 4 axios drizzle-orm better-auth @supabase/ssr @upstash/redis
表格 & 虚拟化table
@tanstack/react-table @tanstack/react-virtual
可视化 & 画布viz
recharts @xyflow/react mind-elixir heat-graph @dayflow/core
动画motion
motion gsap @rive-app/react border-beam tw-shimmer
拖拽dnd
@dnd-kit/core @dnd-kit/sortable react-dnd
图标 & Emojiicons
lucide-react @tabler/icons-react @hugeicons/react @lobehub/icons @emoji-mart/data
文档 & 文件files
pdfjs-dist @embedpdf/* xlsx docx-preview uploadthing @zumer/snapdom
Markdown & 高亮markdown
react-markdown marked remark-gfm rehype-sanitize shiki lowlight
主干核心主干 按需成品库 · 按需空降 自建无头 / 自建 / 构建 备选存量 · 可替换

### 选型边界（known tensions）

- 三套组件观并存有重量：自建 152 组件 + AntD 6 + LobeHub UI，包体与视觉一致性靠「各守垂直页」的纪律来克制。
- 图标库 5 套按来源就近取用，未强行收敛；靠 `optimizePackageImports` 与 tree-shaking 兜住体积。
- 拖拽 dnd-kit 与 react-dnd 并存：新功能一律 dnd-kit，react-dnd 是待迁移存量。
- 富文本 40+ 依赖是最大单点，换栈成本极高——已用分包与按需导入缓解首屏。
- 未引入独立表单库（RHF / Formik）：轻表单手写 + Zod 4 校验，复杂表单场景需再评估。