perf(src/packages): 小组件大标题新增图片

@@ -3,10 +3,12 @@ import { CreateComponentType } from '@/packages/index.d'
 import { Headline1Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
+import headerBg08 from '@/assets/external/headbackground/headerBg08.png'
+
 
 export const option = {
   dataset: '物联网平台数据统计',
-  bgSrc: 'src/assets/external/headbackground/headerBg08.png',
+  bgSrc: headerBg08,
   fontSize: 36,
   showRight:true,
   textColor:'#00f6ff',

@@ -3,8 +3,12 @@
     <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
+            :show-file-list="false"
+            v-model:file-list="uploadFileListRef"
+            :customRequest="customRequest"
+            :onBeforeUpload="beforeUploadHandle"
+          >
             <n-upload-dragger>
               <img v-if="optionData.backgroundImage" class="upload-show" :src="optionData.backgroundImage" alt="背景" />
               <div class="upload-img" v-show="!optionData.backgroundImage">
@@ -28,8 +32,17 @@
     </setting-item-box>
     <setting-item-box name="背景选择" :alone="true">
       <setting-item>
-        <n-select size="small" placeholder="请选择您要使用的背景" style="width: 250px" v-model:value="selectValue"
-          :options="selectBgOptions" @update:value="selectBgValueHandle" />
+        <NSelect
+          size="small"
+          placeholder="请选择您要使用的背景"
+          style="width: 250px"
+          :value="selectValue"
+          :options="getAllBackgroundImageList"
+          :render-label="renderOption"
+          clearable
+          filterable
+          @update:value="selectBgValueHandle"
+        />
       </setting-item>
     </setting-item-box>
     <setting-item-box name="文字" :alone="true">
@@ -73,7 +86,11 @@
     </setting-item-box>
     <setting-item-box name="文字">
       <setting-item name="字体大小">
-        <n-input-number v-model:value="optionData.textRightFontSize" size="small" placeholder="字体大小"></n-input-number>
+        <n-input-number
+          v-model:value="optionData.textRightFontSize"
+          size="small"
+          placeholder="字体大小"
+        ></n-input-number>
       </setting-item>
       <setting-item name="字体位置x轴">
         <n-input-number v-model:value="optionData.xT" size="small" placeholder="字体位置"></n-input-number>
@@ -96,10 +113,10 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, ref, nextTick } from 'vue'
+import { PropType, ref, nextTick, h, computed } from 'vue'
 import { option } from './config'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-import { SelectOption, UploadCustomRequestOptions } from 'naive-ui'
+import { NEllipsis, NImage, NSelect, NSpace, SelectOption, UploadCustomRequestOptions } from 'naive-ui'
 import { backgroundImageSize } from '@/settings/designSetting'
 import { uploadFile } from '@/api/external/contentSave/content'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
@@ -113,23 +130,47 @@ const props = defineProps({
 })
 const uploadFileListRef = ref()
 
-const selectBgOptions = ref<Array<SelectOption>>([])
+const selectValue = ref('headerBg08.png')
 
-const selectValue = ref('headerBg08')
+const getAllBackgroundImageList = computed(() => {
+  const pathList = import.meta.glob('../../../../../../assets/external/headbackground/*')
+  return Object.keys(pathList).map(item => {
+    const imgName = item.split('/').at(-1)
+    return {
+      label: imgName,
+      value: imgName
+    } as SelectOption
+  })
+})
+
+const renderOption = (option: SelectOption) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, {
+      width: 50,
+      src: getBackgroundImagePath(option.value as string),
+      previewDisabled: true,
+      style: { height: '28px' }
+    } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
+
+const isHref = (url: string) => {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
 
-// TODO待封装 成传文件夹名字获取下面所有图片
-const getFetchImages = () => {
-  const imagesModules: Record<string, { default: string }> = import.meta.glob('@/assets/external/headbackground/*', { eager: true })
-  selectBgOptions.value = Object.keys(imagesModules).map(item => ({
-    label: imagesModules[item]?.default.split('/').at(-1),
-    value: imagesModules[item]?.default
-  }))
+const getBackgroundImagePath = (name: string) => {
+  return isHref(name) ? name : new URL(`../../../../../../assets/external/headbackground/${name}`, import.meta.url).href
 }
-getFetchImages()
 
 const selectBgValueHandle = (value: string) => {
   selectValue.value = value
-  props.optionData.bgSrc = value
+  props.optionData.bgSrc =  getBackgroundImagePath(value)
 }
 
 // 上传图片前置处理

@@ -144,7 +144,7 @@ onUnmounted(() => {
 }
 
 .go-n-grid {
-  background: url(@/assets/external/headbackground/headerBg08.png) center no-repeat;
+  // background: url(@/assets/external/headbackground/headerBg08.png) center no-repeat;
   background-size: 100% 100%;
   text-align: center;
   font-size: 36px;