退出登录

src/components/layout/TopBar.tsx

@@ -1,37 +1,72 @@
 
+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) => (
-  <header className='flex items-center gap-3 p-2 border-b bg-white'>
-    <div className='flex-1 flex items-center gap-3'>
-      {enableSearch ? (
-        <div className='w-[420px] max-w-[60vw] h-[36px] flex items-center'>
-          {/* <Input
-            placeholder='搜索 姓名 / 证件号 / 手机号'
-            value={search}
-            onChange={(e) => onSearch(e.target.value)}
-            className='text-sm'
-          /> */}
-        </div>
-      ) : (
-        <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'>
-      <button
-        onClick={onLoginClick}
-        className='px-3 py-1 rounded-2xl border bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer'
-      >
-        操作员 · {operatorName || '未登录'}
-      </button>
-    </div>
-  </header>
-);
+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 ? (
+          <div className='w-[420px] max-w-[60vw] h-[36px] flex items-center'>
+            {/* <Input
+              placeholder='搜索 姓名 / 证件号 / 手机号'
+              value={search}
+              onChange={(e) => onSearch(e.target.value)}
+              className='text-sm'
+            /> */}
+          </div>
+        ) : (
+          <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 relative'>
+        <button
+          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'
+        >
+          操作员 · {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>
+  );
+};