feat: 视频切换

src/views/layout/gMenu.vue

@@ -2,14 +2,14 @@
     <template v-for="item in menuList" :key="item.path">
         <template v-if="!item.meta?.hideInMenu">
             <!-- 有子菜单 -->
-            <a-sub-menu v-if="item.children && item.children.length" :key="item.name!">
+            <a-sub-menu v-if="item.children && item.children.length" :key="item.name">
                 <template #icon><global-icon icon="desktop" :size="18"></global-icon></template>
                 <template #title>{{ $t(item.meta.locale) }}</template>
                 <!-- 递归菜单 -->
                 <g-menu :menuList="item.children"></g-menu>
             </a-sub-menu>
             <!-- 没有子菜单 -->
-            <a-menu-item v-else :key="item.name!" @click="goRoute(item.name)">
+            <a-menu-item v-else :key="item.name" @click="goRoute(item.name)">
                 {{ $t(item.meta.locale) }}
             </a-menu-item>
         </template>
@@ -37,7 +37,12 @@ const goRoute = (name: string) => {
         color: rgb(var(--primary-6));
     }
 }
-:deep(.arco-menu-inline-header.arco-menu-selected) .svg-icon {
-    fill: rgb(var(--primary-6));
+:deep(.arco-menu-inline-header.arco-menu-selected) {
+    .svg-icon {
+        fill: rgb(var(--primary-6));
+    }
+    .arco-menu-title {
+        color: rgb(var(--primary-6));
+    }
 }
 </style>

src/views/remote/contacts/multiCallModel.vue

@@ -3,7 +3,7 @@
         <div class="h-80 overflow-y-auto">
             <a-collapse :bordered="false">
                 <a-collapse-item :header="key + '列表'" :key="index" v-for="(value, key, index) in getUserListGroup">
-                    <contacts-list-choose :data="value" v-model="chooseUserIds"></contacts-list-choose>
+                    <contacts-list-choose :data="value" v-model="chooseUserIds" v-if="value.length"></contacts-list-choose>
                 </a-collapse-item>
             </a-collapse>
         </div>

src/views/remote/videoCall/videoSlider.vue

 <template>
-    <a-space class="justify-center" v-if="idSet.length">
+    <div class="flex-center" v-if="idSet.length" ref="wrap">
         <!-- 往左 -->
-        <div class="cursor-pointer" @click="slideLeft"><icon-left /></div>
+        <div class="cursor-pointer" :class="{ disabled: !canSlideLeft }" @click="slideLeft" v-if="idSet.length > 5"><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 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" @click="handleClick(item)"></video-item>
             </a-space>
         </div>
         <!-- 往右 -->
-        <div class="cursor-pointer" @click="slideRight"><icon-right /></div>
-    </a-space>
+        <div class="cursor-pointer ml-2" :class="{ disabled: !canSlideRight }" @click="slideRight" v-if="idSet.length > 5"><icon-right /></div>
+    </div>
 </template>
 
 <script setup lang="ts">
 import VideoItem from './videoItem.vue'
 import { IconLeft, IconRight } from '@arco-design/web-vue/es/icon'
+import { useResizeObserver } from '@vueuse/core'
 
 const ps = defineProps<{
     idSet: Array<any>
 }>()
+const es = defineEmits(['handleClick'])
+const handleClick = (id: string) => {
+    es('handleClick', id)
+}
 
-const sliderWidth = ref(150) //滑块宽度
 const slidePosition = ref(0) //初始位置
-const slideDistance = 150 // 滑动距离
 const animationDuration = 500 // 动画持续时间（毫秒）
+const gap = 8 //滑块间距
+//计算容器宽度
+const wrap = ref()
+const sliderContainerWidth = ref(0)
+useResizeObserver(wrap, (entries) => {
+    const entry = entries[0]
+    const { width } = entry.contentRect
+    sliderContainerWidth.value = width - 100
+    slidePosition.value = 0
+})
+//计算滑块宽度
+const sliderWidth = computed(() => {
+    if (ps.idSet.length > 5) {
+        return sliderContainerWidth.value / 5.5 - gap
+    } else {
+        return sliderContainerWidth.value / 5 - gap
+    }
+})
+//计算滑动距离
+const slideDistance = computed(() => {
+    return sliderWidth.value + gap
+})
 //动画效果
 const sliderStyles = computed(() => {
     return {
@@ -32,28 +57,50 @@ const sliderStyles = computed(() => {
     }
 })
 //点击左滑
+const canSlideLeft = computed(() => {
+    return slidePosition.value < 0
+})
 const slideLeft = () => {
-    slidePosition.value += slideDistance
+    if (canSlideLeft.value) {
+        slidePosition.value += Math.round(slideDistance.value)
+    }
 }
 //点击右滑
+const canSlideRight = computed(() => {
+    return slidePosition.value > -(ps.idSet.length - 5) * slideDistance.value
+})
 const slideRight = () => {
-    slidePosition.value -= slideDistance
+    if (canSlideRight.value) {
+        slidePosition.value -= Math.round(slideDistance.value)
+    }
 }
-//获取宽度
+//获取容器宽度
+const getSliderContainerWidth = computed(() => {
+    return sliderContainerWidth.value + 'px'
+})
+//获取滑块宽度
 const getSliderWidth = computed(() => {
     return sliderWidth.value + 'px'
 })
+//获取滑块高度
+const getSliderHeight = computed(() => {
+    return (sliderWidth.value / 16) * 9 + 'px'
+})
 </script>
 <style lang="less" scoped>
+.disabled {
+    color: #aaa;
+    cursor: not-allowed;
+}
 .slider-container {
-    max-width: 840px;
+    max-width: v-bind(getSliderContainerWidth);
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
     position: relative;
     .slider-item {
-        width: v-bind('getSliderWidth');
-        height: 120px;
+        width: v-bind(getSliderWidth);
+        height: v-bind(getSliderHeight);
     }
 }
 </style>