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>

src/api.js

@@ -0,0 +1,48 @@
+import axios from 'axios'
+
+// Go 搜索服务器地址（端口 80，带 CORS）
+const BASE = import.meta.env.VITE_API_BASE || 'http://localhost:80'
+
+export async function fetchRecent(limit = 50) {
+  const { data } = await axios.get(`${BASE}/admin/recent`, {
+    params: { limit },
+    timeout: 15000,
+  })
+  return data
+}
+
+export async function fetchStats() {
+  const { data } = await axios.get(`${BASE}/admin/stats`, {
+    timeout: 15000,
+  })
+  return data
+}
+
+export async function fetchPriority() {
+  const { data } = await axios.get(`${BASE}/admin/priority`, {
+    timeout: 15000,
+  })
+  return data
+}
+
+export async function addPriority(url) {
+  const { data } = await axios.post(`${BASE}/admin/priority`, { url }, {
+    timeout: 15000,
+  })
+  return data
+}
+
+export async function removePriority(url) {
+  const { data } = await axios.delete(`${BASE}/admin/priority`, {
+    params: { url },
+    timeout: 15000,
+  })
+  return data
+}
+
+export async function flushIndex() {
+  const { data } = await axios.post(`${BASE}/admin/flush`, null, {
+    timeout: 60000,
+  })
+  return data
+}

