尝试添加截图标注+1

src/views/remote/videoCall/videoTools.vue

 <template>
     <div>
-        <div :id="`RemoteVideo${ps.id}`" data-self="remote-main" ref="firstVideoToBeAttached" class="relative mb-4 flex-auto" @mousedown.capture="handleBlinkingStart">
-            <div class="red-ball absolute z-[999]"
-                 :style="{
+        <div :id="`RemoteVideo${ps.id}`" ref="firstVideoToBeAttached" class="relative mb-4 flex-auto"
+             data-self="remote-main" @mousedown.capture="handleBlinkingStart">
+            <n-message-provider>
+                <image-editor
+                    :before-cancel="beforeEndMarkHandle"
+                    :pass-in-records="screenshotRecord"
+                    :record-listener="recordListener"
+                    :show-quit="isScreenShotByCurrentUser"
+                    :start="displayImageEditor"
+                    :target="firstVideoToBeAttached"
+                    :url-image="chatChannelState.screenshotURL"
+                    @cancel="reallyEndMarkHandle"
+                    @first-paint-done="initialPaintDone"
+                    @canvas-saved="paintSaved"
+                />
+            </n-message-provider>
+            <div v-for="q in chatChannelState.blinkSpotSet"
+                 :key="q.id"
+                 :data-id="`${q.id}`" :style="{
                     top: `${q.yPos * 100}%`,
                     left: `${q.xPos * 100}%`
-                 }"
-                 v-for="q in chatChannelState.blinkSpotSet" :key="q.id" :data-id="`${q.id}`" @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">
                     {{ 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))">
+                     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)">
@@ -45,8 +62,8 @@
                 <span class="mt-1 color-text-2">{{ isVoiceChatOnly ? '视频模式' : '语音模式' }}</span>
             </div>
             <div class="w-[120px] h-[72px] item" @click="startScreenShotDraw">
-                <global-icon icon="screenshot" :size="21"></global-icon>
-                <span class="mt-1 color-text-2">{{!displayImageEditor ? '截图' : "正在截图"}}</span>
+                <global-icon :size="21" icon="screenshot"></global-icon>
+                <span class="mt-1 color-text-2">{{ !displayImageEditor ? '截图' : '正在截图' }}</span>
             </div>
             <div class="w-[120px] h-[72px] item" @click="toggleScreenShare">
                 <global-icon :size="21" icon="shared-screen"></global-icon>
@@ -65,77 +82,71 @@
             </div>
             <div class="w-[120px] h-[72px] item" @click="blinkStart = !blinkStart">
                 <global-icon :size="21" icon="focus"></global-icon>
-                <span class="mt-1 color-text-2">{{!blinkStart ? '动态标注' : '取消动态标注'}}</span>
+                <span class="mt-1 color-text-2">{{ !blinkStart ? '动态标注' : '取消动态标注' }}</span>
             </div>
         </div>
     </div>
-    <image-editor
-        :before-cancel="beforeEndMarkHandle"
-        :pass-in-records="screenshotRecord"
-        :record-listener="recordListener"
-        :show-quit="isScreenShotByCurrentUser"
-        :start="displayImageEditor"
-        :target="firstVideoToBeAttached"
-        :url-image="chatChannelState.screenshotURL"
-        @cancel="reallyEndMarkHandle"
-        @first-paint-done="initialPaintDone"
-        @canvas-saved="paintSaved"
-    />
 </template>
 
 <script lang="ts" setup>
 import { useAnyR } from 'AnyR/index'
+import {NMessageProvider} from 'naive-ui'
 import {
     allOtherChattersIdSet,
+    chatChannelState,
     isCurrentUserMuted,
+    isScreenShotByCurrentUser,
     isUserHost,
-    screenShareMetaData
+    screenShareMetaData,
+    screenshotRecord
 } from 'AnyR/states/chatChannelStates'
-import { onMounted, onUpdated, ref, h } from 'vue'
+import { h, onMounted, onUpdated, ref } from 'vue'
 import { userStates } from 'AnyR/states/wsStates'
-import {chatChannelState, isScreenShotByCurrentUser, screenshotRecord} from 'AnyR/states/chatChannelStates'
-import ImageEditor from "AnyR/widgets/ImageEditor/imageEditor.vue"
-import { Modal, Button, Message } from '@arco-design/web-vue'
-import { otherTabClose } from 'AnyR/ws/eventTypes'
+import ImageEditor from 'AnyR/widgets/ImageEditor/imageEditor.vue'
+import { Button, Message, Modal } from '@arco-design/web-vue'
 
 const ps = defineProps<{
     id: any
-}>();
+}>()
 
 const firstVideoToBeAttached = ref()
 const displayImageEditor = ref(false)
 const recordListener = function(records: any) {
-    AnyR?.agora.continueMark(records);
+    AnyR?.agora.continueMark(records)
 }
+
 function reallyEndMarkHandle() {
     if (isScreenShotByCurrentUser.value) {
         AnyR?.agora.endMark()
     }
-    displayImageEditor.value = false;
+    displayImageEditor.value = false
 }
+
 function initialPaintDone(blob: any) {
     if (!chatChannelState.value.screenshotInitiatorId && displayImageEditor.value) {
-        AnyR?.agora.startMark(blob, 'temp.png');
+        AnyR?.agora.startMark(blob, 'temp.png')
         console.log('发送画画png完成')
     }
 }
+
 function paintSaved(blob: any) {
-    AnyR?.agora.archiveMark(blob, 'temp.png');
+    AnyR?.agora.archiveMark(blob, 'temp.png')
 }
+
 async function beforeEndMarkHandle() {
     if (isScreenShotByCurrentUser.value) {
         return new Promise(function(resolve) {
             Modal.warning({
-                title: "你是截图发起者，退出后将会要求其他用户一同退出，确认？",
+                title: '你是截图发起者，退出后将会要求其他用户一同退出，确认？',
                 content: () => h('div', {
-                    class: 'flex w-full items-center justify-center',
+                    class: 'flex w-full items-center justify-center'
                 }, [
                     h(Button, {
-                        size: 'small', type: "primary", status: "warning",
+                        size: 'small', type: 'primary', status: 'warning',
                         onClick: () => resolve(true)
                     }, '确定'),
                     h(Button, {
-                        size: 'small', type: "primary",
+                        size: 'small', type: 'primary',
                         onClick: () => resolve(false)
                     }, '取消')
                 ])
@@ -147,10 +158,10 @@ async function beforeEndMarkHandle() {
 
 function startScreenShotDraw() {
     if (allOtherChattersIdSet.value.length === 0 || !document.querySelector('[data-self="remote-main"] video')) {
-        return Message.error("无截图目标")
+        return Message.error('无截图目标')
     }
     if (!displayImageEditor.value && !chatChannelState.value.screenshotInitiatorId) {
-        displayImageEditor.value = true;
+        displayImageEditor.value = true
     }
 }
 
@@ -158,17 +169,17 @@ 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;
-    const {offsetX, offsetY, target} = $e;
-    const {clientWidth, clientHeight} = target as HTMLElement;
-    const xPos = offsetX / clientWidth;
-    const yPos = offsetY / clientHeight;
-    const id = userStates.value.currentUserId;
+    if (!blinkStart.value) 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
     })
@@ -236,6 +247,7 @@ function hangupCall() {
         background-color: var(--color-fill-2);
     }
 }
+
 .red-ball {
     width: 20px;
     height: 20px;