# Twilio 翻译服务管理后台

## 项目简介

这是一个基于 React + TypeScript + Vite 构建的现代化翻译服务管理后台系统，提供完整的多语言翻译服务管理功能。

## 🚀 功能特性

### 核心功能
- 📊 **仪表板统计** - 实时数据展示和趋势分析
- 👥 **用户管理** - 用户信息管理和权限控制
- 📞 **通话记录管理** - AI/人工翻译通话记录查看和管理
- 📄 **文档翻译** - 文档上传、翻译进度跟踪
- 📅 **预约管理** - 翻译服务预约和调度
- 👨‍💼 **译员管理** - 译员信息和工作安排
- 💰 **支付管理** - 支付记录和财务统计

### 技术特性
- 🎨 **现代化UI** - 基于 Ant Design 的美观界面
- 📱 **响应式设计** - 支持多设备适配
- 🌙 **主题切换** - 支持明暗主题切换
- 🔒 **权限控制** - 基于角色的访问控制
- 📈 **数据可视化** - 丰富的图表和统计展示
- 🌐 **国际化** - 多语言支持

## 🛠️ 技术栈

- **前端框架**: React 18 + TypeScript
- **构建工具**: Vite
- **UI组件库**: Ant Design
- **图表库**: @ant-design/plots
- **路由**: React Router DOM
- **状态管理**: React Hooks + Context
- **样式**: CSS Modules + Less
- **开发工具**: ESLint + Prettier

## 📦 项目结构

```
src/
├── components/          # 公共组件
│   ├── Common/         # 通用组件
│   ├── Layout/         # 布局组件
│   └── Charts/         # 图表组件
├── pages/              # 页面组件
│   ├── Dashboard/      # 仪表板
│   ├── Users/          # 用户管理
│   ├── Calls/          # 通话记录
│   ├── Documents/      # 文档翻译
│   ├── Appointments/   # 预约管理
│   ├── Translators/    # 译员管理
│   └── Payments/       # 支付管理
├── services/           # API服务
│   ├── api.ts          # API接口
│   └── mockData.ts     # 模拟数据
├── types/              # TypeScript类型定义
├── utils/              # 工具函数
├── constants/          # 常量定义
├── hooks/              # 自定义Hooks
└── styles/             # 样式文件
```

## 🚀 快速开始

### 环境要求
- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装依赖
```bash
npm install
```

### 启动开发服务器
```bash
npm run dev
```

访问 http://localhost:3000 查看应用

### 构建生产版本
```bash
npm run build
```

### 预览生产构建
```bash
npm run preview
```

## 🔧 开发说明

### 环境变量配置
创建 `.env.local` 文件配置环境变量：

```env
VITE_API_BASE_URL=http://localhost:3001/api
VITE_USE_MOCK_DATA=true
```

### 模拟数据
项目包含完整的模拟数据，支持离线开发和测试：
- 用户数据
- 通话记录
- 文档翻译记录
- 预约数据
- 译员信息
- 支付记录
- 系统统计数据

### API接口
所有API接口都已定义在 `src/services/api.ts` 中，包括：
- 用户管理API
- 通话记录API
- 文档翻译API
- 预约管理API
- 译员管理API
- 支付管理API
- 仪表板统计API

## 📊 功能模块

### 仪表板
- 实时统计数据展示
- 用户增长趋势图
- 通话量统计
- 收入趋势分析
- 语言分布图表
- 最近活动列表

### 用户管理
- 用户列表查看
- 用户信息编辑
- 用户状态管理
- 权限分配
- 订阅管理

### 通话记录管理
- 通话记录列表
- 搜索和筛选
- 通话详情查看
- 录音文件下载
- 批量操作

### 文档翻译
- 文档上传
- 翻译进度跟踪
- 质量等级管理
- 译员分配
- 文件下载

## 🎨 主题和样式

项目支持多主题切换：
- 明亮主题
- 暗黑主题
- 自动主题（跟随系统）

响应式设计支持：
- 桌面端 (>= 1200px)
- 平板端 (768px - 1199px)
- 移动端 (< 768px)

## 🔐 权限系统

基于角色的权限控制：
- **管理员**: 完整系统访问权限
- **译员**: 译员相关功能权限
- **用户**: 基础用户功能权限

## 📈 数据可视化

使用 @ant-design/plots 提供丰富的图表：
- 折线图 - 趋势分析
- 柱状图 - 数据对比
- 饼图 - 分布统计
- 面积图 - 累积数据

## 🚀 部署说明

### 生产环境部署
1. 构建生产版本: `npm run build`
2. 将 `dist` 目录部署到Web服务器
3. 配置Nginx反向代理（可选）

### Docker部署
```dockerfile
FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
EXPOSE 80
```

## 🤝 贡献指南

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

## 📝 更新日志

### v1.0.0 (2024-12-27)
- ✅ 完成基础项目架构
- ✅ 实现仪表板功能
- ✅ 完成用户管理模块
- ✅ 实现通话记录管理
- ✅ 添加文档翻译功能
- ✅ 完成预约管理系统
- ✅ 实现译员管理
- ✅ 添加支付管理功能
- ✅ 完善权限控制系统
- ✅ 实现主题切换功能
- ✅ 添加响应式设计
- ✅ 完善数据可视化

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 👥 团队

- **技术负责人**: AI Assistant
- **项目状态**: 生产就绪
- **维护状态**: 活跃维护

## 📞 支持

如有问题或建议，请通过以下方式联系：
- 提交 Issue
- 发送邮件至 support@translatepro.com
- 访问项目Wiki获取更多文档

---

**最后更新**: 2024年12月27日
**版本**: v1.0.0
**状态**: ✅ 生产就绪