180 lines
4.1 KiB
Markdown
180 lines
4.1 KiB
Markdown
|
# 🚀 Twilio 翻译服务管理后台 - 快速启动指南
|
|||
|
|
|
|||
|
|
## 📋 前置条件
|
|||
|
|
|
|||
|
|
- Node.js 16.0 或更高版本
|
|||
|
|
- npm 或 yarn 包管理器
|
|||
|
|
- Git（可选）
|
|||
|
|
|
|||
|
|
## 🛠️ 安装步骤
|
|||
|
|
|
|||
|
|
### 1. 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 安装项目依赖
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 环境配置
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 复制环境变量模板
|
|||
|
|
cp .env.example .env
|
|||
|
|
|
|||
|
|
# 编辑环境变量文件
|
|||
|
|
# 配置 Twilio 和其他服务的 API 密钥
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 启动开发服务器
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 启动开发服务器
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
应用将在 http://localhost:3000 上运行
|
|||
|
|
|
|||
|
|
## 🔧 可用脚本
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 开发模式
|
|||
|
|
npm run dev
|
|||
|
|
|
|||
|
|
# 构建生产版本
|
|||
|
|
npm run build
|
|||
|
|
|
|||
|
|
# 预览生产构建
|
|||
|
|
npm run preview
|
|||
|
|
|
|||
|
|
# 运行代码检查
|
|||
|
|
npm run lint
|
|||
|
|
|
|||
|
|
# 运行测试
|
|||
|
|
npm run test
|
|||
|
|
|
|||
|
|
# 运行测试 UI
|
|||
|
|
npm run test:ui
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📁 项目结构概览
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── components/ # 可复用组件
|
|||
|
|
│ ├── Layout/ # 布局组件
|
|||
|
|
│ └── Common/ # 通用组件
|
|||
|
|
├── pages/ # 页面组件
|
|||
|
|
├── hooks/ # 自定义 Hooks
|
|||
|
|
├── store/ # 状态管理
|
|||
|
|
├── services/ # API 服务
|
|||
|
|
├── utils/ # 工具函数
|
|||
|
|
├── types/ # TypeScript 类型
|
|||
|
|
├── constants/ # 常量定义
|
|||
|
|
└── styles/ # 样式文件
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🌟 核心功能
|
|||
|
|
|
|||
|
|
### ✅ 已实现功能
|
|||
|
|
- 🏠 **仪表板** - 数据概览和统计
|
|||
|
|
- 👥 **用户管理** - 用户列表、搜索、筛选
|
|||
|
|
- 📞 **通话记录** - 通话历史和详情
|
|||
|
|
- 🎨 **响应式布局** - 适配各种屏幕尺寸
|
|||
|
|
- 🔍 **数据表格** - 带搜索、分页、排序功能
|
|||
|
|
- 🏷️ **状态标签** - 可视化状态显示
|
|||
|
|
|
|||
|
|
### 🚧 开发中功能
|
|||
|
|
- 📄 **文档管理** - 翻译文档上传和管理
|
|||
|
|
- 📅 **预约管理** - 翻译服务预约系统
|
|||
|
|
- 👨💼 **译员管理** - 译员信息和排班
|
|||
|
|
- 💰 **财务管理** - 收支统计和报表
|
|||
|
|
- ⚙️ **系统设置** - 应用配置和权限
|
|||
|
|
|
|||
|
|
## 🔐 登录信息
|
|||
|
|
|
|||
|
|
开发模式下的默认登录信息：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
用户名: admin@example.com
|
|||
|
|
密码: admin123
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🎯 关键特性
|
|||
|
|
|
|||
|
|
### 🏗️ 技术架构
|
|||
|
|
- **React 18** + **TypeScript** - 现代化前端技术栈
|
|||
|
|
- **Vite** - 快速构建工具
|
|||
|
|
- **Ant Design** - 企业级 UI 组件库
|
|||
|
|
- **React Router** - 单页应用路由
|
|||
|
|
- **Context API** - 轻量级状态管理
|
|||
|
|
|
|||
|
|
### 🎨 UI/UX 特性
|
|||
|
|
- 🌓 **深色/浅色主题** 切换
|
|||
|
|
- 📱 **响应式设计** - 支持移动端
|
|||
|
|
- 🔔 **实时通知** 系统
|
|||
|
|
- 🎭 **国际化支持** - 中英文切换
|
|||
|
|
- 🎨 **现代化界面** - 简洁美观
|
|||
|
|
|
|||
|
|
### 🛡️ 安全特性
|
|||
|
|
- 🔐 **JWT 认证** - 安全的用户认证
|
|||
|
|
- 🛡️ **权限控制** - 基于角色的访问控制
|
|||
|
|
- 🔒 **路由守卫** - 保护私有页面
|
|||
|
|
- 📝 **操作日志** - 用户行为追踪
|
|||
|
|
|
|||
|
|
## 📊 开发状态
|
|||
|
|
|
|||
|
|
| 模块 | 状态 | 完成度 |
|
|||
|
|
|------|------|--------|
|
|||
|
|
| 基础架构 | ✅ 完成 | 100% |
|
|||
|
|
| 布局组件 | ✅ 完成 | 100% |
|
|||
|
|
| 用户管理 | ✅ 完成 | 80% |
|
|||
|
|
| 通话记录 | ✅ 完成 | 80% |
|
|||
|
|
| 仪表板 | ✅ 完成 | 70% |
|
|||
|
|
| 文档管理 | 🚧 开发中 | 30% |
|
|||
|
|
| 预约管理 | 🚧 开发中 | 20% |
|
|||
|
|
| 译员管理 | 📋 计划中 | 0% |
|
|||
|
|
| 财务管理 | 📋 计划中 | 0% |
|
|||
|
|
| 系统设置 | 📋 计划中 | 10% |
|
|||
|
|
|
|||
|
|
## 🐛 问题排查
|
|||
|
|
|
|||
|
|
### 常见问题
|
|||
|
|
|
|||
|
|
1. **端口占用**
|
|||
|
|
```bash
|
|||
|
|
# 更改端口
|
|||
|
|
npm run dev -- --port 3001
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. **依赖安装失败**
|
|||
|
|
```bash
|
|||
|
|
# 清除缓存重新安装
|
|||
|
|
rm -rf node_modules package-lock.json
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. **TypeScript 错误**
|
|||
|
|
```bash
|
|||
|
|
# 重启 TypeScript 服务
|
|||
|
|
# 在 VS Code 中: Ctrl+Shift+P -> TypeScript: Restart TS Server
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📞 技术支持
|
|||
|
|
|
|||
|
|
如果遇到问题，请：
|
|||
|
|
|
|||
|
|
1. 查看控制台错误信息
|
|||
|
|
2. 检查网络连接和 API 配置
|
|||
|
|
3. 确认环境变量设置正确
|
|||
|
|
4. 查看项目文档和代码注释
|
|||
|
|
|
|||
|
|
## 🎉 开始开发
|
|||
|
|
|
|||
|
|
现在您可以开始开发了！建议从以下步骤开始：
|
|||
|
|
|
|||
|
|
1. 🔧 **配置环境变量** - 设置 API 端点和密钥
|
|||
|
|
2. 🎨 **自定义主题** - 调整颜色和样式
|
|||
|
|
3. 📄 **添加新页面** - 基于现有模板创建新功能
|
|||
|
|
4. 🔌 **集成 API** - 连接真实的后端服务
|
|||
|
|
|
|||
|
|
祝您开发愉快！ 🚀
|