feat: 样式调整

src/views/remote/videoCall/videoChat.vue

 <template>
     <div class="g-block ml-4 pb-0">
-        <div class="px-4">
+        <div class="px-4 h-[300px]">
             <video-item :is-self="true" :id="''"></video-item>
         </div>
         <a-row class="mt-2 px-4">

src/views/remote/videoCall/videoInfo.vue

 <template>
-    <div class="g-block ml-4 overflow-y-auto">
+    <div class="g-block ml-4">
         <div class="flex justify-between items-center mb-4 px-4">
             <a-typography-paragraph editable v-model:editText="videoTitle">
                 {{ videoTitle }}
@@ -15,30 +15,30 @@
                 </div>
             </a-space>
         </div>
-<!--      其余的视频窗口-->
+        <!-- 其余的视频窗口 -->
         <video-slider class="mb-3 px-4" :id-set="userVideoContainerSet.onTopUserSet"></video-slider>
-<!--        放大的窗口-->
-        <video-tools :id="userVideoContainerSet.inCenter" class="px-4"></video-tools>
+        <!-- 放大的窗口 -->
+        <video-tools :id="userVideoContainerSet.inCenter" class="px-4 flex flex-col flex-auto"></video-tools>
     </div>
 </template>
 
 <script setup lang="ts">
 import VideoSlider from './videoSlider.vue'
 import VideoTools from './videoTools.vue'
-import {allOtherChattersIdSet} from "AnyR/states/chatChannelStates";
-import {computed, ref, onMounted} from "vue";
+import { allOtherChattersIdSet } from 'AnyR/states/chatChannelStates'
+import { computed, ref, onMounted } from 'vue'
 
-const inCenterUserVideoId = ref('');
+const inCenterUserVideoId = ref('')
 
 onMounted(function () {
-  inCenterUserVideoId.value = allOtherChattersIdSet.value[0];
+    inCenterUserVideoId.value = allOtherChattersIdSet.value[0]
 })
 
 const userVideoContainerSet = computed(function () {
-  return {
-    onTopUserSet: allOtherChattersIdSet.value.filter((a: any) => a!==inCenterUserVideoId.value),
-    inCenter: inCenterUserVideoId.value
-  }
+    return {
+        onTopUserSet: allOtherChattersIdSet.value.filter((a: any) => a !== inCenterUserVideoId.value),
+        inCenter: inCenterUserVideoId.value
+    }
 })
 
 const videoTitle = ref('2024-02-17 10:22:23远程协助事件')

src/views/remote/videoCall/videoItem.vue

 <template>
-    <div class="relative" :id="ps.isSelf ? 'LocalVideo' : `RemoteVideo${ps.id}`" style="height: 300px;">
+    <div class="relative h-full" :id="ps.isSelf ? 'LocalVideo' : `RemoteVideo${ps.id}`">
         <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>
             <a-space :size="4">
@@ -28,8 +28,8 @@
 
 <script setup lang="ts">
 const ps = defineProps({
-  isSelf: Boolean,
-  id: String
+    isSelf: Boolean,
+    id: String
 })
 </script>
 <style lang="less" scoped></style>

src/views/remote/videoCall/videoSlider.vue

 <template>
-    <a-space class="justify-center">
+    <a-space class="justify-center" v-if="idSet.length">
         <!-- 往左 -->
         <div class="cursor-pointer" @click="slideLeft"><icon-left /></div>
         <div class="slider-container mb-1">
             <a-space class="slider-content overflow-y-hidden" :size="8" :style="sliderStyles">
-                <video-item class="slider-item" v-for="item in ps.idSet" :key="item" :is-self="false" :id="item"></video-item>
+                <video-item class="slider-item" v-for="item in idSet" :key="item" :is-self="false" :id="item"></video-item>
             </a-space>
         </div>
         <!-- 往右 -->
@@ -17,7 +17,7 @@ import VideoItem from './videoItem.vue'
 import { IconLeft, IconRight } from '@arco-design/web-vue/es/icon'
 
 const ps = defineProps<{
-  idSet: Array<any>
+    idSet: Array<any>
 }>()
 
 const sliderWidth = ref(150) //滑块宽度
