task-14(壳层/路由): 实现侧边栏折叠与窄屏行为及偏好持久化

sidebar-collapse 提供阈值/宽高常量、toggle、localStorage 偏好读写(失败容忍)、
initialCollapsed(持久化优先,窄屏自动收起);AdminLayout 接入并持久化折叠状态。
This commit is contained in:
2026-09-05 12:26:30 +08:00
parent c3f160afa5
commit 13e7a4c602
3 changed files with 167 additions and 2 deletions
+18 -2
View File
@@ -12,11 +12,27 @@ import {
shouldShowEmptyMenu,
} from '@/layout/empty-state'
import GlobalErrorContainer from '@/layout/GlobalErrorContainer.vue'
import { initialCollapsed, toggleCollapsed, writeCollapsePreference } from '@/layout/sidebar-collapse'
const route = useRoute()
const router = useRouter()
const session = useAdminSessionStore()
const collapsed = ref(false)
const collapsed = ref(readInitialCollapse())
function readInitialCollapse(): boolean {
const storage = typeof window !== 'undefined' ? window.localStorage : null
const width = typeof window !== 'undefined' ? window.innerWidth : 0
return initialCollapsed(width, storage)
}
function setCollapsed(value: boolean): void {
collapsed.value = value
if (typeof window !== 'undefined') writeCollapsePreference(window.localStorage, value)
}
function toggleSidebar(): void {
setCollapsed(toggleCollapsed(collapsed.value))
}
const activePath = computed(() => route.path)
const menuEntries = computed(() => toSidebarEntries(session.menuTree))
@@ -65,7 +81,7 @@ async function signOut() {
<el-empty v-if="emptyMenu" :description="EMPTY_MENU_TITLE" :image-size="72" />
</el-scrollbar>
<button class="sidebar-collapse" type="button" @click="collapsed = !collapsed">
<button class="sidebar-collapse" type="button" @click="toggleSidebar">
{{ collapsed ? '展开菜单' : '收起菜单' }}
</button>
</aside>