feat: 新增预览背景图

src/views/preview/components/RenderList/index.vue

@@ -18,7 +18,7 @@
 import { PropType, computed } from 'vue'
 import { ChartEditStorageType } from '../../index.d'
 import { chartColors } from '@/settings/chartThemes/index'
-import { useSizeStyle, useComponentStyle } from '../../hooks/useStyle.hook'
+import { useSizeStyle, useComponentStyle } from '../../utils'
 
 const props = defineProps({
   localStorageInfo: {

src/views/preview/index.vue

@@ -17,7 +17,7 @@ import { usePreviewScale } from '@/hooks/index'
 import { RenderList } from './components/RenderList/index'
 import { ChartEditStorageType } from './index.d'
 import { getLocalStorageInfo } from './utils/index'
-import { useEditCanvasConfigStyle } from './hooks/useStyle.hook'
+import { useEditCanvasConfigStyle } from './utils'
 
 const previewRef = ref()
 

src/views/preview/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './style'
 import { getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'

src/views/preview/hooks/useStyle.hook.ts → src/views/preview/utils/style.ts

@@ -16,16 +16,19 @@ export const useSizeStyle = (attr: AttrType, scale?: number) => {
   const sizeStyle = {
     width: `${scale ? scale * attr.w : attr.w}px`,
     height: `${scale ? scale * attr.h : attr.h}px`,
-    border: '1px solid red'
   }
   return sizeStyle
 }
 
 export const useEditCanvasConfigStyle = (canvas: EditCanvasConfigType) => {
+  // 背景
+  const computedBackground = canvas.selectColor
+    ? { background: canvas.background }
+    : { background: `url(${canvas.backgroundImage}) no-repeat center/100% !important` }
   return {
     position: 'relative',
     width: canvas.width ? `${canvas.width || 100}px` : '100%',
     height: canvas.height ? `${canvas.height}px` : '100%',
-    border: '1px solid red'
+    ...computedBackground
   }
 }