feat: 更新导航栏组件样式

- 添加玻璃态背景效果
- 添加科技蓝发光阴影
- 更新文字颜色使用 CSS 变量
- 统一深色模式样式
- 优化移动端菜单样式

src/components/layout/header.tsx

@@ -64,7 +64,7 @@ export function Header() {
           fixed top-0 left-0 right-0 z-50
           transition-all duration-300 ease-out
           ${isScrolled 
-            ? 'bg-white/95 dark:bg-[var(--color-bg-primary)]/95 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 shadow-lg shadow-gray-200/50 dark:shadow-black/20' 
+            ? 'bg-[var(--color-bg-primary)]/80 backdrop-blur-xl border-b border-[var(--color-border-primary)] shadow-[0_4px_30px_rgba(0,217,255,0.1)]' 
             : 'bg-transparent'
           }
         `}
@@ -94,7 +94,7 @@ export function Header() {
                     transition-all duration-300
                     ${activeSection === item.id.replace('#', '')
                       ? 'text-[var(--color-tech-blue)]'
-                      : 'text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)]'
+                      : 'text-[var(--color-text-secondary)] hover:text-[var(--color-tech-blue)]'
                     }
                   `}
                 >
@@ -138,7 +138,7 @@ export function Header() {
             </div>
 
             <button
-              className="md:hidden p-2 -mr-2 text-gray-600 dark:text-gray-400 hover:text-[var(--color-tech-blue)] transition-colors"
+              className="md:hidden p-2 -mr-2 text-[var(--color-text-secondary)] hover:text-[var(--color-tech-blue)] transition-colors"
               onClick={() => setIsOpen(!isOpen)}
             >
               {isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
@@ -164,7 +164,7 @@ export function Header() {
               animate={{ y: 0, opacity: 1 }}
               exit={{ y: -20, opacity: 0 }}
               transition={{ type: "spring", stiffness: 300, damping: 30 }}
-              className="absolute top-16 left-0 right-0 bg-white dark:bg-[var(--color-bg-secondary)] border-b border-gray-200 dark:border-gray-800 shadow-xl"
+              className="absolute top-16 left-0 right-0 bg-[var(--color-bg-secondary)]/95 backdrop-blur-xl border-b border-[var(--color-border-primary)] shadow-[0_4px_30px_rgba(0,217,255,0.1)]"
             >
               <nav className="container-wide py-4">
                 {NAVIGATION.map((item, index) => (
@@ -180,17 +180,17 @@ export function Header() {
                       transition-all duration-300
                       border-l-2
                       ${activeSection === item.id.replace('#', '')
-                        ? 'text-[var(--color-tech-blue)] border-[var(--color-tech-blue)] bg-[var(--color-tech-blue)]/10'
+                        ? 'text-[var(--color-tech-blue)] border-[var(--color-tech-blue)] bg-[rgba(0,217,255,0.1)]'
-                        : 'text-gray-600 dark:text-gray-400 border-transparent hover:text-[var(--color-tech-blue)] hover:bg-gray-100 dark:hover:bg-[var(--color-bg-tertiary)]'
+                        : 'text-[var(--color-text-secondary)] border-transparent hover:text-[var(--color-tech-blue)] hover:bg-[rgba(255,255,255,0.05)]'
                       }
                     `}
                   >
                     {item.label}
                   </motion.a>
                 ))}
-                <div className="mt-4 px-4 pt-4 border-t border-gray-200 dark:border-gray-800 space-y-3">
+                <div className="mt-4 px-4 pt-4 border-t border-[var(--color-border-primary)] space-y-3">
                   <div className="flex items-center justify-between">
-                    <span className="text-sm text-gray-500">主题模式</span>
+                    <span className="text-sm text-[var(--color-text-tertiary)]">主题模式</span>
                     <ThemeToggle />
                   </div>
                   <Button