feat: 优化调整

src/views/remote/contacts/eventList.vue

@@ -29,7 +29,7 @@
                 <template #initiator="{ record }">
                     <div class="flex items-center">
                         <global-avatar :size="32" :icon-size="12"></global-avatar>
-                        <a-tooltip :content="getParticipantsName(record.userList)">
+                        <a-tooltip :content="getInitiatorName(record)">
                             <span class="ml-2 truncate max-w-20">{{ getInitiatorName(record) }}</span>
                         </a-tooltip>
                     </div>

src/views/remote/videoCall/videoTools.vue

 <template>
     <div>
-        <div :id="`RemoteVideo${ps.id}`" class="relative mb-4 flex-auto"
-             data-self="remote-main" @mousedown.capture="handleBlinkingStart">
+        <div :id="`RemoteVideo${ps.id}`" class="relative mb-4 flex-auto" data-self="remote-main" @mousedown.capture="handleBlinkingStart">
             <n-message-provider>
                 <image-editor
                     :before-cancel="beforeEndMarkHandle"
@@ -16,21 +15,22 @@
                     @canvas-saved="paintSaved"
                 />
             </n-message-provider>
-            <div v-for="q in chatChannelState.blinkSpotSet"
-                 :key="q.id"
-                 :data-id="`${q.id}`" :style="{
+            <div
+                v-for="q in chatChannelState.blinkSpotSet"
+                :key="q.id"
+                :data-id="`${q.id}`"
+                :style="{
                     top: `${q.yPos * 100}%`,
                     left: `${q.xPos * 100}%`
-                 }" class="red-ball absolute z-[999]"
-                 @animationend="centerEnded"></div>
+                }"
+                class="red-ball absolute z-[999]"
+                @animationend="centerEnded"
+            ></div>
             <div class="absolute flex justify-between items-center p-1 t-0 l-0 w-full z-10">
-                <div v-if="userDataForThis.userCallGroup == 1"
-                     class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">
+                <div v-if="userDataForThis.userCallGroup == 1" class="text-xs px-2 rounded-sm leading-5 bg-primary-disable text-primary">
                     {{ userDataForThis.name }}
                 </div>
-                <div v-else
-                     class="text-xs px-2 rounded-sm leading-5"
-                     style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))">
+                <div v-else class="text-xs px-2 rounded-sm leading-5" style="background-color: rgb(var(--success-1)); color: rgb(var(--success-6))">
                     {{ userDataForThis.name }}
                 </div>
                 <div class="rounded-full size-6 flex-center" style="background-color: var(--color-border-1)">
@@ -54,7 +54,7 @@
                 <span class="mt-1" style="color: rgb(var(--danger-5))">结束会议</span>
             </div>
             <div class="w-[120px] h-[72px] item" @click="toggleMute">
-                <global-icon :size="21" icon="mic"></global-icon>
+                <global-icon :size="21" :icon="isCurrentUserMuted ? 'mic-off' : 'mic'"></global-icon>
                 <span class="mt-1 color-text-2">{{ isCurrentUserMuted ? '取消静音' : '静音' }}</span>
             </div>
             <div class="w-[120px] h-[72px] item" @click="toggleVoiceChatOnly">
@@ -68,8 +68,7 @@
             <div class="w-[120px] h-[72px] item" @click="toggleScreenShare">
                 <global-icon :size="21" icon="shared-screen"></global-icon>
                 <span class="mt-1 color-text-2">
-                    {{ screenShareMetaData.byOther ? '他人正在共享' : screenShareMetaData.byCurrentUser ? '取消屏幕共享' : '屏幕共享'
-                    }}
+                    {{ screenShareMetaData.byOther ? '他人正在共享' : screenShareMetaData.byCurrentUser ? '取消屏幕共享' : '屏幕共享' }}
                 </span>
             </div>
             <div class="w-[120px] h-[72px] item">
@@ -90,16 +89,8 @@
 
 <script lang="ts" setup>
 import { useAnyR } from 'AnyR/index'
-import {NMessageProvider} from 'naive-ui'
-import {
-    allOtherChattersIdSet,
-    chatChannelState,
-    isCurrentUserMuted,
-    isScreenShotByCurrentUser,
-    isUserHost,
-    screenShareMetaData,
-    screenshotRecord
-} from 'AnyR/states/chatChannelStates'
+import { NMessageProvider } from 'naive-ui'
+import { allOtherChattersIdSet, chatChannelState, isCurrentUserMuted, isScreenShotByCurrentUser, isUserHost, screenShareMetaData, screenshotRecord } from 'AnyR/states/chatChannelStates'
 import { h, onMounted, onUpdated, ref } from 'vue'
 import { userStates } from 'AnyR/states/wsStates'
 import ImageEditor from 'AnyR/widgets/ImageEditor/imageEditor.vue'
@@ -110,8 +101,8 @@ const ps = defineProps<{
     id: any
 }>()
 
