78 lines
3.2 KiB
Vue
78 lines
3.2 KiB
Vue
// filepath: src/App.vue
|
|
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
import { RouterView, RouterLink, useRoute } from 'vue-router'
|
|
import { Home, History, Settings as SettingsIcon, Download, FileText } from 'lucide-vue-next'
|
|
import { useSettingsStore } from './stores/settings'
|
|
import { useQueueStore } from './stores/queue'
|
|
import { useLogsStore } from './stores/logs'
|
|
|
|
const settingsStore = useSettingsStore()
|
|
const queueStore = useQueueStore()
|
|
const logsStore = useLogsStore()
|
|
const route = useRoute()
|
|
|
|
onMounted(async () => {
|
|
await settingsStore.loadSettings()
|
|
await settingsStore.initYtdlp()
|
|
await queueStore.initListener()
|
|
await logsStore.initListener()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-screen bg-gray-50 dark:bg-zinc-950 text-zinc-900 dark:text-gray-100 font-sans overflow-hidden">
|
|
<!-- Sidebar -->
|
|
<aside class="w-20 lg:w-64 bg-white dark:bg-zinc-900 border-r border-gray-200 dark:border-zinc-800 flex flex-col flex-shrink-0">
|
|
<div class="p-6 flex items-center gap-3 justify-center lg:justify-start">
|
|
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white shrink-0">
|
|
<Download class="w-5 h-5" />
|
|
</div>
|
|
<span class="font-bold text-lg hidden lg:block">流萤</span>
|
|
</div>
|
|
|
|
<nav class="flex-1 px-4 space-y-2 mt-4 flex flex-col pb-6">
|
|
<!-- Top Section -->
|
|
<RouterLink to="/"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
|
|
:class="route.path === '/' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
|
|
>
|
|
<Home class="w-5 h-5 shrink-0" />
|
|
<span class="hidden lg:block font-medium">下载</span>
|
|
</RouterLink>
|
|
|
|
<RouterLink to="/history"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
|
|
:class="route.path === '/history' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
|
|
>
|
|
<History class="w-5 h-5 shrink-0" />
|
|
<span class="hidden lg:block font-medium">历史</span>
|
|
</RouterLink>
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
<!-- Bottom Section -->
|
|
<RouterLink to="/logs"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
|
|
:class="route.path === '/logs' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
|
|
>
|
|
<FileText class="w-5 h-5 shrink-0" />
|
|
<span class="hidden lg:block font-medium">日志</span>
|
|
</RouterLink>
|
|
|
|
<RouterLink to="/settings"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl transition-colors"
|
|
:class="route.path === '/settings' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400' : 'hover:bg-gray-100 dark:hover:bg-zinc-800'"
|
|
>
|
|
<SettingsIcon class="w-5 h-5 shrink-0" />
|
|
<span class="hidden lg:block font-medium">设置</span>
|
|
</RouterLink>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 overflow-auto bg-gray-50 dark:bg-zinc-950 relative">
|
|
<RouterView />
|
|
</main>
|
|
</div>
|
|
</template> |