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

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

🎨 功能特性

✅ 已实现功能

用户认证
- 登录/登出
- Token 管理
- 权限控制
工作台
- 数据统计卡片
- 即将到期客户提醒
- 个人业绩展示
客户管理
- 客户列表（搜索、筛选、分页）
- 报备客户（实时查重）
- 客户详情
- 跟进记录
- 状态更新
公海池管理
- 公海池客户列表
- 领取客户
- 多维度筛选
审批流程
- 我的申请列表
- 创建审批申请
- 待审批列表（经理）
- 审批处理
统计报表
- 团队统计（趋势图表）
- 成员业绩排名
- 客户来源分析
- 可视化图表

🚀 快速开始

1. 安装依赖

cd client
npm install

2. 启动开发服务器

npm run dev

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

3. 构建生产版本

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. 统计图表

折线图（趋势分析）
饼图（来源分布）
数据表格
日期筛选

📝 开发说明

添加新页面

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

API 请求

使用封装好的 request 工具：

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 } })

常量使用

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

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

🎯 开发规范

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

🔌 API 代理配置

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

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

🎨 自定义主题

修改 src/main.jsx 中的 ConfigProvider：

<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

🚀 部署

开发环境

npm run dev

生产环境

# 构建
npm run build

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

Nginx 配置示例

location /admin {
    root /path/to/public;
    try_files $uri $uri/ /admin/index.html;
}

📞 技术支持

遇到问题请查看：

浏览器控制台
网络请求（Network）
后端日志

祝开发愉快！ 🎉

CLIENT_README.md 5.8 KB Permalink Cronologia Originale