# call-center-sample

**Repository Path**: dentonliu/call-center-sample

## Basic Information

- **Project Name**: call-center-sample
- **Description**: 呼叫中心官网案例
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-12-24
- **Last Updated**: 2026-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React

## README

# 智能呼叫中心系统

## 项目简介

智能呼叫中心系统是一个现代化的企业通讯解决方案，旨在帮助企业提升客户服务效率、降低运营成本并提高客户满意度。系统提供了全方位的呼叫管理功能，支持7x24小时服务，并具备高度的可扩展性和定制化能力。

## 技术栈

- **前端框架**: React 18.3.1
- **开发语言**: TypeScript
- **构建工具**: Vite 6.2.0
- **样式框架**: Tailwind CSS 3.4.17
- **动画库**: Framer Motion 12.9.2
- **路由管理**: React Router DOM 7.3.0
- **状态管理**: React Context API
- **包管理器**: pnpm
- **UI组件**: 自定义组件 + Tailwind CSS
- **数据可视化**: Recharts (可选)
- **工具库**: clsx, tailwind-merge, zod

## 项目结构

```
call-center-sample/
├── src/
│   ├── components/         # 通用组件
│   │   ├── Navbar.tsx      # 导航栏组件
│   │   ├── Footer.tsx      # 页脚组件
│   │   ├── FeatureCard.tsx # 特性卡片
│   │   ├── ProductCard.tsx # 产品卡片
│   │   └── ...             # 其他组件
│   ├── contexts/           # React Context
│   │   └── authContext.ts  # 认证上下文
│   ├── data/               # 静态数据
│   │   ├── homeData.ts     # 首页数据
│   │   ├── productsData.ts # 产品数据
│   │   └── ...             # 其他数据
│   ├── hooks/              # 自定义hooks
│   │   └── useTheme.ts     # 主题切换hook
│   ├── lib/                # 工具函数
│   │   └── utils.ts        # 通用工具函数
│   ├── pages/              # 页面组件
│   │   ├── Home.tsx        # 首页
│   │   ├── Products.tsx    # 产品列表
│   │   ├── Cases.tsx       # 案例展示
│   │   └── ...             # 其他页面
│   ├── App.tsx             # 应用主组件
│   ├── main.tsx            # 应用入口
│   ├── index.css           # 全局样式
│   └── vite-env.d.ts       # Vite类型声明
├── index.html              # HTML模板
├── package.json            # 项目配置
├── pnpm-lock.yaml          # 依赖锁定文件
├── tailwind.config.js      # Tailwind配置
├── postcss.config.js       # PostCSS配置
├── tsconfig.json           # TypeScript配置
├── vite.config.ts          # Vite配置
└── README.md               # 项目文档
```

## 快速开始

### 环境准备

- 安装 [Node.js](https://nodejs.org/en) (建议版本 >= 18.x)
- 安装 [pnpm](https://pnpm.io/installation)

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm run dev
```

应用将在 http://localhost:3000 启动

## 开发说明

### 脚本命令

| 命令 | 描述 |
|------|------|
| `pnpm run dev` | 启动开发服务器 |
| `pnpm run dev:client` | 启动客户端开发服务器（指定端口3000） |
| `pnpm run build` | 构建生产版本 |
| `pnpm run build:client` | 构建客户端生产版本 |

### 代码规范

- 使用TypeScript进行类型检查
- 使用Tailwind CSS进行样式开发
- 组件使用函数式组件和Hooks
- 遵循React最佳实践
- 使用clsx和tailwind-merge管理CSS类名

### 数据管理

- 静态数据存储在 `src/data/` 目录下
- 动态数据可通过API获取（需自行实现）
- 全局状态使用React Context API管理

## 项目功能

### 首页功能
- 英雄区域展示系统核心价值
- 统计数据展示（客户数量、满意度等）
- 核心特性介绍
- 产品与解决方案展示
- 客户评价展示
- 咨询入口

### 产品模块
- 产品列表展示
- 产品详情查看
- 产品特性对比

### 案例模块
- 成功案例展示
- 案例详情查看
- 行业解决方案

### 关于我们
- 公司介绍
- 团队成员展示
- 发展历程

## 构建与部署

### 构建生产版本

```bash
pnpm run build
```

构建产物将生成在 `dist/` 目录下

### 部署方式

1. **静态部署**：将 `dist/` 目录部署到任何静态文件服务器
2. **容器部署**：可使用Docker容器化部署
3. **云平台部署**：支持Vercel、Netlify、AWS S3等平台

## 浏览器支持

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 贡献指南

1. Fork 项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 开启 Pull Request

## 许可证

本项目采用 MIT 许可证

## 联系方式

如有任何问题或建议，欢迎联系我们：

- 邮箱: liutan2008@hotmail.com
- 网站: https://www.tansanpi.cn