47 lines
1.6 KiB
Vue
47 lines
1.6 KiB
Vue
<template>
|
|
<div class="min-h-screen flex bg-gray-50">
|
|
<!-- Sidebar -->
|
|
<aside class="w-60 bg-gray-900 text-gray-300 flex flex-col fixed inset-y-0 left-0 z-30">
|
|
<div class="px-5 py-4 border-b border-gray-700">
|
|
<h1 class="text-lg font-bold text-white flex items-center gap-2">
|
|
<span class="inline-block w-2 h-2 bg-primary-500 rounded-full"></span>
|
|
SubStore
|
|
</h1>
|
|
</div>
|
|
<nav class="flex-1 py-3 overflow-y-auto">
|
|
<router-link
|
|
v-for="item in menu"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="flex items-center gap-3 px-5 py-2.5 text-sm transition-colors"
|
|
:class="$route.path === item.to || (item.to !== '/' && $route.path.startsWith(item.to))
|
|
? 'bg-gray-800 text-white border-l-2 border-primary-500'
|
|
: 'hover:bg-gray-800/50 border-l-2 border-transparent'"
|
|
>
|
|
<span class="text-base">{{ item.icon }}</span>
|
|
<span>{{ item.label }}</span>
|
|
</router-link>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main content -->
|
|
<main class="flex-1 ml-60 min-h-screen">
|
|
<div class="px-6 py-5">
|
|
<router-view />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const menu = [
|
|
{ to: '/', icon: '📊', label: '概览' },
|
|
{ to: '/sources', icon: '📡', label: '订阅源' },
|
|
{ to: '/collections', icon: '📁', label: '合集' },
|
|
{ to: '/templates', icon: '📋', label: '模板' },
|
|
{ to: '/recycle-bin', icon: '♻️', label: '回收站' },
|
|
{ to: '/tools', icon: '🔧', label: '工具' },
|
|
{ to: '/settings', icon: '⚙️', label: '设置' },
|
|
]
|
|
</script>
|