manual save(2026-01-27 15:58)

src/components/Header.tsx

@@ -1,17 +1,60 @@
 import React from 'react'
+import { Link, useLocation } from 'react-router-dom'
 
 export const Header: React.FC = () => {
+  const location = useLocation()
+  const isShelf = location.pathname === '/' || location.pathname.startsWith('/books')
+
   return (
-    <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
-      <div className="container mx-auto px-4 py-4">
-        <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-bold text-gray-900">
-            TenantCMS <span className="text-blue-600">Demo</span>
-          </h1>
-          <nav className="flex items-center gap-4">
-            <a href="/" className="text-gray-600 hover:text-gray-900">首页</a>
-            <a href="/categories" className="text-gray-600 hover:text-gray-900">分类</a>
-          </nav>
+    <header className="sticky top-0 z-20">
+      <div className="relative">
+        <div
+          className={
+            (isShelf ? 'bg-transparent' : 'bg-white') +
+            ' border-b border-white/10'
+          }
+          style={{
+            backdropFilter: 'blur(10px)',
+          }}
+        >
+          <div className="container mx-auto px-4 py-4">
+            <div className="flex items-center justify-between gap-4">
+              <Link
+                to="/"
+                className={
+                  (isShelf ? 'text-white' : 'text-gray-900') +
+                  ' text-xl sm:text-2xl font-bold tracking-tight'
+                }
+                aria-label="返回书架"
+              >
+                <span className="font-display">书架</span>
+                <span className={(isShelf ? 'text-white/70' : 'text-gray-500') + ' ml-2 text-sm font-semibold'}>
+                  Library
+                </span>
+              </Link>
+
+              <nav className="flex items-center gap-3 sm:gap-4">
+                <Link
+                  to="/"
+                  className={
+                    (isShelf ? 'text-white/80 hover:text-white' : 'text-gray-700 hover:text-gray-900') +
+                    ' text-sm font-semibold'
+                  }
+                >
+                  书架
+                </Link>
+                <Link
+                  to="/categories"
+                  className={
+                    (isShelf ? 'text-white/80 hover:text-white' : 'text-gray-700 hover:text-gray-900') +
+                    ' text-sm font-semibold'
+                  }
+                >
+                  分类
+                </Link>
+              </nav>
+            </div>
+          </div>
         </div>
       </div>
     </header>