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>
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
/** 侧边栏折叠与窄屏布局状态(任务 14):宽高常量、阈值、偏好持久化。 */
|
||||
|
||||
export const SIDEBAR_EXPANDED_WIDTH = 248
|
||||
export const SIDEBAR_COLLAPSED_WIDTH = 64
|
||||
export const SIDEBAR_NARROW_THRESHOLD = 900
|
||||
|
||||
/** 视口窄到需要自动收起侧边栏。 */
|
||||
export function isNarrowScreen(width: number): boolean {
|
||||
return width > 0 && width <= SIDEBAR_NARROW_THRESHOLD
|
||||
}
|
||||
|
||||
/** 反转折叠状态。 */
|
||||
export function toggleCollapsed(current: boolean): boolean {
|
||||
return !current
|
||||
}
|
||||
|
||||
export type CollapseStorage = Pick<Storage, 'getItem' | 'setItem'> | null
|
||||
|
||||
const PREFERENCE_KEY = 'admin.sidebar.collapsed'
|
||||
|
||||
function parsePreference(raw: string | null): boolean | null {
|
||||
return raw === 'true' ? true : raw === 'false' ? false : null
|
||||
}
|
||||
|
||||
/** 读取持久化偏好;无存储或值非法返回 null。 */
|
||||
export function readCollapsePreference(storage: CollapseStorage): boolean | null {
|
||||
try {
|
||||
return parsePreference(storage?.getItem(PREFERENCE_KEY) ?? null)
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/** 写入折叠偏好;存储不可用时静默失败(不阻断交互)。 */
|
||||
export function writeCollapsePreference(storage: CollapseStorage, collapsed: boolean): void {
|
||||
try {
|
||||
storage?.setItem(PREFERENCE_KEY, String(collapsed))
|
||||
} catch {
|
||||
// localStorage 不可用(隐私模式等)时忽略
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始折叠值:优先持久化偏好;无偏好时窄屏自动折叠、宽屏展开。
|
||||
* width<=0(如 SSR/未知)视为无法判定,回退 false。
|
||||
*/
|
||||
export function initialCollapsed(width: number, storage: CollapseStorage): boolean {
|
||||
const preference = readCollapsePreference(storage)
|
||||
if (preference !== null) return preference
|
||||
return isNarrowScreen(width)
|
||||
}
|
||||
|
||||
/** 侧边栏应占用的像素宽(用于宽度计算/测试,不直接改 CSS)。 */
|
||||
export function sidebarPixelWidth(collapsed: boolean): number {
|
||||
return collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_EXPANDED_WIDTH
|
||||
}
|
||||
Reference in New Issue
Block a user