diff --git a/src/common/components/layout/MyPageContainer.tsx b/src/common/components/layout/MyPageContainer.tsx index 24db5a2..5883f18 100644 --- a/src/common/components/layout/MyPageContainer.tsx +++ b/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([]); const [activeKey, setActiveKey] = useState(''); const contextMenuRef = useRef<{ @@ -206,6 +209,33 @@ export function MyPageContainer({ targetKey: string; } | null>(null); + // 用户下拉菜单配置 + const userMenuItems: MenuProps['items'] = [ + { + key: 'profile', + label: '个人资料', + icon: 👤, + }, + { + key: 'password', + label: '修改密码', + icon: 🔒, + }, + { + type: 'divider', + }, + { + key: 'logout', + label: '退出登录', + icon: 🚪, + danger: true, + onClick: () => { + localStorage.removeItem('token'); + window.location.href = '/login'; + }, + }, + ]; + // 订阅标签页状态变化 useEffect(() => { const unsubscribe = tabsManager.subscribe(() => { @@ -358,25 +388,38 @@ export function MyPageContainer({ fixedHeader header={{ title: ( - ({ - key: tab.key, - label: tab.label, - closable: tab.closable, - }))} - style={{ - marginTop: 6, - marginBottom: 0, - }} - className="tabs-header-only" - /> +
+ {/* 左侧:Tabs标签页 */} +
+ ({ + key: tab.key, + label: tab.label, + closable: tab.closable, + }))} + style={{ + marginTop: 6, + marginBottom: 0, + }} + className="tabs-header-only" + /> +
+ {/* 右侧:用户信息 */} +
+ +
+ +
+
+
+
), style: { backgroundColor: '#FFF' }, }} diff --git a/src/global.less b/src/global.less index 154e60b..024f58f 100644 --- a/src/global.less +++ b/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; }