修复DOM元素比例问题

components.d.ts

@@ -24,6 +24,7 @@ declare module 'vue' {
     ElCol: typeof import('element-plus/es')['ElCol']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElOption: typeof import('element-plus/es')['ElOption']

src/hooks/useExport.ts

@@ -13,6 +13,7 @@ import { type SvgPoints, toPoints } from '@/utils/svgPathParser'
 import { encrypt } from '@/utils/crypto'
 import { svg2Base64 } from '@/utils/svg2Base64'
 import message from '@/utils/message'
+import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 
 const INCH_PX_RATIO = 100
 const PT_PX_RATIO = 0.75
@@ -42,7 +43,7 @@ export default () => {
       setTimeout(() => {
         const config: ExportImageConfig = {
           quality,
-          width: viewportRatio.value==0.7069?1754:1240,
+          width: (viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE ),
         }
   
         if (ignoreWebfont) config.fontEmbedCSS = ''
@@ -78,7 +79,7 @@ export default () => {
     setTimeout(() => {
       const config: ExportImageConfig = {
         quality,
-        width: viewportRatio.value==0.7069?1754:1240,
+        width:  (viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE ),
       }
 
       if (ignoreWebfont) config.fontEmbedCSS = ''

src/utils/domainManager.ts

@@ -2,7 +2,7 @@ export const domainManager = () => {
     const locationName = window.location.hostname
     console.log(window.location.hostname, '=====hostname')
     const obj = {
-        domainUrl: locationName.indexOf('oytour') !== -1 ? "http://reborn.oytour.com/api/common/post" : "http://192.168.10.214/api/common/post",
+        domainUrl: locationName.indexOf('oytour') !== -1 ? "http://reborn.oytour.com/api/common/post" : "http://reborn.oytour.com/api/common/post",
         //上传站点
         UploadUrl: locationName.indexOf('oytour') !== -1 ? "http://upload.oytour.com" : "http://192.168.10.214:8120",
         //文件站点

src/views/Editor/EditorHeader/index.vue

@@ -113,7 +113,7 @@
             class="thumbnail" 
             :key="slide.id" 
             :slide="slide" 
-            :size="viewportRatio==0.7069?1754:1240" 
+            :size="viewportRatio==0.7069?" 
           />
         </div>
       </div>

src/views/Editor/Toolbar/ElementTemplateData.vue

@@ -137,7 +137,7 @@
                 class="thumbnail" 
                 :key="slides[slideIndex].id" 
                 :slide="slides[slideIndex]" 
-                :size="viewportRatio==0.7069?1754:1240" 
+                :size="viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE" 
               />
             </div>
           </div>
@@ -159,6 +159,7 @@
   import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
   import AliyunUpload from '@/utils/upload/aliyun'
   import useEditor from '@/utils/Editor/index'
+  import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 
     const datas = reactive({
         DataSource:{},
@@ -286,6 +287,7 @@
         queryObj.value.CoverImg = ''
         mainMenuVisible.value = false
         isCoverImgStore.setIsCoverImg(true)
+        console.log(FeatureImgRef.value)
         let datas = await exportFeatureImg(FeatureImgRef.value, 'jpeg', 1, false,0)
         if(datas){
             let name = new Date().getTime()+".jpg"

src/views/Editor/index.vue

@@ -39,7 +39,7 @@
             class="thumbnail" 
             :key="slide.id" 
             :slide="slide" 
-            :size="viewportRatio==0.7069?1754:1240" 
+            :size="(viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE )" 
           />
         </div>
       </div>
@@ -68,6 +68,7 @@ import SearchPanel from './SearchPanel.vue'
 import Modal from '@/components/Modal.vue'
 import DataaSource from './DataaSource/index.vue'
 import ConfigService from '@/services/ConfigService'
+import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 
@@ -80,6 +81,7 @@ const pageTypesList = ref([] as any)
 const searchData = ref({} as any)
 searchData.value = inject(injectKeyTemplate)
 
+
 let TempIds = 0
 if(searchData.value.TempId) TempIds = searchData.value.TempId
 else if(TempId.value) TempIds = TempId.value

src/views/components/ThumbnailSlide/index.vue

@@ -7,9 +7,10 @@
   >
     <div 
       class="elements"
+      style="overflow: hidden;"
       :style="{
-        width: VIEWPORT_SIZE + 'px',
-        height: VIEWPORT_SIZE * viewportRatio + 'px',
+        width: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE )+ 'px',
+        height: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE ) * viewportRatio + 'px',
         transform: `scale(${scale})`,
       }"
       v-if="visible"
@@ -32,7 +33,7 @@ import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import type { Slide } from '@/types/slides'
 import { injectKeySlideScale } from '@/types/injectKey'
-import { VIEWPORT_SIZE } from '@/configs/canvas'
+import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
 
 import ThumbnailElement from './ThumbnailElement.vue'
@@ -50,7 +51,7 @@ const { viewportRatio } = storeToRefs(useSlidesStore())
 const background = computed(() => props.slide.background)
 const { backgroundStyle } = useSlideBackgroundStyle(background)
 
-const scale = computed(() => props.size / VIEWPORT_SIZE)
+const scale = computed(() => props.size / (viewportRatio.value<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE ))
 provide(injectKeySlideScale, scale)
 </script>