{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;
\ No newline at end of file
diff --git a/src/components/MobileNavigation.web.tsx b/src/components/MobileNavigation.web.tsx
index ca755ff..b7edd62 100644
--- a/src/components/MobileNavigation.web.tsx
+++ b/src/components/MobileNavigation.web.tsx
@@ -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 = () => {
diff --git a/src/components/VideoCall/VideoCall.tsx b/src/components/VideoCall/VideoCall.tsx
index 850d058..ec4b1c9 100644
--- a/src/components/VideoCall/VideoCall.tsx
+++ b/src/components/VideoCall/VideoCall.tsx
@@ -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
= ({ participant, isLoca
);
};
-export const VideoCall: React.FC = ({ roomName, identity, onLeave }) => {
+export const VideoCall: React.FC = ({
+ roomName,
+ identity,
+ callType = CallType.VIDEO,
+ translationType = TranslationType.SIGN_LANGUAGE,
+ onLeave,
+ onBillingUpdate
+}) => {
const [room, setRoom] = useState(null);
const [participants, setParticipants] = useState([]);
const [isConnecting, setIsConnecting] = useState(false);
const [isConnected, setIsConnected] = useState(false);
const [audioEnabled, setAudioEnabled] = useState(true);
const [videoEnabled, setVideoEnabled] = useState(true);
+
+ // 计费相关状态
+ const [userAccount, setUserAccount] = useState(null);
+ const [callDuration, setCallDuration] = useState(0);
+ const [currentCost, setCurrentCost] = useState(0);
+ const [billingService] = useState(() => BillingService.getInstance());
+ const [lastBillingMinute, setLastBillingMinute] = useState(0);
+
+ const callStartTime = useRef(null);
+ const durationInterval = useRef(null);
+ const billingInterval = useRef(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 = ({ roomName, identity, onLeav
setIsConnected(true);
setupRoomEventListeners(connectedRoom);
+ startBilling(); // 开始计费
message.success('成功连接到视频通话');
} catch (error) {
@@ -146,6 +304,7 @@ export const VideoCall: React.FC = ({ roomName, identity, onLeav
setIsConnected(false);
setRoom(null);
setParticipants([]);
+ stopBilling(); // 停止计费
message.info('已断开视频通话连接');
});
@@ -157,6 +316,7 @@ export const VideoCall: React.FC = ({ roomName, identity, onLeav
setIsConnected(false);
setRoom(null);
setParticipants([]);
+ stopBilling(); // 停止计费
onLeave?.();
};
@@ -170,22 +330,64 @@ export const VideoCall: React.FC = ({ 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 (
-
+
视频通话
房间: {roomName}
身份: {identity}
+
+
通话类型: {callType === CallType.VIDEO ? '视频通话' : '语音通话'}
+
+
翻译类型: {translationType === TranslationType.SIGN_LANGUAGE ? '手语翻译' : translationType === TranslationType.TEXT ? '文字翻译' : '真人翻译'}
+ {/* 用户账户信息 */}
+ {userAccount && (
+
+
+
+
+
+
+
+
+
+
+ )}
+
@@ -217,6 +419,7 @@ export const VideoCall: React.FC = ({ roomName, identity, onLeav
loading={isConnecting}
onClick={connectToRoom}
style={{ width: '100%' }}
+ disabled={!userAccount}
>
{isConnecting ? '连接中...' : '加入通话'}
@@ -230,9 +433,32 @@ export const VideoCall: React.FC = ({ roomName, identity, onLeav
-
-
视频通话 - {roomName}
-
参与者: {participants.length}
+ {/* 通话信息和计费状态 */}
+
+
+
+ 视频通话 - {roomName}
+ 参与者: {participants.length}
+
+
+
+
+
+ {formatDuration(callDuration)}
+
+
+
+
+
+ ¥{formatCost(currentCost)}
+ {userAccount && (
+
+ (余额: ¥{formatCost(userAccount.balance)})
+
+ )}
+
+
+
@@ -256,37 +482,39 @@ export const VideoCall: React.FC = ({ roomName, identity, onLeav
-
-
-
- : }
- onClick={toggleAudio}
- />
-
-
- }
- onClick={toggleVideo}
- />
-
-
- }
- onClick={leaveRoom}
- />
-
-
+ {/* 控制按钮 */}
+
+
+ : }
+ onClick={toggleAudio}
+ size="large"
+ >
+ {audioEnabled ? '静音' : '取消静音'}
+
+
+ }
+ onClick={toggleVideo}
+ size="large"
+ >
+ {videoEnabled ? '关闭视频' : '开启视频'}
+
+
+ }
+ onClick={leaveRoom}
+ size="large"
+ >
+ 结束通话
+
+
diff --git a/src/components/VideoCallTest.tsx b/src/components/VideoCallTest.tsx
new file mode 100644
index 0000000..929635e
--- /dev/null
+++ b/src/components/VideoCallTest.tsx
@@ -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
(null);
+ const [participants, setParticipants] = useState([]);
+ 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(null);
+ const remoteVideoRef = useRef(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 (
+
+
🎥 Twilio 视频通话测试
+
+ {/* 连接状态 */}
+
+
+ }
+ onClick={testServerConnection}
+ >
+ 测试服务器
+
+
+
+ {/* 视频区域 */}
+
+
+
+
+
+
+
+
+
+ {/* 控制面板 */}
+
+
+
+
+ setRoomName(e.target.value)}
+ prefix={}
+ disabled={isConnected}
+ />
+ setIdentity(e.target.value)}
+ prefix={}
+ disabled={isConnected}
+ />
+
+
+
+
+ {!isConnected ? (
+ }
+ loading={isConnecting}
+ onClick={connectToRoom}
+ size="large"
+ >
+ {isConnecting ? '连接中...' : '加入通话'}
+
+ ) : (
+ <>
+ }
+ onClick={leaveRoom}
+ size="large"
+ >
+ 离开通话
+
+ : }
+ onClick={toggleAudio}
+ >
+ {audioEnabled ? '关闭音频' : '开启音频'}
+
+ }
+ onClick={toggleVideo}
+ >
+ {videoEnabled ? '关闭视频' : '开启视频'}
+
+
+ )}
+
+
+
+
+
+ {/* 参与者列表 */}
+ {participants.length > 0 && (
+
+
+ {participants.map((participant) => (
+
+
+
+
+
+ {participant.identity}
+
+
+ {participant.isLocal ? '本地' : '远程'} |
+ 音频: {participant.audioEnabled ? '开' : '关'} |
+ 视频: {participant.videoEnabled ? '开' : '关'}
+
+
+
+
+
+ ))}
+
+
+ )}
+
+
+
+ {/* 使用说明 */}
+
+
+ 测试步骤：
+ 1. 确保Token服务器已启动（端口3001）
+ 2. 填写房间名称和用户身份
+ 3. 点击"加入通话"按钮
+ 4. 在另一个浏览器标签页中使用相同房间名称测试多人通话
+ 5. 使用音频/视频控制按钮测试功能
+
+
+
+ {/* 头部 */}
+
+
+
预约通话
+
+
+ {/* 通话类型选择 */}
+
+
选择通话类型
+
+
+
+
+
+
+ {/* 日期选择 */}
+
+
选择日期
+
+ {getDateOptions().map((date) => (
+
setSelectedDate(date.value)}
+ >
+
{date.label}
+
{date.weekday}
+
+ ))}
+
+
+
+ {/* 时间选择 */}
+ {selectedDate && (
+
+
选择时间
+
+ {timeSlots.map((time) => {
+ const isAvailable = appointmentService.isTimeSlotAvailable(
+ new Date(`${selectedDate}T${time}:00`),
+ 30
+ );
+ return (
+
+ );
+ })}
+
+
+ )}
+
+ {/* 语言选择 */}
+
+
选择语言
+
+
+
+
+
+
+
+
+
+ {/* 翻译服务选择 */}
+
+
选择翻译服务
+
+ {callType === CallType.VOICE && (
+
+ )}
+
+ {callType === CallType.VIDEO && (
+ <>
+
+
+
+
+ )}
+
+
+ {/* 翻译员选择 */}
+ {translationType === TranslationType.HUMAN_INTERPRETER && (
+
+
选择翻译员
+ {availableInterpreters.map((interpreter) => (
+
setSelectedInterpreter(interpreter)}
+ >
+
{interpreter.avatar}
+
+
{interpreter.name}
+
+ {interpreter.languages.join(', ')} | ⭐ {interpreter.rating} | {interpreter.specialties.join(', ')}
+
+
+ ¥{formatCurrency(interpreter.pricePerMinute)}/分钟
+
+
+
+ ))}
+
+ )}
+
+
+ {/* 备注信息 */}
+