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>

src/views/Dashboard.vue

@@ -1,22 +1,36 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { fetchStats, flushIndex } from '../api.js'
 
 const stats = ref(null)
 const loading = ref(true)
 const flushing = ref(false)
 const error = ref(null)
+let refreshInterval = null
 
 onMounted(async () => {
+  await loadStats()
+  // 每5秒自动刷新
+  refreshInterval = setInterval(loadStats, 5000)
+})
+
+onUnmounted(() => {
+  if (refreshInterval) {
+    clearInterval(refreshInterval)
+  }
+})
+
+async function loadStats() {
   try {
     stats.value = await fetchStats()
+    error.value = null
   } catch (e) {
     error.value = '无法加载统计数据，可能人服务器未启动或端口不对'
     console.error(e)
   } finally {
     loading.value = false
   }
-})
+}
 
 async function doFlush() {
   flushing.value = true
@@ -48,8 +62,8 @@ function langColor(lang) {
 </script>
 
 <template>
-  <div class="p-8">
-    <h1 class="text-2xl font-semibold text-white mb-8">概览</h1>
+  <div class="p-4 md:p-8">
+    <h1 class="text-xl md:text-2xl font-semibold text-white mb-6 md:mb-8">概览</h1>
 
     <!-- Loading / Error -->
     <div v-if="loading" class="flex items-center justify-center h-48">
@@ -61,7 +75,7 @@ function langColor(lang) {
 
     <template v-else-if="stats">
       <!-- Stat Cards -->
-      <div class="grid grid-cols-4 gap-5 mb-8">
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-5 mb-6 md:mb-8">
         <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
           <div class="text-sm text-gray-500 mb-2">已爬取 URL</div>
           <div class="text-3xl font-bold text-white">{{ fmt(stats.total_urls) }}</div>
@@ -72,7 +86,7 @@ function langColor(lang) {
         </div>
         <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
           <div class="text-sm text-gray-500 mb-2">域名数量</div>
-          <div class="text-3xl font-bold text-white">{{ fmt(Object.keys(stats.domains).length) }}</div>
+          <div class="text-3xl font-bold text-white">{{ fmt(stats.total_domains) }}</div>
         </div>
         <div class="bg-gray-900 border border-gray-800 rounded-xl p-5 flex flex-col justify-between">
           <div>
@@ -91,39 +105,39 @@ function langColor(lang) {
         </div>
       </div>
 
-      <div class="grid grid-cols-2 gap-5">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-5">
         <!-- Domain Distribution -->
-        <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
-          <h2 class="text-sm font-semibold text-gray-300 mb-4 uppercase tracking-wider">域名分布 Top 10</h2>
+        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 md:p-5">
+          <h2 class="text-sm font-semibold text-gray-300 mb-3 md:mb-4 uppercase tracking-wider">域名分布 Top 10</h2>
           <div class="space-y-2">
             <div
               v-for="[domain, count] in topDomains(stats.domains)"
               :key="domain"
-              class="flex items-center gap-3"
+              class="flex items-center gap-2 md:gap-3"
             >
-              <div class="w-36 text-xs text-gray-400 truncate shrink-0" :title="domain">{{ domain }}</div>
-              <div class="flex-1 bg-gray-800 rounded-full h-5 overflow-hidden">
+              <div class="w-24 md:w-36 text-xs text-gray-400 truncate shrink-0" :title="domain">{{ domain }}</div>
+              <div class="flex-1 bg-gray-800 rounded-full h-4 md:h-5 overflow-hidden">
                 <div
                   class="h-full bg-blue-600 rounded-full transition-all duration-500"
                   :style="{ width: `${(count / stats.domains[Object.keys(stats.domains)[0]]) * 100}%` }"
                 ></div>
               </div>
-              <div class="w-16 text-xs text-gray-500 text-right shrink-0">{{ fmt(count) }}</div>
+              <div class="w-12 md:w-16 text-xs text-gray-500 text-right shrink-0">{{ fmt(count) }}</div>
             </div>
           </div>
         </div>
 
         <!-- Language Distribution -->
-        <div class="bg-gray-900 border border-gray-800 rounded-xl p-5">
-          <h2 class="text-sm font-semibold text-gray-300 mb-4 uppercase tracking-wider">语种分布</h2>
+        <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 md:p-5">
+          <h2 class="text-sm font-semibold text-gray-300 mb-3 md:mb-4 uppercase tracking-wider">语种分布</h2>
           <div class="space-y-2">
             <div
               v-for="[lang, count] in Object.entries(stats.languages || {}).sort((a,b) => b[1]-a[1])"
               :key="lang"
-              class="flex items-center gap-3"
+              class="flex items-center gap-2 md:gap-3"
             >
-              <div class="w-10 text-xs text-gray-400 shrink-0 font-mono">{{ lang }}</div>
-              <div class="flex-1 bg-gray-800 rounded-full h-5 overflow-hidden">
+              <div class="w-8 md:w-10 text-xs text-gray-400 shrink-0 font-mono">{{ lang }}</div>
+              <div class="flex-1 bg-gray-800 rounded-full h-4 md:h-5 overflow-hidden">
                 <div
                   class="h-full rounded-full transition-all duration-500"
                   :style="{
@@ -132,7 +146,7 @@ function langColor(lang) {
                   }"
                 ></div>
               </div>
-              <div class="w-16 text-xs text-gray-500 text-right shrink-0">{{ fmt(count) }}</div>
+              <div class="w-12 md:w-16 text-xs text-gray-500 text-right shrink-0">{{ fmt(count) }}</div>
             </div>
           </div>
         </div>

src/views/PriorityCrawl.vue

@@ -65,15 +65,15 @@ onMounted(load)
 </script>
 
 <template>
-  <div class="p-8">
-    <h1 class="text-2xl font-semibold text-white mb-2">插入爬取</h1>
-    <p class="text-sm text-gray-500 mb-8">
+  <div class="p-4 md:p-8">
+    <h1 class="text-xl md:text-2xl font-semibold text-white mb-2">插入爬取</h1>
+    <p class="text-sm text-gray-500 mb-6 md:mb-8">
       添加 URL 或域名，下一轮爬取时会优先抓取。纯域名会自动补全为 https://www.域名/。
     </p>
 
     <!-- Input -->
-    <div class="bg-gray-900 rounded-xl p-6 mb-6 border border-gray-800">
-      <div class="flex gap-3">
+    <div class="bg-gray-900 rounded-xl p-4 md:p-6 mb-4 md:mb-6 border border-gray-800">
+      <div class="flex flex-col sm:flex-row gap-3">
         <input
           v-model="inputUrl"
           @keyup.enter="submit"
@@ -85,7 +85,7 @@ onMounted(load)
         <button
           @click="submit"
           :disabled="submitting || !inputUrl.trim()"
-          class="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm font-medium rounded-lg transition-colors cursor-pointer"
+          class="px-6 py-2.5 bg-blue-600 hover:bg-blue-500 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm font-medium rounded-lg transition-colors cursor-pointer whitespace-nowrap"
         >
           {{ submitting ? '添加中...' : '插入队列' }}
         </button>
@@ -104,7 +104,7 @@ onMounted(load)
 
     <!-- List -->
     <div class="bg-gray-900 rounded-xl border border-gray-800">
-      <div class="px-6 py-4 border-b border-gray-800 flex items-center justify-between">
+      <div class="px-4 md:px-6 py-3 md:py-4 border-b border-gray-800 flex items-center justify-between">
         <span class="text-sm font-medium text-gray-300">待爬取队列</span>
         <span class="text-xs text-gray-500">{{ items.length }} 条</span>
       </div>
@@ -124,8 +124,8 @@ onMounted(load)
         暂无待爬取的优先 URL
       </div>
 
-      <!-- Table -->
-      <table v-else class="w-full text-sm">
+      <!-- Desktop Table -->
+      <table v-else class="hidden md:table w-full text-sm">
         <thead>
           <tr class="text-left text-gray-500 text-xs border-b border-gray-800">
             <th class="px-6 py-3 font-medium">URL</th>
@@ -155,6 +155,30 @@ onMounted(load)
           </tr>
         </tbody>
       </table>
+
+      <!-- Mobile Cards -->
+      <div class="md:hidden divide-y divide-gray-800">
+        <div
+          v-for="item in items"
+          :key="item.url"
+          class="p-4 hover:bg-gray-800/50 flex items-center justify-between gap-3"
+        >
+          <div class="flex-1 min-w-0">
+            <div class="text-gray-300 text-sm break-all mb-1">{{ item.url }}</div>
+            <div class="flex items-center gap-2">
+              <span v-if="item.domain" class="inline-block px-2 py-0.5 text-xs rounded bg-purple-900 text-purple-300">域名</span>
+              <span v-else class="inline-block px-2 py-0.5 text-xs rounded bg-blue-900 text-blue-300">URL</span>
+              <span class="text-xs text-gray-500">{{ fmtTime(item.added_at) }}</span>
+            </div>
+          </div>
+          <button
+            @click="del(item.url)"
+            class="text-red-400 hover:text-red-300 text-xs cursor-pointer shrink-0 px-2 py-1"
+          >
+            删除
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>

src/views/RecentCrawls.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue'
 import { fetchRecent } from '../api.js'
 
 const items = ref([])
@@ -8,6 +8,7 @@ const loading = ref(true)
 const error = ref(null)
 const search = ref('')
 const filterLang = ref('')
+let refreshInterval = null
 
 const limits = [20, 50, 100, 200]
 const limit = ref(50)
@@ -83,14 +84,14 @@ function topLang(language) {
 </script>
 
 <template>
-  <div class="p-8">
+  <div class="p-4 md:p-8">
     <!-- Header -->
-    <div class="flex items-center justify-between mb-6">
+    <div class="flex flex-col md:flex-row md:items-center justify-between mb-4 md:mb-6 gap-3">
       <div>
-        <h1 class="text-2xl font-semibold text-white mb-1">最近爬取</h1>
+        <h1 class="text-xl md:text-2xl font-semibold text-white mb-1">最近爬取</h1>
         <p class="text-sm text-gray-500">共 {{ total.toLocaleString() }} 条记录</p>
       </div>
-      <div class="flex items-center gap-3">
+      <div class="flex items-center gap-2 md:gap-3">
         <select
           v-model="limit"
           @change="changeLimit(limit)"
@@ -108,8 +109,8 @@ function topLang(language) {
     </div>
 
     <!-- Filters -->
-    <div class="flex items-center gap-4 mb-5">
-      <div class="relative flex-1 max-w-sm">
+    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 mb-4 md:mb-5">
+      <div class="relative flex-1 max-w-full sm:max-w-sm">
         <input
           v-model="search"
           type="text"
@@ -146,7 +147,8 @@ function topLang(language) {
 
     <!-- Table -->
     <div v-else class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
-      <table class="w-full text-sm">
+      <!-- Desktop Table -->
+      <table class="hidden md:table w-full text-sm">
         <thead>
           <tr class="border-b border-gray-800">
             <th class="text-left px-5 py-3 text-gray-500 font-medium text-xs uppercase tracking-wider">标题</th>
@@ -163,8 +165,10 @@ function topLang(language) {
             class="border-b border-gray-800/50 hover:bg-gray-800/40 transition-colors group"
           >
             <td class="px-5 py-3.5">
-              <div class="font-medium text-gray-200 group-hover:text-white line-clamp-2">{{ item.title || '(无标题)' }}</div>
-              <div class="text-xs text-gray-600 mt-0.5 break-all line-clamp-1">{{ item.url }}</div>
+              <a :href="item.url" target="_blank" rel="noopener noreferrer" class="block hover:opacity-80 transition-opacity">
+                <div class="font-medium text-gray-200 group-hover:text-white line-clamp-2">{{ item.title || '(无标题)' }}</div>
+                <div class="text-xs text-gray-600 mt-0.5 break-all line-clamp-1">{{ item.url }}</div>
+              </a>
               <div v-if="item.description" class="text-xs text-gray-500 mt-1 line-clamp-1">{{ item.description }}</div>
             </td>
             <td class="px-5 py-3.5">
@@ -195,10 +199,39 @@ function topLang(language) {
           </tr>
         </tbody>
       </table>
+
+      <!-- Mobile Cards -->
+      <div class="md:hidden divide-y divide-gray-800">
+        <a
+          v-for="item in filtered"
+          :key="item.url"
+          :href="item.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="block p-4 hover:bg-gray-800/40 transition-colors"
+        >
+          <div class="font-medium text-gray-200 text-sm line-clamp-2 mb-1">{{ item.title || '(无标题)' }}</div>
+          <div class="text-xs text-gray-500 break-all line-clamp-1 mb-2">{{ item.url }}</div>
+          <div class="flex items-center gap-2 text-xs">
+            <span class="text-gray-400 font-mono">{{ item.domain }}</span>
+            <template v-if="topLang(item.language)">
+              <span
+                :class="['px-1.5 py-0.5 rounded font-medium', langTag(topLang(item.language)[0]).cls]"
+              >
+                {{ langTag(topLang(item.language)[0]).label }}
+              </span>
+            </template>
+            <span class="text-gray-600 ml-auto">{{ fmtTime(item.crawled_at) }}</span>
+          </div>
+        </a>
+        <div v-if="!filtered.length" class="p-8 text-center text-gray-600">
+          没有找到匹配的记录
+        </div>
+      </div>
     </div>
 
     <!-- Footer info -->
-    <div v-if="!loading && !error && filtered.length" class="mt-3 text-xs text-gray-600 text-right">
+    <div v-if="!loading && !error && filtered.length" class="mt-3 text-xs text-gray-600 text-right pb-4 md:pb-0">
       筛选后 {{ filtered.length }} 条 / 共 {{ total.toLocaleString() }} 条
     </div>
   </div>

src/views/SearchView.vue

@@ -89,7 +89,7 @@ function openUrl(url) {
 <template>
   <div class="flex flex-col h-full">
     <!-- Search Box -->
-    <div class="bg-gray-950 border-b border-gray-800 px-8 py-6">
+    <div class="bg-gray-950 border-b border-gray-800 px-4 md:px-8 py-4 md:py-6">
       <div class="max-w-3xl mx-auto">
         <div class="relative">
           <input
@@ -98,11 +98,11 @@ function openUrl(url) {
             @keydown="onKeydown"
             type="text"
             placeholder="输入关键词搜索，或用 site:example.com 限定域名"
-            class="w-full bg-gray-900 border border-gray-700 rounded-2xl px-6 py-4 pr-14 text-white text-lg placeholder-gray-600 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition"
+            class="w-full bg-gray-900 border border-gray-700 rounded-xl md:rounded-2xl px-4 md:px-6 py-3 md:py-4 pr-20 md:pr-14 text-white text-base md:text-lg placeholder-gray-600 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition"
           />
           <button
             @click="doSearch(query)"
-            class="absolute right-3 top-1/2 -translate-y-1/2 bg-blue-600 hover:bg-blue-500 text-white rounded-xl px-4 py-2 text-sm font-medium transition"
+            class="absolute right-2 md:right-3 top-1/2 -translate-y-1/2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg md:rounded-xl px-3 md:px-4 py-1.5 md:py-2 text-sm font-medium transition"
           >
             搜索
           </button>
@@ -136,12 +136,14 @@ function openUrl(url) {
         </div>
 
         <!-- Stats bar -->
-        <div v-else-if="results.length > 0" class="flex items-center gap-4 mb-5 text-sm text-gray-500">
-          <span>找到约 <strong class="text-gray-300">{{ fmtCount(total) }}</strong> 条结果</span>
-          <span class="text-gray-700">|</span>
-          <span>{{ results.length }} 条已加载</span>
+        <div v-else-if="results.length > 0" class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4 mb-4 md:mb-5 text-sm text-gray-500">
+          <div class="flex items-center gap-2">
+            <span>找到约 <strong class="text-gray-300">{{ fmtCount(total) }}</strong> 条结果</span>
+            <span class="text-gray-700">|</span>
+            <span>{{ results.length }} 条已加载</span>
+          </div>
           <!-- Word counts -->
-          <div class="flex gap-2 ml-auto">
+          <div class="flex flex-wrap gap-2 sm:ml-auto">
             <span
               v-for="(cnt, word) in counts"
               :key="word"
@@ -154,17 +156,17 @@ function openUrl(url) {
         </div>
 
         <!-- Result list -->
-        <div v-if="results.length > 0" class="space-y-1">
+        <div v-if="results.length > 0" class="space-y-2 md:space-y-1">
           <div
             v-for="(item, i) in results"
             :key="i"
             @click="openUrl(item.url)"
-            class="group block bg-gray-900/50 hover:bg-gray-900 border border-gray-800 hover:border-gray-700 rounded-xl p-5 cursor-pointer transition"
+            class="group block bg-gray-900/50 hover:bg-gray-900 border border-gray-800 hover:border-gray-700 rounded-xl p-4 md:p-5 cursor-pointer transition"
           >
             <!-- Title -->
-            <div class="flex items-start gap-3 mb-2">
-              <div class="flex-1">
-                <div class="text-blue-400 group-hover:text-blue-300 text-lg leading-snug">
+            <div class="flex items-start gap-2 md:gap-3 mb-2">
+              <div class="flex-1 min-w-0">
+                <div class="text-blue-400 group-hover:text-blue-300 text-base md:text-lg leading-snug">
                   {{ item.snippet?.title || domain(item.url) }}
                 </div>
                 <div class="text-xs text-gray-600 mt-0.5 truncate">{{ domain(item.url) }}</div>
@@ -172,7 +174,7 @@ function openUrl(url) {
               <!-- Score bar -->
               <div class="flex flex-col items-end gap-1 shrink-0">
                 <div class="text-xs text-gray-600">{{ scorePercent(item.score) }}%</div>
-                <div class="w-14 bg-gray-800 rounded-full h-1.5 overflow-hidden">
+                <div class="w-12 md:w-14 bg-gray-800 rounded-full h-1.5 overflow-hidden">
                   <div
                     class="h-full bg-blue-500 rounded-full"
                     :style="{ width: scorePercent(item.score) + '%' }"
@@ -182,14 +184,14 @@ function openUrl(url) {
             </div>
 
             <!-- Description -->
-            <p class="text-gray-400 text-sm leading-relaxed mb-3">
+            <p class="text-gray-400 text-sm leading-relaxed mb-2 md:mb-3">
               {{ truncate(item.snippet?.description || item.snippet?.text) }}
             </p>
 
             <!-- Bottom meta -->
-            <div class="flex items-center gap-3 text-xs">
+            <div class="flex flex-wrap items-center gap-2 md:gap-3 text-xs">
               <!-- Relevance per token -->
-              <div class="flex gap-1.5">
+              <div class="flex flex-wrap gap-1.5">
                 <span
                   v-for="(score, word) in item.relevance"
                   :key="word"
@@ -206,7 +208,7 @@ function openUrl(url) {
                 class="text-gray-600"
               >{{ langTag(item.snippet.language) }}</span>
               <!-- Domain count -->
-              <span class="text-gray-700 ml-auto">{{ fmtCount(item.domain_count) }} 个结果</span>
+              <span class="text-gray-700 ml-0 md:ml-auto">{{ fmtCount(item.domain_count) }} 个结果</span>
             </div>
 
             <!-- URL -->