添加用户资料点击逻辑，更新页面UI

course-web/src/pages/DashboardPage.jsx

@@ -5,6 +5,7 @@ import { AudioEngine } from '../utils/audioEngine';
 import { TimelineView } from '../components/views/TimelineView';
 import { ScriptView } from '../components/views/ScriptView';
 import { PathView } from '../components/views/PathView';
+import { UserMenu } from '../components/UserMenu';
 import { 
     Compass, 
     BookOpen, 
@@ -24,6 +25,7 @@ export function DashboardPage() {
     const [activeTab, setActiveTab] = useState('timeline');
     const [isMusicPlaying, setIsMusicPlaying] = useState(false);
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+    const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
 
     // Initialize Audio Engine state based on store
     useEffect(() => {
@@ -55,32 +57,40 @@ export function DashboardPage() {
             className={clsx(
                 "w-full text-left px-4 py-3 rounded-xl flex items-center gap-3 transition-all duration-300 relative overflow-hidden group",
                 activeTab === tab 
-                ? "bg-primary/20 text-primary font-bold shadow-[0_0_15px_rgba(16,185,129,0.1)] border border-primary/20" 
-                : "text-gray-400 hover:text-white hover:bg-white/5 border border-transparent"
+                ? "bg-primary/20 text-primary font-bold shadow-[0_0_15px_rgba(205,133,63,0.1)] border border-primary/20" 
+                : "text-gray-400 hover:text-primary hover:bg-white/5 border border-transparent"
             )}
         >
-            <Icon className={clsx("w-5 h-5 transition-transform", activeTab === tab ? "text-primary" : "text-gray-400 group-hover:text-white", activeTab !== tab && "group-hover:scale-110")} />
+            <Icon className={clsx("w-5 h-5 transition-transform", activeTab === tab ? "text-primary" : "text-gray-400 group-hover:text-primary", activeTab !== tab && "group-hover:scale-110")} />
             <span className="hidden md:inline">{label}</span>
             <span className="md:hidden">{mobileLabel || label}</span>
             {activeTab === tab && (
-                <div className="absolute right-0 top-0 bottom-0 w-1 bg-primary shadow-[0_0_10px_#10b981]"></div>
+                <div className="absolute right-0 top-0 bottom-0 w-1 bg-primary shadow-[0_0_10px_rgba(205,133,63,0.8)]"></div>
             )}
         </button>
     );
 
     return (
         <div className="min-h-screen flex flex-col md:flex-row transition-all duration-500 font-sans text-gray-100 bg-deep-sea overflow-hidden">
-            {/* Ambient Background */}
+            {/* Ambient Background - Additional Layer for Dashboard with Blue Gradient */}
             <div className="fixed inset-0 pointer-events-none z-0">
-                <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_50%_50%,rgba(16,185,129,0.05),transparent_50%)]"></div>
-                <div className="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-primary/5 rounded-full blur-[120px] animate-pulse-slow"></div>
+                {/* Blue gradient overlay on left */}
+                <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_20%_50%,rgba(30,58,95,0.15),transparent_60%)]"></div>
+                {/* Subtle radial gradient overlay */}
+                <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_30%_50%,rgba(205,133,63,0.08),transparent_70%)]"></div>
+                <div className="absolute top-0 right-0 w-full h-full bg-[radial-gradient(circle_at_70%_50%,rgba(255,140,0,0.06),transparent_65%)]"></div>
+                {/* Blue glow effects on left */}
+                <div className="absolute top-[20%] left-[15%] w-[40%] h-[40%] bg-blue-700/10 rounded-full blur-[120px] animate-pulse-slow"></div>
+                <div className="absolute bottom-[20%] left-[10%] w-[35%] h-[35%] bg-cyan-800/8 rounded-full blur-[100px] animate-float"></div>
+                {/* Subtle glow effects on right */}
+                <div className="absolute top-[25%] right-[25%] w-[35%] h-[35%] bg-orange-800/8 rounded-full blur-[120px] animate-pulse-slow"></div>
             </div>
 
             {/* Mobile Header */}
