diff --git a/package.json b/package.json index 67c2324..ff921c5 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "vuedraggable": "4.1.0" }, "devDependencies": { + "@vicons/antd": "^0.13.0", "@vicons/ionicons5": "^0.13.0", "@vicons/utils": "^0.1.4", "@vitejs/plugin-vue": "5.2.4", diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index d45b59a..5839f05 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -43,9 +43,10 @@ -
+
- + +
@@ -160,7 +161,13 @@ import { LockClosedOutline, ChevronForward, ExitOutline, + ContractSharp, } from '@vicons/ionicons5' + +// AlignLeftOutlined +// CompressOutlined + +import { AlignLeftOutlined, CompressOutlined } from '@vicons/antd' import { initThemeTransitionCSS } from '@/utils/themeTransition' import { Icon } from '@vicons/utils' import Breadcrumb from '@/components/Breadcrumb' @@ -237,7 +244,20 @@ const handleKeyDown = (e) => { handleSearch() } } +const isFullscreen = ref(false) +// 开启全屏 +const handleScan = () => { + if (isFullscreen.value) { + // 退出全屏 + document.exitFullscreen() + isFullscreen.value = false + } else { + // 打开全屏 + document.documentElement.requestFullscreen() + isFullscreen.value = true + } +} onMounted(() => { window.addEventListener('keydown', handleKeyDown) // 初始化主题切换动画 CSS diff --git a/src/settings.js b/src/settings.js index ac1b77c..d45b1c8 100644 --- a/src/settings.js +++ b/src/settings.js @@ -23,7 +23,7 @@ export default { * 是否显示 tagsView */ tagsView: true, - + /** * 显示页签图标 */ @@ -32,7 +32,7 @@ export default { /** * 是否固定头部 */ - fixedHeader: false, + fixedHeader: true, /** * 是否显示logo diff --git a/src/utils/themeTransition.js b/src/utils/themeTransition.js index 663c3c7..fa4cab6 100644 --- a/src/utils/themeTransition.js +++ b/src/utils/themeTransition.js @@ -109,30 +109,30 @@ export function toggleThemeWithTransition(callback, event = null) { } ], { - duration: 600, + duration: 1000, easing: 'cubic-bezier(0.4, 0, 0.2, 1)', pseudoElement: '::view-transition-old(root)' } ) - // 新视图(日间模式)进入:从图标位置扩展到全屏 - document.documentElement.animate( - [ - { - clipPath: `circle(0px at ${iconX}px ${iconY}px)`, - opacity: 0 - }, - { - clipPath: `circle(${iconRadius}px at ${iconX}px ${iconY}px)`, - opacity: 1 - } - ], - { - duration: 600, - easing: 'cubic-bezier(0.4, 0, 0.2, 1)', - pseudoElement: '::view-transition-new(root)' - } - ) + // // 新视图(日间模式)进入:从图标位置扩展到全屏 + // document.documentElement.animate( + // [ + // { + // clipPath: `circle(0px at ${iconX}px ${iconY}px)`, + // opacity: 0 + // }, + // { + // clipPath: `circle(${iconRadius}px at ${iconX}px ${iconY}px)`, + // opacity: 1 + // } + // ], + // { + // duration: 600, + // easing: 'cubic-bezier(0.4, 0, 0.2, 1)', + // pseudoElement: '::view-transition-new(root)' + // } + // ) } }) }