fix: ESC退出放映异常（#88）、全屏状态异常

src/views/Screen/BaseView.vue

@@ -5,6 +5,7 @@
       :slideHeight="slideHeight"
       :animationIndex="animationIndex"
       :turnSlideToId="turnSlideToId"
+      :manualExitFullscreen="manualExitFullscreen"
       @mousewheel="$event => mousewheelListener($event)"
       @touchstart="$event => touchStartListener($event)"
       @touchend="$event => touchEndListener($event)"
@@ -43,7 +44,7 @@
           <IconListView class="tool-btn" @click="changeViewMode('presenter')" />
         </Tooltip>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" :title="fullscreenState ? '退出全屏' : '进入全屏'">
-          <IconOffScreenOne class="tool-btn" v-if="fullscreenState" @click="exitFullscreen()" />
+          <IconOffScreenOne class="tool-btn" v-if="fullscreenState" @click="manualExitFullscreen()" />
           <IconFullScreenOne class="tool-btn" v-else @click="enterFullscreen()" />
         </Tooltip>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="结束放映">
@@ -59,11 +60,11 @@ import { defineComponent, PropType, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
-import { enterFullscreen, exitFullscreen } from '@/utils/fullscreen'
+import { enterFullscreen } from '@/utils/fullscreen'
 import useScreening from '@/hooks/useScreening'
 import useExecPlay from './hooks/useExecPlay'
 import useSlideSize from './hooks/useSlideSize'
-import useFullscreenState from './hooks/useFullscreenState'
+import useFullscreen from './hooks/useFullscreen'
 
 import ScreenSlideList from './ScreenSlideList.vue'
 import SlideThumbnails from './SlideThumbnails.vue'
@@ -103,7 +104,7 @@ export default defineComponent({
 
     const { slideWidth, slideHeight } = useSlideSize()
     const { exitScreening } = useScreening()
-    const { fullscreenState } = useFullscreenState()
+    const { fullscreenState, manualExitFullscreen } = useFullscreen()
 
     const rightToolsVisible = ref(false)
     const writingBoardToolVisible = ref(false)
@@ -184,7 +185,7 @@ export default defineComponent({
       fullscreenState,
       exitScreening,
       enterFullscreen,
-      exitFullscreen,
+      manualExitFullscreen,
     }
   },
 })

src/views/Screen/PresenterView.vue

@@ -3,7 +3,7 @@
     <div class="toolbar">
       <div class="tool-btn" @click="changeViewMode('base')"><IconListView class="tool-icon" /><span>普通视图</span></div>
       <div class="tool-btn" @click="writingBoardToolVisible = !writingBoardToolVisible"><IconWrite class="tool-icon" /><span>画笔</span></div>
-      <div class="tool-btn" @click="() => fullscreenState ? exitFullscreen() : enterFullscreen()">
+      <div class="tool-btn" @click="() => fullscreenState ? manualExitFullscreen() : enterFullscreen()">
         <IconOffScreenOne class="tool-icon" v-if="fullscreenState" />
         <IconOffScreenOne class="tool-icon" v-else />
         <span>{{ fullscreenState ? '退出全屏' : '全屏' }}</span>
@@ -19,6 +19,7 @@
           :slideHeight="slideHeight"
           :animationIndex="animationIndex"
           :turnSlideToId="turnSlideToId"
+          :manualExitFullscreen="manualExitFullscreen"
           @mousewheel="$event => mousewheelListener($event)"
           @touchstart="$event => touchStartListener($event)"
           @touchend="$event => touchEndListener($event)"
@@ -70,13 +71,13 @@ import { computed, defineComponent, nextTick, ref, watch, PropType } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore } from '@/store'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
-import { enterFullscreen, exitFullscreen } from '@/utils/fullscreen'
+import { enterFullscreen } from '@/utils/fullscreen'
 import { parseText2Paragraphs } from '@/utils/textParser'
 import useScreening from '@/hooks/useScreening'
 import useLoadSlides from '@/hooks/useLoadSlides'
 import useExecPlay from './hooks/useExecPlay'
 import useSlideSize from './hooks/useSlideSize'
