Update web/src/components/RightPanel.tsx

web/src/components/RightPanel.tsx

@@ -20,7 +20,7 @@ import {
 
 interface RightPanelProps {
   user: User | null;
-  onLogin: (name: string, email: string) => void; // CHANGED
+  onLogin: (name: string, emailOrId: string) => Promise<void>;
   onLogout: () => void;
   isLoggedIn: boolean;
   onClose?: () => void;
@@ -44,20 +44,27 @@ export function RightPanel({
 }: RightPanelProps) {
   const [showLoginForm, setShowLoginForm] = useState(false);
   const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
+  const [emailOrId, setEmailOrId] = useState('');
+  const [isLoggingIn, setIsLoggingIn] = useState(false);
+
   const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
   const [feedbackText, setFeedbackText] = useState('');
   const [feedbackCategory, setFeedbackCategory] = useState<'general' | 'bug' | 'feature'>('general');
 
-  const handleLoginClick = () => {
-    if (!name.trim() || !email.trim()) {
+  const handleLoginClick = async () => {
+    if (!name.trim() || !emailOrId.trim()) {
       toast.error('Please fill in all fields');
       return;
     }
-    onLogin(name.trim(), email.trim());
-    setShowLoginForm(false);
-    setName('');
-    setEmail('');
+    try {
+      setIsLoggingIn(true);
+      await onLogin(name.trim(), emailOrId.trim());
+      setShowLoginForm(false);
+      setName('');
+      setEmailOrId('');
+    } finally {
+      setIsLoggingIn(false);
+    }
   };
 
   const handleLogoutClick = () => {
@@ -70,6 +77,7 @@ export function RightPanel({
       toast.error('Please provide feedback text');
       return;
     }
+    // 这里是“产品总体反馈”，不是 message-level feedback
     console.log('Feedback submitted:', feedbackText, feedbackCategory);
     setFeedbackDialogOpen(false);
     setFeedbackText('');
@@ -97,23 +105,27 @@ export function RightPanel({
               <div className="space-y-3">
                 <div className="space-y-2">
                   <Label htmlFor="name">Name</Label>
-                  <Input id="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" />
+                  <Input
+                    id="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Enter your name"
+                  />
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor="email">Email / Student ID</Label>
+                  <Label htmlFor="emailOrId">Email / Student ID</Label>
                   <Input
-                    id="email"
-                    type="email"
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
+                    id="emailOrId"
+                    value={emailOrId}
+                    onChange={(e) => setEmailOrId(e.target.value)}
                     placeholder="Enter your email or ID"
                   />
                 </div>
                 <div className="flex gap-2">
-                  <Button onClick={handleLoginClick} className="flex-1">
-                    Enter
+                  <Button onClick={handleLoginClick} className="flex-1" disabled={isLoggingIn}>
+                    {isLoggingIn ? 'Logging in...' : 'Enter'}
                   </Button>
-                  <Button variant="outline" onClick={() => setShowLoginForm(false)}>
+                  <Button variant="outline" onClick={() => setShowLoginForm(false)} disabled={isLoggingIn}>
                     Cancel
                   </Button>
                 </div>
@@ -181,7 +193,11 @@ export function RightPanel({
 
       <div className="space-y-3">
         <h3>Feedback</h3>
-        <Button variant="outline" className="w-full justify-start gap-2" onClick={() => setFeedbackDialogOpen(true)}>
+        <Button
+          variant="outline"
+          className="w-full justify-start gap-2"
+          onClick={() => setFeedbackDialogOpen(true)}
+        >
           <MessageSquare className="h-4 w-4" />
           Provide Feedback
         </Button>
@@ -232,4 +248,3 @@ export function RightPanel({
     </div>
   );
 }
-