perms-system-web/src/pages/Sys/UserInfo/index.tsx

import { CloseOutlined, EditOutlined, SaveOutlined } from '@ant-design/icons';
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';

const UserInfo = () => {
  const {
    form,
    isEditing,
    loading,
    uploading,
    userInfo,
    handleEdit,
    handleCancel,
    handleSave,
    handleAvatarUpload,
  } = useUserInfo();

  if (!userInfo) {
    return <div>加载中...</div>;
  }

  return (
    <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}
              />
              <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>
    </PageContainer>
  );
};

export default UserInfo;