-            <div className="md:hidden bg-black/20 backdrop-blur-xl border-b border-white/10 p-4 flex justify-between items-center z-50 relative">
+            <div className="md:hidden bg-black/15 backdrop-blur-xl border-b border-white/10 p-4 flex justify-between items-center z-50 relative">
                 <div className="flex items-center gap-2 font-bold text-lg">
                     <Compass className="text-primary w-6 h-6 animate-spin-slow" />
-                    <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">人生轨迹</span>
+                    <span className="text-gold-gradient">人生OS</span>
                 </div>
                 <button onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
                     {isMobileMenuOpen ? <X className="text-white" /> : <Menu className="text-white" />}
@@ -89,47 +99,50 @@ export function DashboardPage() {
 
             {/* Sidebar (Desktop) / Drawer (Mobile) */}
             <nav className={clsx(
-                "bg-black/20 backdrop-blur-xl border-r border-white/10 w-full md:w-72 flex-shrink-0 flex flex-col justify-between z-40 fixed md:relative h-[calc(100vh-64px)] md:h-screen top-16 md:top-0 left-0 transition-transform duration-300",
+                "bg-black/15 backdrop-blur-xl border-r border-white/10 w-full md:w-72 flex-shrink-0 flex flex-col justify-between z-40 fixed md:relative h-[calc(100vh-64px)] md:h-screen top-16 md:top-0 left-0 transition-transform duration-300",
                 isMobileMenuOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
             )}>
                 {/* Background Decoration */}
                 <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-primary/5 pointer-events-none"></div>
 
                 <div className="p-6 overflow-y-auto relative z-10">
-                    <h1 className="hidden md:flex text-2xl font-bold tracking-wider mb-8 items-center gap-3 text-transparent bg-clip-text bg-gradient-to-r from-primary to-white">
-                        <Compass className="text-primary stroke-2 animate-spin-slow" /> 人生轨迹
+                    <h1 className="hidden md:flex text-2xl font-bold tracking-wider mb-8 items-center gap-3 text-gold-gradient">
+                        <Compass className="text-primary stroke-2 animate-spin-slow" /> 人生OS
                     </h1>
                     
                     {/* User Card */}
-                    <div className="flex items-center gap-4 mb-8 p-4 bg-white/5 rounded-2xl backdrop-blur-sm border border-white/10 hover:bg-white/10 transition-colors cursor-default group">
+                    <button
+                        onClick={() => setIsUserMenuOpen(!isUserMenuOpen)}
+                        className="flex items-center gap-4 mb-8 p-4 bg-white/5 rounded-2xl backdrop-blur-sm border border-white/10 hover:bg-white/10 transition-colors cursor-pointer group w-full text-left"
+                    >
                         <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-blue-600 flex items-center justify-center text-white font-bold text-xl shadow-inner relative overflow-hidden group-hover:scale-105 transition-transform shrink-0 border border-white/20">
                             {data.userProfile.nickname?.[0] || 'U'}
                             <div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                         </div>
-                        <div className="overflow-hidden">
-                            <div className="font-bold text-white truncate">{data.userProfile.nickname || '旅人'}</div>
+                        <div className="overflow-hidden flex-1">
+                            <div className="font-bold text-gray-100 truncate">{data.userProfile.nickname || '旅人'}</div>
                             <div className="text-xs text-primary flex items-center gap-1.5 mt-0.5">
-                                <span className="w-1.5 h-1.5 rounded-full bg-primary shadow-[0_0_5px_rgba(16,185,129,0.5)] animate-pulse"></span>
-                                {data.userProfile.mbti} · {data.userProfile.zodiac || '未知'}
+                                <span className="w-1.5 h-1.5 rounded-full bg-primary shadow-[0_0_5px_rgba(205,133,63,0.5)] animate-pulse"></span>
+                                {data.userProfile.mbti || '未知'} · {data.userProfile.zodiac || '未知'}
                             </div>
                         </div>
-                    </div>
+                    </button>
                     
                     {/* Navigation */}
                     <div className="space-y-2">
-                        <NavButton tab="timeline" icon={BookOpen} label="时空日记" mobileLabel="日记" />
-                        <NavButton tab="script" icon={Film} label="剧本生成器" mobileLabel="剧本" />
+                        <NavButton tab="timeline" icon={BookOpen} label="人生轨迹" mobileLabel="轨迹" />
+                        <NavButton tab="script" icon={Film} label="爽文剧本" mobileLabel="剧本" />
                         <NavButton tab="path" icon={Map} label="实现路径" mobileLabel="路径" />
                     </div>
                 </div>
                 
-                <div className="p-6 text-xs text-gray-500 border-t border-white/5 space-y-4 bg-black/40 backdrop-blur-md md:bg-transparent relative z-10">
+                <div className="p-6 text-xs text-gray-500 border-t border-white/5 space-y-4 bg-black/20 backdrop-blur-md md:bg-transparent relative z-10">
                      {/* Music Player */}
                     <button 
                         onClick={handleMusicToggle}
                         className={clsx(
                             "flex items-center justify-between w-full px-4 py-3 rounded-xl bg-white/5 hover:bg-white/10 transition-all border group",
-                            isMusicPlaying ? "border-primary/30 shadow-[0_0_10px_rgba(16,185,129,0.1)]" : "border-white/5"
+                            isMusicPlaying ? "border-primary/30 shadow-[0_0_10px_rgba(205,133,63,0.1)]" : "border-white/5"
                         )}
                     >
                         <div className="flex items-center gap-3 text-gray-300">
@@ -163,6 +176,16 @@ export function DashboardPage() {
                 {activeTab === 'script' && <ScriptView onSwitchToPath={() => setActiveTab('path')} />}
                 {activeTab === 'path' && <PathView onSwitchToScript={() => setActiveTab('script')} />}
             </main>
+
+            {/* User Menu */}
+            <UserMenu
+                isOpen={isUserMenuOpen}
+                onClose={() => setIsUserMenuOpen(false)}
+                onLogout={() => {
+                    // 退出登录后，App.jsx 会检测到 onboardingComplete 变为 false，自动跳转到登录页
+                    window.location.reload();
+                }}
+            />
         </div>
     );
 }

