From 68922ebf02a51f42787682b1372c504bc91bad81 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 17 May 2026 10:36:01 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=BE=A4=E9=82=80=E8=AF=B7=E7=9A=84=20incoming=E3=80=81invitin?=
 =?UTF-8?q?g=20=E7=9A=84=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/components/rtc/RtcCallIncoming.vue   | 115 +++++++++++++++++
 .../home/components/rtc/RtcCallInviting.vue   | 122 ++++++++++++++++++
 src/views/im/home/store/rtcStore.ts           |   2 +
 3 files changed, 239 insertions(+)
 create mode 100644 src/views/im/home/components/rtc/RtcCallIncoming.vue
 create mode 100644 src/views/im/home/components/rtc/RtcCallInviting.vue

diff --git a/src/views/im/home/components/rtc/RtcCallIncoming.vue b/src/views/im/home/components/rtc/RtcCallIncoming.vue
new file mode 100644
index 000000000..24ea80476
--- /dev/null
+++ b/src/views/im/home/components/rtc/RtcCallIncoming.vue
@@ -0,0 +1,115 @@
+<template>
+  <!--
+    被叫端来电小条；参考微信，右上角固定悬浮；
+    群聊：左头像 + 中（邀请人 + 文案一行 / 通话成员行）+ 右下角拒绝 / 接听；
+    私聊：左头像 + 中（邀请人 + 文案两行）+ 右下角拒绝 / 接听
+  -->
+  <div
+    class="fixed top-5 right-5 rounded-2xl overflow-hidden shadow-[0_12px_36px_rgba(0,0,0,0.4)] z-[9999] flex gap-3 items-end p-3 text-white bg-[#2a2a2c]"
+    :class="isGroup ? 'w-[360px]' : 'w-[340px]'"
+  >
+    <!-- 左：邀请者头像 -->
+    <UserAvatar
+      :url="payload?.inviterAvatar"
+      :name="payload?.inviterNickname"
+      :size="48"
+      radius="8px"
+      :clickable="false"
+      class="self-start"
+    />
+
+    <!-- 中：群聊单行（邀请人 + 文案）+ 通话成员；私聊两行 -->
+    <div class="flex flex-col flex-1 gap-1 self-start min-w-0">
+      <template v-if="isGroup">
+        <div class="text-sm truncate">
+          <span class="font-medium">{{ payload?.inviterNickname || '对方' }}</span>
+          <span class="ml-1 text-white/60">{{ tipText }}</span>
+        </div>
+        <template v-if="callMembers.length > 0">
+          <div class="mt-1 text-xs text-white/45">通话成员</div>
+          <div class="flex flex-wrap gap-1">
+            <UserAvatar
+              v-for="m in callMembers"
+              :key="m.userId"
+              :url="m.avatar"
+              :name="m.nickname"
+              :size="22"
+              radius="4px"
+              :clickable="false"
+            />
+          </div>
+        </template>
+      </template>
+      <template v-else>
+        <div class="text-sm font-medium truncate">{{ payload?.inviterNickname || '对方' }}</div>
+        <div class="text-13px text-white/60 truncate">{{ tipText }}</div>
+      </template>
+    </div>
+
+    <!-- 右下角：拒绝 / 接听 -->
+    <div class="flex flex-shrink-0 gap-2 items-center">
+      <button
+        class="flex flex-shrink-0 justify-center items-center w-10 h-10 text-white rounded-full transition-opacity bg-[#f04a4a] hover:opacity-90"
+        @click="$emit('reject')"
+      >
+        <Icon icon="ant-design:phone-outlined" :size="18" class="rotate-[135deg]" />
+      </button>
+      <button
+        class="flex flex-shrink-0 justify-center items-center w-10 h-10 text-white rounded-full transition-opacity bg-[#2ec27e] hover:opacity-90"
+        @click="$emit('accept')"
+      >
+        <Icon icon="ant-design:phone-outlined" :size="18" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import Icon from '@/components/Icon/src/Icon.vue'
+import UserAvatar from '../user/UserAvatar.vue'
+import { useRtcStore } from '../../store/rtcStore'
+import type { ImRtcCallNotification } from '../../store/rtcStore'
+import { DICT_TYPE, getDictLabel } from '@/utils/dict'
+import { ImConversationType } from '@/views/im/utils/constants'
+import { getCurrentUserId } from '@/views/im/utils/storage'
+import { getSenderAvatar, getSenderDisplayName } from '@/views/im/utils/user'
+
+const props = defineProps<{
+  payload: ImRtcCallNotification | null
+  isGroup?: boolean
+}>()
+
+defineEmits<{ accept: []; reject: [] }>()
+
+const rtcStore = useRtcStore()
+
+/** 来电提示文案；区分语音 / 视频 */
+const tipText = computed(() => {
+  if (!props.payload) return ''
+  return `邀请你${getDictLabel(DICT_TYPE.IM_RTC_CALL_MEDIA_TYPE, props.payload.mediaType)}通话`
+})
+
+/** 群聊：已加入通话的成员（自己除外）；缓存里 joinedUserIds 为空时降级到主叫，保证至少一头像 */
+const callMembers = computed(() => {
+  if (!props.isGroup) {
+    return []
+  }
+  const groupId = props.payload?.groupId
+  if (!groupId) {
+    return []
+  }
+  const myId = getCurrentUserId()
+  const joined = rtcStore.getGroupCall(groupId)?.joinedUserIds ?? []
+  const ids = joined.length > 0
+    ? joined.filter((id) => id !== myId)
+    : props.payload?.inviterUserId
+      ? [props.payload.inviterUserId]
+      : []
+  return ids.map((userId) => ({
+    userId,
+    nickname: getSenderDisplayName(userId, ImConversationType.GROUP, groupId),
+    avatar: getSenderAvatar(userId, ImConversationType.GROUP, groupId) || undefined
+  }))
+})
+</script>
diff --git a/src/views/im/home/components/rtc/RtcCallInviting.vue b/src/views/im/home/components/rtc/RtcCallInviting.vue
new file mode 100644
index 000000000..be9ce6b4d
--- /dev/null
+++ b/src/views/im/home/components/rtc/RtcCallInviting.vue
@@ -0,0 +1,122 @@
+<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-[9999] 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="localVideoRef"
+        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('toggle-mic')"
+      >
+        <span
+          class="flex justify-center items-center w-12 h-12 bg-white rounded-full text-[#1a1a1c]"
+        >
+          <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('toggle-camera')"
+      >
+        <span
+          class="flex justify-center items-center w-12 h-12 bg-white rounded-full text-[#1a1a1c]"
+        >
+          <Icon
+            :icon="
+              cameraEnabled
+                ? 'ant-design:video-camera-outlined'
+                : 'ant-design:video-camera-add-outlined'
+            "
+            :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('toggle-speaker')"
+      >
+        <span
+          class="flex justify-center items-center w-12 h-12 bg-white rounded-full text-[#1a1a1c]"
+        >
+          <Icon icon="ant-design:sound-outlined" :size="22" />
+        </span>
+        <span class="text-xs text-white/70 whitespace-nowrap">扬声器已开</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Icon from '@/components/Icon/src/Icon.vue'
+import UserAvatar from '../user/UserAvatar.vue'
+import { useMediaStreamElement } from '../../composables/useMediaStreamElement'
+
+const props = defineProps<{
+  peerNickname?: string
+  peerAvatar?: string
+  isGroup?: boolean
+  isVideo: boolean
+  micEnabled: boolean
+  cameraEnabled: boolean
+  localStream?: MediaStream | null // 本地视频流；视频呼叫预览铺底
+}>()
+
+defineEmits<{
+  cancel: []
+  'toggle-mic': []
+  'toggle-camera': []
+  'toggle-speaker': []
+}>()
+
+const localVideoRef = useMediaStreamElement<HTMLVideoElement>(() => props.localStream)
+</script>
diff --git a/src/views/im/home/store/rtcStore.ts b/src/views/im/home/store/rtcStore.ts
index f4141b045..b7e679b27 100644
--- a/src/views/im/home/store/rtcStore.ts
+++ b/src/views/im/home/store/rtcStore.ts
@@ -27,6 +27,8 @@ export interface ImRtcCallNotification {
   inviterUserId?: number
   inviterNickname?: string
   inviterAvatar?: string
+  // INVITE 专属：本次被邀请人列表；包含收件人自身，前端来电小条按需过滤展示「邀请的其他人」
+  inviteeIds?: number[]
   // REJECT 专属：操作者展示信息（其它子类型走 RTC_CALL_END）
   operatorUserId?: number
   operatorNickname?: string