perf: 图表缩略图优化

src/plugins/icon.ts

@@ -179,12 +179,8 @@ export default {
     
     // 图表
     app.component('IconChartHistogram', ChartHistogram)
-    app.component('IconChartHistogramOne', ChartHistogramOne)
     app.component('IconChartLine', ChartLine)
-    app.component('IconChartLineArea', ChartLineArea)
-    app.component('IconChartScatter', ChartScatter)
     app.component('IconChartPie', ChartPie)
-    app.component('IconChartRing', ChartRing)
 
     // 其他
     app.component('IconPlayOne', PlayOne)

src/views/Editor/Thumbnails/index.vue

@@ -44,10 +44,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue'
+import { computed, defineComponent, provide, ref } from 'vue'
 import { MutationTypes, useStore } from '@/store'
 import { fillDigit } from '@/utils/common'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
+import { VIEWPORT_SIZE } from '@/configs/canvas'
 import useSlideHandler from '@/hooks/useSlideHandler'
 import useScreening from '@/hooks/useScreening'
 
@@ -72,6 +73,9 @@ export default defineComponent({
 
     const presetLayoutPopoverVisible = ref(false)
 
+    const scale = computed(() => 120 / VIEWPORT_SIZE)
+    provide('slideScale', scale)
+
     const {
       copySlide,
       pasteSlide,

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

@@ -18,13 +18,18 @@
         :height="elementInfo.height"
         :outline="elementInfo.outline"
       />
-      <IconChartHistogram :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-if="chartType === 'bar'" />
+      <Chart
-      <IconChartHistogramOne :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'horizontalBar'" />
+        :class="{ 'need-scale': needScaleSize }"
-      <IconChartLine :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'line'" />
+        :width="chartWidth"
-      <IconChartLineArea :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'area'" />
+        :height="chartHeight"
-      <IconChartScatter :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'scatter'" />
+        :type="elementInfo.chartType"
-      <IconChartPie :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'pie'" />
+        :data="elementInfo.data"
-      <IconChartRing :fill="elementInfo.themeColor" strokeWidth="2" :size="size" v-else-if="chartType === 'ring'" />
+        :options="elementInfo.options"
+        :themeColor="elementInfo.themeColor"
+        :gridColor="elementInfo.gridColor"
+        :legends="elementInfo.data.legends"
+        :legend="elementInfo.legend || ''"
+      />
     </div>
   </div>
 </template>
@@ -34,45 +39,28 @@ import { computed, defineComponent, PropType } from 'vue'
 import { PPTChartElement } from '@/types/slides'
 
 import ElementOutline from '@/views/components/element/ElementOutline.vue'
+import Chart from './Chart.vue'
 
 export default defineComponent({
   name: 'base-element-chart',
   components: {
     ElementOutline,
+    Chart,
   },
   props: {
     elementInfo: {
       type: Object as PropType<PPTChartElement>,
       required: true,
     },
+    needScaleSize: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup(props) {
-    const size = computed(() => Math.min(props.elementInfo.width, props.elementInfo.height))
-
-    const chartType = computed(() => {
-      const _chartType = props.elementInfo.chartType
-      const _options = props.elementInfo.options
-
-      if (_chartType === 'bar') {
-        if (_options?.horizontalBars) return 'horizontalBar'
-        return 'bar'
-      }
-      else if (_chartType === 'line') {
-        if (_options?.showArea) return 'area'
-        else if (_options && _options.showLine === false) return 'scatter'
-        return 'line'
-      }
-      else if (_chartType === 'pie') {
-        if (_options?.donut) return 'ring'
-        return 'pie'
-      }
-
-      return ''
-    })
-
     return {
-      size,
+      chartWidth: computed(() => props.needScaleSize ? props.elementInfo.width * 10 : props.elementInfo.width),
-      chartType,
+      chartHeight: computed(() => props.needScaleSize ? props.elementInfo.height * 10 : props.elementInfo.height),
     }
   },
 })
@@ -82,13 +70,11 @@ export default defineComponent({
 .base-element-chart {
   position: absolute;
 }
-
 .element-content {
   width: 100%;
   height: 100%;
-  opacity: .5;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
-</style>
+.need-scale {
+  zoom: .1;
+}
+</style>

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

@@ -1,50 +1,21 @@
 <template>
-  <div class="screen-element-chart"
+  <BaseChartElement
-    :style="{
+    class="screen-element-chart"
-      top: elementInfo.top + 'px',
+    :elementInfo="elementInfo"
-      left: elementInfo.left + 'px',
+    :needScaleSize="false"
-      width: elementInfo.width + 'px',
+  />
-      height: elementInfo.height + 'px',
-    }"
-  >
-    <div 
-      class="element-content"
-      :style="{
-        backgroundColor: elementInfo.fill,
-      }"
-    >
-      <ElementOutline
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :outline="elementInfo.outline"
-      />
-      <Chart
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :type="elementInfo.chartType"
-        :data="elementInfo.data"
-        :options="elementInfo.options"
-        :themeColor="elementInfo.themeColor"
-        :gridColor="elementInfo.gridColor"
-        :legends="elementInfo.data.legends"
-        :legend="elementInfo.legend || ''"
-      />
-    </div>
-  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
 import { PPTChartElement } from '@/types/slides'
 
-import ElementOutline from '@/views/components/element/ElementOutline.vue'
+import BaseChartElement from './BaseChartElement.vue'
-import Chart from './Chart.vue'
 
 export default defineComponent({
   name: 'screen-element-chart',
   components: {
-    ElementOutline,
+    BaseChartElement,
-    Chart,
   },
   props: {
     elementInfo: {
@@ -54,14 +25,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="scss" scoped>
-.screen-element-chart {
-  position: absolute;
-}
-
-.element-content {
-  width: 100%;
-  height: 100%;
-}
-</style>