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 (
<>
<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}
</main>
<Footer />

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

@@ -15,7 +15,7 @@ export default function Home() {
/>
</figure>
<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="社交媒体链接">
<a href='https://space.bilibili.com/474156211'
target='_black'

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

@@ -11,18 +11,18 @@ const EMAIL = "tonesc.cn@gmail.com";
export default function Footer() {
return (
<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">
<a
href="https://beian.miit.gov.cn/"
target="_blank"
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
</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.
</p>
</div>
@@ -32,13 +32,13 @@ export default function Footer() {
<Popover>
<PopoverTrigger asChild>
<Button variant='outline' size='sm' >
<Mail className="text-zinc-600" />
<Mail className="text-zinc-600 dark:text-zinc-300" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-fit">
<a
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}
</a>

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

@@ -48,13 +48,13 @@ export default function Header() {
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="主菜单">
<Link
href="/"
className={cn(
"cursor-pointer font-medium text-zinc-500 hover:text-zinc-800 border-b-4 border-transparent duration-200",
pathname === "/" && "text-zinc-800"
"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 dark:text-zinc-100"
)}
aria-current={pathname === "/" ? "page" : undefined}
>
@@ -72,8 +72,8 @@ export default function Header() {
key={item.name}
href={item.path}
className={cn(
"cursor-pointer md:text-lg font-medium text-zinc-500 hover:text-zinc-800 border-b-4 border-transparent duration-200",
pathname.startsWith(item.path) && "text-zinc-800 border-b-pink-500"
"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 dark:text-zinc-100 border-b-pink-500"
)}
onClick={e => handleClick(e, item.path)}
aria-current={pathname === item.path ? "page" : undefined}