-import useFullscreenState from './hooks/useFullscreenState'
+import useFullscreen from './hooks/useFullscreen'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import ScreenSlideList from './ScreenSlideList.vue'
@@ -116,7 +117,7 @@ export default defineComponent({
     const { slideWidth, slideHeight } = useSlideSize(slideListWrapRef)
     const { exitScreening } = useScreening()
     const { slidesLoadLimit } = useLoadSlides()
-    const { fullscreenState } = useFullscreenState()
+    const { fullscreenState, manualExitFullscreen } = useFullscreen()
 
     const remarkFontSize = ref(16)
     const currentSlideRemark = computed(() => {
@@ -211,7 +212,7 @@ export default defineComponent({
       exitScreening,
       fullscreenState,
       enterFullscreen,
-      exitFullscreen,
+      manualExitFullscreen,
       writingBoardToolVisible,
     }
   },

src/views/Screen/ScreenElement.vue

@@ -54,6 +54,10 @@ export default defineComponent({
       type: Function as PropType<(id: string) => void>,
       required: true,
     },
+    manualExitFullscreen: {
+      type: Function as PropType<() => void>,
+      required: true,
+    },
   },
   setup(props) {
     const currentElementComponent = computed(() => {
@@ -84,9 +88,14 @@ export default defineComponent({
     // 打开元素绑定的超链接
     const openLink = () => {
       const link = props.elementInfo.link
-      if (link) {
-        if (link.type === 'web') window.open(link.target)
-        else if (link.type === 'slide') props.turnSlideToId(link.target)
+      if (!link) return
+
+      if (link.type === 'web') {
+        props.manualExitFullscreen()
+        window.open(link.target)
+      }
+      else if (link.type === 'slide') {
+        props.turnSlideToId(link.target)
       }
     }
 

src/views/Screen/ScreenSlide.vue

@@ -15,6 +15,7 @@
       :elementIndex="index + 1"
       :animationIndex="animationIndex"
       :turnSlideToId="turnSlideToId"
+      :manualExitFullscreen="manualExitFullscreen"
     />
   </div>
 </template>
@@ -51,6 +52,10 @@ export default defineComponent({
       type: Function as PropType<(id: string) => void>,
       required: true,
     },
+    manualExitFullscreen: {
+      type: Function as PropType<() => void>,
+      required: true,
+    },
   },
   setup(props) {
     const { viewportRatio } = storeToRefs(useSlidesStore())

src/views/Screen/ScreenSlideList.vue

@@ -27,6 +27,7 @@
           :scale="scale"
           :animationIndex="animationIndex"
           :turnSlideToId="turnSlideToId"
+          :manualExitFullscreen="manualExitFullscreen"
         />
       </div>
     </div>
@@ -63,6 +64,10 @@ export default defineComponent({
       type: Function as PropType<(id: string) => void>,
       required: true,
     },
+    manualExitFullscreen: {
+      type: Function as PropType<() => void>,
+      required: true,
+    },
   },
   setup(props) {
     const { slides, slideIndex, currentSlide } = storeToRefs(useSlidesStore())

src/views/Screen/hooks/useFullscreen.ts

@@ -0,0 +1,34 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+import { isFullscreen, exitFullscreen } from '@/utils/fullscreen'
+import useScreening from '@/hooks/useScreening'
+
+export default () => {
+  const fullscreenState = ref(true)
+  const escExit = ref(true)
+
+  const { exitScreening } = useScreening()
+
+  const windowResizeListener = () => {
+    fullscreenState.value = isFullscreen()
+    if (!fullscreenState.value && escExit.value) exitScreening()
+
+    escExit.value = true
+  }
+
+  onMounted(() => {
+    fullscreenState.value = isFullscreen()
+    window.addEventListener('resize', windowResizeListener)
+  })
+  onUnmounted(() => window.removeEventListener('resize', windowResizeListener))
+
+  const manualExitFullscreen = () => {
+    if (!fullscreenState.value) return
+    escExit.value = false
+    exitFullscreen()
+  }
+
+  return {
+    fullscreenState,
+    manualExitFullscreen,
+  }
+}

src/views/Screen/hooks/useFullscreenState.ts

@@ -1,15 +0,0 @@
-import { onMounted, onUnmounted, ref } from 'vue'
-import { isFullscreen } from '@/utils/fullscreen'
-
-export default () => {
-  const fullscreenState = ref(true)
-
-  const windowResizeListener = () => fullscreenState.value = isFullscreen()
-
-  onMounted(() => window.addEventListener('resize', windowResizeListener))
-  onUnmounted(() => window.removeEventListener('resize', windowResizeListener))
-
-  return {
-    fullscreenState,
-  }
-}