106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
import { Button, Form, Input } from 'antd';
|
|
import { useUserStore } from '../store';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
import { isObjectNull } from '@/utils/is-null';
|
|
import { useLayoutStore } from '@/modules/layout/store';
|
|
import { AvatarUpload } from '../module/AvatarUpload';
|
|
import { UploadOutlined } from '@ant-design/icons';
|
|
import PandaPNG from '@/assets/panda.png';
|
|
import { FileUpload } from '../module/FileUpload';
|
|
export const Profile = () => {
|
|
const [form] = Form.useForm();
|
|
const ref = useRef<any>(null);
|
|
const userStore = useUserStore(
|
|
useShallow((state) => {
|
|
return {
|
|
showEdit: state.showEdit,
|
|
setShowEdit: state.setShowEdit,
|
|
formData: state.formData,
|
|
updateData: state.updateData,
|
|
setFormData: state.setFormData,
|
|
updateSelf: state.updateSelf,
|
|
};
|
|
}),
|
|
);
|
|
const [avatar, setAvatar] = useState<string>('');
|
|
const layoutStore = useLayoutStore(
|
|
useShallow((state) => {
|
|
return {
|
|
me: state.me,
|
|
setMe: state.setMe,
|
|
};
|
|
}),
|
|
);
|
|
// const avatar = layoutStore.me?.avatar;
|
|
useEffect(() => {
|
|
const fromData = layoutStore.me;
|
|
if (isObjectNull(fromData)) {
|
|
form.setFieldsValue({});
|
|
} else {
|
|
form.setFieldsValue(fromData);
|
|
}
|
|
setAvatar(fromData.avatar || '');
|
|
}, [layoutStore.me]);
|
|
const onChange = (path: string) => {
|
|
let url = '/resources/' + path;
|
|
console.log('path', url);
|
|
form.setFieldsValue({ avatar: url });
|
|
setAvatar(url + '?t=' + new Date().getTime());
|
|
};
|
|
const onFinish = async (values) => {
|
|
const newMe = await userStore.updateSelf(values);
|
|
if (newMe) {
|
|
layoutStore.setMe(newMe);
|
|
}
|
|
};
|
|
return (
|
|
<div className='w-full h-full bg-gray-200 p-4'>
|
|
<div className='border shadow-lg p-4 bg-white rounded-lg'>
|
|
<div className='text-2xl'>Profile</div>
|
|
<div className='text-sm text-gray-500'>Edit your profile</div>
|
|
<div className='flex gap-4'>
|
|
<div className='w-[600px] p-4 border mt-2 '>
|
|
<div className='w-full my-4'>
|
|
{avatar && <img className='w-20 h-20 mx-auto rounded-full' src={avatar} alt='avatar' />}
|
|
{!avatar && <img className='w-20 h-20 mx-auto rounded-full' src={PandaPNG} alt='avatar' />}
|
|
</div>
|
|
<Form
|
|
form={form}
|
|
onFinish={onFinish}
|
|
labelCol={{
|
|
span: 4,
|
|
}}>
|
|
<Form.Item label='Name' name='username'>
|
|
<Input className='w-full border rounded-lg p-2' disabled />
|
|
</Form.Item>
|
|
<Form.Item label='Avatar' name='avatar'>
|
|
<Input
|
|
addonAfter={
|
|
<div>
|
|
<UploadOutlined
|
|
onClick={() => {
|
|
ref.current?.open?.();
|
|
}}
|
|
/>
|
|
<FileUpload ref={ref} onChange={onChange} />
|
|
</div>
|
|
}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item label='Description' name='description'>
|
|
<Input.TextArea rows={4} />
|
|
</Form.Item>
|
|
<Form.Item label=' ' colon={false}>
|
|
<Button className='' htmlType='submit'>
|
|
保存
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|