diff --git a/rhj/frontend/src/components/LogoutButton/LogoutButton.js b/rhj/frontend/src/components/LogoutButton/LogoutButton.js
new file mode 100644
index 0000000..5681927
--- /dev/null
+++ b/rhj/frontend/src/components/LogoutButton/LogoutButton.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { Button, Modal } from 'antd';
+import { LogoutOutlined } from '@ant-design/icons';
+import { clearAuthInfo, getUserInfo } from '../../utils/auth';
+
+const LogoutButton = ({ style = {}, onLogout = null }) => {
+  const userInfo = getUserInfo();
+
+  const handleLogout = () => {
+    Modal.confirm({
+      title: '确认退出',
+      content: '您确定要退出登录吗？',
+      okText: '确定',
+      cancelText: '取消',
+      onOk: () => {
+        // 清除认证信息，但保留记住的登录信息
+        clearAuthInfo(false);
+        
+        // 执行回调函数
+        if (onLogout) {
+          onLogout();
+        } else {
+          // 默认跳转到登录页
+          window.location.href = '/';
+        }
+      }
+    });
+  };
+
+  const handleCompleteLogout = () => {
+    Modal.confirm({
+      title: '完全退出',
+      content: '这将清除所有保存的登录信息，包括"记住我"的设置。确定要继续吗？',
+      okText: '确定',
+      cancelText: '取消',
+      onOk: () => {
+        // 清除所有认证信息，包括记住的登录信息
+        clearAuthInfo(true);
+        
+        // 执行回调函数
+        if (onLogout) {
+          onLogout();
+        } else {
+          // 默认跳转到登录页
+          window.location.href = '/';
+        }
+      }
+    });
+  };
+
+  if (!userInfo) {
+    return null;
+  }
+
+  return (
+    <div style={style}>
+      <Button 
+        type="default" 
+        icon={<LogoutOutlined />}
+        onClick={handleLogout}
+        style={{ marginRight: 8 }}
+      >
+        退出登录
+      </Button>
+      <Button 
+        type="link" 
+        size="small"
+        onClick={handleCompleteLogout}
+        style={{ color: '#ff4d4f' }}
+      >
+        完全退出
+      </Button>
+    </div>
+  );
+};
+
+export default LogoutButton;