第 6 篇 · 6.1 前端全景
学习目标
完成本节后，你将能够：
- 了解 Langfuse 前端的主要技术栈。
- 区分 feature 目录、通用组件和 server API。
- 知道前端改动为什么也要理解契约。
6.1.1 技术栈
web 主要使用：
- Next.js
- React
- tRPC
- TanStack Query
- TanStack Table
- Tailwind CSS v4
- Radix UI
- Zustand
- Recharts
- Vitest / Playwright / Storybook
6.1.2 前端不是孤立层
很多前端功能直接绑定 shared 契约：
| UI 功能 | 后端/契约 |
|---|---|
| 表格筛选 | FilterState |
| Search Bar | grammar → FilterState |
| trace/observation list | ClickHouse query builder |
| Public API 页面 | API key/project auth |
| eval 配置 | worker queue / shared schema |