course-web/src/pages/LandingPage.jsx

@@ -93,7 +93,7 @@ export function LandingPage({ onStart }) {
         </div>
         
         <h1 className="text-4xl md:text-6xl font-bold text-white tracking-tight landing-title">
-          人生轨迹
+          人生OS
           <span className="block text-xl md:text-2xl font-light mt-4 text-primary/80">Life Trajectory</span>
         </h1>
         
@@ -113,7 +113,7 @@ export function LandingPage({ onStart }) {
                 variant="primary"
                 size="lg"
                 onClick={() => setShowLoginModal(true)}
-                className="w-full shadow-[0_0_20px_rgba(16,185,129,0.3)] hover:shadow-[0_0_30px_rgba(16,185,129,0.5)] transition-all"
+                className="w-full shadow-[0_0_20px_rgba(205,133,63,0.3)] hover:shadow-[0_0_30px_rgba(205,133,63,0.5)] transition-all"
               >
                 登录账号
               </Button>

course-web/src/pages/OnboardingPage.jsx

@@ -171,7 +171,7 @@ export function OnboardingPage({ onFinish }) {
                     {[0,1,2,3,4].map(i => (
                         <div key={i} className={clsx(
                             "h-1 rounded-full transition-all duration-500",
-                            i <= step ? 'w-8 bg-primary shadow-[0_0_10px_rgba(42,157,143,0.5)]' : 'w-2 bg-white/10'
+                            i <= step ? 'w-8 bg-primary shadow-[0_0_10px_rgba(205,133,63,0.5)]' : 'w-2 bg-white/10'
                         )}></div>
                     ))}
                 </div>