perf: 调整放映快捷键

src/configs/hotkey.ts

@@ -24,6 +24,7 @@ export const enum KEYS {
   ESC = 'ESCAPE',
   PAGEUP = 'PAGEUP',
   PAGEDOWN = 'PAGEDOWN',
+  F5 = 'F5',
 }
 
 export const HOTKEY_DOC = [
@@ -44,7 +45,8 @@ export const HOTKEY_DOC = [
   {
     type: '幻灯片放映',
     children: [
-      { label: '开始放映幻灯片', value: 'Ctrl + F' },
+      { label: '从头开始放映幻灯片', value: 'F5' },
+      { label: '从当前开始放映幻灯片', value: 'Shift + F5' },
       { label: '切换上一页', value: '↑ / ← / PgUp' },
       { label: '切换下一页', value: '↓ / → / PgDown' },
       { label: '切换下一页', value: 'Enter / Space' },

src/hooks/useGlobalHotkey.ts

@@ -48,7 +48,7 @@ export default () => {
   const { moveElement } = useMoveElement()
   const { orderElement } = useOrderElement()
   const { redo, undo } = useHistorySnapshot()
-  const { enterScreening } = useScreening()
+  const { enterScreening, enterScreeningFromStart } = useScreening()
   const { scaleCanvas, resetCanvas } = useScaleCanvas()
 
   const copy = () => {
@@ -134,10 +134,16 @@ export default () => {
     if (shiftKey && !shiftKeyState.value) keyboardStore.setShiftKeyState(true)
     if (!disableHotkeys.value && key === KEYS.SPACE) keyboardStore.setSpaceKeyState(true)
 
-    if (ctrlOrMetaKeyActive && key === KEYS.F) {
+    if (shiftKey && key === KEYS.F5) {
       e.preventDefault()
       enterScreening()
-      keyboardStore.setCtrlKeyState(false)
+      keyboardStore.setShiftKeyState(false)
+      return
+    }
+    if (key === KEYS.F5) {
+      e.preventDefault()
+      enterScreeningFromStart()
+      return
     }
     
     if (!editorAreaFocus.value && !thumbnailsFocus.value) return      

src/views/Editor/Canvas/index.vue

@@ -91,7 +91,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, provide, ref, watch, watchEffect } from 'vue'
+import { defineComponent, onMounted, provide, ref, watch, watchEffect } from 'vue'
 import { throttle } from 'lodash'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore, useKeyboardStore } from '@/store'
@@ -189,9 +189,15 @@ export default defineComponent({
     const { selectAllElement } = useSelectAllElement()
     const { deleteAllElements } = useDeleteElement()
     const { pasteElement } = useCopyAndPasteElement()
-    const { enterScreening } = useScreening()
+    const { enterScreeningFromStart } = useScreening()
     const { updateSlideIndex } = useSlideHandler()
 
+    // 组件渲染时，如果存在元素焦点，需要清除
+    // 这种情况存在于：有焦点元素的情况下进入了放映模式，再退出时，需要清除原先的焦点（因为可能已经切换了页面）
+    onMounted(() => {
+      if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
+    })
+
     // 点击画布的空白区域：清空焦点元素、设置画布焦点、清除文字选区
     const handleClickBlankArea = (e: MouseEvent) => {
       mainStore.setActiveElementIdList([])
@@ -269,9 +275,9 @@ export default defineComponent({
         },
         { divider: true },
         {
-          text: '从当前页演示',
-          subText: 'Ctrl+F',
-          handler: enterScreening,
+          text: '幻灯片放映',
+          subText: 'F5',
+          handler: enterScreeningFromStart,
         },
       ]
     }

src/views/Editor/Thumbnails/index.vue

@@ -169,7 +169,7 @@ export default defineComponent({
       slidesStore.updateSlideIndex(newIndex)
     }
 
-    const { enterScreening } = useScreening()
+    const { enterScreening, enterScreeningFromStart } = useScreening()
 
     const contextmenusThumbnails = (): ContextmenuItem[] => {
       return [
@@ -189,9 +189,9 @@ export default defineComponent({
           handler: createSlide,
         },
         {
-          text: '开始演示',
-          subText: 'Ctrl + F',
-          handler: enterScreening,
+          text: '幻灯片放映',
+          subText: 'F5',
+          handler: enterScreeningFromStart,
         },
       ]
     }
@@ -236,8 +236,8 @@ export default defineComponent({
         },
         { divider: true },
         {
-          text: '从当前页演示',
-          subText: 'Ctrl + F',
+          text: '从当前放映',
+          subText: 'Shift + F5',
           handler: enterScreening,
         },
       ]