feat: 资料流标题+筛选吸顶,滚动时保持可见
把「全部资料」标题与筛选标签合并为一个吸顶块,钉在全局顶栏下方 (top-[64px]/md:top-[70px]),向下滚动时标题和筛选都不再消失,仅内容流滚动。 移除 FilterChips 原先吸到 top-0(藏到顶栏背后)的行为。 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -6,15 +6,17 @@ 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 }: MessageStreamProps) {
|
||||
export function MessageStream({ scope, title }: MessageStreamProps) {
|
||||
const { t, lang } = useI18n();
|
||||
const [sp, setSp] = useSearchParams();
|
||||
const { hash } = useLocation();
|
||||
@@ -114,7 +116,16 @@ export function MessageStream({ scope }: MessageStreamProps) {
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-full md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
|
||||
<FilterChips type={type} onTypeChange={(v) => updateParam("type", v)} />
|
||||
{/* Title + filters stay pinned below the global header so users always
|
||||
see which page they're on and 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>
|
||||
|
||||
<div className="flex flex-col gap-3 px-4 pt-4 md:px-0 md:pt-2">
|
||||
{isInitialLoad ? (
|
||||
|
||||
Reference in New Issue
Block a user