style: enhance visual hierarchy of Profile page components
This commit is contained in:
@@ -67,14 +67,6 @@ function AdminLayout() {
|
||||
label: '用户资料',
|
||||
onClick: () => navigate('/admin/profile'),
|
||||
},
|
||||
{
|
||||
key: 'changePassword',
|
||||
icon: <LockOutlined />,
|
||||
label: '修改密码',
|
||||
onClick: () => {
|
||||
message.info('修改密码功能即将上线');
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'divider' as const,
|
||||
},
|
||||
@@ -96,6 +88,15 @@ function AdminLayout() {
|
||||
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 (
|
||||
<Layout className="admin-layout">
|
||||
<Sider
|
||||
@@ -117,7 +118,7 @@ function AdminLayout() {
|
||||
<Layout>
|
||||
<Header className="admin-header">
|
||||
<div className="header-title">
|
||||
{menuItems.find((item) => item.key === getSelectedKey())?.label}
|
||||
{getTitle()}
|
||||
</div>
|
||||
<div className="header-right">
|
||||
<Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
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 type { User } from '@/types';
|
||||
|
||||
@@ -151,13 +151,45 @@ function ProfilePage() {
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<Space>
|
||||
<SafetyOutlined />
|
||||
<span>双因素验证</span>
|
||||
<span>双因素验证(TOTP)</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>
|
||||
<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>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user