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,77 +60,140 @@ function ProfilePage() {
   };
 
   return (
-    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
+    <div>
       <Card
         title={
           <span>
             <UserOutlined /> 用户资料
           </span>
         }
-        style={{ marginBottom: '24px' }}
+        bordered={false}
       >
-        {user && (
+        <Row gutter={24}>
-          <Descriptions column={1} bordered style={{ marginBottom: '24px' }}>
+          <Col span={12}>
-            <Descriptions.Item label="头像">
+            {user && (
-              <Avatar icon={<UserOutlined />} size={64} />
+              <Descriptions column={1} bordered>
-            </Descriptions.Item>
+                <Descriptions.Item label="头像">
-            <Descriptions.Item label="用户名">{user.username}</Descriptions.Item>
+                  <Avatar icon={<UserOutlined />} size={64} />
-            <Descriptions.Item label="姓名">{user.name}</Descriptions.Item>
+                </Descriptions.Item>
-            <Descriptions.Item label="邮箱">{user.email || '-'}</Descriptions.Item>
+                <Descriptions.Item label="用户名">{user.username}</Descriptions.Item>
-            <Descriptions.Item label="角色">{user.role}</Descriptions.Item>
+                <Descriptions.Item label="姓名">{user.name}</Descriptions.Item>
-            <Descriptions.Item label="创建时间">
+                <Descriptions.Item label="邮箱">{user.email || '-'}</Descriptions.Item>
-              {new Date(user.createdAt).toLocaleString('zh-CN')}
+                <Descriptions.Item label="角色">{user.role}</Descriptions.Item>
-            </Descriptions.Item>
+                <Descriptions.Item label="创建时间">
-          </Descriptions>
+                  {new Date(user.createdAt).toLocaleString('zh-CN')}
-        )}
+                </Descriptions.Item>
+              </Descriptions>
+            )}
+          </Col>
 
-        <Form
+          <Col span={12}>
-          form={profileForm}
+            <div style={{ marginBottom: '16px', fontSize: '16px', fontWeight: 'bold' }}>
-          onFinish={handleUpdateProfile}
+              基础信息
-          layout="vertical"
+            </div>
-        >
+            <Form
-          <Form.Item
+              form={profileForm}
-            label="姓名"
+              onFinish={handleUpdateProfile}
-            name="name"
+              layout="vertical"
-            rules={[{ required: true, message: '请输入姓名' }]}
+            >
-          >
+              <Form.Item
-            <Input />
+                label="姓名"
-          </Form.Item>
+                name="name"
+                rules={[{ required: true, message: '请输入姓名' }]}
+              >
+                <Input />
+              </Form.Item>
 
-          <Form.Item
+              <Form.Item
-            label="邮箱"
+                label="邮箱"
-            name="email"
+                name="email"
-            rules={[{ type: 'email', message: '请输入有效的邮箱地址' }]}
+                rules={[{ type: 'email', message: '请输入有效的邮箱地址' }]}
-          >
+              >
-            <Input />
+                <Input />
-          </Form.Item>
+              </Form.Item>
 
-          <Form.Item>
+              <Form.Item>
-            <Space>
+                <Space>
-              <Button type="primary" htmlType="submit" loading={loading}>
+                  <Button type="primary" htmlType="submit" loading={loading}>
-                保存资料
+                    保存资料
-              </Button>
+                  </Button>
-              <Button onClick={loadUserProfile}>
+                  <Button onClick={loadUserProfile}>
-                重置
+                    重置
-              </Button>
+                  </Button>
-            </Space>
+                </Space>
-          </Form.Item>
+              </Form.Item>
-        </Form>
+            </Form>
+
+            <div style={{ marginTop: '24px', marginBottom: '16px', fontSize: '16px', fontWeight: 'bold' }}>
+              安全
+            </div>
+            <Card
+              size="small"
+              bordered={false}
+              style={{ backgroundColor: '#fafafa' }}
+            >
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <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>
 
-      <Card
-        title={
-          <span>
-            <LockOutlined /> 修改密码
-          </span>
-        }
-        extra={
-          <Button type="primary" onClick={() => setPasswordModalVisible(true)}>
-            修改密码
-          </Button>
-        }
-      />
-
       <Modal
         title="修改密码"
         open={passwordModalVisible}