Merge branch 'ft' into 'main_dev'

feat(external/Composes): 大屏新增三维模型上传和自定义轮播图功能和修复Threejs无法生成缩略图问题

See merge request yunteng/thingskit-view!63

@@ -45,6 +45,7 @@
     "three": "^0.145.0",
     "video.js": "^7.20.3",
     "vue": "^3.2.31",
+    "vue-3d-loader": "^2.1.7",
     "vue-demi": "^0.13.1",
     "vue-i18n": "^9.2.2",
     "vue-router": "4.0.12",

-import { defHttp } from "@/utils/external/http/axios";
-import { DictItem, UploadResponse } from "./model";
+import { defHttp } from '@/utils/external/http/axios'
+import { DictItem, UploadResponse } from './model'
 
 enum Api {
   GET_DICT = '/dict_item',
-  UPLOAD = '/oss/upload'
+  UPLOAD = '/oss/upload',
+  DOWNLOAD = '/oss/download_file/'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -21,3 +22,7 @@ export const upload = (file: FormData) => {
     params: file
   })
 }
+
+export const downloadFile = (fileName: string) => {
+  return defHttp.get({ url: `${Api.DOWNLOAD}${fileName}` })
+}

@@ -27,12 +27,21 @@ export class Basic {
 
     this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000)
     this.camera.position.set(0, 30, -250)
-
+   /**
+   * 这里升级版本有冲突,升级版本可以使用这里的代码，官方还未修复
+   * 修复官方Threejs生成缩略图无效问题，少加一个Threejs配置
+   * 修改后的代码在注释之间，并标注好源代码和修改后代码，方便回溯
+   * 源代码 属于新增代码，源代码无
+   * 修改后代码 preserveDrawingBuffer: true //缩略图生效需开启
+   * 
+   */
     this.renderer = new THREE.WebGLRenderer({
       // canvas: this.dom,
       alpha: true, // 透明
-      antialias: true // 抗锯齿
+      antialias: true, // 抗锯齿
+      preserveDrawingBuffer: true//缩略图生效需开启
     })
