beggin/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
21 Guns
2026-08-05 20:38:48 +08:00
parent f7b7f7d320
commit ecf730bda7
6 changed files with 568 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
AGENTS.md Normal file
View File

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

38
src/components/IndexSidebar.astro
View File

@@ -1,12 +1,15 @@
---
import Folder from "@/assets/icon/folder.png?url";
import Tag from "@/assets/icon/tag.png?url";
import type { CategoriesStats } from "@/types";
import TagIcon from "@/assets/icon/tag.png?url";
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>
<a class="tag" href="#">JavaScript</a>
<a class="tag" href="#">响应式</a>
<a class="tag" href="#">随笔</a>
<a class="tag" href="#">读书</a>
<a class="tag" href="#">效率</a>
<a class="tag" href="#">设计</a>
<a class="tag" href="#">工具</a>
<a class="tag" href="#">深色模式</a>
{
tags.map((tag) => (
<a
class="tag"
href={`/filter?type=tag&code=${encodeURIComponent(tag.code)}`}
>
{tag.name}
</a>
))
}
</div>
</div>
</aside>
@@ -126,7 +134,7 @@ const { data: categories } =
}
.tag:hover {
background: #dfe6fd;
background: var(--tag-hover-bg);
}
@media (max-width: 860px) {

2
src/components/PostList.astro
View File

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

505
src/pages/filter.astro Normal file
View File

@@ -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>

2
src/styles/global.css
View File

@@ -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,

4
src/types/post.ts
View File

@@ -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;
}