feat: siteinfo, more configuration, userinfo...

This commit is contained in:
chenos 2021-08-13 23:33:15 +08:00
parent 9fd41ab33e
commit cfd12a0fcf
5 changed files with 176 additions and 1 deletions

View File

@ -0,0 +1,110 @@
import React, { useContext, useEffect } from 'react';
import { Button } from 'antd';
import { SchemaRenderer } from '../schema-renderer';
import { ISchema, useForm } from '@formily/react';
import { Resource } from '../../resource';
import { useRequest } from 'ahooks';
import { VisibleContext } from '../../context';
const useResource = ({ onSuccess }) => {
const resource = Resource.make({
resourceName: 'system_settings',
resourceKey: 1,
});
const service = useRequest(
(params?: any) => {
return resource.get({ ...params, appends: ['logo'] });
},
{
formatResult: (result) => result?.data,
onSuccess,
manual: true,
},
);
const [visible] = useContext(VisibleContext);
useEffect(() => {
if (visible) {
service.run({});
}
}, [visible]);
return { resource, service, initialValues: service.data, ...service };
};
const useOkAction = () => {
const form = useForm();
return {
async run() {
const resource = Resource.make({
resourceName: 'system_settings',
resourceKey: 1,
});
console.log('system_settings.values', form.values)
await resource.save(form.values);
}
}
}
const schema: ISchema = {
type: 'void',
name: 'action1',
// title: '下拉菜单',
'x-component': 'Action',
'x-component-props': {
className: 'nb-database-config',
icon: 'MoreOutlined',
type: 'primary',
},
properties: {
dropdown1: {
type: 'void',
'x-component': 'Action.Dropdown',
'x-component-props': {
trigger: ['hover'],
},
properties: {
item1: {
type: 'void',
title: `系统配置`,
'x-component': 'Menu.Action',
properties: {
drawer1: {
type: 'void',
title: '系统配置',
'x-decorator': 'Form',
'x-decorator-props': {
useResource,
},
'x-component': 'Action.Drawer',
'x-component-props': {
useOkAction,
},
properties: {
title: {
type: 'string',
title: '系统名称',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
logo: {
type: 'string',
title: 'LOGO',
'x-decorator': 'FormItem',
'x-component': 'Upload.File',
'x-component-props': {
// accept: 'jpg,png'
},
},
},
},
},
},
},
}
},
};
export const More = () => {
return <SchemaRenderer schema={schema} />;
};

View File

@ -0,0 +1,16 @@
import React, { useContext, useEffect } from 'react';
import { Button, Dropdown, Menu } from 'antd';
import { useHistory } from 'react-router-dom';
import { request } from '../../schemas';
export const SiteTitle = () => {
return (
<div className={'site-info'}>
<img
className={'site-logo'}
src={'https://www.nocobase.com/dist/images/logo-white.png'}
/>
<div className={'site-title'}>NocoBase</div>
</div>
);
};

View File

@ -0,0 +1,29 @@
import React, { useContext, useEffect } from 'react';
import { Button, Dropdown, Menu } from 'antd';
import { useHistory } from 'react-router-dom';
import { request } from '../../schemas';
export const UserInfo = () => {
const history = useHistory();
return (
<Dropdown
overlay={
<Menu>
<Menu.Item></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'}></Button>
</Dropdown>
);
};

View File

@ -35,6 +35,9 @@ import {
} from '../../constate';
import { uid } from '@formily/shared';
import { Permissions } from './Permissions';
import { More } from './More';
import { UserInfo } from './UserInfo';
import { SiteTitle } from './SiteTitle';
function DesignableToggle() {
const { designable, setDesignable } = useDesignableSwitchContext();
@ -87,6 +90,7 @@ function LayoutWithMenu(props: LayoutWithMenuProps) {
return (
<Layout>
<Layout.Header style={{ display: 'flex' }}>
<SiteTitle />
<SchemaRenderer
schema={schema}
scope={{
@ -96,9 +100,11 @@ function LayoutWithMenu(props: LayoutWithMenuProps) {
selectedKeys: defaultSelectedKeys.filter(Boolean),
}}
/>
<DesignableToggle />
<Database />
<Permissions />
<DesignableToggle />
<More/>
<UserInfo />
</Layout.Header>
<Layout>
<Layout.Sider

View File

@ -53,4 +53,18 @@
&.active {
background: #1890ff !important;
}
}
.user-info {
height: 46px;
color: #fff;
&:hover, &:focus {
color: #fff;
}
}
.site-info {
.site-logo {
height: 20px;
padding: 0 16px;
}
}