广告尺寸调整

src/configs/canvas.ts

-export const VIEWPORT_SIZE = 1754
-export const VIEWPORT_VER_SIZE = 1240
\ No newline at end of file
+// export const VIEWPORT_SIZE.Value = 1754 //竖版
+// export const VIEWPORT_VER_SIZE.Value = 1240 //横版
+class VIEWPORT_SIZE_Manager {
+    private _value = 0
+    constructor(val:number) {
+        this._value = val;
+    }
+     
+    get Value(){
+        return this._value
+    }
+    set Value(val:number){
+        this._value = val
+    }
+}
+    
+export const VIEWPORT_SIZE = new VIEWPORT_SIZE_Manager(1754)
+export const VIEWPORT_VER_SIZE = new VIEWPORT_SIZE_Manager(1240)
\ No newline at end of file

src/hooks/useAlignElementToCanvas.ts

@@ -18,8 +18,8 @@ export default () => {
    * @param command 对齐方向
    */
   const alignElementToCanvas = (command: ElementAlignCommands) => {
-    const viewportWidth = VIEWPORT_SIZE
-    const viewportHeight = VIEWPORT_SIZE * viewportRatio.value
+    const viewportWidth = VIEWPORT_SIZE.Value
+    const viewportHeight = VIEWPORT_SIZE.Value * viewportRatio.value
     const { minX, maxX, minY, maxY } = getElementListRange(activeElementList.value)
   
     const newElementList: PPTElement[] = JSON.parse(JSON.stringify(currentSlide.value.elements))

src/hooks/useCreateElement.ts

@@ -55,12 +55,12 @@ export default () => {
     getImageSize(src).then(({ width, height }) => {
       const scale = height / width
   
-      if (scale < viewportRatio.value && width > VIEWPORT_SIZE) {
-        width = VIEWPORT_SIZE
+      if (scale < viewportRatio.value && width > VIEWPORT_SIZE.Value) {
+        width = VIEWPORT_SIZE.Value
         height = width * scale
       }
-      else if (height > VIEWPORT_SIZE * viewportRatio.value) {
-        height = VIEWPORT_SIZE * viewportRatio.value
+      else if (height > VIEWPORT_SIZE.Value * viewportRatio.value) {
+        height = VIEWPORT_SIZE.Value * viewportRatio.value
         width = height / scale
       }
 
@@ -70,8 +70,8 @@ export default () => {
         src,
         width,
         height,
-        left: (VIEWPORT_SIZE - width) / 2,
-        top: (VIEWPORT_SIZE * viewportRatio.value - height) / 2,
+        left: (VIEWPORT_SIZE.Value - width) / 2,
+        top: (VIEWPORT_SIZE.Value * viewportRatio.value - height) / 2,
         fixedRatio: true,
         rotate: 0,
       })
@@ -154,8 +154,8 @@ export default () => {
       colWidths,
       rotate: 0,
       data,
-      left: (VIEWPORT_SIZE - width) / 2,
-      top: (VIEWPORT_SIZE * viewportRatio.value - height) / 2,
+      left: (VIEWPORT_SIZE.Value - width) / 2,
+      top: (VIEWPORT_SIZE.Value * viewportRatio.value - height) / 2,
       outline: {
         width: 2,
         style: 'solid',
@@ -280,8 +280,8 @@ export default () => {
       width: data.w,
       height: data.h,
       rotate: 0,
-      left: (VIEWPORT_SIZE - data.w) / 2,
-      top: (VIEWPORT_SIZE * viewportRatio.value - data.h) / 2,
+      left: (VIEWPORT_SIZE.Value - data.w) / 2,
+      top: (VIEWPORT_SIZE.Value * viewportRatio.value - data.h) / 2,
       path: data.path,
       latex: data.latex,
       color: theme.value.fontColor,
@@ -302,8 +302,8 @@ export default () => {
       width: 500,
       height: 300,
       rotate: 0,
-      left: (VIEWPORT_SIZE - 500) / 2,
-      top: (VIEWPORT_SIZE * viewportRatio.value - 300) / 2,
+      left: (VIEWPORT_SIZE.Value - 500) / 2,
+      top: (VIEWPORT_SIZE.Value * viewportRatio.value - 300) / 2,
       src,
       autoplay: false,
     })
@@ -320,8 +320,8 @@ export default () => {
       width: 50,
       height: 50,
       rotate: 0,
-      left: (VIEWPORT_SIZE - 50) / 2,
-      top: (VIEWPORT_SIZE * viewportRatio.value - 50) / 2,
+      left: (VIEWPORT_SIZE.Value - 50) / 2,
+      top: (VIEWPORT_SIZE.Value * viewportRatio.value - 50) / 2,
       loop: false,
       autoplay: false,
       fixedRatio: true,

src/hooks/useExport.ts

@@ -40,7 +40,7 @@ export default () => {
       setTimeout(() => {
         const config: ExportImageConfig = {
           quality,
-          width: (viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE ),
+          width: (viewportRatio.value<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value ),
         }
   
         if (ignoreWebfont) config.fontEmbedCSS = ''
@@ -67,7 +67,7 @@ export default () => {
     setTimeout(() => {
       const config: ExportImageConfig = {
         quality,
-        width:  (viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE ),
+        width:  (viewportRatio.value<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value ),
       }
 
       if (ignoreWebfont) config.fontEmbedCSS = ''

src/hooks/useImport.ts

@@ -88,7 +88,7 @@ export default () => {
       const json = await parse(e.target!.result as ArrayBuffer)
 
       const width = json.size.width
-      const scale = VIEWPORT_SIZE / width
+      const scale = VIEWPORT_SIZE.Value / width
 
       const slides: Slide[] = []
       for (const item of json.slides) {

src/types/slides.ts

@@ -704,7 +704,6 @@ export interface Slide {
   turningMode?: TurningMode
   pageType: number,
   isTripItems?:boolean,
-  templateType?:number,
   width?:number,
   height?:number,
 }

src/views/Editor/Canvas/GridLines.vue

@@ -35,8 +35,8 @@ const gridColor = computed(() => {
 
 // 网格路径
 const path = computed(() => {
-  const maxX = VIEWPORT_SIZE
-  const maxY = VIEWPORT_SIZE * viewportRatio.value
+  const maxX = VIEWPORT_SIZE.Value
+  const maxY = VIEWPORT_SIZE.Value * viewportRatio.value
 
   let p = ''
   for (let i = 0; i <= Math.floor(maxY / gridLineSize.value); i++) {

src/views/Editor/Canvas/hooks/useDragElement.ts

@@ -26,8 +26,8 @@ export default (
     if (!activeElementIdList.value.includes(element.id)) return
     let isMouseDown = true
 
-    const edgeWidth = VIEWPORT_SIZE
-    const edgeHeight = VIEWPORT_SIZE * viewportRatio.value
+    const edgeWidth = VIEWPORT_SIZE.Value
+    const edgeHeight = VIEWPORT_SIZE.Value * viewportRatio.value
     
     const sorptionRange = 5
 

src/views/Editor/Canvas/hooks/useScaleElement.ts

@@ -155,8 +155,8 @@ export default (
     // 包括页面内除目标元素外的其他元素在画布中的各个可吸附对齐位置：上下左右四边
     // 其中线条和被旋转过的元素不参与吸附对齐
     else {
-      const edgeWidth = VIEWPORT_SIZE
-      const edgeHeight = VIEWPORT_SIZE * viewportRatio.value
+      const edgeWidth = VIEWPORT_SIZE.Value
+      const edgeHeight = VIEWPORT_SIZE.Value * viewportRatio.value
       const isActiveGroupElement = element.id === activeGroupElementId.value
       
       for (const el of elementList.value) {

src/views/Editor/Canvas/hooks/useViewportSize.ts

@@ -16,7 +16,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
     if (!canvasRef.value) return
     const canvasWidth = canvasRef.value.clientWidth
     const canvasHeight = canvasRef.value.clientHeight
-    const USED_VIEWPORT_SIZE = viewportRatio.value<=1?VIEWPORT_SIZE:VIEWPORT_VER_SIZE
+    const USED_VIEWPORT_SIZE = viewportRatio.value<=1?VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value
     if (canvasHeight / canvasWidth > viewportRatio.value) {
       const viewportActualWidth = canvasWidth * (canvasPercentage.value / 100)
       mainStore.setCanvasScale(viewportActualWidth / USED_VIEWPORT_SIZE)
@@ -33,7 +33,7 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
   // 更新画布可视区域的位置
   const setViewportPosition = (newValue: number, oldValue: number) => {
     if (!canvasRef.value) return
-    const USED_VIEWPORT_SIZE = viewportRatio.value<=1?VIEWPORT_SIZE:VIEWPORT_VER_SIZE
+    const USED_VIEWPORT_SIZE = viewportRatio.value<=1?VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value
     const canvasWidth = canvasRef.value.clientWidth
     const canvasHeight = canvasRef.value.clientHeight
 
@@ -69,8 +69,8 @@ export default (canvasRef: Ref<HTMLElement | undefined>) => {
 
   // 画布可视区域位置和大小的样式
   const viewportStyles = computed(() => ({
-    width: viewportRatio.value<=1?VIEWPORT_SIZE:VIEWPORT_VER_SIZE,
-    height: (viewportRatio.value<=1?VIEWPORT_SIZE:VIEWPORT_VER_SIZE) * viewportRatio.value,
+    width: viewportRatio.value<=1?VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value,
+    height: (viewportRatio.value<=1?VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value) * viewportRatio.value,
     left: viewportLeft.value,
     top: viewportTop.value,
   }))

src/views/Editor/Canvas/index.vue

@@ -187,6 +187,16 @@ watch(handleElementId, () => {
 const elementList = ref<PPTElement[]>([])
 const setLocalElementList = () => {
   elementList.value = currentSlide.value&&currentSlide.value.elements ? JSON.parse(JSON.stringify(currentSlide.value.elements)) : []
+  // if(currentSlide.value.width){
+  //   console.log(currentSlide.value.width,'=====')
+  //   VIEWPORT_SIZE.Value = currentSlide.value.height
+  //   VIEWPORT_VER_SIZE.Value = currentSlide.value.width
+  //   if(viewportRatio.value<1) VIEWPORT_SIZE.Value = currentSlide.value.height
+  //   else VIEWPORT_VER_SIZE.Value = currentSlide.value.width
+  // }else {
+  //   VIEWPORT_SIZE.Value = 1754
+  //   VIEWPORT_VER_SIZE.Value = 1240
+  // }
 }
 watchEffect(setLocalElementList)
 
@@ -243,7 +253,7 @@ const handleDblClick = (e: MouseEvent) => {
   const viewportRect = viewportRef.value.getBoundingClientRect()
   const left = (e.pageX - viewportRect.x) / canvasScale.value
   const top = (e.pageY - viewportRect.y) / canvasScale.value
-  const width = viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE
+  const width = viewportRatio.value<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value
   if(left<width && left>=0){
     createTextElement({
       left,

src/views/Editor/CanvasTool/UploadPicture.vue

@@ -220,10 +220,10 @@ const setImgs = async () => {
     if(imgType.value==2){
         let width = propsDatas.value.width
         let height = propsDatas.value.height
-        let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE, viewportRatio = slidesStore.viewportRatio
+        let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE.Value, viewportRatio = slidesStore.viewportRatio
         if(viewportRatio<1){
-            maxWidth = VIEWPORT_VER_SIZE
-            maxHeight = VIEWPORT_SIZE
+            maxWidth = VIEWPORT_VER_SIZE.Value
+            maxHeight = VIEWPORT_SIZE.Value
         }
             
         if(activeName.value=='1'||activeName.value=='3' || activeName.value == '4'){

src/views/Editor/EditorHeader/index.vue

@@ -469,9 +469,7 @@ const setTemplate = async (type) =>{
         x.pageType = 0
         x.width = queryObj.value.Width
         x.height = queryObj.value.Height
-      }else x.TemplateType = 1
-      delete x.TemplateType
-      delete x.templateType
+      }
       x.elements.forEach(y=>{
         delete y.TemplateList
       })

src/views/Editor/ExportDialog/ExportImage.vue

@@ -7,7 +7,7 @@
           v-for="slide in renderSlides" 
           :key="slide.id" 
           :slide="slide" 
-          :size="viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE" 
+          :size="viewportRatio<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value" 
         />
       </div>
     </div>

src/views/Editor/ExportDialog/ExportPDF.vue

@@ -5,7 +5,7 @@
         <ThumbnailSlide 
           class="thumbnail" 
           :slide="currentSlide" 
-          :size="viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE" 
+          :size="viewportRatio<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value" 
           v-if="rangeType === 'current'"
         />
         <template v-else>
@@ -15,7 +15,7 @@
             v-for="(slide, index) in newSlides" 
             :key="slide.id" 
             :slide="slide" 
-            :size="viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE" 
+            :size="viewportRatio<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value" 
           />
         </template>
       </div>
@@ -89,7 +89,7 @@ const padding = ref(false)
 
 const expPDF = () => {
   if (!pdfThumbnailsRef.value) return
-  const width = viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE
+  const width = viewportRatio.value<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value
   const pageSize = {
     width: width,
     height: rangeType.value === 'all' ? width * viewportRatio.value * count.value : width * viewportRatio.value,
@@ -99,7 +99,7 @@ const expPDF = () => {
 }
 
 const formatSliders =()=>{
-  const width = viewportRatio.value<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE
+  const width = viewportRatio.value<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value
   slides.value.forEach((x)=>{
     let item = JSON.parse(JSON.stringify(x))
     item.elements = item.elements.filter(y=>y.left<width && (y.left+y.width)>=0)

src/views/Editor/Thumbnails/index.vue

@@ -62,6 +62,7 @@ import { injectKeyDataSource, injectKeyTemplate } from '@/types/injectKey'
 import ConfigService from '@/services/ConfigService'
 import { getHtmlPlainText } from '@/utils/common'
 import useEditor from '@/utils/Editor/index'
+import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import LayoutPool from './LayoutPool.vue'
@@ -69,7 +70,6 @@ import Popover from '@/components/Popover.vue'
 import Draggable from 'vuedraggable'
 import { ElLoading, ElMessageBox } from 'element-plus'
 import FileService from '@/services/FileService'
-import { VIEWPORT_SIZE, VIEWPORT_VER_SIZE } from '@/configs/canvas'
 import { Slide } from '@/types/slides'
 
 const mainStore = useMainStore()
@@ -77,7 +77,7 @@ const slidesStore = useSlidesStore()
 const layoutsStore = useSlidesStore()
 const keyboardStore = useKeyboardStore()
 const { selectedSlidesIndex: _selectedSlidesIndex, thumbnailsFocus } = storeToRefs(mainStore)
-const { slides, currentSlide, slideIndex, layoutSlides } = storeToRefs(slidesStore)
+const { slides, currentSlide, slideIndex, layoutSlides, viewportRatio } = storeToRefs(slidesStore)
 const { ctrlKeyState, shiftKeyState } = storeToRefs(keyboardStore)
 const { SalesEditor, SalesBack, SalesTripId } = storeToRefs(useSellTemplateStore())
 
@@ -199,10 +199,10 @@ const GetTripFiledData = async () =>{
           })
           isHideOverflowText = true
         } catch (error) {}
-        let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE, viewportRatio = slidesStore.viewportRatio
+        let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE.Value, viewportRatios = slidesStore.viewportRatio
         if(viewportRatio<1){
-          maxWidth = VIEWPORT_VER_SIZE
-          maxHeight = VIEWPORT_SIZE
+          maxWidth = VIEWPORT_VER_SIZE.Value
+          maxHeight = VIEWPORT_SIZE.Value
         }
         const travel = dataRes.data.data
         const cursors = [] as Array<any>
@@ -389,14 +389,14 @@ const GetTripTemplate = async () =>{
       let dataRes = await ConfigService.GetTripTemplateSlide(queryMsg);
       if (dataRes.data.resultCode == 1) {
         if(SalesBack.value==0||(SalesBack.value==1&&searchData.value.TempId)){
-          let viewportRatio = 1.414
-          if(dataRes.data.data.TempType==1) viewportRatio = 0.7069
+          let viewportRatios = 1.414
+          if(dataRes.data.data.TempType==1) viewportRatios = 0.7069
           if(dataRes.data.data.TemplateType==2&&dataRes.data.data.Width&&dataRes.data.data.Height) {
-            viewportRatio = dataRes.data.data.Height/dataRes.data.data.Width
+            viewportRatios = dataRes.data.data.Height/dataRes.data.data.Width
             queryObj.value.Width = dataRes.data.data.Width
             queryObj.value.Height = dataRes.data.data.Height
           }
-          slidesStore.setViewportRatio(viewportRatio)
+          slidesStore.setViewportRatio(viewportRatios)
 
           let SlidesData = JSON.parse(dataRes.data.data.TempData)
           let newSlides = []
@@ -441,7 +441,15 @@ const GetTripTemplate = async () =>{
         queryObj.value.TempType = dataRes.data.data.TempType
         queryObj.value.TemplateType = dataRes.data.data.TemplateType
         
-
+        if(queryObj.value.Width){
+          VIEWPORT_SIZE.Value = queryObj.value.Height
+          VIEWPORT_VER_SIZE.Value = queryObj.value.Width
+          // if(viewportRatio.value<1) VIEWPORT_SIZE.Value = queryObj.value.Height
+          // else VIEWPORT_VER_SIZE.Value = queryObj.value.Width
+        }else {
+          VIEWPORT_SIZE.Value = 1754
+          VIEWPORT_VER_SIZE.Value = 1240
+        }
         
         if(ConfigId.value==0) return 
         if(TempId.value&&!searchData.value.TempId) await GetTripConfig()
@@ -470,13 +478,23 @@ const sellGetTripTemplate = async () =>{
         else if(TempId.value) queryObj.value.TempId = TempId.value
 
         let dataObj = dataRes.data.data
-        let viewportRatio = 1.414
-        if(dataRes.data.data.TempType==1) viewportRatio = 0.7069
+        let viewportRatios = 1.414
+        if(dataRes.data.data.TempType==1) viewportRatios = 0.7069
         if(dataRes.data.data.TemplateType==2&&dataRes.data.data.Width&&dataRes.data.data.Height) {
-          viewportRatio = dataRes.data.data.Height/dataRes.data.data.Width
+          viewportRatios = dataRes.data.data.Height/dataRes.data.data.Width
+          queryObj.value.Width = dataRes.data.data.Width
+          queryObj.value.Height = dataRes.data.data.Height
         }
         queryObj.value.TemplateType = dataRes.data.data.TemplateType
-        slidesStore.setViewportRatio(viewportRatio)
+        slidesStore.setViewportRatio(viewportRatios)
+
+        if(queryObj.value.Width){
+          VIEWPORT_SIZE.Value = queryObj.value.Height
+          VIEWPORT_VER_SIZE.Value = queryObj.value.Width
+        }else {
+          VIEWPORT_SIZE.Value = 1754
+          VIEWPORT_VER_SIZE.Value = 1240
+        }
         
         if(SalesBack.value==0) slidesStore.setTitle(dataRes.data.data.Title)
         if(SalesBack.value==0&&searchData.value.sellId){

src/views/Editor/Toolbar/ElementTemplateData.vue

@@ -188,7 +188,7 @@
                 class="thumbnail" 
                 :key="slides[slideIndex].id" 
                 :slide="slides[slideIndex]" 
-                :size="viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE" 
+                :size="viewportRatio<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value" 
               />
             </div>
           </div>

src/views/Editor/Toolbar/common/ElementDataMapping.vue

@@ -63,10 +63,10 @@ const updateUnionElement = ref<boolean>(true)
 const loading = ref<boolean>(false)
 const loadingObj = ref<any>('')
 const query = ref<string>('')
-let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE, viewportRatio = slidesStore.viewportRatio
+let maxWidth = VIEWPORT_SIZE,maxHeight = VIEWPORT_VER_SIZE.Value, viewportRatio = slidesStore.viewportRatio
 if(viewportRatio<1){
-    maxWidth = VIEWPORT_VER_SIZE
-    maxHeight = VIEWPORT_SIZE
+    maxWidth = VIEWPORT_VER_SIZE.Value
+    maxHeight = VIEWPORT_SIZE.Value
 }
 
 if(handleElement.value?.dataMapping){

src/views/Editor/index.vue

@@ -40,7 +40,7 @@
             class="thumbnail" 
             :key="slide.id" 
             :slide="slide" 
-            :size="param.w?param.w:(viewportRatio<1 ? VIEWPORT_SIZE : VIEWPORT_VER_SIZE )" 
+            :size="param.w?param.w:(viewportRatio<1 ? VIEWPORT_SIZE.Value : VIEWPORT_VER_SIZE.Value )" 
           />
         </div>
       </div>

src/views/Mobile/MobileEditor/SlideToolbar.vue

@@ -55,8 +55,8 @@ const insertTextElement = () => {
   const height = 56
 
   createTextElement({
-    left: (VIEWPORT_SIZE - width) / 2,
-    top: (VIEWPORT_SIZE * viewportRatio.value - height) / 2,
+    left: (VIEWPORT_SIZE.Value - width) / 2,
+    top: (VIEWPORT_SIZE.Value * viewportRatio.value - height) / 2,
     width,
     height,
   }, { content: '<p>新添加文本</p>' })
@@ -81,8 +81,8 @@ const insertShapeElement = (type: 'square' | 'round') => {
   const size = 200
 
   createShapeElement({
-    left: (VIEWPORT_SIZE - size) / 2,
-    top: (VIEWPORT_SIZE * viewportRatio.value - size) / 2,
+    left: (VIEWPORT_SIZE.Value - size) / 2,
+    top: (VIEWPORT_SIZE.Value * viewportRatio.value - size) / 2,
     width: size,
     height: size,
   }, shape[type])

src/views/Mobile/MobileEditor/index.vue

@@ -83,8 +83,8 @@ const canvasScale = computed(() => {
   const contentheight = contentRef.value.clientHeight
 
   const contentRatio = contentheight / contentWidth
-  if (contentRatio >= viewportRatio.value) return (contentWidth - 20) / VIEWPORT_SIZE
-  return (contentheight - 20) / viewportRatio.value / VIEWPORT_SIZE
+  if (contentRatio >= viewportRatio.value) return (contentWidth - 20) / VIEWPORT_SIZE.Value
+  return (contentheight - 20) / viewportRatio.value / VIEWPORT_SIZE.Value
 })
 
 onMounted(() => {
@@ -93,8 +93,8 @@ onMounted(() => {
 })
 
 const viewportStyles = computed(() => ({
-  width: VIEWPORT_SIZE * canvasScale.value + 'px',
-  height: VIEWPORT_SIZE * viewportRatio.value * canvasScale.value + 'px',
+  width: VIEWPORT_SIZE.Value * canvasScale.value + 'px',
+  height: VIEWPORT_SIZE.Value * viewportRatio.value * canvasScale.value + 'px',
 }))
 
 const elementList = ref<PPTElement[]>([])

src/views/Screen/ScreenSlide.vue

@@ -3,8 +3,8 @@
     class="screen-slide"
     style="overflow: hidden;"
     :style="{
-      width: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE )+ 'px',
-      height: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE ) * viewportRatio + 'px',
+      width: (viewportRatio<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value )+ 'px',
+      height: (viewportRatio<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value ) * viewportRatio + 'px',
       transform: `scale(${scale})`,
     }"
   >

src/views/Screen/ScreenSlideList.vue

@@ -68,7 +68,7 @@ const slidesWithTurningMode = computed(() => {
     }
   })
 })
-const scale = computed(() => props.slideWidth / (viewportRatio.value<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE ))
+const scale = computed(() => props.slideWidth / (viewportRatio.value<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value ))
 provide(injectKeySlideScale, scale)
 </script>
 

src/views/components/ThumbnailSlide/index.vue

@@ -9,8 +9,8 @@
       class="elements"
       style="overflow: hidden;"
       :style="{
-        width: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE )+ 'px',
-        height: (viewportRatio<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE ) * viewportRatio + 'px',
+        width: (viewportRatio<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value )+ 'px',
+        height: (viewportRatio<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value ) * viewportRatio + 'px',
         transform: `scale(${scale})`,
       }"
       v-if="visible"
@@ -51,7 +51,7 @@ const { viewportRatio } = storeToRefs(useSlidesStore())
 const background = computed(() => props.slide.background)
 const { backgroundStyle } = useSlideBackgroundStyle(background)
 
-const scale = computed(() => props.size / (viewportRatio.value<1 ? VIEWPORT_SIZE:VIEWPORT_VER_SIZE ))
+const scale = computed(() => props.size / (viewportRatio.value<1 ? VIEWPORT_SIZE.Value:VIEWPORT_VER_SIZE.Value ))
 provide(injectKeySlideScale, scale)
 </script>
 

src/views/components/element/AudioElement/ScreenAudioElement.vue

@@ -60,8 +60,8 @@ const audioIconSize = computed(() => {
   return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
 })
 const audioPlayerPosition = computed(() => {
-  const canvasWidth = VIEWPORT_SIZE
-  const canvasHeight = VIEWPORT_SIZE * viewportRatio.value
+  const canvasWidth = VIEWPORT_SIZE.Value
+  const canvasHeight = VIEWPORT_SIZE.Value * viewportRatio.value
 
   const audioWidth = 280 / scale.value
   const audioHeight = 50 / scale.value

src/views/components/element/AudioElement/index.vue

@@ -62,8 +62,8 @@ const audioIconSize = computed(() => {
   return Math.min(props.elementInfo.width, props.elementInfo.height) + 'px'
 })
 const audioPlayerPosition = computed(() => {
-  const canvasWidth = VIEWPORT_SIZE
-  const canvasHeight = VIEWPORT_SIZE * viewportRatio.value
+  const canvasWidth = VIEWPORT_SIZE.Value
+  const canvasHeight = VIEWPORT_SIZE.Value * viewportRatio.value
 
   const audioWidth = 280 / canvasScale.value
   const audioHeight = 50 / canvasScale.value