feat: 优化

src/views/remote/contacts/contactsWait.vue

 <template>
-  <div class="w-full h-full flex justify-center items-center flex-col absolute bg-theme-bg3 z-[999]">
-    <global-avatar :avatar-size="124" :icon-size="32"></global-avatar>
-    <div class="text-4xl font-medium mt-8 mb-2 text-theme-text1">{{chattersName.join('、')}}</div>
-    <div v-if="chatChannelState.currentState === CallState.callIn" class="text-2xl font-medium mb-8 text-theme-text3">正在呼叫你...</div>
-    <div v-else class="text-2xl font-medium mb-8 text-theme-text3">正在呼叫</div>
-    <a-space :size="32">
-      <template v-if="chatChannelState.currentState === CallState.callIn">
-        <a-button shape="circle" status="success" type="primary" @click="acceptCall">
-          <global-icon :size="32" color="var(--color-bg-white)" icon="phone-fill"></global-icon>
-        </a-button>
-        <a-button shape="circle" status="danger" type="primary" @click="refuseCall">
-          <global-icon :size="32" color="var(--color-bg-white)" icon="phone-hangup"></global-icon>
-        </a-button>
-      </template>
-      <template v-else>
-        <a-button shape="circle" status="danger" type="primary" @click="cancelCall">
-          <global-icon :size="32" color="var(--color-bg-white)" icon="phone-hangup"></global-icon>
-        </a-button>
-      </template>
-    </a-space>
-  </div>
+    <div class="w-full h-full flex justify-center items-center flex-col absolute bg-theme-bg3 z-[999]">
+        <global-avatar :avatar-size="124" :icon-size="32"></global-avatar>
+        <div class="text-4xl font-medium mt-8 mb-2 text-theme-text1">{{ chattersName.join('、') }}</div>
+        <div class="text-2xl font-medium mb-8 text-theme-text3">{{ chatChannelState.currentState === CallState.callIn ? '正在呼叫你...' : '正在呼叫' }}</div>
+        <a-space :size="32">
+            <template v-if="chatChannelState.currentState === CallState.callIn">
+                <a-button shape="circle" status="success" type="primary" @click="acceptCall">
+                    <global-icon :size="32" color="var(--color-bg-white)" icon="phone-fill"></global-icon>
+                </a-button>
+                <a-button shape="circle" status="danger" type="primary" @click="refuseCall">
+                    <global-icon :size="32" color="var(--color-bg-white)" icon="phone-hangup"></global-icon>
+                </a-button>
+            </template>
+            <template v-else>
+                <a-button shape="circle" status="danger" type="primary" @click="cancelCall">
+                    <global-icon :size="32" color="var(--color-bg-white)" icon="phone-hangup"></global-icon>
+                </a-button>
+            </template>
+        </a-space>
+    </div>
 </template>
 
 <script lang="ts" setup>
-import {useAnyR} from "AnyR/index";
-import {chatChannelState} from "AnyR/states/chatChannelStates";
-import {CallState} from "AnyR/constants/chatChannelRelated";
-import {allOtherChattersIdSet} from "AnyR/states/chatChannelStates";
-import {userStates} from "AnyR/states/wsStates";
-import {computed} from "vue";
+import { useAnyR } from 'AnyR/index'
+import { chatChannelState } from 'AnyR/states/chatChannelStates'
+import { CallState } from 'AnyR/constants/chatChannelRelated'
+import { allOtherChattersIdSet } from 'AnyR/states/chatChannelStates'
+import { userStates } from 'AnyR/states/wsStates'
+import { computed } from 'vue'
 
-const AnyR = useAnyR();
+const AnyR = useAnyR()
 
 const chattersName = computed(function () {
-  return allOtherChattersIdSet.value.map(function (a: any) {
-    // @ts-ignore
-    return userStates.value.onlineContacts.find((q: any) => q.fromID === a)?.fromName || '未知用户'
-  })
+    return allOtherChattersIdSet.value.map(function (a: any) {
+        // @ts-ignore
+        return userStates.value.onlineContacts.find((q: any) => q.fromID === a)?.fromName || '未知用户'
+    })
 })
 
 function acceptCall() {
-  AnyR?.agora.acceptCurrentCall()
+    AnyR?.agora.acceptCurrentCall()
 }
 
 function refuseCall() {
-  AnyR?.agora.refuseCurrentCall()
+    AnyR?.agora.refuseCurrentCall()
 }
 
 function cancelCall() {
-  AnyR?.agora.cancelCurrentCall();
+    AnyR?.agora.cancelCurrentCall()
 }
-
 </script>
 <style lang="less" scoped>
 .arco-btn {
-  width: 64px;
-  height: 64px;
+    width: 64px;
+    height: 64px;
 }
 </style>