From 65c9844ee004b4fe6c9ca3bb2f4eaa036bd96824 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 23 Feb 2025 20:59:10 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E8=A1=A5=E5=85=85=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Editor/Toolbar/SlideDesignPanel.vue | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue
index eafaa4e6..693d243e 100644
--- a/src/views/Editor/Toolbar/SlideDesignPanel.vue
+++ b/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();