zzh/personal-navigation-site
1
0
Fork 0
mirror of https://github.com/handsomezhuzhu/personal-navigation-site.git synced 2026-04-18 22:32:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: redesign navigation with modern centered layout

Browse Source 
Centered title, optimized search box, improved category headers,
enhanced card interactions, and realigned footer.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
This commit is contained in:
v0
2026-03-07 14:17:00 +00:00
parent d810c06460
commit 9f8188a969
2 changed files with 60 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/globals.css
View File

@@ -3,27 +3,27 @@
@custom-variant dark (&:is(.dark *)); @custom-variant dark (&:is(.dark *));
/* 深色主题设计，适合个人导航站 */ /* 深色主题设计，个人导航站 - 深蓝色调 */
:root { :root {
--background: oklch(0.13 0.01 260); --background: oklch(0.12 0.015 240);
--foreground: oklch(0.95 0 0); --foreground: oklch(0.98 0 0);
--card: oklch(0.18 0.01 260); --card: oklch(0.16 0.015 240);
--card-foreground: oklch(0.95 0 0); --card-foreground: oklch(0.98 0 0);
--popover: oklch(0.18 0.01 260); --popover: oklch(0.16 0.015 240);
--popover-foreground: oklch(0.95 0 0); --popover-foreground: oklch(0.98 0 0);
--primary: oklch(0.7 0.15 200); --primary: oklch(0.75 0.12 180);
--primary-foreground: oklch(0.1 0 0); --primary-foreground: oklch(0.1 0 0);
--secondary: oklch(0.25 0.01 260); --secondary: oklch(0.22 0.015 240);
--secondary-foreground: oklch(0.9 0 0); --secondary-foreground: oklch(0.95 0 0);
--muted: oklch(0.25 0.01 260); --muted: oklch(0.22 0.015 240);
--muted-foreground: oklch(0.65 0 0); --muted-foreground: oklch(0.6 0.01 240);
--accent: oklch(0.7 0.15 200); --accent: oklch(0.75 0.12 180);
--accent-foreground: oklch(0.1 0 0); --accent-foreground: oklch(0.1 0 0);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.28 0.01 260); --border: oklch(0.24 0.02 240);
--input: oklch(0.28 0.01 260); --input: oklch(0.20 0.015 240);
--ring: oklch(0.7 0.15 200); --ring: oklch(0.75 0.12 180);
--chart-1: oklch(0.646 0.222 41.116); --chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704); --chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392); --chart-3: oklch(0.398 0.07 227.392);

72
components/site-navigation.tsx
View File

