添加图表背景填充

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;

src/views/Editor/Canvas/index.vue

@@ -203,6 +203,7 @@ export default defineComponent({
         },
         {
           text: '网格参考线',
+          handler: toggleGridLines,
         },
         {
           text: '清空本页',

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,
     }
   },
 })

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"

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"

src/views/components/element/ChartElement/index.vue

@@ -11,6 +11,9 @@
   >
     <div 
       class="element-content" 
+      :style="{
+        backgroundColor: elementInfo.fill,
+      }"
       v-contextmenu="contextmenus"
     >
       <ElementOutline