Merge branch 'master' of https://git.cocorobo.cn/jack/PPT

src/views/Mobile/MobilePlayer.vue

@@ -1,52 +1,55 @@
 <template>
-  <div class="mobile-player" 
+  <div
+    class="mobile-player"
     :style="{
       width: playerSize.width + 'px',
       height: playerSize.height + 'px',
       transform: `rotate(90deg) translateY(-${playerSize.height}px)`,
     }"
   >
-    <div 
-      class="screen-slide-list" 
+    <div
+      class="screen-slide-list"
       @click="toolVisible = !toolVisible"
-      @touchstart="$event => touchStartListener($event)"
-      @touchend="$event => touchEndListener($event)"
+      @touchstart="($event) => touchStartListener($event)"
+      @touchend="($event) => touchEndListener($event)"
     >
-      <div 
+      <div
         :class="[
-          'slide-item', 
+          'slide-item',
           `turning-mode-${slide.turningMode || 'slideY'}`,
           {
-            'current': index === slideIndex,
-            'before': index < slideIndex,
-            'after': index > slideIndex,
-            'hide': (index === slideIndex - 1 || index === slideIndex + 1) && slide.turningMode !== slidesWithTurningMode[slideIndex].turningMode,
-            'last': index === slideIndex - 1,
-            'next': index === slideIndex + 1,
-          }
+            current: index === slideIndex,
+            before: index < slideIndex,
+            after: index > slideIndex,
+            hide:
+              (index === slideIndex - 1 || index === slideIndex + 1) &&
+              slide.turningMode !==
+                slidesWithTurningMode[slideIndex].turningMode,
+            last: index === slideIndex - 1,
+            next: index === slideIndex + 1,
+          },
         ]"
-        v-for="(slide, index) in slidesWithTurningMode" 
+        v-for="(slide, index) in slidesWithTurningMode"
         :key="slide.id"
       >
-        <div 
-          class="slide-content" 
+        <div
+          class="slide-content"
           :style="{
             width: slideSize.width + 'px',
             height: slideSize.height + 'px',
           }"
           v-if="Math.abs(slideIndex - index) < 2"
         >
-          <ThumbnailSlide 
-            :slide="slide" 
-            :size="slideSize.width" 
-          />
+          <ThumbnailSlide :slide="slide" :size="slideSize.width" />
         </div>
       </div>
     </div>
 
     <template v-if="toolVisible">
       <div class="header">
-        <div class="back" @click="changeMode('preview')"><IconLogout /> 退出播放</div>
+        <div class="back" @click="changeMode('preview')">
+          <IconLogout /> 退出播放
+        </div>
       </div>
       <MobileThumbnails class="thumbnails" />
     </template>
@@ -54,83 +57,86 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useSlidesStore } from '@/store'
-import type { Mode } from '@/types/mobile'
-import useSlidesWithTurningMode from '../Screen/hooks/useSlidesWithTurningMode'
+import { computed, onMounted, ref } from "vue";
+import { storeToRefs } from "pinia";
+import { useSlidesStore } from "@/store";
+import type { Mode } from "@/types/mobile";
+import useSlidesWithTurningMode from "../Screen/hooks/useSlidesWithTurningMode";
 
-import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
-import MobileThumbnails from './MobileThumbnails.vue'
+import ThumbnailSlide from "@/views/components/ThumbnailSlide/index.vue";
+import MobileThumbnails from "./MobileThumbnails.vue";
 
 defineProps<{
-  changeMode: (mode: Mode) => void
-}>()
+  changeMode: (mode: Mode) => void;
+}>();
 
-const slidesStore = useSlidesStore()
-const { slides, slideIndex, viewportRatio } = storeToRefs(slidesStore)
+const slidesStore = useSlidesStore();
+const { slides, slideIndex, viewportRatio } = storeToRefs(slidesStore);
 
