Signed-off-by: 吴文峰 <kevin@lmve.net>

src/App.vue

@@ -0,0 +1,55 @@
+<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>