114 lines
4.0 KiB
TypeScript
114 lines
4.0 KiB
TypeScript
import React, { useContext, useEffect } from 'react';
|
|
import { Button, Dropdown, Menu, Select } from 'antd';
|
|
import { useHistory } from 'react-router-dom';
|
|
import { request, SchemaField } from '../../schemas';
|
|
import { AuthContext, useCurrentUser } from './Auth';
|
|
import { FormButtonGroup, FormDrawer, FormLayout, Submit } from '@formily/antd';
|
|
import { useState } from 'react';
|
|
|
|
export const UserInfo = () => {
|
|
const history = useHistory();
|
|
const { service, currentUser } = useContext(AuthContext);
|
|
const [visible, setVisible] = useState(false);
|
|
return (
|
|
<Dropdown
|
|
visible={visible}
|
|
onVisibleChange={setVisible}
|
|
overlay={
|
|
<Menu>
|
|
<Menu.Item
|
|
onClick={async () => {
|
|
setVisible(false);
|
|
const values = await FormDrawer('个人资料', () => {
|
|
return (
|
|
<FormLayout layout={'vertical'}>
|
|
<SchemaField
|
|
schema={{
|
|
type: 'object',
|
|
properties: {
|
|
email: {
|
|
type: 'string',
|
|
title: '邮箱',
|
|
'x-component': 'Input',
|
|
'x-decorator': 'FormilyFormItem',
|
|
},
|
|
nickname: {
|
|
type: 'string',
|
|
title: '昵称',
|
|
'x-component': 'Input',
|
|
'x-decorator': 'FormilyFormItem',
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
<FormDrawer.Footer>
|
|
<FormButtonGroup align="right">
|
|
<Submit onSubmit={(values) => {}}>保存</Submit>
|
|
</FormButtonGroup>
|
|
</FormDrawer.Footer>
|
|
</FormLayout>
|
|
);
|
|
}).open({
|
|
initialValues: currentUser || {},
|
|
});
|
|
const { data } = await request('users:updateProfile', {
|
|
method: 'post',
|
|
data: values,
|
|
});
|
|
service.mutate(data);
|
|
}}
|
|
>
|
|
个人资料
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
<span style={{ marginRight: 16, display: 'inline-block' }}>角色切换</span>
|
|
<Select
|
|
className={'roles-select'}
|
|
bordered={false}
|
|
style={{ minWidth: 100 }}
|
|
size={'small'}
|
|
defaultValue={'admin'}
|
|
options={[
|
|
{ label: '超级管理员', value: 'admin' },
|
|
{ label: '数据管理员', value: 'editor' },
|
|
{ label: '普通成员', value: 'member' },
|
|
]}
|
|
/>
|
|
</div>
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
<span style={{ marginRight: 16, display: 'inline-block' }}>语言设置</span>
|
|
<Select
|
|
className={'roles-select'}
|
|
bordered={false}
|
|
size={'small'}
|
|
defaultValue={'zh-CN'}
|
|
options={[
|
|
{ label: '简体中文', value: 'zh-CN' },
|
|
{ label: 'English', value: 'en-US' },
|
|
]}
|
|
/>
|
|
</div>
|
|
</Menu.Item>
|
|
<Menu.Divider />
|
|
<Menu.Item
|
|
onClick={async () => {
|
|
await request('users:logout');
|
|
localStorage.removeItem('NOCOBASE_TOKEN');
|
|
history.push('/login');
|
|
}}
|
|
>
|
|
退出登录
|
|
</Menu.Item>
|
|
</Menu>
|
|
}
|
|
>
|
|
<Button type={'text'} className={'user-info'}>
|
|
{currentUser?.nickname || currentUser?.email}
|
|
</Button>
|
|
</Dropdown>
|
|
);
|
|
};
|