perf: 优化轮播组件

src/packages/components/Informations/Mores/ImageCarousel/config.ts

@@ -1,22 +1,19 @@
 import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
-import { CarouselConfig } from './index'
+import { ImageCarouselConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import logo from '@/assets/logo.png'
 
-// 示例图片资源
-const modules = import.meta.globEager("./images/*");
-const dataset = [logo]
-for (var item in modules) {
-  dataset.push(modules[item].default)
-}
-
 export const option = {
   // 图片资源列表
-  dataset: dataset,
+  dataset: [
+    'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg',
+    'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg',
+    'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg',
+  ],
   // 自动播放
   autoplay: true,
-  // 自动播放的间隔（ms）
+  // 自动播放的间隔（豪秒）
   interval: 5000,
   // 每页显示的图片数量
   slidesPerview: 1,
@@ -41,7 +38,7 @@ export const option = {
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = CarouselConfig.key
+  public key = ImageCarouselConfig.key
-  public chartConfig = cloneDeep(CarouselConfig)
+  public chartConfig = cloneDeep(ImageCarouselConfig)
   public option = cloneDeep(option)
 }

src/packages/components/Informations/Mores/ImageCarousel/config.vue

@@ -1,20 +1,16 @@
 <template>
-  <collapse-item name="属性" :expanded="true">
+  <collapse-item name="路径" :expanded="true">
-    <setting-item-box name="路径" :alone="true">
+      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
-      <setting-item v-for="item, index in optionData.dataset" :key="index">
         <n-input-group>
           <n-input v-model:value="optionData.dataset[index]" size="small" placeholder="请输入图片地址"></n-input>
-          <n-button ghost @click="optionData.dataset.splice(index, 1)">
+          <n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button>
-            -
-          </n-button>
         </n-input-group>
       </setting-item>
       <setting-item>
-        <n-button size="small" @click="optionData.dataset.push('')">
+        <n-button size="small" @click="optionData.dataset.push('')"> + 新增</n-button>
-          +
-        </n-button>
       </setting-item>
-    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="轮播属性" :expanded="true">
     <setting-item-box name="播放器">
       <setting-item>
         <n-space>
@@ -24,7 +20,9 @@
       </setting-item>
       <!-- 开启自动播放时，设置间隔时间 -->
       <setting-item name="间隔时间">
-        <n-input-number v-model:value="optionData.interval" size="small" placeholder=""></n-input-number>
+        <n-input-number v-model:value="optionData.interval" size="small" placeholder="">
+          <template #suffix> 毫秒 </template>
+        </n-input-number>
       </setting-item>
       <setting-item name="轮播方向">
         <n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
@@ -45,7 +43,6 @@
         <n-select v-model:value="optionData.fit" :options="fitList" placeholder="样式" />
       </setting-item>
     </setting-item-box>
-
     <setting-item-box name="指示器">
       <setting-item name="样式">
         <n-select v-model:value="optionData.dotType" :options="dotTypes" placeholder="选择样式" />
@@ -72,18 +69,13 @@
         </n-space>
       </setting-item>
     </setting-item-box>
-
   </collapse-item>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { option } from './config'
-import {
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
   optionData: {
@@ -95,58 +87,58 @@ const props = defineProps({
 // 字典
 const dotTypes = [
   {
-    label: "点",
+    label: '点',
-    value: "dot"
+    value: 'dot'
   },
   {
-    label: "线",
+    label: '线',
-    value: "line"
+    value: 'line'
   }
 ]
 const directions = [
   {
-    label: "水平方向",
+    label: '水平方向',
-    value: "horizontal"
+    value: 'horizontal'
   },
   {
-    label: "垂直方向",
+    label: '垂直方向',
-    value: "vertical"
+    value: 'vertical'
   }
 ]
 const effects = [
   {
-    label: "slide",
+    label: 'slide',
-    value: "slide"
+    value: 'slide'
   },
   {
-    label: "fade",
+    label: 'fade',
-    value: "fade"
+    value: 'fade'
   },
   {
-    label: "card",
+    label: 'card',
-    value: "card"
+    value: 'card'
   },
   {
-    label: "custom",
+    label: 'custom',
-    value: "custom"
+    value: 'custom'
   }
 ]
 const dotPlacements = [
   {
-    label: "上边",
+    label: '上边',
-    value: "top"
+    value: 'top'
   },
   {
-    label: "下边",
+    label: '下边',
-    value: "bottom"
+    value: 'bottom'
   },
   {
-    label: "左边",
+    label: '左边',
-    value: "left"
+    value: 'left'
   },
   {
-    label: "右边",
+    label: '右边',
-    value: "right"
+    value: 'right'
   }
 ]
 
@@ -171,6 +163,6 @@ const fitList = [
   {
     value: 'none',
     label: 'none'
-  },
+  }
 ]
 </script>

src/packages/components/Informations/Mores/ImageCarousel/index.ts

@@ -1,14 +1,14 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
-export const CarouselConfig: ConfigType = {
+export const ImageCarouselConfig: ConfigType = {
-  key: 'Carousel',
+  key: 'ImageCarousel',
-  chartKey: 'VCarousel',
+  chartKey: 'VImageCarousel',
-  conKey: 'VCCarousel',
+  conKey: 'VCImageCarousel',
   title: '轮播图',
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
   chartFrame: ChartFrameEnum.NAIVE_UI,
-  image: 'photo.png'
+  image: 'photo_carousel.png'
 }

src/packages/components/Informations/Mores/ImageCarousel/index.vue

@@ -1,10 +1,28 @@
 <template>
   <div>
-    <n-carousel :autoplay="autoplay" :interval="interval" :centered-slides="centeredSlides" :direction="direction"
+    <n-carousel
-      :dot-placement="dotPlacement" :dot-type="dotType" :draggable="draggable" :effect="effect"
+      :autoplay="autoplay"
-      :slides-per-view="slidesPerview" :show-arrow="showArrow" :show-dots="showDots">
+      :interval="interval"
-      <n-image v-for="url in option.dataset" :object-fit="fit" preview-disabled :src="url"
+      :centered-slides="centeredSlides"
-        :fallback-src="requireErrorImg()" :width="w" :height="h"></n-image>
+      :direction="direction"
+      :dot-placement="dotPlacement"
+      :dot-type="dotType"
+      :draggable="draggable"
+      :effect="effect"
+      :slides-per-view="slidesPerview"
+      :show-arrow="showArrow"
+      :show-dots="showDots"
+    >
+      <n-image
+        v-for="(url, index) in option.dataset"
+        preview-disabled
+        :key="index"
+        :object-fit="fit"
+        :src="url"
+        :fallback-src="requireErrorImg()"
+        :width="w"
+        :height="h"
+      ></n-image>
     </n-carousel>
   </div>
 </template>
@@ -28,7 +46,20 @@ const option = shallowReactive({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { autoplay, interval, slidesPerview, direction, draggable, centeredSlides, effect, dotType, dotPlacement, showArrow, showDots, fit } = toRefs(props.chartConfig.option)
+const {
+  autoplay,
+  interval,
+  slidesPerview,
+  direction,
+  draggable,
+  centeredSlides,
+  effect,
+  dotType,
+  dotPlacement,
+  showArrow,
+  showDots,
+  fit
+} = toRefs(props.chartConfig.option)
 
 watch(
   () => props.chartConfig.option.dataset,

src/packages/components/Informations/Mores/index.ts

@@ -1,7 +1,7 @@
 import { ImageConfig } from './Image/index'
+import { ImageCarouselConfig } from './ImageCarousel/index'
 import { IframeConfig } from './Iframe/index'
 import { VideoConfig } from './Video/index'
 import { WordCloudConfig } from './WordCloud/index'
-import { CarouselConfig } from './Carousel/index'
 
-export default [WordCloudConfig, ImageConfig, VideoConfig, IframeConfig, CarouselConfig]
+export default [ImageConfig, ImageCarouselConfig, VideoConfig, IframeConfig, WordCloudConfig]