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

@@ -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>