Merge branch 'ww' into 'main_dev'

fix(backgrounImage): 修复背景图片不能上传

See merge request yunteng/thingskit-view!37

 import { defHttp } from "@/utils/external/http/axios";
-import { DictItem } from "./model";
+import { DictItem, UploadResponse } from "./model";
 
 enum Api {
-  GET_DICT = '/dict_item'
+  GET_DICT = '/dict_item',
+  UPLOAD = '/oss/upload'
 }
 
 export const getDictItemByCode = (value: string) => {
@@ -13,3 +14,10 @@ export const getDictItemByCode = (value: string) => {
     }
   })
 }
+
+export const upload = (file: FormData) => {
+  return defHttp.post<UploadResponse>({
+    url: Api.UPLOAD,
+    params: file
+  })
+}

@@ -8,3 +8,11 @@ export interface DictItem {
   createTime: string;
   updateTime: string;
 }
+
+export interface UploadResponse {
+  fileName: string
+  fileDownloadUri: string
+  fileType: string
+  size: number
+  fileStaticUri: string
+}

+import { SelectOption } from "naive-ui"
+import { computed } from "vue"
+
+const isHref = (url: string) => {
+  try {
+    new URL(url)
+    return true
+  } catch (error) {
+    return false
+  }
+}
+
+export const useBackgroundSelect = () => {
+
+
+  const getAllBackgroundImageList = computed(() => {
+    const pathList = import.meta.glob('../../assets/external/background/*')
+    return Object.keys(pathList).map(item => {
+      const imgName = item.split('/').at(-1)
+      return {
+        label: imgName,
+        value: imgName
+      } as SelectOption
+    })
+  })
+
+  const getBackgroundImagePath = (name: string) => {
+    return isHref(name) ? name : new URL(`../../assets/external/background/${name}`, import.meta.url).href
+  }
+
+  return {
+    getAllBackgroundImageList,
+    getBackgroundImagePath
+  }
+
+}
+

-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 }
-}

@@ -2,27 +2,23 @@
 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';
+import { computed, h, unref } from 'vue';
+import { useBackgroundSelect } from '@/utils/external/useBackgroundImageSelect';
 
 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 { getAllBackgroundImageList, getBackgroundImagePath } = useBackgroundSelect()
 
 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(NImage, { width: 50, src: getBackgroundImagePath(option.value as string), previewDisabled: true, style: { height: '28px' } } as Recordable),
     h(NEllipsis, null, () => option.label)
   ])
 }
 
 const handleUpdateValue = (value: string, _option: SelectOption) => {
-  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, setPath(value))
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, value)
 }
 
 </script>
@@ -32,7 +28,7 @@ const handleUpdateValue = (value: string, _option: SelectOption) => {
   <NSpace>
     <NText>背景选择</NText>
     <NSelect size="small" placeholder="请选择您要使用的背景" clearable style="width: 250px" :value="canvasConfig.backgroundImage"
-      :options="getSelectBgOptions" :render-label="renderOption" @update-value="handleUpdateValue" />
+      :options="getAllBackgroundImageList" :render-label="renderOption" @update-value="handleUpdateValue" />
   </NSpace>
 </template>
 

+import { upload } from "@/api/external/common"
+import { EditCanvasConfigEnum } from "@/store/modules/chartEditStore/chartEditStore.d"
+import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore"
+
+export const useUploadBackgroundImg = async (file: File) => {
+  const formData = new FormData()
+  const chartEditStore = useChartEditStore()
+  formData.set('file', file)
+  const { fileStaticUri } = await upload(formData) 
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, fileStaticUri)
+  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
+}

@@ -30,7 +30,7 @@
         :onBeforeUpload="beforeUploadHandle"
       >
         <n-upload-dragger>
-          <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="canvasConfig.backgroundImage" alt="背景" />
+          <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="getBackgroundImagePath(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">
@@ -142,8 +142,9 @@ import { icon } from '@/plugins'
 
 // THINGS_KIT 路径转换，同步生产环境与开发环境的保存的静态资源文件路径不一致
 import SelectBackgroundImage from './external/SelectBackgroundImage.vue'
-import { useSyncAssetsFile } from '@/utils/external/useSyncAssetsFile'
-const { getPath } = useSyncAssetsFile()
+import { useBackgroundSelect } from '@/utils/external/useBackgroundImageSelect'
+import { useUploadBackgroundImg } from './external/useUploadBackground'
+const { getBackgroundImagePath } = useBackgroundSelect()
 
 const { ColorPaletteIcon } = icon.ionicons5
 const { ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon
@@ -275,9 +276,11 @@ const customRequest = (options: UploadCustomRequestOptions) => {
   const { file } = options
   nextTick(() => {
     if (file.file) {
-      const ImageUrl = fileToUrl(file.file)
-      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, ImageUrl)
-      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
+      // THINGS_KIT 上传图片逻辑修改
+      useUploadBackgroundImg(file.file)
+      // const ImageUrl = fileToUrl(file.file)
+      // chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.BACKGROUND_IMAGE, ImageUrl)
+      // chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.SELECT_COLOR, false)
     } else {
       window['$message'].error('添加图片失败，请稍后重试！')
     }

@@ -106,7 +106,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'
+import { useBackgroundSelect } from '@/utils/external/useBackgroundImageSelect'
 
 const chartEditStore = useChartEditStore()
 const { handleContextMenu } = useContextMenu()
@@ -164,7 +164,7 @@ const filterShow = computed(() => {
 
 // 背景
 // THINGS_KIT 路径转换，同步生产环境与开发环境的保存的静态资源文件路径不一致
-const { getPath } = useSyncAssetsFile()
+const { getBackgroundImagePath } = useBackgroundSelect()
 const rangeStyle = computed(() => {
   // 设置背景色和图片背景
   const background = chartEditStore.getEditCanvasConfig.background
@@ -176,8 +176,7 @@ const rangeStyle = computed(() => {
     ? { background: backgroundColor }
     // : { background: `url(${backgroundImage}) no-repeat center center / cover !important` }
     // THINGS_KIT 路径转换，同步生产环境与开发环境的保存的静态资源文件路径不一致
-    : { background: `url(${getPath(backgroundImage!)}) no-repeat center center / cover !important` }
-  // @ts-ignore
+    : { background: `url(${getBackgroundImagePath(backgroundImage!)}) no-repeat center center / cover !important` }
   return {
     ...computedBackground,
     width: 'inherit',