-const firstVideoToBeAttached = ref('[data-self="remote-main"] video');
-const recordListener = function(records: any) {
+const firstVideoToBeAttached = ref('[data-self="remote-main"] video')
+const recordListener = function (records: any) {
     AnyR?.agora.continueMark(records)
 }
 
@@ -123,20 +114,20 @@ function reallyEndMarkHandle() {
 
 function initialPaintDone(blob: Blob) {
     if (!chatChannelState.value.screenshotInitiatorId && chatChannelState.value.displayImageEditor) {
-        const file = new File([blob], "temp.png");
+        const file = new File([blob], 'temp.png')
         const params = {
             apiPwd: 'Ifar$2_0160_525_Mocp',
             file,
             requestFrom: 6,
             uid: 4
-        };
+        }
         alova
             // @ts-ignore
             .Post<any>('/admin/uploadMuFile', params, { meta: { isUpload: true } })
             .then((res) => {
-              if (res.code == 200) {
-                  AnyR?.agora.startMark(res.data.url);
-              }
+                if (res.code == 200) {
+                    AnyR?.agora.startMark(res.data.url)
+                }
             })
     }
 }
@@ -147,21 +138,37 @@ function paintSaved(blob: any) {
 
 async function beforeEndMarkHandle() {
     if (isScreenShotByCurrentUser.value) {
-        return new Promise(function(resolve) {
+        return new Promise(function (resolve) {
             Modal.warning({
                 title: '你是截图发起者，退出后将会要求其他用户一同退出，确认？',
-                content: () => h('div', {
-                    class: 'flex w-full items-center justify-center'
-                }, [
-                    h(Button, {
-                        size: 'small', type: 'primary', status: 'warning',
-                        onClick: () => resolve(true)
-                    }, '确定'),
-                    h(Button, {
-                        size: 'small', type: 'primary',
-                        onClick: () => resolve(false)
-                    }, '取消')
-                ])
+                content: () =>
+                    h(
+                        'div',
+                        {
+                            class: 'flex w-full items-center justify-center'
+                        },
+                        [
+                            h(
+                                Button,
+                                {
+                                    size: 'small',
+                                    type: 'primary',
+                                    status: 'warning',
+                                    onClick: () => resolve(true)
+                                },
+                                '确定'
+                            ),
+                            h(
+                                Button,
+                                {
+                                    size: 'small',
+                                    type: 'primary',
+                                    onClick: () => resolve(false)
+                                },
+                                '取消'
+                            )
+                        ]
+                    )
             })
         })
     }
@@ -181,26 +188,30 @@ const blinkStart = ref(false)
 
 function centerEnded(q: any) {
     const id = q.target.getAttribute('data-id')
-    chatChannelState.value.blinkSpotSet = chatChannelState.value.blinkSpotSet.filter(a => a.id !== id)
+    chatChannelState.value.blinkSpotSet = chatChannelState.value.blinkSpotSet.filter((a) => a.id !== id)
 }
 
 function handleBlinkingStart($e: PointerEvent) {
     if (!blinkStart.value) return
-    if (chatChannelState.value.blinkSpotSet.find(a => a.id === userStates.value.currentUserId)) return
+    if (chatChannelState.value.blinkSpotSet.find((a) => a.id === userStates.value.currentUserId)) return
     const { offsetX, offsetY, target } = $e
     const { clientWidth, clientHeight } = target as HTMLElement
     const xPos = offsetX / clientWidth
     const yPos = offsetY / clientHeight
     const id = userStates.value.currentUserId
     console.log('d passed', {
-        id, xPos, yPos
+        id,
+        xPos,
+        yPos
     })
     AnyR?.agora.sendBlinkSpot({
-        id, xPos, yPos
+        id,
+        xPos,
+        yPos
     })
 }
 
-const userDataForThis = computed(function() {
+const userDataForThis = computed(function () {
     const userNow: any = userStates.value.onlineContacts.find((a: any) => a.fromID === ps.id)
     return {
         name: userNow?.fromName || '--',
@@ -208,11 +219,11 @@ const userDataForThis = computed(function() {
     }
 })
 
-onMounted(function() {
+onMounted(function () {
     AnyR?.agora.forceReplay(ps.id)
 })
 
-onUpdated(function() {
+onUpdated(function () {
     AnyR?.agora.forceReplay(ps.id)
 })
 
@@ -230,8 +241,7 @@ function toggleScreenShare() {
         AnyR?.agora.screenShareHandle()
     }
     AnyR?.agora.screenShareHandle()
-    AnyR?.agora.agoraApp.toggleScreenShare(!screenShareMetaData.value.byCurrentUser, endHandle, endHandle, () => {
-    })
+    AnyR?.agora.agoraApp.toggleScreenShare(!screenShareMetaData.value.byCurrentUser, endHandle, endHandle, () => {})
 }
 
 function allMute() {
@@ -253,7 +263,7 @@ function hangupCall() {
 </script>
 <style lang="less" scoped>
 .item {
-@apply flex-center flex-col rounded cursor-pointer;
+    @apply flex-center flex-col rounded cursor-pointer;
 
     &:hover {
         background-color: var(--color-fill-2);