update

src/views/Screen/ScreenElement.vue

@@ -15,6 +15,7 @@
     <component
       :is="currentElementComponent"
       :elementInfo="elementInfo"
+      :scale="scale"
       :is-visible="isVisible"
     ></component>
   </div>
@@ -39,6 +40,7 @@ import BaseFrameElement from '@/views/components/element/FrameElement/BaseFrameE
 
 const props = defineProps<{
   elementInfo: PPTElement
+  scale: number
   elementIndex: number
   animationIndex: number
   turnSlideToId: (id: string) => void

src/views/Screen/ScreenSlide.vue

@@ -17,6 +17,7 @@
       :animationIndex="animationIndex"
       :turnSlideToId="turnSlideToId"
       :manualExitFullscreen="manualExitFullscreen"
+      :scale="scale"
       :is-visible="isVisible"
     />
   </div>

src/views/components/ThumbnailSlide/ThumbnailElement.vue

@@ -10,6 +10,7 @@
       :is="currentElementComponent"
       :elementInfo="elementInfo"
       :is-thumbnail="true"
+      :scale="scale"
       target="thumbnail"
     ></component>
   </div>
@@ -33,6 +34,8 @@ import BaseFrameElement from '@/views/components/element/FrameElement/BaseFrameE
 const props = defineProps<{
   elementInfo: PPTElement
   elementIndex: number
+  scale: number
+  slide: number
 }>()
 
 const currentElementComponent = computed<unknown>(() => {

src/views/components/ThumbnailSlide/index.vue

@@ -20,6 +20,8 @@
       <ThumbnailElement
         v-for="(element, index) in slide.elements"
         :key="element.id"
+        :scale="scale"
+        :slide="slide"
         :elementInfo="element"
         :elementIndex="index + 1"
       />

src/views/components/element/FrameElement/BaseFrameElement.vue

@@ -8,10 +8,12 @@
   <div
     class="base-element-frame"
     :style="{
-      top: elementInfo.top + 'px',
-      left: elementInfo.left + 'px',
-      width: elementInfo.width + 'px',
-      height: elementInfo.height + 'px',
+      transform: isThumbnail ?  'scale(1)': `scale(${1 / props.scale})`,
+      transformOrigin: 'top left', // 关键点
+      top:  props.elementInfo.top + 'px',
+      left: props.elementInfo.left  + 'px',
+      width: (isThumbnail ? props.elementInfo.width : width) + 'px',
+      height: (isThumbnail ? props.elementInfo.height : height) + 'px',
       overflow: 'hidden',
     }"
   >
@@ -25,8 +27,8 @@
           v-if="elementInfo.toolType === 74 && !isThumbnail && isVisible"
           :key="`video-${iframeKey}`"
           :src="elementInfo.url"
-          :width="elementInfo.width"
-          :height="elementInfo.height"
+          :width="width"
+          :height="height"
           controls
           :style="{ width: '100%', height: '100%', objectFit: 'contain' }"
         ></video>
@@ -35,8 +37,8 @@
           v-else-if="elementInfo.toolType === 75 && !isThumbnail && isVisible"
           :key="`bilibili-${iframeKey}`"
           :src="elementInfo.url"
-          :width="elementInfo.width"
-          :height="elementInfo.height"
+          :width="width"
+          :height="height"
           :frameborder="0"
           :allowfullscreen="true"
           allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
@@ -47,8 +49,8 @@
           :key="`html-${iframeKey}`"
           :srcdoc="elementInfo.url"
           v-else-if="elementInfo.isHTML && !isThumbnail && isVisible"
-          :width="elementInfo.width"
-          :height="elementInfo.height"
+          :width="width"
+          :height="height"
           :frameborder="0" 
           :allowfullscreen="true"
           allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
@@ -58,8 +60,8 @@
           :key="`src-${iframeKey}`"
           v-else-if="!isThumbnail && isVisible"
           :src="elementInfo.url"
-          :width="elementInfo.width"
-          :height="elementInfo.height"
+          :width="width"
+          :height="height"
           :frameborder="0" 
           :allowfullscreen="true"
           allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
@@ -94,6 +96,7 @@ import type { PropType } from "vue";
 import type { PPTFrameElement } from "@/types/slides";
 import { lang } from "@/main";
 import { ref, watch, nextTick } from "vue";
+import { computed } from 'vue'
 
 const props = defineProps({
   elementInfo: {
@@ -104,6 +107,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  scale: {
+    type: Number,
+    default: 1
+  },
   isVisible: {
     type: Boolean,
     default: false,
@@ -124,6 +131,25 @@ watch(
   }
 );
 
+
+
+const width = computed(() => {
+  return props.elementInfo.width * props.scale;
+})
+
+const height = computed(() => {
+  return props.elementInfo.height * props.scale;
+})
+
+const left = computed(() => {
+  return props.elementInfo.left * props.scale;
+})
+
+const top = computed(() => {
+  return props.elementInfo.top * props.scale;
+})
+
+
 // 获取类型标签
 const getTypeLabel = (type: number): string => {
   const typeMap: Record<number, keyof typeof lang> = {