feat: 根据分类和tag筛选文章

AGENTS.md

@@ -0,0 +1,34 @@
+# Project Scope Rules
+
+## 文件范围限制
+
+本项目根目录：
+
+./
+
+所有操作必须限制在当前项目目录内。
+
+禁止：
+- 访问项目外文件
+- 修改父级目录文件
+- 创建项目外文件
+- 修改用户目录中的其他内容
+- 禁止访问服务端仓库
+
+## 修改规则
+
+修改前必须：
+1. 列出将修改的文件
+2. 说明修改原因
+3. 等待确认
+
+禁止修改：
+
+node_modules/
+.git/
+build/
+.env
+
+## 开发环境
+
+默认认为已经启动服务，端口为4321

src/components/IndexSidebar.astro

@@ -1,12 +1,15 @@
 ---
 import Folder from "@/assets/icon/folder.png?url";
-import Tag from "@/assets/icon/tag.png?url";
+import TagIcon from "@/assets/icon/tag.png?url";
-import type { CategoriesStats } from "@/types";
+import type { CategoriesStats,Tag } from "@/types";
 import { createHttp } from "@/lib/request";
 const http = createHttp(Astro.request.headers);
 
 const { data: categories } =
   await http.get<ApiResponse<CategoriesStats[]>>("categories/stats");
+
+const { data: tags } =
+  await http.get<ApiResponse<Tag[]>>("posts/tags");
 ---
 
 <aside class="sidebar">
