feat: app 端 ui 设计完成

wei-ai-demo/pages/Profile.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { 
+  Settings, 
+  CreditCard, 
+  ChevronRight, 
+  Bluetooth, 
+  Zap,
+  Crown,
+  Shield,
+  HelpCircle,
+  LogOut
+} from 'lucide-react';
+
+interface ProfileProps {
+    onTopUp: () => void;
+    onOpenDeviceManager: () => void;
+    onOpenSubscription: () => void;
+    onOpenPrivacy: () => void;
+    onOpenHelp: () => void;
+    onOpenSettings: () => void;
+}
+
+const Profile: React.FC<ProfileProps> = ({ 
+    onTopUp, 
+    onOpenDeviceManager, 
+    onOpenSubscription,
+    onOpenPrivacy,
+    onOpenHelp,
+    onOpenSettings
+}) => {
+  
+  const menuItems = [
+    { id: 'device', icon: Bluetooth, label: '我的设备', sub: 'Link-X Pro' },
+    { id: 'sub', icon: CreditCard, label: '订阅管理', sub: '' },
+    { id: 'privacy', icon: Shield, label: '隐私安全', sub: '' },
+    { id: 'help', icon: HelpCircle, label: '帮助与反馈', sub: '' },
+  ];
+
+  const handleMenuClick = (id: string) => {
+      if (id === 'device') {
+          onOpenDeviceManager();
+      } else if (id === 'sub') {
+          onOpenSubscription();
+      } else if (id === 'privacy') {
+          onOpenPrivacy();
+      } else if (id === 'help') {
+          onOpenHelp();
+      }
+  };
+
+  return (
+    <div className="pt-4 px-5 pb-24 h-full overflow-y-auto no-scrollbar">
+       
+       {/* 1. User Header */}
+       <div className="flex items-center justify-between mb-8">
+           <div className="flex items-center gap-4">
+               <div className="relative">
+                   <div className="w-18 h-18 rounded-full p-[2px] bg-gradient-to-tr from-[#C084FC] to-[#F472B6]">
+                       <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-white/20">
+                            {/* Updated to reliable source */}
+                            <img src="https://tse1.mm.bing.net/th?q=anime%20cool%20guy%20cyberpunk%20avatar&w=200&h=200&c=7" alt="User" className="w-full h-full object-cover" />
+                       </div>
+                   </div>
+               </div>
+               <div>
+                   <h2 className="text-2xl font-bold text-white tracking-wide drop-shadow-md">Commander</h2>
+                   <div className="flex items-center gap-1.5 mt-1 bg-white/10 backdrop-blur-md px-2.5 py-0.5 rounded-full border border-white/10 w-fit">
+                       <Crown size={12} className="text-[#FBBF24] fill-[#FBBF24]" />
+                       <span className="text-xs text-white font-bold tracking-wider">LV.4 黑金会员</span>
+                   </div>
+               </div>
+           </div>
+           <button 
+                onClick={onOpenSettings}
+                className="w-10 h-10 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white/70 hover:bg-white/20 hover:text-white transition-all border border-white/10"
+            >
+               <Settings size={20} />
+           </button>
+       </div>
+
+       {/* 2. Stats Grid - Lighter Glass */}
+       <div className="grid grid-cols-3 gap-3 mb-6">
+           {[
+               { label: '互动时长', val: '42h', unit: '' },
+               { label: '亲密指数', val: '85', unit: '%' },
+               { label: '解锁剧本', val: '12', unit: '个' },
+           ].map((stat, i) => (
+               <div key={i} className="glass-panel rounded-2xl p-4 flex flex-col items-center justify-center bg-white/5 border border-white/10">
+                   <span className="text-xl font-bold text-white font-mono drop-shadow-sm">{stat.val}<span className="text-[10px] text-white/60 ml-0.5">{stat.unit}</span></span>
+                   <span className="text-[10px] text-white/50 mt-0.5 uppercase tracking-wide">{stat.label}</span>
+               </div>
+           ))}
+       </div>
+
+       {/* 3. VIP / Wallet Card - Ultra Vibrant */}
+       <div className="w-full relative h-32 rounded-3xl overflow-hidden mb-8 group active:scale-[0.99] transition-transform shadow-[0_10px_40px_-10px_rgba(192,132,252,0.5)]">
+           <div className="absolute inset-0 bg-gradient-to-r from-[#7C3AED] via-[#9333EA] to-[#DB2777]"></div>
+           <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-30 mix-blend-overlay"></div>
+           
+           <div className="relative z-10 p-6 flex justify-between items-center h-full">
+               <div className="flex flex-col justify-center">
+                   <div className="flex items-center gap-2 mb-1 opacity-90">
+                       <Zap size={16} fill="white" className="text-white" />
+                       <span className="text-xs font-bold tracking-wider text-white uppercase">Joy Points</span>
+                   </div>
+                   <h3 className="text-4xl font-bold text-white font-mono tracking-tight drop-shadow-lg">2,450</h3>
+               </div>
+               <button 
+                onClick={onTopUp}
+                className="bg-white text-[#9333EA] px-6 py-2.5 rounded-full text-sm font-bold shadow-lg active:bg-gray-100 transition-colors hover:scale-105 transform"
+               >
+                   立即充值
+               </button>
+           </div>
+       </div>
+
+       {/* 4. Menu List - Lighter Glass */}
+       <div className="space-y-3">
+           <h3 className="px-2 text-xs font-bold text-white/40 uppercase tracking-widest mb-2">General</h3>
+           {menuItems.map((item) => (
+               <button 
+                    key={item.id} 
+                    onClick={() => handleMenuClick(item.id)}
+                    className="w-full glass-panel p-4 rounded-2xl flex items-center justify-between active:scale-[0.98] transition-all bg-white/5 hover:bg-white/10 border border-white/10 group"
+                >
+                   <div className="flex items-center gap-4">
+                       <div className="p-2.5 rounded-xl bg-white/5 text-white/70 group-hover:text-white group-hover:bg-white/20 transition-colors">
+                            <item.icon size={20} />
+                       </div>
+                       <span className="text-sm text-white font-medium">{item.label}</span>
+                   </div>
+                   <div className="flex items-center gap-2">
+                        {item.sub && <span className="text-xs text-white/50 font-medium">{item.sub}</span>}
+                        <ChevronRight size={18} className="text-white/30 group-hover:text-white transition-colors" />
+                   </div>
+               </button>
+           ))}
+       </div>
+
+       {/* 5. System / Logout */}
+       <div className="mt-8 mb-4 px-2">
+           <button className="w-full p-4 rounded-2xl border border-red-400/30 text-red-400 flex items-center justify-center gap-2 text-sm font-medium hover:bg-red-400/10 active:scale-[0.98] transition-all bg-white/5">
+               <LogOut size={18} />
+               退出登录
+           </button>
+           <div className="mt-6 text-center">
+               <p className="text-[10px] text-white/30 font-mono">Wei AI v2.5.0 (Neon Edition)</p>
+           </div>
+       </div>
+    </div>
+  );
+};
+
+export default Profile;