diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index e0e843b..e82e8d4 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -43,7 +43,10 @@ 关闭左侧 关闭右侧 全部关闭 - 全屏显示 + + + + @@ -81,6 +84,7 @@ const scrollPaneRef = ref(null) const canScrollLeft = ref(false) const canScrollRight = ref(false) const isFullscreen = ref(false) +const hiddenElements = ref([]) const { proxy } = getCurrentInstance() const route = useRoute() @@ -117,14 +121,21 @@ onMounted(() => { initTags() addTags() window.addEventListener('resize', updateArrowState) - document.addEventListener('fullscreenchange', onFullscreenChange) + window.addEventListener('keydown', handleKeyDown) }) onBeforeUnmount(() => { window.removeEventListener('resize', updateArrowState) - document.removeEventListener('fullscreenchange', onFullscreenChange) + window.removeEventListener('keydown', handleKeyDown) }) +function handleKeyDown(event) { + // 当按下Esc键且处于全屏状态时,退出全屏 + if (event.key === 'Escape' && isFullscreen.value) { + toggleFullscreen() + } +} + function isActive(r) { return r.path === route.path } @@ -235,22 +246,34 @@ function updateArrowState() { } function toggleFullscreen() { - if (!document.fullscreenElement) { - const appMain = document.querySelector('.app-main') - if (appMain) { - appMain.requestFullscreen() - } - } else { - document.exitFullscreen() - } -} + const mainContainer = document.querySelector('.main-container') + const navbar = document.querySelector('.navbar') + const sidebar = document.querySelector('.sidebar-container') + if (!mainContainer) return -function onFullscreenChange() { - isFullscreen.value = !!document.fullscreenElement - const appMain = document.querySelector('.app-main') - if (appMain && !settingsStore.isDark) { - appMain.style.backgroundColor = document.fullscreenElement ? '#fff' : '' - appMain.style.overflowY = document.fullscreenElement ? 'auto' : '' + if (!isFullscreen.value) { + mainContainer.classList.add('fullscreen-mode') + document.body.style.overflow = 'hidden' + const elementsToHide = [{ el: navbar, originalDisplay: navbar?.style.display || '' }, { el: sidebar, originalDisplay: sidebar?.style.display || '' }] + elementsToHide.forEach(item => { + if (item.el && item.el.style.display !== 'none') { + item.originalDisplay = item.el.style.display + item.el.style.display = 'none' + hiddenElements.value.push(item) + } + }) + isFullscreen.value = true + } else { + mainContainer.classList.remove('fullscreen-mode') + document.body.style.overflow = '' + hiddenElements.value.forEach(item => { + if (item.el) { + item.el.style.display = item.originalDisplay + } + }) + hiddenElements.value = [] + document.querySelector('.tags-action-btn').blur() + isFullscreen.value = false } } @@ -517,4 +540,41 @@ function handleScroll() { } } } - \ No newline at end of file + +/* 页签全屏模式样式 */ +.main-container.fullscreen-mode { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + overflow: hidden; +} + +.main-container.fullscreen-mode .fixed-header { + display: block !important; + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100% !important; + z-index: 1000; +} + +.main-container.fullscreen-mode .fixed-header .navbar { + display: none !important; +} + +.main-container.fullscreen-mode .app-main { + position: fixed; + top: 34px; + left: 0; + right: 0; + bottom: 0; + margin: 0 !important; + padding: 0 !important; + height: calc(100vh - 34px) !important; + min-height: calc(100vh - 34px) !important; + overflow: auto; +} +