From f062fb1e2929aec38e3ea047d1239c32b02ddc7f Mon Sep 17 00:00:00 2001 From: TermiNexus Date: Sun, 2 Aug 2026 15:36:49 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=20menu=20UI=20=E6=9B=B4=E5=8A=A0?= =?UTF-8?q?=E8=88=92=E9=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/DefaultLayout.vue | 111 ++++++++++++++++++++++++++++++---- 1 file changed, 100 insertions(+), 11 deletions(-) diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue index 67d76b5..e9b7f72 100644 --- a/src/layouts/DefaultLayout.vue +++ b/src/layouts/DefaultLayout.vue @@ -8,7 +8,7 @@ * - TabBar：多标签页切换栏 * - 头像下拉菜单：用户信息头部 + 个人中心 + 系统设置 + 主题切换 + 退出登录 */ -import { computed, onMounted, ref } from 'vue' +import { computed, onMounted, ref, watch } from 'vue' import { useRoute, useRouter } from 'vue-router' import { ElMessage } from 'element-plus' import { useAppStore } from '@/stores/app' @@ -75,6 +75,38 @@ function handleMenuSelect(index: string): void { router.push(index) } +/** 折叠态下点击侧边栏任意位置（菜单项/子菜单标题），自动展开侧边栏 */ +function handleSidebarClick(): void { + if (appStore.sidebarCollapsed) { + appStore.toggleSidebar() + } +} + +// === 菜单折叠：折叠时收起所有展开的二级菜单（配合 CSS 过渡实现平滑收回）=== +const menuRef = ref() + +/** 收起所有已展开的二级菜单 */ +function closeAllSubMenus(): void { + const menu = menuRef.value + if (!menu) return + for (const m of userStore.menus) { + if (m.Children?.length) { + try { + menu.close(m.Path || m.Title) + } catch { + // 未展开的 sub-menu close 可能抛错，忽略 + } + } + } +} + +watch( + () => appStore.sidebarCollapsed, + (collapsed) => { + if (collapsed) closeAllSubMenus() + }, +) + /** 头像下拉菜单命令统一处理 */ function handleUserCommand(cmd: string): void { switch (cmd) { @@ -226,11 +258,11 @@ const isFaIcon = (icon: string | undefined | null): boolean => {