From 5fe9c29d6e91cd902c199abcb37195a627a5683a Mon Sep 17 00:00:00 2001
From: lq
Date: Mon, 7 Jul 2025 16:51:55 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=AE=E5=89=8D=E5=AF=B9=E6=96=B9=E5=8F=AF?=
=?UTF-8?q?=E4=BB=A5=E6=8E=A5=E6=94=B6=E5=88=B0=E9=80=9A=E8=AF=9D=E7=94=B3?=
=?UTF-8?q?=E8=AF=B7=E4=BA=86=EF=BC=88=E6=8E=A5=E7=94=B5=E8=AF=9D=E6=9C=89?=
=?UTF-8?q?=E9=80=9A=E8=AF=9D=E4=B8=AD=E5=88=A4=E6=96=AD=E9=94=99=E8=AF=AF?=
=?UTF-8?q?=E5=AF=BC=E8=87=B4=E9=87=8D=E5=A4=8Dsend-to-user=E8=B7=AF?=
=?UTF-8?q?=E7=94=B1=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 2 +-
src/components/ChatHeader.vue | 104 ++++++-------
src/components/VideoCallComponent.vue | 79 +++++++---
src/composables/useWebSocket.js | 4 +-
src/stores/chat.js | 210 ++++++++++++++++++++++++--
src/utils/request.js | 4 +-
src/views/Chat.vue | 65 +++++++-
7 files changed, 366 insertions(+), 102 deletions(-)
diff --git a/index.html b/index.html
index 8388c4b..b3a8335 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
- Vite + Vue
+ 奶酪-即时通讯-demo
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index 6769a34..da267eb 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -19,6 +19,9 @@
{{ isFriendOnline ? '在线' : '离线' }}
+
+ {{ callStatusText }}
+
@@ -64,62 +67,49 @@
-
-
-
\ No newline at end of file
diff --git a/src/components/VideoCallComponent.vue b/src/components/VideoCallComponent.vue
index 91234d3..bac42dc 100644
--- a/src/components/VideoCallComponent.vue
+++ b/src/components/VideoCallComponent.vue
@@ -22,7 +22,7 @@
{{ callerInfo.name }}
-
{{ callStatus }} {{ formattedDuration }}
+
{{ connectionText }}
@@ -120,12 +120,18 @@
-
-
+
+
+ 对方忙线中
+
+
+
+
+
@@ -205,7 +211,6 @@ const isCameraOn = ref(props.callType === 'video');
const isSpeakerOn = ref(true);
const hasLocalVideo = ref(false);
const hasRemoteVideo = ref(false);
-const connectionText = ref('正在连接...');
const callDuration = ref(0);
const callTimer = ref(null);
const isCameraWorking = ref(true);
@@ -223,6 +228,35 @@ const localVideo = ref(null);
const remoteVideo = ref(null);
const remoteVideoPreview = ref(null);
+// 获取当前通话状态
+const callStatus = computed(() => {
+ return chatStore.callError;
+});
+
+// 连接状态文本
+const connectionText = computed(() => {
+ // 优先使用 chatStore 中的详细状态
+ if (chatStore.callConnectionStatus) {
+ return chatStore.callConnectionStatus;
+ }
+
+ // 处理忙线状态
+ if (chatStore.callError === 'busy') {
+ return '对方忙线中';
+ }
+
+ // 默认状态显示
+ if (props.isIncoming && !isOngoing.value) {
+ return '来电中...';
+ }
+
+ if (isOngoing.value) {
+ return `通话中 ${formattedDuration.value}`;
+ }
+
+ return '正在连接...';
+});
+
// 通话计时器
const startCallTimer = () => {
if (callTimer.value) clearInterval(callTimer.value);
@@ -248,14 +282,6 @@ const containerStyle = computed(() => {
};
});
-// 通话状态
-const callStatus = computed(() => {
- if (props.isIncoming && !isOngoing.value) {
- return '来电中...';
- }
- return '通话中';
-});
-
// 初始化媒体设备
const initializeMedia = async () => {
try {
@@ -267,13 +293,11 @@ const initializeMedia = async () => {
// 获取本地媒体流
await webrtc.getLocalMedia(constraints);
- connectionText.value = '已连接';
startCallTimer();
} catch (error) {
console.error('无法访问媒体设备:', error);
isCameraOn.value = false;
isCameraWorking.value = false;
- connectionText.value = '连接失败';
}
};
@@ -331,7 +355,6 @@ const endCall = () => {
isVisible.value = false;
emit('end-call');
- chatStore.endCall();
};
// 接听通话
@@ -345,7 +368,6 @@ const acceptCall = () => {
const rejectCall = () => {
isVisible.value = false;
emit('reject-call');
- chatStore.rejectCall();
};
// 拖拽功能
@@ -478,7 +500,6 @@ onUnmounted(() => {
+
\ No newline at end of file