diff --git a/src/components/ResultItem.vue b/src/components/ResultItem.vue new file mode 100644 index 0000000..284bc6b --- /dev/null +++ b/src/components/ResultItem.vue @@ -0,0 +1,66 @@ + + + + + + diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue index c6f9f6e..46af6c1 100644 --- a/src/components/SearchResults.vue +++ b/src/components/SearchResults.vue @@ -81,46 +81,33 @@ {{ platformData.error }} - -
- -
- -
- - {{ index + 1 }}. - - - {{ result.title }} - -
- - -
- - - {{ extractPath(result.url) }} - -
+ +
+ + + + + +
@@ -162,12 +149,13 @@ import { useSearchStore } from '@/stores/search' import type { PlatformData } from '@/stores/search' import { playTap } from '@/composables/useSound' import LazyRender from '@/components/LazyRender.vue' +import ResultItem from '@/components/ResultItem.vue' +import VirtualList from 'vue-virtual-scroll-list' import { ExternalLink, AlertTriangle, Crown, List, - Link as LinkIcon, ArrowDown, CheckCircle, Star, @@ -189,18 +177,6 @@ import { const searchStore = useSearchStore() -// 从URL中提取路径 -function extractPath(url: string): string { - try { - const urlObj = new URL(url) - // 返回路径部分(去掉域名) - return urlObj.pathname + urlObj.search + urlObj.hash - } catch { - // 如果URL解析失败,返回完整URL - return url - } -} - // 获取站点所有结果的唯一标签 function getUniqueTags(platformData: PlatformData) { const allTags = new Set() @@ -386,6 +362,12 @@ function getTagLabel(tag: string) { contain: layout style; } +/* 虚拟滚动列表容器 */ +.virtual-list-container { + max-height: 600px; + overflow-y: auto; +} + /* Tailwind 动画 - 优化为仅使用 transform 和 opacity */ .animate-fade-in { animation: fadeIn 0.5s ease-out; diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index 3c5d42d..cce395d 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -12,13 +12,11 @@ >