src/common/components/layout/MyPageContainer.tsx

@@ -4,6 +4,8 @@ import { history, useLocation } from '@umijs/max';
 import type { MenuProps } from 'antd';
 import { Dropdown, message, Space, Tabs } from 'antd';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useMyState } from '@/common';
+import AvatarProps from './AvatarProps';
 import './MyPageContainer.scss';
 
 export interface TabItem {
@@ -198,6 +200,7 @@ export function MyPageContainer({
   ...rest
 }: MyPageContainerProps) {
   const location = useLocation();
+  const { snap } = useMyState();
   const [tabs, setTabs] = useState<TabItem[]>([]);
   const [activeKey, setActiveKey] = useState<string>('');
   const contextMenuRef = useRef<{
@@ -206,6 +209,33 @@ export function MyPageContainer({
     targetKey: string;
   } | null>(null);
 
+  // 用户下拉菜单配置
+  const userMenuItems: 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';
+      },
+    },
+  ];
+
   // 订阅标签页状态变化
   useEffect(() => {
     const unsubscribe = tabsManager.subscribe(() => {
@@ -358,6 +388,9 @@ export function MyPageContainer({
       fixedHeader
       header={{
         title: (
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }}>
+            {/* 左侧：Tabs标签页 */}
+            <div style={{ flex: 1 }}>
               <Tabs
                 type="editable-card"
                 activeKey={activeKey}
@@ -377,6 +410,16 @@ export function MyPageContainer({
                 }}
                 className="tabs-header-only"
               />
+            </div>
+            {/* 右侧：用户信息 */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+              <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
+                <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
+                  <AvatarProps user={snap.session.user} />
+                </div>
+              </Dropdown>
+            </div>
+          </div>
         ),
         style: { backgroundColor: '#FFF' },
       }}

src/global.less

@@ -61,13 +61,13 @@ div[class*="page-container-header"],
   left: 220px !important; /* 侧边栏宽度 */
   z-index: 999 !important;
   margin: 0 !important;
-  padding: 6px 24px !important;
+  padding: 8px 24px !important; /* 增加padding */
   background: #ffffff !important;
   border-bottom: 1px solid #f0f0f0 !important;
   box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
   height: auto !important;
-  min-height: 36px !important;
-  max-height: 48px !important;
+  min-height: 40px !important;
+  max-height: 52px !important;
   display: flex !important;
   align-items: center !important;
 }
@@ -85,9 +85,9 @@ div[class*="page-container-header"],
   left: 220px !important;
   z-index: 999 !important;
   margin: 0 !important;
-  padding: 6px 24px !important;
-  min-height: 36px !important;
-  max-height: 48px !important;
+  padding: 8px 24px !important;
+  min-height: 40px !important;
+  max-height: 52px !important;
   display: flex !important;
   align-items: center !important;
 }