feat: 顶栏显示当前页名,去掉独立标题行;Logo回首页/页名回顶部
- 新增 PageTitleContext:页面上报标题,顶栏 brand 位显示当前页名(全部资料/ 热门资料/最新/官方/分类名/搜索/我的收藏),未上报则回退品牌名 - AssetStreamPage、Favorites 上报标题;移除资料流内单独的标题行,省出空间 - 顶栏拆分点击:Logo→首页(首页则回顶部);页名文字→回到当前页顶部 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
|
||||
import { Link, useLocation, useNavigate, useOutlet } from "react-router-dom";
|
||||
import { pageTransition } from "../motion";
|
||||
import { ArkLogoMark } from "../components/ArkLogoMark";
|
||||
import { usePageTitle } from "../components/PageTitleContext";
|
||||
import { BackToTop } from "../components/BackToTop";
|
||||
import { DocumentMeta } from "../components/DocumentMeta";
|
||||
import { SearchPanel } from "../components/SearchPanel";
|
||||
@@ -289,6 +290,8 @@ export function PublicLayout() {
|
||||
navIsActive(pathname, search, hash, which);
|
||||
const isHome = pathname === "/";
|
||||
const footerInContentFlow = pathname === "/browse";
|
||||
// Current page name shown in the header brand slot (falls back to the brand).
|
||||
const pageTitle = usePageTitle();
|
||||
const popularHref = "/browse?sort=popular";
|
||||
|
||||
const goSearch = () => {
|
||||
@@ -365,20 +368,29 @@ export function PublicLayout() {
|
||||
<DocumentMeta />
|
||||
<header className="sticky top-0 z-40 bg-[#08070c] backdrop-blur-md md:border-b md:border-ark-line md:bg-ark-nav/98">
|
||||
<div className="flex h-[64px] items-center justify-between bg-[#08070c] px-4 py-3 md:hidden">
|
||||
<Link
|
||||
to="/"
|
||||
className="flex h-8 shrink-0 items-center gap-2 rounded-sm text-[20px] font-black leading-5 tracking-tight text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
|
||||
aria-label={t("brand")}
|
||||
onClick={(e) => {
|
||||
if (isHome) {
|
||||
e.preventDefault();
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ArkLogoMark className="h-8 w-8 shrink-0" />
|
||||
<span className="truncate text-ark-gold">{t("brand")}</span>
|
||||
</Link>
|
||||
<div className="flex h-8 min-w-0 shrink items-center gap-2 text-[20px] font-black leading-5 tracking-tight text-ark-gold">
|
||||
{/* Logo → home; page-name text → scroll to top of the current page. */}
|
||||
<Link
|
||||
to="/"
|
||||
aria-label={t("brand")}
|
||||
onClick={(e) => {
|
||||
if (isHome) {
|
||||
e.preventDefault();
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
}}
|
||||
className="shrink-0 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
|
||||
>
|
||||
<ArkLogoMark className="h-8 w-8 shrink-0" />
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
||||
className="truncate rounded-sm text-left text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-[#08070c]"
|
||||
>
|
||||
{pageTitle || t("brand")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex h-[40px] w-[136px] shrink-0 items-center gap-[8px]">
|
||||
<button
|
||||
@@ -441,21 +453,29 @@ export function PublicLayout() {
|
||||
<div className="mx-auto hidden max-w-[1280px] px-4 py-[15px] min-[440px]:px-5 sm:px-6 md:block md:px-9 xl:px-0">
|
||||
{/* Single row (md+): logo | scrollable nav (左對齊,可橫向滑動) | 搜尋 + 語言 */}
|
||||
<div className="flex h-10 items-center gap-2 min-[1200px]:gap-0 lg:gap-4">
|
||||
<Link
|
||||
to="/"
|
||||
className="flex min-w-0 shrink-0 items-center gap-2.5 rounded-sm text-xl font-bold tracking-wide text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||||
onClick={(e) => {
|
||||
if (isHome) {
|
||||
e.preventDefault();
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ArkLogoMark className="h-10 w-10 shrink-0" />
|
||||
<span className="max-w-[8rem] truncate text-ark-gold sm:inline">
|
||||
{t("brand")}
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex min-w-0 shrink items-center gap-2.5 text-xl font-bold tracking-wide text-ark-gold">
|
||||
{/* Logo → home; page-name text → scroll to top of the current page. */}
|
||||
<Link
|
||||
to="/"
|
||||
aria-label={t("brand")}
|
||||
onClick={(e) => {
|
||||
if (isHome) {
|
||||
e.preventDefault();
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}
|
||||
}}
|
||||
className="shrink-0 rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
|
||||
>
|
||||
<ArkLogoMark className="h-10 w-10 shrink-0" />
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
||||
className="max-w-[10rem] truncate rounded-sm text-left text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg sm:inline"
|
||||
>
|
||||
{pageTitle || t("brand")}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-1 min-[1200px]:flex lg:gap-5"
|
||||
|
||||
Reference in New Issue
Block a user