style: enhance visual hierarchy of Profile page components

src/components/AdminLayout.tsx

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

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, KeyOutlined, ExclamationCircleOutlined } 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,76 @@ 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>双因素验证（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>
 
       <Modal
         title="修改密码"