From 73f7c758ef9e0cc51696b2603c794f2333c2f586 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <1171051090@qq.com>
Date: Sun, 17 Jan 2021 20:17:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E8=A1=A8=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E5=A1=AB=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/slides.ts                           |  1 +
 src/views/Editor/Canvas/index.vue             |  1 +
 .../ElementStylePanel/ChartStylePanel.vue     | 34 ++++++++++++++++++-
 .../element/ChartElement/BaseChartElement.vue |  7 +++-
 .../ChartElement/ScreenChartElement.vue       |  7 +++-
 .../components/element/ChartElement/index.vue |  3 ++
 6 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/types/slides.ts b/src/types/slides.ts
index 884f9dd..bbaedf2 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -121,6 +121,7 @@ export interface PPTChartElement {
   groupId?: string;
   width: number;
   height: number;
+  fill?: string;
   chartType: ChartType;
   data: ChartData;
   options?: ILineChartOptions & IBarChartOptions & IPieChartOptions;
diff --git a/src/views/Editor/Canvas/index.vue b/src/views/Editor/Canvas/index.vue
index 2edff4e..77522d2 100644
--- a/src/views/Editor/Canvas/index.vue
+++ b/src/views/Editor/Canvas/index.vue
@@ -203,6 +203,7 @@ export default defineComponent({
         },
         {
           text: '网格参考线',
+          handler: toggleGridLines,
         },
         {
           text: '清空本页',
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel.vue
index e007a3a..e83b22d 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel.vue
@@ -3,6 +3,21 @@
     <Button class="full-width-btn" @click="chartDataEditorVisible = true">
       <IconEdit class="btn-icon" /> 编辑图表数据
     </Button>
+
+    <div class="row">
+      <div style="flex: 2;">背景填充：</div>
+      <Popover trigger="click">
+        <template #content>
+          <ColorPicker
+            :modelValue="fill"
+            @update:modelValue="value => updateFill(value)"
+          />
+        </template>
+        <ColorButton :color="fill" style="flex: 3;" />
+      </Popover>
+    </div>
+
+    <Divider />
     <ElementOutline />
 
     <Modal
@@ -23,7 +38,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref } from 'vue'
+import { computed, defineComponent, Ref, ref, watch } from 'vue'
 import { useStore } from 'vuex'
 import { MutationTypes, State } from '@/store'
 import { ChartData, PPTChartElement } from '@/types/slides'
@@ -31,12 +46,14 @@ import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 
 import ElementOutline from '../common/ElementOutline.vue'
 import ChartDataEditor from './ChartDataEditor.vue'
+import ColorButton from '../common/ColorButton.vue'
 
 export default defineComponent({
   name: 'chart-style-panel',
   components: {
     ElementOutline,
     ChartDataEditor,
+    ColorButton,
   },
   setup() {
     const store = useStore<State>()
@@ -46,6 +63,13 @@ export default defineComponent({
 
     const { addHistorySnapshot } = useHistorySnapshot()
 
+    const fill = ref<string>()
+
+    watch(handleElement, () => {
+      if(!handleElement.value) return
+      fill.value = handleElement.value.fill || '#000'
+    }, { deep: true, immediate: true })
+
     const updateData = (data: ChartData) => {
       chartDataEditorVisible.value = false
       const props = { data }
@@ -53,10 +77,18 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    const updateFill = (value: string) => {
+      const props = { fill: value }
+      store.commit(MutationTypes.UPDATE_ELEMENT, { id: handleElement.value.id, props })
+      addHistorySnapshot()
+    }
+
     return {
       chartDataEditorVisible,
       handleElement,
       updateData,
+      fill,
+      updateFill,
     }
   },
 })
diff --git a/src/views/components/element/ChartElement/BaseChartElement.vue b/src/views/components/element/ChartElement/BaseChartElement.vue
index f312778..23dac4f 100644
--- a/src/views/components/element/ChartElement/BaseChartElement.vue
+++ b/src/views/components/element/ChartElement/BaseChartElement.vue
@@ -7,7 +7,12 @@
       height: elementInfo.height + 'px',
     }"
   >
-    <div class="element-content">
+    <div 
+      class="element-content"
+      :style="{
+        backgroundColor: elementInfo.fill,
+      }"
+    >
       <ElementOutline
         :width="elementInfo.width"
         :height="elementInfo.height"
diff --git a/src/views/components/element/ChartElement/ScreenChartElement.vue b/src/views/components/element/ChartElement/ScreenChartElement.vue
index b3a8df2..4c99c9b 100644
--- a/src/views/components/element/ChartElement/ScreenChartElement.vue
+++ b/src/views/components/element/ChartElement/ScreenChartElement.vue
@@ -7,7 +7,12 @@
       height: elementInfo.height + 'px',
     }"
   >
-    <div class="element-content">
+    <div 
+      class="element-content"
+      :style="{
+        backgroundColor: elementInfo.fill,
+      }"
+    >
       <ElementOutline
         :width="elementInfo.width"
         :height="elementInfo.height"
diff --git a/src/views/components/element/ChartElement/index.vue b/src/views/components/element/ChartElement/index.vue
index 01c81da..d879652 100644
--- a/src/views/components/element/ChartElement/index.vue
+++ b/src/views/components/element/ChartElement/index.vue
@@ -11,6 +11,9 @@
   >
     <div 
       class="element-content" 
+      :style="{
+        backgroundColor: elementInfo.fill,
+      }"
       v-contextmenu="contextmenus"
     >
       <ElementOutline