feat: 添加登录和注册按钮功能

app/components/auth/LoginDialog.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { Dialog, DialogTitle, DialogDescription } from '~/components/ui/Dialog';
+import { Login } from '~/components/auth/Login';
+
+interface LoginDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function LoginDialog({ isOpen, onClose }: LoginDialogProps) {
+  return (
+    <Dialog onClose={onClose}>
+      {isOpen && (
+        <>
+          <DialogTitle>登录</DialogTitle>
+          <DialogDescription>
+            <Login />
+          </DialogDescription>
+        </>
+      )}
+    </Dialog>
+  );
+}

app/components/auth/RegisterDialog.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+import { Dialog, DialogTitle, DialogDescription } from '~/components/ui/Dialog';
+import { Register } from '~/components/auth/Register';
+
+interface RegisterDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function RegisterDialog({ isOpen, onClose }: RegisterDialogProps) {
+  return (
+    <Dialog onClose={onClose}>
+      {isOpen && (
+        <>
+          <DialogTitle>注册</DialogTitle>
+          <DialogDescription>
+            <Register />
+          </DialogDescription>
+        </>
+      )}
+    </Dialog>
+  );
+}

app/components/header/Header.tsx

@@ -4,14 +4,19 @@ import { chatStore } from '~/lib/stores/chat';
 import { classNames } from '~/utils/classNames';
 import { HeaderActionButtons } from './HeaderActionButtons.client';
 import { ChatDescription } from '~/lib/persistence/ChatDescription.client';
+import { useState } from 'react';
+import { LoginDialog } from '~/components/auth/LoginDialog';
+import { RegisterDialog } from '~/components/auth/RegisterDialog';
 
 export function Header() {
   const chat = useStore(chatStore);
+  const [isLoginOpen, setIsLoginOpen] = useState(false);
+  const [isRegisterOpen, setIsRegisterOpen] = useState(false);
 
   return (
     <header
       className={classNames(
-        'flex items-center bg-bolt-elements-background-depth-1 p-5 border-b h-[var(--header-height)]',
+        'flex items-center justify-between bg-bolt-elements-background-depth-1 p-5 border-b h-[var(--header-height)]',
         {
           'border-transparent': !chat.started,
           'border-bolt-elements-borderColor': chat.started,
@@ -27,15 +32,32 @@ export function Header() {
       <span className="flex-1 px-4 truncate text-center text-bolt-elements-textPrimary">
         <ClientOnly>{() => <ChatDescription />}</ClientOnly>
       </span>
-      {chat.started && (
+      <div className="flex items-center gap-4">
-        <ClientOnly>
+        {chat.started && (
-          {() => (
+          <ClientOnly>
-            <div className="mr-1">
+            {() => (
-              <HeaderActionButtons />
+              <div className="mr-1">
-            </div>
+                <HeaderActionButtons />
-          )}
+              </div>
-        </ClientOnly>
+            )}
-      )}
+          </ClientOnly>
+        )}
+        <button 
+          onClick={() => setIsLoginOpen(true)}
+          className="text-bolt-elements-textPrimary hover:text-bolt-elements-textSecondary transition-colors"
+        >
+          登录
+        </button>
+        <button 
+          onClick={() => setIsRegisterOpen(true)}
+          className="text-bolt-elements-textPrimary hover:text-bolt-elements-textSecondary transition-colors"
+        >
+          注册
+        </button>
+      </div>
+
+      <LoginDialog isOpen={isLoginOpen} onClose={() => setIsLoginOpen(false)} />
+      <RegisterDialog isOpen={isRegisterOpen} onClose={() => setIsRegisterOpen(false)} />
     </header>
   );
 }