# 客户管理页面

## 功能概述

这是一个完整的客户管理页面，支持客户数据的展示、筛选和搜索功能。

## 主要功能

### 1. 数据源
- 使用 `pageUsers` API 从 User 表读取客户数据
- 支持按状态筛选用户（status: 0 表示正常状态）

### 2. 状态管理
客户状态包括：
- **全部** - 显示所有客户
- **跟进中** - 正在跟进的潜在客户
- **已签约** - 已经签约的客户
- **已取消** - 已取消合作的客户

### 3. 顶部Tabs筛选
- 支持按客户状态筛选
- 显示每个状态的客户数量统计
- 实时更新统计数据

### 4. 搜索功能
支持多字段搜索：
- 客户姓名（realName）
- 昵称（nickname）
- 用户名（username）
- 手机号（phone）
- 用户ID（userId）

### 5. 客户信息展示
每个客户卡片显示：
- 客户姓名和状态标签
- 手机号码
- 注册时间
- 用户ID、余额、积分等统计信息

## 技术实现

### 组件结构
```
CustomerManagement
├── 搜索栏 (SearchBar)
├── 状态筛选Tabs
└── 客户列表
    └── 客户卡片项
```

### 主要状态
- `list`: 客户数据列表
- `loading`: 加载状态
- `activeTab`: 当前选中的状态Tab
- `searchValue`: 搜索关键词

### 工具函数
使用 `@/utils/customerStatus` 工具函数管理客户状态：
- `getStatusText()`: 获取状态文本
- `getStatusTagType()`: 获取状态标签类型
- `getStatusOptions()`: 获取状态选项列表

## 使用的组件

### NutUI 组件
- `Tabs` / `TabPane`: 状态筛选标签页
- `SearchBar`: 搜索输入框
- `Tag`: 状态标签
- `Loading`: 加载指示器
- `Space`: 间距布局

### 图标
- `Phone`: 手机号图标
- `User`: 用户图标

## 数据流

1. 页面初始化时调用 `fetchCustomerData()` 获取用户数据
2. 为每个用户添加客户状态（目前使用随机状态，实际项目中应从数据库获取）
3. 根据当前Tab和搜索条件筛选数据
4. 渲染客户列表

## 注意事项

### 临时实现
- 当前使用 `getRandomStatus()` 生成随机客户状态
- 实际项目中应该：
  1. 在数据库中添加客户状态字段
  2. 修改后端API返回真实的客户状态
  3. 删除随机状态生成函数

### 扩展建议
1. 添加客户详情页面
2. 支持客户状态的修改操作
3. 添加客户添加/编辑功能
4. 支持批量操作
5. 添加导出功能
6. 支持更多筛选条件（注册时间、地区等）

## 文件结构
```
src/dealer/customer/
├── index.tsx           # 主页面组件
└── README.md          # 说明文档

src/utils/
└── customerStatus.ts  # 客户状态工具函数
```