perf: 优化大屏的背景渲染方式，提升性能

src/settings/chartColors.ts

@@ -1,141 +0,0 @@
-// 马卡龙
-const colorDefault = [
- '#4992ff',
- '#4992ff',
- '#fddd60'
-]
-// 马卡龙
-const colorMacarons = [
-  '#2ec7c9',
-  '#b6a2de',
-  '#5ab1ef',
-  '#ffb980',
-  '#d87a80',
-  '#8d98b3',
-  '#e5cf0d',
-  '#97b552',
-  '#95706d',
-  '#dc69aa',
-  '#07a2a4',
-  '#9a7fd1',
-  '#588dd5',
-  '#f5994e',
-  '#c05050',
-  '#59678c',
-  '#c9ab00',
-  '#7eb00a',
-  '#6f5553',
-  '#c14089'
-]
-
-// 复古色
-const colorVintage = [
-  '#2ec7c9',
-  '#b6a2de',
-  '#5ab1ef',
-  '#ffb980',
-  '#d87a80',
-  '#8d98b3',
-  '#e5cf0d',
-  '#97b552',
-  '#95706d',
-  '#dc69aa',
-  '#07a2a4',
-  '#9a7fd1',
-  '#588dd5',
-  '#f5994e',
-  '#c05050',
-  '#59678c',
-  '#c9ab00',
-  '#7eb00a',
-  '#6f5553',
-  '#c14089'
-]
-
-// 信息（橘黄）
-const colorInfographic = [
-  '#C1232B',
-  '#27727B',
-  '#FCCE10',
-  '#E87C25',
-  '#B5C334',
-  '#FE8463',
-  '#9BCA63',
-  '#FAD860',
-  '#F3A43B',
-  '#60C0DD',
-  '#D7504B',
-  '#C6E579',
-  '#F4E001',
-  '#F0805A',
-  '#26C0C0'
-]
-
-// 阳光（深蓝）
-const colorShine = [
-  '#c12e34',
-  '#e6b600',
-  '#0098d9',
-  '#2b821d',
-  '#005eaa',
-  '#339ca8',
-  '#cda819',
-  '#32a487'
-]
-
-// 罗马红
-const colorRoma = [
-  '#e01f54',
-  '#001852',
-  '#f5e8c8',
-  '#b8d2c7',
-  '#c6b38e',
-  '#a4d8c2',
-  '#f3d999',
-  '#d3758f',
-  '#dcc392',
-  '#2e4783',
-  '#82b6e9',
-  '#ff6347',
-  '#a092f1',
-  '#0a915d',
-  '#eaf889',
-  '#6699FF',
-  '#ff6666',
-  '#3cb371',
-  '#d5b158',
-  '#38b6b6'
-]
-
-export const chartColors = [
-  {
-    name: '默认',
-    key: 'colorMacarons',
-    colors: colorMacarons
-  },
-  {
-    name: '马卡龙',
-    key: 'colorMacarons',
-    colors: colorMacarons
-  },
-  {
-    name: '复古',
-    key: 'colorVintage',
-    colors: colorVintage
-  },
-  {
-    name: '阳光蓝',
-    key: 'colorShine',
-    colors: colorShine
-  },
-  {
-    name: '信息黄',
-    key: 'colorInfographic',
-    colors: colorInfographic
-  },
-  {
-    name: '罗马红',
-    key: 'colorRoma',
-    colors: colorRoma
-  },
-]

src/settings/designSetting.ts

@@ -51,3 +51,6 @@ export const borderRadius = '6px'
 
 // 轮播间隔
 export const carouselInterval = 4000
+
+// 工作台大屏背景图片大小限制（5M）
+export const backgroundImageSize = 5

src/utils/utils.ts

@@ -100,6 +100,15 @@ export const isMac = () => {
   return /macintosh|mac os x/i.test(navigator.userAgent)
 }
 
+/** 
+ * * file转url
+*/
+export const fileToUrl = (file:File): string => {
+  const Url = URL || window.URL || window.webkitURL;
+  const ImageUrl = Url.createObjectURL(file);
+  return ImageUrl
+};
+
 /** 
  * * file转base64
 */

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

@@ -37,7 +37,7 @@
           <div class="upload-img" v-show="!canvasConfig.backgroundImage">
             <img src="@/assets/images/canvas/noImage.png" />
             <n-text class="upload-desc" depth="3">
-              背景图需小于 2M ，格式为 png/jpg/gif 的文件
+              背景图需小于 {{backgroundImageSize}}M ，格式为 png/jpg/gif 的文件
             </n-text>
           </div>
         </n-upload-dragger>
@@ -118,13 +118,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, onMounted } from 'vue'
+import { ref, nextTick } from 'vue'
+import { backgroundImageSize } from '@/settings/designSetting'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { UploadCustomRequestOptions } from 'naive-ui'
 import { ChartTheme } from './components/ChartTheme/index'
 import { ChartSysSetting } from './components/ChartSysSetting/index'
-import { fileTobase64 } from '@/utils'
+import { fileToUrl } from '@/utils'
 import { icon } from '@/plugins'
 
 const { ColorPaletteIcon } = icon.ionicons5
@@ -149,7 +150,7 @@ const globalTabList = [
     title: '全局图表',
     icon: ZAxisIcon,
     render: ChartSysSetting
-  },
+  }
 ]
 
 // 规则
@@ -162,8 +163,8 @@ const beforeUploadHandle = async ({ file }) => {
   const type = file.file.type
   const size = file.file.size
 
-  if (size > 1024 * 1024 * 2) {
-    window['$message'].warning('图片超出 2M 限制，请重新上传！')
+  if (size > 1024 * 1024 * backgroundImageSize) {
+    window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
     return false
   }
   if (type !== 'image/png' && type !== 'image/jpeg' && type !== 'image/gif') {
@@ -211,12 +212,15 @@ const customRequest = (options: UploadCustomRequestOptions) => {
   } = options
 
   nextTick(() => {
-    fileTobase64(file.file as File, (e: string | ArrayBuffer | null) => {
+    if (file.file) {
+      const ImageUrl = fileToUrl(file.file)
       chartEditStoreStore.setCanvasConfig(
         EditCanvasConfigEnum.BACKGROUND_IAMGE,
-        e
+        ImageUrl
       )
-    })
+    } else {
+      window['$message'].error('添加图片失败，请稍后重试！')
+    }
   })
 }
 </script>