238 lines
5.5 KiB
Markdown
238 lines
5.5 KiB
Markdown
# 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
|
||
**状态**: ✅ 生产就绪 |