修改后台用户管理界面位置

This commit is contained in:
2026-06-18 15:35:41 +08:00
parent b18ed96774
commit daf3d491ea
+60 -42
View File
@@ -261,7 +261,7 @@ const AdminLayout: React.FC = () => {
</div>
{/* Menu */}
<div style={{ overflowY: 'auto', maxHeight: 'calc(100vh - 120px)', paddingRight: 8 }}>
<div style={{ overflowY: 'auto', maxHeight: 'calc(100vh - 200px)', paddingRight: 8 }}>
<Menu
mode="inline"
selectedKeys={[activeKey]}
@@ -281,6 +281,65 @@ const AdminLayout: React.FC = () => {
/>
</div>
{/* User Actions - moved to bottom of sidebar */}
<div style={{
position: 'absolute',
bottom: 16,
left: 16,
right: 16,
padding: 12,
background: 'linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%)',
borderRadius: 12,
border: '1px solid rgba(0, 0, 0, 0.06)',
}}>
<Dropdown menu={{
items: [
{ key: 'user', icon: <UserOutlined />, label: user?.username, disabled: true },
{ type: 'divider' as const },
{ key: 'changePwd', icon: <LockOutlined />, label: '修改密码' },
{ key: 'logout', icon: <LogoutOutlined />, label: '退出登录', danger: true },
],
onClick: ({ key }) => {
if (key === 'logout') { logout(); navigate('/login'); }
if (key === 'changePwd') { setPwdModal(true); pwdForm.resetFields(); }
},
}} placement="topRight" arrow>
<div style={{
display: 'flex',
alignItems: 'center',
gap: 10,
cursor: 'pointer',
padding: '8px 12px',
borderRadius: 12,
transition: 'all 0.25s ease',
background: 'transparent',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#ffffff';
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.08)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'transparent';
e.currentTarget.style.boxShadow = 'none';
}}
>
<Avatar size={32} icon={<UserOutlined />}
style={{
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)',
}} />
<div style={{ flex: 1, overflow: 'hidden' }}>
<Typography.Text style={{ fontSize: 13, fontWeight: 600, color: '#1e293b', display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{user?.username}
</Typography.Text>
<Typography.Text style={{ fontSize: 11, color: '#94a3b8', display: 'block' }}>
{isAdminUser ? '管理员' : '普通用户'}
</Typography.Text>
</div>
</div>
</Dropdown>
</div>
</Sider>
<Layout style={{ marginLeft: 272, marginTop: 16, marginRight: 16, marginBottom: 16, background: 'transparent' }}>
@@ -307,47 +366,6 @@ const AdminLayout: React.FC = () => {
|| antMenuItems.flatMap(m => m.children || []).find((c: any) => c.key === activeKey)?.label
|| '管理后台'}
</Typography.Text>
<Dropdown menu={{
items: [
{ key: 'user', icon: <UserOutlined />, label: user?.username, disabled: true },
{ type: 'divider' as const },
{ key: 'changePwd', icon: <LockOutlined />, label: '修改密码' },
{ key: 'logout', icon: <LogoutOutlined />, label: '退出登录', danger: true },
],
onClick: ({ key }) => {
if (key === 'logout') { logout(); navigate('/login'); }
if (key === 'changePwd') { setPwdModal(true); pwdForm.resetFields(); }
},
}} placement="bottomRight" arrow>
<div style={{
display: 'flex',
alignItems: 'center',
gap: 10,
cursor: 'pointer',
padding: '8px 12px',
borderRadius: 12,
transition: 'all 0.25s ease',
background: 'linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%)',
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = '#ffffff';
e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.08)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = 'linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%)';
e.currentTarget.style.boxShadow = 'none';
}}
>
<Avatar size={32} icon={<UserOutlined />}
style={{
background: 'linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)',
boxShadow: '0 4px 12px rgba(99, 102, 241, 0.3)',
}} />
<Typography.Text style={{ fontSize: 14, fontWeight: 600, color: '#1e293b' }}>
{user?.username}
</Typography.Text>
</div>
</Dropdown>
</div>
{/* Content */}