feat: 根据分类和tag筛选文章
This commit is contained in:
@@ -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) {
|
||||
|
||||
@@ -177,7 +177,7 @@ posts.map((post) => {
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
background: #dfe6fd;
|
||||
background: var(--tag-hover-bg);
|
||||
}
|
||||
|
||||
/* ========== 分页 ========== */
|
||||
|
||||
505
src/pages/filter.astro
Normal file
505
src/pages/filter.astro
Normal 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>
|
||||
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user