Merge pull request #6 from handsomezhuzhu/v0/kdaugh14-4907-7424b84c

Redesign navigation with centered layout and cyberpunk animations

app/globals.css

@@ -1,29 +1,28 @@
 @import "tailwindcss";
-@import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 
-/* 深色主题设计，适合个人导航站 */
+/* 深色主题设计，个人导航站 - 深蓝色调 */
 :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);
-  --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);
   --destructive: 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-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -124,3 +123,79 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* Cyber glow animation - 文字白色，光晕颜色流动 */
+@keyframes glow-flow {
+  0%   { text-shadow: 0 0 12px oklch(0.75 0.18 180 / 0.9), 0 0 30px oklch(0.75 0.18 180 / 0.5), 0 0 60px oklch(0.75 0.18 180 / 0.2); }
+  25%  { text-shadow: 0 0 12px oklch(0.70 0.20 220 / 0.9), 0 0 30px oklch(0.70 0.20 220 / 0.5), 0 0 60px oklch(0.70 0.20 220 / 0.2); }
+  50%  { text-shadow: 0 0 12px oklch(0.65 0.22 280 / 0.9), 0 0 30px oklch(0.65 0.22 280 / 0.5), 0 0 60px oklch(0.65 0.22 280 / 0.2); }
+  75%  { text-shadow: 0 0 12px oklch(0.72 0.20 240 / 0.9), 0 0 30px oklch(0.72 0.20 240 / 0.5), 0 0 60px oklch(0.72 0.20 240 / 0.2); }
+  100% { text-shadow: 0 0 12px oklch(0.75 0.18 180 / 0.9), 0 0 30px oklch(0.75 0.18 180 / 0.5), 0 0 60px oklch(0.75 0.18 180 / 0.2); }
+}
+
+.cyber-title {
+  color: oklch(0.98 0 0);
+  animation: glow-flow 6s ease infinite;
+}
+
+/* Animation utilities */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes zoom-in-95 {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes zoom-out-95 {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.95); }
+}
+
+@keyframes slide-in-from-top-2 {
+  from { transform: translateY(-0.5rem); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slide-in-from-bottom-2 {
+  from { transform: translateY(0.5rem); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slide-in-from-left-2 {
+  from { transform: translateX(-0.5rem); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slide-in-from-right-2 {
+  from { transform: translateX(0.5rem); }
+  to { transform: translateX(0); }
+}
+
+.animate-in {
+  animation-duration: 150ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-fill-mode: both;
+}
+
+.animate-out {
+  animation-duration: 150ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-fill-mode: both;
+}
+
+.fade-in-0 { animation-name: fade-in; }
+.fade-out-0 { animation-name: fade-out; }
+.zoom-in-95 { animation-name: zoom-in-95; }
+.zoom-out-95 { animation-name: zoom-out-95; }
+.slide-in-from-top-2 { animation-name: slide-in-from-top-2; }
+.slide-in-from-bottom-2 { animation-name: slide-in-from-bottom-2; }
+.slide-in-from-left-2 { animation-name: slide-in-from-left-2; }
+.slide-in-from-right-2 { animation-name: slide-in-from-right-2; }

components/site-navigation.tsx

@@ -2,8 +2,8 @@
 
 import type React from "react"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
-import { ExternalLink, Globe, Server, Mail, Zap, Shield, Code, FileText, Search } from "lucide-react"
+import { ExternalLink, Server, Mail, Zap, Shield, Code, FileText, Search } from "lucide-react"
 
 interface Site {
   domain: string
@@ -373,6 +373,37 @@ function getServerBadgeStyle(server: string) {
 
 export function SiteNavigation() {
   const [searchQuery, setSearchQuery] = useState("")
+  const [displayText, setDisplayText] = useState("")
+  const [isAnimationDone, setIsAnimationDone] = useState(false)
+  const fullText = "SIMON站点导航"
+
+  useEffect(() => {
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*_-+=<>?/\\|~"
+    let frame = 0
+    const totalFrames = fullText.length * 5
+
+    const interval = setInterval(() => {
+      let output = ""
+      for (let i = 0; i < fullText.length; i++) {
+        if (i < Math.floor(frame / 5)) {
+          output += fullText[i]
+        } else {
+          output += chars[Math.floor(Math.random() * chars.length)]
+        }
+      }
+      setDisplayText(output)
+      frame++
+      if (frame > totalFrames) {
+        clearInterval(interval)
+        setDisplayText(fullText)
+        setIsAnimationDone(true)
+      }
+    }, 40)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
 
   const filteredCategories = categories
     .map((category) => ({
@@ -389,64 +420,77 @@ export function SiteNavigation() {
     .filter((category) => category.sites.length > 0)
 
   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">
-        {/* Header */}
+        {/* Header - 居中设计 */}
-        <header className="mb-12">
+        <header className="mb-16 text-center">
-          <div className="flex items-center gap-3 mb-4">
+          <h1
-            <Globe className="size-8 text-primary" />
+            className={`text-4xl md:text-6xl font-bold tracking-widest mb-4 font-mono transition-all duration-500 ${
-            <h1 className="text-3xl font-bold tracking-tight text-foreground">站点导航</h1>
+              isAnimationDone ? "cyber-title" : "text-foreground"
+            }`}
+          >
+            {displayText || "SIMON站点导航"}
+          </h1>
+          <div className="flex items-center justify-center gap-2 mb-2">
+            <span className="block h-px w-16 bg-primary/30" />
+            <p className="text-muted-foreground text-sm md:text-base tracking-widest uppercase font-mono">
+              <span className="text-primary/80">zhuzihan.com</span>
+              <span className="mx-2 text-border">|</span>
+              全部站点与服务管理
+            </p>
+            <span className="block h-px w-16 bg-primary/30" />
           </div>
-          <p className="text-muted-foreground text-lg">zhuzihan.com 全部站点与服务管理</p>
         </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" />
           <input
             type="text"
             placeholder="搜索站点、域名或服务器..."
             value={searchQuery}
             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>
 
         {/* Categories */}
-        <div className="space-y-10">
+        <div className="space-y-12">
           {filteredCategories.map((category) => (
             <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>
-                <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 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) => (
                   <a
                     key={site.domain}
                     href={site.url}
                     target="_blank"
                     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-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}
                         </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>
-                      <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 className="flex flex-wrap gap-2">
+                    <div className="flex flex-wrap gap-2 pt-1">
                       {Array.isArray(site.server) ? (
                         site.server.map((s) => (
                           <span
                             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" />
                             {s}
@@ -454,7 +498,7 @@ export function SiteNavigation() {
                         ))
                       ) : (
                         <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" />
                           {site.server}
@@ -462,7 +506,7 @@ export function SiteNavigation() {
                       )}
                       {site.cdn !== "-" && (
                         <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" />
                           {site.cdn}
@@ -477,14 +521,21 @@ export function SiteNavigation() {
         </div>
 
         {/* 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>
             <a
               href="https://beian.miit.gov.cn/"
               target="_blank"
               rel="noopener noreferrer"
-              className="hover:text-foreground transition-colors"
+              className="hover:text-primary transition-colors"
             >
               滇ICP备2025074424号
             </a>
@@ -492,15 +543,12 @@ export function SiteNavigation() {
               href="https://beian.mps.gov.cn"
               target="_blank"
               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" />
               滇公网安备53250402000233号
             </a>
           </div>
-          <p className="text-center text-sm text-muted-foreground mt-4">
-            共 {categories.reduce((acc, cat) => acc + cat.sites.length, 0)} 个站点 · 个人使用
-          </p>
         </footer>
       </div>
     </div>

package.json

@@ -56,7 +56,7 @@
     "recharts": "2.15.4",
     "sonner": "^1.7.4",
     "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7",
+    "tailwindcss-animate": "1.0.7",
     "vaul": "^1.1.2",
     "zod": "3.25.76"
   },
@@ -67,7 +67,6 @@
     "@types/react-dom": "^19",
     "postcss": "^8.5",
     "tailwindcss": "^4.1.9",
-    "tw-animate-css": "1.3.3",
     "typescript": "^5"
   }
 }

styles/globals.css

@@ -1,5 +1,4 @@
 @import 'tailwindcss';
-@import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));