feat: app 端 ui 设计完成

2026-01-28 19:10:19 +08:00
commit a4e7898e94
149 changed files with 11302 additions and 0 deletions
--- a/wei-ai-demo/components/BottomNav.tsx
+++ b/wei-ai-demo/components/BottomNav.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Compass, PlayCircle, Radio, User } from 'lucide-react';
+import { UserTab } from '../types';
+
+interface BottomNavProps {
+  currentTab: UserTab;
+  onTabChange: (tab: UserTab) => void;
+}
+
+const BottomNav: React.FC<BottomNavProps> = ({ currentTab, onTabChange }) => {
+  const navItems = [
+    { id: UserTab.Discovery, icon: Compass, label: '发现' },
+    { id: UserTab.Library, icon: PlayCircle, label: '剧本' },
+    { id: UserTab.Control, icon: Radio, label: '操控' },
+    { id: UserTab.Profile, icon: User, label: '我的' },
+  ];
+
+  return (
+    <div className="fixed bottom-0 left-0 w-full z-50">
+      {/* Main Bar Content - High Transparency Glass */}
+      <div className="bg-black/20 backdrop-blur-2xl border-t border-white/10 pb-safe">
+        <div className="flex justify-around items-center h-[60px]">
+          {navItems.map((item) => {
+            const isActive = currentTab === item.id;
+            return (
+              <button
+                key={item.id}
+                onClick={() => onTabChange(item.id)}
+                className="relative flex-1 flex flex-col items-center justify-center h-full group"
+              >
+                {/* Active Glow Background */}
+                {isActive && (
+                    <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-12 h-12 bg-white/10 rounded-full blur-lg"></div>
+                )}
+
+                {/* Icon */}
+                <div className={`transition-all duration-300 relative z-10 ${isActive ? 'text-white scale-110 drop-shadow-[0_0_10px_rgba(255,255,255,0.6)]' : 'text-white/50 group-hover:text-white/80'}`}>
+                  <item.icon 
+                    size={26} 
+                    strokeWidth={isActive ? 2.5 : 1.5}
+                  />
+                </div>
+
+                {/* Label */}
+                <span className={`text-[10px] font-medium mt-1 transition-colors duration-300 relative z-10 ${isActive ? 'text-white' : 'text-white/40'}`}>
+                  {item.label}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BottomNav;