feat(web): 新增控制台布局切换并完善状态与磁盘交互

新增经典、悬浮和侧栏布局,保存用户偏好,并调整工具栏、状态摘要及窄屏交互。
统一控制台弹层外观、焦点行为和中英文文案。
根据虚拟磁盘文件访问能力显示浏览入口、容量信息和不可用状态。

验证:npm run build 通过(vue-tsc 类型检查和 Vite 生产构建)。
This commit is contained in:
mofeng-git
2026-09-05 20:59:15 +08:00
parent db9d79554a
commit ece4f303ce
29 changed files with 1027 additions and 191 deletions

View 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,
}
}