Auto commit: 2026-03-24 13:04

This commit is contained in:
xiongxiao
2026-03-24 13:04:47 +08:00
committed by cnb
parent c8955e684f
commit d6ba26fd39
4 changed files with 418 additions and 27 deletions

View File

@@ -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 工具函数