style(ui): polish Profile page layout and user info display

src/pages/Profile.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
-import { Form, Input, Button, Card, message, Avatar, Descriptions, Space, Modal } from 'antd';
+import { Form, Input, Button, Card, message, Avatar, Descriptions, Space, Modal, Row, Col } from 'antd';
-import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons';
 import { authApi } from '@/services/api';
 import type { User } from '@/types';
 
@@ -60,17 +60,19 @@ function ProfilePage() {
   };
 
   return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+    <div>
       <Card
         title={
           <span>
             <UserOutlined /> 用户资料
           </span>
         }
-        style={{ marginBottom: '24px' }}
+        bordered={false}
       >
+        <Row gutter={24}>
+          <Col span={12}>
             {user && (
-          <Descriptions column={1} bordered style={{ marginBottom: '24px' }}>
+              <Descriptions column={1} bordered>
                 <Descriptions.Item label="头像">
                   <Avatar icon={<UserOutlined />} size={64} />
                 </Descriptions.Item>
@@ -83,7 +85,12 @@ function ProfilePage() {
                 </Descriptions.Item>
               </Descriptions>
             )}
+          </Col>
 
+          <Col span={12}>
+            <div style={{ marginBottom: '16px', fontSize: '16px', fontWeight: 'bold' }}>
+              基础信息
+            </div>
             <Form
               form={profileForm}
               onFinish={handleUpdateProfile}
@@ -116,20 +123,44 @@ function ProfilePage() {
                 </Space>
               </Form.Item>
             </Form>
-      </Card>
 
+            <div style={{ marginTop: '24px', marginBottom: '16px', fontSize: '16px', fontWeight: 'bold' }}>
+              安全
+            </div>
             <Card
-        title={
+              size="small"
-          <span>
+              bordered={false}
-            <LockOutlined /> 修改密码
+              style={{ backgroundColor: '#fafafa' }}
-          </span>
+            >
-        }
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-        extra={
+                <Space>
+                  <LockOutlined />
+                  <span>修改密码</span>
+                </Space>
                 <Button type="primary" onClick={() => setPasswordModalVisible(true)}>
                   修改密码
                 </Button>
-        }
+              </div>
-      />
+            </Card>
+
+            <Card
+              size="small"
+              bordered={false}
+              style={{ marginTop: '16px', backgroundColor: '#fafafa' }}
+            >
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Space>
+                  <SafetyOutlined />
+                  <span>双因素验证</span>
+                </Space>
+                <Button type="default">
+                  启用
+                </Button>
+              </div>
+            </Card>
+          </Col>
+        </Row>
+      </Card>
 
       <Modal
         title="修改密码"