task-14(壳层/路由): 实现侧边栏折叠与窄屏行为及偏好持久化
sidebar-collapse 提供阈值/宽高常量、toggle、localStorage 偏好读写(失败容忍)、 initialCollapsed(持久化优先,窄屏自动收起);AdminLayout 接入并持久化折叠状态。
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user