-const { slidesWithTurningMode } = useSlidesWithTurningMode()
+const { slidesWithTurningMode } = useSlidesWithTurningMode();
 
-const toolVisible = ref(false)
+const toolVisible = ref(false);
 
-const playerSize = ref({ width: 0, height: 0 })
+const playerSize = ref({ width: 0, height: 0 });
 
 onMounted(() => {
-  if (slideIndex.value !== 0) slidesStore.updateSlideIndex(0)
+  if (slideIndex.value !== 0) slidesStore.updateSlideIndex(0);
 
   playerSize.value = {
     width: document.body.clientHeight,
     height: document.body.clientWidth,
-  }
-})
+  };
+});
 
 const slideSize = computed(() => {
-  const playerRatio = playerSize.value.height / playerSize.value.width
+  const playerRatio = playerSize.value.height / playerSize.value.width;
 
-  let slideWidth = 0
-  let slideHeight = 0
+  let slideWidth = 0;
+  let slideHeight = 0;
 
   if (playerRatio >= viewportRatio.value) {
-    slideWidth = playerSize.value.width
-    slideHeight = slideWidth * viewportRatio.value
-  }
-  else {
-    slideHeight = playerSize.value.height
-    slideWidth = slideHeight / viewportRatio.value
+    slideWidth = playerSize.value.width;
+    slideHeight = slideWidth * viewportRatio.value;
+  } else {
+    slideHeight = playerSize.value.height;
+    slideWidth = slideHeight / viewportRatio.value;
   }
 
   return {
     width: slideWidth,
     height: slideHeight,
-  }
-})
+  };
+});
 