@@ -19,7 +22,12 @@ const { data: categories } =
       {
         categories.map((category) => (
           <li>
-            <a>{category.name}</a>
+            <a
+              href={`/filter?type=category&code=${encodeURIComponent(category.code)}`}
+              title={`${category.name} · ${category.post_count} 篇`}
+            >
+              {category.name}
+            </a>
             <span class="count">{category.post_count}</span>
           </li>
         ))
@@ -29,20 +37,20 @@ const { data: categories } =
 
   <div class="widget">
     <h3 class="widget-title">
-      <img src={Tag} alt="Folder" />
+      <img src={TagIcon} alt="Tag" />
       标签云
     </h3>
     <div class="tag-cloud">
-      <a class="tag" href="#">HTML</a>
+      {
-      <a class="tag" href="#">CSS</a>
+        tags.map((tag) => (
-      <a class="tag" href="#">JavaScript</a>
+          <a
-      <a class="tag" href="#">响应式</a>
+            class="tag"
-      <a class="tag" href="#">随笔</a>
+            href={`/filter?type=tag&code=${encodeURIComponent(tag.code)}`}
-      <a class="tag" href="#">读书</a>
+          >
-      <a class="tag" href="#">效率</a>
+            {tag.name}
-      <a class="tag" href="#">设计</a>
+          </a>
-      <a class="tag" href="#">工具</a>
+        ))
-      <a class="tag" href="#">深色模式</a>
+      }
     </div>
   </div>
 </aside>
@@ -126,7 +134,7 @@ const { data: categories } =
   }
 
   .tag:hover {
-    background: #dfe6fd;
+    background: var(--tag-hover-bg);
   }
 
   @media (max-width: 860px) {

src/components/PostList.astro

@@ -177,7 +177,7 @@ posts.map((post) => {
   }
 
   .tag:hover {
-    background: #dfe6fd;
+    background: var(--tag-hover-bg);
   }
 
   /* ========== 分页 ========== */

src/pages/filter.astro

@@ -0,0 +1,505 @@
+---
+import Layout from "@/layouts/Layout.astro";
+import Calendar from "@/assets/icon/calendar.png?url";
+import Eye from "@/assets/icon/eye.png?url";
+import Folder from "@/assets/icon/folder.png?url";
+import { formatDatetime } from "@/lib/format.ts";
+import { createHttp } from "@/lib/request";
+import type { CategoriesStats, Post, Tag } from "@/types";
+
+const http = createHttp(Astro.request.headers);
+
+const searchParams = Astro.url.searchParams;
+const type = searchParams.get("type") ?? "";
+const code = searchParams.get("code") ?? "";
+
+/**
+ * 搜索接口返回结构：tags 为 base64 编码的 JSON 字符串、
+ * 阅读数字段为 views，且不含 cover / content，这里做归一化
+ */
+type SearchPost = Omit<Post, "view" | "tags" | "cover" | "content"> & {
+  views: number;
+  tags: string;
+  cover?: string;
+  content?: string;
+};
+
+const decodeTags = (raw: string): Tag[] => {
+  try {
+    return JSON.parse(Buffer.from(raw, "base64").toString("utf8")) as Tag[];
+  } catch {
+    return [];
+  }
+};
+
+const normalizePost = (post: SearchPost): Post => ({
+  ...post,
+  view: post.views,
+  tags: decodeTags(post.tags),
+  cover: post.cover ?? "",
+  content: post.content ?? "",
+});
+
+const [{ data: categories }, { data: allTags }, { data: rawPosts }] = await Promise.all([
+  http.get<ApiResponse<CategoriesStats[]>>("categories/stats"),
+  http.get<ApiResponse<Tag[]>>("posts/tags"),
+  http.get<ApiResponse<SearchPost[]>>("posts/search", {
+    searchParams: {
+      category_code: type === "category" ? code : "",
+      tag_code: type === "tag" ? code : "",
+    },
+  }),
+]);
+
+const searchPosts = rawPosts.map(normalizePost);
+
+const category =
+  type === "category" ? categories.find((item) => item.code === code) : undefined;
+
+/** 展示全部标签，按名称排序 */
+const tags = [...allTags].sort((a, b) => a.name.localeCompare(b.name, "zh-CN"));
+
+const tag = type === "tag" ? tags.find((item) => item.code === code) : undefined;
+const valid = Boolean(category || tag);
+
+const posts = searchPosts;
+
+const filterLabel = category ? "分类" : tag ? "标签" : "";
+const filterTitle = category?.name ?? tag?.name ?? "";
+const count = category ? category.post_count : posts.length;
+
+const pageTitle = valid ? `${filterLabel}：${filterTitle}` : "筛选";
+const pageDescription = valid
+  ? `${filterLabel}「${filterTitle}」下的文章，共 ${count} 篇`
+  : "按分类或标签筛选文章";
+
+const filterUrl = (type: string, code: string) =>
+  `/filter?type=${type}&code=${encodeURIComponent(code)}`;
+
+const isActive = (targetType: string, targetCode: string) =>
+  type === targetType && code === targetCode;
+---
+
+<Layout title={pageTitle} description={pageDescription}>
+  <div class="page-content">
+    <div class="filter-page">
+      <header class="filter-header">
+        {
+          valid ? (
+            <>
+              <span class="filter-badge">{filterLabel}</span>
+              <h1 class="filter-title">{filterTitle}</h1>
+              <span class="filter-count">共 {count} 篇</span>
+            </>
+          ) : (
+            <>
+              <h1 class="filter-title">未找到该筛选条件</h1>
+              <p class="filter-tip">请从下方分类或标签进入</p>
+            </>
+          )
+        }
+        <a class="filter-back" href="/">返回首页</a>
+      </header>
+
+      <nav class="filter-nav" aria-label="筛选导航">
+        <div class="nav-group">
+          <span class="nav-label">分类</span>
+          <div class="nav-chips">
+            {
+              categories.map((item) => (
+                <a
+                  class={isActive("category", item.code) ? "chip active" : "chip"}
+                  href={filterUrl("category", item.code)}
+                >
+                  {item.name}
+                  <em>{item.post_count}</em>
+                </a>
+              ))
+            }
+          </div>
+        </div>
+        <div class="nav-group">
+          <span class="nav-label">标签</span>
+          <div class="nav-chips">
+            {
+              tags.map((item) => (
+                <a
+                  class={isActive("tag", item.code) ? "chip active" : "chip"}
+                  href={filterUrl("tag", item.code)}
+                >
+                  {item.name}
+                </a>
+              ))
+            }
+          </div>
+        </div>
+      </nav>
+
+      {
+        valid &&
+        (posts.length > 0 ? (
+          <ul class="post-list">
+            {
+              posts.map((post) => (
+                <li class="post-card">
+                  <a class="post-cover" href={`/post/${post.slug}`} aria-label={post.title}>
+                    {post.cover ? (
+                      <img src={post.cover} alt={post.title} loading="lazy" />
+                    ) : (
+                      <span class="cover-placeholder">{post.title[0]}</span>
+                    )}
+                  </a>
+                  <div class="post-body">
+                    <div class="post-meta">
+                      <span>
+                        <img src={Calendar} alt="Calendar" />
+                        {formatDatetime(post.published_at, "YYYY-MM-DD")}
+                      </span>
+                      <span>
+                        <img src={Folder} alt="Folder" />
+                        {post.category_name}
+                      </span>
+                      <span>
+                        <img src={Eye} alt="Eye" />
+                        {post.view}
+                      </span>
+                    </div>
+                    <h3 class="post-title">
+                      <a href={`/post/${post.slug}`}>{post.title}</a>
+                    </h3>
+                    <p class="post-summary">{post.summary}</p>
+                    <div class="tags">
+                      {
+                        post.tags.map((item) => (
+                          <span class="tag">{item.name}</span>
+                        ))
+                      }
+                    </div>
+                  </div>
+                </li>
+              ))
+            }
+          </ul>
+        ) : (
+          <div class="filter-empty">
+            <p class="empty-text">无数据</p>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</Layout>
+
+<style>
+  .filter-page {
+    max-width: 860px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .filter-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;
+  }
+
+  .filter-badge {
+    flex-shrink: 0;
+    font-size: 12px;
+    color: #fff;
+    background: linear-gradient(135deg, #4f6df5, #7b5cf0);
+    padding: 3px 10px;
+    border-radius: 999px;
+  }
+
+  .filter-title {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  .filter-count {
+    font-size: 13px;
+    color: var(--text-secondary);
+  }
+
+  .filter-tip {
+    margin: 0;
+    font-size: 14px;
+    color: var(--text-secondary);
+  }
+
+  .filter-back {
+    margin-left: auto;
+    font-size: 14px;
+    color: var(--text-secondary);
+    transition: color 0.2s;
+  }
+
+  .filter-back:hover {
+    color: var(--primary);
+  }
+
+  /* 分类 / 标签导航 */
+  .filter-nav {
+    background: var(--card-bg);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    padding: 14px 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .nav-group {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .nav-label {
+    flex-shrink: 0;
+    font-size: 13px;
+    color: var(--text-secondary);
+    line-height: 26px;
+  }
+
+  .nav-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+    color: var(--tag-text);
+    background: var(--tag-bg);
+    padding: 4px 12px;
+    border-radius: 999px;
+    text-decoration: none;
+    border: 1px solid transparent;
+    transition: background 0.2s;
+  }
+
+  .chip:hover {
+    background: var(--tag-hover-bg);
+  }
+
+  .chip.active {
+    background: var(--primary);
+    border-color: var(--primary);
+    color: #fff;
+  }
+
+  .chip em {
+    font-style: normal;
+    font-size: 11px;
+    opacity: 0.7;
+  }
+
+  /* 文章列表（与首页 PostList 样式统一） */
+  .post-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .post-card {
+    background: var(--card-bg);
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+    padding: 16px;
+    transition: transform 0.2s, box-shadow 0.2s;
+    display: flex;
+    gap: 22px;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .post-card:hover {
+      transform: translateY(-3px);
+      box-shadow: var(--shadow-hover);
+    }
+  }
+
+  .post-cover {
+    flex-shrink: 0;
+    width: 160px;
+    height: 110px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 40px;
+    color: #fff;
+    overflow: hidden;
+    background: linear-gradient(135deg, #4f6df5, #7b5cf0);
+  }
+
+  .post-cover img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .cover-placeholder {
+    font-size: 40px;
+    font-weight: 700;
+    color: #fff;
+  }
+
+  .post-body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .post-meta {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-bottom: 6px;
+    display: flex;
+    gap: 14px;
+    flex-wrap: wrap;
+  }
+
+  .post-meta span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .post-meta span img {
+    width: 14px;
+    height: 14px;
+    display: block;
+  }
+
+  .post-title {
+    margin: 0 0 8px;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1.4;
+  }
+
+  .post-title a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .post-title a:hover {
+    color: var(--primary);
+  }
+
+  :global(.dark) .post-title a:hover {
+    color: inherit;
+  }
+
+  .post-summary {
+    margin: 0 0 12px;
+    font-size: 14px;
+    color: var(--text-secondary);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: auto;
+  }
+
+  .tag {
+    font-size: 12px;
+    color: var(--tag-text);
+    background: var(--tag-bg);
+    padding: 3px 10px;
+    border-radius: 999px;
+    transition: background 0.2s;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .tag:hover {
+      background: var(--tag-hover-bg);
+    }
+  }
+
+  .filter-empty {
+    background: var(--card-bg);
+    border-radius: 10px;
+    box-shadow: var(--shadow);
+    padding: 32px 20px;
+    text-align: center;
+  }
+
+  .empty-text {
+    margin: 0;
+    font-size: 13px;
+    color: var(--text-secondary);
+  }
+
+  @media (max-width: 860px) {
+    .post-list {
+      gap: 16px;
+    }
+
+    .post-card {
+      padding: 16px;
+      gap: 12px;
+    }
+
+    .post-cover {
+      width: 128px;
+      height: 88px;
+    }
+
+    .post-title {
+      font-size: 18px;
+    }
+
+    .post-meta {
+      gap: 8px;
+      font-size: 12px;
+    }
+  }
+
+  @media (max-width: 560px) {
+    .post-card {
+      padding: 12px;
+    }
+
+    .post-title {
+      font-size: 16px;
+      margin-bottom: 4px;
+    }
+
+    .post-meta {
+      gap: 6px;
+      font-size: 12px;
+    }
+
+    .post-cover {
+      width: 100px;
+      height: 70px;
+    }
+
+    .post-summary {
+      font-size: 12px;
+      margin-bottom: 6px;
+    }
+  }
+</style>

src/styles/global.css

@@ -13,6 +13,7 @@
   --primary: #4f6df5;
   --tag-bg: #eef1fe;
   --tag-text: #4f6df5;
+  --tag-hover-bg: #dfe6fd;
 }
 
 .dark {
@@ -24,6 +25,7 @@
   --primary: #1e293b;
   --tag-bg: #27272a;
   --tag-text: #f3f4f6;
+  --tag-hover-bg: #334155;
 }
 
 html,

src/types/post.ts

@@ -9,6 +9,8 @@ export type Post = {
   slug: string;
   cover: string;
   category_name: string;
+  category_code: string;
+  category_id?: number;
   published_at: string;
   view: number;
   content: string;
@@ -18,6 +20,6 @@ export type Post = {
 export type CategoriesStats = {
   id: number;
   name: string;
+  code: string
   post_count: number;
 }
-