# 客户报备管理系统 - 前端界面

基于 React + Ant Design 5 的现代化管理界面。

## 🎨 功能特性

### ✅ 已实现功能

- **用户认证**
  - 登录/登出
  - Token 管理
  - 权限控制

- **工作台**
  - 数据统计卡片
  - 即将到期客户提醒
  - 个人业绩展示

- **客户管理**
  - 客户列表（搜索、筛选、分页）
  - 报备客户（实时查重）
  - 客户详情
  - 跟进记录
  - 状态更新

- **公海池管理**
  - 公海池客户列表
  - 领取客户
  - 多维度筛选

- **审批流程**
  - 我的申请列表
  - 创建审批申请
  - 待审批列表（经理）
  - 审批处理

- **统计报表**
  - 团队统计（趋势图表）
  - 成员业绩排名
  - 客户来源分析
  - 可视化图表

## 🚀 快速开始

### 1. 安装依赖

```bash
cd client
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
```

前端服务将运行在：http://localhost:3001

### 3. 构建生产版本

```bash
npm run build
```

构建文件将输出到 `../public/admin` 目录。

## 📁 项目结构

```
client/
├── src/
│   ├── components/          # 公共组件
│   │   └── Layout/          # 布局组件
│   ├── pages/               # 页面组件
│   │   ├── Login/           # 登录页
│   │   ├── Dashboard/       # 工作台
│   │   ├── Customer/        # 客户管理
│   │   ├── Pool/            # 公海池
│   │   ├── Approval/        # 审批管理
│   │   └── Stats/           # 统计报表
│   ├── utils/               # 工具函数
│   │   ├── request.js       # axios 封装
│   │   └── constants.js     # 常量定义
│   ├── App.jsx              # 根组件
│   ├── main.jsx             # 入口文件
│   └── index.css            # 全局样式
├── index.html               # HTML 模板
├── vite.config.js           # Vite 配置
└── package.json             # 依赖配置
```

## 🎯 页面路由

| 路径 | 页面 | 权限 |
|------|------|------|
| `/login` | 登录页 | 公开 |
| `/` | 工作台 | 全部 |
| `/customers` | 客户列表 | 全部 |
| `/customers/create` | 报备客户 | 全部 |
| `/customers/:id` | 客户详情 | 全部 |
| `/pool` | 公海池 | 全部 |
| `/my-approvals` | 我的申请 | 全部 |
| `/approvals` | 待审批 | 经理+ |
| `/stats/team` | 团队统计 | 经理+ |
| `/stats/source` | 来源分析 | 经理+ |

## 🛠️ 技术栈

- **框架**: React 18
- **UI 库**: Ant Design 5
- **路由**: React Router 6
- **HTTP 客户端**: Axios
- **图表**: Recharts
- **构建工具**: Vite
- **日期处理**: Day.js

## 🎨 主要组件

### 1. Layout 布局
- 顶部导航栏
- 侧边菜单
- 内容区域
- 用户信息展示

### 2. 客户列表
- 表格展示
- 搜索和筛选
- 分页
- 状态标签

### 3. 客户报备
- 表单验证
- 实时查重
- 冲突提示
- 自动提交

### 4. 客户详情
- 基本信息
- 跟进记录时间线
- 快速操作
- 状态更新

### 5. 统计图表
- 折线图（趋势分析）
- 饼图（来源分布）
- 数据表格
- 日期筛选

## 📝 开发说明

### 添加新页面

1. 在 `src/pages/` 下创建页面组件
2. 在 `src/App.jsx` 中添加路由
3. 在 `src/components/Layout/` 中添加菜单项

### API 请求

使用封装好的 `request` 工具：

```javascript
import request from '@/utils/request'

// GET 请求
const data = await request.get('/api/customers')

// POST 请求
await request.post('/api/customers', { name: 'xxx' })

// 带参数
await request.get('/api/customers', { params: { page: 1 } })
```

### 常量使用

```javascript
import { CUSTOMER_STATUS, USER_ROLES } from '@/utils/constants'

// 渲染状态标签
<Tag color={CUSTOMER_STATUS[status]?.color}>
  {CUSTOMER_STATUS[status]?.text}
</Tag>
```

## 🎯 开发规范

1. **组件命名**: 使用 PascalCase
2. **文件命名**: 组件用 PascalCase，工具用 camelCase
3. **样式**: 优先使用 Ant Design 主题，必要时使用 CSS Modules
4. **状态管理**: 使用 React Hooks (useState, useEffect)
5. **错误处理**: 统一在 request.js 中处理
6. **代码格式**: 建议使用 ESLint + Prettier

## 🔌 API 代理配置

开发环境下，Vite 会自动代理 API 请求：

```javascript
// vite.config.js
proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true
  }
}
```

## 🎨 自定义主题

修改 `src/main.jsx` 中的 ConfigProvider：

```javascript
<ConfigProvider
  theme={{
    token: {
      colorPrimary: '#1890ff',
      borderRadius: 6,
    },
  }}
>
  <App />
</ConfigProvider>
```

## 📱 响应式设计

所有页面已适配移动端：
- 使用 Ant Design 的 Grid 系统
- 表格支持横向滚动
- 弹窗自适应宽度

## ⚡ 性能优化

- 路由懒加载
- 图片懒加载
- 分页加载数据
- 防抖/节流搜索
- 组件 memo 优化

## 🐛 常见问题

### Q1: 页面空白
**A**: 检查后端服务是否启动，查看浏览器控制台错误。

### Q2: API 请求失败
**A**: 确认后端运行在 `http://localhost:3000`，检查代理配置。

### Q3: 登录后刷新页面返回登录页
**A**: 检查 localStorage 中的 token 是否存在，可能是 token 过期。

### Q4: 样式不生效
**A**: 清除缓存重新启动开发服务器：`npm run dev`

## 🚀 部署

### 开发环境
```bash
npm run dev
```

### 生产环境
```bash
# 构建
npm run build

# 构建产物在 ../public/admin 目录
# 直接访问后端服务器的 /admin 路径即可
```

### Nginx 配置示例
```nginx
location /admin {
    root /path/to/public;
    try_files $uri $uri/ /admin/index.html;
}
```

## 📞 技术支持

遇到问题请查看：
1. 浏览器控制台
2. 网络请求（Network）
3. 后端日志

---

**祝开发愉快！** 🎉