refactor: 重写filter页面 更新为search

src/pages/search.astro

@@ -0,0 +1,202 @@
+---
+import Layout from '@/layouts/Layout.astro'
+import type {CategoriesStats, Post, Tag} from "@/types";
+import {createHttp} from "@/lib/request.ts";
+import PostList from "@/components/Post/List.astro";
+
+const http = createHttp(Astro.request.headers);
+
+const searchParams = Astro.url.searchParams;
+const t = searchParams.get("t") ?? "";
+const c = searchParams.get("c") ?? "";
+
+const [{data: categories}, {data: tags}, {data: posts}] = await Promise.all([
+  http.get<ApiResponse<CategoriesStats[]>>("categories/stats"),
+  http.get<ApiResponse<Tag[]>>("posts/tags"),
+  http.get<ApiResponse<Post[]>>("posts/search", {
+    searchParams: {
+      category_code: c ?? "",
+      tag_code: t ?? "",
+    }
+  }),
+] as const)
+
+let f_count = 0
+const findCategory = categories.find(item => {
+  if (item.code === c) {
+    f_count++
+  }
+  return item.code === c
+})
+
+const findTag = tags.find(item => {
+  if (item.code === t) {
+    f_count++
+  }
+  return item.code === t
+})
+
+const count = posts.length
+
+const pageTitle =
+  f_count === 0 ? "所有文章" : [findCategory?.name, findTag?.name,]
+    .filter(Boolean)
+    .join(" · ")
+
+const pageDescription =
+  f_count === 0
+    ? "浏览全部文章，按分类和标签筛选你感兴趣的内容。"
+    : `浏览${pageTitle}相关文章，共 ${count} 篇。`
+
+const buildSearchUrl = (type: 'category' | 'tag', code: string) => {
+  const params = {
+    t: t,
+    c: c,
+  }
+
+  if (type === 'category') {
+    params.c = c === code ? "" : code
+  } else {
+    params.t = t === code ? "" : code
+  }
+
+  const searchParams = new URLSearchParams(
+    Object.entries(params).filter(([, value]) => value !== '')
+  );
+
+  const query = searchParams.toString();
+
+  return query ? `/search?${query}` : '/search';
+}
+---
+<Layout title={pageTitle} description={pageDescription}>
+  <div class="page-content search-page">
+    <header class="search-header">
+      <h1 class="search-title">
+        {pageTitle}
+      </h1>
+      <div class="search-count">共 <span>{count}</span> 篇</div>
+    </header>
+
+    <div class="filter-group">
+      <div class="nav-group">
+        <div class="nav-label">分类:</div>
+        <div class="nav-chips">
+          {categories.map(item =>
+            <a href={buildSearchUrl("category", item.code)}
+               class={item.code === findCategory?.code ? 'chip active' : 'chip'}>{item.name}</a>)}
+        </div>
+      </div>
+
+      <div class="nav-group">
+        <div class="nav-label">标签:</div>
+        <div class="nav-chips">
+          {tags.map(item =>
+            <a href={buildSearchUrl("tag", item.code)}
+               class={item.code === findTag?.code ? 'chip active' : 'chip'}>{item.name}</a>)}
+        </div>
+      </div>
+    </div>
+
+    {posts.length > 0 ?
+      <PostList posts={posts}/> :
+      <div class="no-result">没有找到相关文章</div>}
+  </div>
+</Layout>
+
+
+<style>
+  .search-page {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin: 0 auto;
+    max-width: 860px;
+  }
+
+  .search-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+    background: var(--card-bg);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    padding: 16px 20px;
+  }
+
+  .search-count {
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .search-count span {
+    color: var(--tag-text);
+  }
+
+  .search-title {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  .filter-group {
+    background: var(--card-bg);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    padding: 14px 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+
+  .nav-group {
+    display: flex;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .nav-label {
+    color: var(--text-secondary);
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .nav-chips {
+    flex: 1;
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .chip {
+    color: var(--tag-text);
+    border-radius: 999px;
+    background: var(--tag-bg);
+    padding: 4px 8px;
+    font-size: 12px;
+    user-select: none;
+    transition: background 0.2s;
+    cursor: pointer;
+  }
+
+  .chip.active, .chip:hover {
+    background: #3b82f6;
+    color: white;
+  }
+
+  :global(.dark) .chip.active,
+  :global(.dark) .chip:hover {
+    background: #d1d5db;
+    color: black;
+  }
+
+  .no-result {
+    text-align: center;
+    font-size: 14px;
+    margin-top: 32px;
+    color: var(--text-secondary);
+  }
+</style>