feat: 顶栏显示当前页名,去掉独立标题行;Logo回首页/页名回顶部

- 新增 PageTitleContext:页面上报标题,顶栏 brand 位显示当前页名(全部资料/
  热门资料/最新/官方/分类名/搜索/我的收藏),未上报则回退品牌名
- AssetStreamPage、Favorites 上报标题;移除资料流内单独的标题行,省出空间
- 顶栏拆分点击:Logo→首页(首页则回顶部);页名文字→回到当前页顶部

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-30 02:37:30 +08:00
parent ed6e0023b8
commit 4a20d80f68
6 changed files with 140 additions and 70 deletions

View File

@@ -1,5 +1,6 @@
import type { PostScope } from "../types/post";
import { MessageStream } from "./messageStream/MessageStream";
import { useSetPageTitle } from "./PageTitleContext";
type AssetStreamPageProps = {
title: string;
@@ -7,9 +8,12 @@ type AssetStreamPageProps = {
};
export function AssetStreamPage({ title, scope }: AssetStreamPageProps) {
// Show the page name in the global header instead of a separate title row,
// saving vertical space.
useSetPageTitle(title);
return (
<section>
<MessageStream scope={scope} title={title} />
<MessageStream scope={scope} />
</section>
);
}

View File

@@ -0,0 +1,41 @@
import {
createContext,
useContext,
useEffect,
useState,
type PropsWithChildren,
} from "react";
type PageTitleCtx = {
title: string | null;
setTitle: (title: string | null) => void;
};
const PageTitleContext = createContext<PageTitleCtx | null>(null);
/**
* Lets a page publish its title to the global header so the header can show the
* current page name (e.g. "全部资料" / "热门资料") in place of the brand, avoiding
* a separate on-page title row. Pages that don't set one fall back to the brand.
*/
export function PageTitleProvider({ children }: PropsWithChildren) {
const [title, setTitle] = useState<string | null>(null);
return (
<PageTitleContext.Provider value={{ title, setTitle }}>
{children}
</PageTitleContext.Provider>
);
}
export function usePageTitle(): string | null {
return useContext(PageTitleContext)?.title ?? null;
}
/** Publish the current page's title; clears it again when the page unmounts. */
export function useSetPageTitle(title: string | null): void {
const setTitle = useContext(PageTitleContext)?.setTitle;
useEffect(() => {
setTitle?.(title);
return () => setTitle?.(null);
}, [setTitle, title]);
}

View File

@@ -6,17 +6,15 @@ import type { PostScope } from "../../types/post";
import { Reveal } from "../../motion";
import { Skeleton } from "../Skeleton";
import { FilterChips } from "./FilterChips";
import { SectionHeader } from "../SectionHeader";
import { MessageBubble } from "./MessageBubble";
import { useGroupedByDay } from "./hooks/useGroupedByDay";
import { usePostStream } from "./hooks/usePostStream";
export type MessageStreamProps = {
scope: PostScope;
title?: string;
};
export function MessageStream({ scope, title }: MessageStreamProps) {
export function MessageStream({ scope }: MessageStreamProps) {
const { t, lang } = useI18n();
const [sp, setSp] = useSearchParams();
const { hash } = useLocation();
@@ -116,14 +114,9 @@ export function MessageStream({ scope, title }: MessageStreamProps) {
return (
<div className="mx-auto max-w-full md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
{/* Title + filters stay pinned below the global header so users always
see which page they're on and can switch filters while scrolling. */}
{/* Filters stay pinned below the global header (which shows the page
name) so users can switch filters while scrolling. */}
<div className="sticky top-[64px] z-30 bg-ark-bg md:top-[70px]">
{title ? (
<div className="px-4 pb-1 pt-2 md:px-0">
<SectionHeader title={title} />
</div>
) : null}
<FilterChips type={type} onTypeChange={(v) => updateParam("type", v)} />
</div>