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

安装依赖

npm install

启动开发服务器

npm run dev

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

构建生产版本

npm run build

预览生产构建

npm run preview

🔧 开发说明

环境变量配置

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

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部署

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 文件了解详情

👥 团队

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

📞 支持

如有问题或建议，请通过以下方式联系：

• 提交 Issue
• 发送邮件至 support@translatepro.com
• 访问项目Wiki获取更多文档

---

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