perf(external/Composes): 移除部分代码

+import CameraItem from './CameraItem.vue'
+
+export { CameraItem }

@@ -7,12 +7,13 @@ export const option = {
   dataset: [
   dataset: [
     {
     {
       url: ''
       url: ''
-    },
+    }
   ] as any,
   ] as any,
   // 自动播放的间隔（ms）
   // 自动播放的间隔（ms）
   interval: 5000,
   interval: 5000,
   autoplay: true,
   autoplay: true,
-  effect: 'slide'
+  effect: 'slide',
+  displayMode: 'singleGrid'
 }
 }
 
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -13,6 +13,11 @@
         </n-button>
         </n-button>
       </setting-item>
       </setting-item>
     </setting-item-box>
     </setting-item-box>
+    <setting-item-box name="排布">
+      <setting-item>
+        <n-select v-model:value="optionData.displayMode" size="small" :options="displayModeOptions"></n-select>
+      </setting-item>
+    </setting-item-box>
   </CollapseItem>
   </CollapseItem>
 </template>
 </template>
 
 
@@ -27,4 +32,20 @@ defineProps({
     required: true
     required: true
   }
   }
 })
 })
+
+// 旋转方式
+const displayModeOptions = [
+  {
+    value: 'singleGrid',
+    label: '默认'
+  },
+  {
+    value: 'fourGrid',
+    label: '四宫格'
+  },
+  {
+    value: 'nineGrid',
+    label: '九宫格'
+  }
+]
 </script>
 </script>

 <template>
 <template>
   <div class="banner-box" ref="root">
   <div class="banner-box" ref="root">
-    <div  class="wrapper">
+    <div class="wrapper">
       <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
       <div v-for="(item, index) in option.dataset" :key="index + item" :class="item.className" :style="item.sty">
         <CameraItem
         <CameraItem
           ref="cameraRef"
           ref="cameraRef"
@@ -24,7 +24,7 @@ import { PropType, watch, toRefs, shallowReactive, onMounted, ref } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { CreateComponentType } from '@/packages/index.d'
 import 'video.js/dist/video-js.min.css'
 import 'video.js/dist/video-js.min.css'
 import { option as configOption } from './config'
 import { option as configOption } from './config'
-import CameraItem from './cameraItem.vue'
+import { CameraItem } from './components'
 
 
 const props = defineProps({
 const props = defineProps({
   chartConfig: {
   chartConfig: {
@@ -83,7 +83,7 @@ const computedFunc = (initial: number, source: any) => {
       }
       }
       item.sty = {
       item.sty = {
         transform,
         transform,
-        zIndex,
+        zIndex
       }
       }
       item.className = className
       item.className = className
       return item
       return item
@@ -101,6 +101,7 @@ watch(
     deep: true
     deep: true
   }
   }
 )
 )
+
 option.dataset = computedFunc(initial.value, option.dataset)
 option.dataset = computedFunc(initial.value, option.dataset)
 
 
 watch(
 watch(
@@ -109,6 +110,7 @@ watch(
     option.dataset = computedFunc(newV, option.dataset)
     option.dataset = computedFunc(newV, option.dataset)
   }
   }
 )
 )
+
 // 处理自动轮播
 // 处理自动轮播
 let timer: any = null
 let timer: any = null
 
 
@@ -135,13 +137,11 @@ onMounted(() => {
 // 点击左右按钮切换图片
 // 点击左右按钮切换图片
 function changeVideo(dir: string) {
 function changeVideo(dir: string) {
   if (dir === 'left') {
   if (dir === 'left') {
-    // cameraRef.value?.handleVideoPlay()
     clearInterval(timer)
     clearInterval(timer)
     initial.value++
     initial.value++
     initial.value >= option.dataset.length ? (initial.value = 0) : false
     initial.value >= option.dataset.length ? (initial.value = 0) : false
     return
     return
   }
   }
-  // cameraRef.value?.handleVideoDispose()
   initial.value--
   initial.value--
   initial.value < 0 ? (initial.value = option.dataset.length - 1) : false
   initial.value < 0 ? (initial.value = option.dataset.length - 1) : false
 }
 }
@@ -155,16 +155,13 @@ function changeSlide(dir: string) {
 <style lang="scss" scoped>
 <style lang="scss" scoped>
 .banner-box {
 .banner-box {
   .wrapper {
   .wrapper {
-    // width: 100%;
     height: 100%;
     height: 100%;
-    // position: relative;
     display: flex;
     display: flex;
     overflow: hidden;
     overflow: hidden;
     .slide {
     .slide {
       width: 20%;
       width: 20%;
       height: 100%;
       height: 100%;
       position: absolute;
       position: absolute;
-      // top: 50%;
       left: 10%;
       left: 10%;
       transform: translateX(-50%);
       transform: translateX(-50%);
       transition: 0.5s;
       transition: 0.5s;
@@ -193,12 +190,12 @@ function changeSlide(dir: string) {
   }
   }
   a.left {
   a.left {
     @extend .arrow;
     @extend .arrow;
-    background-image: url(./left.svg);
+    background-image: url(./static/left.svg);
     left: 0px;
     left: 0px;
   }
   }
   a.right {
   a.right {
     @extend .arrow;
     @extend .arrow;
-    background-image: url(./right.svg);
+    background-image: url(./static/right.svg);
     right: 0px;
     right: 0px;
   }
   }
 }
 }