perf(external/Composes): 新增自定义轮播图功能

@@ -29,12 +29,12 @@ const props = defineProps({
   }
 })
 
-//三维静态文件
+//三维模型静态文件
 const filePath = ref()
 
 filePath.value = ['src/assets/external/models/fbx/Samba Dancing.fbx']
 
-//三维加载事件相关
+//三维模型加载事件相关
 const show = ref(false)
 
 const currentModelIndex = ref()
@@ -55,7 +55,7 @@ const onProcess = (event: any, index: number) => {
     show.value = false
   }
 }
-//三维加载事件
+//三维模型加载事件相关
 
 const { w, h } = toRefs(props.chartConfig.attr)
 </script>

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideCarouselConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  // 图片资源列表
+  dataset: [],
+  // 自动播放
+  autoplay: true,
+  // 自动播放的间隔（ms）
+  interval: 5000,
+  // 每页显示的图片数量
+  slidesPerview: 1,
+  // 轮播方向
+  direction: 'horizontal',
+  // 拖曳切换
+  draggable: true,
+  // 居中显示
+  centeredSlides: false,
+  // 过渡效果
+  effect: 'slide',
+  // 是否显示指示点
+  showDots: true,
+  // 指示器样式
+  dotType: 'dot',
+  // 指示器位置
+  dotPlacement: 'bottom',
+  // 显示箭头
+  showArrow: false,
+  // 图片样式
+  fit: 'contain'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideCarouselConfig.key
+  public chartConfig = cloneDeep(OverrideCarouselConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="路径" :alone="true">
+      <n-upload
+        :max="5"
+        v-model:file-list="fileList"
+        :customRequest="customRequest"
+        :onBeforeUpload="beforeUploadHandle"
+        @change="handleUploadChange"
+      >
+        <n-button>上传图片</n-button>
+      </n-upload>
+    </setting-item-box>
+    <setting-item-box name="播放器">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.autoplay" size="small" />
+          <n-text>自动播放</n-text>
+        </n-space>
+      </setting-item>
+      <!-- 开启自动播放时，设置间隔时间 -->
+      <setting-item name="间隔时间">
+        <n-input-number v-model:value="optionData.interval" size="small" placeholder=""></n-input-number>
+      </setting-item>
+      <setting-item name="轮播方向">
+        <n-select v-model:value="optionData.direction" :options="directions" placeholder="选择方向" />
+      </setting-item>
+      <setting-item name="过渡效果">
+        <n-select v-model:value="optionData.effect" :options="effects" placeholder="效果" />
+      </setting-item>
+      <setting-item name="每页数量">
+        <n-input-number v-model:value="optionData.slidesPerview" size="small" placeholder=""></n-input-number>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.centeredSlides" size="small" />
+          <n-text>居中显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="图片样式">
+        <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="选择样式" />
+      </setting-item>
+      <setting-item name="位置">
+        <n-select v-model:value="optionData.dotPlacement" :options="dotPlacements" placeholder="选择位置" />
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showDots" size="small" />
+          <n-text>显示</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showArrow" size="small" />
+          <n-text>箭头</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.draggable" size="small" />
+          <n-text>拖曳切换</n-text>
+        </n-space>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, nextTick, watch } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { FileTypeEnum } from '@/enums/fileTypeEnum'
+import { uploadFile } from '@/api/external/contentSave/content'
+import { UploadCustomRequestOptions } from 'naive-ui'
+import type { UploadFileInfo } from 'naive-ui'
+import { backgroundImageSize } from '@/settings/designSetting'
+import { fetchRouteParamsLocation } from '@/utils'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const fileList = ref<UploadFileInfo[]>([])
+
+watch(
+  () => props.optionData,
+  newValue => {
+    console.log(newValue)
+    fileList.value = newValue?.dataset
+  },
+  {
+    immediate: true
+  }
+)
+
+// 上传图片前置处理
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+const beforeUploadHandle = async ({ file }) => {
+  const type = file.file.type
+  const size = file.file.size
+  if (size > 1024 * 1024 * backgroundImageSize) {
+    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
+    return false
+  }
+  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
+    window['$message'].warning('文件格式不符合，请重新上传！')
+    return false
+  }
+  return true
+}
+
+const handleUploadChange = (data: { fileList: UploadFileInfo[] }) => {
+  console.log(data.fileList)
+  props.optionData.dataset = data.fileList as never as any
+}
+
+// 自定义上传操作
+const customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      // 修改名称
+      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}`, {
+        type: file.file.type
+      })
+      let uploadParams = new FormData()
+      uploadParams.append('file', newNameFile)
+      const uploadRes = await uploadFile(uploadParams)
+      if (uploadRes) {
+        fileList.value.push({
+          id: -Math.random() + '',
+          name: uploadRes?.fileName,
+          status: 'finished',
+          url: uploadRes?.fileStaticUri
+        })
+        const fileArr = fileList.value.filter((item: UploadFileInfo) => {
+          return item.status === 'finished'
+        })
+        fileList.value = fileArr
+        console.log(fileList.value)
+        props.optionData.dataset = fileList.value as never as any
+        window['$message'].success('添加图片成功！')
+      }
+    } else {
+      window['$message'].error('添加图片失败，请稍后重试！')
+    }
+  })
+}
+
+// 字典
+const dotTypes = [
+  {
+    label: '点',
+    value: 'dot'
+  },
+  {
+    label: '线',
+    value: 'line'
+  }
+]
+const directions = [
+  {
+    label: '水平方向',
+    value: 'horizontal'
+  },
+  {
+    label: '垂直方向',
+    value: 'vertical'
+  }
+]
+const effects = [
+  {
+    label: 'slide',
+    value: 'slide'
+  },
+  {
+    label: 'fade',
+    value: 'fade'
+  },
+  {
+    label: 'card',
+    value: 'card'
+  },
+  {
+    label: 'custom',
+    value: 'custom'
+  }
+]
+const dotPlacements = [
+  {
+    label: '上边',
+    value: 'top'
+  },
+  {
+    label: '下边',
+    value: 'bottom'
+  },
+  {
+    label: '左边',
+    value: 'left'
+  },
+  {
+    label: '右边',
+    value: 'right'
+  }
+]
+
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  }
+]
+</script>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('OverrideCarousel', true)
+
+export const OverrideCarouselConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义轮播图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'photo.png'
+}

+<template>
+  <div>
+    <n-carousel
+      :autoplay="autoplay"
+      :interval="interval"
+      :centered-slides="centeredSlides"
+      :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="(item, index) in option.dataset"
+        :key="index"
+        :object-fit="fit"
+        preview-disabled
+        :src="item.url"
+        :fallback-src="requireErrorImg()"
+        :width="w"
+        :height="h"
+      ></n-image>
+    </n-carousel>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const option: any = shallowReactive({
+  dataset: configOption.dataset
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const {
+  autoplay,
+  interval,
+  slidesPerview,
+  direction,
+  draggable,
+  centeredSlides,
+  effect,
+  dotType,
+  dotPlacement,
+  showArrow,
+  showDots,
+  fit
+} = toRefs(props.chartConfig.option)
+
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>

@@ -58,6 +58,7 @@ const props = defineProps({
 const uploadFileListRef = ref()
 
 // 上传图片前置处理
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
 const beforeUploadHandle = async ({ file }) => {
   uploadFileListRef.value = []

@@ -3,6 +3,7 @@ import { ComposesList } from '@/packages/components/external/Composes'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon'
 import { OverrideImageConfig } from '@/packages/components/external/Informations/Mores/OverrideImage'
+import {OverrideCarouselConfig } from '@/packages/components/external/Informations/Mores/OverrideCarousel'
 
 export function useInjectLib(packagesList: EPackagesType) {
 
@@ -10,6 +11,7 @@ export function useInjectLib(packagesList: EPackagesType) {
 
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideImageConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)
 }
 
 /**