blog/src/pages/search.astro

---
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}] = await Promise.all([
  http.get<ApiResponse<CategoriesStats[]>>("categories/stats"),
  http.get<ApiResponse<Tag[]>>("posts/tags"),
] 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 {data:posts} = await http.get<ApiResponse<Post[]>>("posts/search", {
  searchParams: {
    category_code: findCategory?.code ?? "",
    tag_code: findTag?.code ?? "",
  }
})

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 = new URLSearchParams()

  if (findTag?.code) {
    params.set('t', findTag.code)
  }

  if (findCategory?.code) {
    params.set('c', findCategory.code)
  }

  if (type === 'category') {
    if (c === code) {
      params.delete('c')
    } else {
      params.set('c', code)
    }
  } else {
    if (t === code) {
      params.delete('t')
    } else {
      params.set('t', code)
    }
  }

  const query = params.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>