通话逻辑调整
This commit is contained in:
parent
deb2900acc
commit
48d22a1e94
130
BILLING_FEATURES.md
Normal file
130
BILLING_FEATURES.md
Normal file
@ -0,0 +1,130 @@
|
||||
# 移动端计费功能实现总结
|
||||
|
||||
## 已实现的功能
|
||||
|
||||
### 1. 计费系统核心功能 (`src/types/billing.ts`)
|
||||
- ✅ 用户类型定义：个人用户和企业用户
|
||||
- ✅ 通话类型：语音通话和视频通话
|
||||
- ✅ 翻译类型：文本翻译、手语翻译、人工翻译
|
||||
- ✅ 计费规则配置
|
||||
- ✅ 用户账户信息管理
|
||||
- ✅ 预约信息结构
|
||||
- ✅ 翻译员信息管理
|
||||
- ✅ 通话记录和充值记录
|
||||
|
||||
### 2. 计费服务 (`src/services/billingService.ts`)
|
||||
- ✅ 单例模式的计费服务类
|
||||
- ✅ 根据用户类型设置不同的计费规则
|
||||
- ✅ 通话费用计算（基于通话类型、翻译类型、时长、翻译员费率）
|
||||
- ✅ 余额检查和扣费功能
|
||||
- ✅ 低余额警告
|
||||
- ✅ 账户充值功能
|
||||
- ✅ 金额格式化显示
|
||||
|
||||
### 3. 预约服务 (`src/services/appointmentService.ts`)
|
||||
- ✅ 预约管理服务
|
||||
- ✅ 翻译员管理和可用性检查
|
||||
- ✅ 预约创建、查询、更新、取消
|
||||
- ✅ 时间冲突检查
|
||||
- ✅ 按日期和月份筛选预约
|
||||
- ✅ 模拟数据初始化
|
||||
|
||||
### 4. 移动端首页更新 (`src/pages/mobile/Home.tsx`)
|
||||
- ✅ 用户账户余额显示
|
||||
- ✅ 账户类型显示
|
||||
- ✅ 快捷操作按钮（语音通话、视频通话、预约通话、账户充值）
|
||||
- ✅ 即将到来的预约预览
|
||||
- ✅ 最近活动记录（包含费用信息）
|
||||
- ✅ 美观的卡片式布局
|
||||
|
||||
### 5. 移动端通话页面 (`src/pages/mobile/Call.tsx`)
|
||||
- ✅ 支持语音和视频通话选择
|
||||
- ✅ 翻译类型选择（文本、手语、人工翻译）
|
||||
- ✅ 实时费用计算和显示
|
||||
- ✅ 账户余额监控
|
||||
- ✅ 通话时长计时
|
||||
- ✅ 翻译员选择（人工翻译时）
|
||||
- ✅ 翻译历史记录
|
||||
- ✅ 自动扣费功能
|
||||
|
||||
### 6. 移动端充值页面 (`src/pages/mobile/Recharge.tsx`)
|
||||
- ✅ 预设充值金额选择
|
||||
- ✅ 自定义充值金额输入
|
||||
- ✅ 充值赠送金额计算
|
||||
- ✅ 多种支付方式支持
|
||||
- ✅ 充值历史记录查看
|
||||
- ✅ 账户余额实时显示
|
||||
- ✅ 充值成功后余额更新
|
||||
|
||||
### 7. 移动端预约页面 (`src/pages/mobile/Appointment.tsx`)
|
||||
- ✅ 通话类型选择（语音/视频）
|
||||
- ✅ 翻译类型选择
|
||||
- ✅ 日期和时间选择（未来7天）
|
||||
- ✅ 语言对选择
|
||||
- ✅ 翻译员选择（基于语言和日期可用性）
|
||||
- ✅ 预估费用计算
|
||||
- ✅ 余额充足性检查
|
||||
- ✅ 预约创建和确认
|
||||
|
||||
### 8. 移动端设置页面 (`src/pages/mobile/Settings.tsx`)
|
||||
- ✅ 用户信息展示（账户类型、余额）
|
||||
- ✅ 账户管理功能
|
||||
- ✅ 通话设置选项
|
||||
- ✅ 翻译设置选项
|
||||
- ✅ 通知设置管理
|
||||
- ✅ 帮助和反馈入口
|
||||
- ✅ 退出登录功能
|
||||
|
||||
### 9. 路由配置更新 (`src/routes/index.tsx`)
|
||||
- ✅ 新增充值页面路由 `/mobile/recharge`
|
||||
- ✅ 新增预约页面路由 `/mobile/appointment`
|
||||
- ✅ 移动端路由完整配置
|
||||
|
||||
## 核心计费逻辑
|
||||
|
||||
### 费率配置
|
||||
- **语音通话 + 文本翻译**: ¥0.50/分钟
|
||||
- **视频通话 + 手语翻译**: ¥1.00/分钟
|
||||
- **视频通话 + 人工翻译**: ¥2.00/分钟 + 翻译员费率
|
||||
|
||||
### 用户类型差异
|
||||
- **个人用户**: 使用标准费率
|
||||
- **企业用户**: 可配置专属费率和信用额度
|
||||
|
||||
### 余额管理
|
||||
- 低余额警告：不足5分钟通话费用时提醒
|
||||
- 最低余额限制：不足1分钟通话费用时禁止通话
|
||||
- 自动扣费：通话结束后自动从账户余额扣除费用
|
||||
|
||||
### 充值优惠
|
||||
- 充值金额越大，赠送比例越高
|
||||
- 支持多种支付方式（微信、支付宝、银行卡等）
|
||||
|
||||
## 技术特性
|
||||
|
||||
- 🎯 **TypeScript 类型安全**: 完整的类型定义确保代码质量
|
||||
- 🏗️ **单例模式**: 服务类使用单例模式确保数据一致性
|
||||
- 💾 **模拟数据**: 完整的模拟数据支持开发和测试
|
||||
- 🎨 **响应式设计**: 适配移动端的美观界面
|
||||
- ⚡ **实时计算**: 费用和余额实时更新
|
||||
- 🔒 **余额保护**: 多重余额检查防止超支
|
||||
|
||||
## 使用流程
|
||||
|
||||
1. **用户注册/登录** → 获得初始账户和余额
|
||||
2. **查看余额** → 在首页或设置页面查看当前余额
|
||||
3. **充值账户** → 选择金额和支付方式进行充值
|
||||
4. **预约通话** → 选择时间、类型、翻译员创建预约
|
||||
5. **开始通话** → 选择通话类型和翻译方式
|
||||
6. **实时计费** → 通话过程中显示累计费用
|
||||
7. **自动扣费** → 通话结束后自动从余额扣除费用
|
||||
8. **查看记录** → 在首页查看通话历史和费用记录
|
||||
|
||||
## 下一步开发建议
|
||||
|
||||
1. **后端集成**: 连接真实的后端API替换模拟数据
|
||||
2. **支付集成**: 集成真实的支付网关
|
||||
3. **推送通知**: 实现余额不足和预约提醒
|
||||
4. **数据持久化**: 实现本地数据存储
|
||||
5. **错误处理**: 完善网络错误和支付失败处理
|
||||
6. **单元测试**: 为核心计费逻辑添加测试用例
|
||||
247
TWILIO_TEST_GUIDE.md
Normal file
247
TWILIO_TEST_GUIDE.md
Normal file
@ -0,0 +1,247 @@
|
||||
# Twilio 视频通话服务完整测试指南
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 1. 环境准备
|
||||
|
||||
#### 后端服务器
|
||||
```bash
|
||||
# 进入服务器目录
|
||||
cd server
|
||||
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 启动服务器
|
||||
npm start
|
||||
```
|
||||
|
||||
服务器将在 `http://localhost:3001` 启动
|
||||
|
||||
#### 前端应用
|
||||
```bash
|
||||
# 在项目根目录
|
||||
npm install
|
||||
|
||||
# 启动开发服务器
|
||||
npm run dev
|
||||
```
|
||||
|
||||
前端应用将在 `http://localhost:5173` 启动
|
||||
|
||||
### 2. Twilio 配置
|
||||
|
||||
在 `server/index.js` 中更新您的 Twilio 凭证：
|
||||
|
||||
```javascript
|
||||
const TWILIO_CONFIG = {
|
||||
accountSid: 'YOUR_TWILIO_ACCOUNT_SID',
|
||||
apiKey: 'YOUR_TWILIO_API_KEY',
|
||||
apiSecret: 'YOUR_TWILIO_API_SECRET',
|
||||
};
|
||||
```
|
||||
|
||||
或者设置环境变量：
|
||||
```bash
|
||||
export TWILIO_ACCOUNT_SID=your_account_sid
|
||||
export TWILIO_API_KEY=your_api_key
|
||||
export TWILIO_API_SECRET=your_api_secret
|
||||
```
|
||||
|
||||
## 🧪 测试步骤
|
||||
|
||||
### 步骤 1: 后端 API 测试
|
||||
|
||||
#### 1.1 健康检查
|
||||
```bash
|
||||
curl http://localhost:3001/health
|
||||
```
|
||||
|
||||
预期响应：
|
||||
```json
|
||||
{
|
||||
"status": "ok",
|
||||
"timestamp": "2024-01-01T00:00:00.000Z",
|
||||
"service": "Twilio Token Server"
|
||||
}
|
||||
```
|
||||
|
||||
#### 1.2 获取访问令牌
|
||||
```bash
|
||||
curl -X POST http://localhost:3001/api/twilio/token \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"identity": "test-user",
|
||||
"roomName": "test-room"
|
||||
}'
|
||||
```
|
||||
|
||||
预期响应：
|
||||
```json
|
||||
{
|
||||
"token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0...",
|
||||
"identity": "test-user",
|
||||
"roomName": "test-room"
|
||||
}
|
||||
```
|
||||
|
||||
### 步骤 2: 前端功能测试
|
||||
|
||||
#### 2.1 访问视频通话页面
|
||||
1. 打开浏览器访问 `http://localhost:5173`
|
||||
2. 导航到视频通话相关页面
|
||||
3. 查看设备检测是否正常工作
|
||||
|
||||
#### 2.2 设备测试面板
|
||||
访问 `/device-test` 页面进行设备测试：
|
||||
|
||||
1. **摄像头测试**
|
||||
- 点击"测试摄像头"按钮
|
||||
- 确认能看到视频预览
|
||||
- 检查视频质量
|
||||
|
||||
2. **麦克风测试**
|
||||
- 点击"测试麦克风"按钮
|
||||
- 说话并观察音频指示器
|
||||
- 确认音频输入正常
|
||||
|
||||
3. **扬声器测试**
|
||||
- 点击"测试扬声器"按钮
|
||||
- 确认能听到测试音频
|
||||
|
||||
#### 2.3 视频通话测试
|
||||
|
||||
1. **创建房间**
|
||||
- 输入房间名称
|
||||
- 输入用户身份
|
||||
- 点击"加入房间"
|
||||
|
||||
2. **多用户测试**
|
||||
- 在另一个浏览器标签页或设备上
|
||||
- 使用不同的用户身份加入同一房间
|
||||
- 测试双向视频通话
|
||||
|
||||
## 📱 设备兼容性测试
|
||||
|
||||
### 桌面浏览器
|
||||
- ✅ Chrome (推荐)
|
||||
- ✅ Firefox
|
||||
- ✅ Safari
|
||||
- ⚠️ Edge (部分功能)
|
||||
|
||||
### 移动设备
|
||||
- ✅ iOS Safari
|
||||
- ✅ Android Chrome
|
||||
- ⚠️ 其他移动浏览器
|
||||
|
||||
### 测试检查清单
|
||||
|
||||
#### 基础功能
|
||||
- [ ] 摄像头权限请求
|
||||
- [ ] 麦克风权限请求
|
||||
- [ ] 视频预览显示
|
||||
- [ ] 音频输入检测
|
||||
- [ ] 房间创建和加入
|
||||
|
||||
#### 视频通话功能
|
||||
- [ ] 本地视频显示
|
||||
- [ ] 远程视频接收
|
||||
- [ ] 音频双向通信
|
||||
- [ ] 视频质量自适应
|
||||
- [ ] 网络断线重连
|
||||
|
||||
#### 用户界面
|
||||
- [ ] 控制按钮响应
|
||||
- [ ] 设备切换功能
|
||||
- [ ] 全屏模式
|
||||
- [ ] 静音/取消静音
|
||||
- [ ] 视频开启/关闭
|
||||
|
||||
## 🐛 常见问题排查
|
||||
|
||||
### 问题 1: 无法获取访问令牌
|
||||
**症状**: API 返回 500 错误
|
||||
**解决方案**:
|
||||
1. 检查 Twilio 凭证是否正确
|
||||
2. 确认网络连接正常
|
||||
3. 查看服务器日志
|
||||
|
||||
### 问题 2: 摄像头/麦克风权限被拒绝
|
||||
**症状**: 浏览器显示权限被阻止
|
||||
**解决方案**:
|
||||
1. 在浏览器设置中允许摄像头和麦克风权限
|
||||
2. 使用 HTTPS 连接（生产环境）
|
||||
3. 刷新页面重新请求权限
|
||||
|
||||
### 问题 3: 视频通话连接失败
|
||||
**症状**: 无法看到远程视频
|
||||
**解决方案**:
|
||||
1. 检查防火墙设置
|
||||
2. 确认 STUN/TURN 服务器配置
|
||||
3. 测试网络连接质量
|
||||
|
||||
### 问题 4: 音频质量差或有回音
|
||||
**症状**: 音频断断续续或有回音
|
||||
**解决方案**:
|
||||
1. 使用耳机减少回音
|
||||
2. 调整麦克风音量
|
||||
3. 检查网络带宽
|
||||
|
||||
## 📊 性能监控
|
||||
|
||||
### 关键指标
|
||||
- **连接建立时间**: < 3 秒
|
||||
- **视频延迟**: < 200ms
|
||||
- **音频延迟**: < 150ms
|
||||
- **丢包率**: < 1%
|
||||
|
||||
### 监控工具
|
||||
1. 浏览器开发者工具
|
||||
2. Twilio Insights Dashboard
|
||||
3. 网络质量检测
|
||||
|
||||
## 🔧 高级配置
|
||||
|
||||
### 视频质量设置
|
||||
```javascript
|
||||
const videoConfig = {
|
||||
width: { ideal: 1280 },
|
||||
height: { ideal: 720 },
|
||||
frameRate: { ideal: 30 }
|
||||
};
|
||||
```
|
||||
|
||||
### 音频设置
|
||||
```javascript
|
||||
const audioConfig = {
|
||||
echoCancellation: true,
|
||||
noiseSuppression: true,
|
||||
autoGainControl: true
|
||||
};
|
||||
```
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
如果遇到问题，请：
|
||||
1. 查看浏览器控制台错误信息
|
||||
2. 检查服务器日志
|
||||
3. 参考 Twilio 官方文档
|
||||
4. 联系技术支持团队
|
||||
|
||||
## 🚀 生产环境部署
|
||||
|
||||
### 安全考虑
|
||||
1. 使用 HTTPS
|
||||
2. 实施用户认证
|
||||
3. 设置访问令牌过期时间
|
||||
4. 配置 CORS 策略
|
||||
|
||||
### 性能优化
|
||||
1. 使用 CDN 加速
|
||||
2. 启用 gzip 压缩
|
||||
3. 配置负载均衡
|
||||
4. 监控服务器性能
|
||||
|
||||
---
|
||||
|
||||
**注意**: 这是一个测试环境配置，生产环境需要额外的安全和性能优化措施。
|
||||
420
Twilioapp-admin/package-lock.json
generated
420
Twilioapp-admin/package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "twilioapp-admin",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.0.0",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
@ -23,6 +24,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.4.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"recharts": "^3.0.2",
|
||||
"twilio": "^5.7.1",
|
||||
"twilio-video": "^2.31.0",
|
||||
"typescript": "^4.7.4",
|
||||
@ -112,15 +114,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@ant-design/icons": {
|
||||
"version": "5.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.6.1.tgz",
|
||||
"integrity": "sha512-0/xS39c91WjPAZOWsvi1//zjx6kAp4kxWwctR6kuU6p133w8RU0D2dSCvZC19uQyharg/sAvYxGYWl01BbZZfg==",
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-6.0.0.tgz",
|
||||
"integrity": "sha512-o0aCCAlHc1o4CQcapAwWzHeaW2x9F49g7P3IDtvtNXgHowtRWYb7kiubt8sQPFvfVIVU/jLw2hzeSlNt0FU+Uw==",
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^7.0.0",
|
||||
"@ant-design/colors": "^8.0.0",
|
||||
"@ant-design/icons-svg": "^4.4.0",
|
||||
"@babel/runtime": "^7.24.8",
|
||||
"classnames": "^2.2.6",
|
||||
"rc-util": "^5.31.1"
|
||||
"@rc-component/util": "^1.2.1",
|
||||
"classnames": "^2.2.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
@ -135,6 +136,22 @@
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
|
||||
"integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA=="
|
||||
},
|
||||
"node_modules/@ant-design/icons/node_modules/@ant-design/colors": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-8.0.0.tgz",
|
||||
"integrity": "sha512-6YzkKCw30EI/E9kHOIXsQDHmMvTllT8STzjMb4K2qzit33RW2pqCJP0sk+hidBntXxE+Vz4n1+RvCTfBw6OErw==",
|
||||
"dependencies": {
|
||||
"@ant-design/fast-color": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@ant-design/icons/node_modules/@ant-design/fast-color": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/fast-color/-/fast-color-3.0.0.tgz",
|
||||
"integrity": "sha512-eqvpP7xEDm2S7dUzl5srEQCBTXZMmY3ekf97zI+M2DHOYyKdJGH0qua0JACHTqbkRnD/KHFQP9J1uMJ/XWVzzA==",
|
||||
"engines": {
|
||||
"node": ">=8.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@ant-design/react-slick": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.1.2.tgz",
|
||||
@ -3141,6 +3158,57 @@
|
||||
"react-dom": ">=16.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rc-component/util": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@rc-component/util/-/util-1.2.1.tgz",
|
||||
"integrity": "sha512-AUVu6jO+lWjQnUOOECwu8iR0EdElQgWW5NBv5vP/Uf9dWbAX3udhMutRlkVXjuac2E40ghkFy+ve00mc/3Fymg==",
|
||||
"dependencies": {
|
||||
"react-is": "^18.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18.0.0",
|
||||
"react-dom": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rc-component/util/node_modules/react-is": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
||||
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "2.8.2",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
|
||||
"integrity": "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==",
|
||||
"dependencies": {
|
||||
"@standard-schema/spec": "^1.0.0",
|
||||
"@standard-schema/utils": "^0.3.0",
|
||||
"immer": "^10.0.3",
|
||||
"redux": "^5.0.1",
|
||||
"redux-thunk": "^3.1.0",
|
||||
"reselect": "^5.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
|
||||
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit/node_modules/immer": {
|
||||
"version": "10.1.1",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
|
||||
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.23.0",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
|
||||
@ -3254,6 +3322,16 @@
|
||||
"@sinonjs/commons": "^1.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@standard-schema/spec": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
|
||||
"integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA=="
|
||||
},
|
||||
"node_modules/@standard-schema/utils": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
|
||||
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="
|
||||
},
|
||||
"node_modules/@surma/rollup-plugin-off-main-thread": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",
|
||||
@ -3814,6 +3892,60 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-array": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
|
||||
"integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
|
||||
},
|
||||
"node_modules/@types/d3-color": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
|
||||
"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
|
||||
},
|
||||
"node_modules/@types/d3-ease": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
|
||||
"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
|
||||
},
|
||||
"node_modules/@types/d3-interpolate": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
|
||||
"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
|
||||
"dependencies": {
|
||||
"@types/d3-color": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-path": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
|
||||
"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="
|
||||
},
|
||||
"node_modules/@types/d3-scale": {
|
||||
"version": "4.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
|
||||
"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
|
||||
"dependencies": {
|
||||
"@types/d3-time": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-shape": {
|
||||
"version": "3.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
|
||||
"integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
|
||||
"dependencies": {
|
||||
"@types/d3-path": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-time": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
|
||||
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="
|
||||
},
|
||||
"node_modules/@types/d3-timer": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
|
||||
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
|
||||
},
|
||||
"node_modules/@types/eslint": {
|
||||
"version": "8.56.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
|
||||
@ -4082,6 +4214,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
|
||||
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
|
||||
"integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.18.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
|
||||
@ -4752,6 +4889,25 @@
|
||||
"react-dom": ">=16.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/antd/node_modules/@ant-design/icons": {
|
||||
"version": "5.6.1",
|
||||
"resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.6.1.tgz",
|
||||
"integrity": "sha512-0/xS39c91WjPAZOWsvi1//zjx6kAp4kxWwctR6kuU6p133w8RU0D2dSCvZC19uQyharg/sAvYxGYWl01BbZZfg==",
|
||||
"dependencies": {
|
||||
"@ant-design/colors": "^7.0.0",
|
||||
"@ant-design/icons-svg": "^4.4.0",
|
||||
"@babel/runtime": "^7.24.8",
|
||||
"classnames": "^2.2.6",
|
||||
"rc-util": "^5.31.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.0.0",
|
||||
"react-dom": ">=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/any-promise": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
|
||||
@ -5782,6 +5938,14 @@
|
||||
"wrap-ansi": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/co": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
||||
@ -6468,6 +6632,116 @@
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
|
||||
"dependencies": {
|
||||
"internmap": "1 - 2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
|
||||
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-ease": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
|
||||
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-format": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
|
||||
"integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-path": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
|
||||
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-scale": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"dependencies": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
"d3-interpolate": "1.2.0 - 3",
|
||||
"d3-time": "2.1.1 - 3",
|
||||
"d3-time-format": "2 - 4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-shape": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
|
||||
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
|
||||
"dependencies": {
|
||||
"d3-path": "^3.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
|
||||
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
|
||||
"dependencies": {
|
||||
"d3-array": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time-format": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"dependencies": {
|
||||
"d3-time": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-timer": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
|
||||
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/damerau-levenshtein": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
|
||||
@ -6560,6 +6834,11 @@
|
||||
"resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.5.0.tgz",
|
||||
"integrity": "sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw=="
|
||||
},
|
||||
"node_modules/decimal.js-light": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
|
||||
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
|
||||
},
|
||||
"node_modules/dedent": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
|
||||
@ -7205,6 +7484,11 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/es-toolkit": {
|
||||
"version": "1.39.5",
|
||||
"resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.39.5.tgz",
|
||||
"integrity": "sha512-z9V0qU4lx1TBXDNFWfAASWk6RNU6c6+TJBKE+FLIg8u0XJ6Yw58Hi0yX8ftEouj6p1QARRlXLFfHbIli93BdQQ=="
|
||||
},
|
||||
"node_modules/escalade": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
|
||||
@ -9220,6 +9504,14 @@
|
||||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/ipaddr.js": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
|
||||
@ -14298,6 +14590,28 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "9.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.6",
|
||||
"use-sync-external-store": "^1.4.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^18.2.25 || ^19",
|
||||
"react": "^18.0 || ^19",
|
||||
"redux": "^5.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
@ -14440,6 +14754,46 @@
|
||||
"node": ">=8.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/recharts": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.0.2.tgz",
|
||||
"integrity": "sha512-eDc3ile9qJU9Dp/EekSthQPhAVPG48/uM47jk+PF7VBQngxeW3cwQpPHb/GHC1uqwyCRWXcIrDzuHRVrnRryoQ==",
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "1.x.x || 2.x.x",
|
||||
"clsx": "^2.1.1",
|
||||
"decimal.js-light": "^2.5.1",
|
||||
"es-toolkit": "^1.39.3",
|
||||
"eventemitter3": "^5.0.1",
|
||||
"immer": "^10.1.1",
|
||||
"react-redux": "8.x.x || 9.x.x",
|
||||
"reselect": "5.1.1",
|
||||
"tiny-invariant": "^1.3.3",
|
||||
"use-sync-external-store": "^1.2.2",
|
||||
"victory-vendor": "^37.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/recharts/node_modules/eventemitter3": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
|
||||
"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
|
||||
},
|
||||
"node_modules/recharts/node_modules/immer": {
|
||||
"version": "10.1.1",
|
||||
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
|
||||
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/immer"
|
||||
}
|
||||
},
|
||||
"node_modules/recursive-readdir": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
|
||||
@ -14463,6 +14817,19 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
|
||||
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
|
||||
"peerDependencies": {
|
||||
"redux": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/reflect.getprototypeof": {
|
||||
"version": "1.0.10",
|
||||
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
|
||||
@ -14613,6 +14980,11 @@
|
||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
|
||||
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="
|
||||
},
|
||||
"node_modules/resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
@ -16367,6 +16739,11 @@
|
||||
"resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
|
||||
"integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
|
||||
"integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
|
||||
},
|
||||
"node_modules/tmpl": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
|
||||
@ -16890,6 +17267,14 @@
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
|
||||
"integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util": {
|
||||
"version": "0.12.5",
|
||||
"resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
|
||||
@ -16968,6 +17353,27 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/victory-vendor": {
|
||||
"version": "37.3.6",
|
||||
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
|
||||
"integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
|
||||
"dependencies": {
|
||||
"@types/d3-array": "^3.0.3",
|
||||
"@types/d3-ease": "^3.0.0",
|
||||
"@types/d3-interpolate": "^3.0.1",
|
||||
"@types/d3-scale": "^4.0.2",
|
||||
"@types/d3-shape": "^3.1.0",
|
||||
"@types/d3-time": "^3.0.0",
|
||||
"@types/d3-timer": "^3.0.0",
|
||||
"d3-array": "^3.1.6",
|
||||
"d3-ease": "^3.0.1",
|
||||
"d3-interpolate": "^3.0.1",
|
||||
"d3-scale": "^4.0.2",
|
||||
"d3-shape": "^3.1.0",
|
||||
"d3-time": "^3.0.0",
|
||||
"d3-timer": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/w3c-hr-time": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^6.0.0",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.3.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
@ -18,6 +19,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.4.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"recharts": "^3.0.2",
|
||||
"twilio": "^5.7.1",
|
||||
"twilio-video": "^2.31.0",
|
||||
"typescript": "^4.7.4",
|
||||
|
||||
@ -9,7 +9,10 @@ import {
|
||||
UserOutlined,
|
||||
TeamOutlined,
|
||||
DollarOutlined,
|
||||
SettingOutlined
|
||||
SettingOutlined,
|
||||
WalletOutlined,
|
||||
BarChartOutlined,
|
||||
CalculatorOutlined
|
||||
} from '@ant-design/icons';
|
||||
import zhCN from 'antd/locale/zh_CN';
|
||||
import 'antd/dist/reset.css';
|
||||
@ -28,6 +31,11 @@ import TranslatorList from './pages/Translators/TranslatorList';
|
||||
import PaymentList from './pages/Payments/PaymentList';
|
||||
import SystemSettings from './pages/Settings/SystemSettings';
|
||||
|
||||
// 导入计费管理页面
|
||||
import BillingRules from './pages/Billing/BillingRules';
|
||||
import UserAccounts from './pages/Billing/UserAccounts';
|
||||
import BillingStats from './pages/Billing/BillingStats';
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
const { Title } = Typography;
|
||||
|
||||
@ -58,6 +66,15 @@ const AppContent: React.FC = () => {
|
||||
case 'payments':
|
||||
navigate('/payments');
|
||||
break;
|
||||
case 'billing-rules':
|
||||
navigate('/billing/rules');
|
||||
break;
|
||||
case 'user-accounts':
|
||||
navigate('/billing/accounts');
|
||||
break;
|
||||
case 'billing-stats':
|
||||
navigate('/billing/stats');
|
||||
break;
|
||||
case 'settings':
|
||||
navigate('/settings');
|
||||
break;
|
||||
@ -97,6 +114,28 @@ const AppContent: React.FC = () => {
|
||||
icon: <TeamOutlined />,
|
||||
label: '译员管理',
|
||||
},
|
||||
{
|
||||
key: 'billing',
|
||||
icon: <CalculatorOutlined />,
|
||||
label: '计费管理',
|
||||
children: [
|
||||
{
|
||||
key: 'billing-rules',
|
||||
icon: <CalculatorOutlined />,
|
||||
label: '计费规则',
|
||||
},
|
||||
{
|
||||
key: 'user-accounts',
|
||||
icon: <WalletOutlined />,
|
||||
label: '用户账户',
|
||||
},
|
||||
{
|
||||
key: 'billing-stats',
|
||||
icon: <BarChartOutlined />,
|
||||
label: '计费统计',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'payments',
|
||||
icon: <DollarOutlined />,
|
||||
@ -156,20 +195,28 @@ const AppContent: React.FC = () => {
|
||||
background: '#f0f2f5',
|
||||
minHeight: 'calc(100vh - 64px)'
|
||||
}}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/calls" element={<CallList />} />
|
||||
<Route path="/calls/:id" element={<CallDetail />} />
|
||||
<Route path="/documents" element={<DocumentList />} />
|
||||
<Route path="/documents/:id" element={<DocumentDetail />} />
|
||||
<Route path="/appointments" element={<AppointmentList />} />
|
||||
<Route path="/appointments/:id" element={<AppointmentDetail />} />
|
||||
<Route path="/users" element={<UserList />} />
|
||||
<Route path="/translators" element={<TranslatorList />} />
|
||||
<Route path="/payments" element={<PaymentList />} />
|
||||
<Route path="/settings" element={<SystemSettings />} />
|
||||
<Route path="*" element={<Dashboard />} />
|
||||
</Routes>
|
||||
<div style={{ padding: '24px' }}>
|
||||
<Routes>
|
||||
<Route path="/" element={<Dashboard />} />
|
||||
<Route path="/calls" element={<CallList />} />
|
||||
<Route path="/calls/:id" element={<CallDetail />} />
|
||||
<Route path="/documents" element={<DocumentList />} />
|
||||
<Route path="/documents/:id" element={<DocumentDetail />} />
|
||||
<Route path="/appointments" element={<AppointmentList />} />
|
||||
<Route path="/appointments/:id" element={<AppointmentDetail />} />
|
||||
<Route path="/users" element={<UserList />} />
|
||||
<Route path="/translators" element={<TranslatorList />} />
|
||||
<Route path="/payments" element={<PaymentList />} />
|
||||
|
||||
{/* 计费管理路由 */}
|
||||
<Route path="/billing/rules" element={<BillingRules />} />
|
||||
<Route path="/billing/accounts" element={<UserAccounts />} />
|
||||
<Route path="/billing/stats" element={<BillingStats />} />
|
||||
|
||||
<Route path="/settings" element={<SystemSettings />} />
|
||||
<Route path="*" element={<Dashboard />} />
|
||||
</Routes>
|
||||
</div>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
||||
338
Twilioapp-admin/src/pages/Billing/BillingRules.tsx
Normal file
338
Twilioapp-admin/src/pages/Billing/BillingRules.tsx
Normal file
@ -0,0 +1,338 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Table,
|
||||
Button,
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
Select,
|
||||
Switch,
|
||||
InputNumber,
|
||||
Space,
|
||||
Popconfirm,
|
||||
message,
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
Statistic,
|
||||
} from 'antd';
|
||||
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
import { BillingRule, CallType, TranslationType, UserType } from '../../types/billing';
|
||||
import billingService from '../../services/billingService';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
const BillingRules: React.FC = () => {
|
||||
const [rules, setRules] = useState<BillingRule[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [editingRule, setEditingRule] = useState<BillingRule | null>(null);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
fetchRules();
|
||||
}, []);
|
||||
|
||||
const fetchRules = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const rulesData = await billingService.getBillingRules();
|
||||
setRules(rulesData);
|
||||
} catch (error) {
|
||||
message.error('获取计费规则失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
setEditingRule(null);
|
||||
form.resetFields();
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const handleEdit = (rule: BillingRule) => {
|
||||
setEditingRule(rule);
|
||||
form.setFieldsValue(rule);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
try {
|
||||
await billingService.deleteBillingRule(id);
|
||||
message.success('删除成功');
|
||||
fetchRules();
|
||||
} catch (error) {
|
||||
message.error('删除失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (values: any) => {
|
||||
try {
|
||||
if (editingRule) {
|
||||
await billingService.updateBillingRule(editingRule.id, values);
|
||||
message.success('更新成功');
|
||||
} else {
|
||||
await billingService.createBillingRule(values);
|
||||
message.success('创建成功');
|
||||
}
|
||||
setModalVisible(false);
|
||||
fetchRules();
|
||||
} catch (error) {
|
||||
message.error(editingRule ? '更新失败' : '创建失败');
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '规则名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '通话类型',
|
||||
dataIndex: 'callType',
|
||||
key: 'callType',
|
||||
render: (type: CallType) => {
|
||||
const typeMap = {
|
||||
[CallType.VOICE]: '语音通话',
|
||||
[CallType.VIDEO]: '视频通话',
|
||||
};
|
||||
return typeMap[type];
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '翻译类型',
|
||||
dataIndex: 'translationType',
|
||||
key: 'translationType',
|
||||
render: (type: TranslationType) => {
|
||||
const typeMap = {
|
||||
[TranslationType.TEXT]: '文字翻译',
|
||||
[TranslationType.SIGN_LANGUAGE]: '手语翻译',
|
||||
[TranslationType.HUMAN_INTERPRETER]: '真人翻译',
|
||||
};
|
||||
return typeMap[type];
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '用户类型',
|
||||
dataIndex: 'userType',
|
||||
key: 'userType',
|
||||
render: (type: UserType) => {
|
||||
const typeMap = {
|
||||
[UserType.INDIVIDUAL]: '普通用户',
|
||||
[UserType.ENTERPRISE]: '企业用户',
|
||||
};
|
||||
return typeMap[type];
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '每分钟价格',
|
||||
dataIndex: 'pricePerMinute',
|
||||
key: 'pricePerMinute',
|
||||
render: (price: number) => `¥${(price / 100).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '最低收费',
|
||||
dataIndex: 'minimumCharge',
|
||||
key: 'minimumCharge',
|
||||
render: (charge: number) => `¥${(charge / 100).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'isActive',
|
||||
key: 'isActive',
|
||||
render: (isActive: boolean) => (
|
||||
<span style={{ color: isActive ? '#52c41a' : '#ff4d4f' }}>
|
||||
{isActive ? '启用' : '禁用'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_: any, record: BillingRule) => (
|
||||
<Space size="middle">
|
||||
<Button
|
||||
type="link"
|
||||
icon={<EditOutlined />}
|
||||
onClick={() => handleEdit(record)}
|
||||
>
|
||||
编辑
|
||||
</Button>
|
||||
<Popconfirm
|
||||
title="确定要删除这个计费规则吗？"
|
||||
onConfirm={() => handleDelete(record.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<Button type="link" danger icon={<DeleteOutlined />}>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const activeRules = rules.filter(rule => rule.isActive);
|
||||
const inactiveRules = rules.filter(rule => !rule.isActive);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||||
<Col span={8}>
|
||||
<Card>
|
||||
<Statistic title="总计费规则" value={rules.length} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card>
|
||||
<Statistic title="启用规则" value={activeRules.length} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card>
|
||||
<Statistic title="禁用规则" value={inactiveRules.length} />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Card
|
||||
title="计费规则管理"
|
||||
extra={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
|
||||
新增规则
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={rules}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`,
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={editingRule ? '编辑计费规则' : '新增计费规则'}
|
||||
open={modalVisible}
|
||||
onCancel={() => setModalVisible(false)}
|
||||
footer={null}
|
||||
width={600}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
<Form.Item
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称' }]}
|
||||
>
|
||||
<Input placeholder="请输入规则名称" />
|
||||
</Form.Item>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="callType"
|
||||
label="通话类型"
|
||||
rules={[{ required: true, message: '请选择通话类型' }]}
|
||||
>
|
||||
<Select placeholder="请选择通话类型">
|
||||
<Option value={CallType.VOICE}>语音通话</Option>
|
||||
<Option value={CallType.VIDEO}>视频通话</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="translationType"
|
||||
label="翻译类型"
|
||||
rules={[{ required: true, message: '请选择翻译类型' }]}
|
||||
>
|
||||
<Select placeholder="请选择翻译类型">
|
||||
<Option value={TranslationType.TEXT}>文字翻译</Option>
|
||||
<Option value={TranslationType.SIGN_LANGUAGE}>手语翻译</Option>
|
||||
<Option value={TranslationType.HUMAN_INTERPRETER}>真人翻译</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item
|
||||
name="userType"
|
||||
label="用户类型"
|
||||
rules={[{ required: true, message: '请选择用户类型' }]}
|
||||
>
|
||||
<Select placeholder="请选择用户类型">
|
||||
<Option value={UserType.INDIVIDUAL}>普通用户</Option>
|
||||
<Option value={UserType.ENTERPRISE}>企业用户</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="pricePerMinute"
|
||||
label="每分钟价格（分）"
|
||||
rules={[{ required: true, message: '请输入每分钟价格' }]}
|
||||
>
|
||||
<InputNumber
|
||||
min={1}
|
||||
placeholder="请输入价格（分）"
|
||||
style={{ width: '100%' }}
|
||||
addonAfter="分"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="minimumCharge"
|
||||
label="最低收费（分）"
|
||||
rules={[{ required: true, message: '请输入最低收费' }]}
|
||||
>
|
||||
<InputNumber
|
||||
min={1}
|
||||
placeholder="请输入最低收费（分）"
|
||||
style={{ width: '100%' }}
|
||||
addonAfter="分"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Form.Item
|
||||
name="isActive"
|
||||
label="状态"
|
||||
valuePropName="checked"
|
||||
initialValue={true}
|
||||
>
|
||||
<Switch checkedChildren="启用" unCheckedChildren="禁用" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">
|
||||
{editingRule ? '更新' : '创建'}
|
||||
</Button>
|
||||
<Button onClick={() => setModalVisible(false)}>
|
||||
取消
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BillingRules;
|
||||
293
Twilioapp-admin/src/pages/Billing/BillingStats.tsx
Normal file
293
Twilioapp-admin/src/pages/Billing/BillingStats.tsx
Normal file
@ -0,0 +1,293 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
Statistic,
|
||||
Table,
|
||||
DatePicker,
|
||||
Select,
|
||||
Space,
|
||||
Button,
|
||||
} from 'antd';
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
AreaChart,
|
||||
Area,
|
||||
BarChart,
|
||||
Bar,
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
} from 'recharts';
|
||||
import { BillingStats as BillingStatsType } from '../../types/billing';
|
||||
import billingService from '../../services/billingService';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const { Option } = Select;
|
||||
|
||||
const BillingStats: React.FC = () => {
|
||||
const [stats, setStats] = useState<BillingStatsType | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [dateRange, setDateRange] = useState<[any, any] | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, [dateRange]);
|
||||
|
||||
const fetchStats = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const startDate = dateRange?.[0]?.toDate();
|
||||
const endDate = dateRange?.[1]?.toDate();
|
||||
const statsData = await billingService.getBillingStats(startDate, endDate);
|
||||
setStats(statsData);
|
||||
} catch (error) {
|
||||
console.error('获取统计数据失败:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!stats) {
|
||||
return <div>加载中...</div>;
|
||||
}
|
||||
|
||||
// 饼图颜色配置
|
||||
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8'];
|
||||
|
||||
// 服务统计表格列
|
||||
const serviceColumns = [
|
||||
{
|
||||
title: '服务类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
},
|
||||
{
|
||||
title: '使用次数',
|
||||
dataIndex: 'count',
|
||||
key: 'count',
|
||||
},
|
||||
{
|
||||
title: '收入金额',
|
||||
dataIndex: 'revenue',
|
||||
key: 'revenue',
|
||||
render: (revenue: number) => `¥${(revenue / 100).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '平均单价',
|
||||
key: 'avgPrice',
|
||||
render: (_: any, record: any) =>
|
||||
`¥${((record.revenue / record.count) / 100).toFixed(2)}`,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 筛选条件 */}
|
||||
<Card style={{ marginBottom: 16 }}>
|
||||
<Space>
|
||||
<span>时间范围：</span>
|
||||
<RangePicker
|
||||
value={dateRange}
|
||||
onChange={setDateRange}
|
||||
placeholder={['开始日期', '结束日期']}
|
||||
/>
|
||||
<Button type="primary" onClick={fetchStats} loading={loading}>
|
||||
查询
|
||||
</Button>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
{/* 核心指标 */}
|
||||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="总收入"
|
||||
value={stats.totalRevenue / 100}
|
||||
precision={2}
|
||||
prefix="¥"
|
||||
valueStyle={{ color: '#3f8600' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="总用户数"
|
||||
value={stats.totalUsers}
|
||||
valueStyle={{ color: '#1890ff' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="活跃用户数"
|
||||
value={stats.activeUsers}
|
||||
valueStyle={{ color: '#722ed1' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="用户活跃率"
|
||||
value={(stats.activeUsers / stats.totalUsers * 100)}
|
||||
precision={1}
|
||||
suffix="%"
|
||||
valueStyle={{ color: '#13c2c2' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="总通话数"
|
||||
value={stats.totalCalls}
|
||||
valueStyle={{ color: '#52c41a' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="总预约数"
|
||||
value={stats.totalAppointments}
|
||||
valueStyle={{ color: '#fa8c16' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="平均通话时长"
|
||||
value={stats.averageCallDuration}
|
||||
suffix="分钟"
|
||||
valueStyle={{ color: '#eb2f96' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={6}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="平均通话费用"
|
||||
value={stats.averageCallCost / 100}
|
||||
precision={2}
|
||||
prefix="¥"
|
||||
valueStyle={{ color: '#f5222d' }}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 图表区域 */}
|
||||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||||
{/* 收入趋势图 */}
|
||||
<Col span={16}>
|
||||
<Card title="收入趋势">
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={stats.revenueByDate}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="date" />
|
||||
<YAxis tickFormatter={(value) => `¥${(value / 100).toFixed(0)}`} />
|
||||
<Tooltip
|
||||
formatter={(value: any) => [`¥${(value / 100).toFixed(2)}`, '收入']}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="revenue"
|
||||
stroke="#1890ff"
|
||||
fill="#1890ff"
|
||||
fillOpacity={0.3}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 服务类型分布 */}
|
||||
<Col span={8}>
|
||||
<Card title="服务类型分布">
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={stats.topServices}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
labelLine={false}
|
||||
label={({ type, percent }) => `${type} ${(percent * 100).toFixed(0)}%`}
|
||||
outerRadius={80}
|
||||
fill="#8884d8"
|
||||
dataKey="count"
|
||||
>
|
||||
{stats.topServices.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={16}>
|
||||
{/* 服务收入对比 */}
|
||||
<Col span={12}>
|
||||
<Card title="服务收入对比">
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={stats.topServices}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="type" />
|
||||
<YAxis tickFormatter={(value) => `¥${(value / 100).toFixed(0)}`} />
|
||||
<Tooltip
|
||||
formatter={(value: any) => [`¥${(value / 100).toFixed(2)}`, '收入']}
|
||||
/>
|
||||
<Bar dataKey="revenue" fill="#52c41a" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 服务使用次数对比 */}
|
||||
<Col span={12}>
|
||||
<Card title="服务使用次数对比">
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={stats.topServices}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="type" />
|
||||
<YAxis />
|
||||
<Tooltip formatter={(value: any) => [value, '次数']} />
|
||||
<Bar dataKey="count" fill="#1890ff" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/* 详细数据表格 */}
|
||||
<Card title="服务详细统计" style={{ marginTop: 16 }}>
|
||||
<Table
|
||||
columns={serviceColumns}
|
||||
dataSource={stats.topServices}
|
||||
rowKey="type"
|
||||
pagination={false}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BillingStats;
|
||||
318
Twilioapp-admin/src/pages/Billing/UserAccounts.tsx
Normal file
318
Twilioapp-admin/src/pages/Billing/UserAccounts.tsx
Normal file
@ -0,0 +1,318 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Table,
|
||||
Button,
|
||||
Modal,
|
||||
Form,
|
||||
Input,
|
||||
InputNumber,
|
||||
Space,
|
||||
message,
|
||||
Card,
|
||||
Row,
|
||||
Col,
|
||||
Statistic,
|
||||
Tag,
|
||||
Tabs,
|
||||
} from 'antd';
|
||||
import { WalletOutlined, PlusOutlined, MinusOutlined, StopOutlined } from '@ant-design/icons';
|
||||
import { UserAccount, UserType, RechargeRecord, ConsumptionRecord } from '../../types/billing';
|
||||
import billingService from '../../services/billingService';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const UserAccounts: React.FC = () => {
|
||||
const [accounts, setAccounts] = useState<UserAccount[]>([]);
|
||||
const [rechargeRecords, setRechargeRecords] = useState<RechargeRecord[]>([]);
|
||||
const [consumptionRecords, setConsumptionRecords] = useState<ConsumptionRecord[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [modalType, setModalType] = useState<'recharge' | 'deduct' | 'freeze' | 'unfreeze'>('recharge');
|
||||
const [selectedAccount, setSelectedAccount] = useState<UserAccount | null>(null);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
fetchAccounts();
|
||||
fetchRechargeRecords();
|
||||
fetchConsumptionRecords();
|
||||
}, []);
|
||||
|
||||
const fetchAccounts = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const { accounts: accountsData } = await billingService.getUserAccounts();
|
||||
setAccounts(accountsData);
|
||||
} catch (error) {
|
||||
message.error('获取用户账户失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchRechargeRecords = async () => {
|
||||
try {
|
||||
const { records } = await billingService.getRechargeRecords();
|
||||
setRechargeRecords(records);
|
||||
} catch (error) {
|
||||
message.error('获取充值记录失败');
|
||||
}
|
||||
};
|
||||
|
||||
const fetchConsumptionRecords = async () => {
|
||||
try {
|
||||
const { records } = await billingService.getConsumptionRecords();
|
||||
setConsumptionRecords(records);
|
||||
} catch (error) {
|
||||
message.error('获取消费记录失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleBalanceOperation = (account: UserAccount, type: 'recharge' | 'deduct' | 'freeze' | 'unfreeze') => {
|
||||
setSelectedAccount(account);
|
||||
setModalType(type);
|
||||
form.resetFields();
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
const handleSubmit = async (values: any) => {
|
||||
if (!selectedAccount) return;
|
||||
|
||||
try {
|
||||
const { amount, reason } = values;
|
||||
|
||||
switch (modalType) {
|
||||
case 'recharge':
|
||||
await billingService.updateUserBalance(selectedAccount.userId, amount, reason || '管理员充值');
|
||||
message.success('充值成功');
|
||||
break;
|
||||
case 'deduct':
|
||||
await billingService.updateUserBalance(selectedAccount.userId, -amount, reason || '管理员扣费');
|
||||
message.success('扣费成功');
|
||||
break;
|
||||
case 'freeze':
|
||||
await billingService.freezeUserBalance(selectedAccount.userId, amount);
|
||||
message.success('冻结成功');
|
||||
break;
|
||||
case 'unfreeze':
|
||||
await billingService.unfreezeUserBalance(selectedAccount.userId, amount);
|
||||
message.success('解冻成功');
|
||||
break;
|
||||
}
|
||||
|
||||
setModalVisible(false);
|
||||
fetchAccounts();
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '操作失败');
|
||||
}
|
||||
};
|
||||
|
||||
const accountColumns = [
|
||||
{
|
||||
title: '用户ID',
|
||||
dataIndex: 'userId',
|
||||
key: 'userId',
|
||||
},
|
||||
{
|
||||
title: '用户类型',
|
||||
dataIndex: 'userType',
|
||||
key: 'userType',
|
||||
render: (type: UserType) => {
|
||||
const typeMap = {
|
||||
[UserType.INDIVIDUAL]: { text: '普通用户', color: 'blue' },
|
||||
[UserType.ENTERPRISE]: { text: '企业用户', color: 'gold' },
|
||||
};
|
||||
const config = typeMap[type];
|
||||
return <Tag color={config.color}>{config.text}</Tag>;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '账户余额',
|
||||
dataIndex: 'balance',
|
||||
key: 'balance',
|
||||
render: (balance: number) => (
|
||||
<span style={{ color: balance > 0 ? '#52c41a' : '#ff4d4f' }}>
|
||||
¥{(balance / 100).toFixed(2)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '冻结余额',
|
||||
dataIndex: 'frozenBalance',
|
||||
key: 'frozenBalance',
|
||||
render: (balance: number) => `¥${(balance / 100).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '累计充值',
|
||||
dataIndex: 'totalRecharge',
|
||||
key: 'totalRecharge',
|
||||
render: (amount: number) => `¥${(amount / 100).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '累计消费',
|
||||
dataIndex: 'totalConsumption',
|
||||
key: 'totalConsumption',
|
||||
render: (amount: number) => `¥${(amount / 100).toFixed(2)}`,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_: any, record: UserAccount) => (
|
||||
<Space size="small">
|
||||
<Button
|
||||
type="link"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => handleBalanceOperation(record, 'recharge')}
|
||||
>
|
||||
充值
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
danger
|
||||
icon={<MinusOutlined />}
|
||||
onClick={() => handleBalanceOperation(record, 'deduct')}
|
||||
>
|
||||
扣费
|
||||
</Button>
|
||||
<Button
|
||||
type="link"
|
||||
icon={<StopOutlined />}
|
||||
onClick={() => handleBalanceOperation(record, 'freeze')}
|
||||
>
|
||||
冻结
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const totalBalance = accounts.reduce((sum, account) => sum + account.balance, 0);
|
||||
const totalFrozenBalance = accounts.reduce((sum, account) => sum + account.frozenBalance, 0);
|
||||
|
||||
const getModalTitle = () => {
|
||||
const titles = {
|
||||
recharge: '用户充值',
|
||||
deduct: '用户扣费',
|
||||
freeze: '冻结余额',
|
||||
unfreeze: '解冻余额',
|
||||
};
|
||||
return titles[modalType];
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Row gutter={16} style={{ marginBottom: 16 }}>
|
||||
<Col span={8}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="总账户余额"
|
||||
value={totalBalance / 100}
|
||||
precision={2}
|
||||
prefix="¥"
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="总冻结余额"
|
||||
value={totalFrozenBalance / 100}
|
||||
precision={2}
|
||||
prefix="¥"
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title="用户数量"
|
||||
value={accounts.length}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Card>
|
||||
<Tabs defaultActiveKey="accounts">
|
||||
<TabPane tab="用户账户" key="accounts">
|
||||
<Table
|
||||
columns={accountColumns}
|
||||
dataSource={accounts}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{
|
||||
pageSize: 10,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total) => `共 ${total} 条记录`,
|
||||
}}
|
||||
/>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</Card>
|
||||
|
||||
<Modal
|
||||
title={getModalTitle()}
|
||||
open={modalVisible}
|
||||
onCancel={() => setModalVisible(false)}
|
||||
footer={null}
|
||||
width={500}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
layout="vertical"
|
||||
onFinish={handleSubmit}
|
||||
>
|
||||
<Form.Item label="用户ID">
|
||||
<Input value={selectedAccount?.userId} disabled />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="当前余额">
|
||||
<Input
|
||||
value={`¥${((selectedAccount?.balance || 0) / 100).toFixed(2)}`}
|
||||
disabled
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
name="amount"
|
||||
label="金额（分）"
|
||||
rules={[{ required: true, message: '请输入金额' }]}
|
||||
>
|
||||
<InputNumber
|
||||
min={1}
|
||||
placeholder="请输入金额（分）"
|
||||
style={{ width: '100%' }}
|
||||
addonAfter="分"
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
{(modalType === 'recharge' || modalType === 'deduct') && (
|
||||
<Form.Item
|
||||
name="reason"
|
||||
label="操作原因"
|
||||
rules={[{ required: true, message: '请输入操作原因' }]}
|
||||
>
|
||||
<Input.TextArea
|
||||
placeholder="请输入操作原因"
|
||||
rows={3}
|
||||
/>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit">
|
||||
确认{getModalTitle()}
|
||||
</Button>
|
||||
<Button onClick={() => setModalVisible(false)}>
|
||||
取消
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserAccounts;
|
||||
3
Twilioapp-admin/src/pages/Billing/index.ts
Normal file
3
Twilioapp-admin/src/pages/Billing/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export { default as BillingRules } from './BillingRules';
|
||||
export { default as UserAccounts } from './UserAccounts';
|
||||
export { default as BillingStats } from './BillingStats';
|
||||
440
Twilioapp-admin/src/services/billingService.ts
Normal file
440
Twilioapp-admin/src/services/billingService.ts
Normal file
@ -0,0 +1,440 @@
|
||||
import {
|
||||
BillingRule,
|
||||
UserAccount,
|
||||
CallRecord,
|
||||
RechargeRecord,
|
||||
ConsumptionRecord,
|
||||
BillingStats,
|
||||
CallType,
|
||||
TranslationType,
|
||||
UserType,
|
||||
BILLING_CONFIG,
|
||||
} from '../types/billing';
|
||||
|
||||
class BillingService {
|
||||
private static instance: BillingService;
|
||||
|
||||
public static getInstance(): BillingService {
|
||||
if (!BillingService.instance) {
|
||||
BillingService.instance = new BillingService();
|
||||
}
|
||||
return BillingService.instance;
|
||||
}
|
||||
|
||||
// 计费规则管理
|
||||
async getBillingRules(): Promise<BillingRule[]> {
|
||||
// TODO: 替换为实际API调用
|
||||
return [
|
||||
{
|
||||
id: '1',
|
||||
name: '语音文字翻译',
|
||||
callType: CallType.VOICE,
|
||||
translationType: TranslationType.TEXT,
|
||||
pricePerMinute: 50,
|
||||
minimumCharge: 50,
|
||||
userType: UserType.INDIVIDUAL,
|
||||
isActive: true,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '视频手语翻译',
|
||||
callType: CallType.VIDEO,
|
||||
translationType: TranslationType.SIGN_LANGUAGE,
|
||||
pricePerMinute: 100,
|
||||
minimumCharge: 100,
|
||||
userType: UserType.INDIVIDUAL,
|
||||
isActive: true,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '视频真人翻译',
|
||||
callType: CallType.VIDEO,
|
||||
translationType: TranslationType.HUMAN_INTERPRETER,
|
||||
pricePerMinute: 200,
|
||||
minimumCharge: 200,
|
||||
userType: UserType.INDIVIDUAL,
|
||||
isActive: true,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
async createBillingRule(rule: Omit<BillingRule, 'id' | 'createdAt' | 'updatedAt'>): Promise<BillingRule> {
|
||||
// TODO: 替换为实际API调用
|
||||
const newRule: BillingRule = {
|
||||
...rule,
|
||||
id: Date.now().toString(),
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
};
|
||||
return newRule;
|
||||
}
|
||||
|
||||
async updateBillingRule(id: string, updates: Partial<BillingRule>): Promise<BillingRule> {
|
||||
// TODO: 替换为实际API调用
|
||||
const existingRule = await this.getBillingRuleById(id);
|
||||
return {
|
||||
...existingRule,
|
||||
...updates,
|
||||
updatedAt: new Date(),
|
||||
};
|
||||
}
|
||||
|
||||
async deleteBillingRule(id: string): Promise<void> {
|
||||
// TODO: 替换为实际API调用
|
||||
console.log('删除计费规则:', id);
|
||||
}
|
||||
|
||||
async getBillingRuleById(id: string): Promise<BillingRule> {
|
||||
// TODO: 替换为实际API调用
|
||||
const rules = await this.getBillingRules();
|
||||
const rule = rules.find(r => r.id === id);
|
||||
if (!rule) {
|
||||
throw new Error('计费规则未找到');
|
||||
}
|
||||
return rule;
|
||||
}
|
||||
|
||||
// 用户账户管理
|
||||
async getUserAccounts(page: number = 1, pageSize: number = 10): Promise<{
|
||||
accounts: UserAccount[];
|
||||
total: number;
|
||||
}> {
|
||||
// TODO: 替换为实际API调用
|
||||
const mockAccounts: UserAccount[] = [
|
||||
{
|
||||
id: '1',
|
||||
userId: 'user1',
|
||||
userType: UserType.INDIVIDUAL,
|
||||
balance: 5000,
|
||||
frozenBalance: 0,
|
||||
totalRecharge: 10000,
|
||||
totalConsumption: 5000,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
userId: 'user2',
|
||||
userType: UserType.ENTERPRISE,
|
||||
balance: 50000,
|
||||
frozenBalance: 5000,
|
||||
creditLimit: 100000,
|
||||
totalRecharge: 100000,
|
||||
totalConsumption: 50000,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
accounts: mockAccounts,
|
||||
total: mockAccounts.length,
|
||||
};
|
||||
}
|
||||
|
||||
async getUserAccountById(userId: string): Promise<UserAccount> {
|
||||
// TODO: 替换为实际API调用
|
||||
const { accounts } = await this.getUserAccounts();
|
||||
const account = accounts.find(a => a.userId === userId);
|
||||
if (!account) {
|
||||
throw new Error('用户账户未找到');
|
||||
}
|
||||
return account;
|
||||
}
|
||||
|
||||
async updateUserBalance(userId: string, amount: number, reason: string): Promise<UserAccount> {
|
||||
// TODO: 替换为实际API调用
|
||||
const account = await this.getUserAccountById(userId);
|
||||
account.balance += amount;
|
||||
account.updatedAt = new Date();
|
||||
|
||||
// 记录消费记录
|
||||
if (amount !== 0) {
|
||||
await this.createConsumptionRecord({
|
||||
userId,
|
||||
relatedType: 'call',
|
||||
relatedId: 'admin-adjustment',
|
||||
amount: Math.abs(amount),
|
||||
balanceBefore: account.balance - amount,
|
||||
balanceAfter: account.balance,
|
||||
description: reason,
|
||||
});
|
||||
}
|
||||
|
||||
return account;
|
||||
}
|
||||
|
||||
async freezeUserBalance(userId: string, amount: number): Promise<UserAccount> {
|
||||
// TODO: 替换为实际API调用
|
||||
const account = await this.getUserAccountById(userId);
|
||||
if (account.balance < amount) {
|
||||
throw new Error('余额不足');
|
||||
}
|
||||
account.balance -= amount;
|
||||
account.frozenBalance += amount;
|
||||
account.updatedAt = new Date();
|
||||
return account;
|
||||
}
|
||||
|
||||
async unfreezeUserBalance(userId: string, amount: number): Promise<UserAccount> {
|
||||
// TODO: 替换为实际API调用
|
||||
const account = await this.getUserAccountById(userId);
|
||||
if (account.frozenBalance < amount) {
|
||||
throw new Error('冻结余额不足');
|
||||
}
|
||||
account.frozenBalance -= amount;
|
||||
account.balance += amount;
|
||||
account.updatedAt = new Date();
|
||||
return account;
|
||||
}
|
||||
|
||||
// 通话记录管理
|
||||
async getCallRecords(
|
||||
page: number = 1,
|
||||
pageSize: number = 10,
|
||||
filters?: {
|
||||
userId?: string;
|
||||
status?: string;
|
||||
startDate?: Date;
|
||||
endDate?: Date;
|
||||
}
|
||||
): Promise<{
|
||||
records: CallRecord[];
|
||||
total: number;
|
||||
}> {
|
||||
// TODO: 替换为实际API调用
|
||||
const mockRecords: CallRecord[] = [
|
||||
{
|
||||
id: '1',
|
||||
userId: 'user1',
|
||||
callType: CallType.VOICE,
|
||||
translationType: TranslationType.TEXT,
|
||||
startTime: new Date(Date.now() - 3600000),
|
||||
endTime: new Date(),
|
||||
duration: 60,
|
||||
cost: 3000,
|
||||
status: 'completed',
|
||||
billingDetails: {
|
||||
baseRate: 50,
|
||||
totalMinutes: 60,
|
||||
totalCost: 3000,
|
||||
},
|
||||
createdAt: new Date(),
|
||||
qualityScore: 4.5,
|
||||
userRating: 5,
|
||||
userFeedback: '翻译质量很好',
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
records: mockRecords,
|
||||
total: mockRecords.length,
|
||||
};
|
||||
}
|
||||
|
||||
async getCallRecordById(id: string): Promise<CallRecord> {
|
||||
// TODO: 替换为实际API调用
|
||||
const { records } = await this.getCallRecords();
|
||||
const record = records.find(r => r.id === id);
|
||||
if (!record) {
|
||||
throw new Error('通话记录未找到');
|
||||
}
|
||||
return record;
|
||||
}
|
||||
|
||||
// 充值记录管理
|
||||
async getRechargeRecords(
|
||||
page: number = 1,
|
||||
pageSize: number = 10,
|
||||
filters?: {
|
||||
userId?: string;
|
||||
status?: string;
|
||||
startDate?: Date;
|
||||
endDate?: Date;
|
||||
}
|
||||
): Promise<{
|
||||
records: RechargeRecord[];
|
||||
total: number;
|
||||
}> {
|
||||
// TODO: 替换为实际API调用
|
||||
const mockRecords: RechargeRecord[] = [
|
||||
{
|
||||
id: '1',
|
||||
userId: 'user1',
|
||||
amount: 10000,
|
||||
bonus: 500,
|
||||
paymentMethod: 'wechat',
|
||||
status: 'completed',
|
||||
transactionId: 'tx_123456',
|
||||
createdAt: new Date(),
|
||||
completedAt: new Date(),
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
records: mockRecords,
|
||||
total: mockRecords.length,
|
||||
};
|
||||
}
|
||||
|
||||
async processRecharge(
|
||||
userId: string,
|
||||
amount: number,
|
||||
paymentMethod: string,
|
||||
transactionId: string
|
||||
): Promise<RechargeRecord> {
|
||||
// TODO: 替换为实际API调用
|
||||
const bonus = this.calculateRechargeBonus(amount);
|
||||
|
||||
const record: RechargeRecord = {
|
||||
id: Date.now().toString(),
|
||||
userId,
|
||||
amount,
|
||||
bonus,
|
||||
paymentMethod,
|
||||
status: 'completed',
|
||||
transactionId,
|
||||
createdAt: new Date(),
|
||||
completedAt: new Date(),
|
||||
};
|
||||
|
||||
// 更新用户余额
|
||||
await this.updateUserBalance(userId, amount + bonus, `充值 ${amount/100}元，赠送 ${bonus/100}元`);
|
||||
|
||||
return record;
|
||||
}
|
||||
|
||||
// 消费记录管理
|
||||
async getConsumptionRecords(
|
||||
page: number = 1,
|
||||
pageSize: number = 10,
|
||||
filters?: {
|
||||
userId?: string;
|
||||
relatedType?: string;
|
||||
startDate?: Date;
|
||||
endDate?: Date;
|
||||
}
|
||||
): Promise<{
|
||||
records: ConsumptionRecord[];
|
||||
total: number;
|
||||
}> {
|
||||
// TODO: 替换为实际API调用
|
||||
const mockRecords: ConsumptionRecord[] = [
|
||||
{
|
||||
id: '1',
|
||||
userId: 'user1',
|
||||
relatedType: 'call',
|
||||
relatedId: 'call_123',
|
||||
amount: 3000,
|
||||
balanceBefore: 8000,
|
||||
balanceAfter: 5000,
|
||||
description: '语音文字翻译通话费用',
|
||||
createdAt: new Date(),
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
records: mockRecords,
|
||||
total: mockRecords.length,
|
||||
};
|
||||
}
|
||||
|
||||
async createConsumptionRecord(
|
||||
record: Omit<ConsumptionRecord, 'id' | 'createdAt'>
|
||||
): Promise<ConsumptionRecord> {
|
||||
// TODO: 替换为实际API调用
|
||||
return {
|
||||
...record,
|
||||
id: Date.now().toString(),
|
||||
createdAt: new Date(),
|
||||
};
|
||||
}
|
||||
|
||||
// 统计数据
|
||||
async getBillingStats(
|
||||
startDate?: Date,
|
||||
endDate?: Date
|
||||
): Promise<BillingStats> {
|
||||
// TODO: 替换为实际API调用
|
||||
return {
|
||||
totalRevenue: 1000000, // 10000元
|
||||
totalUsers: 1500,
|
||||
activeUsers: 800,
|
||||
totalCalls: 5000,
|
||||
totalAppointments: 1200,
|
||||
averageCallDuration: 45,
|
||||
averageCallCost: 2000, // 20元
|
||||
topServices: [
|
||||
{ type: '语音文字翻译', count: 3000, revenue: 600000 },
|
||||
{ type: '视频手语翻译', count: 1500, revenue: 300000 },
|
||||
{ type: '视频真人翻译', count: 500, revenue: 100000 },
|
||||
],
|
||||
revenueByDate: [
|
||||
{ date: '2024-01-01', revenue: 50000 },
|
||||
{ date: '2024-01-02', revenue: 60000 },
|
||||
{ date: '2024-01-03', revenue: 55000 },
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
// 工具方法
|
||||
private calculateRechargeBonus(amount: number): number {
|
||||
for (const rule of BILLING_CONFIG.RECHARGE_BONUS_RULES) {
|
||||
if (amount >= rule.minAmount) {
|
||||
return Math.floor(amount * rule.bonusPercentage / 100);
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
// 计算通话费用
|
||||
calculateCallCost(
|
||||
callType: CallType,
|
||||
translationType: TranslationType,
|
||||
duration: number,
|
||||
userType: UserType = UserType.INDIVIDUAL
|
||||
): number {
|
||||
// TODO: 根据计费规则计算实际费用
|
||||
const baseRate = BILLING_CONFIG.DEFAULT_RATES[callType]?.[translationType] || 100;
|
||||
return Math.max(baseRate, baseRate * Math.ceil(duration));
|
||||
}
|
||||
|
||||
// 检查用户余额是否充足
|
||||
async checkUserBalance(userId: string, requiredAmount: number): Promise<boolean> {
|
||||
const account = await this.getUserAccountById(userId);
|
||||
return account.balance >= requiredAmount;
|
||||
}
|
||||
|
||||
// 扣费
|
||||
async deductBalance(
|
||||
userId: string,
|
||||
amount: number,
|
||||
relatedType: 'call' | 'appointment' | 'document',
|
||||
relatedId: string,
|
||||
description: string
|
||||
): Promise<void> {
|
||||
const account = await this.getUserAccountById(userId);
|
||||
if (account.balance < amount) {
|
||||
throw new Error('余额不足');
|
||||
}
|
||||
|
||||
await this.updateUserBalance(userId, -amount, description);
|
||||
await this.createConsumptionRecord({
|
||||
userId,
|
||||
relatedType,
|
||||
relatedId,
|
||||
amount,
|
||||
balanceBefore: account.balance,
|
||||
balanceAfter: account.balance - amount,
|
||||
description,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default BillingService.getInstance();
|
||||
189
Twilioapp-admin/src/types/billing.ts
Normal file
189
Twilioapp-admin/src/types/billing.ts
Normal file
@ -0,0 +1,189 @@
|
||||
// 用户类型
|
||||
export enum UserType {
|
||||
INDIVIDUAL = 'individual', // 普通用户
|
||||
ENTERPRISE = 'enterprise', // 企业用户
|
||||
}
|
||||
|
||||
// 通话类型
|
||||
export enum CallType {
|
||||
VOICE = 'voice', // 语音通话
|
||||
VIDEO = 'video', // 视频通话
|
||||
}
|
||||
|
||||
// 翻译类型
|
||||
export enum TranslationType {
|
||||
TEXT = 'text', // 文字翻译
|
||||
SIGN_LANGUAGE = 'sign_language', // 手语翻译
|
||||
HUMAN_INTERPRETER = 'human_interpreter', // 真人翻译
|
||||
}
|
||||
|
||||
// 计费规则
|
||||
export interface BillingRule {
|
||||
id: string;
|
||||
name: string;
|
||||
callType: CallType;
|
||||
translationType: TranslationType;
|
||||
pricePerMinute: number; // 每分钟价格（分）
|
||||
minimumCharge: number; // 最低收费（分）
|
||||
userType: UserType;
|
||||
isActive: boolean; // 是否启用
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
||||
// 用户账户信息
|
||||
export interface UserAccount {
|
||||
id: string;
|
||||
userId: string;
|
||||
userType: UserType;
|
||||
balance: number; // 余额（分）
|
||||
frozenBalance: number; // 冻结余额（分）
|
||||
enterpriseContractId?: string; // 企业合同ID
|
||||
creditLimit?: number; // 信用额度（分）
|
||||
totalRecharge: number; // 累计充值（分）
|
||||
totalConsumption: number; // 累计消费（分）
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
||||
// 预约信息
|
||||
export interface Appointment {
|
||||
id: string;
|
||||
userId: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
scheduledTime: Date;
|
||||
duration: number; // 预计时长（分钟）
|
||||
callType: CallType;
|
||||
translationType: TranslationType;
|
||||
interpreterIds?: string[]; // 翻译员ID列表
|
||||
estimatedCost: number; // 预估费用（分）
|
||||
actualCost?: number; // 实际费用（分）
|
||||
status: 'scheduled' | 'confirmed' | 'in_progress' | 'completed' | 'cancelled';
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
// 管理员字段
|
||||
adminNotes?: string;
|
||||
cancelReason?: string;
|
||||
}
|
||||
|
||||
// 翻译员信息
|
||||
export interface Interpreter {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar?: string;
|
||||
languages: string[]; // 支持的语言
|
||||
specialties: string[]; // 专业领域
|
||||
rating: number; // 评分
|
||||
pricePerMinute: number; // 每分钟价格（分）
|
||||
availability: {
|
||||
[key: string]: boolean; // 日期可用性
|
||||
};
|
||||
isOnline: boolean;
|
||||
totalCalls: number; // 总通话次数
|
||||
totalEarnings: number; // 总收入（分）
|
||||
status: 'active' | 'inactive' | 'suspended';
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
||||
// 通话记录
|
||||
export interface CallRecord {
|
||||
id: string;
|
||||
userId: string;
|
||||
appointmentId?: string;
|
||||
callType: CallType;
|
||||
translationType: TranslationType;
|
||||
interpreterIds?: string[];
|
||||
startTime: Date;
|
||||
endTime?: Date;
|
||||
duration: number; // 实际时长（分钟）
|
||||
cost: number; // 实际费用（分）
|
||||
status: 'in_progress' | 'completed' | 'failed';
|
||||
billingDetails: {
|
||||
baseRate: number;
|
||||
interpreterRate?: number;
|
||||
totalMinutes: number;
|
||||
totalCost: number;
|
||||
};
|
||||
createdAt: Date;
|
||||
// 管理员字段
|
||||
adminNotes?: string;
|
||||
qualityScore?: number;
|
||||
userRating?: number;
|
||||
userFeedback?: string;
|
||||
}
|
||||
|
||||
// 充值记录
|
||||
export interface RechargeRecord {
|
||||
id: string;
|
||||
userId: string;
|
||||
amount: number; // 充值金额（分）
|
||||
bonus: number; // 赠送金额（分）
|
||||
paymentMethod: string;
|
||||
status: 'pending' | 'completed' | 'failed';
|
||||
transactionId?: string;
|
||||
createdAt: Date;
|
||||
completedAt?: Date;
|
||||
// 管理员字段
|
||||
adminNotes?: string;
|
||||
refundAmount?: number;
|
||||
refundReason?: string;
|
||||
}
|
||||
|
||||
// 消费记录
|
||||
export interface ConsumptionRecord {
|
||||
id: string;
|
||||
userId: string;
|
||||
relatedType: 'call' | 'appointment' | 'document';
|
||||
relatedId: string;
|
||||
amount: number; // 消费金额（分）
|
||||
balanceBefore: number; // 消费前余额（分）
|
||||
balanceAfter: number; // 消费后余额（分）
|
||||
description: string;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
// 计费统计
|
||||
export interface BillingStats {
|
||||
totalRevenue: number; // 总收入（分）
|
||||
totalUsers: number; // 总用户数
|
||||
activeUsers: number; // 活跃用户数
|
||||
totalCalls: number; // 总通话数
|
||||
totalAppointments: number; // 总预约数
|
||||
averageCallDuration: number; // 平均通话时长（分钟）
|
||||
averageCallCost: number; // 平均通话费用（分）
|
||||
topServices: Array<{
|
||||
type: string;
|
||||
count: number;
|
||||
revenue: number;
|
||||
}>;
|
||||
revenueByDate: Array<{
|
||||
date: string;
|
||||
revenue: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
// 计费配置
|
||||
export const BILLING_CONFIG = {
|
||||
// 默认计费规则
|
||||
DEFAULT_RATES: {
|
||||
[CallType.VOICE]: {
|
||||
[TranslationType.TEXT]: 50, // 0.5元/分钟
|
||||
},
|
||||
[CallType.VIDEO]: {
|
||||
[TranslationType.SIGN_LANGUAGE]: 100, // 1元/分钟
|
||||
[TranslationType.HUMAN_INTERPRETER]: 200, // 2元/分钟
|
||||
},
|
||||
} as Record<CallType, Partial<Record<TranslationType, number>>>,
|
||||
// 低余额警告阈值（5分钟费用）
|
||||
LOW_BALANCE_THRESHOLD_MINUTES: 5,
|
||||
// 最低余额阈值（1分钟费用）
|
||||
MINIMUM_BALANCE_THRESHOLD_MINUTES: 1,
|
||||
// 充值赠送规则
|
||||
RECHARGE_BONUS_RULES: [
|
||||
{ minAmount: 10000, bonusPercentage: 5 }, // 100元以上送5%
|
||||
{ minAmount: 20000, bonusPercentage: 10 }, // 200元以上送10%
|
||||
{ minAmount: 50000, bonusPercentage: 15 }, // 500元以上送15%
|
||||
],
|
||||
};
|
||||
99
server/index.js
Normal file
99
server/index.js
Normal file
@ -0,0 +1,99 @@
|
||||
const express = require('express');
|
||||
const cors = require('cors');
|
||||
const jwt = require('jsonwebtoken');
|
||||
const { AccessToken } = require('twilio').jwt;
|
||||
const { VideoGrant } = AccessToken;
|
||||
|
||||
const app = express();
|
||||
const PORT = 3001;
|
||||
|
||||
// 中间件
|
||||
app.use(cors());
|
||||
app.use(express.json());
|
||||
|
||||
// Twilio 配置 - 请替换为您的实际凭证
|
||||
const TWILIO_CONFIG = {
|
||||
accountSid: process.env.TWILIO_ACCOUNT_SID || 'AC_YOUR_ACCOUNT_SID',
|
||||
apiKey: process.env.TWILIO_API_KEY || 'SK3b25e00e6914162a7cf829cffc415cb3',
|
||||
apiSecret: process.env.TWILIO_API_SECRET || 'PpGH298dlRgMSeGrexUjw1flczTVIw9H',
|
||||
};
|
||||
|
||||
// 生成 Twilio Access Token
|
||||
app.post('/api/twilio/token', (req, res) => {
|
||||
try {
|
||||
const { identity, roomName } = req.body;
|
||||
|
||||
if (!identity || !roomName) {
|
||||
return res.status(400).json({
|
||||
error: 'Identity and roomName are required'
|
||||
});
|
||||
}
|
||||
|
||||
// 创建 Access Token
|
||||
const token = new AccessToken(
|
||||
TWILIO_CONFIG.accountSid,
|
||||
TWILIO_CONFIG.apiKey,
|
||||
TWILIO_CONFIG.apiSecret,
|
||||
{ identity: identity }
|
||||
);
|
||||
|
||||
// 创建 Video Grant
|
||||
const videoGrant = new VideoGrant({
|
||||
room: roomName
|
||||
});
|
||||
|
||||
// 将 grant 添加到 token
|
||||
token.addGrant(videoGrant);
|
||||
|
||||
// 生成 JWT token
|
||||
const jwtToken = token.toJwt();
|
||||
|
||||
console.log(`Generated token for identity: ${identity}, room: ${roomName}`);
|
||||
|
||||
res.json({
|
||||
token: jwtToken,
|
||||
identity: identity,
|
||||
roomName: roomName
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Token generation error:', error);
|
||||
res.status(500).json({
|
||||
error: 'Failed to generate token',
|
||||
details: error.message
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 健康检查端点
|
||||
app.get('/health', (req, res) => {
|
||||
res.json({
|
||||
status: 'ok',
|
||||
timestamp: new Date().toISOString(),
|
||||
service: 'Twilio Token Server'
|
||||
});
|
||||
});
|
||||
|
||||
// 获取房间信息（模拟）
|
||||
app.get('/api/twilio/rooms', (req, res) => {
|
||||
res.json({
|
||||
rooms: [
|
||||
{ name: 'test-room', participants: 0 },
|
||||
{ name: 'demo-room', participants: 2 },
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
// 启动服务器
|
||||
app.listen(PORT, () => {
|
||||
console.log(`🚀 Twilio Token Server running on http://localhost:${PORT}`);
|
||||
console.log(`📋 Health check: http://localhost:${PORT}/health`);
|
||||
console.log(`🎥 Token endpoint: http://localhost:${PORT}/api/twilio/token`);
|
||||
console.log('');
|
||||
console.log('⚠️ 请确保已设置正确的 Twilio 凭证:');
|
||||
console.log(` TWILIO_ACCOUNT_SID: ${TWILIO_CONFIG.accountSid}`);
|
||||
console.log(` TWILIO_API_KEY: ${TWILIO_CONFIG.apiKey}`);
|
||||
console.log(` TWILIO_API_SECRET: ${TWILIO_CONFIG.apiSecret.substring(0, 4)}...`);
|
||||
});
|
||||
|
||||
module.exports = app;
|
||||
1446
server/package-lock.json
generated
Normal file
1446
server/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
server/package.json
Normal file
28
server/package.json
Normal file
@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "twilio-token-server",
|
||||
"version": "1.0.0",
|
||||
"description": "Twilio Video Token Server for TranslatePro",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node index.js",
|
||||
"dev": "nodemon index.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.18.2",
|
||||
"cors": "^2.8.5",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"twilio": "^4.19.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.0.2"
|
||||
},
|
||||
"keywords": [
|
||||
"twilio",
|
||||
"video",
|
||||
"token",
|
||||
"server"
|
||||
],
|
||||
"author": "TranslatePro Team",
|
||||
"license": "MIT"
|
||||
}
|
||||
@ -1,8 +1,10 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import { ConfigProvider, App as AntdApp } from 'antd';
|
||||
import zhCN from 'antd/locale/zh_CN';
|
||||
import { AppProvider } from '@/store';
|
||||
import AppRoutes from '@/routes';
|
||||
import DeviceTestPanel from '@/components/DeviceTestPanel';
|
||||
import '@/styles/global.css';
|
||||
|
||||
// Ant Design 主题配置
|
||||
@ -25,7 +27,7 @@ const theme = {
|
||||
},
|
||||
};
|
||||
|
||||
const App = () => {
|
||||
const App: React.FC = () => {
|
||||
return (
|
||||
<ConfigProvider
|
||||
locale={zhCN}
|
||||
@ -35,6 +37,7 @@ const App = () => {
|
||||
<AppProvider>
|
||||
<BrowserRouter>
|
||||
<AppRoutes />
|
||||
<DeviceTestPanel />
|
||||
</BrowserRouter>
|
||||
</AppProvider>
|
||||
</AntdApp>
|
||||
|
||||
48
src/components/DeviceRedirect.tsx
Normal file
48
src/components/DeviceRedirect.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import { FC, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { getRecommendedRoute } from '@/utils/deviceDetection';
|
||||
|
||||
const DeviceRedirect: FC = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const recommendedRoute = getRecommendedRoute();
|
||||
navigate(recommendedRoute, { replace: true });
|
||||
}, [navigate]);
|
||||
|
||||
// 显示加载状态
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
backgroundColor: '#f5f5f5',
|
||||
flexDirection: 'column',
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '48px',
|
||||
marginBottom: '16px',
|
||||
animation: 'spin 2s linear infinite',
|
||||
}}>
|
||||
🔄
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: '18px',
|
||||
color: '#666',
|
||||
fontWeight: '500',
|
||||
}}>
|
||||
正在为您准备最佳体验...
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeviceRedirect;
|
||||
145
src/components/DeviceTestPanel.tsx
Normal file
145
src/components/DeviceTestPanel.tsx
Normal file
@ -0,0 +1,145 @@
|
||||
import { FC, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const DeviceTestPanel: FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const testRoutes = [
|
||||
{ path: '/mobile/home', label: '移动端首页', icon: '📱' },
|
||||
{ path: '/mobile/call', label: '移动端通话', icon: '📞' },
|
||||
{ path: '/mobile/documents', label: '移动端文档', icon: '📄' },
|
||||
{ path: '/mobile/settings', label: '移动端设置', icon: '⚙️' },
|
||||
{ path: '/dashboard', label: '管理后台', icon: '💻' },
|
||||
];
|
||||
|
||||
const styles = {
|
||||
toggle: {
|
||||
position: 'fixed' as const,
|
||||
top: '20px',
|
||||
right: '20px',
|
||||
zIndex: 9999,
|
||||
padding: '8px 12px',
|
||||
backgroundColor: '#1890ff',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600' as const,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
panel: {
|
||||
position: 'fixed' as const,
|
||||
top: '60px',
|
||||
right: '20px',
|
||||
zIndex: 9998,
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
minWidth: '200px',
|
||||
border: '1px solid #e8e8e8',
|
||||
},
|
||||
title: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '12px',
|
||||
textAlign: 'center' as const,
|
||||
},
|
||||
routeButton: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
padding: '8px 12px',
|
||||
marginBottom: '4px',
|
||||
backgroundColor: 'transparent',
|
||||
border: '1px solid #e8e8e8',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '12px',
|
||||
transition: 'all 0.2s ease',
|
||||
},
|
||||
routeIcon: {
|
||||
marginRight: '8px',
|
||||
fontSize: '14px',
|
||||
},
|
||||
deviceInfo: {
|
||||
marginTop: '12px',
|
||||
padding: '8px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
borderRadius: '4px',
|
||||
fontSize: '11px',
|
||||
color: '#666',
|
||||
},
|
||||
};
|
||||
|
||||
const getCurrentDeviceInfo = () => {
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
const userAgent = navigator.userAgent;
|
||||
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
|
||||
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
userAgent: userAgent.substring(0, 50) + '...',
|
||||
isMobile,
|
||||
};
|
||||
};
|
||||
|
||||
const deviceInfo = getCurrentDeviceInfo();
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
return null; // 生产环境不显示测试面板
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
style={styles.toggle}
|
||||
onClick={() => setIsVisible(!isVisible)}
|
||||
>
|
||||
{isVisible ? '关闭' : '测试'}
|
||||
</button>
|
||||
|
||||
{isVisible && (
|
||||
<div style={styles.panel}>
|
||||
<div style={styles.title}>🧪 设备测试面板</div>
|
||||
|
||||
{testRoutes.map((route) => (
|
||||
<button
|
||||
key={route.path}
|
||||
style={styles.routeButton}
|
||||
onClick={() => {
|
||||
navigate(route.path);
|
||||
setIsVisible(false);
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = '#f0f8ff';
|
||||
e.currentTarget.style.borderColor = '#1890ff';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'transparent';
|
||||
e.currentTarget.style.borderColor = '#e8e8e8';
|
||||
}}
|
||||
>
|
||||
<span style={styles.routeIcon}>{route.icon}</span>
|
||||
{route.label}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<div style={styles.deviceInfo}>
|
||||
<div><strong>设备信息:</strong></div>
|
||||
<div>尺寸: {deviceInfo.width} x {deviceInfo.height}</div>
|
||||
<div>移动设备: {deviceInfo.isMobile ? '是' : '否'}</div>
|
||||
<div>UA: {deviceInfo.userAgent}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeviceTestPanel;
|
||||
99
src/components/MobileLayout.tsx
Normal file
99
src/components/MobileLayout.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import { FC, ReactNode, useEffect, useState } from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import MobileNavigation from './MobileNavigation';
|
||||
|
||||
interface MobileLayoutProps {
|
||||
children?: ReactNode;
|
||||
}
|
||||
|
||||
const MobileLayout: FC<MobileLayoutProps> = ({ children }) => {
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const checkMobile = () => {
|
||||
const userAgent = navigator.userAgent;
|
||||
const mobileKeywords = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
|
||||
const isMobileDevice = mobileKeywords.test(userAgent);
|
||||
const isSmallScreen = window.innerWidth <= 768;
|
||||
setIsMobile(isMobileDevice || isSmallScreen);
|
||||
};
|
||||
|
||||
checkMobile();
|
||||
window.addEventListener('resize', checkMobile);
|
||||
|
||||
return () => window.removeEventListener('resize', checkMobile);
|
||||
}, []);
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
height: '100vh',
|
||||
backgroundColor: '#f5f5f5',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
overflow: 'auto',
|
||||
paddingBottom: isMobile ? '80px' : '0',
|
||||
position: 'relative' as const,
|
||||
},
|
||||
mobileHeader: {
|
||||
backgroundColor: '#1890ff',
|
||||
color: 'white',
|
||||
padding: '12px 16px',
|
||||
textAlign: 'center' as const,
|
||||
fontSize: '18px',
|
||||
fontWeight: '600' as const,
|
||||
boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
};
|
||||
|
||||
if (!isMobile) {
|
||||
// 如果不是移动设备，显示提示信息
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
backgroundColor: '#f5f5f5',
|
||||
flexDirection: 'column',
|
||||
padding: '20px',
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
padding: '40px',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
|
||||
maxWidth: '400px',
|
||||
}}>
|
||||
<h2 style={{ color: '#1890ff', marginBottom: '16px' }}>📱 移动端应用</h2>
|
||||
<p style={{ color: '#666', marginBottom: '20px' }}>
|
||||
此应用专为移动设备设计。请在手机或平板电脑上访问，或调整浏览器窗口大小至移动设备尺寸。
|
||||
</p>
|
||||
<p style={{ color: '#999', fontSize: '14px' }}>
|
||||
您也可以使用浏览器的开发者工具切换到移动设备视图。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<div style={styles.mobileHeader}>
|
||||
Twilio 翻译应用
|
||||
</div>
|
||||
|
||||
<div style={styles.content}>
|
||||
{children || <Outlet />}
|
||||
</div>
|
||||
|
||||
<MobileNavigation />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileLayout;
|
||||
@ -8,10 +8,10 @@ interface NavItem {
|
||||
}
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ path: '/mobile/home', label: '首页', icon: '🏠' },
|
||||
{ path: '/mobile/call', label: '通话', icon: '📞' },
|
||||
{ path: '/mobile/documents', label: '文档', icon: '📄' },
|
||||
{ path: '/mobile/settings', label: '我的', icon: '👤' },
|
||||
{ path: '/home', label: '首页', icon: '🏠' },
|
||||
{ path: '/call', label: '通话', icon: '📞' },
|
||||
{ path: '/documents', label: '文档', icon: '📄' },
|
||||
{ path: '/settings', label: '我的', icon: '👤' },
|
||||
];
|
||||
|
||||
const MobileNavigation: FC = () => {
|
||||
@ -22,6 +22,60 @@ const MobileNavigation: FC = () => {
|
||||
navigate(path);
|
||||
};
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row' as const,
|
||||
backgroundColor: '#fff',
|
||||
borderTop: '1px solid #e0e0e0',
|
||||
padding: '8px 4px',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
position: 'absolute' as const,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '80px',
|
||||
boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.1)',
|
||||
zIndex: 1000,
|
||||
},
|
||||
navItem: {
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '8px 4px',
|
||||
borderRadius: '8px',
|
||||
border: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease',
|
||||
},
|
||||
activeNavItem: {
|
||||
backgroundColor: '#f0f8ff',
|
||||
},
|
||||
icon: {
|
||||
fontSize: '20px',
|
||||
marginBottom: '4px',
|
||||
opacity: 0.6,
|
||||
transition: 'opacity 0.2s ease',
|
||||
},
|
||||
activeIcon: {
|
||||
opacity: 1,
|
||||
},
|
||||
label: {
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
textAlign: 'center' as const,
|
||||
transition: 'color 0.2s ease',
|
||||
},
|
||||
activeLabel: {
|
||||
color: '#1890ff',
|
||||
fontWeight: '600' as const,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
{navItems.map((item) => {
|
||||
@ -54,58 +108,4 @@ const MobileNavigation: FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
display: 'flex',
|
||||
flexDirection: 'row' as const,
|
||||
backgroundColor: '#fff',
|
||||
borderTop: '1px solid #e0e0e0',
|
||||
padding: '8px 4px',
|
||||
justifyContent: 'space-around',
|
||||
alignItems: 'center',
|
||||
position: 'absolute' as const,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '80px',
|
||||
boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.1)',
|
||||
zIndex: 1000,
|
||||
},
|
||||
navItem: {
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '8px 4px',
|
||||
borderRadius: '8px',
|
||||
border: 'none',
|
||||
backgroundColor: 'transparent',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease',
|
||||
},
|
||||
activeNavItem: {
|
||||
backgroundColor: '#f0f8ff',
|
||||
},
|
||||
icon: {
|
||||
fontSize: '20px',
|
||||
marginBottom: '4px',
|
||||
opacity: 0.6,
|
||||
transition: 'opacity 0.2s ease',
|
||||
},
|
||||
activeIcon: {
|
||||
opacity: 1,
|
||||
},
|
||||
label: {
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
textAlign: 'center' as const,
|
||||
transition: 'color 0.2s ease',
|
||||
},
|
||||
activeLabel: {
|
||||
color: '#1890ff',
|
||||
fontWeight: '600' as const,
|
||||
},
|
||||
};
|
||||
|
||||
export default MobileNavigation;
|
||||
@ -8,10 +8,10 @@ interface NavItem {
|
||||
}
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ path: '/mobile/home', label: '首页', icon: '🏠' },
|
||||
{ path: '/mobile/call', label: '通话', icon: '📞' },
|
||||
{ path: '/mobile/documents', label: '文档', icon: '📄' },
|
||||
{ path: '/mobile/settings', label: '我的', icon: '👤' },
|
||||
{ path: '/home', label: '首页', icon: '🏠' },
|
||||
{ path: '/call', label: '通话', icon: '📞' },
|
||||
{ path: '/documents', label: '文档', icon: '📄' },
|
||||
{ path: '/settings', label: '我的', icon: '👤' },
|
||||
];
|
||||
|
||||
const MobileNavigation: FC = () => {
|
||||
|
||||
@ -1,22 +1,29 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Button, Card, Row, Col, Space, Typography, message } from 'antd';
|
||||
import { Button, Card, Row, Col, Space, Typography, message, Badge, Statistic } from 'antd';
|
||||
import {
|
||||
PhoneOutlined,
|
||||
VideoCameraOutlined,
|
||||
AudioOutlined,
|
||||
AudioMutedOutlined,
|
||||
VideoCameraAddOutlined,
|
||||
StopOutlined
|
||||
StopOutlined,
|
||||
WalletOutlined,
|
||||
ClockCircleOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { Room, RemoteParticipant, LocalParticipant } from 'twilio-video';
|
||||
import { twilioService, VideoCallOptions, ParticipantInfo } from '../../services/twilioService';
|
||||
import { BillingService } from '../../services/billingService';
|
||||
import { CallType, TranslationType, UserAccount, UserType } from '../../types/billing';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
interface VideoCallProps {
|
||||
roomName: string;
|
||||
identity: string;
|
||||
callType?: CallType;
|
||||
translationType?: TranslationType;
|
||||
onLeave?: () => void;
|
||||
onBillingUpdate?: (cost: number, duration: number) => void;
|
||||
}
|
||||
|
||||
interface ParticipantVideoProps {
|
||||
@ -92,17 +99,167 @@ const ParticipantVideo: React.FC<ParticipantVideoProps> = ({ participant, isLoca
|
||||
);
|
||||
};
|
||||
|
||||
export const VideoCall: React.FC<VideoCallProps> = ({ roomName, identity, onLeave }) => {
|
||||
export const VideoCall: React.FC<VideoCallProps> = ({
|
||||
roomName,
|
||||
identity,
|
||||
callType = CallType.VIDEO,
|
||||
translationType = TranslationType.SIGN_LANGUAGE,
|
||||
onLeave,
|
||||
onBillingUpdate
|
||||
}) => {
|
||||
const [room, setRoom] = useState<Room | null>(null);
|
||||
const [participants, setParticipants] = useState<ParticipantInfo[]>([]);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [audioEnabled, setAudioEnabled] = useState(true);
|
||||
const [videoEnabled, setVideoEnabled] = useState(true);
|
||||
|
||||
// 计费相关状态
|
||||
const [userAccount, setUserAccount] = useState<UserAccount | null>(null);
|
||||
const [callDuration, setCallDuration] = useState(0);
|
||||
const [currentCost, setCurrentCost] = useState(0);
|
||||
const [billingService] = useState(() => BillingService.getInstance());
|
||||
const [lastBillingMinute, setLastBillingMinute] = useState(0);
|
||||
|
||||
const callStartTime = useRef<Date | null>(null);
|
||||
const durationInterval = useRef<NodeJS.Timeout | null>(null);
|
||||
const billingInterval = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// 初始化用户账户信息
|
||||
useEffect(() => {
|
||||
const initUserAccount = async () => {
|
||||
try {
|
||||
// 模拟用户账户数据
|
||||
const mockAccount: UserAccount = {
|
||||
id: 'user-123',
|
||||
userType: UserType.INDIVIDUAL,
|
||||
balance: 10000, // 100元
|
||||
};
|
||||
billingService.setUserAccount(mockAccount);
|
||||
setUserAccount(mockAccount);
|
||||
} catch (error) {
|
||||
console.error('获取用户账户失败:', error);
|
||||
message.error('获取用户账户信息失败');
|
||||
}
|
||||
};
|
||||
|
||||
initUserAccount();
|
||||
}, [billingService]);
|
||||
|
||||
// 检查余额是否足够
|
||||
const checkBalance = () => {
|
||||
if (!userAccount) return false;
|
||||
|
||||
const balanceCheck = billingService.checkBalance(callType, translationType, 1);
|
||||
if (!balanceCheck.sufficient) {
|
||||
message.error(`余额不足，需要至少 ¥${(balanceCheck.requiredAmount / 100).toFixed(2)} 才能开始通话`);
|
||||
return false;
|
||||
}
|
||||
|
||||
const shouldWarn = billingService.shouldShowLowBalanceWarning(callType, translationType);
|
||||
if (shouldWarn) {
|
||||
message.warning('账户余额较低，请及时充值');
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 开始计费
|
||||
const startBilling = () => {
|
||||
callStartTime.current = new Date();
|
||||
|
||||
// 每秒更新通话时长
|
||||
durationInterval.current = setInterval(() => {
|
||||
if (callStartTime.current) {
|
||||
const duration = Math.floor((Date.now() - callStartTime.current.getTime()) / 1000);
|
||||
setCallDuration(duration);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// 每分钟进行计费
|
||||
billingInterval.current = setInterval(() => {
|
||||
if (callStartTime.current) {
|
||||
const currentMinute = Math.floor((Date.now() - callStartTime.current.getTime()) / 60000);
|
||||
if (currentMinute > lastBillingMinute) {
|
||||
performBilling(currentMinute);
|
||||
setLastBillingMinute(currentMinute);
|
||||
}
|
||||
}
|
||||
}, 60000); // 每分钟检查一次
|
||||
};
|
||||
|
||||
// 执行计费
|
||||
const performBilling = async (minute: number) => {
|
||||
if (!userAccount) return;
|
||||
|
||||
try {
|
||||
const cost = billingService.calculateCallCost(callType, translationType, 1);
|
||||
const newTotalCost = currentCost + cost;
|
||||
|
||||
// 检查余额是否足够继续通话
|
||||
const balanceCheck = billingService.checkBalance(callType, translationType, 1);
|
||||
if (!balanceCheck.sufficient) {
|
||||
message.error('余额不足，通话即将结束');
|
||||
setTimeout(() => {
|
||||
handleForceDisconnect();
|
||||
}, 30000); // 30秒后强制断开
|
||||
return;
|
||||
}
|
||||
|
||||
// 扣费
|
||||
const deductSuccess = billingService.deductBalance(cost);
|
||||
if (deductSuccess) {
|
||||
setCurrentCost(newTotalCost);
|
||||
const updatedAccount = billingService.getUserAccount();
|
||||
setUserAccount(updatedAccount);
|
||||
|
||||
// 通知父组件计费更新
|
||||
onBillingUpdate?.(newTotalCost, callDuration);
|
||||
|
||||
const shouldWarn = billingService.shouldShowLowBalanceWarning(callType, translationType);
|
||||
if (shouldWarn) {
|
||||
message.warning('账户余额较低，请及时充值');
|
||||
}
|
||||
} else {
|
||||
message.error('扣费失败，通话即将结束');
|
||||
handleForceDisconnect();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('计费失败:', error);
|
||||
message.error('计费系统异常');
|
||||
}
|
||||
};
|
||||
|
||||
// 强制断开连接（余额不足）
|
||||
const handleForceDisconnect = () => {
|
||||
message.error('余额不足，通话已结束');
|
||||
leaveRoom();
|
||||
};
|
||||
|
||||
// 停止计费
|
||||
const stopBilling = () => {
|
||||
if (durationInterval.current) {
|
||||
clearInterval(durationInterval.current);
|
||||
durationInterval.current = null;
|
||||
}
|
||||
|
||||
if (billingInterval.current) {
|
||||
clearInterval(billingInterval.current);
|
||||
billingInterval.current = null;
|
||||
}
|
||||
|
||||
callStartTime.current = null;
|
||||
setLastBillingMinute(0);
|
||||
};
|
||||
|
||||
const connectToRoom = async () => {
|
||||
if (isConnecting) return;
|
||||
|
||||
// 检查余额
|
||||
if (!checkBalance()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsConnecting(true);
|
||||
try {
|
||||
const options: VideoCallOptions = {
|
||||
@ -117,6 +274,7 @@ export const VideoCall: React.FC<VideoCallProps> = ({ roomName, identity, onLeav
|
||||
setIsConnected(true);
|
||||
|
||||
setupRoomEventListeners(connectedRoom);
|
||||
startBilling(); // 开始计费
|
||||
|
||||
message.success('成功连接到视频通话');
|
||||
} catch (error) {
|
||||
@ -146,6 +304,7 @@ export const VideoCall: React.FC<VideoCallProps> = ({ roomName, identity, onLeav
|
||||
setIsConnected(false);
|
||||
setRoom(null);
|
||||
setParticipants([]);
|
||||
stopBilling(); // 停止计费
|
||||
message.info('已断开视频通话连接');
|
||||
});
|
||||
|
||||
@ -157,6 +316,7 @@ export const VideoCall: React.FC<VideoCallProps> = ({ roomName, identity, onLeav
|
||||
setIsConnected(false);
|
||||
setRoom(null);
|
||||
setParticipants([]);
|
||||
stopBilling(); // 停止计费
|
||||
onLeave?.();
|
||||
};
|
||||
|
||||
@ -170,22 +330,64 @@ export const VideoCall: React.FC<VideoCallProps> = ({ roomName, identity, onLeav
|
||||
setVideoEnabled(newVideoState);
|
||||
};
|
||||
|
||||
const formatDuration = (seconds: number): string => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const formatCost = (cents: number): string => {
|
||||
return (cents / 100).toFixed(2);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
twilioService.disconnect();
|
||||
stopBilling();
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!isConnected) {
|
||||
return (
|
||||
<Card style={{ width: '100%', maxWidth: '400px', margin: '0 auto' }}>
|
||||
<Card style={{ width: '100%', maxWidth: '500px', margin: '0 auto' }}>
|
||||
<div style={{ textAlign: 'center' }}>
|
||||
<Title level={4}>视频通话</Title>
|
||||
<Text>房间: {roomName}</Text>
|
||||
<br />
|
||||
<Text>身份: {identity}</Text>
|
||||
<br />
|
||||
<Text>通话类型: {callType === CallType.VIDEO ? '视频通话' : '语音通话'}</Text>
|
||||
<br />
|
||||
<Text>翻译类型: {translationType === TranslationType.SIGN_LANGUAGE ? '手语翻译' : translationType === TranslationType.TEXT ? '文字翻译' : '真人翻译'}</Text>
|
||||
<br /><br />
|
||||
|
||||
{/* 用户账户信息 */}
|
||||
{userAccount && (
|
||||
<Card size="small" style={{ marginBottom: '16px', backgroundColor: '#f8f9fa' }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Statistic
|
||||
title="账户余额"
|
||||
value={userAccount.balance / 100}
|
||||
precision={2}
|
||||
prefix="¥"
|
||||
valueStyle={{ fontSize: '16px' }}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Statistic
|
||||
title="预计费率"
|
||||
value={billingService.calculateCallCost(callType, translationType, 1) / 100}
|
||||
precision={2}
|
||||
prefix="¥"
|
||||
suffix="/分钟"
|
||||
valueStyle={{ fontSize: '16px' }}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
@ -217,6 +419,7 @@ export const VideoCall: React.FC<VideoCallProps> = ({ roomName, identity, onLeav
|
||||
loading={isConnecting}
|
||||
onClick={connectToRoom}
|
||||
style={{ width: '100%' }}
|
||||
disabled={!userAccount}
|
||||
>
|
||||
{isConnecting ? '连接中...' : '加入通话'}
|
||||
</Button>
|
||||
@ -230,9 +433,32 @@ export const VideoCall: React.FC<VideoCallProps> = ({ roomName, identity, onLeav
|
||||
<div style={{ width: '100%', height: '100vh', padding: '16px' }}>
|
||||
<Card style={{ height: '100%' }}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
|
||||
<div style={{ marginBottom: '16px', textAlign: 'center' }}>
|
||||
<Title level={4}>视频通话 - {roomName}</Title>
|
||||
<Text>参与者: {participants.length}</Text>
|
||||
{/* 通话信息和计费状态 */}
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<Row gutter={16} align="middle">
|
||||
<Col span={8}>
|
||||
<Title level={4} style={{ margin: 0 }}>视频通话 - {roomName}</Title>
|
||||
<Text type="secondary">参与者: {participants.length}</Text>
|
||||
</Col>
|
||||
<Col span={8} style={{ textAlign: 'center' }}>
|
||||
<Badge status="processing" />
|
||||
<Space>
|
||||
<ClockCircleOutlined />
|
||||
<Text strong>{formatDuration(callDuration)}</Text>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col span={8} style={{ textAlign: 'right' }}>
|
||||
<Space>
|
||||
<WalletOutlined />
|
||||
<Text strong>¥{formatCost(currentCost)}</Text>
|
||||
{userAccount && (
|
||||
<Text type="secondary">
|
||||
(余额: ¥{formatCost(userAccount.balance)})
|
||||
</Text>
|
||||
)}
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, overflow: 'auto' }}>
|
||||
@ -256,37 +482,39 @@ export const VideoCall: React.FC<VideoCallProps> = ({ roomName, identity, onLeav
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<Row gutter={16} justify="center">
|
||||
<Col>
|
||||
<Button
|
||||
type={audioEnabled ? 'primary' : 'default'}
|
||||
shape="circle"
|
||||
size="large"
|
||||
icon={audioEnabled ? <AudioOutlined /> : <AudioMutedOutlined />}
|
||||
onClick={toggleAudio}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button
|
||||
type={videoEnabled ? 'primary' : 'default'}
|
||||
shape="circle"
|
||||
size="large"
|
||||
icon={<VideoCameraOutlined />}
|
||||
onClick={toggleVideo}
|
||||
/>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button
|
||||
type="primary"
|
||||
danger
|
||||
shape="circle"
|
||||
size="large"
|
||||
icon={<StopOutlined />}
|
||||
onClick={leaveRoom}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{/* 控制按钮 */}
|
||||
<div style={{ marginTop: '16px', textAlign: 'center' }}>
|
||||
<Space size="large">
|
||||
<Button
|
||||
type={audioEnabled ? 'default' : 'primary'}
|
||||
danger={!audioEnabled}
|
||||
icon={audioEnabled ? <AudioOutlined /> : <AudioMutedOutlined />}
|
||||
onClick={toggleAudio}
|
||||
size="large"
|
||||
>
|
||||
{audioEnabled ? '静音' : '取消静音'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type={videoEnabled ? 'default' : 'primary'}
|
||||
danger={!videoEnabled}
|
||||
icon={<VideoCameraOutlined />}
|
||||
onClick={toggleVideo}
|
||||
size="large"
|
||||
>
|
||||
{videoEnabled ? '关闭视频' : '开启视频'}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
danger
|
||||
type="primary"
|
||||
icon={<StopOutlined />}
|
||||
onClick={leaveRoom}
|
||||
size="large"
|
||||
>
|
||||
结束通话
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
349
src/components/VideoCallTest.tsx
Normal file
349
src/components/VideoCallTest.tsx
Normal file
@ -0,0 +1,349 @@
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Button, Card, Input, Space, Typography, message, Row, Col, Badge, Divider } from 'antd';
|
||||
import {
|
||||
PhoneOutlined,
|
||||
VideoCameraOutlined,
|
||||
AudioOutlined,
|
||||
AudioMutedOutlined,
|
||||
VideoCameraAddOutlined,
|
||||
StopOutlined,
|
||||
UserOutlined,
|
||||
HomeOutlined,
|
||||
WifiOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { Room, RemoteParticipant, LocalParticipant } from 'twilio-video';
|
||||
import { TwilioService, VideoCallOptions, ParticipantInfo } from '../services/twilioService';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
const VideoCallTest: React.FC = () => {
|
||||
const [twilioService] = useState(() => new TwilioService());
|
||||
const [room, setRoom] = useState<Room | null>(null);
|
||||
const [participants, setParticipants] = useState<ParticipantInfo[]>([]);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [audioEnabled, setAudioEnabled] = useState(true);
|
||||
const [videoEnabled, setVideoEnabled] = useState(true);
|
||||
|
||||
// 表单状态
|
||||
const [roomName, setRoomName] = useState('test-room');
|
||||
const [identity, setIdentity] = useState('user-' + Math.floor(Math.random() * 1000));
|
||||
|
||||
// 视频引用
|
||||
const localVideoRef = useRef<HTMLVideoElement>(null);
|
||||
const remoteVideoRef = useRef<HTMLVideoElement>(null);
|
||||
|
||||
// 连接到房间
|
||||
const connectToRoom = async () => {
|
||||
if (isConnecting || !roomName || !identity) {
|
||||
message.warning('请填写房间名称和用户身份');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsConnecting(true);
|
||||
try {
|
||||
const options: VideoCallOptions = {
|
||||
roomName,
|
||||
identity,
|
||||
audio: audioEnabled,
|
||||
video: videoEnabled,
|
||||
};
|
||||
|
||||
console.log('连接参数:', options);
|
||||
const connectedRoom = await twilioService.connectToRoom(options);
|
||||
setRoom(connectedRoom);
|
||||
setIsConnected(true);
|
||||
|
||||
setupRoomEventListeners(connectedRoom);
|
||||
|
||||
message.success(`成功连接到房间: ${roomName}`);
|
||||
} catch (error: any) {
|
||||
console.error('连接失败:', error);
|
||||
message.error(`连接失败: ${error.message}`);
|
||||
} finally {
|
||||
setIsConnecting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 设置房间事件监听器
|
||||
const setupRoomEventListeners = (room: Room) => {
|
||||
const updateParticipants = () => {
|
||||
const participantList = twilioService.getParticipants();
|
||||
setParticipants(participantList);
|
||||
console.log('参与者更新:', participantList);
|
||||
};
|
||||
|
||||
// 参与者连接
|
||||
room.on('participantConnected', (participant: RemoteParticipant) => {
|
||||
console.log(`参与者加入: ${participant.identity}`);
|
||||
message.info(`${participant.identity} 加入了通话`);
|
||||
updateParticipants();
|
||||
|
||||
// 监听远程视频轨道
|
||||
participant.on('trackSubscribed', (track) => {
|
||||
if (track.kind === 'video' && remoteVideoRef.current) {
|
||||
track.attach(remoteVideoRef.current);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 参与者断开
|
||||
room.on('participantDisconnected', (participant: RemoteParticipant) => {
|
||||
console.log(`参与者离开: ${participant.identity}`);
|
||||
message.info(`${participant.identity} 离开了通话`);
|
||||
updateParticipants();
|
||||
});
|
||||
|
||||
// 房间断开
|
||||
room.on('disconnected', () => {
|
||||
console.log('房间连接断开');
|
||||
setIsConnected(false);
|
||||
setRoom(null);
|
||||
setParticipants([]);
|
||||
message.info('已断开视频通话连接');
|
||||
});
|
||||
|
||||
// 本地视频轨道
|
||||
const localParticipant = room.localParticipant;
|
||||
if (localParticipant && localVideoRef.current) {
|
||||
localParticipant.videoTracks.forEach((publication) => {
|
||||
if (publication.track) {
|
||||
publication.track.attach(localVideoRef.current!);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateParticipants();
|
||||
};
|
||||
|
||||
// 离开房间
|
||||
const leaveRoom = () => {
|
||||
if (room) {
|
||||
twilioService.disconnect();
|
||||
setIsConnected(false);
|
||||
setRoom(null);
|
||||
setParticipants([]);
|
||||
message.info('已离开视频通话');
|
||||
}
|
||||
};
|
||||
|
||||
// 切换音频
|
||||
const toggleAudio = () => {
|
||||
const newAudioEnabled = twilioService.toggleAudio();
|
||||
setAudioEnabled(newAudioEnabled);
|
||||
message.info(newAudioEnabled ? '音频已开启' : '音频已关闭');
|
||||
};
|
||||
|
||||
// 切换视频
|
||||
const toggleVideo = () => {
|
||||
const newVideoEnabled = twilioService.toggleVideo();
|
||||
setVideoEnabled(newVideoEnabled);
|
||||
message.info(newVideoEnabled ? '视频已开启' : '视频已关闭');
|
||||
};
|
||||
|
||||
// 测试服务器连接
|
||||
const testServerConnection = async () => {
|
||||
try {
|
||||
const response = await fetch('http://localhost:3001/health');
|
||||
const data = await response.json();
|
||||
message.success('Token服务器连接正常');
|
||||
console.log('服务器状态:', data);
|
||||
} catch (error) {
|
||||
message.error('Token服务器连接失败，请确保服务器已启动');
|
||||
console.error('服务器连接错误:', error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// 组件挂载时测试服务器连接
|
||||
testServerConnection();
|
||||
|
||||
return () => {
|
||||
// 组件卸载时清理连接
|
||||
if (room) {
|
||||
twilioService.disconnect();
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
padding: '20px',
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
},
|
||||
videoContainer: {
|
||||
display: 'flex',
|
||||
gap: '16px',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
videoCard: {
|
||||
flex: 1,
|
||||
minHeight: '300px',
|
||||
},
|
||||
video: {
|
||||
width: '100%',
|
||||
height: '250px',
|
||||
backgroundColor: '#000',
|
||||
borderRadius: '8px',
|
||||
},
|
||||
controlPanel: {
|
||||
marginBottom: '20px',
|
||||
},
|
||||
participantList: {
|
||||
marginTop: '20px',
|
||||
},
|
||||
statusBadge: {
|
||||
marginBottom: '10px',
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<Title level={2}>🎥 Twilio 视频通话测试</Title>
|
||||
|
||||
{/* 连接状态 */}
|
||||
<div style={styles.statusBadge}>
|
||||
<Badge
|
||||
status={isConnected ? 'success' : 'default'}
|
||||
text={isConnected ? '已连接' : '未连接'}
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
type="link"
|
||||
icon={<WifiOutlined />}
|
||||
onClick={testServerConnection}
|
||||
>
|
||||
测试服务器
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 视频区域 */}
|
||||
<div style={styles.videoContainer}>
|
||||
<Card title="本地视频" style={styles.videoCard}>
|
||||
<video
|
||||
ref={localVideoRef}
|
||||
style={styles.video}
|
||||
autoPlay
|
||||
muted
|
||||
playsInline
|
||||
/>
|
||||
</Card>
|
||||
<Card title="远程视频" style={styles.videoCard}>
|
||||
<video
|
||||
ref={remoteVideoRef}
|
||||
style={styles.video}
|
||||
autoPlay
|
||||
playsInline
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 控制面板 */}
|
||||
<Card title="控制面板" style={styles.controlPanel}>
|
||||
<Row gutter={[16, 16]}>
|
||||
<Col span={12}>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Input
|
||||
placeholder="房间名称"
|
||||
value={roomName}
|
||||
onChange={(e) => setRoomName(e.target.value)}
|
||||
prefix={<HomeOutlined />}
|
||||
disabled={isConnected}
|
||||
/>
|
||||
<Input
|
||||
placeholder="用户身份"
|
||||
value={identity}
|
||||
onChange={(e) => setIdentity(e.target.value)}
|
||||
prefix={<UserOutlined />}
|
||||
disabled={isConnected}
|
||||
/>
|
||||
</Space>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Space wrap>
|
||||
{!isConnected ? (
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<VideoCameraAddOutlined />}
|
||||
loading={isConnecting}
|
||||
onClick={connectToRoom}
|
||||
size="large"
|
||||
>
|
||||
{isConnecting ? '连接中...' : '加入通话'}
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
danger
|
||||
icon={<StopOutlined />}
|
||||
onClick={leaveRoom}
|
||||
size="large"
|
||||
>
|
||||
离开通话
|
||||
</Button>
|
||||
<Button
|
||||
type={audioEnabled ? 'default' : 'primary'}
|
||||
icon={audioEnabled ? <AudioOutlined /> : <AudioMutedOutlined />}
|
||||
onClick={toggleAudio}
|
||||
>
|
||||
{audioEnabled ? '关闭音频' : '开启音频'}
|
||||
</Button>
|
||||
<Button
|
||||
type={videoEnabled ? 'default' : 'primary'}
|
||||
icon={<VideoCameraOutlined />}
|
||||
onClick={toggleVideo}
|
||||
>
|
||||
{videoEnabled ? '关闭视频' : '开启视频'}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</Space>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
{/* 参与者列表 */}
|
||||
{participants.length > 0 && (
|
||||
<Card title="参与者列表" style={styles.participantList}>
|
||||
<Row gutter={[16, 8]}>
|
||||
{participants.map((participant) => (
|
||||
<Col span={8} key={participant.sid}>
|
||||
<Card size="small">
|
||||
<Space>
|
||||
<UserOutlined />
|
||||
<div>
|
||||
<Text strong>{participant.identity}</Text>
|
||||
<br />
|
||||
<Text type="secondary">
|
||||
{participant.isLocal ? '本地' : '远程'} |
|
||||
音频: {participant.audioEnabled ? '开' : '关'} |
|
||||
视频: {participant.videoEnabled ? '开' : '关'}
|
||||
</Text>
|
||||
</div>
|
||||
</Space>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 使用说明 */}
|
||||
<Card title="📋 使用说明" size="small">
|
||||
<Text>
|
||||
<strong>测试步骤：</strong><br />
|
||||
1. 确保Token服务器已启动（端口3001）<br />
|
||||
2. 填写房间名称和用户身份<br />
|
||||
3. 点击"加入通话"按钮<br />
|
||||
4. 在另一个浏览器标签页中使用相同房间名称测试多人通话<br />
|
||||
5. 使用音频/视频控制按钮测试功能
|
||||
</Text>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoCallTest;
|
||||
580
src/pages/mobile/Appointment.tsx
Normal file
580
src/pages/mobile/Appointment.tsx
Normal file
@ -0,0 +1,580 @@
|
||||
import { FC, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { AppointmentService } from '../../services/appointmentService';
|
||||
import { BillingService } from '../../services/billingService';
|
||||
import {
|
||||
Appointment,
|
||||
Interpreter,
|
||||
CallType,
|
||||
TranslationType,
|
||||
UserAccount
|
||||
} from '../../types/billing';
|
||||
|
||||
const MobileAppointment: FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const appointmentService = AppointmentService.getInstance();
|
||||
const billingService = BillingService.getInstance();
|
||||
|
||||
const [userAccount, setUserAccount] = useState<UserAccount | null>(null);
|
||||
const [selectedDate, setSelectedDate] = useState<string>('');
|
||||
const [selectedTime, setSelectedTime] = useState<string>('');
|
||||
const [callType, setCallType] = useState<CallType>(CallType.VOICE);
|
||||
const [translationType, setTranslationType] = useState<TranslationType>(TranslationType.TEXT);
|
||||
const [selectedLanguages, setSelectedLanguages] = useState({
|
||||
from: 'zh-CN',
|
||||
to: 'en-US',
|
||||
});
|
||||
const [selectedInterpreter, setSelectedInterpreter] = useState<Interpreter | null>(null);
|
||||
const [availableInterpreters, setAvailableInterpreters] = useState<Interpreter[]>([]);
|
||||
const [description, setDescription] = useState('');
|
||||
const [estimatedCost, setEstimatedCost] = useState(0);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const languages = [
|
||||
{ code: 'zh-CN', name: '中文', flag: '🇨🇳' },
|
||||
{ code: 'en-US', name: 'English', flag: '🇺🇸' },
|
||||
{ code: 'ja-JP', name: '日本語', flag: '🇯🇵' },
|
||||
{ code: 'ko-KR', name: '한국어', flag: '🇰🇷' },
|
||||
{ code: 'es-ES', name: 'Español', flag: '🇪🇸' },
|
||||
{ code: 'fr-FR', name: 'Français', flag: '🇫🇷' },
|
||||
{ code: 'de-DE', name: 'Deutsch', flag: '🇩🇪' },
|
||||
];
|
||||
|
||||
// 生成可选时间段
|
||||
const timeSlots = [
|
||||
'09:00', '09:30', '10:00', '10:30', '11:00', '11:30',
|
||||
'14:00', '14:30', '15:00', '15:30', '16:00', '16:30',
|
||||
'17:00', '17:30', '18:00', '18:30', '19:00', '19:30',
|
||||
'20:00', '20:30', '21:00'
|
||||
];
|
||||
|
||||
// 生成未来7天的日期选项
|
||||
const getDateOptions = () => {
|
||||
const dates = [];
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const date = new Date();
|
||||
date.setDate(date.getDate() + i);
|
||||
dates.push({
|
||||
value: date.toISOString().split('T')[0],
|
||||
label: i === 0 ? '今天' : i === 1 ? '明天' :
|
||||
`${date.getMonth() + 1}月${date.getDate()}日`,
|
||||
weekday: date.toLocaleDateString('zh-CN', { weekday: 'short' })
|
||||
});
|
||||
}
|
||||
return dates;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const account = billingService.getUserAccount();
|
||||
setUserAccount(account);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedDate) {
|
||||
const date = new Date(selectedDate);
|
||||
const interpreters = appointmentService.getAvailableInterpreters(
|
||||
date,
|
||||
[selectedLanguages.from, selectedLanguages.to]
|
||||
);
|
||||
setAvailableInterpreters(interpreters);
|
||||
}
|
||||
}, [selectedDate, selectedLanguages]);
|
||||
|
||||
useEffect(() => {
|
||||
// 计算预估费用
|
||||
if (callType && translationType && userAccount) {
|
||||
const interpreterRate = selectedInterpreter?.pricePerMinute;
|
||||
const baseCost = billingService.calculateCallCost(
|
||||
callType,
|
||||
translationType,
|
||||
30, // 假设30分钟
|
||||
interpreterRate
|
||||
);
|
||||
setEstimatedCost(baseCost);
|
||||
}
|
||||
}, [callType, translationType, selectedInterpreter, userAccount]);
|
||||
|
||||
useEffect(() => {
|
||||
// 根据通话类型设置默认翻译类型
|
||||
if (callType === CallType.VIDEO) {
|
||||
setTranslationType(TranslationType.SIGN_LANGUAGE);
|
||||
} else {
|
||||
setTranslationType(TranslationType.TEXT);
|
||||
}
|
||||
}, [callType]);
|
||||
|
||||
const formatCurrency = (cents: number) => {
|
||||
return (cents / 100).toFixed(2);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!selectedDate || !selectedTime || !callType || !translationType) {
|
||||
alert('请完善预约信息');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!userAccount || userAccount.balance < estimatedCost) {
|
||||
alert('账户余额不足，请先充值');
|
||||
navigate('/mobile/recharge');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
// 构建预约数据
|
||||
const appointmentData = {
|
||||
userId: 'user_1', // 实际应该从用户状态获取
|
||||
title: `${callType === CallType.VOICE ? '语音' : '视频'}通话预约`,
|
||||
description: `${translationType === TranslationType.TEXT ? '文本翻译' :
|
||||
translationType === TranslationType.SIGN_LANGUAGE ? '手语翻译' : '人工翻译'}`,
|
||||
scheduledTime: new Date(`${selectedDate}T${selectedTime}`),
|
||||
duration: 60, // 默认60分钟
|
||||
callType,
|
||||
translationType,
|
||||
interpreterIds: selectedInterpreter ? [selectedInterpreter.id] : undefined,
|
||||
estimatedCost,
|
||||
status: 'scheduled' as const,
|
||||
};
|
||||
|
||||
// 创建预约
|
||||
const appointment = appointmentService.createAppointment(appointmentData);
|
||||
|
||||
alert('预约创建成功！');
|
||||
navigate('/mobile/home');
|
||||
} catch (error) {
|
||||
console.error('创建预约失败:', error);
|
||||
alert('创建预约失败，请重试');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
padding: '16px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
minHeight: '100vh',
|
||||
},
|
||||
header: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
backButton: {
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
marginRight: '12px',
|
||||
},
|
||||
title: {
|
||||
fontSize: '20px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
},
|
||||
section: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '16px',
|
||||
padding: '20px',
|
||||
marginBottom: '20px',
|
||||
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
callTypeSelector: {
|
||||
display: 'flex',
|
||||
gap: '12px',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
callTypeButton: (active: boolean) => ({
|
||||
flex: 1,
|
||||
padding: '16px',
|
||||
borderRadius: '12px',
|
||||
border: active ? '2px solid #1890ff' : '2px solid #f0f0f0',
|
||||
backgroundColor: active ? '#e6f7ff' : 'white',
|
||||
color: active ? '#1890ff' : '#666',
|
||||
fontSize: '16px',
|
||||
fontWeight: '500' as const,
|
||||
cursor: 'pointer',
|
||||
textAlign: 'center' as const,
|
||||
}),
|
||||
dateGrid: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||
gap: '12px',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
dateOption: (selected: boolean) => ({
|
||||
padding: '16px',
|
||||
borderRadius: '12px',
|
||||
border: selected ? '2px solid #1890ff' : '2px solid #f0f0f0',
|
||||
backgroundColor: selected ? '#e6f7ff' : 'white',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'center' as const,
|
||||
}),
|
||||
dateLabel: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '500' as const,
|
||||
color: '#333',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
dateWeekday: {
|
||||
fontSize: '12px',
|
||||
color: '#999',
|
||||
},
|
||||
timeGrid: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
gap: '8px',
|
||||
},
|
||||
timeSlot: (selected: boolean, available: boolean) => ({
|
||||
padding: '12px 8px',
|
||||
borderRadius: '8px',
|
||||
border: selected ? '2px solid #1890ff' : '1px solid #d9d9d9',
|
||||
backgroundColor: selected ? '#e6f7ff' : available ? 'white' : '#f5f5f5',
|
||||
color: selected ? '#1890ff' : available ? '#333' : '#999',
|
||||
fontSize: '14px',
|
||||
textAlign: 'center' as const,
|
||||
cursor: available ? 'pointer' : 'not-allowed',
|
||||
}),
|
||||
languageRow: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
languageSelect: {
|
||||
flex: 1,
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #d9d9d9',
|
||||
backgroundColor: 'white',
|
||||
fontSize: '14px',
|
||||
},
|
||||
swapButton: {
|
||||
margin: '0 12px',
|
||||
padding: '8px',
|
||||
borderRadius: '20px',
|
||||
border: 'none',
|
||||
backgroundColor: '#f0f8ff',
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
},
|
||||
translationTypeSelector: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
gap: '12px',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
translationTypeButton: (active: boolean) => ({
|
||||
padding: '16px',
|
||||
borderRadius: '12px',
|
||||
border: active ? '2px solid #1890ff' : '1px solid #d9d9d9',
|
||||
backgroundColor: active ? '#e6f7ff' : 'white',
|
||||
color: active ? '#1890ff' : '#666',
|
||||
fontSize: '14px',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left' as const,
|
||||
}),
|
||||
interpreterList: {
|
||||
marginTop: '16px',
|
||||
},
|
||||
interpreterItem: (selected: boolean) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '16px',
|
||||
borderRadius: '12px',
|
||||
border: selected ? '2px solid #1890ff' : '1px solid #d9d9d9',
|
||||
backgroundColor: selected ? '#e6f7ff' : 'white',
|
||||
marginBottom: '12px',
|
||||
cursor: 'pointer',
|
||||
}),
|
||||
interpreterAvatar: {
|
||||
fontSize: '32px',
|
||||
marginRight: '16px',
|
||||
},
|
||||
interpreterInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
interpreterName: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '500' as const,
|
||||
color: '#333',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
interpreterDetails: {
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
interpreterRate: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '500' as const,
|
||||
color: '#fa8c16',
|
||||
},
|
||||
descriptionInput: {
|
||||
width: '100%',
|
||||
minHeight: '80px',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #d9d9d9',
|
||||
fontSize: '14px',
|
||||
resize: 'vertical' as const,
|
||||
},
|
||||
costSummary: {
|
||||
backgroundColor: '#f8f9fa',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
costRow: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
costLabel: {
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
},
|
||||
costValue: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#1890ff',
|
||||
},
|
||||
submitButton: {
|
||||
width: '100%',
|
||||
padding: '16px',
|
||||
borderRadius: '12px',
|
||||
border: 'none',
|
||||
backgroundColor: selectedDate && selectedTime && !isSubmitting ? '#1890ff' : '#d9d9d9',
|
||||
color: 'white',
|
||||
fontSize: '16px',
|
||||
fontWeight: '600' as const,
|
||||
cursor: selectedDate && selectedTime && !isSubmitting ? 'pointer' : 'not-allowed',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
{/* 头部 */}
|
||||
<div style={styles.header}>
|
||||
<button style={styles.backButton} onClick={() => navigate(-1)}>
|
||||
←
|
||||
</button>
|
||||
<div style={styles.title}>预约通话</div>
|
||||
</div>
|
||||
|
||||
{/* 通话类型选择 */}
|
||||
<div style={styles.section}>
|
||||
<div style={styles.sectionTitle}>选择通话类型</div>
|
||||
<div style={styles.callTypeSelector}>
|
||||
<button
|
||||
style={styles.callTypeButton(callType === CallType.VOICE)}
|
||||
onClick={() => setCallType(CallType.VOICE)}
|
||||
>
|
||||
📞 语音通话
|
||||
</button>
|
||||
<button
|
||||
style={styles.callTypeButton(callType === CallType.VIDEO)}
|
||||
onClick={() => setCallType(CallType.VIDEO)}
|
||||
>
|
||||
📹 视频通话
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 日期选择 */}
|
||||
<div style={styles.section}>
|
||||
<div style={styles.sectionTitle}>选择日期</div>
|
||||
<div style={styles.dateGrid}>
|
||||
{getDateOptions().map((date) => (
|
||||
<div
|
||||
key={date.value}
|
||||
style={styles.dateOption(selectedDate === date.value)}
|
||||
onClick={() => setSelectedDate(date.value)}
|
||||
>
|
||||
<div style={styles.dateLabel}>{date.label}</div>
|
||||
<div style={styles.dateWeekday}>{date.weekday}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 时间选择 */}
|
||||
{selectedDate && (
|
||||
<div style={styles.section}>
|
||||
<div style={styles.sectionTitle}>选择时间</div>
|
||||
<div style={styles.timeGrid}>
|
||||
{timeSlots.map((time) => {
|
||||
const isAvailable = appointmentService.isTimeSlotAvailable(
|
||||
new Date(`${selectedDate}T${time}:00`),
|
||||
30
|
||||
);
|
||||
return (
|
||||
<button
|
||||
key={time}
|
||||
style={styles.timeSlot(selectedTime === time, isAvailable)}
|
||||
onClick={() => isAvailable && setSelectedTime(time)}
|
||||
disabled={!isAvailable}
|
||||
>
|
||||
{time}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 语言选择 */}
|
||||
<div style={styles.section}>
|
||||
<div style={styles.sectionTitle}>选择语言</div>
|
||||
<div style={styles.languageRow}>
|
||||
<select
|
||||
style={styles.languageSelect}
|
||||
value={selectedLanguages.from}
|
||||
onChange={(e) => setSelectedLanguages({...selectedLanguages, from: e.target.value})}
|
||||
>
|
||||
{languages.map(lang => (
|
||||
<option key={lang.code} value={lang.code}>
|
||||
{lang.flag} {lang.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<button
|
||||
style={styles.swapButton}
|
||||
onClick={() => setSelectedLanguages({
|
||||
from: selectedLanguages.to,
|
||||
to: selectedLanguages.from
|
||||
})}
|
||||
>
|
||||
🔄
|
||||
</button>
|
||||
|
||||
<select
|
||||
style={styles.languageSelect}
|
||||
value={selectedLanguages.to}
|
||||
onChange={(e) => setSelectedLanguages({...selectedLanguages, to: e.target.value})}
|
||||
>
|
||||
{languages.map(lang => (
|
||||
<option key={lang.code} value={lang.code}>
|
||||
{lang.flag} {lang.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 翻译服务选择 */}
|
||||
<div style={styles.section}>
|
||||
<div style={styles.sectionTitle}>选择翻译服务</div>
|
||||
<div style={styles.translationTypeSelector}>
|
||||
{callType === CallType.VOICE && (
|
||||
<button
|
||||
style={styles.translationTypeButton(translationType === TranslationType.TEXT)}
|
||||
onClick={() => setTranslationType(TranslationType.TEXT)}
|
||||
>
|
||||
<div>💬 实时文字翻译</div>
|
||||
<div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
|
||||
AI自动翻译，快速准确
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{callType === CallType.VIDEO && (
|
||||
<>
|
||||
<button
|
||||
style={styles.translationTypeButton(translationType === TranslationType.SIGN_LANGUAGE)}
|
||||
onClick={() => setTranslationType(TranslationType.SIGN_LANGUAGE)}
|
||||
>
|
||||
<div>👋 虚拟人手语翻译</div>
|
||||
<div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
|
||||
AI虚拟人实时手语翻译
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
style={styles.translationTypeButton(translationType === TranslationType.HUMAN_INTERPRETER)}
|
||||
onClick={() => setTranslationType(TranslationType.HUMAN_INTERPRETER)}
|
||||
>
|
||||
<div>👨💼 专业翻译员</div>
|
||||
<div style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}>
|
||||
人工翻译，专业可靠
|
||||
</div>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 翻译员选择 */}
|
||||
{translationType === TranslationType.HUMAN_INTERPRETER && (
|
||||
<div style={styles.interpreterList}>
|
||||
<div style={styles.sectionTitle}>选择翻译员</div>
|
||||
{availableInterpreters.map((interpreter) => (
|
||||
<div
|
||||
key={interpreter.id}
|
||||
style={styles.interpreterItem(selectedInterpreter?.id === interpreter.id)}
|
||||
onClick={() => setSelectedInterpreter(interpreter)}
|
||||
>
|
||||
<div style={styles.interpreterAvatar}>{interpreter.avatar}</div>
|
||||
<div style={styles.interpreterInfo}>
|
||||
<div style={styles.interpreterName}>{interpreter.name}</div>
|
||||
<div style={styles.interpreterDetails}>
|
||||
{interpreter.languages.join(', ')} | ⭐ {interpreter.rating} | {interpreter.specialties.join(', ')}
|
||||
</div>
|
||||
<div style={styles.interpreterRate}>
|
||||
¥{formatCurrency(interpreter.pricePerMinute)}/分钟
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 备注信息 */}
|
||||
<div style={styles.section}>
|
||||
<div style={styles.sectionTitle}>备注信息（可选）</div>
|
||||
<textarea
|
||||
style={styles.descriptionInput}
|
||||
placeholder="请输入特殊要求或备注信息..."
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 费用预估 */}
|
||||
{estimatedCost > 0 && (
|
||||
<div style={styles.costSummary}>
|
||||
<div style={styles.costRow}>
|
||||
<span style={styles.costLabel}>预估费用（30分钟）</span>
|
||||
<span style={styles.costValue}>¥{formatCurrency(estimatedCost)}</span>
|
||||
</div>
|
||||
<div style={styles.costRow}>
|
||||
<span style={styles.costLabel}>当前余额</span>
|
||||
<span style={styles.costValue}>
|
||||
¥{userAccount ? formatCurrency(userAccount.balance) : '0.00'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 提交按钮 */}
|
||||
<button
|
||||
style={styles.submitButton}
|
||||
onClick={handleSubmit}
|
||||
disabled={!selectedDate || !selectedTime || isSubmitting}
|
||||
>
|
||||
{isSubmitting ? '预约中...' : '确认预约'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileAppointment;
|
||||
698
src/pages/mobile/Call.tsx
Normal file
698
src/pages/mobile/Call.tsx
Normal file
@ -0,0 +1,698 @@
|
||||
import { FC, useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { BillingService } from '../../services/billingService';
|
||||
import { AppointmentService } from '../../services/appointmentService';
|
||||
import {
|
||||
UserAccount,
|
||||
CallType,
|
||||
TranslationType,
|
||||
Interpreter,
|
||||
BillingRule
|
||||
} from '../../types/billing';
|
||||
|
||||
const MobileCall: FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const billingService = BillingService.getInstance();
|
||||
const appointmentService = AppointmentService.getInstance();
|
||||
|
||||
// 从URL参数获取通话类型
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
const initialCallType = urlParams.get('type') === 'video' ? CallType.VIDEO : CallType.VOICE;
|
||||
|
||||
// 状态管理
|
||||
const [callType, setCallType] = useState<CallType>(initialCallType);
|
||||
const [translationType, setTranslationType] = useState<TranslationType>(
|
||||
callType === CallType.VIDEO ? TranslationType.SIGN_LANGUAGE : TranslationType.TEXT
|
||||
);
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [callDuration, setCallDuration] = useState(0);
|
||||
const [currentCost, setCurrentCost] = useState(0);
|
||||
const [userAccount, setUserAccount] = useState<UserAccount | null>(null);
|
||||
const [selectedInterpreter, setSelectedInterpreter] = useState<Interpreter | null>(null);
|
||||
const [availableInterpreters, setAvailableInterpreters] = useState<Interpreter[]>([]);
|
||||
const [billingRule, setBillingRule] = useState<BillingRule | null>(null);
|
||||
const [showLowBalanceWarning, setShowLowBalanceWarning] = useState(false);
|
||||
const [selectedLanguages, setSelectedLanguages] = useState({
|
||||
from: 'zh-CN',
|
||||
to: 'en-US',
|
||||
});
|
||||
|
||||
// 计费相关
|
||||
const [lastBillingMinute, setLastBillingMinute] = useState(0);
|
||||
const billingIntervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// 翻译历史
|
||||
const [translationHistory, setTranslationHistory] = useState([
|
||||
{
|
||||
time: '14:23:15',
|
||||
original: '你好，很高兴见到你',
|
||||
translated: 'Hello, nice to meet you',
|
||||
speaker: 'you'
|
||||
},
|
||||
{
|
||||
time: '14:23:18',
|
||||
original: 'Nice to meet you too!',
|
||||
translated: '我也很高兴见到你！',
|
||||
speaker: 'other'
|
||||
},
|
||||
]);
|
||||
|
||||
const languages = [
|
||||
{ code: 'zh-CN', name: '中文', flag: '🇨🇳' },
|
||||
{ code: 'en-US', name: 'English', flag: '🇺🇸' },
|
||||
{ code: 'ja-JP', name: '日本語', flag: '🇯🇵' },
|
||||
{ code: 'ko-KR', name: '한국어', flag: '🇰🇷' },
|
||||
{ code: 'es-ES', name: 'Español', flag: '🇪🇸' },
|
||||
{ code: 'fr-FR', name: 'Français', flag: '🇫🇷' },
|
||||
{ code: 'de-DE', name: 'Deutsch', flag: '🇩🇪' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
// 获取用户账户信息
|
||||
const account = billingService.getUserAccount();
|
||||
setUserAccount(account);
|
||||
|
||||
// 获取计费规则
|
||||
if (account) {
|
||||
const rule = billingService.getBillingRule(callType, translationType, account.userType);
|
||||
setBillingRule(rule);
|
||||
}
|
||||
|
||||
// 获取可用翻译员
|
||||
if (translationType === TranslationType.HUMAN_INTERPRETER) {
|
||||
const interpreters = appointmentService.getAvailableInterpreters(
|
||||
new Date(),
|
||||
[selectedLanguages.from, selectedLanguages.to]
|
||||
);
|
||||
setAvailableInterpreters(interpreters);
|
||||
}
|
||||
}, [callType, translationType, selectedLanguages]);
|
||||
|
||||
useEffect(() => {
|
||||
let interval: NodeJS.Timeout;
|
||||
if (isConnected) {
|
||||
interval = setInterval(() => {
|
||||
setCallDuration(prev => {
|
||||
const newDuration = prev + 1;
|
||||
const currentMinute = Math.ceil(newDuration / 60);
|
||||
|
||||
// 计算当前费用
|
||||
if (billingRule && userAccount) {
|
||||
const interpreterRate = selectedInterpreter?.pricePerMinute;
|
||||
const cost = billingService.calculateCallCost(
|
||||
callType,
|
||||
translationType,
|
||||
newDuration / 60,
|
||||
interpreterRate
|
||||
);
|
||||
setCurrentCost(cost);
|
||||
|
||||
// 每分钟开始时扣费
|
||||
if (currentMinute > lastBillingMinute) {
|
||||
const minuteCost = billingService.calculateCallCost(
|
||||
callType,
|
||||
translationType,
|
||||
1,
|
||||
interpreterRate
|
||||
);
|
||||
|
||||
if (billingService.deductBalance(minuteCost)) {
|
||||
setLastBillingMinute(currentMinute);
|
||||
setUserAccount(billingService.getUserAccount());
|
||||
} else {
|
||||
// 余额不足，断开通话
|
||||
handleDisconnect();
|
||||
alert('余额不足，通话已断开');
|
||||
}
|
||||
}
|
||||
|
||||
// 检查低余额警告
|
||||
if (billingService.shouldShowLowBalanceWarning(callType, translationType, interpreterRate)) {
|
||||
setShowLowBalanceWarning(true);
|
||||
}
|
||||
}
|
||||
|
||||
return newDuration;
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
return () => clearInterval(interval);
|
||||
}, [isConnected, billingRule, userAccount, selectedInterpreter, lastBillingMinute]);
|
||||
|
||||
const formatDuration = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = seconds % 60;
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const formatCost = (cents: number) => {
|
||||
return (cents / 100).toFixed(2);
|
||||
};
|
||||
|
||||
const handleConnect = () => {
|
||||
if (!userAccount || !billingRule) {
|
||||
alert('账户信息或计费规则未加载');
|
||||
return;
|
||||
}
|
||||
|
||||
const interpreterRate = selectedInterpreter?.pricePerMinute;
|
||||
const balanceCheck = billingService.checkBalance(callType, translationType, 1, interpreterRate);
|
||||
|
||||
if (!balanceCheck.sufficient) {
|
||||
alert(`余额不足，需要至少 ¥${formatCost(balanceCheck.requiredAmount)} 才能开始通话`);
|
||||
navigate('/mobile/recharge');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsConnected(true);
|
||||
setCallDuration(0);
|
||||
setCurrentCost(0);
|
||||
setLastBillingMinute(0);
|
||||
};
|
||||
|
||||
const handleDisconnect = () => {
|
||||
setIsConnected(false);
|
||||
if (billingIntervalRef.current) {
|
||||
clearInterval(billingIntervalRef.current);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCallTypeChange = (newCallType: CallType) => {
|
||||
if (isConnected) {
|
||||
alert('通话进行中无法切换类型');
|
||||
return;
|
||||
}
|
||||
|
||||
setCallType(newCallType);
|
||||
// 根据通话类型设置默认翻译类型
|
||||
if (newCallType === CallType.VIDEO) {
|
||||
setTranslationType(TranslationType.SIGN_LANGUAGE);
|
||||
} else {
|
||||
setTranslationType(TranslationType.TEXT);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTranslationTypeChange = (newTranslationType: TranslationType) => {
|
||||
if (isConnected) {
|
||||
alert('通话进行中无法切换翻译类型');
|
||||
return;
|
||||
}
|
||||
setTranslationType(newTranslationType);
|
||||
};
|
||||
|
||||
const handleInterpreterSelect = (interpreter: Interpreter) => {
|
||||
if (isConnected) {
|
||||
alert('通话进行中无法切换翻译员');
|
||||
return;
|
||||
}
|
||||
setSelectedInterpreter(interpreter);
|
||||
};
|
||||
|
||||
const swapLanguages = () => {
|
||||
setSelectedLanguages({
|
||||
from: selectedLanguages.to,
|
||||
to: selectedLanguages.from,
|
||||
});
|
||||
};
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
padding: '16px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
},
|
||||
header: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
marginBottom: '16px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
callTypeSelector: {
|
||||
display: 'flex',
|
||||
gap: '8px',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
callTypeButton: (active: boolean) => ({
|
||||
flex: 1,
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: 'none',
|
||||
backgroundColor: active ? '#1890ff' : '#f0f0f0',
|
||||
color: active ? 'white' : '#666',
|
||||
fontSize: '14px',
|
||||
fontWeight: '500' as const,
|
||||
cursor: 'pointer',
|
||||
}),
|
||||
statusRow: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '12px',
|
||||
},
|
||||
statusIndicator: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
statusDot: {
|
||||
width: '12px',
|
||||
height: '12px',
|
||||
borderRadius: '6px',
|
||||
backgroundColor: isConnected ? '#52c41a' : '#d9d9d9',
|
||||
marginRight: '8px',
|
||||
},
|
||||
statusText: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '500' as const,
|
||||
color: isConnected ? '#52c41a' : '#666',
|
||||
},
|
||||
costInfo: {
|
||||
textAlign: 'right' as const,
|
||||
},
|
||||
duration: {
|
||||
fontSize: '20px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#1890ff',
|
||||
textAlign: 'center' as const,
|
||||
marginBottom: '8px',
|
||||
},
|
||||
currentCost: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '500' as const,
|
||||
color: '#fa8c16',
|
||||
textAlign: 'center' as const,
|
||||
},
|
||||
billingInfo: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
marginBottom: '16px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
billingTitle: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '12px',
|
||||
},
|
||||
translationTypeSelector: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
gap: '8px',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
translationTypeButton: (active: boolean) => ({
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: active ? '2px solid #1890ff' : '1px solid #d9d9d9',
|
||||
backgroundColor: active ? '#e6f7ff' : 'white',
|
||||
color: active ? '#1890ff' : '#666',
|
||||
fontSize: '14px',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left' as const,
|
||||
}),
|
||||
rateInfo: {
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
interpreterSelector: {
|
||||
marginTop: '12px',
|
||||
},
|
||||
interpreterItem: (selected: boolean) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: selected ? '2px solid #1890ff' : '1px solid #d9d9d9',
|
||||
backgroundColor: selected ? '#e6f7ff' : 'white',
|
||||
marginBottom: '8px',
|
||||
cursor: 'pointer',
|
||||
}),
|
||||
interpreterInfo: {
|
||||
marginLeft: '12px',
|
||||
flex: 1,
|
||||
},
|
||||
interpreterName: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '500' as const,
|
||||
color: '#333',
|
||||
},
|
||||
interpreterDetails: {
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
},
|
||||
interpreterRate: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '500' as const,
|
||||
color: '#fa8c16',
|
||||
},
|
||||
languageSelector: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
marginBottom: '16px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
languageRow: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '12px',
|
||||
},
|
||||
languageSelect: {
|
||||
flex: 1,
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #d9d9d9',
|
||||
backgroundColor: 'white',
|
||||
fontSize: '14px',
|
||||
},
|
||||
swapButton: {
|
||||
margin: '0 12px',
|
||||
padding: '8px',
|
||||
borderRadius: '20px',
|
||||
border: 'none',
|
||||
backgroundColor: '#f0f8ff',
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
},
|
||||
controlButtons: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
gap: '20px',
|
||||
marginBottom: '24px',
|
||||
},
|
||||
controlButton: {
|
||||
width: '80px',
|
||||
height: '80px',
|
||||
borderRadius: '40px',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '32px',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
transition: 'transform 0.2s ease',
|
||||
},
|
||||
connectButton: {
|
||||
backgroundColor: isConnected ? '#ff4d4f' : '#52c41a',
|
||||
},
|
||||
translationContainer: {
|
||||
flex: 1,
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
translationTitle: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
translationItem: {
|
||||
marginBottom: '16px',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
},
|
||||
translationTime: {
|
||||
fontSize: '12px',
|
||||
color: '#999',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
translationText: {
|
||||
fontSize: '14px',
|
||||
lineHeight: '1.4',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
originalText: {
|
||||
color: '#333',
|
||||
fontWeight: '500' as const,
|
||||
},
|
||||
translatedText: {
|
||||
color: '#1890ff',
|
||||
},
|
||||
speakerTag: {
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
fontStyle: 'italic' as const,
|
||||
},
|
||||
warningModal: {
|
||||
position: 'fixed' as const,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1000,
|
||||
},
|
||||
warningContent: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '24px',
|
||||
margin: '20px',
|
||||
textAlign: 'center' as const,
|
||||
},
|
||||
warningTitle: {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#fa8c16',
|
||||
marginBottom: '12px',
|
||||
},
|
||||
warningText: {
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
warningButtons: {
|
||||
display: 'flex',
|
||||
gap: '12px',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
warningButton: (primary: boolean) => ({
|
||||
padding: '8px 16px',
|
||||
borderRadius: '6px',
|
||||
border: 'none',
|
||||
backgroundColor: primary ? '#1890ff' : '#f0f0f0',
|
||||
color: primary ? 'white' : '#666',
|
||||
fontSize: '14px',
|
||||
cursor: 'pointer',
|
||||
}),
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
{/* 通话类型选择 */}
|
||||
<div style={styles.header}>
|
||||
<div style={styles.callTypeSelector}>
|
||||
<button
|
||||
style={styles.callTypeButton(callType === CallType.VOICE)}
|
||||
onClick={() => handleCallTypeChange(CallType.VOICE)}
|
||||
disabled={isConnected}
|
||||
>
|
||||
📞 语音通话
|
||||
</button>
|
||||
<button
|
||||
style={styles.callTypeButton(callType === CallType.VIDEO)}
|
||||
onClick={() => handleCallTypeChange(CallType.VIDEO)}
|
||||
disabled={isConnected}
|
||||
>
|
||||
📹 视频通话
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={styles.statusRow}>
|
||||
<div style={styles.statusIndicator}>
|
||||
<div style={styles.statusDot}></div>
|
||||
<span style={styles.statusText}>
|
||||
{isConnected ? '通话中' : '未连接'}
|
||||
</span>
|
||||
</div>
|
||||
<div style={styles.costInfo}>
|
||||
<div style={styles.duration}>{formatDuration(callDuration)}</div>
|
||||
<div style={styles.currentCost}>¥{formatCost(currentCost)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 计费信息 */}
|
||||
<div style={styles.billingInfo}>
|
||||
<div style={styles.billingTitle}>翻译服务选择</div>
|
||||
|
||||
<div style={styles.translationTypeSelector}>
|
||||
{callType === CallType.VOICE && (
|
||||
<button
|
||||
style={styles.translationTypeButton(translationType === TranslationType.TEXT)}
|
||||
onClick={() => handleTranslationTypeChange(TranslationType.TEXT)}
|
||||
disabled={isConnected}
|
||||
>
|
||||
<div>💬 实时文字翻译</div>
|
||||
<div style={styles.rateInfo}>
|
||||
{billingRule && `¥${formatCost(billingRule.pricePerMinute)}/分钟`}
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{callType === CallType.VIDEO && (
|
||||
<>
|
||||
<button
|
||||
style={styles.translationTypeButton(translationType === TranslationType.SIGN_LANGUAGE)}
|
||||
onClick={() => handleTranslationTypeChange(TranslationType.SIGN_LANGUAGE)}
|
||||
disabled={isConnected}
|
||||
>
|
||||
<div>👋 虚拟人手语翻译</div>
|
||||
<div style={styles.rateInfo}>
|
||||
{billingRule && `¥${formatCost(billingRule.pricePerMinute)}/分钟`}
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
style={styles.translationTypeButton(translationType === TranslationType.HUMAN_INTERPRETER)}
|
||||
onClick={() => handleTranslationTypeChange(TranslationType.HUMAN_INTERPRETER)}
|
||||
disabled={isConnected}
|
||||
>
|
||||
<div>👨💼 真人翻译员</div>
|
||||
<div style={styles.rateInfo}>
|
||||
{billingRule && `¥${formatCost(billingRule.pricePerMinute)}/分钟 + 翻译员费用`}
|
||||
</div>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 翻译员选择 */}
|
||||
{translationType === TranslationType.HUMAN_INTERPRETER && (
|
||||
<div style={styles.interpreterSelector}>
|
||||
<div style={styles.billingTitle}>选择翻译员</div>
|
||||
{availableInterpreters.map((interpreter) => (
|
||||
<div
|
||||
key={interpreter.id}
|
||||
style={styles.interpreterItem(selectedInterpreter?.id === interpreter.id)}
|
||||
onClick={() => handleInterpreterSelect(interpreter)}
|
||||
>
|
||||
<div>{interpreter.avatar}</div>
|
||||
<div style={styles.interpreterInfo}>
|
||||
<div style={styles.interpreterName}>{interpreter.name}</div>
|
||||
<div style={styles.interpreterDetails}>
|
||||
{interpreter.languages.join(', ')} | ⭐ {interpreter.rating}
|
||||
</div>
|
||||
</div>
|
||||
<div style={styles.interpreterRate}>
|
||||
¥{formatCost(interpreter.pricePerMinute)}/分钟
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 语言选择器 */}
|
||||
<div style={styles.languageSelector}>
|
||||
<div style={styles.languageRow}>
|
||||
<select
|
||||
style={styles.languageSelect}
|
||||
value={selectedLanguages.from}
|
||||
onChange={(e) => setSelectedLanguages({...selectedLanguages, from: e.target.value})}
|
||||
disabled={isConnected}
|
||||
>
|
||||
{languages.map(lang => (
|
||||
<option key={lang.code} value={lang.code}>
|
||||
{lang.flag} {lang.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<button style={styles.swapButton} onClick={swapLanguages} disabled={isConnected}>
|
||||
🔄
|
||||
</button>
|
||||
|
||||
<select
|
||||
style={styles.languageSelect}
|
||||
value={selectedLanguages.to}
|
||||
onChange={(e) => setSelectedLanguages({...selectedLanguages, to: e.target.value})}
|
||||
disabled={isConnected}
|
||||
>
|
||||
{languages.map(lang => (
|
||||
<option key={lang.code} value={lang.code}>
|
||||
{lang.flag} {lang.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 控制按钮 */}
|
||||
<div style={styles.controlButtons}>
|
||||
<button
|
||||
style={{...styles.controlButton, ...styles.connectButton}}
|
||||
onClick={isConnected ? handleDisconnect : handleConnect}
|
||||
>
|
||||
{isConnected ? '📞' : (callType === CallType.VIDEO ? '📹' : '📱')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 翻译历史 */}
|
||||
<div style={styles.translationContainer}>
|
||||
<h3 style={styles.translationTitle}>
|
||||
{translationType === TranslationType.TEXT ? '实时翻译' :
|
||||
translationType === TranslationType.SIGN_LANGUAGE ? '手语翻译' : '翻译员服务'}
|
||||
</h3>
|
||||
{translationHistory.map((item, index) => (
|
||||
<div key={index} style={styles.translationItem}>
|
||||
<div style={styles.translationTime}>{item.time}</div>
|
||||
<div style={{...styles.translationText, ...styles.originalText}}>
|
||||
{item.original}
|
||||
</div>
|
||||
<div style={{...styles.translationText, ...styles.translatedText}}>
|
||||
{item.translated}
|
||||
</div>
|
||||
<div style={styles.speakerTag}>
|
||||
{item.speaker === 'you' ? '您' : '对方'}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 低余额警告 */}
|
||||
{showLowBalanceWarning && (
|
||||
<div style={styles.warningModal}>
|
||||
<div style={styles.warningContent}>
|
||||
<div style={styles.warningTitle}>⚠️ 余额不足警告</div>
|
||||
<div style={styles.warningText}>
|
||||
您的账户余额即将不足，可能无法维持通话超过5分钟。
|
||||
建议立即充值以避免通话中断。
|
||||
</div>
|
||||
<div style={styles.warningButtons}>
|
||||
<button
|
||||
style={styles.warningButton(false)}
|
||||
onClick={() => setShowLowBalanceWarning(false)}
|
||||
>
|
||||
继续通话
|
||||
</button>
|
||||
<button
|
||||
style={styles.warningButton(true)}
|
||||
onClick={() => {
|
||||
setShowLowBalanceWarning(false);
|
||||
navigate('/mobile/recharge');
|
||||
}}
|
||||
>
|
||||
立即充值
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileCall;
|
||||
407
src/pages/mobile/Documents.tsx
Normal file
407
src/pages/mobile/Documents.tsx
Normal file
@ -0,0 +1,407 @@
|
||||
import { FC, useState } from 'react';
|
||||
|
||||
interface Document {
|
||||
id: string;
|
||||
name: string;
|
||||
size: string;
|
||||
status: 'uploading' | 'processing' | 'completed' | 'failed';
|
||||
progress: number;
|
||||
originalLanguage: string;
|
||||
targetLanguage: string;
|
||||
uploadTime: string;
|
||||
}
|
||||
|
||||
const MobileDocuments: FC = () => {
|
||||
const [documents, setDocuments] = useState<Document[]>([
|
||||
{
|
||||
id: '1',
|
||||
name: '商业合同.pdf',
|
||||
size: '2.3 MB',
|
||||
status: 'completed',
|
||||
progress: 100,
|
||||
originalLanguage: 'zh-CN',
|
||||
targetLanguage: 'en-US',
|
||||
uploadTime: '2024-01-15 14:30',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '技术文档.docx',
|
||||
size: '1.8 MB',
|
||||
status: 'processing',
|
||||
progress: 65,
|
||||
originalLanguage: 'en-US',
|
||||
targetLanguage: 'zh-CN',
|
||||
uploadTime: '2024-01-15 15:20',
|
||||
},
|
||||
]);
|
||||
|
||||
const [selectedLanguages, setSelectedLanguages] = useState({
|
||||
from: 'zh-CN',
|
||||
to: 'en-US',
|
||||
});
|
||||
|
||||
const languages = [
|
||||
{ code: 'zh-CN', name: '中文', flag: '🇨🇳' },
|
||||
{ code: 'en-US', name: 'English', flag: '🇺🇸' },
|
||||
{ code: 'ja-JP', name: '日本語', flag: '🇯🇵' },
|
||||
{ code: 'ko-KR', name: '한국어', flag: '🇰🇷' },
|
||||
{ code: 'es-ES', name: 'Español', flag: '🇪🇸' },
|
||||
{ code: 'fr-FR', name: 'Français', flag: '🇫🇷' },
|
||||
{ code: 'de-DE', name: 'Deutsch', flag: '🇩🇪' },
|
||||
];
|
||||
|
||||
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = event.target.files;
|
||||
if (files && files.length > 0) {
|
||||
const file = files[0];
|
||||
const newDocument: Document = {
|
||||
id: Date.now().toString(),
|
||||
name: file.name,
|
||||
size: `${(file.size / 1024 / 1024).toFixed(1)} MB`,
|
||||
status: 'uploading',
|
||||
progress: 0,
|
||||
originalLanguage: selectedLanguages.from,
|
||||
targetLanguage: selectedLanguages.to,
|
||||
uploadTime: new Date().toLocaleString('zh-CN'),
|
||||
};
|
||||
|
||||
setDocuments(prev => [newDocument, ...prev]);
|
||||
|
||||
// 模拟上传进度
|
||||
simulateUpload(newDocument.id);
|
||||
}
|
||||
};
|
||||
|
||||
const simulateUpload = (docId: string) => {
|
||||
let progress = 0;
|
||||
const interval = setInterval(() => {
|
||||
progress += Math.random() * 15;
|
||||
if (progress >= 100) {
|
||||
progress = 100;
|
||||
setDocuments(prev => prev.map(doc =>
|
||||
doc.id === docId
|
||||
? { ...doc, status: 'processing', progress: 0 }
|
||||
: doc
|
||||
));
|
||||
clearInterval(interval);
|
||||
simulateProcessing(docId);
|
||||
} else {
|
||||
setDocuments(prev => prev.map(doc =>
|
||||
doc.id === docId
|
||||
? { ...doc, progress: Math.floor(progress) }
|
||||
: doc
|
||||
));
|
||||
}
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const simulateProcessing = (docId: string) => {
|
||||
let progress = 0;
|
||||
const interval = setInterval(() => {
|
||||
progress += Math.random() * 10;
|
||||
if (progress >= 100) {
|
||||
progress = 100;
|
||||
setDocuments(prev => prev.map(doc =>
|
||||
doc.id === docId
|
||||
? { ...doc, status: 'completed', progress: 100 }
|
||||
: doc
|
||||
));
|
||||
clearInterval(interval);
|
||||
} else {
|
||||
setDocuments(prev => prev.map(doc =>
|
||||
doc.id === docId
|
||||
? { ...doc, progress: Math.floor(progress) }
|
||||
: doc
|
||||
));
|
||||
}
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const getStatusText = (status: Document['status']) => {
|
||||
switch (status) {
|
||||
case 'uploading': return '上传中';
|
||||
case 'processing': return '翻译中';
|
||||
case 'completed': return '已完成';
|
||||
case 'failed': return '失败';
|
||||
default: return '';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: Document['status']) => {
|
||||
switch (status) {
|
||||
case 'uploading': return '#1890ff';
|
||||
case 'processing': return '#fa8c16';
|
||||
case 'completed': return '#52c41a';
|
||||
case 'failed': return '#ff4d4f';
|
||||
default: return '#666';
|
||||
}
|
||||
};
|
||||
|
||||
const swapLanguages = () => {
|
||||
setSelectedLanguages({
|
||||
from: selectedLanguages.to,
|
||||
to: selectedLanguages.from,
|
||||
});
|
||||
};
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
padding: '16px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
minHeight: '100%',
|
||||
},
|
||||
uploadSection: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '20px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
uploadTitle: {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '16px',
|
||||
textAlign: 'center' as const,
|
||||
},
|
||||
languageSelector: {
|
||||
marginBottom: '20px',
|
||||
},
|
||||
languageRow: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '12px',
|
||||
},
|
||||
languageSelect: {
|
||||
flex: 1,
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #d9d9d9',
|
||||
backgroundColor: 'white',
|
||||
fontSize: '14px',
|
||||
},
|
||||
swapButton: {
|
||||
margin: '0 12px',
|
||||
padding: '8px',
|
||||
borderRadius: '20px',
|
||||
border: 'none',
|
||||
backgroundColor: '#f0f8ff',
|
||||
cursor: 'pointer',
|
||||
fontSize: '16px',
|
||||
},
|
||||
uploadArea: {
|
||||
border: '2px dashed #d9d9d9',
|
||||
borderRadius: '8px',
|
||||
padding: '40px 20px',
|
||||
textAlign: 'center' as const,
|
||||
backgroundColor: '#fafafa',
|
||||
cursor: 'pointer',
|
||||
transition: 'border-color 0.3s ease',
|
||||
},
|
||||
uploadIcon: {
|
||||
fontSize: '48px',
|
||||
marginBottom: '12px',
|
||||
color: '#1890ff',
|
||||
},
|
||||
uploadText: {
|
||||
fontSize: '16px',
|
||||
color: '#666',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
uploadSubtext: {
|
||||
fontSize: '14px',
|
||||
color: '#999',
|
||||
},
|
||||
hiddenInput: {
|
||||
display: 'none',
|
||||
},
|
||||
documentsSection: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
documentItem: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
marginBottom: '12px',
|
||||
},
|
||||
documentIcon: {
|
||||
fontSize: '24px',
|
||||
marginRight: '12px',
|
||||
},
|
||||
documentInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
documentName: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '500' as const,
|
||||
color: '#333',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
documentDetails: {
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
documentLanguages: {
|
||||
fontSize: '12px',
|
||||
color: '#1890ff',
|
||||
},
|
||||
documentStatus: {
|
||||
textAlign: 'right' as const,
|
||||
},
|
||||
statusText: {
|
||||
fontSize: '12px',
|
||||
fontWeight: '500' as const,
|
||||
marginBottom: '4px',
|
||||
},
|
||||
progressBar: {
|
||||
width: '60px',
|
||||
height: '4px',
|
||||
backgroundColor: '#f0f0f0',
|
||||
borderRadius: '2px',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressFill: {
|
||||
height: '100%',
|
||||
backgroundColor: '#1890ff',
|
||||
transition: 'width 0.3s ease',
|
||||
},
|
||||
actionButton: {
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px',
|
||||
border: 'none',
|
||||
backgroundColor: '#1890ff',
|
||||
color: 'white',
|
||||
fontSize: '12px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '4px',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
{/* 上传区域 */}
|
||||
<div style={styles.uploadSection}>
|
||||
<h2 style={styles.uploadTitle}>📄 文档翻译</h2>
|
||||
|
||||
{/* 语言选择 */}
|
||||
<div style={styles.languageSelector}>
|
||||
<div style={styles.languageRow}>
|
||||
<select
|
||||
style={styles.languageSelect}
|
||||
value={selectedLanguages.from}
|
||||
onChange={(e) => setSelectedLanguages({...selectedLanguages, from: e.target.value})}
|
||||
>
|
||||
{languages.map(lang => (
|
||||
<option key={lang.code} value={lang.code}>
|
||||
{lang.flag} {lang.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<button style={styles.swapButton} onClick={swapLanguages}>
|
||||
🔄
|
||||
</button>
|
||||
|
||||
<select
|
||||
style={styles.languageSelect}
|
||||
value={selectedLanguages.to}
|
||||
onChange={(e) => setSelectedLanguages({...selectedLanguages, to: e.target.value})}
|
||||
>
|
||||
{languages.map(lang => (
|
||||
<option key={lang.code} value={lang.code}>
|
||||
{lang.flag} {lang.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 上传区域 */}
|
||||
<label style={styles.uploadArea}>
|
||||
<input
|
||||
type="file"
|
||||
style={styles.hiddenInput}
|
||||
accept=".pdf,.doc,.docx,.txt"
|
||||
onChange={handleFileUpload}
|
||||
/>
|
||||
<div style={styles.uploadIcon}>📁</div>
|
||||
<div style={styles.uploadText}>点击上传文档</div>
|
||||
<div style={styles.uploadSubtext}>
|
||||
支持 PDF、DOC、DOCX、TXT 格式
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* 文档列表 */}
|
||||
<div style={styles.documentsSection}>
|
||||
<h3 style={styles.sectionTitle}>我的文档</h3>
|
||||
|
||||
{documents.length === 0 ? (
|
||||
<div style={{ textAlign: 'center', padding: '40px', color: '#999' }}>
|
||||
暂无文档，请上传您的第一个文档
|
||||
</div>
|
||||
) : (
|
||||
documents.map((doc) => (
|
||||
<div key={doc.id} style={styles.documentItem}>
|
||||
<div style={styles.documentIcon}>
|
||||
{doc.name.endsWith('.pdf') ? '📄' : '📝'}
|
||||
</div>
|
||||
|
||||
<div style={styles.documentInfo}>
|
||||
<div style={styles.documentName}>{doc.name}</div>
|
||||
<div style={styles.documentDetails}>
|
||||
{doc.size} • {doc.uploadTime}
|
||||
</div>
|
||||
<div style={styles.documentLanguages}>
|
||||
{languages.find(l => l.code === doc.originalLanguage)?.flag} → {' '}
|
||||
{languages.find(l => l.code === doc.targetLanguage)?.flag}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={styles.documentStatus}>
|
||||
<div style={{
|
||||
...styles.statusText,
|
||||
color: getStatusColor(doc.status)
|
||||
}}>
|
||||
{getStatusText(doc.status)}
|
||||
</div>
|
||||
|
||||
{doc.status !== 'completed' && (
|
||||
<div style={styles.progressBar}>
|
||||
<div
|
||||
style={{
|
||||
...styles.progressFill,
|
||||
width: `${doc.progress}%`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{doc.status === 'completed' && (
|
||||
<button style={styles.actionButton}>
|
||||
下载
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileDocuments;
|
||||
388
src/pages/mobile/Home.tsx
Normal file
388
src/pages/mobile/Home.tsx
Normal file
@ -0,0 +1,388 @@
|
||||
import { FC, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { BillingService } from '../../services/billingService';
|
||||
import { AppointmentService } from '../../services/appointmentService';
|
||||
import { UserType, UserAccount, Appointment } from '../../types/billing';
|
||||
|
||||
const MobileHome: FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [userAccount, setUserAccount] = useState<UserAccount | null>(null);
|
||||
const [upcomingAppointments, setUpcomingAppointments] = useState<Appointment[]>([]);
|
||||
const billingService = BillingService.getInstance();
|
||||
const appointmentService = AppointmentService.getInstance();
|
||||
|
||||
useEffect(() => {
|
||||
// 模拟用户账户数据
|
||||
const mockAccount: UserAccount = {
|
||||
id: 'user_1',
|
||||
userType: UserType.INDIVIDUAL,
|
||||
balance: 5000, // 50元
|
||||
};
|
||||
|
||||
billingService.setUserAccount(mockAccount);
|
||||
setUserAccount(mockAccount);
|
||||
|
||||
// 获取即将到来的预约
|
||||
const appointments = appointmentService.getUpcomingAppointments('user_1', 3);
|
||||
setUpcomingAppointments(appointments);
|
||||
}, []);
|
||||
|
||||
const quickActions = [
|
||||
{
|
||||
id: 1,
|
||||
title: '语音通话',
|
||||
description: '发起实时语音翻译通话',
|
||||
icon: '📞',
|
||||
color: '#52c41a',
|
||||
action: () => navigate('/mobile/call?type=voice'),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '视频通话',
|
||||
description: '发起视频通话和手语翻译',
|
||||
icon: '📹',
|
||||
color: '#1890ff',
|
||||
action: () => navigate('/mobile/call?type=video'),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '预约通话',
|
||||
description: '预约专业翻译员服务',
|
||||
icon: '📅',
|
||||
color: '#722ed1',
|
||||
action: () => navigate('/mobile/appointment'),
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '充值',
|
||||
description: '账户余额充值',
|
||||
icon: '💰',
|
||||
color: '#fa8c16',
|
||||
action: () => navigate('/mobile/recharge'),
|
||||
},
|
||||
];
|
||||
|
||||
const recentActivities = [
|
||||
{
|
||||
id: 1,
|
||||
type: 'call',
|
||||
title: '与 John Smith 的通话',
|
||||
time: '2小时前',
|
||||
status: '已完成',
|
||||
cost: '¥15.50',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
type: 'appointment',
|
||||
title: '商务会议翻译',
|
||||
time: '明天 14:00',
|
||||
status: '已预约',
|
||||
cost: '¥180.00',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
type: 'call',
|
||||
title: '医疗咨询翻译',
|
||||
time: '2天前',
|
||||
status: '已完成',
|
||||
cost: '¥32.00',
|
||||
},
|
||||
];
|
||||
|
||||
const formatBalance = (balance: number) => {
|
||||
return (balance / 100).toFixed(2);
|
||||
};
|
||||
|
||||
const getActivityIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'call': return '📞';
|
||||
case 'appointment': return '📅';
|
||||
case 'recharge': return '💰';
|
||||
default: return '📋';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case '已完成': return '#52c41a';
|
||||
case '已预约': return '#1890ff';
|
||||
case '进行中': return '#fa8c16';
|
||||
case '已取消': return '#ff4d4f';
|
||||
default: return '#666';
|
||||
}
|
||||
};
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
padding: '16px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
minHeight: '100%',
|
||||
},
|
||||
balanceCard: {
|
||||
backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
borderRadius: '16px',
|
||||
padding: '20px',
|
||||
marginBottom: '20px',
|
||||
color: 'white',
|
||||
boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)',
|
||||
},
|
||||
balanceTitle: {
|
||||
fontSize: '14px',
|
||||
opacity: 0.9,
|
||||
marginBottom: '8px',
|
||||
},
|
||||
balanceAmount: {
|
||||
fontSize: '32px',
|
||||
fontWeight: '700' as const,
|
||||
marginBottom: '4px',
|
||||
},
|
||||
balanceSubtitle: {
|
||||
fontSize: '12px',
|
||||
opacity: 0.8,
|
||||
},
|
||||
userTypeTag: {
|
||||
position: 'absolute' as const,
|
||||
top: '16px',
|
||||
right: '16px',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '12px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '500' as const,
|
||||
},
|
||||
welcomeCard: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '20px',
|
||||
marginBottom: '20px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
welcomeTitle: {
|
||||
fontSize: '24px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#1890ff',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
welcomeSubtitle: {
|
||||
fontSize: '16px',
|
||||
color: '#666',
|
||||
marginBottom: '0',
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '16px',
|
||||
marginTop: '24px',
|
||||
},
|
||||
quickActionsGrid: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||
gap: '12px',
|
||||
marginBottom: '24px',
|
||||
},
|
||||
actionCard: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
textAlign: 'center' as const,
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.2s ease, box-shadow 0.2s ease',
|
||||
position: 'relative' as const,
|
||||
},
|
||||
actionIcon: {
|
||||
fontSize: '32px',
|
||||
marginBottom: '8px',
|
||||
display: 'block',
|
||||
},
|
||||
actionTitle: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
actionDescription: {
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
lineHeight: '1.4',
|
||||
},
|
||||
appointmentPreview: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
marginBottom: '20px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
appointmentTitle: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '12px',
|
||||
},
|
||||
appointmentItem: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '8px 0',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
},
|
||||
appointmentInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
appointmentName: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '500' as const,
|
||||
color: '#333',
|
||||
marginBottom: '2px',
|
||||
},
|
||||
appointmentTime: {
|
||||
fontSize: '12px',
|
||||
color: '#666',
|
||||
},
|
||||
appointmentStatus: {
|
||||
fontSize: '12px',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '10px',
|
||||
backgroundColor: '#e6f7ff',
|
||||
color: '#1890ff',
|
||||
},
|
||||
activityList: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
activityItem: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: '12px 0',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
},
|
||||
activityIcon: {
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '20px',
|
||||
backgroundColor: '#f0f8ff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginRight: '12px',
|
||||
fontSize: '18px',
|
||||
},
|
||||
activityContent: {
|
||||
flex: 1,
|
||||
},
|
||||
activityTitle: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '500' as const,
|
||||
color: '#333',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
activityTime: {
|
||||
fontSize: '12px',
|
||||
color: '#999',
|
||||
},
|
||||
activityRight: {
|
||||
textAlign: 'right' as const,
|
||||
},
|
||||
activityStatus: {
|
||||
fontSize: '12px',
|
||||
fontWeight: '500' as const,
|
||||
marginBottom: '4px',
|
||||
},
|
||||
activityCost: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
},
|
||||
};
|
||||
|
||||
const handleActionPress = (action: () => void) => {
|
||||
action();
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
{/* 余额卡片 */}
|
||||
{userAccount && (
|
||||
<div style={styles.balanceCard}>
|
||||
<div style={styles.userTypeTag}>
|
||||
{userAccount.userType === UserType.INDIVIDUAL ? '个人用户' : '企业用户'}
|
||||
</div>
|
||||
<div style={styles.balanceTitle}>账户余额</div>
|
||||
<div style={styles.balanceAmount}>¥{formatBalance(userAccount.balance)}</div>
|
||||
<div style={styles.balanceSubtitle}>可用于通话和翻译服务</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 快捷操作 */}
|
||||
<h2 style={styles.sectionTitle}>快捷操作</h2>
|
||||
<div style={styles.quickActionsGrid}>
|
||||
{quickActions.map((action) => (
|
||||
<button
|
||||
key={action.id}
|
||||
style={styles.actionCard}
|
||||
onClick={() => handleActionPress(action.action)}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
|
||||
}}
|
||||
>
|
||||
<span style={styles.actionIcon}>{action.icon}</span>
|
||||
<div style={styles.actionTitle}>{action.title}</div>
|
||||
<div style={styles.actionDescription}>{action.description}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 即将到来的预约 */}
|
||||
{upcomingAppointments.length > 0 && (
|
||||
<div style={styles.appointmentPreview}>
|
||||
<div style={styles.appointmentTitle}>即将到来的预约</div>
|
||||
{upcomingAppointments.map((appointment) => (
|
||||
<div key={appointment.id} style={styles.appointmentItem}>
|
||||
<div style={styles.appointmentInfo}>
|
||||
<div style={styles.appointmentName}>{appointment.title}</div>
|
||||
<div style={styles.appointmentTime}>
|
||||
{appointment.scheduledTime.toLocaleDateString()} {appointment.scheduledTime.toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
<div style={styles.appointmentStatus}>{appointment.status}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 最近活动 */}
|
||||
<h2 style={styles.sectionTitle}>最近活动</h2>
|
||||
<div style={styles.activityList}>
|
||||
{recentActivities.map((activity) => (
|
||||
<div key={activity.id} style={styles.activityItem}>
|
||||
<div style={styles.activityIcon}>
|
||||
{getActivityIcon(activity.type)}
|
||||
</div>
|
||||
<div style={styles.activityContent}>
|
||||
<div style={styles.activityTitle}>{activity.title}</div>
|
||||
<div style={styles.activityTime}>{activity.time}</div>
|
||||
</div>
|
||||
<div style={styles.activityRight}>
|
||||
<div style={{...styles.activityStatus, color: getStatusColor(activity.status)}}>
|
||||
{activity.status}
|
||||
</div>
|
||||
<div style={styles.activityCost}>{activity.cost}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileHome;
|
||||
497
src/pages/mobile/Recharge.tsx
Normal file
497
src/pages/mobile/Recharge.tsx
Normal file
@ -0,0 +1,497 @@
|
||||
import { FC, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { BillingService } from '../../services/billingService';
|
||||
import { UserAccount, UserType, RechargeRecord } from '../../types/billing';
|
||||
|
||||
const MobileRecharge: FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const billingService = BillingService.getInstance();
|
||||
|
||||
const [userAccount, setUserAccount] = useState<UserAccount | null>(null);
|
||||
const [selectedAmount, setSelectedAmount] = useState<number>(0);
|
||||
const [customAmount, setCustomAmount] = useState<string>('');
|
||||
const [selectedPayment, setSelectedPayment] = useState<'wechat' | 'alipay' | 'card'>('wechat');
|
||||
const [rechargeHistory, setRechargeHistory] = useState<RechargeRecord[]>([]);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
|
||||
// 预设充值金额（分）
|
||||
const presetAmounts = [
|
||||
{ value: 5000, label: '¥50', bonus: 0, popular: false },
|
||||
{ value: 10000, label: '¥100', bonus: 500, popular: true },
|
||||
{ value: 20000, label: '¥200', bonus: 1500, popular: false },
|
||||
{ value: 50000, label: '¥500', bonus: 5000, popular: false },
|
||||
{ value: 100000, label: '¥1000', bonus: 15000, popular: false },
|
||||
];
|
||||
|
||||
const paymentMethods = [
|
||||
{ id: 'wechat', name: '微信支付', icon: '💚', color: '#07c160' },
|
||||
{ id: 'alipay', name: '支付宝', icon: '💙', color: '#1677ff' },
|
||||
{ id: 'card', name: '银行卡', icon: '💳', color: '#722ed1' },
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const account = billingService.getUserAccount();
|
||||
setUserAccount(account);
|
||||
|
||||
// 模拟充值历史
|
||||
const mockHistory: RechargeRecord[] = [
|
||||
{
|
||||
id: '1',
|
||||
userId: account?.id || '1',
|
||||
amount: 10000,
|
||||
bonus: 500,
|
||||
paymentMethod: 'wechat',
|
||||
status: 'completed',
|
||||
createdAt: new Date(Date.now() - 86400000), // 1天前
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
userId: account?.id || '1',
|
||||
amount: 5000,
|
||||
bonus: 0,
|
||||
paymentMethod: 'alipay',
|
||||
status: 'completed',
|
||||
createdAt: new Date(Date.now() - 7 * 86400000), // 7天前
|
||||
},
|
||||
];
|
||||
setRechargeHistory(mockHistory);
|
||||
}, []);
|
||||
|
||||
const formatCurrency = (cents: number) => {
|
||||
return (cents / 100).toFixed(2);
|
||||
};
|
||||
|
||||
const handleAmountSelect = (amount: number) => {
|
||||
setSelectedAmount(amount);
|
||||
setCustomAmount('');
|
||||
};
|
||||
|
||||
const handleCustomAmountChange = (value: string) => {
|
||||
const numValue = parseFloat(value);
|
||||
if (!isNaN(numValue) && numValue > 0) {
|
||||
setSelectedAmount(Math.round(numValue * 100));
|
||||
setCustomAmount(value);
|
||||
} else {
|
||||
setSelectedAmount(0);
|
||||
setCustomAmount(value);
|
||||
}
|
||||
};
|
||||
|
||||
const getBonus = (amount: number) => {
|
||||
const preset = presetAmounts.find(p => p.value === amount);
|
||||
return preset?.bonus || 0;
|
||||
};
|
||||
|
||||
const getTotalAmount = () => {
|
||||
return selectedAmount + getBonus(selectedAmount);
|
||||
};
|
||||
|
||||
const handleRecharge = async () => {
|
||||
if (selectedAmount < 100) { // 最低1元
|
||||
alert('充值金额不能少于1元');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!userAccount) {
|
||||
alert('用户账户信息未加载');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsProcessing(true);
|
||||
|
||||
try {
|
||||
// 模拟支付处理
|
||||
await new Promise(resolve => setTimeout(resolve, 2000));
|
||||
|
||||
// 执行充值
|
||||
const success = billingService.rechargeAccount(selectedAmount);
|
||||
|
||||
if (success) {
|
||||
// 更新用户账户
|
||||
setUserAccount(billingService.getUserAccount());
|
||||
|
||||
// 添加充值记录
|
||||
const newRecord: RechargeRecord = {
|
||||
id: Date.now().toString(),
|
||||
userId: userAccount.id,
|
||||
amount: selectedAmount,
|
||||
bonus: getBonus(selectedAmount),
|
||||
paymentMethod: selectedPayment,
|
||||
status: 'completed',
|
||||
createdAt: new Date(),
|
||||
};
|
||||
setRechargeHistory(prev => [newRecord, ...prev]);
|
||||
|
||||
alert(`充值成功！到账金额：¥${formatCurrency(getTotalAmount())}`);
|
||||
setSelectedAmount(0);
|
||||
setCustomAmount('');
|
||||
} else {
|
||||
alert('充值失败，请重试');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('充值失败，请重试');
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return '#52c41a';
|
||||
case 'pending':
|
||||
return '#fa8c16';
|
||||
case 'failed':
|
||||
return '#ff4d4f';
|
||||
default:
|
||||
return '#d9d9d9';
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusText = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed':
|
||||
return '成功';
|
||||
case 'pending':
|
||||
return '处理中';
|
||||
case 'failed':
|
||||
return '失败';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
};
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
padding: '16px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
minHeight: '100vh',
|
||||
},
|
||||
header: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
backButton: {
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
marginRight: '12px',
|
||||
},
|
||||
title: {
|
||||
fontSize: '20px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
},
|
||||
balanceCard: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '16px',
|
||||
padding: '20px',
|
||||
marginBottom: '20px',
|
||||
textAlign: 'center' as const,
|
||||
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
balanceLabel: {
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
balanceAmount: {
|
||||
fontSize: '32px',
|
||||
fontWeight: '700' as const,
|
||||
color: '#1890ff',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
userType: {
|
||||
fontSize: '12px',
|
||||
color: '#999',
|
||||
backgroundColor: '#f0f8ff',
|
||||
padding: '4px 12px',
|
||||
borderRadius: '12px',
|
||||
display: 'inline-block',
|
||||
},
|
||||
section: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '16px',
|
||||
padding: '20px',
|
||||
marginBottom: '20px',
|
||||
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
amountGrid: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||
gap: '12px',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
amountCard: (selected: boolean, popular: boolean) => ({
|
||||
padding: '16px',
|
||||
borderRadius: '12px',
|
||||
border: selected ? '2px solid #1890ff' : '2px solid transparent',
|
||||
backgroundColor: selected ? '#e6f7ff' : '#fafafa',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'center' as const,
|
||||
position: 'relative' as const,
|
||||
...(popular && {
|
||||
borderColor: '#fa8c16',
|
||||
backgroundColor: '#fff7e6',
|
||||
}),
|
||||
}),
|
||||
popularBadge: {
|
||||
position: 'absolute' as const,
|
||||
top: '-8px',
|
||||
right: '-8px',
|
||||
backgroundColor: '#fa8c16',
|
||||
color: 'white',
|
||||
fontSize: '10px',
|
||||
padding: '2px 6px',
|
||||
borderRadius: '8px',
|
||||
fontWeight: '500' as const,
|
||||
},
|
||||
amountValue: {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
bonusText: {
|
||||
fontSize: '12px',
|
||||
color: '#52c41a',
|
||||
fontWeight: '500' as const,
|
||||
},
|
||||
customAmountInput: {
|
||||
width: '100%',
|
||||
padding: '12px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #d9d9d9',
|
||||
fontSize: '16px',
|
||||
marginBottom: '16px',
|
||||
},
|
||||
paymentMethods: {
|
||||
display: 'flex',
|
||||
gap: '12px',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
paymentMethod: (selected: boolean, color: string) => ({
|
||||
flex: 1,
|
||||
padding: '16px',
|
||||
borderRadius: '12px',
|
||||
border: selected ? `2px solid ${color}` : '2px solid #f0f0f0',
|
||||
backgroundColor: selected ? `${color}10` : 'white',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'center' as const,
|
||||
}),
|
||||
paymentIcon: {
|
||||
fontSize: '24px',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
paymentName: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '500' as const,
|
||||
color: '#333',
|
||||
},
|
||||
summaryCard: {
|
||||
backgroundColor: '#f8f9fa',
|
||||
borderRadius: '12px',
|
||||
padding: '16px',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
summaryRow: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
summaryLabel: {
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
},
|
||||
summaryValue: {
|
||||
fontSize: '14px',
|
||||
fontWeight: '500' as const,
|
||||
color: '#333',
|
||||
},
|
||||
totalRow: {
|
||||
borderTop: '1px solid #e8e8e8',
|
||||
paddingTop: '8px',
|
||||
marginTop: '8px',
|
||||
},
|
||||
totalValue: {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#1890ff',
|
||||
},
|
||||
rechargeButton: {
|
||||
width: '100%',
|
||||
padding: '16px',
|
||||
borderRadius: '12px',
|
||||
border: 'none',
|
||||
backgroundColor: selectedAmount > 0 && !isProcessing ? '#1890ff' : '#d9d9d9',
|
||||
color: 'white',
|
||||
fontSize: '16px',
|
||||
fontWeight: '600' as const,
|
||||
cursor: selectedAmount > 0 && !isProcessing ? 'pointer' : 'not-allowed',
|
||||
marginBottom: '20px',
|
||||
},
|
||||
historyItem: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '16px 0',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
},
|
||||
historyLeft: {
|
||||
flex: 1,
|
||||
},
|
||||
historyAmount: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
historyDate: {
|
||||
fontSize: '12px',
|
||||
color: '#999',
|
||||
},
|
||||
historyStatus: (status: string) => ({
|
||||
fontSize: '12px',
|
||||
fontWeight: '500' as const,
|
||||
color: getStatusColor(status),
|
||||
backgroundColor: `${getStatusColor(status)}15`,
|
||||
padding: '2px 8px',
|
||||
borderRadius: '8px',
|
||||
}),
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
{/* 头部 */}
|
||||
<div style={styles.header}>
|
||||
<button style={styles.backButton} onClick={() => navigate(-1)}>
|
||||
←
|
||||
</button>
|
||||
<div style={styles.title}>账户充值</div>
|
||||
</div>
|
||||
|
||||
{/* 余额显示 */}
|
||||
<div style={styles.balanceCard}>
|
||||
<div style={styles.balanceLabel}>当前余额</div>
|
||||
<div style={styles.balanceAmount}>
|
||||
¥{userAccount ? formatCurrency(userAccount.balance) : '0.00'}
|
||||
</div>
|
||||
<div style={styles.userType}>
|
||||
{userAccount?.userType === UserType.ENTERPRISE ? '企业用户' : '个人用户'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 充值金额选择 */}
|
||||
<div style={styles.section}>
|
||||
<div style={styles.sectionTitle}>选择充值金额</div>
|
||||
<div style={styles.amountGrid}>
|
||||
{presetAmounts.map((amount) => (
|
||||
<div
|
||||
key={amount.value}
|
||||
style={styles.amountCard(selectedAmount === amount.value, amount.popular)}
|
||||
onClick={() => handleAmountSelect(amount.value)}
|
||||
>
|
||||
{amount.popular && <div style={styles.popularBadge}>推荐</div>}
|
||||
<div style={styles.amountValue}>{amount.label}</div>
|
||||
{amount.bonus > 0 && (
|
||||
<div style={styles.bonusText}>
|
||||
送¥{formatCurrency(amount.bonus)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="number"
|
||||
placeholder="自定义金额（元）"
|
||||
style={styles.customAmountInput}
|
||||
value={customAmount}
|
||||
onChange={(e) => handleCustomAmountChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 支付方式 */}
|
||||
<div style={styles.section}>
|
||||
<div style={styles.sectionTitle}>选择支付方式</div>
|
||||
<div style={styles.paymentMethods}>
|
||||
{paymentMethods.map((method) => (
|
||||
<div
|
||||
key={method.id}
|
||||
style={styles.paymentMethod(
|
||||
selectedPayment === method.id,
|
||||
method.color
|
||||
)}
|
||||
onClick={() => setSelectedPayment(method.id as any)}
|
||||
>
|
||||
<div style={styles.paymentIcon}>{method.icon}</div>
|
||||
<div style={styles.paymentName}>{method.name}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 费用明细 */}
|
||||
{selectedAmount > 0 && (
|
||||
<div style={styles.summaryCard}>
|
||||
<div style={styles.summaryRow}>
|
||||
<span style={styles.summaryLabel}>充值金额</span>
|
||||
<span style={styles.summaryValue}>¥{formatCurrency(selectedAmount)}</span>
|
||||
</div>
|
||||
{getBonus(selectedAmount) > 0 && (
|
||||
<div style={styles.summaryRow}>
|
||||
<span style={styles.summaryLabel}>赠送金额</span>
|
||||
<span style={{...styles.summaryValue, color: '#52c41a'}}>
|
||||
+¥{formatCurrency(getBonus(selectedAmount))}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div style={{...styles.summaryRow, ...styles.totalRow}}>
|
||||
<span style={styles.summaryLabel}>到账金额</span>
|
||||
<span style={styles.totalValue}>¥{formatCurrency(getTotalAmount())}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 充值按钮 */}
|
||||
<button
|
||||
style={styles.rechargeButton}
|
||||
onClick={handleRecharge}
|
||||
disabled={selectedAmount === 0 || isProcessing}
|
||||
>
|
||||
{isProcessing ? '处理中...' : `确认充值 ¥${formatCurrency(selectedAmount)}`}
|
||||
</button>
|
||||
|
||||
{/* 充值历史 */}
|
||||
<div style={styles.section}>
|
||||
<div style={styles.sectionTitle}>充值记录</div>
|
||||
{rechargeHistory.map((record) => (
|
||||
<div key={record.id} style={styles.historyItem}>
|
||||
<div style={styles.historyLeft}>
|
||||
<div style={styles.historyAmount}>
|
||||
+¥{formatCurrency(record.amount + record.bonus)}
|
||||
</div>
|
||||
<div style={styles.historyDate}>
|
||||
{record.createdAt.toLocaleDateString()} {record.createdAt.toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
<div style={styles.historyStatus(record.status)}>
|
||||
{getStatusText(record.status)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileRecharge;
|
||||
357
src/pages/mobile/Settings.tsx
Normal file
357
src/pages/mobile/Settings.tsx
Normal file
@ -0,0 +1,357 @@
|
||||
import { FC, useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { BillingService } from '../../services/billingService';
|
||||
import { UserAccount, UserType } from '../../types/billing';
|
||||
|
||||
const MobileSettings: FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const billingService = BillingService.getInstance();
|
||||
|
||||
const [userAccount, setUserAccount] = useState<UserAccount | null>(null);
|
||||
const [notificationSettings, setNotificationSettings] = useState({
|
||||
callReminder: true,
|
||||
balanceAlert: true,
|
||||
promotions: false,
|
||||
});
|
||||
const [languageSettings, setLanguageSettings] = useState({
|
||||
interface: 'zh-CN',
|
||||
defaultSource: 'zh-CN',
|
||||
defaultTarget: 'en-US',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const account = billingService.getUserAccount();
|
||||
setUserAccount(account);
|
||||
}, []);
|
||||
|
||||
const formatCurrency = (cents: number) => {
|
||||
return `¥${(cents / 100).toFixed(2)}`;
|
||||
};
|
||||
|
||||
const getUserTypeText = (userType: UserType) => {
|
||||
return userType === UserType.INDIVIDUAL ? '个人用户' : '企业用户';
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
const confirmed = confirm('确定要退出登录吗？');
|
||||
if (confirmed) {
|
||||
// 这里应该清除用户登录状态
|
||||
navigate('/login');
|
||||
}
|
||||
};
|
||||
|
||||
const settingsOptions = [
|
||||
{
|
||||
category: '账户信息',
|
||||
items: [
|
||||
{
|
||||
label: '个人资料',
|
||||
value: userAccount?.id || '未设置',
|
||||
icon: '👤',
|
||||
onClick: () => navigate('/mobile/profile'),
|
||||
},
|
||||
{
|
||||
label: '账户类型',
|
||||
value: userAccount ? getUserTypeText(userAccount.userType) : '未知',
|
||||
icon: '🏷️',
|
||||
onClick: () => {},
|
||||
},
|
||||
{
|
||||
label: '账户余额',
|
||||
value: userAccount ? formatCurrency(userAccount.balance) : '¥0.00',
|
||||
icon: '💰',
|
||||
onClick: () => navigate('/mobile/recharge'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: '通话设置',
|
||||
items: [
|
||||
{
|
||||
label: '默认通话类型',
|
||||
value: '语音通话',
|
||||
icon: '📞',
|
||||
onClick: () => {},
|
||||
},
|
||||
{
|
||||
label: '音质设置',
|
||||
value: '高清',
|
||||
icon: '🎵',
|
||||
onClick: () => {},
|
||||
},
|
||||
{
|
||||
label: '自动录音',
|
||||
value: '关闭',
|
||||
icon: '🎙️',
|
||||
onClick: () => {},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: '翻译设置',
|
||||
items: [
|
||||
{
|
||||
label: '默认源语言',
|
||||
value: '中文',
|
||||
icon: '🌐',
|
||||
onClick: () => {},
|
||||
},
|
||||
{
|
||||
label: '默认目标语言',
|
||||
value: 'English',
|
||||
icon: '🌍',
|
||||
onClick: () => {},
|
||||
},
|
||||
{
|
||||
label: '翻译历史',
|
||||
value: '查看记录',
|
||||
icon: '📝',
|
||||
onClick: () => navigate('/mobile/translation-history'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: '通知设置',
|
||||
items: [
|
||||
{
|
||||
label: '通话提醒',
|
||||
value: notificationSettings.callReminder ? '开启' : '关闭',
|
||||
icon: '🔔',
|
||||
onClick: () => setNotificationSettings(prev => ({
|
||||
...prev,
|
||||
callReminder: !prev.callReminder
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: '余额提醒',
|
||||
value: notificationSettings.balanceAlert ? '开启' : '关闭',
|
||||
icon: '⚠️',
|
||||
onClick: () => setNotificationSettings(prev => ({
|
||||
...prev,
|
||||
balanceAlert: !prev.balanceAlert
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: '推广消息',
|
||||
value: notificationSettings.promotions ? '开启' : '关闭',
|
||||
icon: '📢',
|
||||
onClick: () => setNotificationSettings(prev => ({
|
||||
...prev,
|
||||
promotions: !prev.promotions
|
||||
})),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: '其他',
|
||||
items: [
|
||||
{
|
||||
label: '帮助中心',
|
||||
value: '',
|
||||
icon: '❓',
|
||||
onClick: () => navigate('/mobile/help'),
|
||||
},
|
||||
{
|
||||
label: '意见反馈',
|
||||
value: '',
|
||||
icon: '💬',
|
||||
onClick: () => navigate('/mobile/feedback'),
|
||||
},
|
||||
{
|
||||
label: '关于我们',
|
||||
value: 'v1.0.0',
|
||||
icon: 'ℹ️',
|
||||
onClick: () => navigate('/mobile/about'),
|
||||
},
|
||||
{
|
||||
label: '退出登录',
|
||||
value: '',
|
||||
icon: '🚪',
|
||||
onClick: handleLogout,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const styles = {
|
||||
container: {
|
||||
backgroundColor: '#f5f5f5',
|
||||
minHeight: '100vh',
|
||||
paddingBottom: '80px',
|
||||
},
|
||||
header: {
|
||||
backgroundColor: 'white',
|
||||
padding: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid #f0f0f0',
|
||||
},
|
||||
backButton: {
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
marginRight: '12px',
|
||||
},
|
||||
title: {
|
||||
fontSize: '20px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
},
|
||||
userCard: {
|
||||
backgroundColor: 'white',
|
||||
margin: '16px',
|
||||
borderRadius: '16px',
|
||||
padding: '20px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
avatar: {
|
||||
width: '60px',
|
||||
height: '60px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#1890ff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '24px',
|
||||
color: 'white',
|
||||
marginRight: '16px',
|
||||
},
|
||||
userInfo: {
|
||||
flex: 1,
|
||||
},
|
||||
userName: {
|
||||
fontSize: '18px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '4px',
|
||||
},
|
||||
userType: {
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
balance: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#1890ff',
|
||||
},
|
||||
section: {
|
||||
margin: '16px',
|
||||
marginTop: '8px',
|
||||
},
|
||||
sectionTitle: {
|
||||
fontSize: '16px',
|
||||
fontWeight: '600' as const,
|
||||
color: '#333',
|
||||
marginBottom: '12px',
|
||||
paddingLeft: '4px',
|
||||
},
|
||||
settingsGroup: {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||||
},
|
||||
settingItem: {
|
||||
padding: '16px 20px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid #f8f8f8',
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.2s',
|
||||
},
|
||||
settingItemLast: {
|
||||
borderBottom: 'none',
|
||||
},
|
||||
settingIcon: {
|
||||
fontSize: '20px',
|
||||
marginRight: '12px',
|
||||
width: '24px',
|
||||
textAlign: 'center' as const,
|
||||
},
|
||||
settingContent: {
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
settingLabel: {
|
||||
fontSize: '16px',
|
||||
color: '#333',
|
||||
},
|
||||
settingValue: {
|
||||
fontSize: '14px',
|
||||
color: '#666',
|
||||
},
|
||||
arrow: {
|
||||
fontSize: '12px',
|
||||
color: '#ccc',
|
||||
marginLeft: '8px',
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
{/* 头部 */}
|
||||
<div style={styles.header}>
|
||||
<button style={styles.backButton} onClick={() => navigate(-1)}>
|
||||
←
|
||||
</button>
|
||||
<h1 style={styles.title}>设置</h1>
|
||||
</div>
|
||||
|
||||
{/* 用户信息卡片 */}
|
||||
<div style={styles.userCard}>
|
||||
<div style={styles.avatar}>
|
||||
👤
|
||||
</div>
|
||||
<div style={styles.userInfo}>
|
||||
<div style={styles.userName}>
|
||||
{userAccount?.id || '用户'}
|
||||
</div>
|
||||
<div style={styles.userType}>
|
||||
{userAccount ? getUserTypeText(userAccount.userType) : '未知类型'}
|
||||
</div>
|
||||
<div style={styles.balance}>
|
||||
余额: {userAccount ? formatCurrency(userAccount.balance) : '¥0.00'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 设置选项 */}
|
||||
{settingsOptions.map((section, sectionIndex) => (
|
||||
<div key={sectionIndex} style={styles.section}>
|
||||
<div style={styles.sectionTitle}>{section.category}</div>
|
||||
<div style={styles.settingsGroup}>
|
||||
{section.items.map((item, itemIndex) => (
|
||||
<div
|
||||
key={itemIndex}
|
||||
style={{
|
||||
...styles.settingItem,
|
||||
...(itemIndex === section.items.length - 1 ? styles.settingItemLast : {}),
|
||||
}}
|
||||
onClick={item.onClick}
|
||||
>
|
||||
<div style={styles.settingIcon}>{item.icon}</div>
|
||||
<div style={styles.settingContent}>
|
||||
<div style={styles.settingLabel}>{item.label}</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||
{item.value && (
|
||||
<div style={styles.settingValue}>{item.value}</div>
|
||||
)}
|
||||
<div style={styles.arrow}>›</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileSettings;
|
||||
@ -3,12 +3,20 @@ import { AppLayout } from '@/components/Layout';
|
||||
import { Dashboard, UserList, CallList } from '@/pages';
|
||||
import { useAuth } from '@/store';
|
||||
|
||||
// 导入移动端页面 - 使用Web版本
|
||||
import HomeScreen from '@/screens/HomeScreen.web';
|
||||
import CallScreen from '@/screens/CallScreen.web';
|
||||
import DocumentScreen from '@/screens/DocumentScreen.web';
|
||||
import SettingsScreen from '@/screens/SettingsScreen.web';
|
||||
import MobileNavigation from '@/components/MobileNavigation.web';
|
||||
// 导入移动端组件
|
||||
import MobileLayout from '@/components/MobileLayout';
|
||||
import MobileHome from '@/pages/mobile/Home';
|
||||
import MobileCall from '@/pages/mobile/Call';
|
||||
import MobileDocuments from '@/pages/mobile/Documents';
|
||||
import MobileSettings from '@/pages/mobile/Settings';
|
||||
import MobileRecharge from '@/pages/mobile/Recharge';
|
||||
import MobileAppointment from '@/pages/mobile/Appointment';
|
||||
|
||||
// 导入设备重定向组件
|
||||
import DeviceRedirect from '@/components/DeviceRedirect';
|
||||
|
||||
// 导入视频通话测试组件
|
||||
import VideoCallTest from '@/components/VideoCallTest';
|
||||
|
||||
// 导入视频通话页面
|
||||
import { VideoCallPage } from '@/pages/VideoCall/VideoCallPage';
|
||||
@ -24,7 +32,7 @@ const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
|
||||
const PublicRoute = ({ children }: { children: React.ReactNode }) => {
|
||||
const { isAuthenticated } = useAuth();
|
||||
|
||||
return !isAuthenticated ? <>{children}</> : <Navigate to="/dashboard" replace />;
|
||||
return !isAuthenticated ? <>{children}</> : <Navigate to="/" replace />;
|
||||
};
|
||||
|
||||
// 登录页面（临时占位符）
|
||||
@ -57,25 +65,6 @@ const NotFoundPage = () => (
|
||||
</div>
|
||||
);
|
||||
|
||||
// 移动端布局组件
|
||||
const MobileLayout = ({ children }: { children: React.ReactNode }) => (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '100vh',
|
||||
backgroundColor: '#f5f5f5',
|
||||
overflow: 'hidden',
|
||||
position: 'relative'
|
||||
}}>
|
||||
<div style={{
|
||||
height: 'calc(100vh - 80px)',
|
||||
overflow: 'auto'
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
<MobileNavigation />
|
||||
</div>
|
||||
);
|
||||
|
||||
const AppRoutes = () => {
|
||||
return (
|
||||
<Routes>
|
||||
@ -89,6 +78,22 @@ const AppRoutes = () => {
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 视频通话测试路由 - 独立访问 */}
|
||||
<Route
|
||||
path="/video-test"
|
||||
element={<VideoCallTest />}
|
||||
/>
|
||||
|
||||
{/* 根路径 - 智能重定向 */}
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
<PrivateRoute>
|
||||
<DeviceRedirect />
|
||||
</PrivateRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 移动端路由 */}
|
||||
<Route
|
||||
path="/mobile/*"
|
||||
@ -97,10 +102,13 @@ const AppRoutes = () => {
|
||||
<MobileLayout>
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/mobile/home" replace />} />
|
||||
<Route path="/home" element={<HomeScreen />} />
|
||||
<Route path="/call" element={<CallScreen />} />
|
||||
<Route path="/documents" element={<DocumentScreen />} />
|
||||
<Route path="/settings" element={<SettingsScreen />} />
|
||||
<Route path="/home" element={<MobileHome />} />
|
||||
<Route path="/call" element={<MobileCall />} />
|
||||
<Route path="/documents" element={<MobileDocuments />} />
|
||||
<Route path="/settings" element={<MobileSettings />} />
|
||||
<Route path="/recharge" element={<MobileRecharge />} />
|
||||
<Route path="/appointment" element={<MobileAppointment />} />
|
||||
<Route path="/video-test" element={<VideoCallTest />} />
|
||||
<Route path="*" element={<NotFoundPage />} />
|
||||
</Routes>
|
||||
</MobileLayout>
|
||||
@ -115,9 +123,6 @@ const AppRoutes = () => {
|
||||
<PrivateRoute>
|
||||
<AppLayout>
|
||||
<Routes>
|
||||
{/* 默认重定向到仪表板 */}
|
||||
<Route path="/" element={<Navigate to="/dashboard" replace />} />
|
||||
|
||||
{/* 仪表板 */}
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
|
||||
@ -127,6 +132,9 @@ const AppRoutes = () => {
|
||||
{/* 通话记录 */}
|
||||
<Route path="/calls" element={<CallList />} />
|
||||
|
||||
{/* 视频通话测试 */}
|
||||
<Route path="/video-test" element={<VideoCallTest />} />
|
||||
|
||||
{/* 文档管理 - 待实现 */}
|
||||
<Route
|
||||
path="/documents"
|
||||
|
||||
@ -9,20 +9,47 @@ import {
|
||||
Dimensions,
|
||||
StatusBar,
|
||||
} from 'react-native';
|
||||
import { mockLanguages } from '@/utils/mockData';
|
||||
import { Language, CallSession } from '@/types';
|
||||
import { BillingService } from '../services/billingService';
|
||||
import { CallType, TranslationType, UserAccount, UserType } from '../types/billing';
|
||||
|
||||
const { width, height } = Dimensions.get('window');
|
||||
// 模拟语言数据
|
||||
const mockLanguages = [
|
||||
{ code: 'zh', name: '中文', nativeName: '中文' },
|
||||
{ code: 'en', name: 'English', nativeName: 'English' },
|
||||
{ code: 'ja', name: 'Japanese', nativeName: '日本語' },
|
||||
{ code: 'ko', name: 'Korean', nativeName: '한국어' },
|
||||
];
|
||||
|
||||
interface Language {
|
||||
code: string;
|
||||
name: string;
|
||||
nativeName: string;
|
||||
}
|
||||
|
||||
interface CallSession {
|
||||
id: string;
|
||||
userId: string;
|
||||
mode: string;
|
||||
sourceLanguage: string;
|
||||
targetLanguage: string;
|
||||
status: 'active' | 'completed' | 'failed';
|
||||
duration: number;
|
||||
cost: number;
|
||||
twilioRoomId: string;
|
||||
createdAt: string;
|
||||
}
|
||||
|
||||
interface CallScreenProps {
|
||||
route?: {
|
||||
params?: {
|
||||
mode: 'ai' | 'human' | 'video' | 'sign';
|
||||
sourceLanguage: string;
|
||||
targetLanguage: string;
|
||||
mode?: string;
|
||||
sourceLanguage?: string;
|
||||
targetLanguage?: string;
|
||||
};
|
||||
};
|
||||
navigation?: any;
|
||||
navigation?: {
|
||||
goBack: () => void;
|
||||
};
|
||||
}
|
||||
|
||||
const CallScreen: React.FC<CallScreenProps> = ({ route, navigation }) => {
|
||||
@ -33,14 +60,40 @@ const CallScreen: React.FC<CallScreenProps> = ({ route, navigation }) => {
|
||||
const [callDuration, setCallDuration] = useState(0);
|
||||
const [currentCall, setCurrentCall] = useState<CallSession | null>(null);
|
||||
|
||||
// 计费相关状态
|
||||
const [userAccount, setUserAccount] = useState<UserAccount | null>(null);
|
||||
const [currentCost, setCurrentCost] = useState(0);
|
||||
const [billingService] = useState(() => BillingService.getInstance());
|
||||
const [lastBillingMinute, setLastBillingMinute] = useState(0);
|
||||
|
||||
const callTimer = useRef<NodeJS.Timeout | null>(null);
|
||||
const startTime = useRef<Date | null>(null);
|
||||
const billingInterval = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// 从路由参数获取通话配置
|
||||
const callMode = route?.params?.mode || 'ai';
|
||||
const sourceLanguage = route?.params?.sourceLanguage || 'zh';
|
||||
const targetLanguage = route?.params?.targetLanguage || 'en';
|
||||
|
||||
// 根据模式确定通话和翻译类型
|
||||
const getCallType = (mode: string): CallType => {
|
||||
return mode === 'video' || mode === 'sign' ? CallType.VIDEO : CallType.VOICE;
|
||||
};
|
||||
|
||||
const getTranslationType = (mode: string): TranslationType => {
|
||||
switch (mode) {
|
||||
case 'sign':
|
||||
return TranslationType.SIGN_LANGUAGE;
|
||||
case 'human':
|
||||
return TranslationType.HUMAN_INTERPRETER;
|
||||
default:
|
||||
return TranslationType.TEXT;
|
||||
}
|
||||
};
|
||||
|
||||
const callType = getCallType(callMode);
|
||||
const translationType = getTranslationType(callMode);
|
||||
|
||||
// 获取语言信息
|
||||
const getLanguageInfo = (code: string): Language | undefined => {
|
||||
return mockLanguages.find(lang => lang.code === code);
|
||||
@ -49,6 +102,21 @@ const CallScreen: React.FC<CallScreenProps> = ({ route, navigation }) => {
|
||||
const sourceLang = getLanguageInfo(sourceLanguage);
|
||||
const targetLang = getLanguageInfo(targetLanguage);
|
||||
|
||||
// 初始化用户账户
|
||||
useEffect(() => {
|
||||
const initUserAccount = () => {
|
||||
const mockAccount: UserAccount = {
|
||||
id: 'user-123',
|
||||
userType: UserType.INDIVIDUAL,
|
||||
balance: 10000, // 100元
|
||||
};
|
||||
billingService.setUserAccount(mockAccount);
|
||||
setUserAccount(mockAccount);
|
||||
};
|
||||
|
||||
initUserAccount();
|
||||
}, [billingService]);
|
||||
|
||||
useEffect(() => {
|
||||
// 模拟连接过程
|
||||
connectToCall();
|
||||
@ -57,13 +125,100 @@ const CallScreen: React.FC<CallScreenProps> = ({ route, navigation }) => {
|
||||
if (callTimer.current) {
|
||||
clearInterval(callTimer.current);
|
||||
}
|
||||
if (billingInterval.current) {
|
||||
clearInterval(billingInterval.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 检查余额
|
||||
const checkBalance = (): boolean => {
|
||||
if (!userAccount) return false;
|
||||
|
||||
const balanceCheck = billingService.checkBalance(callType, translationType, 1);
|
||||
if (!balanceCheck.sufficient) {
|
||||
Alert.alert(
|
||||
'余额不足',
|
||||
`需要至少 ¥${(balanceCheck.requiredAmount / 100).toFixed(2)} 才能开始通话`,
|
||||
[{ text: '确定', onPress: () => navigation?.goBack() }]
|
||||
);
|
||||
return false;
|
||||
}
|
||||
|
||||
const shouldWarn = billingService.shouldShowLowBalanceWarning(callType, translationType);
|
||||
if (shouldWarn) {
|
||||
Alert.alert('提醒', '账户余额较低，请及时充值');
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
// 开始计费
|
||||
const startBilling = () => {
|
||||
startTime.current = new Date();
|
||||
|
||||
// 每分钟进行计费
|
||||
billingInterval.current = setInterval(() => {
|
||||
if (startTime.current) {
|
||||
const currentMinute = Math.floor((Date.now() - startTime.current.getTime()) / 60000);
|
||||
if (currentMinute > lastBillingMinute) {
|
||||
performBilling(currentMinute);
|
||||
setLastBillingMinute(currentMinute);
|
||||
}
|
||||
}
|
||||
}, 60000);
|
||||
};
|
||||
|
||||
// 执行计费
|
||||
const performBilling = (minute: number) => {
|
||||
if (!userAccount) return;
|
||||
|
||||
try {
|
||||
const cost = billingService.calculateCallCost(callType, translationType, 1);
|
||||
const newTotalCost = currentCost + cost;
|
||||
|
||||
// 检查余额是否足够继续通话
|
||||
const balanceCheck = billingService.checkBalance(callType, translationType, 1);
|
||||
if (!balanceCheck.sufficient) {
|
||||
Alert.alert('余额不足', '通话即将结束', [
|
||||
{ text: '确定', onPress: () => endCall() }
|
||||
]);
|
||||
return;
|
||||
}
|
||||
|
||||
// 扣费
|
||||
const deductSuccess = billingService.deductBalance(cost);
|
||||
if (deductSuccess) {
|
||||
setCurrentCost(newTotalCost);
|
||||
const updatedAccount = billingService.getUserAccount();
|
||||
setUserAccount(updatedAccount);
|
||||
|
||||
const shouldWarn = billingService.shouldShowLowBalanceWarning(callType, translationType);
|
||||
if (shouldWarn) {
|
||||
Alert.alert('提醒', '账户余额较低，请及时充值');
|
||||
}
|
||||
} else {
|
||||
Alert.alert('扣费失败', '通话即将结束', [
|
||||
{ text: '确定', onPress: () => endCall() }
|
||||
]);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('计费失败:', error);
|
||||
Alert.alert('计费系统异常', '通话即将结束', [
|
||||
{ text: '确定', onPress: () => endCall() }
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
||||
const connectToCall = async () => {
|
||||
try {
|
||||
setIsConnecting(true);
|
||||
|
||||
// 检查余额
|
||||
if (!checkBalance()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 模拟获取Twilio token和连接过程
|
||||
// const tokenResponse = await apiService.getTwilioToken(callMode);
|
||||
// const callResponse = await apiService.startCall({
|
||||
@ -77,6 +232,7 @@ const CallScreen: React.FC<CallScreenProps> = ({ route, navigation }) => {
|
||||
setIsConnecting(false);
|
||||
setIsConnected(true);
|
||||
startCallTimer();
|
||||
startBilling(); // 开始计费
|
||||
|
||||
// 创建模拟通话会话
|
||||
const mockCall: CallSession = {
|
||||
@ -117,10 +273,14 @@ const CallScreen: React.FC<CallScreenProps> = ({ route, navigation }) => {
|
||||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
const formatCost = (cents: number): string => {
|
||||
return (cents / 100).toFixed(2);
|
||||
};
|
||||
|
||||
const handleEndCall = () => {
|
||||
Alert.alert(
|
||||
'结束通话',
|
||||
'确定要结束当前通话吗？',
|
||||
`通话时长: ${formatDuration(callDuration)}\n费用: ¥${formatCost(currentCost)}\n确定要结束当前通话吗？`,
|
||||
[
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{
|
||||
@ -139,6 +299,9 @@ const CallScreen: React.FC<CallScreenProps> = ({ route, navigation }) => {
|
||||
if (callTimer.current) {
|
||||
clearInterval(callTimer.current);
|
||||
}
|
||||
if (billingInterval.current) {
|
||||
clearInterval(billingInterval.current);
|
||||
}
|
||||
|
||||
// 在实际应用中调用API结束通话
|
||||
// if (currentCall) {
|
||||
@ -196,19 +359,21 @@ const CallScreen: React.FC<CallScreenProps> = ({ route, navigation }) => {
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar barStyle="light-content" backgroundColor="#1a1a1a" />
|
||||
<View style={styles.connectingContainer}>
|
||||
<Text style={styles.connectingIcon}>📞</Text>
|
||||
<Text style={styles.connectingTitle}>正在连接...</Text>
|
||||
<Text style={styles.connectingSubtitle}>
|
||||
{getModeTitle(callMode)}
|
||||
<Text style={styles.connectingText}>正在连接...</Text>
|
||||
<Text style={styles.modeText}>{getModeTitle(callMode)}</Text>
|
||||
<Text style={styles.languageText}>
|
||||
{sourceLang?.nativeName} → {targetLang?.nativeName}
|
||||
</Text>
|
||||
<View style={styles.languageInfo}>
|
||||
<Text style={styles.languageText}>
|
||||
{sourceLang?.flag} {sourceLang?.nativeName} → {targetLang?.flag} {targetLang?.nativeName}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity style={styles.cancelButton} onPress={() => navigation?.goBack()}>
|
||||
<Text style={styles.cancelButtonText}>取消</Text>
|
||||
</TouchableOpacity>
|
||||
{userAccount && (
|
||||
<View style={styles.balanceInfo}>
|
||||
<Text style={styles.balanceText}>
|
||||
账户余额: ¥{formatCost(userAccount.balance)}
|
||||
</Text>
|
||||
<Text style={styles.rateText}>
|
||||
费率: ¥{formatCost(billingService.calculateCallCost(callType, translationType, 1))}/分钟
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
@ -229,7 +394,15 @@ const CallScreen: React.FC<CallScreenProps> = ({ route, navigation }) => {
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<Text style={styles.duration}>{formatDuration(callDuration)}</Text>
|
||||
<View style={styles.callStats}>
|
||||
<Text style={styles.duration}>{formatDuration(callDuration)}</Text>
|
||||
<Text style={styles.cost}>¥{formatCost(currentCost)}</Text>
|
||||
{userAccount && (
|
||||
<Text style={styles.balance}>
|
||||
余额: ¥{formatCost(userAccount.balance)}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 视频区域 */}
|
||||
@ -265,31 +438,31 @@ const CallScreen: React.FC<CallScreenProps> = ({ route, navigation }) => {
|
||||
{/* 控制按钮 */}
|
||||
<View style={styles.controlsContainer}>
|
||||
<TouchableOpacity
|
||||
style={[styles.controlButton, isMuted && styles.controlButtonActive]}
|
||||
style={[styles.controlButton, isMuted && styles.mutedButton]}
|
||||
onPress={toggleMute}
|
||||
>
|
||||
<Text style={styles.controlButtonText}>
|
||||
{isMuted ? '🔇' : '🔊'}
|
||||
{isMuted ? '🔇' : '🎤'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.endCallButton}
|
||||
onPress={handleEndCall}
|
||||
>
|
||||
<Text style={styles.endCallButtonText}>📞</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{(callMode === 'video' || callMode === 'sign') && (
|
||||
<TouchableOpacity
|
||||
style={[styles.controlButton, !isVideoEnabled && styles.controlButtonActive]}
|
||||
style={[styles.controlButton, !isVideoEnabled && styles.mutedButton]}
|
||||
onPress={toggleVideo}
|
||||
>
|
||||
<Text style={styles.controlButtonText}>
|
||||
{isVideoEnabled ? '📹' : '📵'}
|
||||
{isVideoEnabled ? '📹' : '📷'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.controlButton, styles.endCallButton]}
|
||||
onPress={handleEndCall}
|
||||
>
|
||||
<Text style={styles.controlButtonText}>📞</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
@ -304,82 +477,87 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 32,
|
||||
padding: 20,
|
||||
},
|
||||
connectingIcon: {
|
||||
fontSize: 80,
|
||||
marginBottom: 24,
|
||||
},
|
||||
connectingTitle: {
|
||||
connectingText: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
marginBottom: 8,
|
||||
textAlign: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
connectingSubtitle: {
|
||||
fontSize: 16,
|
||||
modeText: {
|
||||
fontSize: 18,
|
||||
color: '#ccc',
|
||||
marginBottom: 32,
|
||||
textAlign: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
languageInfo: {
|
||||
languageText: {
|
||||
fontSize: 16,
|
||||
color: '#999',
|
||||
marginBottom: 20,
|
||||
},
|
||||
balanceInfo: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
padding: 16,
|
||||
borderRadius: 12,
|
||||
marginBottom: 32,
|
||||
},
|
||||
languageText: {
|
||||
balanceText: {
|
||||
fontSize: 18,
|
||||
color: '#fff',
|
||||
textAlign: 'center',
|
||||
},
|
||||
cancelButton: {
|
||||
backgroundColor: '#F44336',
|
||||
paddingHorizontal: 32,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 24,
|
||||
},
|
||||
cancelButtonText: {
|
||||
color: '#fff',
|
||||
rateText: {
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
color: '#ccc',
|
||||
textAlign: 'center',
|
||||
},
|
||||
topBar: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: 16,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
padding: 20,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
callInfo: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
flex: 1,
|
||||
},
|
||||
modeIcon: {
|
||||
fontSize: 32,
|
||||
fontSize: 24,
|
||||
marginRight: 12,
|
||||
},
|
||||
callDetails: {
|
||||
flex: 1,
|
||||
},
|
||||
callTitle: {
|
||||
fontSize: 16,
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
marginBottom: 2,
|
||||
},
|
||||
languagesText: {
|
||||
fontSize: 14,
|
||||
color: '#ccc',
|
||||
},
|
||||
callStats: {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
duration: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#fff',
|
||||
},
|
||||
cost: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#4CAF50',
|
||||
},
|
||||
balance: {
|
||||
fontSize: 14,
|
||||
color: '#ccc',
|
||||
},
|
||||
videoContainer: {
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
},
|
||||
videoArea: {
|
||||
flex: 1,
|
||||
@ -388,13 +566,15 @@ const styles = StyleSheet.create({
|
||||
remoteVideo: {
|
||||
flex: 1,
|
||||
backgroundColor: '#333',
|
||||
borderRadius: 12,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginBottom: 20,
|
||||
},
|
||||
localVideo: {
|
||||
position: 'absolute',
|
||||
top: 16,
|
||||
right: 16,
|
||||
top: 20,
|
||||
right: 20,
|
||||
width: 120,
|
||||
height: 160,
|
||||
backgroundColor: '#555',
|
||||
@ -403,9 +583,8 @@ const styles = StyleSheet.create({
|
||||
alignItems: 'center',
|
||||
},
|
||||
videoPlaceholder: {
|
||||
color: '#ccc',
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
textAlign: 'center',
|
||||
},
|
||||
audioOnlyArea: {
|
||||
flex: 1,
|
||||
@ -413,52 +592,59 @@ const styles = StyleSheet.create({
|
||||
alignItems: 'center',
|
||||
},
|
||||
audioIcon: {
|
||||
fontSize: 120,
|
||||
marginBottom: 24,
|
||||
fontSize: 80,
|
||||
marginBottom: 20,
|
||||
},
|
||||
audioTitle: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
fontSize: 24,
|
||||
color: '#fff',
|
||||
marginBottom: 32,
|
||||
textAlign: 'center',
|
||||
marginBottom: 40,
|
||||
},
|
||||
waveform: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-end',
|
||||
height: 60,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 4,
|
||||
},
|
||||
waveBar: {
|
||||
width: 4,
|
||||
backgroundColor: '#4CAF50',
|
||||
marginHorizontal: 2,
|
||||
borderRadius: 2,
|
||||
},
|
||||
controlsContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: 32,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
paddingHorizontal: 40,
|
||||
paddingBottom: 40,
|
||||
gap: 40,
|
||||
},
|
||||
controlButton: {
|
||||
width: 64,
|
||||
height: 64,
|
||||
borderRadius: 32,
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
marginHorizontal: 16,
|
||||
},
|
||||
controlButtonActive: {
|
||||
mutedButton: {
|
||||
backgroundColor: '#F44336',
|
||||
},
|
||||
controlButtonText: {
|
||||
fontSize: 24,
|
||||
},
|
||||
endCallButton: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
backgroundColor: '#F44336',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
endCallButtonText: {
|
||||
fontSize: 32,
|
||||
transform: [{ rotate: '135deg' }],
|
||||
},
|
||||
});
|
||||
|
||||
export default CallScreen;
|
||||
export default CallScreen;
|
||||
|
||||
229
src/services/appointmentService.ts
Normal file
229
src/services/appointmentService.ts
Normal file
@ -0,0 +1,229 @@
|
||||
import {
|
||||
Appointment,
|
||||
CallType,
|
||||
TranslationType,
|
||||
Interpreter
|
||||
} from '../types/billing';
|
||||
|
||||
export class AppointmentService {
|
||||
private static instance: AppointmentService;
|
||||
private appointments: Appointment[] = [];
|
||||
private interpreters: Interpreter[] = [];
|
||||
|
||||
private constructor() {
|
||||
this.initializeMockData();
|
||||
}
|
||||
|
||||
public static getInstance(): AppointmentService {
|
||||
if (!AppointmentService.instance) {
|
||||
AppointmentService.instance = new AppointmentService();
|
||||
}
|
||||
return AppointmentService.instance;
|
||||
}
|
||||
|
||||
// 初始化模拟数据
|
||||
private initializeMockData() {
|
||||
// 模拟翻译员数据
|
||||
this.interpreters = [
|
||||
{
|
||||
id: 'interpreter_1',
|
||||
name: '张翻译',
|
||||
avatar: '👩💼',
|
||||
languages: ['zh-CN', 'en-US'],
|
||||
specialties: ['商务', '法律'],
|
||||
rating: 4.8,
|
||||
pricePerMinute: 150,
|
||||
availability: {},
|
||||
isOnline: true,
|
||||
},
|
||||
{
|
||||
id: 'interpreter_2',
|
||||
name: '李翻译',
|
||||
avatar: '👨💼',
|
||||
languages: ['zh-CN', 'ja-JP'],
|
||||
specialties: ['医疗', '技术'],
|
||||
rating: 4.9,
|
||||
pricePerMinute: 180,
|
||||
availability: {},
|
||||
isOnline: false,
|
||||
},
|
||||
{
|
||||
id: 'interpreter_3',
|
||||
name: '王翻译',
|
||||
avatar: '👩🏫',
|
||||
languages: ['zh-CN', 'ko-KR'],
|
||||
specialties: ['教育', '文化'],
|
||||
rating: 4.7,
|
||||
pricePerMinute: 120,
|
||||
availability: {},
|
||||
isOnline: true,
|
||||
},
|
||||
];
|
||||
|
||||
// 模拟预约数据
|
||||
this.appointments = [
|
||||
{
|
||||
id: 'appointment_1',
|
||||
userId: 'user_1',
|
||||
title: '商务会议翻译',
|
||||
description: '与韩国客户的商务洽谈',
|
||||
scheduledTime: new Date(Date.now() + 24 * 60 * 60 * 1000), // 明天
|
||||
duration: 60,
|
||||
callType: CallType.VIDEO,
|
||||
translationType: TranslationType.HUMAN_INTERPRETER,
|
||||
interpreterIds: ['interpreter_3'],
|
||||
estimatedCost: 18000, // 180元
|
||||
status: 'scheduled',
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
},
|
||||
{
|
||||
id: 'appointment_2',
|
||||
userId: 'user_1',
|
||||
title: '医疗咨询',
|
||||
description: '日语医疗咨询翻译',
|
||||
scheduledTime: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000), // 3天后
|
||||
duration: 30,
|
||||
callType: CallType.VIDEO,
|
||||
translationType: TranslationType.HUMAN_INTERPRETER,
|
||||
interpreterIds: ['interpreter_2'],
|
||||
estimatedCost: 5400, // 54元
|
||||
status: 'confirmed',
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// 创建预约
|
||||
createAppointment(appointmentData: Omit<Appointment, 'id' | 'createdAt' | 'updatedAt'>): Appointment {
|
||||
const appointment: Appointment = {
|
||||
...appointmentData,
|
||||
id: `appointment_${Date.now()}`,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
};
|
||||
|
||||
this.appointments.push(appointment);
|
||||
return appointment;
|
||||
}
|
||||
|
||||
// 获取用户预约列表
|
||||
getUserAppointments(userId: string): Appointment[] {
|
||||
return this.appointments.filter(appointment => appointment.userId === userId);
|
||||
}
|
||||
|
||||
// 获取指定日期的预约
|
||||
getAppointmentsByDate(userId: string, date: Date): Appointment[] {
|
||||
const targetDate = new Date(date);
|
||||
targetDate.setHours(0, 0, 0, 0);
|
||||
const nextDate = new Date(targetDate);
|
||||
nextDate.setDate(nextDate.getDate() + 1);
|
||||
|
||||
return this.appointments.filter(appointment =>
|
||||
appointment.userId === userId &&
|
||||
appointment.scheduledTime >= targetDate &&
|
||||
appointment.scheduledTime < nextDate
|
||||
);
|
||||
}
|
||||
|
||||
// 获取指定月份的预约
|
||||
getAppointmentsByMonth(userId: string, year: number, month: number): Appointment[] {
|
||||
return this.appointments.filter(appointment => {
|
||||
const appointmentDate = new Date(appointment.scheduledTime);
|
||||
return appointment.userId === userId &&
|
||||
appointmentDate.getFullYear() === year &&
|
||||
appointmentDate.getMonth() === month;
|
||||
});
|
||||
}
|
||||
|
||||
// 更新预约状态
|
||||
updateAppointmentStatus(appointmentId: string, status: Appointment['status']): boolean {
|
||||
const appointment = this.appointments.find(a => a.id === appointmentId);
|
||||
if (appointment) {
|
||||
appointment.status = status;
|
||||
appointment.updatedAt = new Date();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// 取消预约
|
||||
cancelAppointment(appointmentId: string): boolean {
|
||||
return this.updateAppointmentStatus(appointmentId, 'cancelled');
|
||||
}
|
||||
|
||||
// 获取可用翻译员
|
||||
getAvailableInterpreters(
|
||||
date: Date,
|
||||
languages: string[],
|
||||
specialty?: string
|
||||
): Interpreter[] {
|
||||
const dateKey = date.toISOString().split('T')[0];
|
||||
|
||||
return this.interpreters.filter(interpreter => {
|
||||
// 检查语言支持
|
||||
const hasLanguage = languages.some(lang => interpreter.languages.includes(lang));
|
||||
|
||||
// 检查专业领域
|
||||
const hasSpecialty = !specialty || interpreter.specialties.includes(specialty);
|
||||
|
||||
// 检查可用性（简化版，实际应该检查具体时间段）
|
||||
const isAvailable = interpreter.availability[dateKey] !== false;
|
||||
|
||||
return hasLanguage && hasSpecialty && isAvailable;
|
||||
});
|
||||
}
|
||||
|
||||
// 获取翻译员信息
|
||||
getInterpreter(interpreterId: string): Interpreter | null {
|
||||
return this.interpreters.find(interpreter => interpreter.id === interpreterId) || null;
|
||||
}
|
||||
|
||||
// 获取所有翻译员
|
||||
getAllInterpreters(): Interpreter[] {
|
||||
return this.interpreters;
|
||||
}
|
||||
|
||||
// 检查时间段是否可用
|
||||
isTimeSlotAvailable(date: Date, duration: number, interpreterIds?: string[]): boolean {
|
||||
const endTime = new Date(date.getTime() + duration * 60 * 1000);
|
||||
|
||||
// 检查是否与现有预约冲突
|
||||
const conflicts = this.appointments.filter(appointment => {
|
||||
if (appointment.status === 'cancelled') return false;
|
||||
|
||||
const appointmentStart = new Date(appointment.scheduledTime);
|
||||
const appointmentEnd = new Date(appointmentStart.getTime() + appointment.duration * 60 * 1000);
|
||||
|
||||
// 检查时间是否重叠
|
||||
const timeOverlap = date < appointmentEnd && endTime > appointmentStart;
|
||||
|
||||
// 如果指定了翻译员，检查翻译员是否冲突
|
||||
const interpreterConflict = interpreterIds && appointment.interpreterIds &&
|
||||
interpreterIds.some(id => appointment.interpreterIds!.includes(id));
|
||||
|
||||
return timeOverlap && (!interpreterIds || interpreterConflict);
|
||||
});
|
||||
|
||||
return conflicts.length === 0;
|
||||
}
|
||||
|
||||
// 获取预约详情
|
||||
getAppointment(appointmentId: string): Appointment | null {
|
||||
return this.appointments.find(appointment => appointment.id === appointmentId) || null;
|
||||
}
|
||||
|
||||
// 获取即将到来的预约
|
||||
getUpcomingAppointments(userId: string, limit: number = 5): Appointment[] {
|
||||
const now = new Date();
|
||||
return this.appointments
|
||||
.filter(appointment =>
|
||||
appointment.userId === userId &&
|
||||
appointment.scheduledTime > now &&
|
||||
appointment.status !== 'cancelled'
|
||||
)
|
||||
.sort((a, b) => a.scheduledTime.getTime() - b.scheduledTime.getTime())
|
||||
.slice(0, limit);
|
||||
}
|
||||
}
|
||||
217
src/services/billingService.ts
Normal file
217
src/services/billingService.ts
Normal file
@ -0,0 +1,217 @@
|
||||
import {
|
||||
UserType,
|
||||
CallType,
|
||||
TranslationType,
|
||||
BillingRule,
|
||||
UserAccount,
|
||||
CallRecord,
|
||||
BILLING_CONFIG
|
||||
} from '../types/billing';
|
||||
|
||||
export class BillingService {
|
||||
private static instance: BillingService;
|
||||
private billingRules: BillingRule[] = [];
|
||||
private userAccount: UserAccount | null = null;
|
||||
|
||||
private constructor() {
|
||||
this.initializeDefaultRules();
|
||||
}
|
||||
|
||||
public static getInstance(): BillingService {
|
||||
if (!BillingService.instance) {
|
||||
BillingService.instance = new BillingService();
|
||||
}
|
||||
return BillingService.instance;
|
||||
}
|
||||
|
||||
// 初始化默认计费规则
|
||||
private initializeDefaultRules() {
|
||||
this.billingRules = [
|
||||
// 普通用户规则
|
||||
{
|
||||
id: 'individual_voice_text',
|
||||
name: '语音通话+文字翻译',
|
||||
callType: CallType.VOICE,
|
||||
translationType: TranslationType.TEXT,
|
||||
pricePerMinute: 50,
|
||||
minimumCharge: 50,
|
||||
userType: UserType.INDIVIDUAL,
|
||||
},
|
||||
{
|
||||
id: 'individual_video_sign',
|
||||
name: '视频通话+手语翻译',
|
||||
callType: CallType.VIDEO,
|
||||
translationType: TranslationType.SIGN_LANGUAGE,
|
||||
pricePerMinute: 100,
|
||||
minimumCharge: 100,
|
||||
userType: UserType.INDIVIDUAL,
|
||||
},
|
||||
{
|
||||
id: 'individual_video_human',
|
||||
name: '视频通话+真人翻译',
|
||||
callType: CallType.VIDEO,
|
||||
translationType: TranslationType.HUMAN_INTERPRETER,
|
||||
pricePerMinute: 200,
|
||||
minimumCharge: 200,
|
||||
userType: UserType.INDIVIDUAL,
|
||||
},
|
||||
// 企业用户规则（相同但可能有优惠）
|
||||
{
|
||||
id: 'enterprise_voice_text',
|
||||
name: '语音通话+文字翻译',
|
||||
callType: CallType.VOICE,
|
||||
translationType: TranslationType.TEXT,
|
||||
pricePerMinute: 40, // 企业优惠价
|
||||
minimumCharge: 40,
|
||||
userType: UserType.ENTERPRISE,
|
||||
},
|
||||
{
|
||||
id: 'enterprise_video_sign',
|
||||
name: '视频通话+手语翻译',
|
||||
callType: CallType.VIDEO,
|
||||
translationType: TranslationType.SIGN_LANGUAGE,
|
||||
pricePerMinute: 80,
|
||||
minimumCharge: 80,
|
||||
userType: UserType.ENTERPRISE,
|
||||
},
|
||||
{
|
||||
id: 'enterprise_video_human',
|
||||
name: '视频通话+真人翻译',
|
||||
callType: CallType.VIDEO,
|
||||
translationType: TranslationType.HUMAN_INTERPRETER,
|
||||
pricePerMinute: 160,
|
||||
minimumCharge: 160,
|
||||
userType: UserType.ENTERPRISE,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// 设置用户账户
|
||||
setUserAccount(account: UserAccount) {
|
||||
this.userAccount = account;
|
||||
}
|
||||
|
||||
// 获取用户账户
|
||||
getUserAccount(): UserAccount | null {
|
||||
return this.userAccount;
|
||||
}
|
||||
|
||||
// 获取计费规则
|
||||
getBillingRule(callType: CallType, translationType: TranslationType, userType: UserType): BillingRule | null {
|
||||
return this.billingRules.find(rule =>
|
||||
rule.callType === callType &&
|
||||
rule.translationType === translationType &&
|
||||
rule.userType === userType
|
||||
) || null;
|
||||
}
|
||||
|
||||
// 计算通话费用
|
||||
calculateCallCost(
|
||||
callType: CallType,
|
||||
translationType: TranslationType,
|
||||
durationMinutes: number,
|
||||
interpreterRate?: number
|
||||
): number {
|
||||
if (!this.userAccount) return 0;
|
||||
|
||||
const rule = this.getBillingRule(callType, translationType, this.userAccount.userType);
|
||||
if (!rule) return 0;
|
||||
|
||||
// 向上取整分钟数
|
||||
const roundedMinutes = Math.ceil(durationMinutes);
|
||||
|
||||
// 基础费用
|
||||
let baseCost = Math.max(roundedMinutes * rule.pricePerMinute, rule.minimumCharge);
|
||||
|
||||
// 如果有翻译员费用，额外计算
|
||||
let interpreterCost = 0;
|
||||
if (interpreterRate && translationType === TranslationType.HUMAN_INTERPRETER) {
|
||||
interpreterCost = roundedMinutes * interpreterRate;
|
||||
}
|
||||
|
||||
return baseCost + interpreterCost;
|
||||
}
|
||||
|
||||
// 检查余额是否足够
|
||||
checkBalance(
|
||||
callType: CallType,
|
||||
translationType: TranslationType,
|
||||
minutes: number = 1,
|
||||
interpreterRate?: number
|
||||
): {
|
||||
sufficient: boolean;
|
||||
requiredAmount: number;
|
||||
currentBalance: number;
|
||||
} {
|
||||
if (!this.userAccount) {
|
||||
return { sufficient: false, requiredAmount: 0, currentBalance: 0 };
|
||||
}
|
||||
|
||||
const requiredAmount = this.calculateCallCost(callType, translationType, minutes, interpreterRate);
|
||||
|
||||
return {
|
||||
sufficient: this.userAccount.balance >= requiredAmount,
|
||||
requiredAmount,
|
||||
currentBalance: this.userAccount.balance,
|
||||
};
|
||||
}
|
||||
|
||||
// 检查是否需要低余额警告
|
||||
shouldShowLowBalanceWarning(
|
||||
callType: CallType,
|
||||
translationType: TranslationType,
|
||||
interpreterRate?: number
|
||||
): boolean {
|
||||
const thresholdCost = this.calculateCallCost(
|
||||
callType,
|
||||
translationType,
|
||||
BILLING_CONFIG.LOW_BALANCE_THRESHOLD_MINUTES,
|
||||
interpreterRate
|
||||
);
|
||||
|
||||
return this.userAccount ? this.userAccount.balance < thresholdCost : true;
|
||||
}
|
||||
|
||||
// 扣费
|
||||
deductBalance(amount: number): boolean {
|
||||
if (!this.userAccount || this.userAccount.balance < amount) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.userAccount.balance -= amount;
|
||||
return true;
|
||||
}
|
||||
|
||||
// 充值
|
||||
recharge(amount: number): void {
|
||||
if (this.userAccount) {
|
||||
this.userAccount.balance += amount;
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化金额（分转元）
|
||||
formatAmount(cents: number): string {
|
||||
return `¥${(cents / 100).toFixed(2)}`;
|
||||
}
|
||||
|
||||
// 获取所有计费规则
|
||||
getAllBillingRules(): BillingRule[] {
|
||||
return this.billingRules;
|
||||
}
|
||||
|
||||
// 获取用户可用的计费规则
|
||||
getUserBillingRules(): BillingRule[] {
|
||||
if (!this.userAccount) return [];
|
||||
return this.billingRules.filter(rule => rule.userType === this.userAccount!.userType);
|
||||
}
|
||||
|
||||
// 充值账户
|
||||
rechargeAccount(amount: number): boolean {
|
||||
if (!this.userAccount || amount <= 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.userAccount.balance += amount;
|
||||
return true;
|
||||
}
|
||||
}
|
||||
121
src/types/billing.ts
Normal file
121
src/types/billing.ts
Normal file
@ -0,0 +1,121 @@
|
||||
// 用户类型
|
||||
export enum UserType {
|
||||
INDIVIDUAL = 'individual', // 普通用户
|
||||
ENTERPRISE = 'enterprise', // 企业用户
|
||||
}
|
||||
|
||||
// 通话类型
|
||||
export enum CallType {
|
||||
VOICE = 'voice', // 语音通话
|
||||
VIDEO = 'video', // 视频通话
|
||||
}
|
||||
|
||||
// 翻译类型
|
||||
export enum TranslationType {
|
||||
TEXT = 'text', // 文字翻译
|
||||
SIGN_LANGUAGE = 'sign_language', // 手语翻译
|
||||
HUMAN_INTERPRETER = 'human_interpreter', // 真人翻译
|
||||
}
|
||||
|
||||
// 计费规则
|
||||
export interface BillingRule {
|
||||
id: string;
|
||||
name: string;
|
||||
callType: CallType;
|
||||
translationType: TranslationType;
|
||||
pricePerMinute: number; // 每分钟价格（分）
|
||||
minimumCharge: number; // 最低收费（分）
|
||||
userType: UserType;
|
||||
}
|
||||
|
||||
// 用户账户信息
|
||||
export interface UserAccount {
|
||||
id: string;
|
||||
userType: UserType;
|
||||
balance: number; // 余额（分）
|
||||
enterpriseContractId?: string; // 企业合同ID
|
||||
creditLimit?: number; // 信用额度（分）
|
||||
}
|
||||
|
||||
// 预约信息
|
||||
export interface Appointment {
|
||||
id: string;
|
||||
userId: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
scheduledTime: Date;
|
||||
duration: number; // 预计时长（分钟）
|
||||
callType: CallType;
|
||||
translationType: TranslationType;
|
||||
interpreterIds?: string[]; // 翻译员ID列表
|
||||
estimatedCost: number; // 预估费用（分）
|
||||
status: 'scheduled' | 'confirmed' | 'in_progress' | 'completed' | 'cancelled';
|
||||
createdAt: Date;
|
||||
updatedAt: Date;
|
||||
}
|
||||
|
||||
// 翻译员信息
|
||||
export interface Interpreter {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar?: string;
|
||||
languages: string[]; // 支持的语言
|
||||
specialties: string[]; // 专业领域
|
||||
rating: number; // 评分
|
||||
pricePerMinute: number; // 每分钟价格（分）
|
||||
availability: {
|
||||
[key: string]: boolean; // 日期可用性
|
||||
};
|
||||
isOnline: boolean;
|
||||
}
|
||||
|
||||
// 通话记录
|
||||
export interface CallRecord {
|
||||
id: string;
|
||||
userId: string;
|
||||
appointmentId?: string;
|
||||
callType: CallType;
|
||||
translationType: TranslationType;
|
||||
interpreterIds?: string[];
|
||||
startTime: Date;
|
||||
endTime?: Date;
|
||||
duration: number; // 实际时长（分钟）
|
||||
cost: number; // 实际费用（分）
|
||||
status: 'in_progress' | 'completed' | 'failed';
|
||||
billingDetails: {
|
||||
baseRate: number;
|
||||
interpreterRate?: number;
|
||||
totalMinutes: number;
|
||||
totalCost: number;
|
||||
};
|
||||
}
|
||||
|
||||
// 充值记录
|
||||
export interface RechargeRecord {
|
||||
id: string;
|
||||
userId: string;
|
||||
amount: number; // 充值金额（分）
|
||||
bonus: number; // 赠送金额（分）
|
||||
paymentMethod: string;
|
||||
status: 'pending' | 'completed' | 'failed';
|
||||
createdAt: Date;
|
||||
completedAt?: Date;
|
||||
}
|
||||
|
||||
// 计费配置
|
||||
export const BILLING_CONFIG = {
|
||||
// 默认计费规则
|
||||
DEFAULT_RATES: {
|
||||
[CallType.VOICE]: {
|
||||
[TranslationType.TEXT]: 50, // 0.5元/分钟
|
||||
},
|
||||
[CallType.VIDEO]: {
|
||||
[TranslationType.SIGN_LANGUAGE]: 100, // 1元/分钟
|
||||
[TranslationType.HUMAN_INTERPRETER]: 200, // 2元/分钟
|
||||
},
|
||||
},
|
||||
// 低余额警告阈值（5分钟费用）
|
||||
LOW_BALANCE_THRESHOLD_MINUTES: 5,
|
||||
// 最低余额阈值（1分钟费用）
|
||||
MINIMUM_BALANCE_THRESHOLD_MINUTES: 1,
|
||||
};
|
||||
63
src/utils/deviceDetection.ts
Normal file
63
src/utils/deviceDetection.ts
Normal file
@ -0,0 +1,63 @@
|
||||
/**
|
||||
* 检测是否为移动设备
|
||||
*/
|
||||
export const isMobileDevice = (): boolean => {
|
||||
// 检查用户代理字符串
|
||||
const userAgent = navigator.userAgent;
|
||||
const mobileKeywords = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
|
||||
const isMobileUA = mobileKeywords.test(userAgent);
|
||||
|
||||
// 检查屏幕尺寸
|
||||
const isSmallScreen = window.innerWidth <= 768;
|
||||
|
||||
// 检查触摸支持
|
||||
const hasTouchSupport = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
||||
|
||||
return isMobileUA || (isSmallScreen && hasTouchSupport);
|
||||
};
|
||||
|
||||
/**
|
||||
* 检测是否为平板设备
|
||||
*/
|
||||
export const isTabletDevice = (): boolean => {
|
||||
const userAgent = navigator.userAgent;
|
||||
const tabletKeywords = /iPad|Android(?!.*Mobile)/i;
|
||||
const isTabletUA = tabletKeywords.test(userAgent);
|
||||
|
||||
const isMediumScreen = window.innerWidth > 768 && window.innerWidth <= 1024;
|
||||
|
||||
return isTabletUA || isMediumScreen;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取设备类型
|
||||
*/
|
||||
export const getDeviceType = (): 'mobile' | 'tablet' | 'desktop' => {
|
||||
if (isMobileDevice()) {
|
||||
return 'mobile';
|
||||
}
|
||||
if (isTabletDevice()) {
|
||||
return 'tablet';
|
||||
}
|
||||
return 'desktop';
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取推荐的路由路径
|
||||
*/
|
||||
export const getRecommendedRoute = (): string => {
|
||||
// 暂时让所有设备都重定向到移动端首页，方便测试
|
||||
return '/mobile/home';
|
||||
|
||||
// 原来的逻辑保留备用
|
||||
// const deviceType = getDeviceType();
|
||||
//
|
||||
// switch (deviceType) {
|
||||
// case 'mobile':
|
||||
// case 'tablet':
|
||||
// return '/mobile/home';
|
||||
// case 'desktop':
|
||||
// default:
|
||||
// return '/dashboard';
|
||||
// }
|
||||
};
|
||||
69
start-servers.ps1
Normal file
69
start-servers.ps1
Normal file
@ -0,0 +1,69 @@
|
||||
# Twilio视频通话服务启动脚本
|
||||
Write-Host "🚀 启动 Twilio 视频通话服务..." -ForegroundColor Green
|
||||
|
||||
# 检查Node.js是否安装
|
||||
if (-not (Get-Command node -ErrorAction SilentlyContinue)) {
|
||||
Write-Host "❌ 错误: 未找到 Node.js，请先安装 Node.js" -ForegroundColor Red
|
||||
exit 1
|
||||
}
|
||||
|
||||
# 检查npm是否安装
|
||||
if (-not (Get-Command npm -ErrorAction SilentlyContinue)) {
|
||||
Write-Host "❌ 错误: 未找到 npm，请先安装 npm" -ForegroundColor Red
|
||||
exit 1
|
||||
}
|
||||
|
||||
Write-Host "📦 检查并安装依赖..." -ForegroundColor Yellow
|
||||
|
||||
# 安装前端依赖
|
||||
Write-Host "安装前端依赖..." -ForegroundColor Cyan
|
||||
if (-not (Test-Path "node_modules")) {
|
||||
npm install
|
||||
}
|
||||
|
||||
# 安装后端依赖
|
||||
Write-Host "安装后端依赖..." -ForegroundColor Cyan
|
||||
if (-not (Test-Path "server/node_modules")) {
|
||||
Set-Location server
|
||||
npm install
|
||||
Set-Location ..
|
||||
}
|
||||
|
||||
Write-Host "🎬 启动服务器..." -ForegroundColor Green
|
||||
|
||||
# 启动后端Token服务器
|
||||
Write-Host "启动 Twilio Token 服务器 (端口 3001)..." -ForegroundColor Cyan
|
||||
Start-Process powershell -ArgumentList "-NoExit", "-Command", "cd server; npm start" -WindowStyle Normal
|
||||
|
||||
# 等待2秒让后端启动
|
||||
Start-Sleep -Seconds 2
|
||||
|
||||
# 启动前端开发服务器
|
||||
Write-Host "启动前端开发服务器 (端口 5175)..." -ForegroundColor Cyan
|
||||
Start-Process powershell -ArgumentList "-NoExit", "-Command", "npm run dev" -WindowStyle Normal
|
||||
|
||||
# 等待3秒让服务器启动
|
||||
Start-Sleep -Seconds 3
|
||||
|
||||
Write-Host ""
|
||||
Write-Host "✅ 服务启动完成!" -ForegroundColor Green
|
||||
Write-Host ""
|
||||
Write-Host "📋 访问地址:" -ForegroundColor Yellow
|
||||
Write-Host " 前端应用: http://localhost:5175" -ForegroundColor White
|
||||
Write-Host " 视频测试: http://localhost:5175/video-test" -ForegroundColor White
|
||||
Write-Host " 后端API: http://localhost:3001" -ForegroundColor White
|
||||
Write-Host " 健康检查: http://localhost:3001/health" -ForegroundColor White
|
||||
Write-Host ""
|
||||
Write-Host "🧪 测试步骤:" -ForegroundColor Yellow
|
||||
Write-Host " 1. 访问 http://localhost:5175/video-test" -ForegroundColor White
|
||||
Write-Host " 2. 填写房间名称和用户身份" -ForegroundColor White
|
||||
Write-Host " 3. 点击'加入通话'按钮" -ForegroundColor White
|
||||
Write-Host " 4. 在新标签页中重复步骤1-3测试多人通话" -ForegroundColor White
|
||||
Write-Host ""
|
||||
Write-Host "⚠️ 注意事项:" -ForegroundColor Red
|
||||
Write-Host " - 确保已配置正确的 Twilio 凭证" -ForegroundColor White
|
||||
Write-Host " - 允许浏览器访问摄像头和麦克风" -ForegroundColor White
|
||||
Write-Host " - 使用 HTTPS 或 localhost 以获得最佳体验" -ForegroundColor White
|
||||
Write-Host ""
|
||||
Write-Host "按任意键退出..." -ForegroundColor Gray
|
||||
$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")
|
||||
63
start-services.ps1
Normal file
63
start-services.ps1
Normal file
@ -0,0 +1,63 @@
|
||||
# Twilio 视频通话服务启动脚本
|
||||
# 使用方法: .\start-services.ps1
|
||||
|
||||
Write-Host "🚀 启动 Twilio 视频通话服务..." -ForegroundColor Green
|
||||
Write-Host ""
|
||||
|
||||
# 检查 Node.js 是否安装
|
||||
if (-not (Get-Command node -ErrorAction SilentlyContinue)) {
|
||||
Write-Host "❌ 错误: 未找到 Node.js，请先安装 Node.js" -ForegroundColor Red
|
||||
exit 1
|
||||
}
|
||||
|
||||
# 检查 npm 是否安装
|
||||
if (-not (Get-Command npm -ErrorAction SilentlyContinue)) {
|
||||
Write-Host "❌ 错误: 未找到 npm，请先安装 npm" -ForegroundColor Red
|
||||
exit 1
|
||||
}
|
||||
|
||||
Write-Host "✅ Node.js 和 npm 已安装" -ForegroundColor Green
|
||||
|
||||
# 启动后端服务器
|
||||
Write-Host ""
|
||||
Write-Host "🔧 启动后端 Token 服务器..." -ForegroundColor Yellow
|
||||
Write-Host "端口: 3001" -ForegroundColor Cyan
|
||||
|
||||
Start-Process powershell -ArgumentList "-NoExit", "-Command", "cd server; npm install; npm start" -WindowStyle Normal
|
||||
|
||||
# 等待后端服务器启动
|
||||
Write-Host "⏳ 等待后端服务器启动..." -ForegroundColor Yellow
|
||||
Start-Sleep -Seconds 3
|
||||
|
||||
# 启动前端应用
|
||||
Write-Host ""
|
||||
Write-Host "🔧 启动前端应用..." -ForegroundColor Yellow
|
||||
Write-Host "端口: 5173" -ForegroundColor Cyan
|
||||
|
||||
Start-Process powershell -ArgumentList "-NoExit", "-Command", "npm install; npm run dev" -WindowStyle Normal
|
||||
|
||||
# 等待前端应用启动
|
||||
Write-Host "⏳ 等待前端应用启动..." -ForegroundColor Yellow
|
||||
Start-Sleep -Seconds 5
|
||||
|
||||
Write-Host ""
|
||||
Write-Host "🎉 服务启动完成！" -ForegroundColor Green
|
||||
Write-Host ""
|
||||
Write-Host "📋 访问地址:" -ForegroundColor Cyan
|
||||
Write-Host " • 前端应用: http://localhost:5173" -ForegroundColor White
|
||||
Write-Host " • 后端 API: http://localhost:3001" -ForegroundColor White
|
||||
Write-Host " • 健康检查: http://localhost:3001/health" -ForegroundColor White
|
||||
Write-Host ""
|
||||
Write-Host "🧪 测试页面:" -ForegroundColor Cyan
|
||||
Write-Host " • 设备测试: http://localhost:5173/device-test" -ForegroundColor White
|
||||
Write-Host " • 视频通话: http://localhost:5173/video-call" -ForegroundColor White
|
||||
Write-Host ""
|
||||
Write-Host "⚠️ 注意事项:" -ForegroundColor Yellow
|
||||
Write-Host " 1. 确保已配置正确的 Twilio 凭证" -ForegroundColor White
|
||||
Write-Host " 2. 浏览器需要允许摄像头和麦克风权限" -ForegroundColor White
|
||||
Write-Host " 3. 建议使用 Chrome 浏览器进行测试" -ForegroundColor White
|
||||
Write-Host ""
|
||||
Write-Host "📖 详细测试指南请查看: TWILIO_TEST_GUIDE.md" -ForegroundColor Cyan
|
||||
Write-Host ""
|
||||
Write-Host "按任意键退出..." -ForegroundColor Gray
|
||||
$null = $Host.UI.RawUI.ReadKey("NoEcho,IncludeKeyDown")
|
||||
263
test-status.html
Normal file
263
test-status.html
Normal file
@ -0,0 +1,263 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Twilio 视频通话服务状态检查</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.status-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
margin: 10px 0;
|
||||
border-radius: 8px;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.status-label {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
}
|
||||
.status-indicator {
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.status-success {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
.status-error {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
}
|
||||
.status-pending {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
}
|
||||
.test-button {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.test-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
.test-button:disabled {
|
||||
background-color: #6c757d;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.info-section {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background-color: #e9ecef;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.info-section h3 {
|
||||
margin-top: 0;
|
||||
color: #495057;
|
||||
}
|
||||
.info-section ul {
|
||||
margin: 10px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.info-section li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.quick-links {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.quick-link {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.quick-link:hover {
|
||||
background-color: #0056b3;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎥 Twilio 视频通话服务状态</h1>
|
||||
|
||||
<div class="status-item">
|
||||
<span class="status-label">后端 Token 服务器 (localhost:3001)</span>
|
||||
<div>
|
||||
<span id="backend-status" class="status-indicator status-pending">检查中...</span>
|
||||
<button class="test-button" onclick="checkBackend()">重新检查</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-item">
|
||||
<span class="status-label">前端应用 (localhost:5173)</span>
|
||||
<div>
|
||||
<span id="frontend-status" class="status-indicator status-pending">检查中...</span>
|
||||
<button class="test-button" onclick="checkFrontend()">重新检查</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-item">
|
||||
<span class="status-label">摄像头权限</span>
|
||||
<div>
|
||||
<span id="camera-status" class="status-indicator status-pending">未检查</span>
|
||||
<button class="test-button" onclick="checkCamera()">检查权限</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="status-item">
|
||||
<span class="status-label">麦克风权限</span>
|
||||
<div>
|
||||
<span id="microphone-status" class="status-indicator status-pending">未检查</span>
|
||||
<button class="test-button" onclick="checkMicrophone()">检查权限</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h3>📋 快速测试指南</h3>
|
||||
<ul>
|
||||
<li><strong>步骤 1:</strong> 确保所有服务状态显示为"正常"</li>
|
||||
<li><strong>步骤 2:</strong> 点击"检查权限"按钮允许摄像头和麦克风访问</li>
|
||||
<li><strong>步骤 3:</strong> 使用下方的快速链接访问测试页面</li>
|
||||
<li><strong>步骤 4:</strong> 在两个不同的浏览器标签页中测试多人通话</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="quick-links">
|
||||
<a href="http://localhost:5173" class="quick-link">🏠 主应用</a>
|
||||
<a href="http://localhost:5173/device-test" class="quick-link">🔧 设备测试</a>
|
||||
<a href="http://localhost:5173/video-call" class="quick-link">📹 视频通话</a>
|
||||
<a href="http://localhost:3001/health" class="quick-link">💚 服务器状态</a>
|
||||
</div>
|
||||
|
||||
<div class="info-section">
|
||||
<h3>⚠️ 注意事项</h3>
|
||||
<ul>
|
||||
<li>确保在 <code>server/index.js</code> 中配置了正确的 Twilio 凭证</li>
|
||||
<li>建议使用 Chrome 浏览器进行测试</li>
|
||||
<li>如果遇到 CORS 错误，请检查服务器配置</li>
|
||||
<li>生产环境需要 HTTPS 才能访问摄像头和麦克风</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 检查后端服务器状态
|
||||
async function checkBackend() {
|
||||
const statusElement = document.getElementById('backend-status');
|
||||
statusElement.textContent = '检查中...';
|
||||
statusElement.className = 'status-indicator status-pending';
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:3001/health');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
statusElement.textContent = '正常';
|
||||
statusElement.className = 'status-indicator status-success';
|
||||
} else {
|
||||
throw new Error('服务器响应错误');
|
||||
}
|
||||
} catch (error) {
|
||||
statusElement.textContent = '无法连接';
|
||||
statusElement.className = 'status-indicator status-error';
|
||||
}
|
||||
}
|
||||
|
||||
// 检查前端应用状态
|
||||
async function checkFrontend() {
|
||||
const statusElement = document.getElementById('frontend-status');
|
||||
statusElement.textContent = '检查中...';
|
||||
statusElement.className = 'status-indicator status-pending';
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:5173');
|
||||
if (response.ok) {
|
||||
statusElement.textContent = '正常';
|
||||
statusElement.className = 'status-indicator status-success';
|
||||
} else {
|
||||
throw new Error('前端应用响应错误');
|
||||
}
|
||||
} catch (error) {
|
||||
statusElement.textContent = '无法连接';
|
||||
statusElement.className = 'status-indicator status-error';
|
||||
}
|
||||
}
|
||||
|
||||
// 检查摄像头权限
|
||||
async function checkCamera() {
|
||||
const statusElement = document.getElementById('camera-status');
|
||||
statusElement.textContent = '检查中...';
|
||||
statusElement.className = 'status-indicator status-pending';
|
||||
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
||||
stream.getTracks().forEach(track => track.stop());
|
||||
statusElement.textContent = '已授权';
|
||||
statusElement.className = 'status-indicator status-success';
|
||||
} catch (error) {
|
||||
statusElement.textContent = '权限被拒绝';
|
||||
statusElement.className = 'status-indicator status-error';
|
||||
}
|
||||
}
|
||||
|
||||
// 检查麦克风权限
|
||||
async function checkMicrophone() {
|
||||
const statusElement = document.getElementById('microphone-status');
|
||||
statusElement.textContent = '检查中...';
|
||||
statusElement.className = 'status-indicator status-pending';
|
||||
|
||||
try {
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
stream.getTracks().forEach(track => track.stop());
|
||||
statusElement.textContent = '已授权';
|
||||
statusElement.className = 'status-indicator status-success';
|
||||
} catch (error) {
|
||||
statusElement.textContent = '权限被拒绝';
|
||||
statusElement.className = 'status-indicator status-error';
|
||||
}
|
||||
}
|
||||
|
||||
// 页面加载时自动检查服务状态
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(() => {
|
||||
checkBackend();
|
||||
checkFrontend();
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user