feat: 顶栏显示当前页名,去掉独立标题行;Logo回首页/页名回顶部
- 新增 PageTitleContext:页面上报标题,顶栏 brand 位显示当前页名(全部资料/ 热门资料/最新/官方/分类名/搜索/我的收藏),未上报则回退品牌名 - AssetStreamPage、Favorites 上报标题;移除资料流内单独的标题行,省出空间 - 顶栏拆分点击:Logo→首页(首页则回顶部);页名文字→回到当前页顶部 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
41
src/components/PageTitleContext.tsx
Normal file
41
src/components/PageTitleContext.tsx
Normal 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]);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user