From 27cd042df9aca0383a49f3514bc21958dd890912 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 29 六月 2026 15:42:23 +0800
Subject: [PATCH] 银川 1.联调产品维护页面 2.添加IM即时通讯模块
---
src/views/im/home/components/rtc/rtc-call-inviting.vue | 129 +++++++++++++++++++++++++++++++++++++++++++
1 files changed, 129 insertions(+), 0 deletions(-)
diff --git a/src/views/im/home/components/rtc/rtc-call-inviting.vue b/src/views/im/home/components/rtc/rtc-call-inviting.vue
new file mode 100644
index 0000000..67d58cb
--- /dev/null
+++ b/src/views/im/home/components/rtc/rtc-call-inviting.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { IconifyIcon as Icon } from '#/packages/icons/src'
+
+import { useMediaStreamElement } from '../../composables/useMediaStreamElement'
+import { UserAvatar } from '../user'
+
+const props = defineProps<{
+ cameraEnabled: boolean
+ isGroup?: boolean
+ isVideo: boolean
+ localStream?: MediaStream | null // 鏈湴瑙嗛娴侊紱瑙嗛鍛煎彨棰勮閾哄簳
+ micEnabled: boolean
+ peerAvatar?: string
+ peerNickname?: string
+ speakerEnabled: boolean
+}>()
+
+defineEmits<{
+ cancel: []
+ toggleCamera: []
+ toggleMic: []
+ toggleSpeaker: []
+}>()
+
+const setLocalVideoRef = useMediaStreamElement<HTMLVideoElement>(() => props.localStream)
+</script>
+
+<template>
+ <!-- 涓诲彨绛夊緟瀵规柟鎺ュ惉鐨勬偓娴獥锛�1v1 绉佽亰 320脳540锛涚兢閫氳瘽鍒囧ぇ绐� 720脳560 -->
+ <div
+ class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl overflow-hidden shadow-[0_12px_36px_rgba(0,0,0,0.35)] z-[1000] flex flex-col text-white bg-gradient-to-b from-[#2a2a2c] to-[#1a1a1c]"
+ :class="isGroup ? 'w-[720px] h-[560px]' : 'w-[320px] h-[540px]'"
+ >
+ <div class="flex relative flex-1 justify-center items-center">
+ <!-- 瑙嗛鍛煎彨锛氳嚜宸辨憚鍍忓ご棰勮閾哄簳锛屽鏂瑰ご鍍忔偓娴《閮� -->
+ <video
+ v-if="isVideo && localStream"
+ :ref="setLocalVideoRef"
+ class="absolute inset-0 object-cover w-full h-full scale-x-[-1]"
+ autoplay
+ muted
+ playsinline
+ ></video>
+ <div
+ class="flex relative z-[1] flex-col gap-4 items-center"
+ :class="{ 'self-start mt-16': isVideo }"
+ >
+ <UserAvatar
+ :url="peerAvatar"
+ :name="peerNickname"
+ :size="96"
+ radius="8px"
+ :clickable="false"
+ />
+ <div class="text-[17px] font-medium">{{ peerNickname || '瀵规柟' }}</div>
+ <div class="text-13px text-white/60">绛夊緟瀵规柟鎺ュ彈閭�璇封�︹��</div>
+ </div>
+ </div>
+
+ <!-- 搴曢儴鎿嶄綔鍖猴細楹﹀厠椋� / 鍙栨秷 / (鎽勫儚澶� | 鎵０鍣�) -->
+ <div class="flex flex-shrink-0 gap-4 justify-around items-center pt-4 px-5 pb-5">
+ <div
+ class="flex flex-col gap-2 items-center cursor-pointer select-none"
+ @click="$emit('toggleMic')"
+ >
+ <!-- Iconify 閲� mic 鏈夐潤闊冲彉浣擄紱speaker / camera 娌℃湁鍚屾簮闈欓煶鍙樹綋锛宱ff 鎬佸�� tabler:*-off 琛ㄨ揪鏂滅嚎 -->
+ <span
+ class="flex justify-center items-center w-12 h-12 rounded-full"
+ :class="micEnabled ? 'bg-white text-[#1a1a1c]' : 'bg-white/15 text-white'"
+ >
+ <Icon
+ :icon="micEnabled ? 'ant-design:audio-outlined' : 'ant-design:audio-muted-outlined'"
+ :size="22"
+ />
+ </span>
+ <span class="text-xs text-white/70 whitespace-nowrap">
+ {{ micEnabled ? '楹﹀厠椋庡凡寮�' : '楹﹀厠椋庡凡鍏�' }}
+ </span>
+ </div>
+ <div
+ class="flex flex-col gap-2 items-center cursor-pointer select-none"
+ @click="$emit('cancel')"
+ >
+ <span
+ class="flex justify-center items-center w-12 h-12 text-white rounded-full bg-[#f04a4a]"
+ >
+ <Icon icon="ant-design:phone-outlined" :size="22" class="rotate-[135deg]" />
+ </span>
+ <span class="text-xs text-white/70 whitespace-nowrap">鍙栨秷</span>
+ </div>
+ <div
+ v-if="isVideo"
+ class="flex flex-col gap-2 items-center cursor-pointer select-none"
+ @click="$emit('toggleCamera')"
+ >
+ <span
+ class="flex justify-center items-center w-12 h-12 rounded-full"
+ :class="cameraEnabled ? 'bg-white text-[#1a1a1c]' : 'bg-white/15 text-white'"
+ >
+ <Icon
+ :icon="cameraEnabled ? 'ant-design:video-camera-outlined' : 'tabler:video-off'"
+ :size="22"
+ />
+ </span>
+ <span class="text-xs text-white/70 whitespace-nowrap">
+ {{ cameraEnabled ? '鎽勫儚澶村凡寮�' : '鎽勫儚澶村凡鍏�' }}
+ </span>
+ </div>
+ <div
+ v-else
+ class="flex flex-col gap-2 items-center cursor-pointer select-none"
+ @click="$emit('toggleSpeaker')"
+ >
+ <span
+ class="flex justify-center items-center w-12 h-12 rounded-full"
+ :class="speakerEnabled ? 'bg-white text-[#1a1a1c]' : 'bg-white/15 text-white'"
+ >
+ <Icon
+ :icon="speakerEnabled ? 'ant-design:sound-outlined' : 'tabler:volume-off'"
+ :size="22"
+ />
+ </span>
+ <span class="text-xs text-white/70 whitespace-nowrap">
+ {{ speakerEnabled ? '鎵０鍣ㄥ凡寮�' : '鎵０鍣ㄥ凡鍏�' }}
+ </span>
+ </div>
+ </div>
+ </div>
+</template>
--
Gitblit v1.9.3