-const touchInfo = ref<{ x: number; y: number; } | null>(null)
+const touchInfo = ref<{ x: number; y: number } | null>(null);
 const touchStartListener = (e: TouchEvent) => {
   touchInfo.value = {
     x: e.changedTouches[0].pageX,
     y: e.changedTouches[0].pageY,
-  }
-}
+  };
+};
 const touchEndListener = (e: TouchEvent) => {
-  if (!touchInfo.value) return
+  if (!touchInfo.value) return;
 
-  const offsetX = e.changedTouches[0].pageX - touchInfo.value.x
-  const offsetY = e.changedTouches[0].pageY - touchInfo.value.y
-  const offsetAbsX = Math.abs(offsetX)
-  const offsetAbsY = Math.abs(offsetY)
+  const offsetX = e.changedTouches[0].pageX - touchInfo.value.x;
+  const offsetY = e.changedTouches[0].pageY - touchInfo.value.y;
+  const offsetAbsX = Math.abs(offsetX);
+  const offsetAbsY = Math.abs(offsetY);
 
-  if ( offsetAbsX > offsetAbsY && offsetAbsX > 50 ) {
-    if (offsetX < 0 && slideIndex.value > 0) slidesStore.updateSlideIndex(slideIndex.value - 1)
-    if (offsetX > 0 && slideIndex.value < slides.value.length - 1) slidesStore.updateSlideIndex(slideIndex.value + 1)
+  if (offsetAbsX > offsetAbsY && offsetAbsX > 50) {
+    if (offsetX < 0 && slideIndex.value > 0)
+      slidesStore.updateSlideIndex(slideIndex.value - 1);
+    if (offsetX > 0 && slideIndex.value < slides.value.length - 1)
+      slidesStore.updateSlideIndex(slideIndex.value + 1);
   }
 
-  if ( offsetAbsY > offsetAbsX && offsetAbsY > 50 ) {
-    if (offsetY > 0 && slideIndex.value > 0) slidesStore.updateSlideIndex(slideIndex.value - 1)
-    if (offsetY < 0 && slideIndex.value < slides.value.length - 1) slidesStore.updateSlideIndex(slideIndex.value + 1)
+  if (offsetAbsY > offsetAbsX && offsetAbsY > 50) {
+    if (offsetY > 0 && slideIndex.value > 0)
+      slidesStore.updateSlideIndex(slideIndex.value - 1);
+    if (offsetY < 0 && slideIndex.value < slides.value.length - 1)
+      slidesStore.updateSlideIndex(slideIndex.value + 1);
   }
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -168,11 +174,11 @@ const touchEndListener = (e: TouchEvent) => {
       transform: translateY(-100%);
     }
     &.after {
-      transform: translateY(100%);
+      //transform: translateY(100%);
     }
   }
   &.turning-mode-fade {
-    transition: opacity .75s;
+    transition: opacity 0.75s;
     &.before {
       pointer-events: none;
       opacity: 0;
@@ -183,7 +189,7 @@ const touchEndListener = (e: TouchEvent) => {
     }
   }
   &.turning-mode-slideX {
-    transition: transform .35s;
+    transition: transform 0.35s;
     &.before {
       transform: translateX(-100%);
     }
@@ -192,12 +198,12 @@ const touchEndListener = (e: TouchEvent) => {
     }
   }
   &.turning-mode-slideY {
-    transition: transform .35s;
+    transition: transform 0.35s;
     &.before {
       transform: translateY(-100%);
     }
     &.after {
-      transform: translateY(100%);
+      //transform: translateY(100%);
     }
   }
 }
@@ -221,11 +227,11 @@ const touchEndListener = (e: TouchEvent) => {
   top: 0;
   left: 0;
   z-index: 99;
-  background-color: rgba($color: #1d1d1d, $alpha: .7);
+  background-color: rgba($color: #1d1d1d, $alpha: 0.7);
   text-align: right;
   font-size: 13px;
   color: #fff;
-  animation: slideInDown .15s;
+  animation: slideInDown 0.15s;
 
   .back {
     height: 100%;
@@ -237,14 +243,14 @@ const touchEndListener = (e: TouchEvent) => {
   bottom: 0;
   left: 0;
   z-index: 99;
-  background-color: rgba($color: #1d1d1d, $alpha: .7);
+  background-color: rgba($color: #1d1d1d, $alpha: 0.7);
   overflow: auto !important;
-  animation: slideInUp .15s;
+  animation: slideInUp 0.15s;
 }
 
 @keyframes slideInUp {
   from {
-    transform: translateY(100%);
+    //transform: translateY(100%);
   }
   to {
     transform: translateY(0);

src/views/Screen/ScreenSlideList.vue

@@ -1,31 +1,33 @@
 <template>
   <div class="screen-slide-list">
-    <div 
+    <div
       :class="[
-        'slide-item', 
+        'slide-item',
         `turning-mode-${slide.turningMode}`,
         {
-          'current': index === slideIndex,
-          'before': index < slideIndex,
-          'after': index > slideIndex,
-          'hide': (index === slideIndex - 1 || index === slideIndex + 1) && slide.turningMode !== slidesWithTurningMode[slideIndex].turningMode,
-          'last': index === slideIndex - 1,
-          'next': index === slideIndex + 1,
-        }
+          current: index === slideIndex,
+          before: index < slideIndex,
+          after: index > slideIndex,
+          hide:
+            (index === slideIndex - 1 || index === slideIndex + 1) &&
+            slide.turningMode !== slidesWithTurningMode[slideIndex].turningMode,
+          last: index === slideIndex - 1,
+          next: index === slideIndex + 1,
+        },
       ]"
-      v-for="(slide, index) in slidesWithTurningMode" 
+      v-for="(slide, index) in slidesWithTurningMode"
       :key="slide.id"
     >
-      <div 
-        class="slide-content" 
+      <div
+        class="slide-content"
         :style="{
           width: slideWidth + 'px',
           height: slideHeight + 'px',
         }"
         v-show="Math.abs(slideIndex - index) < 2 || slide.animations?.length"
       >
-        <ScreenSlide 
-          :slide="slide" 
+        <ScreenSlide
+          :slide="slide"
           :scale="scale"
           :animationIndex="animationIndex"
           :turnSlideToId="turnSlideToId"
@@ -37,28 +39,28 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, provide } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useSlidesStore } from '@/store'
-import { injectKeySlideScale } from '@/types/injectKey'
-import useSlidesWithTurningMode from './hooks/useSlidesWithTurningMode'
+import { computed, provide } from "vue";
+import { storeToRefs } from "pinia";
+import { useSlidesStore } from "@/store";
+import { injectKeySlideScale } from "@/types/injectKey";
+import useSlidesWithTurningMode from "./hooks/useSlidesWithTurningMode";
 
-import ScreenSlide from './ScreenSlide.vue'
+import ScreenSlide from "./ScreenSlide.vue";
 
 const props = defineProps<{
-  slideWidth: number
-  slideHeight: number
-  animationIndex: number
-  turnSlideToId: (id: string) => void
-  manualExitFullscreen: () => void
-}>()
+  slideWidth: number;
+  slideHeight: number;
+  animationIndex: number;
+  turnSlideToId: (id: string) => void;
+  manualExitFullscreen: () => void;
+}>();
 
-const { slideIndex, viewportSize } = storeToRefs(useSlidesStore())
+const { slideIndex, viewportSize } = storeToRefs(useSlidesStore());
 
-const { slidesWithTurningMode } = useSlidesWithTurningMode()
+const { slidesWithTurningMode } = useSlidesWithTurningMode();
 
-const scale = computed(() => props.slideWidth / viewportSize.value)
-provide(injectKeySlideScale, scale)
+const scale = computed(() => props.slideWidth / viewportSize.value);
+provide(injectKeySlideScale, scale);
 </script>
 
 <style lang="scss" scoped>
@@ -92,11 +94,11 @@ provide(injectKeySlideScale, scale)
       transform: translateY(-100%);
     }
     &.after {
-      transform: translateY(100%);
+      //transform: translateY(100%);
     }
   }
   &.turning-mode-fade {
-    transition: opacity .75s;
+    transition: opacity 0.75s;
     &.before {
       pointer-events: none;
       opacity: 0;
@@ -107,7 +109,7 @@ provide(injectKeySlideScale, scale)
     }
   }
   &.turning-mode-slideX {
-    transition: transform .35s;
+    transition: transform 0.35s;
     &.before {
       transform: translateX(-100%);
     }
@@ -116,34 +118,34 @@ provide(injectKeySlideScale, scale)
     }
   }
   &.turning-mode-slideY {
-    transition: transform .35s;
+    transition: transform 0.35s;
     &.before {
       transform: translateY(-100%);
     }
     &.after {
-      transform: translateY(100%);
+      //transform: translateY(100%);
     }
   }
   &.turning-mode-slideX3D {
-    transition: transform .5s;
+    transition: transform 0.5s;
     &.before {
-      transform: translateX(-100%) scale(.5);
+      transform: translateX(-100%) scale(0.5);
     }
     &.after {
-      transform: translateX(100%) scale(.5);
+      transform: translateX(100%) scale(0.5);
     }
   }
   &.turning-mode-slideY3D {
-    transition: transform .5s;
+    transition: transform 0.5s;
     &.before {
-      transform: translateY(-100%) scale(.5);
+      transform: translateY(-100%) scale(0.5);
     }
     &.after {
-      transform: translateY(100%) scale(.5);
+      transform: translateY(100%) scale(0.5);
     }
   }
   &.turning-mode-rotate {
-    transition: transform .5s;
+    transition: transform 0.5s;
     transform-origin: 0 0;
     &.before {
       transform: rotate(90deg);
@@ -153,34 +155,34 @@ provide(injectKeySlideScale, scale)
     }
   }
   &.turning-mode-scaleY {
-    transition: transform .5s;
+    transition: transform 0.5s;
     &.before {
-      transform: scaleY(.1);
+      transform: scaleY(0.1);
     }
     &.after {
-      transform: scaleY(.1);
+      transform: scaleY(0.1);
     }
   }
   &.turning-mode-scaleX {
-    transition: transform .5s;
+    transition: transform 0.5s;
     &.before {
-      transform: scaleX(.1);
+      transform: scaleX(0.1);
     }
     &.after {
-      transform: scaleX(.1);
+      transform: scaleX(0.1);
     }
   }
   &.turning-mode-scale {
-    transition: transform .5s;
+    transition: transform 0.5s;
     &.before {
-      transform: scale(.25);
+      transform: scale(0.25);
     }
     &.after {
-      transform: scale(.25);
+      transform: scale(0.25);
     }
   }
   &.turning-mode-scaleReverse {
-    transition: transform .5s;
+    transition: transform 0.5s;
     &.before {
       transform: scale(2);
     }

src/views/components/ThumbnailSlide/index.vue

@@ -1,16 +1,18 @@
 <template>
-  <div class="thumbnail-slide"
+  <div
+    class="thumbnail-slide"
     :style="{
       width: size + 'px',
       height: size * viewportRatio + 'px',
     }"
   >
-    <div 
+    <div
       class="elements"
       :style="{
         width: viewportSize + 'px',
         height: viewportSize * viewportRatio + 'px',
         transform: `scale(${scale})`,
+        position: 'absolute',
       }"
       v-if="visible"
     >