@@ -53,6 +53,7 @@ const getSliderWidth = computed(() => {
     position: relative;
     .slider-item {
         width: v-bind('getSliderWidth');
+        height: 120px;
     }
 }
 </style>

src/views/remote/videoCall/videoTools.vue

 <template>
     <div>
-        <div class="relative mb-4" style="height: 300px" :id="`RemoteVideo${ps.id}`">
+        <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="rounded-full size-6 flex-center" style="background-color: var(--color-border-1)">
@@ -13,26 +13,26 @@
                 <global-icon icon="phone-hangup" :size="21" color="rgb(var(--danger-5))"></global-icon>
                 <span class="mt-1" style="color: rgb(var(--danger-5))">挂断</span>
             </div>
-          <div v-else class="w-[120px] h-[72px] item" @click="endMeeting">
-            <global-icon icon="phone-hangup" :size="21" color="rgb(var(--danger-5))"></global-icon>
-            <span class="mt-1" style="color: rgb(var(--danger-5))">结束会议</span>
-          </div>
+            <div v-else class="w-[120px] h-[72px] item" @click="endMeeting">
+                <global-icon icon="phone-hangup" :size="21" color="rgb(var(--danger-5))"></global-icon>
+                <span class="mt-1" style="color: rgb(var(--danger-5))">结束会议</span>
+            </div>
             <div class="w-[120px] h-[72px] item" @click="toggleMute">
                 <global-icon icon="mic" :size="21"></global-icon>
-                <span class="mt-1 color-text-2">{{isCurrentUserMuted ? '取消静音' : "静音"}}</span>
+                <span class="mt-1 color-text-2">{{ isCurrentUserMuted ? '取消静音' : '静音' }}</span>
             </div>
             <div class="w-[120px] h-[72px] item" @click="toggleVoiceChatOnly">
                 <global-icon icon="swap" :size="21"></global-icon>
-                <span class="mt-1 color-text-2">{{isVoiceChatOnly ? '视频模式' : "语音模式"}}</span>
+                <span class="mt-1 color-text-2">{{ isVoiceChatOnly ? '视频模式' : '语音模式' }}</span>
             </div>
-<!--            <div class="w-[120px] h-[72px] item">-->
-<!--                <global-icon icon="screenshot" :size="21"></global-icon>-->
-<!--                <span class="mt-1 color-text-2">截图</span>-->
-<!--            </div>-->
+            <!-- <div class="w-[120px] h-[72px] item">
+                <global-icon icon="screenshot" :size="21"></global-icon>
+                <span class="mt-1 color-text-2">截图</span>
+            </div> -->
             <div class="w-[120px] h-[72px] item" @click="toggleScreenShare">
                 <global-icon icon="shared-screen" :size="21"></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">
@@ -48,49 +48,48 @@
 </template>
 
 <script setup lang="ts">
-import {useAnyR} from "AnyR/index";
-import {isUserHost} from "AnyR/states/chatChannelStates";
-import {ref} from "vue"
-import {isCurrentUserMuted} from "AnyR/states/chatChannelStates";
-import {screenShareMetaData} from "AnyR/states/chatChannelStates";
+import { useAnyR } from 'AnyR/index'
+import { isUserHost } from 'AnyR/states/chatChannelStates'
+import { ref } from 'vue'
+import { isCurrentUserMuted } from 'AnyR/states/chatChannelStates'
+import { screenShareMetaData } from 'AnyR/states/chatChannelStates'
 
 const ps = defineProps<{
-  id: any
+    id: any
 }>()
 
 const isVoiceChatOnly = ref(false)
 
-const AnyR = useAnyR();
+const AnyR = useAnyR()
 
 function toggleMute() {
-  AnyR?.agora.toggleMuteSelf()
+    AnyR?.agora.toggleMuteSelf()
 }
 
 function toggleScreenShare() {
-  if (screenShareMetaData.value.byOther)
-    return;
-  const endHandle = () => {
+    if (screenShareMetaData.value.byOther) return
+    const endHandle = () => {
+        AnyR?.agora.screenShareHandle()
+    }
     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() {
-  AnyR?.agora.muteAllUser()
+    AnyR?.agora.muteAllUser()
 }
 
 function toggleVoiceChatOnly() {
-  isVoiceChatOnly.value = !isVoiceChatOnly.value
-  AnyR?.agora.toggleVoiceChatOnly(isVoiceChatOnly.value);
+    isVoiceChatOnly.value = !isVoiceChatOnly.value
+    AnyR?.agora.toggleVoiceChatOnly(isVoiceChatOnly.value)
 }
 
 function endMeeting() {
-  AnyR?.agora.endCurrentCall()
+    AnyR?.agora.endCurrentCall()
 }
 
 function hangupCall() {
-  AnyR?.agora.hangUpCurrentCall();
+    AnyR?.agora.hangUpCurrentCall()
 }
 </script>
 <style lang="less" scoped>