Compare commits

...
1 Commits
Author SHA1 Message Date
kevin 52c1b9de99 展开关闭标签特别卡的问题 2026-04-12 02:57:38 +08:00
+13 -7
View File
@@ -6,7 +6,7 @@ const loading = ref(true)
const error = ref(null) const error = ref(null)
const stats = ref({ size: 0, max_size: 10000 }) const stats = ref({ size: 0, max_size: 10000 })
const items = ref([]) // 当前页数据 const items = ref([]) // 当前页数据
const expandedUrls = ref(new Set()) const expandedUrls = ref({}) // 使用普通对象存储展开状态,避免 Set 的响应式开销
const urlKeywords = ref({}) const urlKeywords = ref({})
const loadingKeywords = ref(new Set()) const loadingKeywords = ref(new Set())
const search = ref('') const search = ref('')
@@ -48,7 +48,9 @@ async function load() {
items.value = data.items || [] items.value = data.items || []
// 默认全部展开 // 默认全部展开
items.value.forEach(item => expandedUrls.value.add(item.url)) const expanded = {}
items.value.forEach(item => expanded[item.url] = true)
expandedUrls.value = expanded
// 预加载当前页关键词 // 预加载当前页关键词
items.value.forEach(item => { items.value.forEach(item => {
if (item.keywords?.length) { if (item.keywords?.length) {
@@ -97,12 +99,16 @@ function onSearch() {
} }
async function toggleKeywords(url) { async function toggleKeywords(url) {
if (expandedUrls.value.has(url)) { if (expandedUrls.value[url]) {
expandedUrls.value.delete(url) // 关闭:删除展开状态
const newExpanded = { ...expandedUrls.value }
delete newExpanded[url]
expandedUrls.value = newExpanded
return return
} }
expandedUrls.value.add(url) // 展开
expandedUrls.value = { ...expandedUrls.value, [url]: true }
if (urlKeywords.value[url]) return if (urlKeywords.value[url]) return
@@ -221,7 +227,7 @@ function truncateSnippet(text, maxLen = 200) {
<!-- URL 标题行 --> <!-- URL 标题行 -->
<div class="flex items-start gap-2 mb-1"> <div class="flex items-start gap-2 mb-1">
<span class="shrink-0 text-gray-600 mt-0.5 text-xs select-none"> <span class="shrink-0 text-gray-600 mt-0.5 text-xs select-none">
{{ expandedUrls.has(item.url) ? '▼' : '▶' }} {{ expandedUrls[item.url] ? '▼' : '▶' }}
</span> </span>
<a <a
:href="item.url" :href="item.url"
@@ -246,7 +252,7 @@ function truncateSnippet(text, maxLen = 200) {
</div> </div>
<!-- 关键词 --> <!-- 关键词 -->
<div v-if="expandedUrls.has(item.url)" class="mt-2"> <div v-if="expandedUrls[item.url]" class="mt-2">
<template v-if="urlKeywords[item.url]?.length"> <template v-if="urlKeywords[item.url]?.length">
<div class="flex flex-wrap gap-1.5"> <div class="flex flex-wrap gap-1.5">
<span <span