feat: 文章标签展示、搜索框清除按钮

- 文章详情页和文章卡片展示标签
- 搜索框右侧添加 × 清除按钮
- 标签点击跳转文章列表页自动搜索
- 修复 hasAnyFilter 未包含 tags 的 bug

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

pages/posts/[slug].vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { siteConfig } from '~/config/site'
 
+const router = useRouter()
 const route = useRoute()
 const slug = route.params.slug as string
 
@@ -52,6 +53,17 @@ function formatDate(date: string) {
         {{ post.description }}
       </p>
 
+      <div v-if="post.tags?.length" class="mt-4 flex flex-wrap gap-2">
+        <span
+          v-for="tag in post.tags"
+          :key="tag"
+          class="tag-pill cursor-pointer"
+          @click="router.push(`/posts?tag=${encodeURIComponent(tag)}`)"
+        >
+          {{ tag }}
+        </span>
+      </div>
+
       <div v-if="post.image" class="mt-6">
         <img
           :src="post.image"

pages/posts/index.vue

@@ -6,7 +6,15 @@ useSeoMeta({
   description: `${siteConfig.siteName} 的所有文章`,
 })
 
+const route = useRoute()
 const searchQuery = ref('')
+
+watch(() => route.query.tag, (tag) => {
+  if (typeof tag === 'string' && tag) {
+    searchQuery.value = tag
+    currentPage.value = 1
+  }
+}, { immediate: true })
 const currentPage = ref(1)
 const postsPerPage = 10
 
@@ -46,7 +54,7 @@ const { data: allPosts } = await useAsyncData('posts-list', () =>
 
 const { searchResults, filteredPosts, highlight } = usePostSearch(allPosts, searchQuery, searchFilters)
 
-const hasAnyFilter = computed(() => searchFilters.value.title || searchFilters.value.description || searchFilters.value.content)
+const hasAnyFilter = computed(() => searchFilters.value.title || searchFilters.value.description || searchFilters.value.content || searchFilters.value.tags)
 
 const totalPages = computed(() => Math.ceil(searchResults.value.length / postsPerPage))
 
@@ -83,10 +91,18 @@ watch(() => searchFilters.value, () => {
           v-model="searchQuery"
           type="text"
           placeholder="搜索文章标题、描述或内容..."
-          class="w-full h-10 rounded-full border bg-transparent pl-10 pr-4 text-sm outline-none transition-all focus:ring-2"
+          class="w-full h-10 rounded-full border bg-transparent pl-10 pr-10 text-sm outline-none transition-all focus:ring-2"
           style="border-color: var(--color-border); --tw-ring-color: var(--color-border);"
           @input="currentPage = 1"
         />
+        <button
+          v-if="searchQuery"
+          type="button"
+          class="absolute right-3 top-1/2 -translate-y-1/2 w-5 h-5 flex items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground transition-colors cursor-pointer"
+          @click="searchQuery = ''; currentPage = 1"
+        >
+          &times;
+        </button>
       </div>
 
       <div class="mt-3 flex flex-wrap gap-4">