diff --git a/src/components/auth/UserMenu.tsx b/src/components/auth/UserMenu.tsx new file mode 100644 index 0000000..a6ad75e --- /dev/null +++ b/src/components/auth/UserMenu.tsx @@ -0,0 +1,85 @@ +import { useState } from 'react' +import { User, LogOut, Cloud, Key } from 'lucide-react' +import { useAppStore } from '../../stores/appStore' +import { LoginModal } from './LoginModal' + +export function UserMenu() { + const { currentUser, logout, syncStatus, syncFromCloud } = useAppStore() + const [showLogin, setShowLogin] = useState(false) + const [showActivate, setShowActivate] = useState(false) + + if (!currentUser) { + return ( + <> + setShowLogin(true)} + className="flex items-center gap-2 w-full px-3 py-2 rounded-lg text-xs transition-all" + style={{ color: 'var(--text-faint)', background: 'transparent' }} + onMouseEnter={e => (e.currentTarget.style.background = 'var(--bg-muted)')} + onMouseLeave={e => (e.currentTarget.style.background = 'transparent')} + > + + 登录 / 注册 + + {showLogin && setShowLogin(false)} />} + > + ) + } + + return ( + <> + + + + + {currentUser.username[0].toUpperCase()} + + + {currentUser.username} + + + (e.currentTarget.style.color = 'var(--text)')} + onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-faint)')} + > + + + + + {currentUser.cloudEnabled ? ( + + + {syncStatus === 'syncing' ? '同步中…' : syncStatus === 'error' ? '同步失败' : '云端已开启'} + + ) : ( + setShowActivate(true)} + className="flex items-center gap-1.5 text-xs" + style={{ color: 'var(--text-faint)' }} + onMouseEnter={e => (e.currentTarget.style.color = 'var(--accent)')} + onMouseLeave={e => (e.currentTarget.style.color = 'var(--text-faint)')} + > + + 输入邀请码开启云存储 + + )} + + + {showActivate && ( + setShowActivate(false)} /> + )} + > + ) +}