feat: 视图通话专家

src/views/remote/videoCall/videoItem.vue

 <template>
-  <div :id="ps.isSelf ? 'LocalVideo' : `RemoteVideo${ps.id}`" class="relative h-full">
-    <div class="absolute flex justify-between items-center p-1 top-0 left-0 w-full z-10">
-      <div class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">
-        {{ userDataForThis.name }}
-      </div>
-      <a-space :size="4">
-        <div class="rounded-full size-6 flex-center bg-theme-bg1 cursor-pointer">
-          <global-icon :size="12" icon="writing"></global-icon>
+    <div :id="ps.isSelf ? 'LocalVideo' : `RemoteVideo${ps.id}`" class="relative h-full">
+        <div class="absolute flex justify-between items-center p-1 top-0 left-0 w-full z-10">
+            <div class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary" v-if="userDataForThis.userCallGroup == 0">
+                {{ userDataForThis.name }}
+            </div>
+            <div class="text-xs px-2 rounded-sm leading-5" style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))" v-else>
+                {{ userDataForThis.name }}
+            </div>
+            <a-space :size="4">
+                <div class="rounded-full size-6 flex-center bg-theme-bg1 cursor-pointer">
+                    <global-icon :size="12" icon="writing"></global-icon>
+                </div>
+                <div class="rounded-full size-6 flex-center cursor-pointer" style="background-color: var(--color-border-1)">
+                    <global-icon :size="12" color="rgb(var(--success-6))" icon="mic"></global-icon>
+                </div>
+            </a-space>
         </div>
-        <div class="rounded-full size-6 flex-center cursor-pointer" style="background-color: var(--color-border-1)">
-          <global-icon :size="12" color="rgb(var(--success-6))" icon="mic"></global-icon>
+        <div v-if="isUserHost" class="absolute left-0 bottom-0 z-10 p-1">
+            <div class="flex-center rounded-sm px-2 py-0.5 bg-fill-bg1">
+                <global-icon :size="12" icon="user"></global-icon>
+                <span class="text-xs ml-1 text-theme-text1">主持人</span>
+            </div>
+        </div>
+        <div v-if="userDataForThis.calling" class="absolute top-0 left-0 right-0 bottom-0 flex-center flex-col">
+            <div class="text-base text-theme-text1">呼叫中...</div>
+            <a-button shape="circle" status="danger" type="primary" @click="cancelCallExact">
+                <global-icon :size="20" color="var(--color-bg-white)" icon="phone-hangup"></global-icon>
+            </a-button>
         </div>
-      </a-space>
-    </div>
-    <div v-if="isUserHost" class="absolute left-0 bottom-0 z-10 p-1">
-      <div class="flex-center rounded-sm px-2 py-0.5 bg-fill-bg1">
-        <global-icon :size="12" icon="user"></global-icon>
-        <span class="text-xs ml-1 text-theme-text1">主持人</span>
-      </div>
-    </div>
-    <div v-if="userDataForThis.calling" class="absolute top-0 left-0 right-0 bottom-0 flex-center flex-col">
-      <div class="text-base text-theme-text1">呼叫中...</div>
-      <a-button shape="circle" status="danger" type="primary" @click="cancelCallExact">
-        <global-icon :size="20" color="var(--color-bg-white)" icon="phone-hangup"></global-icon>
-      </a-button>
     </div>
-  </div>
 </template>
 
 <script lang="ts" setup>
-import {isUserHost} from "AnyR/states/chatChannelStates";
-import {userStates} from "AnyR/states/wsStates";
-import {computed, onMounted, onUpdated} from "vue";
-import {useAnyR} from "AnyR/index";
+import { isUserHost } from 'AnyR/states/chatChannelStates'
+import { userStates } from 'AnyR/states/wsStates'
+import { computed, onMounted, onUpdated } from 'vue'
+import { useAnyR } from 'AnyR/index'
 
 const ps = defineProps({
-  isSelf: Boolean,
-  id: String
+    isSelf: Boolean,
+    id: String
 })
 
 const userDataForThis = computed(function () {
-  if(ps.isSelf) {
-    return {
-      name: "我", calling: false
+    if (ps.isSelf) {
+        return {
+            name: '我',
+            calling: false
+        }
     }
-  }
 
-  const userNow: any = userStates.value.onlineContacts.find((a: any) => a.fromID === ps.id);
-  return {
-    name: userNow?.fromName || '--',
-    calling: userNow?.callState !== 'calling'
-  }
+    const userNow: any = userStates.value.onlineContacts.find((a: any) => a.fromID === ps.id)
+    return {
+        name: userNow?.fromName || '--',
+        calling: userNow?.callState !== 'calling',
+        userCallGroup: userNow?.userCallGroup
+    }
 })
 
-const AnyR = useAnyR();
+const AnyR = useAnyR()
 
 function cancelCallExact() {
-  AnyR?.agora.cancelExactCall(ps.id);
+    AnyR?.agora.cancelExactCall(ps.id)
 }
 
 onMounted(function () {
-  if (!ps.isSelf) {
-    AnyR?.agora.forceReplay(ps.id)
-  }
+    if (!ps.isSelf) {
+        AnyR?.agora.forceReplay(ps.id)
+    }
 })
 
 onUpdated(function () {
-  if (!ps.isSelf) {
-    AnyR?.agora.forceReplay(ps.id)
-  }
+    if (!ps.isSelf) {
+        AnyR?.agora.forceReplay(ps.id)
+    }
 })
 </script>
 <style lang="less" scoped></style>

src/views/remote/videoCall/videoTools.vue

@@ -2,7 +2,10 @@
     <div>
         <div class="relative mb-4 flex-auto" :id="`RemoteVideo${ps.id}`">
             <div class="absolute flex justify-between items-center p-1 t-0 l-0 w-full z-10">
-                <div class="text-xs px-2 rounded-sm leading-5" style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))">吴彦谦</div>
+                <div class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary" v-if="userDataForThis.userCallGroup == 0">
+                    {{ userDataForThis.name }}
+                </div>
+                <div class="text-xs px-2 rounded-sm leading-5" style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))" v-else>{{ userDataForThis.name }}</div>
                 <div class="rounded-full size-6 flex-center" style="background-color: var(--color-border-1)">
                     <global-icon icon="mic" :size="12" color="rgb(var(--success-6))"></global-icon>
                 </div>
@@ -60,11 +63,20 @@ import { ref } from 'vue'
 import { isCurrentUserMuted } from 'AnyR/states/chatChannelStates'
 import { screenShareMetaData } from 'AnyR/states/chatChannelStates'
 import { onMounted, onUpdated } from 'vue'
+import { userStates } from 'AnyR/states/wsStates'
 
 const ps = defineProps<{
     id: any
 }>()
 
+const userDataForThis = computed(function () {
+    const userNow: any = userStates.value.onlineContacts.find((a: any) => a.fromID === ps.id)
+    return {
+        name: userNow?.fromName || '--',
+        userCallGroup: userNow?.userCallGroup
+    }
+})
+
 onMounted(function () {
     AnyR?.agora.forceReplay(ps.id)
 })