mirror of
https://github.com/mofeng-git/One-KVM.git
synced 2026-09-13 11:04:25 +08:00
feat(web): 新增控制台布局切换并完善状态与磁盘交互
新增经典、悬浮和侧栏布局,保存用户偏好,并调整工具栏、状态摘要及窄屏交互。 统一控制台弹层外观、焦点行为和中英文文案。 根据虚拟磁盘文件访问能力显示浏览入口、容量信息和不可用状态。 验证:npm run build 通过(vue-tsc 类型检查和 Vite 生产构建)。
This commit is contained in:
32
web/src/composables/useConsoleLayout.ts
Normal file
32
web/src/composables/useConsoleLayout.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
export type ConsoleLayout = 'current' | 'floating' | 'sidebar'
|
||||
|
||||
const STORAGE_KEY = 'consoleLayout'
|
||||
const VALID_LAYOUTS: ConsoleLayout[] = ['current', 'floating', 'sidebar']
|
||||
|
||||
function readStoredLayout(): ConsoleLayout {
|
||||
const stored = localStorage.getItem(STORAGE_KEY)
|
||||
return VALID_LAYOUTS.includes(stored as ConsoleLayout)
|
||||
? stored as ConsoleLayout
|
||||
: 'current'
|
||||
}
|
||||
|
||||
const consoleLayout = ref<ConsoleLayout>(readStoredLayout())
|
||||
|
||||
watch(consoleLayout, layout => {
|
||||
localStorage.setItem(STORAGE_KEY, layout)
|
||||
})
|
||||
|
||||
export function useConsoleLayout() {
|
||||
function setConsoleLayout(layout: ConsoleLayout) {
|
||||
if (VALID_LAYOUTS.includes(layout)) {
|
||||
consoleLayout.value = layout
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
consoleLayout,
|
||||
setConsoleLayout,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user