用途:为 LlamaFarm 的 Designer 子系统提供框架专属的开发模式与检查清单。Designer 是浏览器端项目工作台,用于构建 AI 应用,包含配置编辑、聊天测试、数据集管理、RAG 配置与模型选择。
技术栈:React 18.2(StrictMode)、TypeScript 5.2+、TanStack Query v5、TailwindCSS 3.3、Radix UI 1.x、Vite 6.x、React Router v7、Vitest 1.x、axios 1.x、framer-motion 12.x。
目录结构:designer/src/ 下含 api(axios 服务模块)、assets、components(含 ui 原语)、contexts、hooks(TanStack Query 封装)、lib、types、utils、test。
前置要求:需先遵循共享的 TypeScript 与 React 技能规范。
框架指南:tanstack-query.md(查询/变更、缓存、失效)、tailwind.md(主题、响应式)、radix.md(组件与无障碍)、performance.md(打包体积、懒加载)。
关键模式:集中式 axios 客户端(baseURL、JSON 头、60 秒超时)与响应拦截器(422 抛 ValidationError,其余抛 NetworkError);QueryClient 默认 staleTime 60 秒、gcTime 5 分钟、retry 2、指数退避、关闭窗口聚焦重取;cn() 合并 Tailwind 类;ThemeProvider 配合 dark 类策略。
组件约定:功能组件按 Feature 目录组织,一文件一组件;UI 原语包装 Radix 并用 forwardRef 与 displayName;图标用 lucide-react。测试用 MSW 模拟 API,配合 renderWithProviders。
检查清单按 TanStack Query、TailwindCSS、Radix UI、性能四类分级。限制:资料未提供安装命令、收费与平台信息。