From e315518becba4b1567fbdde0305a4c5489f2291e Mon Sep 17 00:00:00 2001 From: pipipi-pikachu Date: Tue, 22 Mar 2022 22:41:27 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E6=94=AF=E6=8C=81=E9=9D=9E=E5=85=A8?= =?UTF-8?q?=E5=B1=8F=E7=8A=B6=E6=80=81=E4=B8=8B=E6=94=BE=E6=98=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/configs/hotkey.ts | 1 + src/plugins/icon.ts | 6 ++ src/views/Screen/WritingBoardTool.vue | 2 +- src/views/Screen/index.vue | 139 +++++++++++++++++++------- 4 files changed, 109 insertions(+), 39 deletions(-) diff --git a/src/configs/hotkey.ts b/src/configs/hotkey.ts index 43fcfff4..d964e6e3 100644 --- a/src/configs/hotkey.ts +++ b/src/configs/hotkey.ts @@ -21,6 +21,7 @@ export const enum KEYS { SPACE = ' ', TAB = 'TAB', BACKSPACE = 'BACKSPACE', + ESC = 'ESCAPE', } export const HOTKEY_DOC = [ diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index 0192de3c..ec8a3a91 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -88,6 +88,9 @@ import { Formula, ElectronicPen, LinkOne, + FullScreenOne, + OffScreenOne, + Power, } from '@icon-park/vue-next' export default { @@ -108,6 +111,8 @@ export default { // 全屏 app.component('IconFullScreen', FullScreen) + app.component('IconFullScreenOne', FullScreenOne) + app.component('IconOffScreenOne', OffScreenOne) // 撤销重做 app.component('IconBack', Back) @@ -199,6 +204,7 @@ export default { app.component('IconClear', Clear) app.component('IconFolderClose', FolderClose) app.component('IconElectronicPen', ElectronicPen) + app.component('IconPower', Power) // 视频播放器 app.component('IconPause', Pause) diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue index fb65e4de..46c1a597 100644 --- a/src/views/Screen/WritingBoardTool.vue +++ b/src/views/Screen/WritingBoardTool.vue @@ -107,7 +107,7 @@ export default defineComponent({ height: 50px; position: fixed; bottom: 5px; - left: 5px; + right: 5px; z-index: 11; padding: 12px; background-color: #eee; diff --git a/src/views/Screen/index.vue b/src/views/Screen/index.vue index 60d03683..cceb036d 100644 --- a/src/views/Screen/index.vue +++ b/src/views/Screen/index.vue @@ -47,14 +47,29 @@ -
+
-
-
- {{slideIndex + 1}} / {{slides.length}} +
+
+
幻灯片 {{slideIndex + 1}} / {{slides.length}}
+ + + + + + + + + + +
@@ -67,7 +82,7 @@ import { useSlidesStore } from '@/store' import { VIEWPORT_SIZE } from '@/configs/canvas' import { KEYS } from '@/configs/hotkey' import { ContextmenuItem } from '@/components/Contextmenu/types' -import { isFullscreen } from '@/utils/fullscreen' +import { isFullscreen, enterFullscreen, exitFullscreen } from '@/utils/fullscreen' import useScreening from '@/hooks/useScreening' import { message } from 'ant-design-vue' @@ -92,12 +107,12 @@ export default defineComponent({ const scale = computed(() => slideWidth.value / VIEWPORT_SIZE) - const showPageNumber = ref(false) - + const rightToolsVisible = ref(false) const slideThumbnailModelVisible = ref(false) - const writingBoardToolVisible = ref(false) + const { exitScreening } = useScreening() + // 计算和更新幻灯片内容的尺寸（按比例自适应屏幕） const setSlideContentSize = () => { const winWidth = document.body.clientWidth @@ -121,12 +136,11 @@ export default defineComponent({ } // 窗口尺寸变化监听：窗口发生变化时更新幻灯片的大小 - // 如果退出了全屏，需要返回到编辑模式 - const { exitScreening } = useScreening() + const fullscreenState = ref(true) const windowResizeListener = () => { setSlideContentSize() - if (!isFullscreen()) exitScreening() + fullscreenState.value = isFullscreen() } onMounted(() => { @@ -241,10 +255,12 @@ export default defineComponent({ } } - // 快捷键翻页 + // 快捷键翻页/退出 const keydownListener = (e: KeyboardEvent) => { const key = e.key.toUpperCase() - if (key === KEYS.UP || key === KEYS.LEFT) execPrev() + + if (key === KEYS.ESC) exitScreening() + else if (key === KEYS.UP || key === KEYS.LEFT) execPrev() else if ( key === KEYS.DOWN || key === KEYS.RIGHT || @@ -310,16 +326,15 @@ export default defineComponent({ }, { divider: true }, { - text: '显示页码', - subText: showPageNumber.value ? '√' : '', - handler: () => showPageNumber.value = !showPageNumber.value, + text: '显示工具栏', + handler: () => rightToolsVisible.value = true, }, { text: '查看所有幻灯片', handler: () => slideThumbnailModelVisible.value = true, }, { - text: '画笔', + text: '画笔工具', handler: () => writingBoardToolVisible.value = true, }, { divider: true }, @@ -351,11 +366,15 @@ export default defineComponent({ contextmenus, execPrev, execNext, - slideThumbnailModelVisible, turnSlideToIndex, turnSlideToId, + slideThumbnailModelVisible, writingBoardToolVisible, - showPageNumber, + rightToolsVisible, + fullscreenState, + exitScreening, + enterFullscreen, + exitFullscreen, } }, }) @@ -438,34 +457,78 @@ export default defineComponent({ align-items: center; } -.tools { +.tools-left { position: fixed; bottom: 8px; left: 8px; font-size: 25px; color: #666; z-index: 10; - cursor: pointer; -} -.tool-btn { - opacity: .35; - &:hover { - opacity: .9; - } - & + .tool-btn { - margin-left: 8px; + .tool-btn { + opacity: .35; + cursor: pointer; + + &:hover { + opacity: .9; + } + & + .tool-btn { + margin-left: 8px; + } } } -.page-number { +.tools-right { + height: 66px; position: fixed; - bottom: 8px; - right: 8px; - padding: 8px 12px; - color: #666; - background-color: #eee; - border-radius: $borderRadius; - z-index: 10; - cursor: pointer; + bottom: -66px; + right: 0; + z-index: 5; + padding: 8px; + transition: bottom $transitionDelay; + + &.visible { + bottom: 0; + } + + &::after { + content: ''; + width: 100%; + height: 66px; + position: absolute; + left: 0; + top: -66px; + } + + .content { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + border-radius: $borderRadius; + font-size: 25px; + background-color: #fff; + color: $textColor; + padding: 8px 10px; + box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%); + border: 1px solid #e2e6ed; + } + + .tool-btn { + cursor: pointer; + + &:hover { + color: $themeColor; + } + + & + .tool-btn { + margin-left: 15px; + } + } + .page-number { + font-size: 13px; + padding: 8px 12px; + cursor: pointer; + } } \ No newline at end of file