@@ -21,7 +23,7 @@
         :elementInfo="element"
         :elementIndex="index + 1"
       />
-      
+
       <!-- 遮罩层：确保iframe不会阻止缩略图点击事件 -->
       <div class="thumbnail-mask" @click="handleMaskClick"></div>
     </div>
@@ -30,42 +32,43 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, provide } from 'vue'
-import { storeToRefs } from 'pinia'
-import { useSlidesStore } from '@/store'
-import type { Slide } from '@/types/slides'
-import { injectKeySlideScale } from '@/types/injectKey'
-import useSlideBackgroundStyle from '@/hooks/useSlideBackgroundStyle'
+import { computed, provide } from "vue";
+import { storeToRefs } from "pinia";
+import { useSlidesStore } from "@/store";
+import type { Slide } from "@/types/slides";
+import { injectKeySlideScale } from "@/types/injectKey";
+import useSlideBackgroundStyle from "@/hooks/useSlideBackgroundStyle";
 
-import ThumbnailElement from './ThumbnailElement.vue'
+import ThumbnailElement from "./ThumbnailElement.vue";
 
-const props = withDefaults(defineProps<{
-  slide: Slide
-  size: number
-  visible?: boolean
-}>(), {
-  visible: true,
-})
+const props = withDefaults(
+  defineProps<{
+    slide: Slide;
+    size: number;
+    visible?: boolean;
+  }>(),
+  {
+    visible: true,
+  }
+);
 
 const emit = defineEmits<{
-  (event: 'click'): void
-}>()
+  (event: "click"): void;
+}>();
 
 // 处理遮罩层点击事件
 const handleMaskClick = (e: MouseEvent) => {
-  e.stopPropagation()
-  emit('click')
-}
-
-
+  e.stopPropagation();
+  emit("click");
+};
 
-const { viewportRatio, viewportSize } = storeToRefs(useSlidesStore())
+const { viewportRatio, viewportSize } = storeToRefs(useSlidesStore());
 
-const background = computed(() => props.slide.background)
-const { backgroundStyle } = useSlideBackgroundStyle(background)
+const background = computed(() => props.slide.background);
+const { backgroundStyle } = useSlideBackgroundStyle(background);
 
-const scale = computed(() => props.size / viewportSize.value)
-provide(injectKeySlideScale, scale)
+const scale = computed(() => props.size / viewportSize.value);
+provide(injectKeySlideScale, scale);
 </script>
 
 <style lang="scss" scoped>