feat(幻灯片处理): 添加模板元素尺寸适配功能

根据当前视口大小和比例自动调整模板元素的尺寸和位置

src/hooks/useSlideHandler.ts

@@ -16,7 +16,7 @@ export default () => {
   const mainStore = useMainStore()
   const slidesStore = useSlidesStore()
   const { selectedSlidesIndex: _selectedSlidesIndex, activeElementIdList } = storeToRefs(mainStore)
-  const { currentSlide, slides, theme, slideIndex } = storeToRefs(slidesStore)
+  const { currentSlide, slides, theme, slideIndex, viewportSize, viewportRatio } = storeToRefs(slidesStore)
 
   const selectedSlidesIndex = computed(() => [..._selectedSlidesIndex.value, slideIndex.value])
   const selectedSlides = computed(() => slides.value.filter((item, index) => selectedSlidesIndex.value.includes(index)))
@@ -93,9 +93,21 @@ export default () => {
   // 根据模板创建新页面
   const createSlideByTemplate = (slide: Slide) => {
     const { groupIdMap, elIdMap } = createElementIdMap(slide.elements)
+    const slideWidth = viewportSize.value
+    const slideHeight = viewportSize.value * viewportRatio.value
+    
+    // 模板原始宽高（16:9比例）
+    const templateWidth = 1280
+    const templateHeight = 720
+    
+    // 计算缩放因子
+    const scaleX = slideWidth / templateWidth
+    const scaleY = slideHeight / templateHeight
 
     for (const element of slide.elements) {
       element.id = elIdMap[element.id]
+      element.top = (element.top || 0) * scaleY
+      element.left = (element.left || 0) * scaleX
       if (element.groupId) element.groupId = groupIdMap[element.groupId]
     }
     const newSlide = {