@@ -389,64 +389,74 @@ export function SiteNavigation() {
.filter((category) => category.sites.length > 0) .filter((category) => category.sites.length > 0)
return ( return (
<div className="min-h-screen px-4 py-12 md:px-8 lg:px-16"> <div className="min-h-screen px-4 py-16 md:px-8 lg:px-16">
<div className="mx-auto max-w-6xl"> <div className="mx-auto max-w-6xl">
{/* Header */} {/* Header - 居中设计 */}
<header className="mb-12"> <header className="mb-16 text-center">
<div className="flex items-center gap-3 mb-4"> <div className="inline-flex items-center justify-center gap-3 mb-6">
<div className="p-3 bg-primary/10 rounded-2xl">
<Globe className="size-8 text-primary" /> <Globe className="size-8 text-primary" />
<h1 className="text-3xl font-bold tracking-tight text-foreground">站点导航</h1>
</div> </div>
<p className="text-muted-foreground text-lg">zhuzihan.com 全部站点与服务管理</p> </div>
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4">
站点导航
</h1>
<p className="text-muted-foreground text-lg md:text-xl">
<span className="font-mono text-primary/80">zhuzihan.com</span>
<span className="mx-2 text-border">|</span>
全部站点与服务管理
</p>
</header> </header>
{/* Search */} {/* Search - 居中设计 */}
<div className="relative mb-10"> <div className="relative mb-12 max-w-2xl mx-auto">
<Search className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-muted-foreground" /> <Search className="absolute left-4 top-1/2 -translate-y-1/2 size-5 text-muted-foreground" />
<input <input
type="text" type="text"
placeholder="搜索站点、域名或服务器..." placeholder="搜索站点、域名或服务器..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="w-full bg-card border border-border rounded-lg py-3 pl-12 pr-4 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all" className="w-full bg-input border border-border rounded-xl py-4 pl-12 pr-4 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary/50 transition-all shadow-lg shadow-black/10"
/> />
</div> </div>
{/* Categories */} {/* Categories */}
<div className="space-y-10"> <div className="space-y-12">
{filteredCategories.map((category) => ( {filteredCategories.map((category) => (
<section key={category.title}> <section key={category.title}>
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-3 mb-6 pb-3 border-b border-border/50">
<span className="text-primary">{category.icon}</span> <span className="p-2 bg-primary/10 rounded-lg text-primary">{category.icon}</span>
<h2 className="text-xl font-semibold text-foreground">{category.title}</h2> <h2 className="text-xl font-semibold text-foreground">{category.title}</h2>
<span className="text-sm text-muted-foreground ml-2">({category.sites.length})</span> <span className="text-sm text-muted-foreground px-2 py-1 bg-muted/50 rounded-full">
{category.sites.length} 个站点
</span>
</div> </div>
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3"> <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{category.sites.map((site) => ( {category.sites.map((site) => (
<a <a
key={site.domain} key={site.domain}
href={site.url} href={site.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="group flex flex-col gap-3 p-4 bg-card border border-border rounded-lg hover:border-primary/50 hover:bg-card/80 transition-all" className="group flex flex-col gap-3 p-5 bg-card border border-border/50 rounded-xl hover:border-primary/50 hover:shadow-lg hover:shadow-primary/5 transition-all duration-300"
> >
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<h3 className="font-medium text-foreground group-hover:text-primary transition-colors truncate"> <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors truncate">
{site.name} {site.name}
</h3> </h3>
<p className="text-sm text-muted-foreground font-mono truncate mt-1">{site.domain}</p> <p className="text-sm text-muted-foreground font-mono truncate mt-1.5">{site.domain}</p>
</div> </div>
<ExternalLink className="size-4 text-muted-foreground group-hover:text-primary transition-colors flex-shrink-0 ml-2" /> <ExternalLink className="size-4 text-muted-foreground group-hover:text-primary group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all flex-shrink-0 ml-2 mt-1" />
</div> </div>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2 pt-1">
{Array.isArray(site.server) ? ( {Array.isArray(site.server) ? (
site.server.map((s) => ( site.server.map((s) => (
<span <span
key={s} key={s}
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${getServerBadgeStyle(s)}`} className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium ${getServerBadgeStyle(s)}`}
> >
<Server className="size-3" /> <Server className="size-3" />
{s} {s}
@@ -454,7 +464,7 @@ export function SiteNavigation() {
)) ))
) : ( ) : (
<span <span
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${getServerBadgeStyle(site.server)}`} className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium ${getServerBadgeStyle(site.server)}`}
> >
<Server className="size-3" /> <Server className="size-3" />
{site.server} {site.server}
@@ -462,7 +472,7 @@ export function SiteNavigation() {
)} )}
{site.cdn !== "-" && ( {site.cdn !== "-" && (
<span <span
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium ${getCdnBadgeStyle(site.cdn)}`} className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium ${getCdnBadgeStyle(site.cdn)}`}
> >
<Shield className="size-3" /> <Shield className="size-3" />
{site.cdn} {site.cdn}
@@ -477,14 +487,21 @@ export function SiteNavigation() {
</div> </div>
{/* Footer */} {/* Footer */}
<footer className="mt-16 pt-8 border-t border-border"> <footer className="mt-20 pt-10 border-t border-border/50">
<div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-sm text-muted-foreground"> <div className="text-center mb-6">
<p className="text-muted-foreground">
共 <span className="text-primary font-semibold">{categories.reduce((acc, cat) => acc + cat.sites.length, 0)}</span> 个站点
<span className="mx-2 text-border">·</span>
个人使用
</p>
</div>
<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-muted-foreground">
<span>Copyright © 2019 - 2025</span> <span>Copyright © 2019 - 2025</span>
<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="hover:text-foreground transition-colors" className="hover:text-primary transition-colors"
> >
滇ICP备2025074424号 滇ICP备2025074424号
</a> </a>
@@ -492,15 +509,12 @@ export function SiteNavigation() {
href="https://beian.mps.gov.cn" href="https://beian.mps.gov.cn"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex items-center gap-1 hover:text-foreground transition-colors" className="inline-flex items-center gap-1.5 hover:text-primary transition-colors"
> >
<img src="/images/beian.png" alt="备案图标" className="size-4" /> <img src="/images/beian.png" alt="备案图标" className="size-4" />
滇公网安备53250402000233号 滇公网安备53250402000233号
</a> </a>
</div> </div>
<p className="text-center text-sm text-muted-foreground mt-4">
共 {categories.reduce((acc, cat) => acc + cat.sites.length, 0)} 个站点 · 个人使用
</p>
</footer> </footer>
</div> </div>
</div> </div>