68 lines
2.2 KiB
Vue
68 lines
2.2 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex">
|
|
<!-- 左侧边栏 -->
|
|
<aside
|
|
class="w-40 bg-white dark:bg-gray-800 shadow-sm border-r border-gray-200 dark:border-gray-700 flex flex-col h-screen fixed top-0 left-0 z-30"
|
|
>
|
|
<div class="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700">
|
|
<h1 class="text-xl font-semibold text-gray-900 dark:text-white">
|
|
视频控制器
|
|
</h1>
|
|
<div class="mx-auto mt-1">
|
|
<UColorModeButton size="xs">
|
|
<template #fallback>
|
|
<UButton loading variant="ghost" color="neutral" />
|
|
</template>
|
|
</UColorModeButton>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="flex-1 p-4">
|
|
<ul class="space-y-2">
|
|
<li>
|
|
<NuxtLink
|
|
to="/"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors" :class="$route.path === '/'
|
|
? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
|
|
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
|
|
>
|
|
<UIcon name="i-heroicons-home" class="mr-3 h-5 w-5" />
|
|
首页
|
|
</NuxtLink>
|
|
</li>
|
|
<li>
|
|
<NuxtLink
|
|
to="/settings"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors" :class="$route.path === '/settings'
|
|
? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
|
|
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
|
|
>
|
|
<UIcon name="i-heroicons-cog-6-tooth" class="mr-3 h-5 w-5" />
|
|
设置
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<!-- 关于 -->
|
|
<div class="p-4 ">
|
|
<NuxtLink
|
|
to="/about"
|
|
class="flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors" :class="$route.path === '/about'
|
|
? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
|
|
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
|
|
>
|
|
<UIcon name="i-heroicons-information-circle" class="mr-3 h-5 w-5" />
|
|
关于
|
|
</NuxtLink>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 主体区域 -->
|
|
<main class="flex-1 overflow-auto ml-40">
|
|
<div class="p-6">
|
|
<slot />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|