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">
+            <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">
@@ -29,10 +32,10 @@
 </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,
@@ -40,23 +43,25 @@ const ps = defineProps({
 })
 
 const userDataForThis = computed(function () {
-  if(ps.isSelf) {
+    if (ps.isSelf) {
         return {
-      name: "我", calling: false
+            name: '我',
+            calling: false
         }
     }
 
-  const userNow: any = userStates.value.onlineContacts.find((a: any) => a.fromID === ps.id);
+    const userNow: any = userStates.value.onlineContacts.find((a: any) => a.fromID === ps.id)
     return {
         name: userNow?.fromName || '--',
-    calling: userNow?.callState !== 'calling'
+        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 () {

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)
 })