修复页面背景图显示异常的问题

src/hooks/useSlideBackgroundStyle.ts

@@ -8,6 +8,7 @@ export default (background: Ref<SlideBackground | undefined>) => {
     const { type, value, size } = background.value
     if(type === 'solid') return { backgroundColor: value }
     else if(type === 'image') {
+      if(!value) return { backgroundColor: '#fff' }
       if(size === 'repeat') {
         return {
           backgroundImage: `url(${value}`,

src/views/Editor/Toolbar/SlideStylePanel.vue

@@ -35,10 +35,7 @@
     <div class="background-image-wrapper" v-if="background.type === 'image'">
       <FileInput @change="files => uploadBackgroundImage(files)">
         <div class="background-image">
-          <div 
+          <div class="content" :style="{ backgroundImage: `url(${background.value})` }">
-            class="content"
-            :style="backgroundStyle"
-          >
             <IconFont type="icon-plus" />
           </div>
         </div>
@@ -57,7 +54,6 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ColorButton from './common/ColorButton.vue'
 import { getImageDataURL } from '@/utils/image'
-import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
 export default defineComponent({
   name: 'slide-style-panel',
@@ -79,8 +75,6 @@ export default defineComponent({
       return currentSlide.value.background
     })
 
-    const { backgroundStyle } = useSlideBackgroundStyle(background)
-
     const { addHistorySnapshot } = useHistorySnapshot()
 
     const updateBackgroundType = (type: 'solid' | 'image') => {
@@ -126,7 +120,6 @@ export default defineComponent({
 
     return {
       background,
-      backgroundStyle,
       updateBackgroundType,
       updateBackground,
       uploadBackgroundImage,
@@ -172,6 +165,8 @@ export default defineComponent({
     justify-content: center;
     align-items: center;
     background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
     cursor: pointer;
   }
 }