Auto commit: 2026-03-24 13:04
This commit is contained in:
22
AGENTS.md
22
AGENTS.md
@@ -30,23 +30,20 @@ pages/page-app/
|
||||
└── store/ # 模块状态管理(Zustand)
|
||||
```
|
||||
|
||||
### hooks/ 文件夹说明
|
||||
### api 请求
|
||||
|
||||
每个模块的 `hooks/` 文件夹用于封装与该模块相关的 React Query hooks:
|
||||
`modules/*-api.ts` 文件用于封装 API 请求函数,使用 `@kevisual/query` 进行底层请求处理。
|
||||
|
||||
参考示例
|
||||
```ts
|
||||
// src/modules/mark-api.ts
|
||||
import { queryApi as markApi } from '@/modules/mark-api.ts';
|
||||
|
||||
- **use-api-query.ts**: 使用 `@tanstack/react-query` 的 `useQuery` 封装 API 调用
|
||||
- 定义 `queryKeys` 常量用于缓存标识
|
||||
- 封装 `useQuery` hooks 用于数据获取(GET 请求)
|
||||
- 封装 `useMutation` hooks 用于数据修改(POST/PUT/DELETE 请求)
|
||||
- 支持预取(prefetch)和无限滚动(infinite query)
|
||||
- **index.ts**: 导出模块所有 hooks,便于统一导入使用
|
||||
const res = await markApi.mark.list({ page: 1, pageSize: 10 });
|
||||
```
|
||||
|
||||
### 状态和数据获取
|
||||
|
||||
- **@tanstack/react-query** 用于数据获取、缓存和状态管理
|
||||
- 在模块的 `hooks/` 文件夹中封装 API 调用
|
||||
- QueryClient 实例位于 `src/modules/query.ts`
|
||||
- 在 `src/routes/__root.tsx` 中通过 `QueryClientProvider` 提供
|
||||
- **Zustand** 用于全局状态管理
|
||||
- **@kevisual/query** 用于底层 API 请求封装
|
||||
- **React Hook Form** 用于表单管理
|
||||
@@ -54,7 +51,6 @@ pages/page-app/
|
||||
## 核心依赖
|
||||
|
||||
- **@base-ui/react**: Headless UI 基础组件
|
||||
- **@tanstack/react-query**: 数据获取、缓存和状态管理(配合 hooks/ 使用)
|
||||
- **@tanstack/react-router**: 基于 TanStack Router 插件的文件路由
|
||||
- **class-variance-authority**: 基于变体的样式系统
|
||||
- **clsx + tailwind-merge**: 通过 `cn()` 提供 className 工具函数
|
||||
|
||||
Reference in New Issue
Block a user