up

src/App.vue

@@ -9,16 +9,16 @@ const tab = ref('dashboard')
 
 const nav = [
   { id: 'dashboard', label: '概览', icon: '📊' },
-  { id: 'recent', label: '最近爬取', icon: '🕷️' },
+  { id: 'recent', label: '最近', icon: '🕷️' },
   { id: 'search', label: '搜索', icon: '🔍' },
-  { id: 'priority', 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">
+    <!-- Desktop Sidebar -->
+    <aside class="hidden md:flex w-56 bg-gray-900 border-r border-gray-800 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>
@@ -44,12 +44,30 @@ const nav = [
       </div>
     </aside>
 
-    <!-- Main -->
-    <main class="flex-1 overflow-y-auto">
+    <!-- Main Content -->
+    <main class="flex-1 overflow-y-auto pb-16 md:pb-0">
       <Dashboard v-if="tab === 'dashboard'" />
       <RecentCrawls v-else-if="tab === 'recent'" />
       <SearchView v-else-if="tab === 'search'" />
       <PriorityCrawl v-else-if="tab === 'priority'" />
     </main>
+
+    <!-- Mobile Bottom Navigation -->
+    <nav class="md:hidden fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-gray-800 flex justify-around items-center h-16 z-50">
+      <button
+        v-for="item in nav"
+        :key="item.id"
+        @click="tab = item.id"
+        :class="[
+          'flex flex-col items-center justify-center gap-0.5 flex-1 h-full transition-colors',
+          tab === item.id
+            ? 'text-blue-400'
+            : 'text-gray-500'
+        ]"
+      >
+        <span class="text-lg">{{ item.icon }}</span>
+        <span class="text-[10px]">{{ item.label }}</span>
+      </button>
+    </nav>
   </div>
 </template>