Initial commit: Clean Twilio app project

2025-06-28 10:48:06 +08:00
commit 59d40cc2e0
57 changed files with 20710 additions and 0 deletions
@@ -0,0 +1,238 @@
+# 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
+**状态**: ✅ 生产就绪