背景图修改

src/hooks/useSlideBackgroundStyle.ts

@@ -10,6 +10,7 @@ export default (background: Ref<SlideBackground | undefined>) => {
       type,
       color,
       image,
+      imageSize,
       gradient,
     } = background.value
 
@@ -19,19 +20,17 @@ export default (background: Ref<SlideBackground | undefined>) => {
     // 背景图模式
     // 包括：背景图、背景大小，是否重复
     else if (type === 'image' && image) {
-      const { src, size } = image
-      if (!src) return { backgroundColor: '#fff' }
-      if (size === 'repeat') {
+      if (imageSize === 'repeat') {
         return {
-          backgroundImage: `url(${src}`,
+          backgroundImage: `url(${image}`,
           backgroundRepeat: 'repeat',
           backgroundSize: 'contain',
         }
       }
       return {
-        backgroundImage: `url(${src}`,
+        backgroundImage: `url(${image}`,
         backgroundRepeat: 'no-repeat',
-        backgroundSize: size || 'cover',
+        backgroundSize: imageSize || 'cover',
       }
     }
 
@@ -50,4 +49,4 @@ export default (background: Ref<SlideBackground | undefined>) => {
   return {
     backgroundStyle,
   }
-}
+}

src/types/slides.ts

@@ -663,11 +663,6 @@ export interface PPTAnimation {
 
 export type SlideBackgroundType = "solid" | "image" | "gradient"
 export type SlideBackgroundImageSize = "cover" | "contain" | "repeat"
-export interface SlideBackgroundImage {
-  src: string
-  size: SlideBackgroundImageSize
-}
-
 /**
  * 幻灯片背景
  *
@@ -677,12 +672,15 @@ export interface SlideBackgroundImage {
  *
  * image?: 图片背景
  *
+ * imageSize?: 图片铺满类型
+ *
  * gradientType?: 渐变背景
  */
 export interface SlideBackground {
   type: SlideBackgroundType
   color?: string
-  image?: SlideBackgroundImage
+  image?: string
+  imageSize?: SlideBackgroundImageSize
   gradient?: Gradient
 }
 

src/views/Editor/Toolbar/SlideDesignPanel.vue

@@ -23,8 +23,8 @@
 
       <Select
         style="flex: 1"
-        :value="background.image?.size || 'cover'"
-        @update:value="value => updateImageBackground({ size: value as SlideBackgroundImageSize })"
+        :value="background.imageSize || 'cover'"
+        @update:value="value => updateImageBackground({ imageSize: value as SlideBackgroundImageSize })"
         v-else-if="background.type === 'image'"
         :options="[
           { label: '缩放', value: 'contain' },
@@ -48,7 +48,7 @@
     <div class="background-image-wrapper" v-if="background.type === 'image'">
       <FileInput @change="files => uploadBackgroundImage(files)">
         <div class="background-image">
-          <div class="content" :style="{ backgroundImage: `url(${background.image?.src})` }">
+          <div class="content" :style="{ backgroundImage: `url(${background.image})` }">
             <IconPlus />
           </div>
         </div>
@@ -302,15 +302,7 @@
 import { computed, ref } from "vue"
 import { storeToRefs } from "pinia"
 import { useMainStore, useSlidesStore } from "@/store"
-import type {
-  Gradient,
-  GradientType,
-  SlideBackground,
-  SlideBackgroundType,
-  SlideTheme,
-  SlideBackgroundImage,
-  SlideBackgroundImageSize
-} from "@/types/slides"
+import type { Gradient, GradientType, SlideBackground, SlideBackgroundType, SlideTheme, SlideBackgroundImageSize } from "@/types/slides"
 import { PRESET_THEMES } from "@/configs/theme"
 import { WEB_FONTS } from "@/configs/font"
 import useHistorySnapshot from "@/hooks/useHistorySnapshot"
@@ -364,10 +356,8 @@ const updateBackgroundType = (type: SlideBackgroundType) => {
     const newBackground: SlideBackground = {
       ...background.value,
       type: "image",
-      image: background.value.image || {
-        src: "",
-        size: "cover"
-      }
+      image: background.value.image || "",
+      imageSize: background.value.imageSize || "cover"
     }
     slidesStore.updateSlide({ background: newBackground })
   } else {
@@ -408,15 +398,15 @@ const updateGradientBackgroundColors = (color: string) => {
 }
 
 // 设置图片背景
-const updateImageBackground = (props: Partial<SlideBackgroundImage>) => {
-  updateBackground({ image: { ...background.value.image!, ...props } })
+const updateImageBackground = (props: Partial<SlideBackground>) => {
+  updateBackground({ ...background.value!, ...props })
 }
 
 // 上传背景图片
 const uploadBackgroundImage = (files: FileList) => {
   const imageFile = files[0]
   if (!imageFile) return
-  getImageDataURL(imageFile).then(dataURL => updateImageBackground({ src: dataURL }))
+  getImageDataURL(imageFile).then(dataURL => updateImageBackground({ image: dataURL }))
 }
 
 // 应用当前页背景到全部页面
@@ -442,9 +432,30 @@ const updateViewportRatio = (value: number) => {
 }
 
 const fontSizeOptions = [
-  '24px', '28px', '32px', '36px', '40px', '44px', '48px', '56px', '64px',
-  '72px', '80px', '88px', '96px', '108px', '120px', '132px', '144px', '152px',
-  '160px', '176px', '192px', '208px', '224px', '240px',
+  "24px",
+  "28px",
+  "32px",
+  "36px",
+  "40px",
+  "44px",
+  "48px",
+  "56px",
+  "64px",
+  "72px",
+  "80px",
+  "88px",
+  "96px",
+  "108px",
+  "120px",
+  "132px",
+  "144px",
+  "152px",
+  "160px",
+  "176px",
+  "192px",
+  "208px",
+  "224px",
+  "240px"
 ]
 </script>