perf: 图表缩略图缩放比例优化

src/views/Editor/Canvas/LinkDialog.vue

@@ -66,6 +66,8 @@ export default defineComponent({
     const address = ref('')
     const slideId = ref('')
 
+    slideId.value = slides.value[0].id
+
     const selectedSlide = computed(() => {
       if (!slideId.value) return null
 

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

@@ -23,9 +23,8 @@
           :outline="elementInfo.outline"
         />
         <Chart
-          :class="{ 'need-scale': needScaleSize }"
-          :width="chartWidth"
-          :height="chartHeight"
+          :width="elementInfo.width * zoom"
+          :height="elementInfo.height * zoom"
           :type="elementInfo.chartType"
           :data="elementInfo.data"
           :options="elementInfo.options"
@@ -33,6 +32,7 @@
           :gridColor="elementInfo.gridColor"
           :legends="elementInfo.data.legends"
           :legend="elementInfo.legend || ''"
+          :style="{ zoom: 1 / zoom }"
         />
       </div>
     </div>
@@ -59,17 +59,15 @@ export default defineComponent({
       required: true,
     },
   },
-  setup(props) {
+  setup() {
     const slideScale = inject(injectKeySlideScale) || ref(1)
 
     const needScaleSize = computed(() => slideScale.value < 1)
-    const chartWidth = computed(() => needScaleSize.value ? props.elementInfo.width * 10 : props.elementInfo.width)
-    const chartHeight = computed(() => needScaleSize.value ? props.elementInfo.height * 10 : props.elementInfo.height)
+    const zoom = computed(() => needScaleSize.value ? 1 / slideScale.value : 1)
 
     return {
       needScaleSize,
-      chartWidth,
-      chartHeight,
+      zoom,
     }
   },
 })
@@ -87,7 +85,4 @@ export default defineComponent({
   width: 100%;
   height: 100%;
 }
-.need-scale {
-  zoom: .1;
-}
 </style>