diff --git a/src/common/components/layout/CustomHeader.tsx b/src/common/components/layout/CustomHeader.tsx
new file mode 100644
index 0000000..5af5c2f
--- /dev/null
+++ b/src/common/components/layout/CustomHeader.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Layout, Dropdown } from 'antd';
+import type { MenuProps } from 'antd';
+import AvatarProps from './AvatarProps';
+import { useMyState } from '@/common';
+
+const { Header } = Layout;
+
+interface CustomHeaderProps {
+  collapsed?: boolean;
+  toggle?: () => void;
+}
+
+export const CustomHeader: React.FC<CustomHeaderProps> = ({ collapsed, toggle }) => {
+  const { snap } = useMyState();
+
+  const menuItems: MenuProps['items'] = [
+    {
+      key: 'profile',
+      label: '个人资料',
+      icon: <span>👤</span>,
+    },
+    {
+      key: 'password',
+      label: '修改密码',
+      icon: <span>🔒</span>,
+    },
+    {
+      type: 'divider',
+    },
+    {
+      key: 'logout',
+      label: '退出登录',
+      icon: <span>🚪</span>,
+      danger: true,
+      onClick: () => {
+        // 添加退出登录逻辑
+        localStorage.removeItem('token');
+        window.location.href = '/login';
+      },
+    },
+  ];
+
+  return (
+    <Header className="custom-header">
+      {/* 左侧区域 */}
+      <div className="header-left">
+        {/* 可以添加面包屑导航或其他内容 */}
+      </div>
+
+      {/* 右侧用户信息区域 */}
+      <div className="header-right">
+        <Dropdown menu={{ items: menuItems }} placement="bottomRight">
+          <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+            <AvatarProps user={snap.session.user} />
+          </div>
+        </Dropdown>
+      </div>
+    </Header>
+  );
+};
+
+// Styles will be defined in global.less:
+// .custom-header { display: flex; justify-content: space-between; ... }
+// .custom-header .header-left { flex: 1; }
+// .custom-header .header-right { display: flex; gap: 16px; }