847 lines
27 KiB
Vue
847 lines
27 KiB
Vue
<script setup lang="ts">
|
||
import {
|
||
ArrowUpBold,
|
||
Delete,
|
||
Document,
|
||
EditPen,
|
||
FolderOpened,
|
||
House,
|
||
Monitor,
|
||
Plus,
|
||
Right,
|
||
School,
|
||
Trophy,
|
||
} from '@element-plus/icons-vue'
|
||
import { computed, nextTick, onMounted, onUnmounted, ref, watch, type Component } from 'vue'
|
||
|
||
type SectionId = 'overview' | 'explorer' | 'games' | 'school'
|
||
type ExplorerItemKind = 'folder' | 'file'
|
||
type GameId = 'race' | 't_race'
|
||
|
||
interface ExplorerItem {
|
||
id: string
|
||
parentId: string | null
|
||
kind: ExplorerItemKind
|
||
name: string
|
||
}
|
||
|
||
interface GameOption {
|
||
id: GameId
|
||
label: string
|
||
subtitle: string
|
||
path: string
|
||
}
|
||
|
||
interface SectionNavItem {
|
||
id: SectionId
|
||
title: string
|
||
subtitle: string
|
||
icon: Component
|
||
}
|
||
|
||
interface ExplorerFolderTreeItem {
|
||
id: string
|
||
name: string
|
||
level: number
|
||
hasChildren: boolean
|
||
expanded: boolean
|
||
}
|
||
|
||
const text = {
|
||
skip: '跳到主要内容',
|
||
loginTitle: 'Workspace Login',
|
||
loginSubtitle: '输入账号后进入工作区视图。',
|
||
username: '用户名',
|
||
usernamePlaceholder: '输入用户名…',
|
||
password: '密码',
|
||
passwordPlaceholder: '输入密码…',
|
||
loginButton: '进入工作区',
|
||
welcome: '欢迎回来',
|
||
}
|
||
|
||
const username = ref('')
|
||
const password = ref('')
|
||
const loginError = ref('')
|
||
const statusMessage = ref('')
|
||
const isLoggedIn = ref(false)
|
||
const activeSection = ref<SectionId>('overview')
|
||
const selectedGameId = ref<GameId | null>(null)
|
||
const isGameFullscreen = ref(false)
|
||
const explorerCurrentFolderId = ref('root')
|
||
const explorerSelectedItemId = ref<string | null>(null)
|
||
const expandedFolderIds = ref(new Set<string>(['root']))
|
||
const nextExplorerId = ref(1000)
|
||
const gamePlayerRef = ref<HTMLElement | null>(null)
|
||
const loginRef = ref<HTMLElement | null>(null)
|
||
const workspaceRef = ref<HTMLElement | null>(null)
|
||
const sidebarRef = ref<HTMLElement | null>(null)
|
||
const sidebarIndicatorStyle = ref({
|
||
transform: 'translateY(0px)',
|
||
height: '0px',
|
||
opacity: '0',
|
||
})
|
||
const sidebarIndicatorJelly = ref(false)
|
||
let sidebarJellyTimer: ReturnType<typeof setTimeout> | null = null
|
||
let glowFrameId: number | null = null
|
||
let latestPointer: { x: number; y: number } | null = null
|
||
let latestPointerTarget: 'workspace' | 'login' | null = null
|
||
const lightTargetSelector =
|
||
'.nav-item, .ghost-btn, .primary-btn, .icon-btn, .game-card, .file-main, .folder-item, .topbar, .sidebar, .panel, .hero-card, .metric-card, .explorer-toolbar, .folder-list, .file-list, .file-card, .game-player, .study-card, .path-segment, .status'
|
||
const loginLightTargetSelector = '.login-card, .login-form button, .login-input-shell, .login-card h1'
|
||
|
||
const navItems: SectionNavItem[] = [
|
||
{ id: 'overview', title: '总览', subtitle: '项目入口与状态', icon: House },
|
||
{ id: 'explorer', title: '文件', subtitle: '管理目录与文件', icon: FolderOpened },
|
||
{ id: 'games', title: '游戏', subtitle: '启动内置小游戏', icon: Trophy },
|
||
{ id: 'school', title: '学习', subtitle: '课程与路线图', icon: School },
|
||
]
|
||
|
||
const explorerItems = ref<ExplorerItem[]>([
|
||
{ id: 'root', parentId: null, kind: 'folder', name: 'Workspace' },
|
||
{ id: 'f-projects', parentId: 'root', kind: 'folder', name: 'Projects' },
|
||
{ id: 'f-docs', parentId: 'root', kind: 'folder', name: 'Docs' },
|
||
{ id: 'f-media', parentId: 'root', kind: 'folder', name: 'Assets' },
|
||
{ id: 'f-ui', parentId: 'f-projects', kind: 'folder', name: 'UI-Experiments' },
|
||
{ id: 'file-readme', parentId: 'root', kind: 'file', name: 'Readme.txt' },
|
||
{ id: 'file-plan', parentId: 'f-docs', kind: 'file', name: 'Roadmap.md' },
|
||
{ id: 'file-shot', parentId: 'f-media', kind: 'file', name: 'Preview.png' },
|
||
])
|
||
|
||
const gameOptions: GameOption[] = [
|
||
{ id: 'race', label: 'Race', subtitle: '经典 JS13K 版本', path: '/race/index.html' },
|
||
{ id: 't_race', label: 'HTML Race', subtitle: '新版 HTML 版本', path: '/t_race/index.html' },
|
||
]
|
||
|
||
const currentUser = computed(() => username.value.trim() || 'Guest')
|
||
|
||
const explorerCurrentFolder = computed(
|
||
() => explorerItems.value.find((item) => item.id === explorerCurrentFolderId.value) ?? explorerItems.value[0],
|
||
)
|
||
|
||
const explorerChildItems = computed(() =>
|
||
explorerItems.value
|
||
.filter((item) => item.parentId === explorerCurrentFolderId.value)
|
||
.sort((a, b) => {
|
||
if (a.kind !== b.kind) return a.kind === 'folder' ? -1 : 1
|
||
return a.name.localeCompare(b.name)
|
||
}),
|
||
)
|
||
|
||
const explorerPath = computed(() => {
|
||
const result: ExplorerItem[] = []
|
||
const itemMap = new Map(explorerItems.value.map((item) => [item.id, item]))
|
||
let cursorId: string | null = explorerCurrentFolderId.value
|
||
|
||
while (cursorId) {
|
||
const current = itemMap.get(cursorId)
|
||
if (!current) break
|
||
result.unshift(current)
|
||
cursorId = current.parentId
|
||
}
|
||
|
||
return result
|
||
})
|
||
|
||
const explorerFolders = computed(() =>
|
||
explorerItems.value
|
||
.filter((item) => item.kind === 'folder')
|
||
.sort((a, b) => a.name.localeCompare(b.name)),
|
||
)
|
||
|
||
const explorerFolderChildrenMap = computed(() => {
|
||
const folderMap = new Map<string, ExplorerItem[]>()
|
||
for (const folder of explorerFolders.value) {
|
||
folderMap.set(folder.id, [])
|
||
}
|
||
for (const item of explorerFolders.value) {
|
||
if (!item.parentId) continue
|
||
if (!folderMap.has(item.parentId)) continue
|
||
folderMap.get(item.parentId)!.push(item)
|
||
}
|
||
for (const children of folderMap.values()) {
|
||
children.sort((a, b) => a.name.localeCompare(b.name))
|
||
}
|
||
return folderMap
|
||
})
|
||
|
||
const explorerFolderTreeItems = computed<ExplorerFolderTreeItem[]>(() => {
|
||
const root = explorerItems.value.find((item) => item.id === 'root' && item.kind === 'folder')
|
||
if (!root) return []
|
||
|
||
const result: ExplorerFolderTreeItem[] = []
|
||
const walk = (folder: ExplorerItem, level: number) => {
|
||
const children = explorerFolderChildrenMap.value.get(folder.id) ?? []
|
||
const expanded = expandedFolderIds.value.has(folder.id)
|
||
result.push({
|
||
id: folder.id,
|
||
name: folder.name,
|
||
level,
|
||
hasChildren: children.length > 0,
|
||
expanded,
|
||
})
|
||
if (!expanded) return
|
||
for (const child of children) {
|
||
walk(child, level + 1)
|
||
}
|
||
}
|
||
|
||
walk(root, 0)
|
||
return result
|
||
})
|
||
|
||
const activeGame = computed(() => gameOptions.find((option) => option.id === selectedGameId.value) ?? null)
|
||
|
||
function setSection(nextSection: SectionId) {
|
||
activeSection.value = nextSection
|
||
statusMessage.value = `已切换到${navItems.find((item) => item.id === nextSection)?.title ?? ''}视图。`
|
||
}
|
||
|
||
function applyMouseLighting(clientX: number, clientY: number) {
|
||
const workspace = workspaceRef.value
|
||
if (!workspace) return
|
||
|
||
const targets = workspace.querySelectorAll<HTMLElement>(lightTargetSelector)
|
||
for (const target of targets) {
|
||
const rect = target.getBoundingClientRect()
|
||
target.style.setProperty('--lx', `${clientX - rect.left}px`)
|
||
target.style.setProperty('--ly', `${clientY - rect.top}px`)
|
||
}
|
||
}
|
||
|
||
function applyLoginLighting(clientX: number, clientY: number) {
|
||
const login = loginRef.value
|
||
if (!login) return
|
||
login.classList.add('lighting-active')
|
||
|
||
const targets = login.querySelectorAll<HTMLElement>(loginLightTargetSelector)
|
||
for (const target of targets) {
|
||
const rect = target.getBoundingClientRect()
|
||
const x = `${clientX - rect.left}px`
|
||
const y = `${clientY - rect.top}px`
|
||
target.style.setProperty('--lx', x)
|
||
target.style.setProperty('--ly', y)
|
||
target.style.setProperty('--mx', x)
|
||
target.style.setProperty('--my', y)
|
||
}
|
||
}
|
||
|
||
function flushMouseLighting() {
|
||
glowFrameId = null
|
||
if (!latestPointer) return
|
||
if (latestPointerTarget === 'workspace') {
|
||
applyMouseLighting(latestPointer.x, latestPointer.y)
|
||
} else if (latestPointerTarget === 'login') {
|
||
applyLoginLighting(latestPointer.x, latestPointer.y)
|
||
}
|
||
}
|
||
|
||
function onWorkspacePointerMove(event: PointerEvent) {
|
||
latestPointerTarget = 'workspace'
|
||
latestPointer = { x: event.clientX, y: event.clientY }
|
||
if (glowFrameId !== null) return
|
||
glowFrameId = requestAnimationFrame(flushMouseLighting)
|
||
}
|
||
|
||
function onWorkspacePointerLeave() {
|
||
const workspace = workspaceRef.value
|
||
if (!workspace) return
|
||
const targets = workspace.querySelectorAll<HTMLElement>(lightTargetSelector)
|
||
for (const target of targets) {
|
||
target.style.setProperty('--lx', '-9999px')
|
||
target.style.setProperty('--ly', '-9999px')
|
||
}
|
||
latestPointerTarget = null
|
||
}
|
||
|
||
function onLoginPointerMove(event: PointerEvent) {
|
||
latestPointerTarget = 'login'
|
||
latestPointer = { x: event.clientX, y: event.clientY }
|
||
if (glowFrameId !== null) return
|
||
glowFrameId = requestAnimationFrame(flushMouseLighting)
|
||
}
|
||
|
||
function onLoginPointerLeave() {
|
||
const login = loginRef.value
|
||
if (!login) return
|
||
login.classList.remove('lighting-active')
|
||
const targets = login.querySelectorAll<HTMLElement>(loginLightTargetSelector)
|
||
for (const target of targets) {
|
||
target.style.setProperty('--lx', '-9999px')
|
||
target.style.setProperty('--ly', '-9999px')
|
||
target.style.setProperty('--mx', '-9999px')
|
||
target.style.setProperty('--my', '-9999px')
|
||
}
|
||
latestPointerTarget = null
|
||
}
|
||
|
||
function updateSidebarIndicator(triggerJelly = false) {
|
||
const sidebar = sidebarRef.value
|
||
if (!sidebar) return
|
||
|
||
const activeButton = sidebar.querySelector<HTMLButtonElement>(`.nav-item[data-section-id="${activeSection.value}"]`)
|
||
if (!activeButton) return
|
||
|
||
sidebarIndicatorStyle.value = {
|
||
transform: `translateY(${activeButton.offsetTop}px)`,
|
||
height: `${activeButton.offsetHeight}px`,
|
||
opacity: '1',
|
||
}
|
||
|
||
if (!triggerJelly) return
|
||
|
||
sidebarIndicatorJelly.value = false
|
||
requestAnimationFrame(() => {
|
||
sidebarIndicatorJelly.value = true
|
||
})
|
||
|
||
if (sidebarJellyTimer) {
|
||
clearTimeout(sidebarJellyTimer)
|
||
}
|
||
sidebarJellyTimer = setTimeout(() => {
|
||
sidebarIndicatorJelly.value = false
|
||
}, 560)
|
||
}
|
||
|
||
function submitLogin() {
|
||
loginError.value = ''
|
||
if (!username.value.trim()) {
|
||
loginError.value = '请输入用户名。'
|
||
return
|
||
}
|
||
if (!password.value.trim()) {
|
||
loginError.value = '请输入密码。'
|
||
return
|
||
}
|
||
|
||
isLoggedIn.value = true
|
||
statusMessage.value = `${text.welcome}，${username.value.trim()}。`
|
||
}
|
||
|
||
function logout() {
|
||
isLoggedIn.value = false
|
||
password.value = ''
|
||
selectedGameId.value = null
|
||
activeSection.value = 'overview'
|
||
statusMessage.value = '你已退出登录。'
|
||
}
|
||
|
||
function openFolder(folderId: string) {
|
||
explorerCurrentFolderId.value = folderId
|
||
explorerSelectedItemId.value = null
|
||
expandFolderPath(folderId)
|
||
}
|
||
|
||
function explorerGoUp() {
|
||
const current = explorerCurrentFolder.value
|
||
if (!current?.parentId) return
|
||
explorerCurrentFolderId.value = current.parentId
|
||
explorerSelectedItemId.value = null
|
||
}
|
||
|
||
function goToPathFolder(folderId: string) {
|
||
explorerCurrentFolderId.value = folderId
|
||
explorerSelectedItemId.value = null
|
||
expandFolderPath(folderId)
|
||
}
|
||
|
||
function toggleFolderExpand(folderId: string) {
|
||
const nextExpanded = new Set(expandedFolderIds.value)
|
||
if (nextExpanded.has(folderId)) {
|
||
if (folderId !== 'root') {
|
||
nextExpanded.delete(folderId)
|
||
}
|
||
} else {
|
||
nextExpanded.add(folderId)
|
||
}
|
||
expandedFolderIds.value = nextExpanded
|
||
}
|
||
|
||
function expandFolderPath(folderId: string) {
|
||
const parentMap = new Map(explorerFolders.value.map((folder) => [folder.id, folder.parentId]))
|
||
const nextExpanded = new Set(expandedFolderIds.value)
|
||
|
||
let cursor: string | null = folderId
|
||
while (cursor) {
|
||
nextExpanded.add(cursor)
|
||
cursor = parentMap.get(cursor) ?? null
|
||
}
|
||
|
||
nextExpanded.add('root')
|
||
expandedFolderIds.value = nextExpanded
|
||
}
|
||
|
||
function nextName(baseName: string, parentId: string, kind: ExplorerItemKind) {
|
||
const siblingNames = new Set(
|
||
explorerItems.value
|
||
.filter((item) => item.parentId === parentId && item.kind === kind)
|
||
.map((item) => item.name),
|
||
)
|
||
if (!siblingNames.has(baseName)) return baseName
|
||
|
||
let index = 2
|
||
while (siblingNames.has(`${baseName} (${index})`)) {
|
||
index += 1
|
||
}
|
||
return `${baseName} (${index})`
|
||
}
|
||
|
||
function createExplorerItem(kind: ExplorerItemKind) {
|
||
const parentId = explorerCurrentFolderId.value
|
||
const baseName = kind === 'folder' ? 'New Folder' : 'New File.txt'
|
||
const nextItem: ExplorerItem = {
|
||
id: `${kind}-${nextExplorerId.value++}`,
|
||
parentId,
|
||
kind,
|
||
name: nextName(baseName, parentId, kind),
|
||
}
|
||
explorerItems.value.push(nextItem)
|
||
explorerSelectedItemId.value = nextItem.id
|
||
if (kind === 'folder') {
|
||
expandFolderPath(parentId)
|
||
}
|
||
statusMessage.value = `已创建${kind === 'folder' ? '文件夹' : '文件'}：${nextItem.name}`
|
||
}
|
||
|
||
function renameExplorerItem(itemId: string) {
|
||
const item = explorerItems.value.find((entry) => entry.id === itemId)
|
||
if (!item) return
|
||
|
||
const input = window.prompt('输入新名称', item.name)
|
||
if (input === null) return
|
||
const next = input.trim()
|
||
if (!next) {
|
||
statusMessage.value = '名称不能为空。'
|
||
return
|
||
}
|
||
|
||
item.name = next
|
||
statusMessage.value = `已重命名为：${item.name}`
|
||
}
|
||
|
||
function collectDescendantIds(rootId: string) {
|
||
const removed = new Set<string>([rootId])
|
||
const stack = [rootId]
|
||
|
||
while (stack.length) {
|
||
const current = stack.pop()!
|
||
for (const item of explorerItems.value) {
|
||
if (item.parentId !== current) continue
|
||
if (removed.has(item.id)) continue
|
||
removed.add(item.id)
|
||
stack.push(item.id)
|
||
}
|
||
}
|
||
|
||
return removed
|
||
}
|
||
|
||
function deleteExplorerItem(itemId: string) {
|
||
const target = explorerItems.value.find((item) => item.id === itemId)
|
||
if (!target || target.id === 'root') return
|
||
|
||
const confirmed = window.confirm(
|
||
target.kind === 'folder'
|
||
? `确定删除文件夹“${target.name}”及其内容？`
|
||
: `确定删除文件“${target.name}”？`,
|
||
)
|
||
if (!confirmed) return
|
||
|
||
const removedIds = collectDescendantIds(itemId)
|
||
explorerItems.value = explorerItems.value.filter((item) => !removedIds.has(item.id))
|
||
|
||
if (explorerSelectedItemId.value && removedIds.has(explorerSelectedItemId.value)) {
|
||
explorerSelectedItemId.value = null
|
||
}
|
||
|
||
if (removedIds.has(explorerCurrentFolderId.value)) {
|
||
explorerCurrentFolderId.value = target.parentId ?? 'root'
|
||
}
|
||
|
||
const nextExpanded = new Set(expandedFolderIds.value)
|
||
for (const removedId of removedIds) {
|
||
nextExpanded.delete(removedId)
|
||
}
|
||
nextExpanded.add('root')
|
||
expandedFolderIds.value = nextExpanded
|
||
|
||
statusMessage.value = `已删除：${target.name}`
|
||
}
|
||
|
||
function openExplorerItem(item: ExplorerItem) {
|
||
explorerSelectedItemId.value = item.id
|
||
if (item.kind === 'folder') {
|
||
openFolder(item.id)
|
||
statusMessage.value = `已进入文件夹：${item.name}`
|
||
return
|
||
}
|
||
statusMessage.value = `已打开文件：${item.name}`
|
||
}
|
||
|
||
function selectGame(gameId: GameId) {
|
||
selectedGameId.value = gameId
|
||
statusMessage.value = `已启动游戏：${gameOptions.find((item) => item.id === gameId)?.label ?? ''}`
|
||
}
|
||
|
||
function backToGameChooser() {
|
||
selectedGameId.value = null
|
||
statusMessage.value = '已返回游戏列表。'
|
||
}
|
||
|
||
async function toggleGameFullscreen() {
|
||
if (!gamePlayerRef.value) return
|
||
try {
|
||
if (document.fullscreenElement === gamePlayerRef.value) {
|
||
await document.exitFullscreen()
|
||
return
|
||
}
|
||
await gamePlayerRef.value.requestFullscreen()
|
||
} catch {
|
||
statusMessage.value = '当前浏览器不支持全屏或全屏被阻止。'
|
||
}
|
||
}
|
||
|
||
function onFullscreenChange() {
|
||
isGameFullscreen.value = document.fullscreenElement === gamePlayerRef.value
|
||
}
|
||
|
||
function onWindowResize() {
|
||
updateSidebarIndicator(false)
|
||
}
|
||
|
||
watch(
|
||
activeSection,
|
||
async () => {
|
||
await nextTick()
|
||
updateSidebarIndicator(true)
|
||
},
|
||
{ flush: 'post' },
|
||
)
|
||
|
||
watch(isLoggedIn, async (loggedIn) => {
|
||
if (!loggedIn) return
|
||
await nextTick()
|
||
updateSidebarIndicator(false)
|
||
})
|
||
|
||
onMounted(() => {
|
||
document.addEventListener('fullscreenchange', onFullscreenChange)
|
||
window.addEventListener('resize', onWindowResize)
|
||
nextTick(() => {
|
||
updateSidebarIndicator(false)
|
||
})
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
document.removeEventListener('fullscreenchange', onFullscreenChange)
|
||
window.removeEventListener('resize', onWindowResize)
|
||
if (sidebarJellyTimer) {
|
||
clearTimeout(sidebarJellyTimer)
|
||
}
|
||
if (glowFrameId !== null) {
|
||
cancelAnimationFrame(glowFrameId)
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<a class="skip-link" href="#main-content">{{ text.skip }}</a>
|
||
|
||
<main
|
||
v-if="!isLoggedIn"
|
||
id="main-content"
|
||
ref="loginRef"
|
||
class="login-view"
|
||
@pointermove="onLoginPointerMove"
|
||
@pointerleave="onLoginPointerLeave"
|
||
>
|
||
<section class="login-card" aria-labelledby="login-title">
|
||
<p class="eyebrow">Workspace Console</p>
|
||
<h1 id="login-title">{{ text.loginTitle }}</h1>
|
||
<p class="subtitle">{{ text.loginSubtitle }}</p>
|
||
|
||
<form class="login-form" @submit.prevent="submitLogin">
|
||
<label for="username">{{ text.username }}</label>
|
||
<div class="login-input-shell">
|
||
<input
|
||
id="username"
|
||
v-model="username"
|
||
name="username"
|
||
autocomplete="username"
|
||
type="text"
|
||
spellcheck="false"
|
||
:placeholder="text.usernamePlaceholder"
|
||
/>
|
||
</div>
|
||
|
||
<label for="password">{{ text.password }}</label>
|
||
<div class="login-input-shell">
|
||
<input
|
||
id="password"
|
||
v-model="password"
|
||
name="password"
|
||
autocomplete="current-password"
|
||
type="password"
|
||
:placeholder="text.passwordPlaceholder"
|
||
/>
|
||
</div>
|
||
|
||
<p v-if="loginError" class="form-error" aria-live="polite">{{ loginError }}</p>
|
||
<button type="submit">{{ text.loginButton }}</button>
|
||
</form>
|
||
</section>
|
||
</main>
|
||
|
||
<main
|
||
v-else
|
||
id="main-content"
|
||
ref="workspaceRef"
|
||
class="workspace-view"
|
||
@pointermove="onWorkspacePointerMove"
|
||
@pointerleave="onWorkspacePointerLeave"
|
||
>
|
||
<header class="topbar">
|
||
<div>
|
||
<p class="eyebrow">Workspace</p>
|
||
<h1>Personal Command Center</h1>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<p class="user-chip">{{ currentUser }}</p>
|
||
<button type="button" class="ghost-btn" @click="logout">退出</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="workspace-layout">
|
||
<aside ref="sidebarRef" class="sidebar" aria-label="section-navigation">
|
||
<span
|
||
aria-hidden="true"
|
||
class="nav-active-indicator"
|
||
:class="{ jelly: sidebarIndicatorJelly }"
|
||
:style="sidebarIndicatorStyle"
|
||
></span>
|
||
<button
|
||
v-for="item in navItems"
|
||
:key="item.id"
|
||
type="button"
|
||
class="nav-item"
|
||
:data-section-id="item.id"
|
||
:class="{ active: activeSection === item.id }"
|
||
@click="setSection(item.id)"
|
||
>
|
||
<span class="nav-icon" aria-hidden="true">
|
||
<component :is="item.icon" class="nav-icon-glyph" />
|
||
</span>
|
||
<span class="nav-copy">
|
||
<strong>{{ item.title }}</strong>
|
||
<small>{{ item.subtitle }}</small>
|
||
</span>
|
||
</button>
|
||
</aside>
|
||
|
||
<section class="panel" aria-live="polite">
|
||
<div v-if="activeSection === 'overview'" class="panel-body overview-panel">
|
||
<article class="hero-card">
|
||
<h2>一眼进入高频任务</h2>
|
||
<p>从这里切换到文件、游戏或学习模块。相比原先桌面拖拽窗口模式，这里改为稳定导航 + 单主工作区，减少操作成本。</p>
|
||
<div class="hero-actions">
|
||
<button type="button" class="primary-btn" @click="setSection('explorer')">打开文件管理</button>
|
||
<button type="button" class="ghost-btn" @click="setSection('games')">打开游戏中心</button>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="metric-grid">
|
||
<article class="metric-card">
|
||
<p>Folders</p>
|
||
<strong>{{ explorerFolders.length }}</strong>
|
||
</article>
|
||
<article class="metric-card">
|
||
<p>Items In Current Folder</p>
|
||
<strong>{{ explorerChildItems.length }}</strong>
|
||
</article>
|
||
<article class="metric-card">
|
||
<p>Games</p>
|
||
<strong>{{ gameOptions.length }}</strong>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="activeSection === 'explorer'" class="panel-body explorer-panel">
|
||
<header class="explorer-toolbar">
|
||
<button
|
||
type="button"
|
||
class="icon-btn"
|
||
:disabled="!explorerCurrentFolder?.parentId"
|
||
aria-label="返回上级目录"
|
||
@click="explorerGoUp"
|
||
>
|
||
<ArrowUpBold class="inline-icon" aria-hidden="true" />
|
||
</button>
|
||
|
||
<nav class="pathbar" aria-label="当前路径">
|
||
<button
|
||
v-for="(pathItem, index) in explorerPath"
|
||
:key="pathItem.id"
|
||
type="button"
|
||
class="path-segment"
|
||
@click="goToPathFolder(pathItem.id)"
|
||
>
|
||
<FolderOpened class="inline-icon" aria-hidden="true" />
|
||
<span>{{ pathItem.name }}</span>
|
||
<Right v-if="index < explorerPath.length - 1" class="path-arrow" aria-hidden="true" />
|
||
</button>
|
||
</nav>
|
||
|
||
<div class="toolbar-actions">
|
||
<button type="button" class="ghost-btn" @click="createExplorerItem('folder')">
|
||
<Plus class="inline-icon" aria-hidden="true" />新建文件夹
|
||
</button>
|
||
<button type="button" class="ghost-btn" @click="createExplorerItem('file')">
|
||
<Document class="inline-icon" aria-hidden="true" />新建文件
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="explorer-layout">
|
||
<aside class="folder-list" aria-label="所有文件夹">
|
||
<div
|
||
v-for="folder in explorerFolderTreeItems"
|
||
:key="folder.id"
|
||
class="tree-row"
|
||
:style="{ paddingLeft: `${8 + folder.level * 14}px` }"
|
||
>
|
||
<button
|
||
v-if="folder.hasChildren"
|
||
type="button"
|
||
class="tree-toggle"
|
||
:aria-label="folder.expanded ? '折叠文件夹' : '展开文件夹'"
|
||
@click="toggleFolderExpand(folder.id)"
|
||
>
|
||
<Right class="tree-chevron" :class="{ expanded: folder.expanded }" aria-hidden="true" />
|
||
</button>
|
||
<span v-else class="tree-placeholder" aria-hidden="true"></span>
|
||
|
||
<button
|
||
type="button"
|
||
class="folder-item"
|
||
:class="{ active: explorerCurrentFolderId === folder.id }"
|
||
@click="openFolder(folder.id)"
|
||
>
|
||
<FolderOpened class="inline-icon" aria-hidden="true" />
|
||
<span>{{ folder.name }}</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="file-list" role="list">
|
||
<article v-for="item in explorerChildItems" :key="item.id" class="file-card" role="listitem">
|
||
<button
|
||
type="button"
|
||
class="file-main"
|
||
:class="{ selected: explorerSelectedItemId === item.id }"
|
||
@click="openExplorerItem(item)"
|
||
>
|
||
<span class="file-icon" aria-hidden="true">
|
||
<FolderOpened v-if="item.kind === 'folder'" class="inline-icon" />
|
||
<Document v-else class="inline-icon" />
|
||
</span>
|
||
<span class="file-text">
|
||
<strong>{{ item.name }}</strong>
|
||
<small>{{ item.kind === 'folder' ? '文件夹' : '文件' }}</small>
|
||
</span>
|
||
</button>
|
||
<div class="file-actions">
|
||
<button
|
||
type="button"
|
||
class="icon-btn"
|
||
:aria-label="`重命名 ${item.name}`"
|
||
@click="renameExplorerItem(item.id)"
|
||
>
|
||
<EditPen class="inline-icon" aria-hidden="true" />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="icon-btn danger"
|
||
:aria-label="`删除 ${item.name}`"
|
||
@click="deleteExplorerItem(item.id)"
|
||
>
|
||
<Delete class="inline-icon" aria-hidden="true" />
|
||
</button>
|
||
</div>
|
||
</article>
|
||
|
||
<p v-if="!explorerChildItems.length" class="empty">当前目录为空。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="activeSection === 'games'" class="panel-body games-panel">
|
||
<div v-if="!activeGame" class="game-grid">
|
||
<button
|
||
v-for="game in gameOptions"
|
||
:key="game.id"
|
||
type="button"
|
||
class="game-card"
|
||
@click="selectGame(game.id)"
|
||
>
|
||
<span class="game-icon" aria-hidden="true">
|
||
<Trophy class="inline-icon" />
|
||
</span>
|
||
<strong>{{ game.label }}</strong>
|
||
<small>{{ game.subtitle }}</small>
|
||
</button>
|
||
</div>
|
||
|
||
<div v-else ref="gamePlayerRef" class="game-player">
|
||
<header class="game-player-bar">
|
||
<div class="game-title-wrap">
|
||
<Monitor class="inline-icon" aria-hidden="true" />
|
||
<strong>{{ activeGame.label }}</strong>
|
||
</div>
|
||
<div class="game-actions">
|
||
<button
|
||
type="button"
|
||
class="ghost-btn"
|
||
:aria-label="isGameFullscreen ? '退出全屏' : '进入全屏'"
|
||
@click="toggleGameFullscreen"
|
||
>
|
||
{{ isGameFullscreen ? '退出全屏' : '全屏' }}
|
||
</button>
|
||
<button type="button" class="ghost-btn" @click="backToGameChooser">返回列表</button>
|
||
</div>
|
||
</header>
|
||
<iframe
|
||
class="game-frame"
|
||
:title="activeGame.label"
|
||
:src="activeGame.path"
|
||
loading="lazy"
|
||
allow="fullscreen"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="panel-body school-panel">
|
||
<article class="hero-card compact">
|
||
<h2>学习路径</h2>
|
||
<p>你可以把课程链接、阶段任务、周计划集中放在这里。</p>
|
||
</article>
|
||
<div class="study-grid">
|
||
<article class="study-card">
|
||
<h3>Frontend</h3>
|
||
<p>Vue + TypeScript 组件拆分、状态设计、可访问性。</p>
|
||
</article>
|
||
<article class="study-card">
|
||
<h3>Graphics</h3>
|
||
<p>游戏渲染循环、碰撞检测、输入系统与性能优化。</p>
|
||
</article>
|
||
<article class="study-card">
|
||
<h3>Deployment</h3>
|
||
<p>构建产物、缓存策略、静态资源托管与监控。</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<p class="status" aria-live="polite">{{ statusMessage }}</p>
|
||
</main>
|
||
</template>
|