feat: 顶栏显示当前页名,去掉独立标题行;Logo回首页/页名回顶部

- 新增 PageTitleContext:页面上报标题,顶栏 brand 位显示当前页名(全部资料/
  热门资料/最新/官方/分类名/搜索/我的收藏),未上报则回退品牌名
- AssetStreamPage、Favorites 上报标题;移除资料流内单独的标题行,省出空间
- 顶栏拆分点击:Logo→首页(首页则回顶部);页名文字→回到当前页顶部

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-30 02:37:30 +08:00
parent ed6e0023b8
commit 4a20d80f68
6 changed files with 140 additions and 70 deletions

View File

@@ -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"