style: enhance visual hierarchy of Profile page components

This commit is contained in:
2026-02-06 21:39:28 +08:00
parent e5b391f7b7
commit b76ef06c62
2 changed files with 44 additions and 11 deletions

View File

@@ -67,14 +67,6 @@ function AdminLayout() {
label: '用户资料', label: '用户资料',
onClick: () => navigate('/admin/profile'), onClick: () => navigate('/admin/profile'),
}, },
{
key: 'changePassword',
icon: <LockOutlined />,
label: '修改密码',
onClick: () => {
message.info('修改密码功能即将上线');
},
},
{ {
type: 'divider' as const, type: 'divider' as const,
}, },
@@ -96,6 +88,15 @@ function AdminLayout() {
return 'dashboard'; return 'dashboard';
}; };
const getTitle = () => {
const path = location.pathname;
if (path.includes('/dashboard')) return '控制台';
if (path.includes('/generate')) return '生成二维码';
if (path.includes('/manage')) return '企业管理';
if (path.includes('/profile')) return '用户资料';
return '控制台';
};
return ( return (
<Layout className="admin-layout"> <Layout className="admin-layout">
<Sider <Sider
@@ -117,7 +118,7 @@ function AdminLayout() {
<Layout> <Layout>
<Header className="admin-header"> <Header className="admin-header">
<div className="header-title"> <div className="header-title">
{menuItems.find((item) => item.key === getSelectedKey())?.label} {getTitle()}
</div> </div>
<div className="header-right"> <div className="header-right">
<Dropdown menu={{ items: userMenuItems }} placement="bottomRight"> <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">

View File

@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { Form, Input, Button, Card, message, Avatar, Descriptions, Space, Modal, Row, Col } from 'antd'; import { Form, Input, Button, Card, message, Avatar, Descriptions, Space, Modal, Row, Col } from 'antd';
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons'; import { UserOutlined, LockOutlined, SafetyOutlined, KeyOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { authApi } from '@/services/api'; import { authApi } from '@/services/api';
import type { User } from '@/types'; import type { User } from '@/types';
@@ -151,13 +151,45 @@ function ProfilePage() {
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Space> <Space>
<SafetyOutlined /> <SafetyOutlined />
<span></span> <span>TOTP</span>
</Space> </Space>
<Button type="default"> <Button type="default">
</Button> </Button>
</div> </div>
</Card> </Card>
<Card
size="small"
bordered={false}
style={{ marginTop: '16px', backgroundColor: '#fafafa' }}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Space>
<KeyOutlined />
<span>Passkey</span>
</Space>
<Button type="default">
</Button>
</div>
</Card>
<Card
size="small"
bordered={false}
style={{ marginTop: '16px', backgroundColor: '#fafafa' }}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<Space>
<ExclamationCircleOutlined />
<span></span>
</Space>
<Button danger>
</Button>
</div>
</Card>
</Col> </Col>
</Row> </Row>
</Card> </Card>