style: enhance visual hierarchy of Profile page components

This commit is contained in:
ZHENG XIAOYI
2026-02-06 21:39:28 +08:00
parent e5b391f7b7
commit b76ef06c62
2 changed files with 44 additions and 11 deletions
+34 -2
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>