fix(background): 修复生产环境与开发环境保存的静态资源路径不一致

@@ -32,4 +32,7 @@ module.exports = {
     'vue/valid-template-root': 'off',
     'vue/no-mutating-props': 'off',
   },
+  global: {
+    Recordable: 'readonly'
+  }
 }

@@ -7,11 +7,12 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     VITE_GLOB_API_URL,
     VITE_GLOB_APP_SHORT_NAME,
     VITE_GLOB_API_URL_PREFIX,
-    VITE_GLOB_UPLOAD_URL, 
+    VITE_GLOB_UPLOAD_URL,
     VITE_GLOB_WEB_SOCKET,
-    VITE_GLOB_CONTENT_SECURITY_POLICY, 
+    VITE_GLOB_CONTENT_SECURITY_POLICY,
+    VITE_GLOB_PUBLIC_PATH
   } = getAppEnvConfig();
-  
+
   if (!/[a-zA-Z_]*/.test(VITE_GLOB_APP_SHORT_NAME)) {
     console.warn(
       `VITE_GLOB_APP_SHORT_NAME Variables can only be characters/underscores, please modify in the environment variables and re-running.`
@@ -24,10 +25,11 @@ export const useGlobSetting = (): Readonly<GlobConfig> => {
     apiUrl: VITE_GLOB_API_URL,
     shortName: VITE_GLOB_APP_SHORT_NAME,
     urlPrefix: VITE_GLOB_API_URL_PREFIX,
-    uploadUrl: VITE_GLOB_UPLOAD_URL, 
+    uploadUrl: VITE_GLOB_UPLOAD_URL,
     socketUrl: VITE_GLOB_WEB_SOCKET,
     securityPolicy: VITE_GLOB_CONTENT_SECURITY_POLICY,
+    publicPath: VITE_GLOB_PUBLIC_PATH
   };
- 
+
   return glob as Readonly<GlobConfig>;
 };

@@ -80,7 +80,7 @@ const selectBgOptions = ref<Array<SelectOption>>([])
 
 const selectValue = ref('')
 
-//TODO待封装 成传文件夹名字获取下面所有图片
+// TODO待封装 成传文件夹名字获取下面所有图片
 const getFetchImages = () => {
   const imagesModules = import.meta.globEager('@/assets/external/headbackground/*')
   selectBgOptions.value = Object.keys(imagesModules).map(item => ({

@@ -34,7 +34,8 @@ export function getAppEnvConfig() {
     VITE_GLOB_UPLOAD_URL,
     VITE_GLOB_WEB_SOCKET,
     VITE_GLOB_ALARM_NOTIFY_DURATION,
-    VITE_GLOB_CONTENT_SECURITY_POLICY
+    VITE_GLOB_CONTENT_SECURITY_POLICY,
+    VITE_GLOB_PUBLIC_PATH
   } = ENV;
 
   if (!/^[a-zA-Z\_]*$/.test(VITE_GLOB_APP_SHORT_NAME)) {
@@ -51,7 +52,8 @@ export function getAppEnvConfig() {
     VITE_GLOB_UPLOAD_URL,
     VITE_GLOB_WEB_SOCKET,
     VITE_GLOB_ALARM_NOTIFY_DURATION,
-    VITE_GLOB_CONTENT_SECURITY_POLICY
+    VITE_GLOB_CONTENT_SECURITY_POLICY,
+    VITE_GLOB_PUBLIC_PATH
   };
 }
 

+import { useGlobSetting } from "@/hooks/external/setting"
+import { SelectOption } from "naive-ui"
+import { ProjectRuntimeEnvEnum } from "../../../build/external/envEnum"
+
+export const useSyncAssetsFile = () => {
+  const { publicPath } = useGlobSetting()
+  const staticDir = 'static'
+  const isDev = [ProjectRuntimeEnvEnum.DEV, ProjectRuntimeEnvEnum.DEV_ALONE].includes(import.meta.env.MODE as ProjectRuntimeEnvEnum)
+  const jpgModules = import.meta.glob('../../assets/**/*.jpg')
+  const pngModules = import.meta.glob('../../assets/**/*.png')
+  const imagesModules = { ...jpgModules, ...pngModules }
+
+  const getFileInfo = (filePath: string) => {
+    const filePathArr = filePath.split('/')
+    const fileName = filePathArr.at(-1)
+    const fileExt = fileName?.split('.').at(-1)
+    return { fileName, fileExt }
+  }
+
+  const buildFilePath = (fileExt: string, fileName: string) => {
+    return `${publicPath}${staticDir}/${fileExt}/${fileName}`
+  }
+
+  const setPath = (filePath: string) => {
+    if (isDev && filePath) {
+      const { fileExt, fileName } = getFileInfo(filePath)
+      return buildFilePath(fileExt!, fileName!)
+    }
+    return filePath
+  }
+
+  const getPath = (filePath: string) => {
+    if (isDev && filePath) {
+      const { fileName } = getFileInfo(filePath)
+      const imagesKeys = Object.keys(imagesModules)
+      const path = imagesKeys.find(key => key.includes(fileName!))
+      return `/src/${path?.replaceAll('../', '')}`
+    }
+
+    return filePath ?? ''
+  }
+
+  const transformPath = (filesPath: string[]) => {
+    const _filesPath: SelectOption[] = []
+
+    for (const file of filesPath) {
+      const { fileExt, fileName } = getFileInfo(file)
+      _filesPath.push({
+        label: fileName,
+        value: buildFilePath(fileExt!, fileName!)
+      })
+    }
+
+    return _filesPath
+  }
+
+  return { setPath, getPath, transformPath }
+}

+<script lang="ts" setup>
+import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d';
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
+import { NEllipsis, NImage, NSelect, NSpace, NText, SelectOption } from 'naive-ui';
+import { computed, h } from 'vue';
+import { useSyncAssetsFile } from '@/utils/external/useSyncAssetsFile';
+
+const chartEditStore = useChartEditStore()
+const canvasConfig = chartEditStore.getEditCanvasConfig
+
+const { transformPath, setPath, getPath } = useSyncAssetsFile()
+const getSelectBgOptions = computed(() => {
+  const imagesModules = import.meta.globEager('@/assets/external/background/*')
+  return transformPath(Object.keys(imagesModules))
+})
+
+const renderOption = (option: SelectOption) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, { width: 50, src: getPath(option.value as string), previewDisabled: true, class: 'select-image' } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
+
+const handleUpdateValue = (value: string, _option: SelectOption) => {
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, setPath(value))
+}
+
+</script>
+
+
+<template>
+  <NSpace>
+    <NText>背景选择</NText>
+    <NSelect size="small" placeholder="请选择您要使用的背景" style="width: 250px" :value="canvasConfig.backgroundImage"
+      :options="getSelectBgOptions" :render-label="renderOption" @update-value="handleUpdateValue" />
+  </NSpace>
+</template>
+
+<style lang="scss" scoped>
+</style>

@@ -3,34 +3,21 @@
     <n-form inline :label-width="45" size="small" label-placement="left">
       <n-form-item label="宽度">
         <!-- 尺寸选择 -->
-        <n-input-number
-          size="small"
-          v-model:value="canvasConfig.width"
-          :disabled="editCanvas.lockScale"
-          :validator="validator"
-          @update:value="changeSizeHandle"
-        ></n-input-number>
+        <n-input-number size="small" v-model:value="canvasConfig.width" :disabled="editCanvas.lockScale"
+          :validator="validator" @update:value="changeSizeHandle"></n-input-number>
       </n-form-item>
       <n-form-item label="高度">
-        <n-input-number
-          size="small"
-          v-model:value="canvasConfig.height"
-          :disabled="editCanvas.lockScale"
-          :validator="validator"
-          @update:value="changeSizeHandle"
-        ></n-input-number>
+        <n-input-number size="small" v-model:value="canvasConfig.height" :disabled="editCanvas.lockScale"
+          :validator="validator" @update:value="changeSizeHandle"></n-input-number>
       </n-form-item>
     </n-form>
- 
-    <div class="upload-box">
-      <n-upload
-        v-model:file-list="uploadFileListRef"
-        :show-file-list="false"
-        :customRequest="customRequest"
-        :onBeforeUpload="beforeUploadHandle"
-      >
+
+    <n-card class="upload-box">
+      <n-upload v-model:file-list="uploadFileListRef" :show-file-list="false" :customRequest="customRequest"
+        :onBeforeUpload="beforeUploadHandle">
         <n-upload-dragger>
-          <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="canvasConfig.backgroundImage" alt="背景" />
+          <!-- THINGS_KIT 路径转换，同步生产环境与开发环境的保存的静态资源文件路径不一致 -->
+          <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="getPath(canvasConfig.backgroundImage)" alt="背景" />
           <div class="upload-img" v-show="!canvasConfig.backgroundImage">
             <img src="@/assets/images/canvas/noImage.png" />
             <n-text class="upload-desc" depth="3">
@@ -39,42 +26,22 @@
           </div>
         </n-upload-dragger>
       </n-upload>
-    </div>
+    </n-card>
     <n-space vertical :size="12">
       <n-space>
-        <n-text>背景选择</n-text>
-        <n-select
-          size="small"
-          placeholder="请选择您要使用的背景"
-          style="width: 250px"
-          v-model:value="bgSelectValue"
-          :options="selectBgOptions"
-          @update:value="selectBgValueHandle"
-        />
-      </n-space>
-      <n-space>
+        <!-- THINGS_KIT 新增预置背景选择 -->
+        <SelectBackgroundImage />
         <n-text>背景颜色</n-text>
         <div class="picker-height">
-          <n-color-picker
-            v-if="!switchSelectColorLoading"
-            size="small"
-            style="width: 250px"
-            v-model:value="canvasConfig.background"
-            :showPreview="true"
-            :swatches="swatchesColors"
-          ></n-color-picker>
+          <n-color-picker v-if="!switchSelectColorLoading" size="small" style="width: 250px"
+            v-model:value="canvasConfig.background" :showPreview="true" :swatches="swatchesColors"></n-color-picker>
         </div>
       </n-space>
       <n-space>
         <n-text>应用类型</n-text>
-        <n-select
-          size="small"
-          style="width: 250px"
-          v-model:value="selectColorValue"
-          :disabled="!canvasConfig.backgroundImage"
-          :options="selectColorOptions"
-          @update:value="selectColorValueHandle"
-        />
+        <n-select size="small" style="width: 250px" v-model:value="selectColorValue"
+          :disabled="!canvasConfig.backgroundImage" :options="selectColorOptions"
+          @update:value="selectColorValueHandle" />
       </n-space>
       <n-space>
         <n-text>背景控制</n-text>
@@ -88,14 +55,9 @@
       <n-space>
         <n-text>适配方式</n-text>
         <n-button-group>
-          <n-button
-            v-for="item in previewTypeList"
-            :key="item.key"
-            :type="canvasConfig.previewScaleType === item.key ? 'primary' : 'tertiary'"
-            ghost
-            size="small"
-            @click="selectPreviewType(item.key)"
-          >
+          <n-button v-for="item in previewTypeList" :key="item.key"
+            :type="canvasConfig.previewScaleType === item.key ? 'primary' : 'tertiary'" ghost size="small"
+            @click="selectPreviewType(item.key)">
             <n-tooltip :show-arrow="false" trigger="hover">
               <template #trigger>
                 <n-icon class="select-preview-icon" size="18">
@@ -115,13 +77,8 @@
 
     <!-- 主题选择和全局配置 -->
     <n-tabs class="tabs-box" size="small" type="segment">
-      <n-tab-pane
-        v-for="item in globalTabList"
-        :key="item.key"
-        :name="item.key"
-        size="small"
-        display-directive="show:lazy"
-      >
+      <n-tab-pane v-for="item in globalTabList" :key="item.key" :name="item.key" size="small"
+        display-directive="show:lazy">
         <template #tab>
           <n-space>
             <span>{{ item.title }}</span>
@@ -139,16 +96,21 @@
 <script setup lang="ts">
 import { ref, nextTick, watch } from 'vue'
 import { backgroundImageSize } from '@/settings/designSetting'
-import { swatchesColors } from '@/settings/chartThemes/index'
+import { swatchesColors } from '@/settings/chartThemes'
 import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { StylesSetting } from '@/components/Pages/ChartItemSetting'
-import { SelectOption, UploadCustomRequestOptions } from 'naive-ui'
+import { UploadCustomRequestOptions } from 'naive-ui'
 import { fileToUrl, loadAsyncComponent } from '@/utils'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
 import { icon } from '@/plugins'
 
+// THINGS_KIT 路径转换，同步生产环境与开发环境的保存的静态资源文件路径不一致
+import SelectBackgroundImage from './external/SelectBackgroundImage.vue'
+import { useSyncAssetsFile } from '@/utils/external/useSyncAssetsFile'
+const { getPath } = useSyncAssetsFile()
+
 const { ColorPaletteIcon } = icon.ionicons5
 const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon
 
@@ -162,21 +124,6 @@ const selectColorValue = ref(0)
 
 const ChartThemeColor = loadAsyncComponent(() => import('./components/ChartThemeColor/index.vue'))
 
-//背景选择配置项
-const bgSelectValue = ref('')
-
-const selectBgOptions = ref<Array<SelectOption>>([])
-
-//TODO待封装 成传文件夹名字获取下面所有图片
-const getFetchImages = () => {
-  const imagesModules = import.meta.globEager('@/assets/external/background/*')
-  selectBgOptions.value = Object.keys(imagesModules).map(item => ({
-    label: imagesModules[item]?.default.split('/').at(-1),
-    value: imagesModules[item]?.default
-  }))
-}
-getFetchImages()
-
 // 默认应用类型
 const selectColorOptions = [
   {
@@ -266,12 +213,6 @@ const selectColorValueHandle = (value: number) => {
   canvasConfig.selectColor = value == 0
 }
 
-//选择背景
-const selectBgValueHandle = (value: string) => {
-  bgSelectValue.value = value
-  canvasConfig.backgroundImage = value
-}
-
 // 清除背景
 const clearImage = () => {
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, undefined)
@@ -318,49 +259,65 @@ const selectPreviewType = (key: PreviewScaleEnum) => {
 <style lang="scss" scoped>
 $uploadWidth: 326px;
 $uploadHeight: 193px;
+
 @include go(canvas-setting) {
   padding-top: 20px;
+
   .upload-box {
     cursor: pointer;
     margin-bottom: 20px;
+
     @include deep() {
+      .n-card__content {
+        padding: 0;
+        overflow: hidden;
+      }
+
       .n-upload-dragger {
         padding: 5px;
         width: $uploadWidth;
-        background-color: rgba(0, 0, 0, 0);
       }
     }
+
     .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;
       }
     }
   }
+
   .icon-position {
     padding-top: 2px;
   }
+
   .picker-height {
     min-height: 35px;
   }
+
   .clear-btn {
     padding-left: 2.25em;
     padding-right: 2.25em;
   }
+
   .select-preview-icon {
-    padding-right: 0.68em;
-    padding-left: 0.68em;
+    padding-right: .68em;
+    padding-left: .68em;
   }
+
   .tabs-box {
     margin-top: 20px;
   }

 import { toRaw } from 'vue'
 import { DragKeyEnum, MouseEventButton } from '@/enums/editPageEnum'
-import { createComponent } from '@/packages'
+// THINGS_KIT 覆盖原始创建组件方法
+import { createComponent } from '@/packages/external/override'
 import { ConfigType } from '@/packages/index.d'
 import { CreateComponentType, CreateComponentGroupType, PickCreateComponentType } from '@/packages/index.d'
 import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'

@@ -76,6 +76,7 @@ import { EditRule } from './components/EditRule'
 import { EditBottom } from './components/EditBottom'
 import { EditShapeBox } from './components/EditShapeBox'
 import { EditTools } from './components/EditTools'
+import { useSyncAssetsFile } from '@/utils/external/useSyncAssetsFile'
 
 const chartEditStore = useChartEditStore()
 const { handleContextMenu } = useContextMenu()
@@ -130,17 +131,19 @@ const filterShow = computed(() => {
 })
 
 // 背景
+// THINGS_KIT 路径转换，同步生产环境与开发环境的保存的静态资源文件路径不一致
+const { getPath } = useSyncAssetsFile()
 const rangeStyle = computed(() => {
   // 设置背景色和图片背景
   const background = chartEditStore.getEditCanvasConfig.background
   const backgroundImage = chartEditStore.getEditCanvasConfig.backgroundImage
   const selectColor = chartEditStore.getEditCanvasConfig.selectColor
   const backgroundColor = background ? background : undefined
-
   const computedBackground = selectColor
     ? { background: backgroundColor }
-    : { background: `url(${backgroundImage}) no-repeat center center / cover !important` }
-
+    // : { background: `url(${backgroundImage}) no-repeat center center / cover !important` }
+    // THINGS_KIT 路径转换，同步生产环境与开发环境的保存的静态资源文件路径不一致
+    : { background: `url(${getPath(backgroundImage!)}) no-repeat center center / cover !important` }
   // @ts-ignore
   return {
     ...computedBackground,

@@ -113,7 +113,8 @@ export const useSyncRemote = () => {
         const canvasImage: HTMLCanvasElement = await html2canvas(range, {
           backgroundColor: null,
           allowTaint: true,
-          useCORS: true
+          useCORS: true,
+          logging: false
         })
 
         // 上传预览图

@@ -150,6 +150,8 @@ export interface GlobConfig {
   socketUrl: string;
   // upgrade your http policy to https
   securityPolicy: string;
+  // assets file prefix
+  publicPath: string
 }
 export interface GlobEnvConfig {
   // Site title
@@ -168,4 +170,6 @@ export interface GlobEnvConfig {
   VITE_GLOB_ALARM_NOTIFY_DURATION: string;
   // content security policy
   VITE_GLOB_CONTENT_SECURITY_POLICY: string
+  // public assets file prefix
+  VITE_GLOB_PUBLIC_PATH: string
 }