perf(external/Composes): 修改摄像头排布

 <template>
-  <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
-    <video 
+  <video
     crossOrigin="anonymous"
-     :id="`my-player${index}`" ref="videoRef" class="video-js my-video vjs-theme-city vjs-big-play-centered">
-      <source :src="sourceSrc" />
-    </video>
-  </div>
+    :id="`my-player${index}`"
+    ref="videoRef"
+    class="video-js my-video vjs-theme-city vjs-big-play-centered"
+  >
+    <source :src="sourceSrc" />
+  </video>
 </template>
 <script setup lang="ts">
 import { onMounted, ref, onUnmounted, watch } from 'vue'
@@ -97,14 +98,8 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.go-content-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .my-video {
-    width: 100% !important;
-    height: 100% !important;
-    position: relative;
-  }
+.my-video {
+  width: 100%;
+  height: 100%;
 }
 </style>

+<template>
+  <div class="go-content-box" :style="{ width: w + 'px', height: h + 'px' }">
+    <video 
+    crossOrigin="anonymous"
+     :id="`my-player${index}`" ref="videoRef" class="video-js my-video vjs-theme-city vjs-big-play-centered">
+      <source :src="sourceSrc" />
+    </video>
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, ref, onUnmounted, watch } from 'vue'
+import videojs from 'video.js'
+import type { VideoJsPlayerOptions } from 'video.js'
+import 'video.js/dist/video-js.min.css'
+
+const props = defineProps({
+  sourceSrc: {
+    type: String
+  },
+  name: {
+    type: String
+  },
+  avatar: {
+    type: String
+  },
+  w: {
+    type: Number,
+    default: 300
+  },
+  h: {
+    type: Number,
+    default: 300
+  },
+  index: {
+    type: Number
+  }
+})
+
+// video标签
+const videoRef = ref<HTMLElement | null>(null)
+
+// video实例对象
+let videoPlayer: videojs.Player | null = null
+
+//options配置
+const options: VideoJsPlayerOptions = {
+  language: 'zh-CN', // 设置语言
+  controls: true, // 是否显示控制条
+  preload: 'auto', // 预加载
+  autoplay: true, // 是否自动播放
+  fluid: false, // 自适应宽高
+  poster: props?.avatar || '',
+  src: props?.sourceSrc || '', // 要嵌入的视频源的源 URL
+  muted: true,
+  userActions: {
+    hotkeys: true
+  }
+}
+
+// 初始化videojs
+const initVideo = () => {
+  if (videoRef.value) {
+    // 创建 video 实例
+    videoPlayer = videojs(videoRef.value, options)
+  }
+}
+
+watch(
+  () => props.sourceSrc,
+  (newData: any) => {
+    // props.sourceSrc = newData
+    videoPlayer?.src(newData) as any
+    videoPlayer?.play()
+  },
+  {
+    immediate: true
+  }
+)
+
+onMounted(() => {
+  initVideo()
+})
+
+onUnmounted(() => {
+  handleVideoDispose()
+})
+
+//播放
+const handleVideoPlay = () => videoPlayer?.play()
+
+const handleVideoDispose = () => videoPlayer?.dispose() && videoPlayer?.pause()
+//暂停
+defineExpose({
+  handleVideoPlay,
+  handleVideoDispose
+})
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .my-video {
+    width: 100% !important;
+    height: 100% !important;
+    position: relative;
+  }
+}
+</style>

@@ -8,7 +8,7 @@
         </n-input-group>
       </setting-item>
       <setting-item>
-        <n-button v-if="optionData.dataset.length < 5" size="small" @click="optionData.dataset.push({ url: '' })">
+        <n-button v-if="optionData.dataset.length < 9" size="small" @click="optionData.dataset.push({ url: '' })">
           +
         </n-button>
       </setting-item>

 <template>
   <div class="banner-box" ref="root">
-    <div class="wrapper">
-      <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
-        <CameraItem
-          ref="cameraRef"
-          :name="item.name"
-          :avatar="item.avatar"
-          :key="item + index"
-          :sourceSrc="item.url"
-          :w="w"
-          :h="h"
-          :index="index"
-        />
-        <span class="video-title">{{ item.name }}</span>
-      </div>
-    </div>
-    <a href="javascript:;" class="left" @click="changeSlide('left')"></a>
-    <a href="javascript:;" class="right" @click="changeSlide('right')"></a>
+    <n-grid x-gap="12" :y-gap="12" :cols="computedCols">
+      <n-gi v-for="(item, index) in option.dataset" :key="index + item">
+        <div class="camera-container">
+          <CameraItem
+            ref="cameraRef"
+            :name="item.name"
+            :avatar="item.avatar"
+            :key="item + index"
+            :sourceSrc="item.url"
+            :index="index"
+          />
+        </div>
+      </n-gi>
+    </n-grid>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, watch, toRefs, shallowReactive, onMounted, ref } from 'vue'
+import { PropType, toRefs, watch, shallowReactive, ref, computed } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import 'video.js/dist/video-js.min.css'
 import { option as configOption } from './config'