+    //ft
     this.renderer.setPixelRatio(window.devicePixelRatio) // 设置屏幕像素比
     this.renderer.setSize(window.innerWidth, window.innerHeight) // 设置渲染器宽高
     this.dom.appendChild(this.renderer.domElement) // 添加到dom中

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { ThreeDimensionalConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import { chartInitConfig } from '@/settings/designSetting'
+
+export const option = {
+  //vue3dLoader支持数组或字符串，暂且绑定字符串，这个插件可以加载多个模型
+  dataset: "",
+  backgroundColor: '', //场景背景色
+  backgroundAlpha: 0, //场景透明度
+  enableDamping: false, //是否启用阻尼
+  dampingFactor: 0.05, //阻尼值
+  autoPlay: true, //三维动画是否启用自动播放
+  /**
+   * 输出编码，可取值为 liner 或 sRGB。
+   * linear 是 LinearEncoding 线性编码,
+   * sRGB 即 sRGBEncoding rgb 模式编码（sRGBEncoding 能更好的还原材质颜色）
+   */
+  outputEncoding: 'liner',
+  clearScene: false, //是否清空场景内容
+  lights: [] //灯光，暂且没实现
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ThreeDimensionalConfig.key
+  public attr = { ...chartInitConfig, zIndex: 1, w: 600, h: 500 }
+  public chartConfig = cloneDeep(ThreeDimensionalConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="三维配置" :expanded="true">
+    <setting-item-box name="文件上传" :alone="true">
+      <setting-item :name="fileSizeMsg">
+        <n-upload
+          :max="1"
+          :customRequest="customRequest"
+          :onBeforeUpload="beforeUploadHandle"
+          :default-file-list="defaultFileList"
+        >
+          <n-button> 上传文件</n-button>
+        </n-upload>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="属性配置">
+      <setting-item name="场景色(需要这种格式HEX #000000，否则失效)">
+        <n-color-picker size="small" :show-alpha="false" v-model:value="optionData.backgroundColor"></n-color-picker>
+      </setting-item>
+      <SettingItem name="场景透明度">
+        <n-input-number :min="0" :max="1" v-model:value="optionData.backgroundAlpha" />
+      </SettingItem>
+      <SettingItem name="启用阻尼">
+        <n-switch v-model:value="optionData.enableDamping" size="small" />
+      </SettingItem>
+      <SettingItem v-if="optionData.enableDamping" name="阻尼值">
+        <n-input-number v-model:value="optionData.dampingFactor" :min="0" :max="1" size="small"></n-input-number>
+      </SettingItem>
+      <SettingItem name="启用动画">
+        <n-switch v-model:value="optionData.autoPlay" size="small" />
+      </SettingItem>
+      <SettingItem name="输出编码">
+        <n-select v-model:value="optionData.outputEncoding" size="small" :options="encodinghList"></n-select>
+      </SettingItem>
+      <SettingItem name="是否清空场景">
+        <n-switch @change="handleChange" v-model:value="optionData.clearScene" size="small" />
+      </SettingItem>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, h, ref, nextTick } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { NInputNumber, NSelect } from 'naive-ui'
+import { uploadFile } from '@/api/external/contentSave/content'
+import { UploadCustomRequestOptions } from 'naive-ui'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const defaultFileList = ref([])
+
+//文件限制大小
+const fileSizeConst = ref(50)
+
+/**
+ * 三维文件格式,vue-3d-loader是这个插件支持的格式，其他格式待解决
+ */
+const threeSupportFileFormat = ['fbx', 'obj', 'gltf', 'stl', 'dae', 'glb', 'ply', 'json']
+
+const fileSizeMsg = ref(`文件需小于 ${fileSizeConst.value}M ，格式为${threeSupportFileFormat.join(',')}的文件`)
+
+const handleChange = (e: boolean) => {
+  if (e) props.optionData.dataset = ''
+}
+
+const encodinghList = [
+  { label: 'linear', value: 'linear' },
+  { label: 'sRGB ', value: 'sRGB ' }
+]
+
+
+const extname = (filename: string) => {
+  if (!filename || typeof filename != 'string') {
+    return false
+  }
+  let a = filename.split('').reverse().join('')
+  let b = a.substring(0, a.search(/\./)).split('').reverse().join('')
+  return b
+}
+
+// 上传图片前置处理
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+const beforeUploadHandle = async ({ file }) => {
+  defaultFileList.value = []
+  const type = extname(file.file.name) as string
+  const size = file.file.size
+  if (size / (1024 * 1024) > fileSizeConst.value) {
+    window['$message'].warning(`文件超出 ${fileSizeConst.value}M限制，请重新上传！`)
+    return false
+  }
+  if (!threeSupportFileFormat.includes(type)) {
+    window['$message'].warning('文件格式不符合，请重新上传！')
+    return false
+  }
+  return true
+}
+
+// 自定义上传操作
+const customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      const formData = new FormData()
+      formData.append('file', file.file)
+      const uploadRes = await uploadFile(formData)
+      if (uploadRes) {
+        props.optionData.dataset = uploadRes?.fileStaticUri
+        window['$message'].success('上传文件成功！')
+      }
+    } else {
+      window['$message'].error('上传文件失败，请稍后重试！')
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped></style>

+import { ChartFrameEnum, ConfigType } from '@/packages/index.d'
+import { EPackagesCategoryEnum } from '@/packages/components/external/types'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, chartKey, conKey } = useWidgetKey('ThreeDimensional')
+export const ThreeDimensionalConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '三维模型',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: EPackagesCategoryEnum.COMPOSES,
+  chartFrame: ChartFrameEnum.NAIVE_UI,
+  image: 'threeDimensional.png'
+}

