feat: 个人信息页面优化

src/pages/Sys/UserInfo/index.tsx

@@ -1,6 +1,6 @@
 import { CloseOutlined, EditOutlined, SaveOutlined } from '@ant-design/icons';
-import { ProFormText } from '@ant-design/pro-components';
-import { Button, Card, Col, Form, Row, Space } from 'antd';
+import { PageContainer, ProFormText } from '@ant-design/pro-components';
+import { Button, Card, Col, Divider, Form, Row, Space, Typography } from 'antd';
 
 import { AvatarUpload } from './components/AvatarUpload';
 import { useUserInfo } from './hooks/useUserInfo';
@@ -23,72 +23,94 @@ const UserInfo = () => {
   }
 
   return (
-    <div className="p-6">
-      <Card title="用户信息" className="max-w-200 mx-auto">
-        <Form form={form} layout="vertical">
-          <Row gutter={24}>
-            <Col span={12}>
-              <ProFormText
-                name="username"
-                label="用户名"
-                readonly={!isEditing}
-                rules={[{ required: true, message: '请输入用户名' }]}
-                formItemProps={{ layout: 'horizontal' }}
-                fieldProps={{ disabled: true }}
-              />
-              <ProFormText
-                name="nickname"
-                label="昵称"
-                readonly={!isEditing}
-                rules={[{ required: true, message: '请输入昵称' }]}
-                formItemProps={{ layout: 'horizontal' }}
-                placeholder="请输入昵称"
-              />
-              <ProFormText
-                name="email"
-                label="邮箱"
-                readonly={!isEditing}
-                rules={[{ type: 'email', message: '请输入正确的邮箱格式' }]}
-                formItemProps={{ layout: 'horizontal' }}
-                placeholder="请输入邮箱"
-              />
-              <ProFormText
-                name="phone"
-                label="电话"
-                readonly={!isEditing}
-                formItemProps={{ layout: 'horizontal' }}
-                placeholder="请输入电话"
-              />
-            </Col>
-            <Col span={12}>
-              <Form.Item name="avatar" hidden />
+    <PageContainer title="个人信息">
+      <Card>
+        <Row gutter={48}>
+          <Col xs={24} md={8} lg={6}>
+            <div className="flex flex-col items-center gap-3 py-4">
               <AvatarUpload
                 avatar={userInfo.avatar}
                 isEditing={isEditing}
                 uploading={uploading}
                 onUpload={handleAvatarUpload}
               />
-            </Col>
-          </Row>
-        </Form>
-        <div className="text-center mt-6">
-          {!isEditing ? (
-            <Button type="primary" icon={<EditOutlined />} onClick={handleEdit}>
-              修改信息
-            </Button>
-          ) : (
-            <Space>
-              <Button type="primary" icon={<SaveOutlined />} onClick={handleSave} loading={loading}>
-                确定修改
-              </Button>
-              <Button icon={<CloseOutlined />} onClick={handleCancel}>
-                取消
-              </Button>
-            </Space>
-          )}
-        </div>
+              <div className="text-center">
+                <div className="text-base font-medium">
+                  {userInfo.nickname || userInfo.username}
+                </div>
+                <Typography.Text type="secondary" className="text-sm">
+                  {userInfo.username}
+                </Typography.Text>
+              </div>
+            </div>
+            <Divider className="md:hidden" />
+          </Col>
+          <Col xs={24} md={16} lg={18}>
+            <Form form={form} layout="vertical" className="max-w-160">
+              <Form.Item name="avatar" hidden />
+              <Row gutter={24}>
+                <Col xs={24} sm={12}>
+                  <ProFormText
+                    name="username"
+                    label="用户名"
+                    readonly
+                    formItemProps={{ layout: 'vertical' }}
+                    fieldProps={{ disabled: true }}
+                  />
+                </Col>
+                <Col xs={24} sm={12}>
+                  <ProFormText
+                    name="nickname"
+                    label="昵称"
+                    readonly={!isEditing}
+                    rules={[{ required: true, message: '请输入昵称' }]}
+                    placeholder="请输入昵称"
+                  />
+                </Col>
+                <Col xs={24} sm={12}>
+                  <ProFormText
+                    name="email"
+                    label="邮箱"
+                    readonly={!isEditing}
+                    rules={[{ type: 'email', message: '请输入正确的邮箱格式' }]}
+                    placeholder="请输入邮箱"
+                  />
+                </Col>
+                <Col xs={24} sm={12}>
+                  <ProFormText
+                    name="phone"
+                    label="电话"
+                    readonly={!isEditing}
+                    placeholder="请输入电话"
+                  />
+                </Col>
+              </Row>
+              <div className="mt-2">
+                {!isEditing ? (
+                  <Button type="primary" icon={<EditOutlined />} onClick={handleEdit}>
+                    修改信息
+                  </Button>
+                ) : (
+                  <Space>
+                    <Button
+                      type="primary"
+                      icon={<SaveOutlined />}
+                      onClick={handleSave}
+                      loading={loading}
+                    >
+                      确定修改
+                    </Button>
+                    <Button icon={<CloseOutlined />} onClick={handleCancel}>
+                      取消
+                    </Button>
+                  </Space>
+                )}
+              </div>
+            </Form>
+          </Col>
+        </Row>
       </Card>
-    </div>
+    </PageContainer>
   );
 };