From f73a0d2d439cb9851d0b0aa3bbd75fd0d6fa0516 Mon Sep 17 00:00:00 2001
From: npmrun <1549469775@qq.com>
Date: Sun, 26 Apr 2026 02:26:26 +0800
Subject: [PATCH] refactor(tags): streamline tag handling in post lists

- Removed redundant state for available tags and replaced it with a computed property that consolidates tags from API and post items.
- Enhanced the tag filtering UI by maintaining the existing structure while improving the logic for tag selection and clearing.
- Updated the posts page to ensure consistent tag management across user and public views.

These changes improve the efficiency of tag management and enhance the user experience in filtering posts by tags.
---
 app/pages/@[publicSlug]/posts/index.vue |  68 ++++++++++++++++----------------
 app/pages/me/posts/index.vue            |  10 ++++-
 packages/drizzle-pkg/db.sqlite          | Bin 188416 -> 188416 bytes
 3 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/app/pages/@[publicSlug]/posts/index.vue b/app/pages/@[publicSlug]/posts/index.vue
index bfb9621..5c6d830 100644
--- a/app/pages/@[publicSlug]/posts/index.vue
+++ b/app/pages/@[publicSlug]/posts/index.vue
@@ -61,7 +61,6 @@ const selectedTags = ref<string[]>(
     : [],
 )
 const tagMode = ref<TagMode>(route.query.tagMode === 'and' ? 'and' : 'or')
-const availableTags = ref<string[]>([])
 const tagModeItems = [
   { label: '任一命中 (OR)', value: 'or' },
   { label: '全部命中 (AND)', value: 'and' },
@@ -98,12 +97,13 @@ const { data, pending, error } = await useAsyncData(
   { watch: [slug, page, selectedTags, tagMode] },
 )
 
-watch(
-  () => data.value?.availableTags,
-  () => {
-    availableTags.value = data.value?.availableTags ?? []
-  },
-)
+const availableTags = computed(() => {
+  const byApi = data.value?.availableTags ?? []
+  const byItems = (data.value?.items ?? [])
+    .flatMap(item => item.tags ?? [])
+    .filter(Boolean)
+  return [...new Set([...byApi, ...byItems])]
+})
 
 watch(
   () => [route.query.tags, route.query.tagMode] as const,
@@ -166,39 +166,39 @@ usePageTitle(() => {
       class="my-6"
     />
     <template v-else-if="data">
+      <UCard class="mb-4" :ui="{ body: 'p-4 space-y-3' }">
+        <div class="flex items-center justify-between gap-2">
+          <div class="text-sm text-muted">
+            标签筛选
+          </div>
+          <UButton
+            size="xs"
+            color="neutral"
+            variant="ghost"
+            @click="selectedTags = []; tagMode = 'or'; updateFilterQuery(1)"
+          >
+            清空
+          </UButton>
+        </div>
+        <PostTagsInput
+          :model-value="selectedTags"
+          :suggestions="availableTags"
+          placeholder="输入标签回车筛选"
+          @update:model-value="(v) => { selectedTags = v; updateFilterQuery(1) }"
+        />
+        <USelect
+          v-model="tagMode"
+          :items="tagModeItems"
+          class="w-full sm:w-56"
+          @update:model-value="() => updateFilterQuery(1)"
+        />
+      </UCard>
       <UEmpty
         v-if="data.total === 0"
         :title="selectedTags.length ? '没有匹配结果' : '暂无公开文章'"
         :description="selectedTags.length ? '请尝试调整标签筛选条件。' : '站主尚未发布任何公开文章。'"
       />
       <template v-else>
-        <UCard class="mb-4" :ui="{ body: 'p-4 space-y-3' }">
-          <div class="flex items-center justify-between gap-2">
-            <div class="text-sm text-muted">
-              标签筛选
-            </div>
-            <UButton
-              size="xs"
-              color="neutral"
-              variant="ghost"
-              @click="selectedTags = []; tagMode = 'or'; updateFilterQuery(1)"
-            >
-              清空
-            </UButton>
-          </div>
-          <PostTagsInput
-            :model-value="selectedTags"
-            :suggestions="availableTags"
-            placeholder="输入标签回车筛选"
-            @update:model-value="(v) => { selectedTags = v; updateFilterQuery(1) }"
-          />
-          <USelect
-            v-model="tagMode"
-            :items="tagModeItems"
-            class="w-full sm:w-56"
-            @update:model-value="() => updateFilterQuery(1)"
-          />
-        </UCard>
         <h2 class="text-xs font-semibold uppercase tracking-wider text-muted mb-4">
           文章
         </h2>
diff --git a/app/pages/me/posts/index.vue b/app/pages/me/posts/index.vue
index 1baa8e7..7ee80e3 100644
--- a/app/pages/me/posts/index.vue
+++ b/app/pages/me/posts/index.vue
@@ -25,7 +25,7 @@ const router = useRouter()
 const page = ref(1)
 const total = ref(0)
 const pageSize = ref(20)
-const availableTags = ref<string[]>([])
+const availableTagsApi = ref<string[]>([])
 const selectedTags = ref<string[]>([])
 const tagMode = ref<TagMode>('or')
 
@@ -58,12 +58,18 @@ async function load() {
     posts.value = data.items
     total.value = data.total
     pageSize.value = data.pageSize
-    availableTags.value = data.availableTags ?? []
+    availableTagsApi.value = data.availableTags ?? []
   } finally {
     loading.value = false
   }
 }
 
+const availableTags = computed(() => {
+  const byApi = availableTagsApi.value ?? []
+  const byItems = posts.value.flatMap(item => item.tags ?? []).filter(Boolean)
+  return [...new Set([...byApi, ...byItems])]
+})
+
 function onPageChange(nextPage: number) {
   page.value = nextPage
   const query = { ...route.query }
diff --git a/packages/drizzle-pkg/db.sqlite b/packages/drizzle-pkg/db.sqlite
index 2bd016f8a14b23069b8820b20e057903abaafc58..1eab2c7a56e17c4f07de9b4d7e759326bd5b4979 100644
GIT binary patch
delta 209
zcmZoTz};|wdxA8h!bBNoMum+D3-wtT7#P?#vl_hMvomF94drBIH8xE#PBTn0(M>To
zFw`|MG)>gCOtnbVO*T$TGfy(GNK8$!WSsl*`K^4$xkqn@6_~PswM|a+SDEZ@zeyNm
zAU`()e=PqEer|pf{x<&gn-vwl^G)XV*VNEp4rL_9g2^%dOQB8+c+Ahj!pzCI`At06
V29~3@`EIoT;%D6ci=T<@0sxFhJG=k@

delta 209
zcmZoTz};|wdxA8h+(a2?M!Ag%3-wv}-ZHRmW;J-hXUD+6V9v?PYGP<;YMNq@rkiGH
zWTtCkYMG{+XkwY9n_^*Rkd|hWoMLHU#5ngk`;Co^a}WIv*<{MX8Vb}lIniHbvcLT%
zVSW<^R(@^<{#gDS{M`I){OkGGZ&p<J&NrFcUsD5UhbA!=Opfti%EJEw<g|dt{479i
btefA&b8TQb-0^Em`!9aR?Z5b$*e(D7x;H$!