feat: 新增背景图文件上传保存

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -130,9 +130,11 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { StylesSetting } from '@/components/Pages/ChartItemSetting'
 import { UploadCustomRequestOptions } from 'naive-ui'
-import { fileToUrl, loadAsyncComponent } from '@/utils'
+import { fileToUrl, loadAsyncComponent, fetchRouteParamsLocation } from '@/utils'
 import { PreviewScaleEnum } from '@/enums/styleEnum'
+import { ResultEnum } from '@/enums/httpEnum'
 import { icon } from '@/plugins'
+import { uploadFile} from '@/api/path/project'
 
 const { ColorPaletteIcon } = icon.ionicons5
 const { ZAxisIcon, ScaleIcon, FitToScreenIcon, FitToHeightIcon, FitToWidthIcon } = icon.carbon
@@ -270,17 +272,30 @@ const switchSelectColorHandle = () => {
 // 自定义上传操作
 const customRequest = (options: UploadCustomRequestOptions) => {
   const { file } = options
-  nextTick(() => {
+  nextTick(async () => {
     if (file.file) {
-      const ImageUrl = fileToUrl(file.file)
-      chartEditStore.setEditCanvasConfig(
-        EditCanvasConfigEnum.BACKGROUND_IAMGE,
-        ImageUrl
-      )
-      chartEditStore.setEditCanvasConfig(
-        EditCanvasConfigEnum.SELECT_COLOR,
-        false
+      // 修改名称
+      const newNameFile = new File(
+        [file.file],
+        `${fetchRouteParamsLocation()}_index_background.png`,
+        { type: file.file.type }
       )
+      let uploadParams = new FormData()
+      uploadParams.append('object', newNameFile)
+      const uploadRes:any = await uploadFile(uploadParams)
+
+      if(uploadRes.code === ResultEnum.SUCCESS) {
+        chartEditStore.setEditCanvasConfig(
+          EditCanvasConfigEnum.BACKGROUND_IAMGE,
+          uploadRes.data.objectContent.httpRequest.uri
+        )
+        chartEditStore.setEditCanvasConfig(
+          EditCanvasConfigEnum.SELECT_COLOR,
+          false
+        )
+        return
+      }
+      window['$message'].error('添加图片失败，请稍后重试！')
     } else {
       window['$message'].error('添加图片失败，请稍后重试！')
     }

src/views/chart/ContentEdit/components/EditDataSync/index.vue

@@ -10,7 +10,7 @@
     </n-tooltip>
     <n-spin
       v-show="statusDesc === statusDescObj[1]['text']"
-      class="status-spin go-ml-2"
+      class="go-ml-2"
       size="small"
     >
       <template #icon>
@@ -25,13 +25,19 @@
 <script lang="ts" setup>
 import { ref, toRefs, watch } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { SyncEnum } from '@/enums/editPageEnum'
 import { icon } from '@/plugins'
 import { saveInterval } from '@/settings/designSetting'
 
 const { ReloadIcon } = icon.ionicons5
+
 const chartEditStore = useChartEditStore()
+const designStore = useDesignStore()
+
 const { saveStatus } = toRefs(chartEditStore.getEditCanvas)
+const themeColor = ref(designStore.getAppTheme)
+
 const statusDesc = ref('')
 const descType = ref('')
 let setTimeoutIns: NodeJS.Timeout = setTimeout(() => {})
@@ -83,6 +89,7 @@ watch(
   }
   .status-desc {
     cursor: default;
+    color: v-bind('themeColor');
     font-size: 12px;
     opacity: 0.8;
   }