退出登录

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) => (
+export const TopBar = ({ enableSearch = true, operatorName, onLoginClick, onLogout }: TopBarProps) => {
-  <header className='flex items-center gap-3 p-2 border-b bg-white'>
+  const [showMenu, setShowMenu] = useState(false);
-    <div className='flex-1 flex items-center gap-3'>
+  const [displayName, setDisplayName] = useState(operatorName || '');
-      {enableSearch ? (
+
-        <div className='w-[420px] max-w-[60vw] h-[36px] flex items-center'>
+  useEffect(() => {
-          {/* <Input
+    setDisplayName(operatorName || '');
-            placeholder='搜索 姓名 / 证件号 / 手机号'
+  }, [operatorName]);
-            value={search}
+
-            onChange={(e) => onSearch(e.target.value)}
+  const handleLogout = () => {
-            className='text-sm'
+    localStorage.clear();
-          /> */}
+    setDisplayName('');
-        </div>
+    setShowMenu(false);
-      ) : (
+    onLogout?.();
-        <div className='text-sm text-gray-500 flex items-center p-[9px] pl-[14px]'>圆和医疗 · 体检驾驶舱</div>
+  };
-      )}
+
-    </div>
+  return (
-    <div className='flex items-center gap-3 text-xs'>
+    <header className='flex items-center gap-3 p-2 border-b bg-white'>
-      <button
+      <div className='flex-1 flex items-center gap-3'>
-        onClick={onLoginClick}
+        {enableSearch ? (
-        className='px-3 py-1 rounded-2xl border bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer'
+          <div className='w-[420px] max-w-[60vw] h-[36px] flex items-center'>
-      >
+            {/* <Input
-        操作员 · {operatorName || '未登录'}
+              placeholder='搜索 姓名 / 证件号 / 手机号'
-      </button>
+              value={search}
-    </div>
+              onChange={(e) => onSearch(e.target.value)}
-  </header>
+              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>
+  );
+};