refactor: 重写filter页面 更新为search
This commit is contained in:
@@ -23,7 +23,7 @@ const { data: tags } =
|
||||
categories.map((category) => (
|
||||
<li>
|
||||
<a
|
||||
href={`/filter?type=category&code=${encodeURIComponent(category.code)}`}
|
||||
href={`/search?c=${encodeURIComponent(category.code)}`}
|
||||
title={`${category.name} · ${category.post_count} 篇`}
|
||||
>
|
||||
{category.name}
|
||||
@@ -45,7 +45,7 @@ const { data: tags } =
|
||||
tags.map((tag) => (
|
||||
<a
|
||||
class="tag"
|
||||
href={`/filter?type=tag&code=${encodeURIComponent(tag.code)}`}
|
||||
href={`/search?t=${encodeURIComponent(tag.code)}`}
|
||||
>
|
||||
{tag.name}
|
||||
</a>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
import type { Post } from "@/types/post";
|
||||
import type {Post} from "@/types/post";
|
||||
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 {
|
||||
posts: Post[];
|
||||
@@ -9,13 +10,16 @@ interface Props {
|
||||
totalPage: number;
|
||||
}
|
||||
|
||||
const { posts, page, totalPage } = Astro.props;
|
||||
const {posts, page, totalPage} = Astro.props;
|
||||
---
|
||||
|
||||
<div class="page-content">
|
||||
<div class="container">
|
||||
<PostList posts={posts} page={page} totalPage={totalPage} />
|
||||
<IndexSidebar />
|
||||
<div class="post-container">
|
||||
<PostList posts={posts}/>
|
||||
<Pagination page={page} totalPage={totalPage}/>
|
||||
</div>
|
||||
<IndexSidebar/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,6 +30,12 @@ const { posts, page, totalPage } = Astro.props;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.post-container{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
|
||||
@@ -1,88 +1,54 @@
|
||||
---
|
||||
import type {Post} from '@/types';
|
||||
import Eye from "@/assets/icon/eye.png?url";
|
||||
import Folder from "@/assets/icon/folder.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 {formatDatetime} from "@/lib/format.ts";
|
||||
|
||||
interface Props {
|
||||
posts: Post[]
|
||||
page: number
|
||||
totalPage: number
|
||||
post: Post
|
||||
}
|
||||
|
||||
const {posts, page, totalPage} = Astro.props
|
||||
|
||||
posts.map((post) => {
|
||||
post.published_at = formatDatetime(post.published_at, 'YYYY-MM-DD')
|
||||
})
|
||||
const {post} = Astro.props;
|
||||
const published_at = formatDatetime(post.published_at, 'YYYY-MM-DD')
|
||||
---
|
||||
<section class="section">
|
||||
<div class="post-list">
|
||||
{posts.map(post => (
|
||||
<a href={`/post/${post.slug}`}>
|
||||
<article class="post-card">
|
||||
<div class="post-cover">
|
||||
<LazyImage src={post.cover} alt={post.title} />
|
||||
</div>
|
||||
<div class="post-body">
|
||||
<div class="post-meta">
|
||||
|
||||
<a href={`/post/${post.slug}`}>
|
||||
<article class="post-card">
|
||||
<div class="post-cover">
|
||||
<LazyImage src={post.cover} alt={post.title}/>
|
||||
</div>
|
||||
<div class="post-body">
|
||||
<div class="post-meta">
|
||||
<span>
|
||||
<img src={Calendar} alt="Calendar"/>
|
||||
{post.published_at}
|
||||
{published_at}
|
||||
</span>
|
||||
<span>
|
||||
<span>
|
||||
<img src={Folder} alt="Folder"/>
|
||||
{post.category_name}
|
||||
{post.category_name}
|
||||
</span>
|
||||
<span>
|
||||
<span>
|
||||
<img src={Eye} alt="Eye"/>
|
||||
{post.view}
|
||||
{post.view_count}
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="post-title">
|
||||
{post.title}
|
||||
</h3>
|
||||
<div class="post-summary">
|
||||
{post.summary}
|
||||
</div>
|
||||
<div class="tags">
|
||||
{post.tags.map(tag => <div class="tag">{tag.name}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</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>
|
||||
</div>
|
||||
<h3 class="post-title">
|
||||
{post.title}
|
||||
</h3>
|
||||
<div class="post-summary">
|
||||
{post.summary}
|
||||
</div>
|
||||
<div class="tags">
|
||||
{post.tags.map(tag =>
|
||||
<div class="tag">{tag.name}</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.section {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.post-card {
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
@@ -175,46 +141,8 @@ posts.map((post) => {
|
||||
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) {
|
||||
.post-list{
|
||||
.post-list {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@@ -232,7 +160,7 @@ posts.map((post) => {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.post-meta{
|
||||
.post-meta {
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -248,7 +176,7 @@ posts.map((post) => {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.post-meta{
|
||||
.post-meta {
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
@@ -258,10 +186,9 @@ posts.map((post) => {
|
||||
height: 62px;
|
||||
}
|
||||
|
||||
.post-summary{
|
||||
.post-summary {
|
||||
font-size: 12px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
</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"
|
||||
p-id="5123"></path>
|
||||
</svg>
|
||||
{data.view}
|
||||
{data.view_count}
|
||||
</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
|
||||
name: string
|
||||
}
|
||||
|
||||
export type Post = {
|
||||
title: string;
|
||||
summary: string;
|
||||
@@ -12,7 +13,7 @@ export type Post = {
|
||||
category_code: string;
|
||||
category_id?: number;
|
||||
published_at: string;
|
||||
view: number;
|
||||
view_count: number;
|
||||
content: string;
|
||||
tags: Tag[]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user