perf(src/packages): 优化多个摄像头鼠标移入显示移除隐藏

 <template>
 <template>
-  <div class="banner-box" ref="root">
+  <div 
+    @mouseenter="handleMouseenter"
+    @mouseleave="handleMouseleave"
+   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
@@ -15,8 +18,8 @@
         <span class="video-title">{{ item.name }}</span>
         <span class="video-title">{{ item.name }}</span>
       </div>
       </div>
     </div>
     </div>
-    <a href="javascript:;" class="left" @click="changeSlide('left')"></a>
-    <a href="javascript:;" class="right" @click="changeSlide('right')"></a>
+    <a v-show="isShowSvg" href="javascript:;" class="left" @click="changeSlide('left')"></a>
+    <a v-show="isShowSvg" href="javascript:;" class="right" @click="changeSlide('right')"></a>
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts" name="index">
 <script setup lang="ts" name="index">
@@ -33,6 +36,8 @@ const props = defineProps({
   }
   }
 })
 })
 
 
+const isShowSvg = ref(false)
+
 const { w, h } = toRefs(props.chartConfig.attr)
 const { w, h } = toRefs(props.chartConfig.attr)
 
 
 const option = shallowReactive({
 const option = shallowReactive({
@@ -150,6 +155,12 @@ function changeVideo(dir: string) {
 function changeSlide(dir: string) {
 function changeSlide(dir: string) {
   changeVideo(dir)
   changeVideo(dir)
 }
 }
+
+const handleMouseenter = () => {
+  isShowSvg.value = true
+}
+
+const handleMouseleave = () => (isShowSvg.value = false)
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>