56 lines
1.9 KiB
Vue
56 lines
1.9 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import Dashboard from './views/Dashboard.vue'
|
|
import RecentCrawls from './views/RecentCrawls.vue'
|
|
import PriorityCrawl from './views/PriorityCrawl.vue'
|
|
import SearchView from './views/SearchView.vue'
|
|
|
|
const tab = ref('dashboard')
|
|
|
|
const nav = [
|
|
{ id: 'dashboard', label: '概览', icon: '📊' },
|
|
{ id: 'recent', label: '最近爬取', icon: '🕷️' },
|
|
{ id: 'search', label: '搜索', icon: '🔍' },
|
|
{ id: 'priority', label: '插入爬取', icon: '🚀' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex h-screen bg-gray-950 text-gray-100 font-sans">
|
|
<!-- Sidebar -->
|
|
<aside class="w-56 bg-gray-900 border-r border-gray-800 flex flex-col shrink-0">
|
|
<div class="px-5 py-5 border-b border-gray-800">
|
|
<div class="text-lg font-semibold text-white tracking-tight">SESE Admin</div>
|
|
<div class="text-xs text-gray-500 mt-0.5">爬取内容监控</div>
|
|
</div>
|
|
<nav class="flex-1 py-4 px-3 space-y-1">
|
|
<button
|
|
v-for="item in nav"
|
|
:key="item.id"
|
|
@click="tab = item.id"
|
|
:class="[
|
|
'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
|
|
tab === item.id
|
|
? 'bg-blue-600 text-white'
|
|
: 'text-gray-400 hover:text-white hover:bg-gray-800'
|
|
]"
|
|
>
|
|
<span>{{ item.icon }}</span>
|
|
{{ item.label }}
|
|
</button>
|
|
</nav>
|
|
<div class="px-5 py-4 border-t border-gray-800">
|
|
<div class="text-xs text-gray-600">sese-engine v1.0</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main -->
|
|
<main class="flex-1 overflow-y-auto">
|
|
<Dashboard v-if="tab === 'dashboard'" />
|
|
<RecentCrawls v-else-if="tab === 'recent'" />
|
|
<SearchView v-else-if="tab === 'search'" />
|
|
<PriorityCrawl v-else-if="tab === 'priority'" />
|
|
</main>
|
|
</div>
|
|
</template>
|