75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import { Users, FileText, LayoutGrid } from 'lucide-react';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import type { Board, ForumStats } from '../api/types';
|
||
|
||
interface Props {
|
||
boardId: number;
|
||
keyword: string;
|
||
tag?: string;
|
||
boards: Board[];
|
||
stats: ForumStats | null;
|
||
postTotal: number;
|
||
/** 搜索页用 h1；首页/板块页中间栏不再展示标题 */
|
||
titleAs?: 'h1' | 'h2';
|
||
}
|
||
|
||
export default function FeedHeader({ boardId, keyword, tag = '', boards, stats, postTotal, titleAs = 'h1' }: Props) {
|
||
const nav = useNavigate();
|
||
const board = boards.find(b => b.id === boardId);
|
||
|
||
const filtered = !!(keyword || tag);
|
||
const inBoard = !filtered && boardId > 0 && !!board;
|
||
/** 侧栏已有「全部帖子 / 板块名」，中间栏不再重复；仅搜索/标签保留标题 */
|
||
const title = tag ? `标签：${tag}` : (keyword ? `搜索：${keyword}` : '');
|
||
const TitleTag = titleAs;
|
||
|
||
return (
|
||
<div className={`feed-head${filtered ? ' feed-head--solo' : ' feed-head--stats-only'}`}>
|
||
<div className="feed-head__title">
|
||
{title ? <TitleTag>{title}</TitleTag> : null}
|
||
{!filtered && inBoard && (
|
||
<div className="feed-head__stats">
|
||
<span className="feed-stat-chip">
|
||
<FileText aria-hidden />
|
||
本板块 <strong>{postTotal}</strong> 帖
|
||
</span>
|
||
{stats && (
|
||
<span className="feed-stat-chip feed-stat-chip--muted" title="全站统计">
|
||
全站 {stats.posts} 帖 · {stats.users} 会员
|
||
</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
{!filtered && !inBoard && stats && (
|
||
<div className="feed-head__stats">
|
||
<span className="feed-stat-chip">
|
||
<Users aria-hidden />
|
||
会员 <strong>{stats.users}</strong>
|
||
</span>
|
||
<span className="feed-stat-chip">
|
||
<FileText aria-hidden />
|
||
帖子 <strong>{stats.posts}</strong>
|
||
</span>
|
||
<span className="feed-stat-chip">
|
||
<LayoutGrid aria-hidden />
|
||
板块 <strong>{stats.boards}</strong>
|
||
</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
{filtered && (
|
||
<button
|
||
type="button"
|
||
className="feed-head__clear"
|
||
onClick={() => nav('/')}
|
||
>
|
||
{tag ? '清除标签' : '清除搜索'}
|
||
</button>
|
||
)}
|
||
{filtered && (
|
||
<span className="feed-toolbar__count">共 {postTotal} 条</span>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|