kevin/sese-engine-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
kevin
2026-04-09 00:15:01 +08:00
parent 95a03de80c
commit 969b9a7c7e
6 changed files with 175 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+21 -3
View File
@@ -64,6 +64,27 @@
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@emnapi/core": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
"integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
"license": "MIT",
"optional": true,
"dependencies": {
"@emnapi/wasi-threads": "1.2.1",
"tslib": "^2.4.0"
}
},
"node_modules/@emnapi/runtime": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
"integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
"license": "MIT",
"optional": true,
"dependencies": {
"tslib": "^2.4.0"
}
},
"node_modules/@emnapi/wasi-threads": { "node_modules/@emnapi/wasi-threads": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz", "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -1462,7 +1483,6 @@
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": ">=12" "node": ">=12"
}, },
@@ -1602,7 +1622,6 @@
"resolved": "https://registry.npmjs.org/vite/-/vite-8.0.7.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.7.tgz",
"integrity": "sha512-P1PbweD+2/udplnThz3btF4cf6AgPky7kk23RtHUkJIU5BIxwPprhRGmOAHs6FTI7UiGbTNrgNP6jSYD6JaRnw==", "integrity": "sha512-P1PbweD+2/udplnThz3btF4cf6AgPky7kk23RtHUkJIU5BIxwPprhRGmOAHs6FTI7UiGbTNrgNP6jSYD6JaRnw==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"lightningcss": "^1.32.0", "lightningcss": "^1.32.0",
"picomatch": "^4.0.4", "picomatch": "^4.0.4",
@@ -1680,7 +1699,6 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.32.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.32.tgz",
"integrity": "sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw==", "integrity": "sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.5.32", "@vue/compiler-dom": "3.5.32",
"@vue/compiler-sfc": "3.5.32", "@vue/compiler-sfc": "3.5.32",
src/App.vue
+24 -6
View File
@@ -9,16 +9,16 @@ const tab = ref('dashboard')
const nav = [ const nav = [
{ id: 'dashboard', label: '概览', icon: '📊' }, { id: 'dashboard', label: '概览', icon: '📊' },
{ id: 'recent', label: '最近爬取', icon: '🕷️' }, { id: 'recent', label: '最近', icon: '🕷️' },
{ id: 'search', label: '搜索', icon: '🔍' }, { id: 'search', label: '搜索', icon: '🔍' },
{ id: 'priority', label: '插入爬取', icon: '🚀' }, { id: 'priority', label: '插入', icon: '🚀' },
] ]
</script> </script>
<template> <template>
<div class="flex h-screen bg-gray-950 text-gray-100 font-sans"> <div class="flex h-screen bg-gray-950 text-gray-100 font-sans">
<!-- Sidebar --> <!-- Desktop Sidebar -->
<aside class="w-56 bg-gray-900 border-r border-gray-800 flex flex-col shrink-0"> <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="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-lg font-semibold text-white tracking-tight">SESE Admin</div>
<div class="text-xs text-gray-500 mt-0.5">爬取内容监控</div> <div class="text-xs text-gray-500 mt-0.5">爬取内容监控</div>
@@ -44,12 +44,30 @@ const nav = [
</div> </div>
</aside> </aside>
<!-- Main --> <!-- Main Content -->
<main class="flex-1 overflow-y-auto"> <main class="flex-1 overflow-y-auto pb-16 md:pb-0">
<Dashboard v-if="tab === 'dashboard'" /> <Dashboard v-if="tab === 'dashboard'" />
<RecentCrawls v-else-if="tab === 'recent'" /> <RecentCrawls v-else-if="tab === 'recent'" />
<SearchView v-else-if="tab === 'search'" /> <SearchView v-else-if="tab === 'search'" />
<PriorityCrawl v-else-if="tab === 'priority'" /> <PriorityCrawl v-else-if="tab === 'priority'" />
</main> </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> </div>
</template> </template>
src/views/Dashboard.vue
+33 -19
View File
@@ -1,22 +1,36 @@
<script setup> <script setup>
import { ref, onMounted } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
import { fetchStats, flushIndex } from '../api.js' import { fetchStats, flushIndex } from '../api.js'
const stats = ref(null) const stats = ref(null)
const loading = ref(true) const loading = ref(true)
const flushing = ref(false) const flushing = ref(false)
const error = ref(null) const error = ref(null)
let refreshInterval = null
onMounted(async () => { onMounted(async () => {
await loadStats()
// 每5秒自动刷新
refreshInterval = setInterval(loadStats, 5000)
})
onUnmounted(() => {
if (refreshInterval) {
clearInterval(refreshInterval)
}
})
async function loadStats() {
try { try {
stats.value = await fetchStats() stats.value = await fetchStats()
error.value = null
} catch (e) { } catch (e) {
error.value = '无法加载统计数据，可能人服务器未启动或端口不对' error.value = '无法加载统计数据，可能人服务器未启动或端口不对'
console.error(e) console.error(e)
} finally { } finally {
loading.value = false loading.value = false
} }
}) }
async function doFlush() { async function doFlush() {
flushing.value = true flushing.value = true
@@ -48,8 +62,8 @@ function langColor(lang) {
</script> </script>
<template> <template>
<div class="p-8"> <div class="p-4 md:p-8">
<h1 class="text-2xl font-semibold text-white mb-8">概览</h1> <h1 class="text-xl md:text-2xl font-semibold text-white mb-6 md:mb-8">概览</h1>
<!-- Loading / Error --> <!-- Loading / Error -->
<div v-if="loading" class="flex items-center justify-center h-48"> <div v-if="loading" class="flex items-center justify-center h-48">
@@ -61,7 +75,7 @@ function langColor(lang) {
<template v-else-if="stats"> <template v-else-if="stats">
<!-- Stat Cards --> <!-- 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="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-sm text-gray-500 mb-2">已爬取 URL</div>
<div class="text-3xl font-bold text-white">{{ fmt(stats.total_urls) }}</div> <div class="text-3xl font-bold text-white">{{ fmt(stats.total_urls) }}</div>
@@ -72,7 +86,7 @@ function langColor(lang) {
</div> </div>
<div class="bg-gray-900 border border-gray-800 rounded-xl p-5"> <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-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>
<div class="bg-gray-900 border border-gray-800 rounded-xl p-5 flex flex-col justify-between"> <div class="bg-gray-900 border border-gray-800 rounded-xl p-5 flex flex-col justify-between">
<div> <div>
@@ -91,39 +105,39 @@ function langColor(lang) {
</div> </div>
</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 --> <!-- Domain Distribution -->
<div class="bg-gray-900 border border-gray-800 rounded-xl p-5"> <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-4 uppercase tracking-wider">域名分布 Top 10</h2> <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 class="space-y-2">
<div <div
v-for="[domain, count] in topDomains(stats.domains)" v-for="[domain, count] in topDomains(stats.domains)"
:key="domain" :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="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-5 overflow-hidden"> <div class="flex-1 bg-gray-800 rounded-full h-4 md:h-5 overflow-hidden">
<div <div
class="h-full bg-blue-600 rounded-full transition-all duration-500" class="h-full bg-blue-600 rounded-full transition-all duration-500"
:style="{ width: `${(count / stats.domains[Object.keys(stats.domains)[0]]) * 100}%` }" :style="{ width: `${(count / stats.domains[Object.keys(stats.domains)[0]]) * 100}%` }"
></div> ></div>
</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> </div>
</div> </div>
<!-- Language Distribution --> <!-- Language Distribution -->
<div class="bg-gray-900 border border-gray-800 rounded-xl p-5"> <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-4 uppercase tracking-wider">语种分布</h2> <h2 class="text-sm font-semibold text-gray-300 mb-3 md:mb-4 uppercase tracking-wider">语种分布</h2>
<div class="space-y-2"> <div class="space-y-2">
<div <div
v-for="[lang, count] in Object.entries(stats.languages || {}).sort((a,b) => b[1]-a[1])" v-for="[lang, count] in Object.entries(stats.languages || {}).sort((a,b) => b[1]-a[1])"
:key="lang" :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="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-5 overflow-hidden"> <div class="flex-1 bg-gray-800 rounded-full h-4 md:h-5 overflow-hidden">
<div <div
class="h-full rounded-full transition-all duration-500" class="h-full rounded-full transition-all duration-500"
:style="{ :style="{
@@ -132,7 +146,7 @@ function langColor(lang) {
}" }"
></div> ></div>
</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> </div>
</div> </div>
src/views/PriorityCrawl.vue
+33 -9
View File
@@ -65,15 +65,15 @@ onMounted(load)
</script> </script>
<template> <template>
<div class="p-8"> <div class="p-4 md:p-8">
<h1 class="text-2xl font-semibold text-white mb-2">插入爬取</h1> <h1 class="text-xl md:text-2xl font-semibold text-white mb-2">插入爬取</h1>
<p class="text-sm text-gray-500 mb-8"> <p class="text-sm text-gray-500 mb-6 md:mb-8">
添加 URL 或域名，下一轮爬取时会优先抓取。纯域名会自动补全为 https://www.域名/。 添加 URL 或域名，下一轮爬取时会优先抓取。纯域名会自动补全为 https://www.域名/。
</p> </p>
<!-- Input --> <!-- Input -->
<div class="bg-gray-900 rounded-xl p-6 mb-6 border border-gray-800"> <div class="bg-gray-900 rounded-xl p-4 md:p-6 mb-4 md:mb-6 border border-gray-800">
<div class="flex gap-3"> <div class="flex flex-col sm:flex-row gap-3">
<input <input
v-model="inputUrl" v-model="inputUrl"
@keyup.enter="submit" @keyup.enter="submit"
@@ -85,7 +85,7 @@ onMounted(load)
<button <button
@click="submit" @click="submit"
:disabled="submitting || !inputUrl.trim()" :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 ? '添加中...' : '插入队列' }} {{ submitting ? '添加中...' : '插入队列' }}
</button> </button>
@@ -104,7 +104,7 @@ onMounted(load)
<!-- List --> <!-- List -->
<div class="bg-gray-900 rounded-xl border border-gray-800"> <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-sm font-medium text-gray-300">待爬取队列</span>
<span class="text-xs text-gray-500">{{ items.length }} 条</span> <span class="text-xs text-gray-500">{{ items.length }} 条</span>
</div> </div>
@@ -124,8 +124,8 @@ onMounted(load)
暂无待爬取的优先 URL 暂无待爬取的优先 URL
</div> </div>
<!-- Table --> <!-- Desktop Table -->
<table v-else class="w-full text-sm"> <table v-else class="hidden md:table w-full text-sm">
<thead> <thead>
<tr class="text-left text-gray-500 text-xs border-b border-gray-800"> <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">URL</th>
@@ -155,6 +155,30 @@ onMounted(load)
</tr> </tr>
</tbody> </tbody>
</table> </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>
</div> </div>
</template> </template>
src/views/RecentCrawls.vue
+44 -11
View File
@@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, onMounted, computed } from 'vue' import { ref, onMounted, onUnmounted, computed } from 'vue'
import { fetchRecent } from '../api.js' import { fetchRecent } from '../api.js'
const items = ref([]) const items = ref([])
@@ -8,6 +8,7 @@ const loading = ref(true)
const error = ref(null) const error = ref(null)
const search = ref('') const search = ref('')
const filterLang = ref('') const filterLang = ref('')
let refreshInterval = null
const limits = [20, 50, 100, 200] const limits = [20, 50, 100, 200]
const limit = ref(50) const limit = ref(50)
@@ -83,14 +84,14 @@ function topLang(language) {
</script> </script>
<template> <template>
<div class="p-8"> <div class="p-4 md:p-8">
<!-- Header --> <!-- 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> <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> <p class="text-sm text-gray-500">共 {{ total.toLocaleString() }} 条记录</p>
</div> </div>
<div class="flex items-center gap-3"> <div class="flex items-center gap-2 md:gap-3">
<select <select
v-model="limit" v-model="limit"
@change="changeLimit(limit)" @change="changeLimit(limit)"
@@ -108,8 +109,8 @@ function topLang(language) {
</div> </div>
<!-- Filters --> <!-- Filters -->
<div class="flex items-center gap-4 mb-5"> <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-sm"> <div class="relative flex-1 max-w-full sm:max-w-sm">
<input <input
v-model="search" v-model="search"
type="text" type="text"
@@ -146,7 +147,8 @@ function topLang(language) {
<!-- Table --> <!-- Table -->
<div v-else class="bg-gray-900 border border-gray-800 rounded-xl overflow-hidden"> <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> <thead>
<tr class="border-b border-gray-800"> <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">标题</th>
@@ -163,8 +165,10 @@ function topLang(language) {
class="border-b border-gray-800/50 hover:bg-gray-800/40 transition-colors group" class="border-b border-gray-800/50 hover:bg-gray-800/40 transition-colors group"
> >
<td class="px-5 py-3.5"> <td class="px-5 py-3.5">
<div class="font-medium text-gray-200 group-hover:text-white line-clamp-2">{{ item.title || '(无标题)' }}</div> <a :href="item.url" target="_blank" rel="noopener noreferrer" class="block hover:opacity-80 transition-opacity">
<div class="text-xs text-gray-600 mt-0.5 break-all line-clamp-1">{{ item.url }}</div> <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> <div v-if="item.description" class="text-xs text-gray-500 mt-1 line-clamp-1">{{ item.description }}</div>
</td> </td>
<td class="px-5 py-3.5"> <td class="px-5 py-3.5">
@@ -195,10 +199,39 @@ function topLang(language) {
</tr> </tr>
</tbody> </tbody>
</table> </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> </div>
<!-- Footer info --> <!-- 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() }} 条 筛选后 {{ filtered.length }} 条 / 共 {{ total.toLocaleString() }} 条
</div> </div>
</div> </div>
src/views/SearchView.vue
+20 -18
View File
@@ -89,7 +89,7 @@ function openUrl(url) {
<template> <template>
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
<!-- Search Box --> <!-- 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="max-w-3xl mx-auto">
<div class="relative"> <div class="relative">
<input <input
@@ -98,11 +98,11 @@ function openUrl(url) {
@keydown="onKeydown" @keydown="onKeydown"
type="text" type="text"
placeholder="输入关键词搜索，或用 site:example.com 限定域名" 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 <button
@click="doSearch(query)" @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> </button>
@@ -136,12 +136,14 @@ function openUrl(url) {
</div> </div>
<!-- Stats bar --> <!-- Stats bar -->
<div v-else-if="results.length > 0" class="flex items-center gap-4 mb-5 text-sm text-gray-500"> <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">
<span>找到约 <strong class="text-gray-300">{{ fmtCount(total) }}</strong> 条结果</span> <div class="flex items-center gap-2">
<span class="text-gray-700">|</span> <span>找到约 <strong class="text-gray-300">{{ fmtCount(total) }}</strong> 条结果</span>
<span>{{ results.length }} 条已加载</span> <span class="text-gray-700">|</span>
<span>{{ results.length }} 条已加载</span>
</div>
<!-- Word counts --> <!-- Word counts -->
<div class="flex gap-2 ml-auto"> <div class="flex flex-wrap gap-2 sm:ml-auto">
<span <span
v-for="(cnt, word) in counts" v-for="(cnt, word) in counts"
:key="word" :key="word"
@@ -154,17 +156,17 @@ function openUrl(url) {
</div> </div>
<!-- Result list --> <!-- 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 <div
v-for="(item, i) in results" v-for="(item, i) in results"
:key="i" :key="i"
@click="openUrl(item.url)" @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 --> <!-- Title -->
<div class="flex items-start gap-3 mb-2"> <div class="flex items-start gap-2 md:gap-3 mb-2">
<div class="flex-1"> <div class="flex-1 min-w-0">
<div class="text-blue-400 group-hover:text-blue-300 text-lg leading-snug"> <div class="text-blue-400 group-hover:text-blue-300 text-base md:text-lg leading-snug">
{{ item.snippet?.title || domain(item.url) }} {{ item.snippet?.title || domain(item.url) }}
</div> </div>
<div class="text-xs text-gray-600 mt-0.5 truncate">{{ 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 --> <!-- Score bar -->
<div class="flex flex-col items-end gap-1 shrink-0"> <div class="flex flex-col items-end gap-1 shrink-0">
<div class="text-xs text-gray-600">{{ scorePercent(item.score) }}%</div> <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 <div
class="h-full bg-blue-500 rounded-full" class="h-full bg-blue-500 rounded-full"
:style="{ width: scorePercent(item.score) + '%' }" :style="{ width: scorePercent(item.score) + '%' }"
@@ -182,14 +184,14 @@ function openUrl(url) {
</div> </div>
<!-- Description --> <!-- 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) }} {{ truncate(item.snippet?.description || item.snippet?.text) }}
</p> </p>
<!-- Bottom meta --> <!-- 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 --> <!-- Relevance per token -->
<div class="flex gap-1.5"> <div class="flex flex-wrap gap-1.5">
<span <span
v-for="(score, word) in item.relevance" v-for="(score, word) in item.relevance"
:key="word" :key="word"
@@ -206,7 +208,7 @@ function openUrl(url) {
class="text-gray-600" class="text-gray-600"
>{{ langTag(item.snippet.language) }}</span> >{{ langTag(item.snippet.language) }}</span>
<!-- Domain count --> <!-- 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> </div>
<!-- URL --> <!-- URL -->