style: enhance visual hierarchy of Profile page components
This commit is contained in:
@@ -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">
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user