tone/tonePage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加首页、header/footer组件深色模式支持

Browse Source
This commit is contained in:
tone
2026-01-03 14:41:38 +08:00
parent 33053b4a92
commit 5e2e18fce6
4 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/frontend/app/(with-header-footer)/layout.tsx
View File

@@ -9,7 +9,7 @@ export default function LayoutWithHeaderFooter({
return ( return (
<> <>
<Header /> <Header />
<main className="flex-1 flex flex-col bg-zinc-50"> <main className="flex-1 flex flex-col bg-zinc-50 dark:bg-zinc-950">
{children} {children}
</main> </main>
<Footer /> <Footer />

2
apps/frontend/app/(with-header-footer)/page.tsx
View File

@@ -15,7 +15,7 @@ export default function Home() {
/> />
</figure> </figure>
<h1 className='text-4xl md:text-5xl font-bold mt-5 md:mt-8 gradient-title duration-400 select-none'>特恩(TONE)</h1> <h1 className='text-4xl md:text-5xl font-bold mt-5 md:mt-8 gradient-title duration-400 select-none'>特恩(TONE)</h1>
<p className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 duration-400 select-none'>一名在各个领域反复横跳的程序员</p> <p className='text-lg sm:text-xl md:text-2xl mt-3 font-medium text-zinc-400 dark:text-zinc-200 duration-400 select-none'>一名在各个领域反复横跳的程序员</p>
<nav className='flex sm:flex-row flex-col gap-2 sm:gap-10 mt-5 md:mt-8 duration-400' aria-label="社交媒体链接"> <nav className='flex sm:flex-row flex-col gap-2 sm:gap-10 mt-5 md:mt-8 duration-400' aria-label="社交媒体链接">
<a href='https://space.bilibili.com/474156211' <a href='https://space.bilibili.com/474156211'
target='_black' target='_black'

10
apps/frontend/components/Footer.tsx
View File

@@ -11,18 +11,18 @@ const EMAIL = "tonesc.cn@gmail.com";
export default function Footer() { export default function Footer() {
return ( return (
<footer className="border-t border-zinc-300"> <footer className="border-t border-zinc-300">
<div className="bg-zinc-50 px-4 py-3 md:py-5 sm:px-10 md:px-20 flex flex-col sm:flex-row justify-between items-center gap-4 transition-all"> <div className="bg-zinc-50 dark:bg-zinc-950 px-4 py-3 md:py-5 sm:px-10 md:px-20 flex flex-col sm:flex-row justify-between items-center gap-4 transition-all">
{/* 版权与备案信息 */} {/* 版权与备案信息 */}
<div className="text-center sm:text-left"> <div className="text-center sm:text-left">
<a <a
href="https://beian.miit.gov.cn/" href="https://beian.miit.gov.cn/"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="block text-sm text-zinc-500 hover:text-zinc-700 hover:underline focus:outline-none focus:underline" className="block text-sm text-zinc-500 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-100 hover:underline focus:outline-none focus:underline"
> >
备案号：渝ICP备2023009516号-1 备案号：渝ICP备2023009516号-1
</a> </a>
<p className="mt-1 text-sm text-zinc-500"> <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-300">
© {new Date().getFullYear()} TONE Page. All rights reserved. © {new Date().getFullYear()} TONE Page. All rights reserved.
</p> </p>
</div> </div>
@@ -32,13 +32,13 @@ export default function Footer() {
<Popover> <Popover>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<Button variant='outline' size='sm' > <Button variant='outline' size='sm' >
<Mail className="text-zinc-600" /> <Mail className="text-zinc-600 dark:text-zinc-300" />
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-fit"> <PopoverContent className="w-fit">
<a <a
href={`mailto:${EMAIL}`} href={`mailto:${EMAIL}`}
className="text-sm text-zinc-800 hover:underline focus:outline-none focus:underline" className="text-sm text-zinc-800 dark:text-zinc-200 hover:underline focus:outline-none focus:underline"
> >
{EMAIL} {EMAIL}
</a> </a>

10
apps/frontend/components/Header.tsx
View File

@@ -48,13 +48,13 @@ export default function Header() {
return ( return (
<> <>
<header className="sticky top-0 z-50 backdrop-blur-sm bg-white/40 shadow" role="banner" aria-label="网站顶部导航栏"> <header className="sticky top-0 z-50 backdrop-blur-sm bg-white/40 dark:bg-black/40 shadow dark:shadow-zinc-500" role="banner" aria-label="网站顶部导航栏">
<div className="flex items-center justify-between px-10 md:h-18 md:px-20 h-14 duration-300" aria-label="主菜单"> <div className="flex items-center justify-between px-10 md:h-18 md:px-20 h-14 duration-300" aria-label="主菜单">
<Link <Link
href="/" href="/"
className={cn( className={cn(
"cursor-pointer font-medium text-zinc-500 hover:text-zinc-800 border-b-4 border-transparent duration-200", "cursor-pointer font-medium text-zinc-500 dark:text-zinc-300 hover:text-zinc-800 dark:hover:text-zinc-100 border-b-4 border-transparent duration-200",
pathname === "/" && "text-zinc-800" pathname === "/" && "text-zinc-800 dark:text-zinc-100"
)} )}
aria-current={pathname === "/" ? "page" : undefined} aria-current={pathname === "/" ? "page" : undefined}
> >
@@ -72,8 +72,8 @@ export default function Header() {
key={item.name} key={item.name}
href={item.path} href={item.path}
className={cn( className={cn(
"cursor-pointer md:text-lg font-medium text-zinc-500 hover:text-zinc-800 border-b-4 border-transparent duration-200", "cursor-pointer md:text-lg font-medium text-zinc-500 dark:text-zinc-300 hover:text-zinc-800 dark:hover:text-zinc-100 border-b-4 border-transparent duration-200",
pathname.startsWith(item.path) && "text-zinc-800 border-b-pink-500" pathname.startsWith(item.path) && "text-zinc-800 dark:text-zinc-100 border-b-pink-500"
)} )}
onClick={e => handleClick(e, item.path)} onClick={e => handleClick(e, item.path)}
aria-current={pathname === item.path ? "page" : undefined} aria-current={pathname === item.path ? "page" : undefined}