perf(external/Componse): 重写信息下的图片

+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { OverrideImageConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  // 图片路径
+  dataset: '',
+  // 适应方式
+  fit: 'fill',
+  // 圆角
+  borderRadius: 10
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = OverrideImageConfig.key
+  public chartConfig = cloneDeep(OverrideImageConfig)
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="属性" :expanded="true">
+    <setting-item-box name="上传图片" :alone="true">
+      <setting-item>
+        <n-card class="upload-box">
+          <n-upload
+            :show-file-list="false"
+            v-model:file-list="uploadFileListRef"
+            :customRequest="customRequest"
+            :onBeforeUpload="beforeUploadHandle"
+          >
+            <n-upload-dragger>
+              <img v-if="optionData.dataset" class="upload-show" :src="optionData.dataset" alt="背景" />
+              <div class="upload-img" v-show="!optionData.dataset">
+                <img src="@/assets/images/canvas/noImage.png" />
+                <n-text class="upload-desc" depth="3">
+                  背景图需小于 {{ backgroundImageSize }}M ，格式为 png/jpg/gif 的文件
+                </n-text>
+              </div>
+            </n-upload-dragger>
+          </n-upload>
+        </n-card>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select v-model:value="optionData.fit" size="small" :options="fitList"></n-select>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number
+          v-model:value="optionData.borderRadius"
+          size="small"
+          :min="0"
+          placeholder="圆角"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, nextTick } 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 { backgroundImageSize } from '@/settings/designSetting'
+import { fetchRouteParamsLocation } from '@/utils'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const uploadFileListRef = ref()
+
+// 上传图片前置处理
+//@ts-ignore
+const beforeUploadHandle = async ({ file }) => {
+  uploadFileListRef.value = []
+  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 customRequest = (options: UploadCustomRequestOptions) => {
+  const { file } = options
+  nextTick(async () => {
+    if (file.file) {
+      // 修改名称
+      const newNameFile = new File([file.file], `${fetchRouteParamsLocation()}_index_background.png`, {
+        type: file.file.type
+      })
+      let uploadParams = new FormData()
+      uploadParams.append('file', newNameFile)
+      const uploadRes = await uploadFile(uploadParams)
+      if (uploadRes) {
+        props.optionData.dataset = uploadRes?.fileStaticUri
+        window['$message'].success('添加图片成功！')
+      }
+    } else {
+      window['$message'].error('添加图片失败，请稍后重试！')
+    }
+  })
+}
+
+// 适应类型
+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>
+<style lang="scss" scoped>
+$uploadHeight: 193px;
+.upload-box {
+  cursor: pointer;
+  margin-bottom: 20px;
+  @include deep() {
+    .n-card__content {
+      padding: 0;
+      overflow: hidden;
+    }
+    .n-upload-dragger {
+      padding: 5px;
+    }
+  }
+  .upload-show {
+    width: -webkit-fill-available;
+    height: $uploadHeight;
+    border-radius: 5px;
+  }
+  .upload-img {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    img {
+      height: 150px;
+    }
+    .upload-desc {
+      padding: 10px 0;
+    }
+  }
+}
+</style>

+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('OverrideImage', true)
+
+export const OverrideImageConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '图片2',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.COMMON,        
+  image: 'photo.png'
+}

+<template>
+  <div :style="getStyle(borderRadius)">
+    <n-image
+      :object-fit="fit"
+      preview-disabled
+      :src="!option.dataset ? logo : option.dataset"
+      :fallback-src="requireErrorImg()"
+      :width="w"
+      :height="h"
+    ></n-image>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, shallowReactive, watch, toRefs } from 'vue'
+import { requireErrorImg } from '@/utils'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import logo from '@/assets/logo.png'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: ''
+})
+
+const getStyle = (radius: number) => {
+  return {
+    borderRadius: `${radius}px`,
+    overflow: 'hidden'
+  }
+}
+
+// 编辑更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+</script>

@@ -2,12 +2,14 @@ import { EPackagesCategoryEnum, EPackagesType } from '@/packages/components/exte
 import { ComposesList } from '@/packages/components/external/Composes'
 import { ComposesList } from '@/packages/components/external/Composes'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon'
 import { ClockConfig } from '@/packages/components/external/Decorates/Mores/Icon'
+import { OverrideImageConfig } from '@/packages/components/external/Informations/Mores/OverrideImage'
 
 
 export function useInjectLib(packagesList: EPackagesType) {
 export function useInjectLib(packagesList: EPackagesType) {
 
 
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
   packagesList[EPackagesCategoryEnum.COMPOSES] = ComposesList
 
 
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.DECORATES, ClockConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideImageConfig)
 }
 }
 
 
 /**
 /**