前端重构实现

2025-12-22 16:38:06 +08:00
parent cd6d995d5a
commit 26574e3db7
54 changed files with 8976 additions and 0 deletions
@@ -0,0 +1,52 @@
+import { User } from 'lucide-react';
+import GlassButton from '../ui/GlassButton';
+
+/**
+ * Header 组件
+ * 固定定位头部，包含 logo 和用户按钮
+ * @param {Object} props
+ * @param {boolean} props.showNav - 是否显示导航按钮
+ * @param {Function} props.onProfileClick - 用户按钮点击回调
+ */
+const Header = ({ showNav = false, onProfileClick }) => {
+  /**
+   * 处理 logo 点击，刷新页面
+   */
+  const handleLogoClick = () => {
+    window.location.reload();
+  };
+
+  return (
+    <header className="fixed top-0 left-0 p-6 z-50 w-full flex justify-between items-center pointer-events-none">
+      {/* Logo 区域 */}
+      <div 
+        className="flex items-center gap-3 pointer-events-auto cursor-pointer"
+        onClick={handleLogoClick}
+      >
+        <img 
+          src="https://r2-bucket.flowith.net/f/cf8c6e7c020409c9/lifeline_app_logo_design_index_0%401024x1024.jpeg" 
+          alt="logo" 
+          className="w-10 h-10 rounded-full shadow-2xl border border-white/10"
+        />
+        <h1 className="text-xl font-serif tracking-[0.2em] bg-clip-text text-transparent bg-gradient-to-r from-white to-white/50">
+          人生轨迹
+        </h1>
+      </div>
+
+      {/* 导航区域 */}
+      {showNav && (
+        <nav className="pointer-events-auto">
+          <GlassButton 
+            variant="icon"
+            onClick={onProfileClick}
+            className="hover:shadow-orange-200/10 shadow-lg"
+          >
+            <User className="w-5 h-5" />
+          </GlassButton>
+        </nav>
+      )}
+    </header>
+  );
+};
+
+export default Header;