UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-06-26 18:17:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 增加用户头像和昵称显示功能

Browse Source
This commit is contained in:
zyh 2024-10-22 04:47:04 +00:00
parent 7c7473265c
commit e9ed7c924b
4 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
app/components/header/Header.tsx
View File

@ -7,11 +7,14 @@ import { ChatDescription } from '~/lib/persistence/ChatDescription.client';
import { useState } from 'react';
import { LoginDialog } from '~/components/auth/LoginDialog';
import { RegisterDialog } from '~/components/auth/RegisterDialog';
import { useAuth } from '~/hooks/useAuth';
import { Avatar } from '~/components/ui/Avatar';
export function Header() {
const chat = useStore(chatStore);
const [isLoginOpen, setIsLoginOpen] = useState(false);
const [isRegisterOpen, setIsRegisterOpen] = useState(false);
const { isAuthenticated, user } = useAuth();
return (
<header
@ -42,18 +45,27 @@ export function Header() {
)}
</ClientOnly>
)}
<button
onClick={() => setIsLoginOpen(true)}
className="px-4 py-2 text-sm font-medium text-bolt-elements-button-secondary-text bg-bolt-elements-button-secondary-background hover:bg-bolt-elements-button-secondary-backgroundHover rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-secondary-background"
>
登录
</button>
<button
onClick={() => setIsRegisterOpen(true)}
className="px-4 py-2 text-sm font-medium text-bolt-elements-button-primary-text bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-primary-background"
>
注册
</button>
{isAuthenticated && user ? (
<div className="flex items-center gap-2">
<Avatar src={user.avatarUrl} alt={user.nickname} />
<span className="text-sm font-medium text-bolt-elements-textPrimary">{user.nickname}</span>
</div>
) : (
<>
<button
onClick={() => setIsLoginOpen(true)}
className="px-4 py-2 text-sm font-medium text-bolt-elements-button-secondary-text bg-bolt-elements-button-secondary-background hover:bg-bolt-elements-button-secondary-backgroundHover rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-secondary-background"
>
登录
</button>
<button
onClick={() => setIsRegisterOpen(true)}
className="px-4 py-2 text-sm font-medium text-bolt-elements-button-primary-text bg-bolt-elements-button-primary-background hover:bg-bolt-elements-button-primary-backgroundHover rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-primary-background"
>
注册
</button>
</>
)}
</div>
<LoginDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />

17
app/components/ui/Avatar.tsx Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
interface AvatarProps {
src: string;
alt: string;
className?: string;
}
export function Avatar({ src, alt, className = '' }: AvatarProps) {
return (
<img
src={src}
alt={alt}
className={`w-8 h-8 rounded-full object-cover ${className}`}
/>
);
}

4
app/hooks/useAuth.ts
View File

@ -10,6 +10,7 @@ interface User {
export function useAuth() {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [user, setUser] = useState<User | null>(null);
const navigate = useNavigate();
@ -20,6 +21,7 @@ export function useAuth() {
setIsAuthenticated(true);
setUser(JSON.parse(storedUser));
}
setIsLoading(false);
}, []);
const login = (token: string, userData: User) => {
@ -37,5 +39,5 @@ export function useAuth() {
navigate('/login');
};
return { isAuthenticated, user, login, logout };
return { isAuthenticated, isLoading, user, login, logout };
}

2
app/root.tsx
View File

@ -77,7 +77,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
</>
);
}
export default function App() {
return <Outlet />;
}