feat(ui): 全站画布氛围层、侧栏 sticky 对齐与长页回顶
用顶栏/主栏高度令牌消除 sticky 首滚空走,面包屑叠到中栏上方,公开页增加回顶浮钮。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -30,6 +30,7 @@ import CommentSection from "@/components/CommentSection";
|
||||
import PostActions from "@/components/PostActions";
|
||||
import LikeButton from "@/components/LikeButton";
|
||||
import PostToc from "@/components/PostToc";
|
||||
import { SiteDocBreadcrumb } from "@/components/site-doc";
|
||||
import MobilePostBar from "@/components/MobilePostBar";
|
||||
import Avatar from "@/components/Avatar";
|
||||
import RoleBadge from "@/components/RoleBadge";
|
||||
@@ -557,7 +558,7 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
|
||||
return (
|
||||
<>
|
||||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||
{/* 移动端浮动操作条:长文阅读中途可点赞 / 跳评论 / 回顶部 */}
|
||||
{/* 移动端浮动操作条:长文读到中途可点赞 / 跳评论框 */}
|
||||
<MobilePostBar
|
||||
postId={id}
|
||||
liked={post.liked}
|
||||
@@ -571,7 +572,7 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
|
||||
{/* sticky 必须直接挂在 grid 子项上:aside 作为 grid item,其可粘行程
|
||||
等于行高(正文高度);内层包裹会被 items-start 缩成内容高而失去行程 */}
|
||||
<aside
|
||||
className="hidden lg:flex w-56 xl:w-60 shrink-0 sticky top-24 flex-col gap-4 max-h-[calc(100vh_-_7rem)] overflow-hidden"
|
||||
className="hidden lg:flex w-56 xl:w-60 shrink-0 sticky top-[var(--rail-top)] flex-col gap-4 max-h-[var(--rail-max-h)] overflow-hidden"
|
||||
aria-label="帖子导航"
|
||||
>
|
||||
<BoardCard board={post.board} />
|
||||
@@ -580,16 +581,14 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
|
||||
</aside>
|
||||
|
||||
{/* 中栏:正文主体 */}
|
||||
<div className="min-w-0">
|
||||
<div className="min-w-0 relative">
|
||||
<SiteDocBreadcrumb
|
||||
items={[
|
||||
{ href: "/", label: "首页" },
|
||||
{ href: `/?board=${post.board.id}`, label: post.board.name },
|
||||
]}
|
||||
/>
|
||||
<article className="w-full">
|
||||
<nav className="meta mb-5 flex items-center gap-1.5 flex-wrap text-[13px]">
|
||||
<Link href="/" className="hover:text-[var(--accent)] transition-colors">首页</Link>
|
||||
<ChevronRight size={13} />
|
||||
<Link href={`/?board=${post.board.id}`} className="hover:text-[var(--accent)] transition-colors">
|
||||
{post.board.name}
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<div className="panel p-6 sm:p-8">
|
||||
<header className="mb-7">
|
||||
<div className="flex items-center gap-2 mb-4 flex-wrap">
|
||||
@@ -810,7 +809,7 @@ export default async function PostDetailPage({ params, searchParams }: PageProps
|
||||
|
||||
{/* 右栏:目录 / 同板块热议(阅读数据已并入标题下元信息条) */}
|
||||
<aside
|
||||
className="hidden lg:flex w-[280px] xl:w-[300px] shrink-0 sticky top-24 flex-col gap-4 max-h-[calc(100vh_-_7rem)] overflow-hidden"
|
||||
className="hidden lg:flex w-[280px] xl:w-[300px] shrink-0 sticky top-[var(--rail-top)] flex-col gap-4 max-h-[var(--rail-max-h)] overflow-hidden"
|
||||
aria-label="阅读辅助"
|
||||
>
|
||||
{toc.length > 0 && <PostToc items={toc} />}
|
||||
|
||||
Reference in New Issue
Block a user