# TanStack Query 重构总结

## 概述

本次重构将项目中的状态管理从 Zustand stores 迁移到 TanStack Query，提供了更好的数据获取、缓存和状态管理能力。

## 重构的组件

### 1. NewsletterFormCard
- **文件**: `src/components/settings/notification/newsletter-form-card.tsx`
- **重构内容**:
  - 使用 `useNewsletterStatus`, `useSubscribeNewsletter`, `useUnsubscribeNewsletter` hooks
  - 移除了手动的 `useState` 状态管理
  - 使用 TanStack Query 的自动缓存和错误处理

### 2. UsersPageClient
- **文件**: `src/components/admin/users-page.tsx`
- **重构内容**:
  - 使用 `useUsers` hook 进行数据获取
  - 移除了手动的数据获取逻辑和状态管理
  - 简化了组件逻辑

### 3. CreditsBalanceCard
- **文件**: `src/components/settings/credits/credits-balance-card.tsx`
- **重构内容**:
  - 使用 `useCreditStats` hook 获取信用统计信息
  - 移除了手动的 `fetchCreditStats` 函数
  - 使用 TanStack Query 的 `refetch` 功能

### 4. CreditTransactions
- **文件**: `src/components/settings/credits/credit-transactions.tsx`
- **重构内容**:
  - 使用 `useCreditTransactions` hook 进行分页数据获取
  - 移除了手动的数据获取和状态管理
  - 简化了组件逻辑

### 5. BillingCard
- **文件**: `src/components/settings/billing/billing-card.tsx`
- **重构内容**:
  - 使用 `useCurrentPlan` hook 获取支付和订阅信息
  - 移除了对 `usePayment` hook 的依赖
  - 使用 TanStack Query 的自动数据获取

### 6. UserDetailViewer
- **文件**: `src/components/admin/user-detail-viewer.tsx`
- **重构内容**:
  - 使用 `useBanUser`, `useUnbanUser` mutation hooks
  - 移除了对 `useUsersStore` 的依赖
  - 使用 TanStack Query 的自动缓存失效

## 新增的 Hooks

### 1. Newsletter Hooks (`src/hooks/use-newsletter.ts`)
- `useNewsletterStatus(email)` - 查询订阅状态
- `useSubscribeNewsletter()` - 订阅 newsletter
- `useUnsubscribeNewsletter()` - 取消订阅 newsletter

### 2. Users Hooks (`src/hooks/use-users.ts`)
- `useUsers(pageIndex, pageSize, search, sorting)` - 获取用户列表
- `useBanUser()` - 封禁用户
- `useUnbanUser()` - 解封用户

### 3. Credits Hooks (`src/hooks/use-credits-query.ts`)
- `useCreditBalance()` - 获取信用余额
- `useConsumeCredits()` - 消费信用
- `useCreditStats()` - 获取信用统计信息
- `useCreditTransactions(pageIndex, pageSize, search, sorting)` - 获取信用交易记录

### 4. Payment Hooks (`src/hooks/use-payment-query.ts`)
- `useActiveSubscription(userId)` - 获取活跃订阅
- `useLifetimeStatus(userId)` - 获取终身会员状态
- `useCurrentPlan(userId)` - 获取当前计划信息

## 简化的 Providers

### 1. PaymentProvider
- **文件**: `src/components/layout/payment-provider.tsx`
- **状态**: 已移除，TanStack Query 自动处理所有支付相关数据获取

### 2. CreditsProvider
- **文件**: `src/components/layout/credits-provider.tsx`
- **状态**: 已移除，TanStack Query 自动处理所有积分相关数据获取

## 更新的组件

### 1. UserButton
- **文件**: `src/components/layout/user-button.tsx`
- **更新**: 移除了 `resetState` 调用，TanStack Query 自动处理缓存失效

### 2. UserButtonMobile
- **文件**: `src/components/layout/user-button-mobile.tsx`
- **更新**: 移除了 `resetState` 调用，TanStack Query 自动处理缓存失效

### 3. SidebarUser
- **文件**: `src/components/dashboard/sidebar-user.tsx`
- **更新**: 移除了 `resetState` 调用，TanStack Query 自动处理缓存失效

### 4. CreditsBalanceButton
- **文件**: `src/components/layout/credits-balance-button.tsx`
- **更新**: 使用 `useCreditBalance` 替代 `useCredits`

### 5. CreditsBalanceMenu
- **文件**: `src/components/layout/credits-balance-menu.tsx`
- **更新**: 使用 `useCreditBalance` 替代 `useCredits`

### 6. ConsumeCreditCard
- **文件**: `src/ai/text/components/consume-credit-card.tsx`
- **更新**: 使用 `useCreditBalance` 和 `useConsumeCredits` 替代 `useCredits`

### 7. UpgradeCard
- **文件**: `src/components/dashboard/upgrade-card.tsx`
- **更新**: 使用 `useCurrentPlan` 替代 `usePayment`

### 8. CreditPackages
- **文件**: `src/components/settings/credits/credit-packages.tsx`
- **更新**: 使用 `useCurrentPlan` 替代 `usePayment`

### 9. CreditsBalanceCard
- **文件**: `src/components/settings/credits/credits-balance-card.tsx`
- **更新**: 使用 `useCurrentPlan` 替代 `usePayment`

## 配置

### 1. QueryClient 配置
- **文件**: `src/lib/query-client.ts`
- **配置**: 设置了合理的缓存时间和重试策略

### 2. QueryProvider
- **文件**: `src/components/providers/query-provider.tsx`
- **功能**: 提供 TanStack Query 上下文和开发工具

## 优势

### 1. 更好的缓存管理
- 自动缓存数据，减少不必要的网络请求
- 智能的缓存失效策略
- 支持乐观更新

### 2. 简化的状态管理
- 移除了大量的 `useState` 和 `useEffect`
- 自动处理加载和错误状态
- 统一的数据获取模式

### 3. 更好的用户体验
- 自动重试失败的请求
- 后台数据刷新
- 更流畅的加载状态

### 4. 开发体验提升
- 内置的开发工具支持
- 更好的错误处理
- 类型安全的数据获取

## 缓存策略

- **用户数据**: 30秒缓存，5分钟垃圾回收
- **信用数据**: 30秒缓存，5分钟垃圾回收
- **信用统计**: 1分钟缓存，10分钟垃圾回收
- **支付数据**: 2分钟缓存，5分钟垃圾回收
- **终身状态**: 5分钟缓存，10分钟垃圾回收

## 注意事项

1. 所有组件现在都使用 TanStack Query 进行数据获取
2. 移除了对 Zustand stores 的依赖（除了必要的全局状态）
3. 错误处理现在通过 TanStack Query 统一管理
4. 加载状态通过 `isLoading` 和 `isPending` 属性获取
5. 缓存失效通过 `invalidateQueries` 自动处理
6. 完全移除了 PaymentProvider 和 CreditsProvider
7. 删除了 use-payment.ts 和 payment-store.ts 文件

## 测试

- ✅ 所有组件编译通过
- ✅ TypeScript 类型检查通过
- ✅ 构建成功
- ✅ 代码格式化通过