@@ -33,68 +30,34 @@ const props = defineProps({
   }
 })
 
-const { w, h } = toRefs(props.chartConfig.attr)
+const { h } = toRefs(props.chartConfig.attr)
+
+const responsiveComputeValue = ref(0)
 
 const option = shallowReactive({
   dataset: configOption.dataset
 })
 
-const cameraRef = ref<InstanceType<typeof CameraItem>>()
-
-let initial = ref(0)
+const computedCols = computed(() => {
+  if (option.dataset.length <= 1) return 1
+  if (option.dataset.length <= 4) return 2
+  return 3
+})
 
-let interval = ref(2500)
+const cameraRef = ref<InstanceType<typeof CameraItem>>()
 
-const computedFunc = (initial: number, source: any) => {
-  if (initial < 0) initial = 0
-  if (Array.isArray(source)) {
-    let len = source.length,
-      temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
-      temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
-      temp3 = initial,
-      temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
-      temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
-    return source?.map((item: any, index: number) => {
-      let transform = `translateX(-50%) scale(0.7)`,
-        zIndex = 0,
-        className = 'slide'
-      switch (index) {
-        case temp3:
-          transform = `translateX(-50%) scale(1)`
-          className = ['slide', 'activate'] as any
-          zIndex = 300
-          break
-        case temp1:
-          transform = `translateX(-80%) scale(0.7)`
-          zIndex = 100
-          break
-        case temp5:
-          transform = `translateX(100%) scale(0.7)`
-          zIndex = 100
-          break
-        case temp2:
-          transform = `translateX(-100%) scale(0.85)`
-          zIndex = 200
-          break
-        case temp4:
-          transform = `translateX(58%) scale(0.85)`
-          zIndex = 200
-          break
-      }
-      item.sty = {
-        transform,
-        zIndex
-      }
-      item.className = className
-      return item
-    })
-  }
+const responsive = (value: number) => {
+  responsiveComputeValue.value = value
+  if (option.dataset.length <= 2) responsiveComputeValue.value = value
+  if (option.dataset.length > 2 && option.dataset.length <= 4) responsiveComputeValue.value = value / 2.03
+  if (option.dataset.length > 4 && option.dataset.length <= 9) responsiveComputeValue.value = value / 3.1
 }
 
 watch(
   () => props.chartConfig.option.dataset,
   newData => {
     option.dataset = newData
+    responsive(h.value)
   },
   {
     immediate: true,
@@ -102,101 +65,19 @@ watch(
   }
 )
 
-option.dataset = computedFunc(initial.value, option.dataset)
-
 watch(
-  () => initial.value,
-  newV => {
-    option.dataset = computedFunc(newV, option.dataset)
+  () => h.value,
+  newData => responsive(newData),
+  {
+    immediate: true
   }
 )
-
-// 处理自动轮播
-let timer: any = null
-
-const autoPlay = () => {
-  timer = setInterval(() => {
-    initial.value++
-    if (initial.value >= option.dataset.length) {
-      initial.value = 0
-    }
-  }, interval.value)
-}
-
-// 鼠标移入移除效果
-let root = ref(null)
-
-onMounted(() => {
-  clearInterval(timer)
-  autoPlay()
-  const box: any = root.value
-  box.onmouseenter = () => clearInterval(timer)
-  box.onmouseleave = () => autoPlay()
-})
-
-// 点击左右按钮切换图片
-function changeVideo(dir: string) {
-  if (dir === 'left') {
-    clearInterval(timer)
-    initial.value++
-    initial.value >= option.dataset.length ? (initial.value = 0) : false
-    return
-  }
-  initial.value--
-  initial.value < 0 ? (initial.value = option.dataset.length - 1) : false
-}
-
-// 左右切换图片设置防抖效果
-function changeSlide(dir: string) {
-  changeVideo(dir)
-}
 </script>
 
 <style lang="scss" scoped>
 .banner-box {
-  .wrapper {
-    height: 100%;
-    display: flex;
-    overflow: hidden;
-    .slide {
-      width: 20%;
-      height: 100%;
-      position: absolute;
-      left: 10%;
-      transform: translateX(-50%);
-      transition: 0.5s;
-      box-shadow: 0 0 4px black;
-      .video-title {
-        width: v-bind('w+"px"');
-        font-size: 30px;
-        color: white;
-        position: absolute;
-        bottom: 6%;
-        left: 10%;
-        z-index: 999;
-      }
-    }
-  }
-  .arrow {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 9;
-    width: 50px;
-    height: 50px;
-    background-size: contain;
-    background-color: white;
-    opacity: 0.5;
-  }
-  a.left {
-    @extend .arrow;
-    background-image: url(./static/left.svg);
-    left: 0px;
-  }
-  a.right {
-    @extend .arrow;
-    background-image: url(./static/right.svg);
-    right: 0px;
+  .camera-container {
+    height: v-bind('`${responsiveComputeValue}px`');
   }
 }
 </style>

+<template>
+  <div class="banner-box" ref="root">
+    <div class="wrapper">
+      <div
+        v-for="(item, index) in option.dataset"
+        :key="index + item"
+        :class="item.className"
+        :style="item.sty"
+      >
+        <CameraItem
+          ref="cameraRef"
+          :name="item.name"
+          :avatar="item.avatar"
+          :key="item + index"
+          :sourceSrc="item.url"
+          :w="w"
+          :h="h"
+          :index="index"
+        />
+        <span class="video-title">{{ item.name }}</span>
+      </div>
+    </div>
+    <a href="javascript:;" class="left" @click="changeSlide('left')"></a>
+    <a href="javascript:;" class="right" @click="changeSlide('right')"></a>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, watch, toRefs, shallowReactive, onMounted, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import 'video.js/dist/video-js.min.css'
+import { option as configOption } from './config'
+import { CameraItem } from './components'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+const cameraRef = ref<InstanceType<typeof CameraItem>>()
+
+let initial = ref(0)
+
+let interval = ref(2500)
+
+const computedFunc = (initial: number, source: any) => {
+  if (initial < 0) initial = 0
+  if (Array.isArray(source)) {
+    let len = source.length,
+      temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
+      temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
+      temp3 = initial,
+      temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
+      temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
+    return source?.map((item: any, index: number) => {
+      let transform = `translateX(-50%) scale(0.7)`,
+        zIndex = 0,
+        className = 'slide'
+      switch (index) {
+        case temp3:
+          transform = `translateX(-50%) scale(1)`
+          className = ['slide', 'activate'] as any
+          zIndex = 300
+          break
+        case temp1:
+          transform = `translateX(-80%) scale(0.7)`
+          zIndex = 100
+          break
+        case temp5:
+          transform = `translateX(100%) scale(0.7)`
+          zIndex = 100
+          break
+        case temp2:
+          transform = `translateX(-100%) scale(0.85)`
+          zIndex = 200
+          break
+        case temp4:
+          transform = `translateX(58%) scale(0.85)`
+          zIndex = 200
+          break
+      }
+      item.sty = {
+        transform,
+        zIndex
+      }
+      item.className = className
+      return item
+    })
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+option.dataset = computedFunc(initial.value, option.dataset)
+
+watch(
+  () => initial.value,
+  newV => {
+    option.dataset = computedFunc(newV, option.dataset)
+  }
+)
+
+// 处理自动轮播
+let timer: any = null
+
+const autoPlay = () => {
+  timer = setInterval(() => {
+    initial.value++
+    if (initial.value >= option.dataset.length) {
+      initial.value = 0
+    }
+  }, interval.value)
+}
+
+// 鼠标移入移除效果
+let root = ref(null)
+
+onMounted(() => {
+  clearInterval(timer)
+  autoPlay()
+  const box: any = root.value
+  box.onmouseenter = () => clearInterval(timer)
+  box.onmouseleave = () => autoPlay()
+})
+
+// 点击左右按钮切换图片
+function changeVideo(dir: string) {
+  if (dir === 'left') {
+    clearInterval(timer)
+    initial.value++
+    initial.value >= option.dataset.length ? (initial.value = 0) : false
+    return
+  }
+  initial.value--
+  initial.value < 0 ? (initial.value = option.dataset.length - 1) : false
+}
+
+// 左右切换图片设置防抖效果
+function changeSlide(dir: string) {
+  changeVideo(dir)
+}
+</script>
+
+<style lang="scss" scoped>
+.banner-box {
+  .wrapper {
+    height: 100%;
+    display: flex;
+    overflow: hidden;
+    .slide {
+      width: 20%;
+      height: 100%;
+      position: absolute;
+      left: 10%;
+      transform: translateX(-50%);
+      transition: 0.5s;
+      box-shadow: 0 0 4px black;
+      .video-title {
+        width: v-bind('w+"px"');
+        font-size: 30px;
+        color: white;
+        position: absolute;
+        bottom: 6%;
+        left: 10%;
+        z-index: 999;
+      }
+    }
+  }
+  .arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 9;
+    width: 50px;
+    height: 50px;
+    background-size: contain;
+    background-color: white;
+    opacity: 0.5;
+  }
+  a.left {
+    @extend .arrow;
+    background-image: url(./static/left.svg);
+    left: 0px;
+  }
+  a.right {
+    @extend .arrow;
+    background-image: url(./static/right.svg);
+    right: 0px;
+  }
+}
+</style>