前端重构实现

2025-12-22 16:38:06 +08:00
parent cd6d995d5a
commit 26574e3db7
54 changed files with 8976 additions and 0 deletions
@@ -0,0 +1,27 @@
+/**
+ * Background 组件
+ * 动态流体背景，包含渐变、浮动模糊圆和纹理叠加
+ */
+const Background = () => {
+  return (
+    <div id="app-bg" className="fixed inset-0 z-[-1]">
+      {/* 渐变底层 */}
+      <div className="absolute inset-0 bg-gradient-to-br from-[#1a1c2c] via-[#0a0c10] to-[#2d1b10] opacity-80" />
+      
+      {/* 浮动模糊圆 - 蓝色 */}
+      <div className="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] bg-blue-900/20 blur-[120px] rounded-full animate-float" />
+      
+      {/* 浮动模糊圆 - 橙色 */}
+      <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-orange-900/10 blur-[120px] rounded-full animate-float-delayed" />
+      
+      {/* 纹理叠加层 */}
+      <img 
+        src="https://r2-bucket.flowith.net/f/845b300ff0a2b36e/digital_healing_background_design_index_1%401024x1024.jpeg" 
+        alt="texture" 
+        className="w-full h-full object-cover mix-blend-overlay opacity-30"
+      />
+    </div>
+  );
+};
+
+export default Background;
@@ -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;
@@ -0,0 +1,72 @@
+import { History, Sparkles, Map } from 'lucide-react';
+
+/**
+ * 导航项配置
+ */
+const navGroups = [
+  {
+    title: '回溯过去',
+    items: [
+      { id: 'timeline', label: '生命长河', icon: History }
+    ]
+  },
+  {
+    title: '创造未来',
+    items: [
+      { id: 'script', label: '爽文剧本', icon: Sparkles },
+      { id: 'path', label: '实现路径', icon: Map }
+    ]
+  }
+];
+
+/**
+ * Sidebar 组件
+ * 仪表盘侧边栏导航
+ * @param {Object} props
+ * @param {'timeline'|'script'|'path'} props.activeView - 当前激活的视图
+ * @param {Function} props.onViewChange - 视图切换回调
+ */
+const Sidebar = ({ activeView, onViewChange }) => {
+  return (
+    <aside className="md:col-span-3 border-r border-white/5 p-6 flex flex-col gap-6 bg-black/20">
+      {/* 导航分组 */}
+      {navGroups.map((group) => (
+        <div key={group.title} className="space-y-2">
+          {/* 分组标题 */}
+          <div className="px-3 py-2 text-[10px] text-white/30 uppercase tracking-[0.2em] font-bold">
+            {group.title}
+          </div>
+          
+          {/* 导航项 */}
+          {group.items.map((item) => {
+            const Icon = item.icon;
+            const isActive = activeView === item.id;
+            
+            return (
+              <button
+                key={item.id}
+                onClick={() => onViewChange(item.id)}
+                className={`
+                  nav-item w-full flex items-center gap-3 p-4 rounded-2xl glass-btn text-white/50
+                  ${isActive ? 'active' : ''}
+                `}
+              >
+                <Icon className="w-5 h-5" />
+                <span>{item.label}</span>
+              </button>
+            );
+          })}
+        </div>
+      ))}
+
+      {/* 底部引用文字 */}
+      <div className="mt-auto p-4 bg-white/[0.02] rounded-2xl border border-white/5">
+        <p className="text-[10px] text-white/20 italic leading-relaxed">
+          "回溯过去、记录当下、创造未来。"
+        </p>
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;
@@ -0,0 +1,6 @@
+/**
+ * 布局组件统一导出
+ */
+export { default as Background } from './Background';
+export { default as Header } from './Header';
+export { default as Sidebar } from './Sidebar';