diff --git a/src/App.vue b/src/App.vue index c14af74..d2eb7af 100644 --- a/src/App.vue +++ b/src/App.vue @@ -38,10 +38,12 @@ const NARROW_NAV = '(max-width: 800px)' const SIDER_COLLAPSED_WIDTH = 64 /** 展开侧栏宽度,窄屏裁切动画以内层保持该宽度。 */ const SIDER_EXPANDED_WIDTH = 208 +/** 窄屏折叠侧栏宽度,给正文多留空间,仍覆盖 44px 点击区。 */ +const SIDER_COLLAPSED_WIDTH_NARROW = 48 +/** 窄屏展开侧栏宽度。 */ +const SIDER_EXPANDED_WIDTH_NARROW = 168 /** 菜单图标尺寸,折叠/展开共用,避免切换时缩放。 */ const NAV_ICON_SIZE = 20 -/** 折叠与展开共用的图标左偏移,避免切换时图标跳动。 */ -const NAV_ICON_INDENT = SIDER_COLLAPSED_WIDTH / 2 - NAV_ICON_SIZE / 2 /** 应用外壳固定在视口内,业务数据仍由各工作区自行加载。 */ const route = useRoute() @@ -51,6 +53,12 @@ const collapsed = ref(narrow.value) const settingsOpen = ref(false) /** 窄屏折叠只裁切文字,不把菜单收成图标,避免推挤动画时错位。 */ const menuCollapsed = computed(() => !narrow.value && collapsed.value) +/** 当前视口下的折叠侧栏宽度。 */ +const siderCollapsedWidth = computed(() => (narrow.value ? SIDER_COLLAPSED_WIDTH_NARROW : SIDER_COLLAPSED_WIDTH)) +/** 当前视口下的展开侧栏宽度。 */ +const siderExpandedWidth = computed(() => (narrow.value ? SIDER_EXPANDED_WIDTH_NARROW : SIDER_EXPANDED_WIDTH)) +/** 折叠与展开共用的图标左偏移,避免切换时图标跳动。 */ +const navIconIndent = computed(() => siderCollapsedWidth.value / 2 - NAV_ICON_SIZE / 2) /** 视口跨过断点时:进入窄屏收回侧栏。 */ function syncNarrow(event: MediaQueryListEvent) { @@ -144,19 +152,25 @@ const menuOptions = computed(() => [