+<template>
+  <div class="go-content-box">
+    <div v-if="supportWebGL">
+      <vue3dLoader
+        ref="vue3dLoaderRef"
+        :webGLRendererOptions="webGLRendererOptions"
+        :backgroundColor="backgroundColor"
+        :backgroundAlpha="backgroundAlpha"
+        :height="h"
+        :width="w"
+        :filePath="dataset"
+        :autoPlay="autoPlay"
+        :enableDamping="enableDamping"
+        :outputEncoding="outputEncoding"
+        :clearScene="clearScene"
+        :dampingFactor="dampingFactor"
+        @process="onProcess"
+        @load="onLoad"
+        @click="onClick"
+      />
+      <div v-show="show" class="process">
+        <span> 拼命加载中... </span>
+        <n-progress type="line" :color="themeColor" :percentage="process" :indicator-placement="'inside'" processing />
+      </div>
+    </div>
+    <div v-else>您的浏览器不支持WebGL!</div>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, ref, onMounted, nextTick, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { vue3dLoader } from 'vue-3d-loader'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+
+const designStore = useDesignStore()
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+const vue3dLoaderRef = ref(null)
+
+//threejs配置
+const webGLRendererOptions = {
+  alpha: true, // 透明
+  antialias: true, // 抗锯齿
+  // fix: 预览三维图像需加上preserveDrawingBuffer: true
+  preserveDrawingBuffer: true //缩略图生效需开启
+}
+
+//三维模型加载
+const show = ref(false)
+
+const onLoad = async () => {
+  //加载完成
+  await nextTick()
+  show.value = false
+}
+
+//三维模型进度条
+const process = ref(0)
+
+const onProcess = (event: any) => {
+  process.value = Math.floor((event.loaded / event.total) * 100)
+}
+
+const onClick = (event: any) => {
+  console.log(event)
+}
+
+//判断浏览器是否支持WebGL
+const supportWebGL = ref(true)
+const detectWebGLContext = () => {
+  let canvas = document.createElement('canvas')
+  let gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
+  if (gl && gl instanceof WebGLRenderingContext) {
+    supportWebGL.value = true
+  } else {
+    supportWebGL.value = false
+  }
+}
+
+onMounted(() => {
+  detectWebGLContext()
+  console.log(`实例`, vue3dLoaderRef.value)
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const {
+  backgroundColor,
+  backgroundAlpha,
+  autoPlay,
+  enableDamping,
+  dataset,
+  outputEncoding,
+  clearScene,
+  dampingFactor
+} = toRefs(props.chartConfig.option) as any
+</script>
+
+<style lang="scss" scoped>
+.go-content-box {
+  height: 100%;
+  position: relative;
+  .process {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>

@@ -2,5 +2,6 @@ import { Title1Config } from './Title1/index'
 import { Title2Config } from './Title2/index'
 import { Title3Config } from './Title3/index'
 import { CameraConfig } from './Camera/index'
+import { ThreeDimensionalConfig } from './ThreeDimensional/index'
 
-export default [Title1Config, Title2Config, Title3Config, CameraConfig]
+export default [Title1Config, Title2Config, Title3Config, CameraConfig, ThreeDimensionalConfig]

+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 = []

+import dayjs from 'dayjs'
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { OverrideInputsDateConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
+  // 下拉展示
+  isPanel: 0,
+  dataset: dayjs().valueOf(),
+  selectStyleOptions: {
+    textColor: 'black',
+    textBackgroundColor: 'white',
+    textBackgroundColorAlpha: 1,
+    iconColor:'black',
+    //弹出下拉框
+    textSelectModalBackgroundColor: 'white',
+    textSelectModalTextColor: 'black'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideInputsDateConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideInputsDateConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="展示方式" :expanded="true">
+    <setting-item-box name="选择方式">
+      <n-select v-model:value="optionData.isPanel" size="small" :options="panelOptions" />
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="时间配置" :expanded="true">
+    <setting-item-box name="基础">
+      <setting-item name="类型">
+        <n-select v-model:value="optionData.componentInteractEventKey" size="small" :options="datePickerTypeOptions" />
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="默认值" :alone="true">
+      <n-date-picker size="small" v-model:value="optionData.dataset" :type="optionData.componentInteractEventKey" />
+    </setting-item-box>
+    <setting-item-box name="文字颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textColor = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="背景颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textBackgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textBackgroundColor = 'white'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="透明度" :alone="true">
+      <SettingItem name="透明度">
+        <n-input-number
+          :min="0"
+          :max="1"
+          v-model:value="optionData.selectStyleOptions.textBackgroundColorAlpha"
+          clearable
+        />
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="弹出框背景色" :alone="true">
+      <SettingItem name="背景色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textSelectModalBackgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalBackgroundColor = 'white'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="弹出框文字颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textSelectModalTextColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalTextColor = 'black'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="图标颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.iconColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.iconColor = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { icon } from '@/plugins'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+import { ComponentInteractEventEnum } from './interact'
+
+const { HelpOutlineIcon } = icon.ionicons5
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const panelOptions = [
+  {
+    label: '下拉展示',
+    value: 0
+  },
+  {
+    label: '面板展示',
+    value: 1
+  }
+]
+
+const datePickerTypeOptions = [
+  {
+    label: '日期',
+    value: ComponentInteractEventEnum.DATE
+  },
+  {
+    label: '日期时间',
+    value: ComponentInteractEventEnum.DATE_TIME
+  },
+  {
+    label: '日期范围',
+    value: ComponentInteractEventEnum.DATE_RANGE
+  },
+  {
+    label: '月份',
+    value: ComponentInteractEventEnum.MONTH
+  },
+  {
+    label: '月份范围',
+    value: ComponentInteractEventEnum.MONTH_RANGE
+  },
+  {
+    label: '年份',
+    value: ComponentInteractEventEnum.YEAR
+  },
+  {
+    label: '年份范围',
+    value: ComponentInteractEventEnum.YEAR_RANGE
+  },
+  {
+    label: '季度',
+    value: ComponentInteractEventEnum.QUARTER
+  },
+  {
+    label: '季度范围',
+    value: ComponentInteractEventEnum.QUARTER_RANGE
+  }
+]
+</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('OverrideInputsDate', true)
+
+export const OverrideInputsDateConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义时间选择器',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_date.png'
+}

+<template>
+  <n-date-picker
+    v-model:value="option.dataset"
+    :panel="!!chartConfig.option.isPanel"
+    :type="chartConfig.option.componentInteractEventKey"
+    :style="`width:${w}px;`"
+    :to="false"
+    @update:value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import dayjs from 'dayjs'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const {
+  textColor,
+  textBackgroundColor,
+  iconColor,
+  textBackgroundColorAlpha,
+  textSelectModalBackgroundColor,
+  textSelectModalTextColor
+} = toRefs(props.chartConfig.option.selectStyleOptions) as any
+
+const rangeDate = ref<number | number[]>()
+
+const option = shallowReactive({
+  dataset: props.chartConfig.option.dataset
+})
+
+// 监听事件改变
+const onChange = (v: number | number[]) => {
+  if (v instanceof Array) {
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      {
+        [ComponentInteractParamsEnum.DATE_START]: v[0],
+        [ComponentInteractParamsEnum.DATE_END]: v[1],
+        [ComponentInteractParamsEnum.DATE_RANGE]: `${v[0]}-${v[1]}`
+      },
+      InteractEventOn.CHANGE
+    )
+  } else {
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATE]: v },
+      InteractEventOn.CHANGE
+    )
+  }
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: number | number[]) => {
+    option.dataset = newData
+    // 关联目标组件首次请求带上默认内容
+    onChange(newData)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-input {
+    height: v-bind('h + "px"');
+    display: flex;
+    align-items: center;
+    background: v-bind('textBackgroundColor') !important;
+  }
+  .n-input__input-el {
+    color: v-bind('textColor') !important;
+  }
+  .n-input__placeholder {
+    color: v-bind('textColor') !important;
+  }
+  .n-base-icon {
+    color: v-bind('iconColor') !important;
+  }
+  .n-date-panel{
+    background: v-bind('textSelectModalBackgroundColor') !important;;
+  }
+}
+</style>

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATE = 'date',
+  DATE_TIME = 'datetime',
+  DATE_RANGE = 'daterange',
+  DATE_TIME_RANGE = 'datetimerange',
+  MONTH = 'month',
+  MONTH_RANGE = 'monthrange',
+  YEAR = 'year',
+  YEAR_RANGE = 'yearrange',
+  QUARTER = 'quarter',
+  QUARTER_RANGE = 'quarterrange'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATE = 'date',
+  DATE_START = 'dateStart',
+  DATE_END = 'dateEnd',
+  DATE_RANGE = 'daterange'
+}
+
+const time = [
+  {
+    value: ComponentInteractParamsEnum.DATE,
+    label: '日期'
+  }
+]
+
+const timeRange = [
+  {
+    value: ComponentInteractParamsEnum.DATE_START,
+    label: '开始时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_END,
+    label: '结束时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_RANGE,
+    label: '日期范围'
+  }
+]
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATE]: time,
+      [ComponentInteractEventEnum.DATE_TIME]: time,
+      [ComponentInteractEventEnum.DATE_RANGE]: timeRange,
+      [ComponentInteractEventEnum.MONTH]: time,
+      [ComponentInteractEventEnum.MONTH_RANGE]: timeRange,
+      [ComponentInteractEventEnum.QUARTER]: time,
+      [ComponentInteractEventEnum.QUARTER_RANGE]: timeRange,
+      [ComponentInteractEventEnum.YEAR]: time,
+      [ComponentInteractEventEnum.YEAR_RANGE]: timeRange,
+    }
+  }
+]

