feat(ui): 全站画布氛围层、侧栏 sticky 对齐与长页回顶

用顶栏/主栏高度令牌消除 sticky 首滚空走,面包屑叠到中栏上方,公开页增加回顶浮钮。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-09-18 00:28:25 +08:00
parent 0b60c4299b
commit 1535577eac
21 changed files with 286 additions and 111 deletions

View File

@@ -3,24 +3,29 @@ import { ChevronRight } from "lucide-react";
export type Crumb = { href?: string; label: string };
/** 公文页面包屑 */
/** 位置指引:桌面叠在中栏卡片上方的内边距里,不拉低卡片、不对齐到左栏 */
export default function SiteDocBreadcrumb({ items }: { items: Crumb[] }) {
return (
<nav className="meta mb-5 flex items-center gap-1.5 flex-wrap text-[13px]" aria-label="面包屑">
<nav
className="meta mb-2 flex items-center gap-1 flex-wrap text-[12.5px] leading-none lg:absolute lg:bottom-full lg:left-0 lg:right-0 lg:mb-0 lg:pb-2 lg:pl-1"
aria-label="面包屑"
>
{items.map((item, i) => {
const last = i === items.length - 1;
const cls = last ? "truncate" : "shrink-0";
return (
<span key={`${item.label}-${i}`} className="inline-flex items-center gap-1.5 min-w-0">
{i > 0 ? <ChevronRight size={13} className="shrink-0" /> : null}
{item.href && !last ? (
<Link href={item.href} className="hover:text-[var(--accent)] transition-colors shrink-0">
<span key={`${item.label}-${i}`} className="inline-flex items-center gap-1 min-w-0">
{i > 0 ? <ChevronRight size={12} className="shrink-0 opacity-70" aria-hidden /> : null}
{item.href ? (
<Link
href={item.href}
className={`hover:text-[var(--accent)] transition-colors ${cls}`}
style={last ? { color: "var(--accent)" } : undefined}
>
{item.label}
</Link>
) : (
<span
className={last ? "truncate" : "shrink-0"}
style={last ? { color: "var(--accent)" } : undefined}
>
<span className={cls} style={last ? { color: "var(--accent)" } : undefined}>
{item.label}
</span>
)}