refactor: 重写filter页面 更新为search
This commit is contained in:
@@ -23,7 +23,7 @@ const { data: tags } =
|
|||||||
categories.map((category) => (
|
categories.map((category) => (
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
href={`/filter?type=category&code=${encodeURIComponent(category.code)}`}
|
href={`/search?c=${encodeURIComponent(category.code)}`}
|
||||||
title={`${category.name} · ${category.post_count} 篇`}
|
title={`${category.name} · ${category.post_count} 篇`}
|
||||||
>
|
>
|
||||||
{category.name}
|
{category.name}
|
||||||
@@ -45,7 +45,7 @@ const { data: tags } =
|
|||||||
tags.map((tag) => (
|
tags.map((tag) => (
|
||||||
<a
|
<a
|
||||||
class="tag"
|
class="tag"
|
||||||
href={`/filter?type=tag&code=${encodeURIComponent(tag.code)}`}
|
href={`/search?t=${encodeURIComponent(tag.code)}`}
|
||||||
>
|
>
|
||||||
{tag.name}
|
{tag.name}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
---
|
---
|
||||||
import type {Post} from "@/types/post";
|
import type {Post} from "@/types/post";
|
||||||
import IndexSidebar from "@/components/IndexSidebar.astro";
|
import IndexSidebar from "@/components/IndexSidebar.astro";
|
||||||
import PostList from "@/components/PostList.astro";
|
import PostList from "@/components/Post/List.astro";
|
||||||
|
import Pagination from "@/components/Post/Pagination.astro";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
posts: Post[];
|
posts: Post[];
|
||||||
@@ -14,7 +15,10 @@ const { posts, page, totalPage } = Astro.props;
|
|||||||
|
|
||||||
<div class="page-content">
|
<div class="page-content">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<PostList posts={posts} page={page} totalPage={totalPage} />
|
<div class="post-container">
|
||||||
|
<PostList posts={posts}/>
|
||||||
|
<Pagination page={page} totalPage={totalPage}/>
|
||||||
|
</div>
|
||||||
<IndexSidebar/>
|
<IndexSidebar/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -26,6 +30,12 @@ const { posts, page, totalPage } = Astro.props;
|
|||||||
gap: 28px;
|
gap: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.post-container{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 860px) {
|
@media (max-width: 860px) {
|
||||||
.container {
|
.container {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -1,26 +1,19 @@
|
|||||||
---
|
---
|
||||||
|
import type {Post} from '@/types';
|
||||||
import Eye from "@/assets/icon/eye.png?url";
|
import Eye from "@/assets/icon/eye.png?url";
|
||||||
import Folder from "@/assets/icon/folder.png?url";
|
import Folder from "@/assets/icon/folder.png?url";
|
||||||
import Calendar from "@/assets/icon/calendar.png?url";
|
import Calendar from "@/assets/icon/calendar.png?url";
|
||||||
import type {Post} from "@/types/post";
|
|
||||||
import {formatDatetime} from "@/lib/format.ts";
|
|
||||||
import LazyImage from "@/components/LazyImage.astro";
|
import LazyImage from "@/components/LazyImage.astro";
|
||||||
|
import {formatDatetime} from "@/lib/format.ts";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
posts: Post[]
|
post: Post
|
||||||
page: number
|
|
||||||
totalPage: number
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const {posts, page, totalPage} = Astro.props
|
const {post} = Astro.props;
|
||||||
|
const published_at = formatDatetime(post.published_at, 'YYYY-MM-DD')
|
||||||
posts.map((post) => {
|
|
||||||
post.published_at = formatDatetime(post.published_at, 'YYYY-MM-DD')
|
|
||||||
})
|
|
||||||
---
|
---
|
||||||
<section class="section">
|
|
||||||
<div class="post-list">
|
|
||||||
{posts.map(post => (
|
|
||||||
<a href={`/post/${post.slug}`}>
|
<a href={`/post/${post.slug}`}>
|
||||||
<article class="post-card">
|
<article class="post-card">
|
||||||
<div class="post-cover">
|
<div class="post-cover">
|
||||||
@@ -30,7 +23,7 @@ posts.map((post) => {
|
|||||||
<div class="post-meta">
|
<div class="post-meta">
|
||||||
<span>
|
<span>
|
||||||
<img src={Calendar} alt="Calendar"/>
|
<img src={Calendar} alt="Calendar"/>
|
||||||
{post.published_at}
|
{published_at}
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<img src={Folder} alt="Folder"/>
|
<img src={Folder} alt="Folder"/>
|
||||||
@@ -38,7 +31,7 @@ posts.map((post) => {
|
|||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<img src={Eye} alt="Eye"/>
|
<img src={Eye} alt="Eye"/>
|
||||||
{post.view}
|
{post.view_count}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="post-title">
|
<h3 class="post-title">
|
||||||
@@ -48,41 +41,14 @@ posts.map((post) => {
|
|||||||
{post.summary}
|
{post.summary}
|
||||||
</div>
|
</div>
|
||||||
<div class="tags">
|
<div class="tags">
|
||||||
{post.tags.map(tag => <div class="tag">{tag.name}</div>)}
|
{post.tags.map(tag =>
|
||||||
|
<div class="tag">{tag.name}</div>)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</a>
|
</a>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--分页器-->
|
|
||||||
{totalPage > 1 &&
|
|
||||||
<nav class="pagination" aria-label="分页">
|
|
||||||
{page > 1 ? <a href={`/page/${page - 1}`} class="link">« 上一页</a> : <span class="link disabled">« 上一页</span>}
|
|
||||||
{Array.from({length: totalPage}).map((_, index) => {
|
|
||||||
if (page === index + 1) {
|
|
||||||
return <span class="link current">{index + 1}</span>
|
|
||||||
}
|
|
||||||
return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
|
|
||||||
})}
|
|
||||||
{page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页 »</a> :
|
|
||||||
<span class="link disabled">下一页 »</span>}
|
|
||||||
</nav>}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.section {
|
|
||||||
flex: 1;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card {
|
.post-card {
|
||||||
background: var(--card-bg);
|
background: var(--card-bg);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
@@ -175,44 +141,6 @@ posts.map((post) => {
|
|||||||
background: var(--tag-hover-bg);
|
background: var(--tag-hover-bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ========== 分页 ========== */
|
|
||||||
.pagination {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
min-width: 38px;
|
|
||||||
height: 38px;
|
|
||||||
padding: 0 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: var(--card-bg);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link:hover,
|
|
||||||
.link.current {
|
|
||||||
background: var(--primary);
|
|
||||||
border-color:var(--primary);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link.disabled {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
background: var(--card-bg);
|
|
||||||
border-color: var(--border);
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 860px) {
|
@media (max-width: 860px) {
|
||||||
.post-list {
|
.post-list {
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
@@ -263,5 +191,4 @@ posts.map((post) => {
|
|||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
31
src/components/Post/List.astro
Normal file
31
src/components/Post/List.astro
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
---
|
||||||
|
import type {Post} from "@/types/post";
|
||||||
|
import PostItem from '@/components/Post/Item.astro'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
posts: Post[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const {posts} = Astro.props
|
||||||
|
---
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="post-list">
|
||||||
|
{posts.map(post => (
|
||||||
|
<PostItem post={post}/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.section {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
60
src/components/Post/Pagination.astro
Normal file
60
src/components/Post/Pagination.astro
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
---
|
||||||
|
interface Props {
|
||||||
|
page: number
|
||||||
|
totalPage: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const {page, totalPage} = Astro.props
|
||||||
|
---
|
||||||
|
|
||||||
|
<!--分页器-->
|
||||||
|
{totalPage > 1 &&
|
||||||
|
<nav class="pagination" aria-label="分页">
|
||||||
|
{page > 1 ? <a href={`/page/${page - 1}`} class="link">« 上一页</a> : <span class="link disabled">« 上一页</span>}
|
||||||
|
{Array.from({length: totalPage}).map((_, index) => {
|
||||||
|
if (page === index + 1) {
|
||||||
|
return <span class="link current">{index + 1}</span>
|
||||||
|
}
|
||||||
|
return <a class="link" href={`/page/${index + 1}`}>{index + 1}</a>
|
||||||
|
})}
|
||||||
|
{page < totalPage ? <a href={`/page/${page + 1}`} class="link">下一页 »</a> :
|
||||||
|
<span class="link disabled">下一页 »</span>}
|
||||||
|
</nav>}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* ========== 分页 ========== */
|
||||||
|
.pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 38px;
|
||||||
|
height: 38px;
|
||||||
|
padding: 0 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--card-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link:hover,
|
||||||
|
.link.current {
|
||||||
|
background: var(--primary);
|
||||||
|
border-color: var(--primary);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link.disabled {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
background: var(--card-bg);
|
||||||
|
border-color: var(--border);
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,505 +0,0 @@
|
|||||||
---
|
|
||||||
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";
|
|
||||||
import LazyImage from "@/components/LazyImage.astro";
|
|
||||||
|
|
||||||
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 ? (
|
|
||||||
<LazyImage src={post.cover} alt={post.title} />
|
|
||||||
) : (
|
|
||||||
<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: 100px;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 40px;
|
|
||||||
color: #fff;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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: 62px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-summary {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -69,7 +69,7 @@ const published_at = formatDatetime(data.published_at, "YYYY 年 M 月 D 日");
|
|||||||
d="M509.618 415.795c-42.695 0-77.253 38.372-77.253 85.738 0 47.352 34.558 86.22 77.253 86.22 42.667 0 76.716-38.867 76.716-86.22 0-47.352-34.049-85.738-76.716-85.738z m1.9-177.9c-211.548 0-383.265 159.859-383.265 274.587 0 114.727 171.717 273.624 383.266 273.624 212.484 0 384.227-162.522 384.227-273.624 0-111.088-171.743-274.587-384.227-274.587z m-1.446 452.006c-89.7 0-162.134-81.71-162.134-181.903 0-101.157 72.435-182.397 162.134-182.397 90.183 0 163.1 81.241 163.1 182.397 0 100.206-72.917 181.903-163.1 181.903z"
|
d="M509.618 415.795c-42.695 0-77.253 38.372-77.253 85.738 0 47.352 34.558 86.22 77.253 86.22 42.667 0 76.716-38.867 76.716-86.22 0-47.352-34.049-85.738-76.716-85.738z m1.9-177.9c-211.548 0-383.265 159.859-383.265 274.587 0 114.727 171.717 273.624 383.266 273.624 212.484 0 384.227-162.522 384.227-273.624 0-111.088-171.743-274.587-384.227-274.587z m-1.446 452.006c-89.7 0-162.134-81.71-162.134-181.903 0-101.157 72.435-182.397 162.134-182.397 90.183 0 163.1 81.241 163.1 182.397 0 100.206-72.917 181.903-163.1 181.903z"
|
||||||
p-id="5123"></path>
|
p-id="5123"></path>
|
||||||
</svg>
|
</svg>
|
||||||
{data.view}
|
{data.view_count}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
202
src/pages/search.astro
Normal file
202
src/pages/search.astro
Normal file
@@ -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>
|
||||||
@@ -3,6 +3,7 @@ export type Tag = {
|
|||||||
code: string
|
code: string
|
||||||
name: string
|
name: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export type Post = {
|
export type Post = {
|
||||||
title: string;
|
title: string;
|
||||||
summary: string;
|
summary: string;
|
||||||
@@ -12,7 +13,7 @@ export type Post = {
|
|||||||
category_code: string;
|
category_code: string;
|
||||||
category_id?: number;
|
category_id?: number;
|
||||||
published_at: string;
|
published_at: string;
|
||||||
view: number;
|
view_count: number;
|
||||||
content: string;
|
content: string;
|
||||||
tags: Tag[]
|
tags: Tag[]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user