From 081a092db4355fd82a02ec2f2e1e8216ca8d55d9 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Sat, 30 Jan 2021 10:15:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=AE=BE=E7=BD=AE=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=85=83=E7=B4=A0=E4=B8=BA=E8=83=8C=E6=99=AF=E7=9A=84?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/iconPark.ts                          |  6 ++++--
 .../ElementStylePanel/ImageStylePanel.vue        | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/plugins/iconPark.ts b/src/plugins/iconPark.ts
index fdf24339..fab3cb64 100644
--- a/src/plugins/iconPark.ts
+++ b/src/plugins/iconPark.ts
@@ -17,7 +17,6 @@ import {
   List,
   OrderedList,
   Drag,
-  Formula,
   Helpcenter,
   SplitCells,
   MergeCells,
@@ -99,6 +98,8 @@ import {
   Undo,
   Transform,
   Click,
+  Theme,
+  Symbol,
 } from '@icon-park/vue-next'
 
 export default {
@@ -109,7 +110,7 @@ export default {
     app.component('IconPentagonOne', PentagonOne)
     app.component('IconConnection', Connection)
     app.component('IconInsertTable', InsertTable)
-    app.component('IconFormula', Formula)
+    app.component('IconSymbol', Symbol)
 
     // 剪贴板
     app.component('IconCopy', Copy)
@@ -231,5 +232,6 @@ export default {
     app.component('IconUndo', Undo)
     app.component('IconTransform', Transform)
     app.component('IconClick', Click)
+    app.component('IconTheme', Theme)
   }
 }
\ No newline at end of file
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
index 398ec181..7eff5abb 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue
@@ -88,13 +88,14 @@
       <Button class="full-width-btn"><IconTransform class="btn-icon" /> 替换图片</Button>
     </FileInput>
     <Button class="full-width-btn" @click="resetImage()"><IconUndo class="btn-icon" /> 重置样式</Button>
+    <Button class="full-width-btn" @click="setBackgroundImage()"><IconTheme class="btn-icon" /> 设为背景</Button>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, ref, watch } from 'vue'
 import { MutationTypes, useStore } from '@/store'
-import { PPTImageElement } from '@/types/slides'
+import { PPTImageElement, Slide } from '@/types/slides'
 import { CLIPPATHS } from '@/configs/imageClip'
 import { getImageDataURL } from '@/utils/image'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
@@ -165,6 +166,7 @@ export default defineComponent({
   setup() {
     const store = useStore()
     const handleElement = computed<PPTImageElement>(() => store.getters.handleElement)
+    const currentSlide = computed<Slide>(() => store.getters.currentSlide)
 
     const clipPanelVisible = ref(false)
 
@@ -325,6 +327,17 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    const setBackgroundImage = () => {
+      const background = {
+        ...currentSlide.value.background,
+        type: 'image',
+        image: handleElement.value.src,
+        imageSize: 'cover',
+      }
+      store.commit(MutationTypes.UPDATE_SLIDE, { background })
+      addHistorySnapshot()
+    }
+
     return {
       clipPanelVisible,
       shapeClipPathOptions,
@@ -338,6 +351,7 @@ export default defineComponent({
       presetImageClip,
       replaceImage,
       resetImage,
+      setBackgroundImage,
     }
   },
 })