转换绝对引入为相对引入，AnyR=>.+1

src/App.vue

@@ -19,6 +19,34 @@ import useUserStore from '@/store/user'
 import { wsShouldOpen } from 'AnyR/states/coreState'
 import { storeToRefs } from 'pinia'
 import { userStates } from 'AnyR/states/wsStates'
+import {CallState} from "AnyR/constants/chatChannelRelated";
+import {chatChannelState} from "AnyR/states/chatChannelStates";
+import useContactsStore from "@/store/contacts";
+import {useAnyR} from "AnyR/index";
+
+const contactsStore = useContactsStore()
+const AnyR = useAnyR();
+
+watch(() => chatChannelState.value.currentState, function (value: any) {
+    if (value === CallState.idle) {
+      contactsStore.changeWait(false)
+      router.replace({
+        name: "Contacts"
+      })
+    } else if(value === CallState.callIn || value === CallState.callOut) {
+      contactsStore.changeWait(true)
+    } else {
+      if (AnyR.agora) {
+       AnyR.agora.joinChatRoom()
+           .then(function () {
+             contactsStore.changeWait(false);
+             return router.push({
+               name: "VideoCall"
+             })
+           })
+      }
+    }
+})
 
 const { showLoading, loadText } = storeToRefs(useAppStore())
 

src/views/remote/contacts/contactsList.vue

@@ -8,7 +8,7 @@
                 <global-icon icon="mic" :size="14" v-if="item.hasMike == 1"></global-icon>
             </div>
             <div class="flex-auto text-right">
-                <a-button type="primary" shape="circle" @click.stop="changeWait(true)" :disabled="!(item.callState == 'callState' && item.hasCamera == 1 && item.hasMike == 1)">
+                <a-button type="primary" shape="circle" @click.stop="sendCallRequest(item.id)" :disabled="!(item.callState == CallState.idle && item.hasCamera == 1 && item.hasMike == 1)">
                     <global-icon icon="phone" :size="14" color="var(--color-bg-white)"></global-icon>
                 </a-button>
             </div>
@@ -20,6 +20,16 @@
 import useContactsStore from '@/store/contacts/index'
 import { ContactsItemDto } from '@/store/contacts/types'
 import { storeToRefs } from 'pinia'
+import {CallState} from "AnyR/constants/chatChannelRelated";
+import {useAnyR} from "AnyR/index";
+
+const AnyR = useAnyR();
+
+const sendCallRequest = function (id: any) {
+  if (AnyR.agora) {
+    AnyR.agora.sendCallRequest(id);
+  }
+}
 
 interface Props {
     data?: Array<ContactsItemDto>

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">孙婉茹</div>
-        <div class="text-2xl font-medium mb-8 text-theme-text3">正在呼叫你...</div>
-        <a-space :size="32">
-            <a-button type="primary" shape="circle" status="success" @click="agreeCall">
-                <global-icon icon="phone-fill" :size="32" color="var(--color-bg-white)"></global-icon>
-            </a-button>
-            <a-button type="primary" shape="circle" status="danger" @click="refuseCall">
-                <global-icon icon="phone-hangup" :size="32" color="var(--color-bg-white)"></global-icon>
-            </a-button>
-        </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 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>
 </template>
 
-<script setup lang="ts">
-import useContactsStore from '@/store/contacts/index'
+<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";
 
-//同意视频
-const router = useRouter()
-const agreeCall = () => {
-    router.push({ name: 'VideoCall' })
-    changeWait(false)
+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 || '未知用户'
+  })
+})
+
+function acceptCall() {
+  AnyR?.agora.acceptCurrentCall()
+}
+
+function refuseCall() {
+  AnyR?.agora.refuseCurrentCall()
 }
-//拒绝视频
-const { changeWait } = useContactsStore()
-const refuseCall = () => {
-    changeWait(false)
+
+function cancelCall() {
+  AnyR?.agora.cancelCurrentCall();
 }
+
 </script>
 <style lang="less" scoped>
 .arco-btn {
-    width: 64px;
-    height: 64px;
+  width: 64px;
+  height: 64px;
 }
 </style>