+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import { OverrideSelectConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 默认值
+  selectValue: '1',
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '选项1',
+      value: '1'
+    },
+    {
+      label: '选项2',
+      value: '2'
+    },
+    {
+      label: '选项3',
+      value: '3'
+    }
+  ],
+  selectStyleOptions: {
+    textColor: 'black',
+    textBackgroundColor: 'white',
+    textBackgroundColorAlpha: 1,
+    iconColor:'grey',
+    //弹出下拉框
+    textSelectModalBackgroundColor: 'white',
+    textSelectModalTextColor: 'black'
+  }
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideSelectConfig.key
+  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(OverrideSelectConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="下拉配置" :expanded="true">
+    <setting-item-box name="选择项" :alone="true">
+      <SettingItem name="选择项">
+        <n-select size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="文字颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textColor = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="背景颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textBackgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textBackgroundColor = 'white'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="透明度" :alone="true">
+      <SettingItem name="透明度">
+        <n-input-number
+          :min="0"
+          :max="1"
+          v-model:value="optionData.selectStyleOptions.textBackgroundColorAlpha"
+          clearable
+        />
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="弹出框背景色" :alone="true">
+      <SettingItem name="背景色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textSelectModalBackgroundColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalBackgroundColor = 'white'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="弹出框文字颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.textSelectModalTextColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.textSelectModalTextColor = 'black'">
+          恢复默认
+        </n-button>
+      </SettingItem>
+    </setting-item-box>
+    <setting-item-box name="图标颜色" :alone="true">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.selectStyleOptions.iconColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.selectStyleOptions.iconColor = 'black'"> 恢复默认 </n-button>
+      </SettingItem>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</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('OverrideSelect', true)
+
+export const OverrideSelectConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义下拉选择器',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'inputs_select.png'
+}