src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/style.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/views/Dashboard.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { fetchStats, flushIndex } from '../api.js'
+
+const stats = ref(null)
+const loading = ref(true)
+const flushing = ref(false)
+const error = ref(null)
+
+onMounted(async () => {
+  try {
+    stats.value = await fetchStats()
+  } catch (e) {
+    error.value = '无法加载统计数据，可能人服务器未启动或端口不对'
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+})
+
+async function doFlush() {
+  flushing.value = true
+  try {
+    await flushIndex()
+    // 重新拉取 stats，pending 应该归零
+    stats.value = await fetchStats()
+  } catch (e) {
+    error.value = '刷盘失败: ' + e.message
+  } finally {
+    flushing.value = false
+  }
+}
+
+function fmt(n) {
+  if (!n && n !== 0) return '0'
+  return Number(n).toLocaleString()
+}
+
+function topDomains(domains) {
+  if (!domains) return []
+  return Object.entries(domains).sort((a, b) => b[1] - a[1]).slice(0, 10)
+}
+
+function langColor(lang) {
+  const map = { zh: '#e53e3e', en: '#3182ce', ja: '#e53e3e', ko: '#3182ce', fr: '#38a169', de: '#d69e2e', es: '#38a169', ru: '#805ad5', other: '#718096' }
+  return map[lang] || map.other
+}
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-semibold text-white mb-8">概览</h1>
+
+    <!-- Loading / Error -->
+    <div v-if="loading" class="flex items-center justify-center h-48">
+      <div class="text-gray-400 animate-pulse">加载中...</div>
+    </div>
+    <div v-else-if="error" class="bg-red-900/30 border border-red-800 rounded-lg p-4 text-red-300">
+      {{ error }}
+    </div>
+
+    <template v-else-if="stats">
+      <!-- Stat Cards -->
+      <div class="grid grid-cols-4 gap-5 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>
+        </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(stats.total_words) }}</div>
+        </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>
+        <div class="bg-gray-900 border border-gray-800 rounded-xl p-5 flex flex-col justify-between">
+          <div>
+            <div class="text-sm text-gray-500 mb-2">待刷盘</div>
+            <div class="text-3xl font-bold" :class="stats.pending > 0 ? 'text-yellow-400' : 'text-green-400'">
+              {{ fmt(stats.pending) }}
+            </div>
+          </div>
+          <button
+            class="mt-3 w-full bg-blue-700 hover:bg-blue-600 disabled:bg-gray-700 disabled:text-gray-500 text-white text-sm font-medium py-1.5 px-3 rounded transition-colors cursor-pointer"
+            :disabled="flushing || !stats.pending"
+            @click="doFlush"
+          >
+            {{ flushing ? '刷盘中...' : '立即刷盘' }}
+          </button>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 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="space-y-2">
+            <div
+              v-for="[domain, count] in topDomains(stats.domains)"
+              :key="domain"
+              class="flex items-center 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="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>
+          </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="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"
+            >
+              <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="h-full rounded-full transition-all duration-500"
+                  :style="{
+                    width: `${(count / stats.total_urls) * 100}%`,
+                    backgroundColor: langColor(lang)
+                  }"
+                ></div>
+              </div>
+              <div class="w-16 text-xs text-gray-500 text-right shrink-0">{{ fmt(count) }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>

src/views/PriorityCrawl.vue

@@ -0,0 +1,160 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { fetchPriority, addPriority, removePriority } from '../api.js'
+
+const items = ref([])
+const loading = ref(true)
+const error = ref(null)
+const submitting = ref(false)
+const submitError = ref(null)
+const submitSuccess = ref(false)
+const inputUrl = ref('')
+
+async function load() {
+  loading.value = true
+  error.value = null
+  try {
+    const data = await fetchPriority()
+    items.value = data.items || []
+  } catch (e) {
+    error.value = '加载失败，请检查人服务器是否启动'
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function submit() {
+  const raw = inputUrl.value.trim()
+  if (!raw) return
+  submitting.value = true
+  submitError.value = null
+  submitSuccess.value = false
+  try {
+    await addPriority(raw)
+    inputUrl.value = ''
+    submitSuccess.value = true
+    setTimeout(() => { submitSuccess.value = false }, 3000)
+    await load()
+  } catch (e) {
+    submitError.value = e?.response?.data?.error || '添加失败'
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function del(url) {
+  try {
+    await removePriority(url)
+    await load()
+  } catch (e) {
+    error.value = '删除失败'
+    console.error(e)
+  }
+}
+
+function fmtTime(ts) {
+  if (!ts) return '-'
+  return new Date(ts * 1000).toLocaleString('zh-CN', {
+    month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit'
+  })
+}
+
+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">
+      添加 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">
+        <input
+          v-model="inputUrl"
+          @keyup.enter="submit"
+          type="text"
+          placeholder="输入 URL 或域名，例如 https://example.com 或 example.com"
+          class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2.5 text-gray-100 placeholder-gray-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 text-sm"
+          :disabled="submitting"
+        />
+        <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"
+        >
+          {{ submitting ? '添加中...' : '插入队列' }}
+        </button>
+      </div>
+
+      <!-- Error -->
+      <div v-if="submitError" class="mt-3 text-sm text-red-400">
+        {{ submitError }}
+      </div>
+
+      <!-- Success -->
+      <div v-if="submitSuccess" class="mt-3 text-sm text-green-400">
+        已添加到优先队列，将在下一轮爬取时优先抓取
+      </div>
+    </div>
+
+    <!-- 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">
+        <span class="text-sm font-medium text-gray-300">待爬取队列</span>
+        <span class="text-xs text-gray-500">{{ items.length }} 条</span>
+      </div>
+
+      <!-- Loading -->
+      <div v-if="loading" class="p-8 text-center text-gray-500 text-sm">
+        加载中...
+      </div>
+
+      <!-- Error -->
+      <div v-else-if="error" class="p-8 text-center text-red-400 text-sm">
+        {{ error }}
+      </div>
+
+      <!-- Empty -->
+      <div v-else-if="items.length === 0" class="p-8 text-center text-gray-500 text-sm">
+        暂无待爬取的优先 URL
+      </div>
+
+      <!-- Table -->
+      <table v-else class="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>
+            <th class="px-6 py-3 font-medium w-28">类型</th>
+            <th class="px-6 py-3 font-medium w-40">添加时间</th>
+            <th class="px-6 py-3 font-medium w-16">操作</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-800">
+          <tr v-for="item in items" :key="item.url" class="hover:bg-gray-800/50">
+            <td class="px-6 py-3">
+              <span class="text-gray-300 break-all">{{ item.url }}</span>
+            </td>
+            <td class="px-6 py-3">
+              <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>
+            </td>
+            <td class="px-6 py-3 text-gray-500">{{ fmtTime(item.added_at) }}</td>
+            <td class="px-6 py-3">
+              <button
+                @click="del(item.url)"
+                class="text-red-400 hover:text-red-300 text-xs cursor-pointer"
+              >
+                删除
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

src/views/RecentCrawls.vue

@@ -0,0 +1,205 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { fetchRecent } from '../api.js'
+
+const items = ref([])
+const total = ref(0)
+const loading = ref(true)
+const error = ref(null)
+const search = ref('')
+const filterLang = ref('')
+
+const limits = [20, 50, 100, 200]
+const limit = ref(50)
+
+onMounted(async () => {
+  await load()
+})
+
+async function load() {
+  loading.value = true
+  error.value = null
+  try {
+    const data = await fetchRecent(limit.value)
+    items.value = data.items || []
+    total.value = data.total || 0
+  } catch (e) {
+    error.value = '无法加载数据，可能人服务器未启动'
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+async function changeLimit(l) {
+  limit.value = l
+  await load()
+}
+
+const filtered = computed(() => {
+  let list = items.value
+  if (search.value) {
+    const q = search.value.toLowerCase()
+    list = list.filter(i =>
+      i.title?.toLowerCase().includes(q) ||
+      i.url?.toLowerCase().includes(q) ||
+      i.domain?.toLowerCase().includes(q)
+    )
+  }
+  if (filterLang.value) {
+    list = list.filter(i => Object.keys(i.language || {}).includes(filterLang.value))
+  }
+  return list
+})
+
+function fmtTime(ts) {
+  if (!ts) return '-'
+  return new Date(ts * 1000).toLocaleString('zh-CN', {
+    year: 'numeric', month: '2-digit', day: '2-digit',
+    hour: '2-digit', minute: '2-digit', second: '2-digit',
+    hour12: false,
+  })
+}
+
+function langTag(lang) {
+  const map = {
+    zh: { label: '中文', cls: 'bg-red-900/60 text-red-300' },
+    en: { label: 'EN', cls: 'bg-blue-900/60 text-blue-300' },
+    ja: { label: '日', cls: 'bg-pink-900/60 text-pink-300' },
+    ko: { label: '한', cls: 'bg-blue-900/60 text-blue-300' },
+    fr: { label: 'FR', cls: 'bg-green-900/60 text-green-300' },
+    de: { label: 'DE', cls: 'bg-yellow-900/60 text-yellow-300' },
+    es: { label: 'ES', cls: 'bg-green-900/60 text-green-300' },
+    ru: { label: 'RU', cls: 'bg-purple-900/60 text-purple-300' },
+  }
+  return map[lang] || { label: lang, cls: 'bg-gray-800 text-gray-400' }
+}
+
+function topLang(language) {
+  if (!language) return null
+  const sorted = Object.entries(language).sort((a, b) => b[1] - a[1])
+  return sorted[0]
+}
+</script>
+
+<template>
+  <div class="p-8">
+    <!-- Header -->
+    <div class="flex items-center justify-between mb-6">
+      <div>
+        <h1 class="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">
+        <select
+          v-model="limit"
+          @change="changeLimit(limit)"
+          class="bg-gray-900 border border-gray-700 text-gray-300 text-sm rounded-lg px-3 py-2 focus:border-blue-500 focus:outline-none"
+        >
+          <option v-for="l in limits" :key="l" :value="l">显示 {{ l }} 条</option>
+        </select>
+        <button
+          @click="load"
+          class="bg-blue-600 hover:bg-blue-700 text-white text-sm px-4 py-2 rounded-lg transition-colors"
+        >
+          刷新
+        </button>
+      </div>
+    </div>
+
+    <!-- Filters -->
+    <div class="flex items-center gap-4 mb-5">
+      <div class="relative flex-1 max-w-sm">
+        <input
+          v-model="search"
+          type="text"
+          placeholder="搜索标题、URL、域名..."
+          class="w-full bg-gray-900 border border-gray-700 text-gray-200 text-sm rounded-lg pl-10 pr-4 py-2 focus:border-blue-500 focus:outline-none placeholder-gray-600"
+        />
+        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">🔍</span>
+      </div>
+      <select
+        v-model="filterLang"
+        class="bg-gray-900 border border-gray-700 text-gray-300 text-sm rounded-lg px-3 py-2 focus:border-blue-500 focus:outline-none"
+      >
+        <option value="">全部语种</option>
+        <option value="zh">中文</option>
+        <option value="en">English</option>
+        <option value="ja">日本語</option>
+        <option value="ko">한국어</option>
+        <option value="fr">Français</option>
+        <option value="de">Deutsch</option>
+        <option value="es">Español</option>
+        <option value="ru">Русский</option>
+      </select>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading" class="flex items-center justify-center h-48">
+      <div class="text-gray-400 animate-pulse">加载中...</div>
+    </div>
+
+    <!-- Error -->
+    <div v-else-if="error" class="bg-red-900/30 border border-red-800 rounded-lg p-4 text-red-300">
+      {{ error }}
+    </div>
+
+    <!-- Table -->
+    <div v-else class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden">
+      <table class="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>
+            <th class="text-left px-5 py-3 text-gray-500 font-medium text-xs uppercase tracking-wider w-28">域名</th>
+            <th class="text-left px-5 py-3 text-gray-500 font-medium text-xs uppercase tracking-wider w-16">语种</th>
+            <th class="text-left px-5 py-3 text-gray-500 font-medium text-xs uppercase tracking-wider w-20">字数</th>
+            <th class="text-left px-5 py-3 text-gray-500 font-medium text-xs uppercase tracking-wider w-48">爬取时间</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="item in filtered"
+            :key="item.url"
+            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>
+              <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">
+              <span class="text-gray-400 text-xs font-mono">{{ item.domain }}</span>
+            </td>
+            <td class="px-5 py-3.5">
+              <template v-if="topLang(item.language)">
+                <span
+                  :class="['text-xs px-1.5 py-0.5 rounded font-medium', langTag(topLang(item.language)[0]).cls]"
+                >
+                  {{ langTag(topLang(item.language)[0]).label }}
+                  {{ (topLang(item.language)[1] * 100).toFixed(0) }}%
+                </span>
+              </template>
+              <span v-else class="text-xs text-gray-600">-</span>
+            </td>
+            <td class="px-5 py-3.5 text-gray-500 text-xs tabular-nums">
+              {{ item.word_count.toLocaleString() }}
+            </td>
+            <td class="px-5 py-3.5 text-gray-500 text-xs">
+              {{ fmtTime(item.crawled_at) }}
+            </td>
+          </tr>
+          <tr v-if="!filtered.length">
+            <td colspan="5" class="px-5 py-12 text-center text-gray-600">
+              没有找到匹配的记录
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Footer info -->
+    <div v-if="!loading && !error && filtered.length" class="mt-3 text-xs text-gray-600 text-right">
+      筛选后 {{ filtered.length }} 条 / 共 {{ total.toLocaleString() }} 条
+    </div>
+  </div>
+</template>

src/views/SearchView.vue

@@ -0,0 +1,230 @@
+<script setup>
+import { ref } from 'vue'
+
+const BASE = 'http://localhost'
+const PAGE_SIZE = 10
+
+const query = ref('')
+const results = ref([])
+const total = ref(0)
+const counts = ref({})
+const loading = ref(false)
+const error = ref(null)
+const page = ref(0)
+let debounceTimer = null
+
+async function doSearch(q, loadMore = false) {
+  if (!q.trim()) {
+    results.value = []
+    total.value = 0
+    counts.value = {}
+    return
+  }
+  if (!loadMore) {
+    page.value = 0
+  }
+  loading.value = true
+  error.value = null
+  try {
+    const qh = encodeURIComponent(q)
+    const from = page.value * PAGE_SIZE
+    const resp = await fetch(`${BASE}/search?qh=${qh}&slice=${from}:${from + PAGE_SIZE}`)
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    const data = await resp.json()
+    if (loadMore) {
+      results.value = [...results.value, ...(data.results || [])]
+    } else {
+      results.value = data.results || []
+    }
+    total.value = data.total || 0
+    counts.value = data.counts || {}
+  } catch (e) {
+    error.value = '搜索失败，可能是人服务器未启动'
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+function onInput() {
+  clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => doSearch(query.value), 400)
+}
+
+function onKeydown(e) {
+  if (e.key === 'Enter') {
+    clearTimeout(debounceTimer)
+    doSearch(query.value)
+  }
+}
+
+function truncate(text, len = 120) {
+  if (!text) return ''
+  return text.length > len ? text.slice(0, len) + '…' : text
+}
+
+function fmtCount(n) {
+  if (!n) return '0'
+  return n.toLocaleString()
+}
+
+function scorePercent(score) {
+  return Math.min(100, Math.round(score * 100))
+}
+
+function langTag(lang) {
+  const map = { zh: '中文', en: 'EN', ja: 'JA', ko: 'KO', fr: 'FR', de: 'DE', es: 'ES', ru: 'RU' }
+  return map[lang] || lang?.toUpperCase()
+}
+
+function domain(url) {
+  try { return new URL(url).hostname } catch { return url }
+}
+
+function openUrl(url) {
+  window.open(url, '_blank')
+}
+</script>
+
+<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="max-w-3xl mx-auto">
+        <div class="relative">
+          <input
+            v-model="query"
+            @input="onInput"
+            @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"
+          />
+          <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"
+          >
+            搜索
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Results -->
+    <div class="flex-1 overflow-y-auto px-8 py-6">
+      <div class="max-w-3xl mx-auto">
+
+        <!-- Loading -->
+        <div v-if="loading" class="flex items-center gap-3 text-gray-400 py-8">
+          <div class="w-5 h-5 border-2 border-blue-400 border-t-transparent rounded-full animate-spin"></div>
+          <span>搜索中...</span>
+        </div>
+
+        <!-- Error -->
+        <div v-else-if="error" class="bg-red-900/30 border border-red-800 rounded-lg p-4 text-red-300">
+          {{ error }}
+        </div>
+
+        <!-- Empty query -->
+        <div v-else-if="!query.trim()" class="py-16 text-center text-gray-600">
+          输入关键词开始搜索
+        </div>
+
+        <!-- No results -->
+        <div v-else-if="results.length === 0 && !loading" class="py-16 text-center text-gray-600">
+          未找到相关结果
+        </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>
+          <!-- Word counts -->
+          <div class="flex gap-2 ml-auto">
+            <span
+              v-for="(cnt, word) in counts"
+              :key="word"
+              class="inline-flex items-center gap-1 bg-gray-800 rounded px-2 py-0.5 text-xs text-gray-400"
+            >
+              <span class="text-gray-300">{{ word }}</span>
+              <span>{{ fmtCount(cnt) }}</span>
+            </span>
+          </div>
+        </div>
+
+        <!-- Result list -->
+        <div v-if="results.length > 0" class="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"
+          >
+            <!-- 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">
+                  {{ item.snippet?.title || domain(item.url) }}
+                </div>
+                <div class="text-xs text-gray-600 mt-0.5 truncate">{{ domain(item.url) }}</div>
+              </div>
+              <!-- 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="h-full bg-blue-500 rounded-full"
+                    :style="{ width: scorePercent(item.score) + '%' }"
+                  ></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Description -->
+            <p class="text-gray-400 text-sm leading-relaxed mb-3">
+              {{ truncate(item.snippet?.description || item.snippet?.text) }}
+            </p>
+
+            <!-- Bottom meta -->
+            <div class="flex items-center gap-3 text-xs">
+              <!-- Relevance per token -->
+              <div class="flex gap-1.5">
+                <span
+                  v-for="(score, word) in item.relevance"
+                  :key="word"
+                  class="inline-flex items-center bg-gray-800 rounded px-1.5 py-0.5"
+                  :title="`${word}: ${(score * 100).toFixed(1)}%`"
+                >
+                  <span class="text-blue-400">{{ word }}</span>
+                  <span class="text-gray-600 ml-1">{{ (score * 100).toFixed(0) }}%</span>
+                </span>
+              </div>
+              <!-- Lang tag -->
+              <span
+                v-if="item.snippet?.language"
+                class="text-gray-600"
+              >{{ langTag(item.snippet.language) }}</span>
+              <!-- Domain count -->
+              <span class="text-gray-700 ml-auto">{{ fmtCount(item.domain_count) }} 个结果</span>
+            </div>
+
+            <!-- URL -->
+            <div class="text-xs text-gray-700 mt-1 truncate">{{ item.url }}</div>
+          </div>
+        </div>
+
+        <!-- Load more -->
+        <div v-if="results.length > 0 && results.length < total" class="mt-6 text-center">
+          <button
+            @click="page++; doSearch(query, true)"
+            class="bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-xl px-6 py-2.5 text-sm transition"
+          >
+            加载更多 ({{ results.length }}/{{ fmtCount(total) }})
+          </button>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>