perf: 补充画布尺寸信息

src/views/Editor/Toolbar/SlideDesignPanel.vue

@@ -99,9 +99,8 @@
     <Divider />
 
     <div class="row">
-      <div style="width: 40%;">画布尺寸：</div>
       <Select 
-        style="width: 60%;" 
+        style="width: 100%;" 
         :value="viewportRatio" 
         @update:value="value => updateViewportRatio(value as number)"
         :options="[
@@ -114,6 +113,10 @@
       />
     </div>
 
+    <div class="row">
+      <div class="canvas-size">画布尺寸：{{  viewportSize  }} × {{ toFixed(viewportSize * viewportRatio) }}</div>
+    </div>
+
     <Divider />
 
     <div class="title">
@@ -334,7 +337,7 @@ import Modal from '@/components/Modal.vue'
 import GradientBar from '@/components/GradientBar.vue'
 
 const slidesStore = useSlidesStore()
-const { slides, currentSlide, slideIndex, viewportRatio, theme } = storeToRefs(slidesStore)
+const { slides, currentSlide, slideIndex, viewportRatio, viewportSize, theme } = storeToRefs(slidesStore)
 
 const moreThemeConfigsVisible = ref(false)
 const themeStylesExtractVisible = ref(false)
@@ -453,6 +456,13 @@ const updateTheme = (themeProps: Partial<SlideTheme>) => {
 const updateViewportRatio = (value: number) => {
   slidesStore.setViewportRatio(value)
 }
+
+const toFixed = (num: number) => {
+  if (num % 1 !== 0) {
+    return parseFloat(num.toFixed(1))
+  } 
+  return Math.floor(num)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -507,6 +517,12 @@ const updateViewportRatio = (value: number) => {
     cursor: pointer;
   }
 }
+.canvas-size {
+  width: 100%;
+  color: #888;
+  font-size: 12px;
+  text-align: center;
+}
 
 .theme-list {
   @include flex-grid-layout();