+<template>
+  <n-select
+    v-model:value="option.value.selectValue"
+    :options="option.value.dataset"
+    :style="`width:${w}px;`"
+    :to="false"
+    @update:value="onChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const {
+  textColor,
+  textBackgroundColor,
+  iconColor,
+  textBackgroundColorAlpha,
+  textSelectModalBackgroundColor,
+  textSelectModalTextColor
+} = toRefs(props.chartConfig.option.selectStyleOptions) as any
+
+const option = shallowReactive({
+  value: {
+    selectValue: props.chartConfig.option.selectValue,
+    dataset: props.chartConfig.option.dataset
+  }
+})
+
+// 监听事件改变
+const onChange = (v: string) => {
+  // 存储到联动数据
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: v },
+    InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    onChange(newData.selectValue)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>
+
+<style lang="css"></style>
+
+<style lang="scss" scoped>
+@include deep() {
+  .n-base-selection-label {
+    height: v-bind('h + "px"');
+    display: flex;
+    align-items: center;
+    background: v-bind('textBackgroundColor') !important;
+    opacity: v-bind('textBackgroundColorAlpha') !important;
+  }
+  .n-base-selection-input__content {
+    color: v-bind('textColor');
+  }
+  .n-base-icon {
+    color: v-bind('iconColor') !important;
+  }
+  .n-select-menu {
+    background: v-bind('textSelectModalBackgroundColor') !important;
+  }
+  .n-base-select-option__content {
+    color: v-bind('textSelectModalTextColor') !important;
+  }
+}
+</style>

+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATA = 'data'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '选择完成',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATA]: [
+        {
+          value: ComponentInteractParamsEnum.DATA,
+          label: '选择项'
+        }
+      ]
+    }
+  }
+]

@@ -3,6 +3,9 @@ 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'
+import { OverrideSelectConfig } from '@/packages/components/external/Informations/Mores/OverrideSelect'
+import { OverrideInputsDateConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsDate'
 
 export function useInjectLib(packagesList: EPackagesType) {
 
@@ -10,6 +13,9 @@ export function useInjectLib(packagesList: EPackagesType) {
 
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideImageConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideCarouselConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideSelectConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)
 }
 
 /**