diff --git a/src/frontend/src/components/NavBar.vue b/src/frontend/src/components/NavBar.vue index 42f17f9..603b6ff 100644 --- a/src/frontend/src/components/NavBar.vue +++ b/src/frontend/src/components/NavBar.vue @@ -14,7 +14,7 @@ const emit = defineEmits(['navigate', 'logout', 'toggle']) const isDarkMode = ref(true) const savedState = localStorage.getItem('kt_nav_expanded') -const isExpanded = ref(savedState === 'true' && savedState !== null ? true : false) +const isExpanded = ref(savedState === 'true' && typeof window !== 'undefined' && window.innerWidth > 900) // DOM Refs const navButtonRefs = ref([]) // 存储所有导航按钮的 DOM 元素 @@ -83,6 +83,19 @@ watch(() => props.currentSection, () => { // ResizeObserver: 监听容器尺寸变化(比 window.resize 更灵敏,能捕捉缩放) let resizeObserver = null + +// === 统一的窗口缩放处理函数 === +const handleWindowResize = () => { + // 1. 更新高亮条位置 (原有逻辑) + updateHighlightPosition() + + // 2. 响应式检查:如果屏幕变窄(<=900px)且当前是展开状态,强制收起 + if (window.innerWidth <= 900 && isExpanded.value) { + isExpanded.value = false + } +} + + onMounted(() => { const savedTheme = localStorage.getItem('theme') if (savedTheme === 'light') { @@ -105,13 +118,13 @@ onMounted(() => { resizeObserver.observe(navContainerRef.value) } // 同时监听 window resize 作为双重保障 - window.addEventListener('resize', updateHighlightPosition) + window.addEventListener('resize', handleWindowResize) }) }) onUnmounted(() => { if (resizeObserver) resizeObserver.disconnect() - window.removeEventListener('resize', updateHighlightPosition) + window.removeEventListener('resize', handleWindowResize) }) const handleNavClick = (id) => { emit('navigate', id) } diff --git a/src/frontend/src/views/MainFlow.vue b/src/frontend/src/views/MainFlow.vue index c88db26..a7848ea 100644 --- a/src/frontend/src/views/MainFlow.vue +++ b/src/frontend/src/views/MainFlow.vue @@ -309,8 +309,9 @@ onMounted(() => { // 添加可见性监听 document.addEventListener('visibilitychange', handleVisibilityChange) + const savedNavState = localStorage.getItem('kt_nav_expanded') - if (savedNavState === 'true') { + if (savedNavState === 'true' && window.innerWidth > 900) { setTimeout(() => { handleNavToggle(true) }, 200) diff --git a/src/frontend/src/views/Page4/Page4.vue b/src/frontend/src/views/Page4/Page4.vue index 85a2890..a123628 100644 --- a/src/frontend/src/views/Page4/Page4.vue +++ b/src/frontend/src/views/Page4/Page4.vue @@ -135,7 +135,7 @@