's'
This commit is contained in:
eric
@@ -1,14 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import NextLink from "next/link";
|
||||
import { Link, useLocale, usePathname, useRouter, useTranslation } from "@/app/digital/i18n/navigation";
|
||||
import { getStoredUserEmail } from "@/app/digital/lib/pocketbase";
|
||||
import { useCrossSiteUrls } from "@/app/digital/lib/useCrossSiteUrls";
|
||||
import AuthModal from "./AuthModal";
|
||||
import DigitalThemeIcon from "./DigitalThemeIcon";
|
||||
import ThemeToggle from "./ThemeToggle";
|
||||
import UserAvatar from "./UserAvatar";
|
||||
|
||||
type NavItem =
|
||||
| { labelKey: "roadmap" | "tools" | "resources"; href: string; hash: string }
|
||||
| { labelKey: "community"; href: string; external: true };
|
||||
|
||||
export default function Header() {
|
||||
const { t } = useTranslation("common");
|
||||
const { t: tNav } = useTranslation("nav");
|
||||
@@ -16,18 +20,16 @@ export default function Header() {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [scrolled, setScrolled] = useState(() =>
|
||||
typeof window !== "undefined" ? window.scrollY > 8 : false
|
||||
);
|
||||
const [authOpen, setAuthOpen] = useState(false);
|
||||
const [userEmail, setUserEmail] = useState<string | null>(null);
|
||||
const [vip, setVip] = useState(false);
|
||||
const { vipUrl } = useCrossSiteUrls();
|
||||
const navLinks = [
|
||||
{ labelKey: "roadmap" as const, href: "/#roadmap" },
|
||||
{ labelKey: "tools" as const, href: "/#tools" },
|
||||
{ labelKey: "community" as const, href: vipUrl, external: true },
|
||||
{ labelKey: "resources" as const, href: "/#resources" },
|
||||
|
||||
const navLinks: NavItem[] = [
|
||||
{ labelKey: "roadmap", href: "/#roadmap", hash: "roadmap" },
|
||||
{ labelKey: "tools", href: "/#tools", hash: "tools" },
|
||||
{ labelKey: "resources", href: "/#resources", hash: "resources" },
|
||||
{ labelKey: "community", href: vipUrl, external: true },
|
||||
];
|
||||
|
||||
const fetchAuthAndVip = useCallback(async () => {
|
||||
@@ -38,8 +40,10 @@ export default function Header() {
|
||||
const { pbSaveAuth } = await import("@/app/digital/lib/pocketbase");
|
||||
pbSaveAuth(meData.token, { id: meData.user.id, email: meData.user.email });
|
||||
setUserEmail(meData.user.email);
|
||||
// 用邮箱查 VIP，比 cookie userId 更可靠
|
||||
const vipRes = await fetch(`/api/digital/vip/check?email=${encodeURIComponent(meData.user.email)}`, { credentials: "include" });
|
||||
const vipRes = await fetch(
|
||||
`/api/digital/vip/check?email=${encodeURIComponent(meData.user.email)}`,
|
||||
{ credentials: "include" }
|
||||
);
|
||||
const vipData = await vipRes.json();
|
||||
setVip(vipData?.vip === true);
|
||||
} else {
|
||||
@@ -55,12 +59,6 @@ export default function Header() {
|
||||
fetchAuthAndVip();
|
||||
}, [fetchAuthAndVip]);
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => setScrolled(window.scrollY > 8);
|
||||
window.addEventListener("scroll", onScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", onScroll);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const onVipUpdated = () => fetchAuthAndVip();
|
||||
const onAuthSuccess = () => fetchAuthAndVip();
|
||||
@@ -75,157 +73,178 @@ export default function Header() {
|
||||
};
|
||||
}, [fetchAuthAndVip]);
|
||||
|
||||
const isGuideHome = pathname === "/";
|
||||
|
||||
const navClass = (active: boolean) =>
|
||||
`flex items-center gap-1.5 px-3 py-2 rounded-full text-sm font-medium transition-colors whitespace-nowrap shrink-0 ${
|
||||
active
|
||||
? "text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800"
|
||||
: "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
}`;
|
||||
|
||||
return (
|
||||
<header
|
||||
className={`dn-header fixed top-0 left-0 right-0 z-50 w-full max-w-[100vw] transition-all duration-300 ${
|
||||
scrolled
|
||||
? "dn-header-scrolled bg-white/80 backdrop-blur-lg shadow-sm dark:bg-slate-900/80 dark:shadow-slate-950/50"
|
||||
: "bg-transparent"
|
||||
}`}
|
||||
>
|
||||
<div className="dn-container mx-auto flex h-16 w-full min-w-0 max-w-7xl items-center justify-between gap-2 pl-[max(1rem,env(safe-area-inset-left))] pr-[max(1rem,env(safe-area-inset-right))] sm:pl-[max(1.5rem,env(safe-area-inset-left))] sm:pr-[max(1.5rem,env(safe-area-inset-right))] lg:pl-[max(2rem,env(safe-area-inset-left))] lg:pr-[max(2rem,env(safe-area-inset-right))]">
|
||||
<Link href="/" className="dn-brand flex min-w-0 shrink items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
|
||||
<DigitalThemeIcon name="globe" emoji="🌍" className="h-7 w-7 text-2xl" />
|
||||
<span className="hidden sm:inline">{t("siteName")}</span>
|
||||
<span className="sm:hidden">{t("siteNameShort")}</span>
|
||||
<header className="dn-header sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg border-b border-gray-100 dark:border-gray-800">
|
||||
<div className="max-w-[1600px] mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-2">
|
||||
<div className="flex min-w-0 items-center gap-2 sm:gap-3">
|
||||
<NextLink
|
||||
href={`/${locale}`}
|
||||
className="flex shrink-0 items-center gap-2 text-gray-900 transition-colors hover:text-[#ff4d4f] dark:text-gray-100"
|
||||
title={tNav("mainSite")}
|
||||
>
|
||||
<span className="text-2xl">🌏</span>
|
||||
<span className="hidden text-lg font-bold tracking-tight sm:inline">
|
||||
{t("parentSiteName")}
|
||||
</span>
|
||||
</NextLink>
|
||||
<span className="hidden text-gray-300 dark:text-gray-600 sm:inline" aria-hidden>
|
||||
/
|
||||
</span>
|
||||
<Link
|
||||
href="/"
|
||||
className={`truncate text-sm font-semibold sm:text-base ${
|
||||
isGuideHome
|
||||
? "text-[#ff4d4f]"
|
||||
: "text-gray-600 hover:text-[#ff4d4f] dark:text-gray-400"
|
||||
}`}
|
||||
>
|
||||
{t("siteName")}
|
||||
</Link>
|
||||
|
||||
<nav className="dn-nav hidden items-center gap-1 md:flex">
|
||||
{navLinks.map((link) => (
|
||||
"external" in link && link.external ? (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="dn-nav-link rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
|
||||
>
|
||||
{tNav(link.labelKey)}
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="dn-nav-link rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
|
||||
>
|
||||
{tNav(link.labelKey)}
|
||||
</Link>
|
||||
)
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-1 sm:gap-3">
|
||||
{userEmail ? (
|
||||
<UserAvatar email={userEmail} vip={vip} onLogout={() => { setUserEmail(null); setVip(false); router.replace("/"); }} />
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setAuthOpen(true)}
|
||||
className="dn-button-secondary hidden rounded-full border border-slate-200 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 sm:inline-flex"
|
||||
>
|
||||
{t("loginRegister")}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.replace(pathname, { locale: locale === "zh" ? "en" : "zh" })}
|
||||
className="dn-header-control inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800"
|
||||
aria-label={locale === "zh" ? "Switch to English" : "切换到中文"}
|
||||
title={locale === "zh" ? "EN" : "中文"}
|
||||
>
|
||||
{locale === "zh" ? "EN" : "中文"}
|
||||
</button>
|
||||
<ThemeToggle />
|
||||
<button
|
||||
onClick={() => setMobileOpen(!mobileOpen)}
|
||||
className="dn-header-control inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 md:hidden"
|
||||
aria-label={t("toggleMenu")}
|
||||
>
|
||||
{mobileOpen ? (
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
<Link
|
||||
href="/#roadmap"
|
||||
className="dn-button-primary hidden rounded-full bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-500 sm:inline-flex"
|
||||
>
|
||||
{t("explore")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-1 overflow-x-auto max-w-[calc(100vw-420px)] hide-scrollbar">
|
||||
{navLinks.map((link) =>
|
||||
"external" in link && link.external ? (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={navClass(false)}
|
||||
>
|
||||
{tNav(link.labelKey)}
|
||||
</a>
|
||||
) : (
|
||||
<Link key={link.href} href={link.href} className={navClass(false)}>
|
||||
{tNav(link.labelKey)}
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
</nav>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-1 sm:gap-2">
|
||||
{userEmail ? (
|
||||
<UserAvatar
|
||||
email={userEmail}
|
||||
vip={vip}
|
||||
onLogout={() => {
|
||||
setUserEmail(null);
|
||||
setVip(false);
|
||||
router.replace("/");
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAuthOpen(true)}
|
||||
className="hidden sm:inline-flex shrink-0 items-center justify-center rounded-full border border-gray-200 dark:border-gray-700 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
{t("loginRegister")}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.replace(pathname, { locale: locale === "zh" ? "en" : "zh" })}
|
||||
className="inline-flex shrink-0 items-center justify-center rounded-lg p-2 text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
||||
aria-label={locale === "zh" ? "Switch to English" : "切换到中文"}
|
||||
title={locale === "zh" ? "EN" : "中文"}
|
||||
>
|
||||
{locale === "zh" ? "EN" : "中文"}
|
||||
</button>
|
||||
<ThemeToggle />
|
||||
<Link
|
||||
href="/#roadmap"
|
||||
className="dn-button-primary hidden text-xs sm:text-sm text-white px-3 sm:px-4 py-2 rounded-full font-medium whitespace-nowrap sm:inline-flex"
|
||||
>
|
||||
{t("explore")}
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="md:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
|
||||
onClick={() => setMobileOpen(!mobileOpen)}
|
||||
aria-label={t("toggleMenu")}
|
||||
>
|
||||
{mobileOpen ? (
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
|
||||
<path d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mobileOpen && (
|
||||
<div className="dn-mobile-menu overflow-x-hidden border-t border-slate-100 bg-white/95 backdrop-blur-lg dark:border-slate-800 dark:bg-slate-900/95 md:hidden">
|
||||
<nav className="mx-auto w-full max-w-7xl space-y-1 px-4 py-3 pr-[max(1rem,env(safe-area-inset-right))]">
|
||||
{navLinks.map((link) => (
|
||||
"external" in link && link.external ? (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="dn-nav-link block rounded-lg px-3 py-2.5 text-base font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
|
||||
>
|
||||
{tNav(link.labelKey)}
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="dn-nav-link block rounded-lg px-3 py-2.5 text-base font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
|
||||
>
|
||||
{tNav(link.labelKey)}
|
||||
</Link>
|
||||
)
|
||||
))}
|
||||
<div className="md:hidden border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 px-4 py-3 space-y-1">
|
||||
<NextLink
|
||||
href={`/${locale}`}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
>
|
||||
<span className="text-lg">🌏</span>
|
||||
<span>{tNav("mainSite")}</span>
|
||||
</NextLink>
|
||||
{navLinks.map((link) =>
|
||||
"external" in link && link.external ? (
|
||||
<a
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
>
|
||||
{tNav(link.labelKey)}
|
||||
</a>
|
||||
) : (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="flex items-center gap-2 px-4 py-3 rounded-xl text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800"
|
||||
>
|
||||
{tNav(link.labelKey)}
|
||||
</Link>
|
||||
)
|
||||
)}
|
||||
{userEmail ? (
|
||||
<div className="pt-2 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between px-4 py-2.5 rounded-lg bg-gray-50 dark:bg-gray-800">
|
||||
<UserAvatar
|
||||
email={userEmail}
|
||||
vip={vip}
|
||||
onLogout={() => {
|
||||
setUserEmail(null);
|
||||
setVip(false);
|
||||
setMobileOpen(false);
|
||||
router.replace("/");
|
||||
}}
|
||||
/>
|
||||
<span className="truncate text-sm text-gray-600 dark:text-gray-400">{userEmail}</span>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setMobileOpen(false);
|
||||
router.replace(pathname, { locale: locale === "zh" ? "en" : "zh" });
|
||||
setAuthOpen(true);
|
||||
}}
|
||||
className="block w-full rounded-lg px-3 py-2.5 text-left text-base font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
|
||||
className="block w-full text-left px-4 py-3 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
|
||||
>
|
||||
{locale === "zh" ? "EN" : "中文"}
|
||||
{t("loginRegister")}
|
||||
</button>
|
||||
{userEmail ? (
|
||||
<div className="dn-mobile-account mt-2 flex items-center gap-3 rounded-lg border border-slate-100 bg-slate-50 px-4 py-2.5 dark:border-slate-700 dark:bg-slate-800">
|
||||
<UserAvatar email={userEmail} vip={vip} onLogout={() => { setUserEmail(null); setVip(false); setMobileOpen(false); router.replace("/"); }} />
|
||||
<Link
|
||||
href="/profile"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="min-w-0 flex-1"
|
||||
>
|
||||
<span className="block truncate text-sm font-semibold text-slate-700 dark:text-slate-200">{userEmail}</span>
|
||||
<span className="mt-0.5 block text-xs text-slate-500 dark:text-slate-400">{t("profile")}</span>
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => {
|
||||
setMobileOpen(false);
|
||||
setAuthOpen(true);
|
||||
}}
|
||||
className="dn-button-secondary mt-2 block w-full rounded-full border border-slate-200 px-4 py-2.5 text-center text-base font-medium text-slate-600 dark:border-slate-700 dark:text-slate-400"
|
||||
>
|
||||
{t("loginRegister")}
|
||||
</button>
|
||||
)}
|
||||
<Link
|
||||
href="/#roadmap"
|
||||
onClick={() => setMobileOpen(false)}
|
||||
className="dn-button-primary mt-2 block rounded-full bg-sky-500 px-4 py-2.5 text-center text-base font-medium text-white transition-colors hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-500"
|
||||
>
|
||||
{t("explore")}
|
||||
</Link>
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -6,13 +6,13 @@ import DigitalThemeIcon from "./DigitalThemeIcon";
|
||||
export default function Hero() {
|
||||
const { t } = useTranslation("hero");
|
||||
return (
|
||||
<section className="dn-hero relative overflow-hidden pt-24 pb-16 sm:pt-32 sm:pb-20">
|
||||
<div className="dn-hero-bg pointer-events-none absolute inset-0 bg-gradient-to-b from-sky-50/80 via-white to-white dark:from-slate-900 dark:via-slate-900 dark:to-slate-950" />
|
||||
<div className="dn-hero-glow pointer-events-none absolute top-0 left-1/2 h-[600px] w-[800px] -translate-x-1/2 rounded-full bg-gradient-to-br from-sky-100/60 via-cyan-50/40 to-amber-50/30 blur-3xl dark:from-sky-900/20 dark:via-slate-800/30 dark:to-amber-900/10" />
|
||||
<section className="dn-hero relative overflow-hidden pt-10 pb-16 sm:pt-14 sm:pb-20">
|
||||
<div className="dn-hero-bg pointer-events-none absolute inset-0" />
|
||||
<div className="dn-hero-glow pointer-events-none absolute top-0 left-1/2 h-[600px] w-[800px] -translate-x-1/2 rounded-full blur-3xl" />
|
||||
|
||||
<div className="dn-container relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center">
|
||||
<div className="dn-badge mb-6 inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50 px-4 py-1.5 text-sm font-medium text-sky-700 dark:border-sky-800 dark:bg-sky-900/50 dark:text-sky-300">
|
||||
<div className="dn-badge mb-6 inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium">
|
||||
<DigitalThemeIcon name="briefcase" emoji="🎒" className="h-4 w-4" />
|
||||
<span>{t("badge")}</span>
|
||||
</div>
|
||||
@@ -34,7 +34,7 @@ export default function Hero() {
|
||||
<div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:gap-4">
|
||||
<a
|
||||
href="#roadmap"
|
||||
className="dn-button-primary inline-flex w-full items-center justify-center gap-2 rounded-full bg-sky-500 px-8 py-3.5 text-base font-semibold text-white shadow-lg shadow-sky-500/25 transition-all hover:bg-sky-600 hover:shadow-xl hover:shadow-sky-500/30 sm:w-auto"
|
||||
className="dn-button-primary inline-flex w-full items-center justify-center gap-2 rounded-full px-8 py-3.5 text-base font-semibold text-white sm:w-auto"
|
||||
>
|
||||
{t("ctaStart")}
|
||||
<span>→</span>
|
||||
|
||||
@@ -9,7 +9,7 @@ export default function ThemeToggle() {
|
||||
<button
|
||||
type="button"
|
||||
onClick={toggleTheme}
|
||||
className="dn-header-control rounded-lg p-2 text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
|
||||
className="rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
|
||||
aria-label={theme === "dark" ? "切换到日间模式" : "切换到夜间模式"}
|
||||
title={theme === "dark" ? "日间模式" : "夜间模式"}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user