General-AI-Platform-Web/src/pages/Account/Center/index.tsx

import { PageContainer, ProCard } from '@ant-design/pro-components';
import React, { useEffect, useRef, useState } from 'react';

import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, message, Upload } from 'antd';
import type { UploadChangeParam } from 'antd/es/upload';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import type { ActionType } from '@ant-design/pro-components';
// svg 转组件
import { ReactComponent as AvatarSvg } from '../../../../public/icons/avatar.svg';
import styles from "./center.less";
import UpdateAccountForm from './components/UpdateAccountForm';
import UpdatePasswordForm from './components/UpdatePasswordForm';
import { FormattedMessage } from '@umijs/max';

const getBase64 = (img: RcFile, callback: (url: string) => void) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
};

const beforeUpload = (file: RcFile) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};


  
/**
 * @个人中心
 * @returns
 */
const AccountCenter: React.FC = () => {
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState<string>();
    const actionRef = useRef<ActionType>();
    const [updateAccountModalOpen, setUpdateAccountModalOpen] = useState<boolean>(false);
    const [updatePasswordModalOpen, setUpdatePasswordModalOpen] = useState<boolean>(false);
    const [currentRow, setCurrentRow] = useState<API.Project>();

    const handleUpdateAccountModal = () => {
        if (updateAccountModalOpen) {
            setUpdateAccountModalOpen(false);
            setCurrentRow(undefined);
        } else {
            setUpdateAccountModalOpen(true);
        }
    };

    const handleUpdatePasswordModal = () => {
        if (updatePasswordModalOpen) {
            setUpdatePasswordModalOpen(false);
            setCurrentRow(undefined);
        } else {
            setUpdatePasswordModalOpen(true);
        }
    };

    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
        // Get this url from response in real world.
            getBase64(info.file.originFileObj as RcFile, (url) => {
                setLoading(false);
                setImageUrl(url);
            });
        }
        console.log(info);
    };

    const uploadButton = (
        <div style={{ width: 100,height: 100, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            {loading ? <LoadingOutlined /> : <AvatarSvg />}
            {/* <div style={{ marginTop: 8 }}>Upload</div> */}
        </div>
    );

    return (
        <PageContainer>
            <ProCard
                style={{ background: 'white' }}
                bodyStyle={{
                    padding: 40,
                    margin: 0,
                    display: 'flex'
                }}
                gutter={24}
                wrap
                ghost
            >
                <Upload
                    name="avatar"
                    // listType="picture-card"
                    // className="avatar-uploader"
                    showUploadList={false}
                    maxCount={1}
                    action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                >
                    {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: 100,height: 100 }} /> : uploadButton}
                </Upload>
                <div className={styles.infoBox}>
                    <div>
                        <span className={styles.spanStyle}>用户名:</span>王立强
                    </div>
                    <div>
                        <span className={styles.spanStyle}>账号ID:</span>awtk-55975980
                    </div>
                    <div>
                        <span className={styles.spanStyle}>注册时间:</span>2012-10-16 23:55:35
                    </div>
                </div>
                <div className={styles.infoBoxRight}>
                    <div>
                        <span className={styles.spanStyle}>登录账号:</span>wangliqun
                        <Button 
                            type="link" 
                            color="#154DDD" 
                            onClick={() => {
                                setUpdateAccountModalOpen(true);
                                setCurrentRow({});
                            }}>
                                <FormattedMessage id="account.account_center.table.list.editor" defaultMessage="editor" />
                            </Button>
                    </div>
                    <div>
                        <span className={styles.spanStyle}>登录密码:</span>wangliqun
                        <Button 
                            type="link" 
                            color="#154DDD" 
                            onClick={() => {
                                setUpdatePasswordModalOpen(true);
                                setCurrentRow({});
                            }}>
                                <FormattedMessage id="account.account_center.table.list.editor" defaultMessage="editor" />
                            </Button>
                    </div>
                </div>
            </ProCard>
            <UpdateAccountForm
                updateModalOpen={updateAccountModalOpen}
                values={currentRow || {}}
                handleModal={handleUpdateAccountModal}
                reload={actionRef.current?.reload}
            />
            <UpdatePasswordForm
                updateModalOpen={updatePasswordModalOpen}
                values={currentRow || {}}
                handleModal={handleUpdatePasswordModal}
                reload={actionRef.current?.reload}
            />
        </PageContainer>
    );
};

export default AccountCenter;