From 0a524410ae7d84b7d4da25bd65eca70cb041fcfd Mon Sep 17 00:00:00 2001
From: zxc <1171051090@qq.com>
Date: Mon, 2 Sep 2024 23:20:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=87=E5=B0=BA=E8=87=AA=E9=80=82?=
 =?UTF-8?q?=E5=BA=94viewportSize?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Editor/Canvas/Ruler.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/views/Editor/Canvas/Ruler.vue b/src/views/Editor/Canvas/Ruler.vue
index 33b9848a..ecef2a11 100644
--- a/src/views/Editor/Canvas/Ruler.vue
+++ b/src/views/Editor/Canvas/Ruler.vue
@@ -11,9 +11,10 @@
         class="ruler-marker-100" 
         :class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }"
         v-for="marker in 20" 
-        :key="`marker-100-${marker}`"
+        :key="`h-marker-100-${marker}`"
+        :style="{ width: markerSize + 'px' }"
       >
-        <span>{{ marker * 100 }}</span>
+        <span v-if="marker * 100 <= viewportSize">{{ marker * 100 }}</span>
       </div>
 
       <div class="range" 
@@ -35,10 +36,10 @@
         class="ruler-marker-100" 
         :class="{ 'hide': markerSize < 36, 'omit': markerSize < 72 }"
         v-for="marker in 20" 
-        :key="marker" 
+        :key="`v-marker-100-${marker}`"
         :style="{ height: markerSize + 'px' }"
       >
-        <span>{{ marker * 100 }}</span>
+        <span v-if="marker * 100 <= viewportSize * viewportRatio">{{ marker * 100 }}</span>
       </div>
 
       <div class="range" 
@@ -55,7 +56,7 @@
 <script lang="ts" setup>
 import { watchEffect, computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
-import { useMainStore } from '@/store'
+import { useMainStore, useSlidesStore } from '@/store'
 import { getElementListRange } from '@/utils/element'
 import type { PPTElement } from '@/types/slides'
 
@@ -71,7 +72,8 @@ const props = defineProps<{
   elementList: PPTElement[]
 }>()
 
-const { canvasScale, activeElementIdList } = storeToRefs(useMainStore())
+const { canvasScale, activeElementIdList, viewportSize } = storeToRefs(useMainStore())
+const { viewportRatio } = storeToRefs(useSlidesStore())
 
 const elementListRange = ref<null | ReturnType<typeof getElementListRange>>(null)
 
@@ -82,7 +84,7 @@ watchEffect(() => {
 })
 
 const markerSize = computed(() => {
-  return props.viewportStyles.width * canvasScale.value / 10
+  return props.viewportStyles.width * canvasScale.value / (viewportSize.value / 100)
 })
 </script>
 
@@ -111,7 +113,6 @@ const markerSize = computed(() => {
 
   .ruler-marker-100 {
     height: 100%;
-    width: 10%;
     line-height: 20px;
     text-align: right;
     flex-shrink: 0;