退出登录

src/components/layout/TopBar.tsx

@@ -1,13 +1,31 @@
 
+import { useEffect, useState } from 'react';
+
 interface TopBarProps {
   search: string;
   onSearch: (value: string) => void;
   enableSearch?: boolean;
   operatorName?: string;
   onLoginClick?: () => void;
+  onLogout?: () => void;
 }
 
-export const TopBar = ({ enableSearch = true, operatorName, onLoginClick }: TopBarProps) => (
+export const TopBar = ({ enableSearch = true, operatorName, onLoginClick, onLogout }: TopBarProps) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const [displayName, setDisplayName] = useState(operatorName || '');
+
+  useEffect(() => {
+    setDisplayName(operatorName || '');
+  }, [operatorName]);
+
+  const handleLogout = () => {
+    localStorage.clear();
+    setDisplayName('');
+    setShowMenu(false);
+    onLogout?.();
+  };
+
+  return (
     <header className='flex items-center gap-3 p-2 border-b bg-white'>
       <div className='flex-1 flex items-center gap-3'>
         {enableSearch ? (
@@ -23,15 +41,32 @@ export const TopBar = ({ enableSearch = true, operatorName, onLoginClick }: TopB
           <div className='text-sm text-gray-500 flex items-center p-[9px] pl-[14px]'>圆和医疗 · 体检驾驶舱</div>
         )}
       </div>
-    <div className='flex items-center gap-3 text-xs'>
+      <div className='flex items-center gap-3 text-xs relative'>
         <button
-        onClick={onLoginClick}
+          onClick={() => {
+            if (!operatorName) {
+              onLoginClick?.();
+              return;
+            }
+            setShowMenu((v) => !v);
+          }}
           className='px-3 py-1 rounded-2xl border bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer'
         >
-        操作员 · {operatorName || '未登录'}
+          操作员 · {displayName || '未登录'}
         </button>
+        {displayName && showMenu && (
+          <div className='absolute right-0 top-[110%] w-32 bg-white border rounded-lg shadow-lg py-2 z-10'>
+            <button
+              onClick={handleLogout}
+              className='w-full text-left px-3 py-2 text-[13px] hover:bg-gray-50'
+            >
+              退出登录
+            </button>
+          </div>
+        )}
       </div>
     </header>
   );
+};