improve code

This commit is contained in:
chenos 2021-08-26 10:30:52 +08:00
parent 0c678a013f
commit c74e8f03ad
4 changed files with 73 additions and 53 deletions

View File

@ -1,19 +1,24 @@
import React, { useContext, useEffect } from 'react'; import React, { useContext, useEffect } from 'react';
import { Button, Dropdown, Menu } from 'antd'; import { Button, Dropdown, Menu, Select } from 'antd';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import { request, SchemaField } from '../../schemas'; import { request, SchemaField } from '../../schemas';
import { AuthContext, useCurrentUser } from './Auth'; import { AuthContext, useCurrentUser } from './Auth';
import { FormButtonGroup, FormDrawer, FormLayout, Submit } from '@formily/antd'; import { FormButtonGroup, FormDrawer, FormLayout, Submit } from '@formily/antd';
import { useState } from 'react';
export const UserInfo = () => { export const UserInfo = () => {
const history = useHistory(); const history = useHistory();
const { service, currentUser } = useContext(AuthContext); const { service, currentUser } = useContext(AuthContext);
const [visible, setVisible] = useState(false);
return ( return (
<Dropdown <Dropdown
visible={visible}
onVisibleChange={setVisible}
overlay={ overlay={
<Menu> <Menu>
<Menu.Item <Menu.Item
onClick={async () => { onClick={async () => {
setVisible(false);
const values = await FormDrawer('个人资料', () => { const values = await FormDrawer('个人资料', () => {
return ( return (
<FormLayout layout={'vertical'}> <FormLayout layout={'vertical'}>
@ -38,10 +43,7 @@ export const UserInfo = () => {
/> />
<FormDrawer.Footer> <FormDrawer.Footer>
<FormButtonGroup align="right"> <FormButtonGroup align="right">
<Submit onSubmit={(values) => { <Submit onSubmit={(values) => {}}></Submit>
}}>
</Submit>
</FormButtonGroup> </FormButtonGroup>
</FormDrawer.Footer> </FormDrawer.Footer>
</FormLayout> </FormLayout>
@ -58,6 +60,20 @@ export const UserInfo = () => {
> >
</Menu.Item> </Menu.Item>
<Menu.Item>
<Select
className={'roles-select'}
bordered={false}
style={{ minWidth: 100, paddingLeft: 0 }}
size={'small'}
defaultValue={'admin'}
options={[
{ label: '超级管理员', value: 'admin' },
{ label: '数据管理员', value: 'editor' },
{ label: '普通成员', value: 'member' },
]}
/>
</Menu.Item>
<Menu.Divider /> <Menu.Divider />
<Menu.Item <Menu.Item
onClick={async () => { onClick={async () => {

View File

@ -32,7 +32,11 @@
// padding-bottom: 0 !important; // padding-bottom: 0 !important;
// } // }
// } // }
.roles-select {
.ant-select-selector {
padding-left: 0 !important;
}
}
.nb-spin-center { .nb-spin-center {
position: absolute; position: absolute;
top: 0; top: 0;

View File

@ -83,12 +83,10 @@ Chart.DesignableBar = observer((props) => {
const removed = deepRemove(); const removed = deepRemove();
// console.log({ removed }) // console.log({ removed })
const last = removed.pop(); const last = removed.pop();
if (isGridRowOrCol(last)) {
await removeSchema(last); await removeSchema(last);
}
}} }}
> >
</Menu.Item> </Menu.Item>
</Menu> </Menu>
} }

View File

@ -98,9 +98,10 @@ const SideMenu = (props: any) => {
<Button <Button
block block
type={'dashed'} type={'dashed'}
icon={<PlusOutlined />}
className={`nb-add-new-menu-item menu-mode-inline designable-btn designable-btn-dash`} className={`nb-add-new-menu-item menu-mode-inline designable-btn designable-btn-dash`}
> >
<PlusOutlined />
</Button> </Button>
</Menu.AddNew> </Menu.AddNew>
</AntdMenu> </AntdMenu>
@ -212,9 +213,10 @@ export const Menu: any = observer((props: any) => {
mode === 'mix' ? 'horizontal' : mode mode === 'mix' ? 'horizontal' : mode
}`} }`}
block block
icon={<PlusOutlined />}
type={mode == 'inline' ? 'dashed' : 'primary'} type={mode == 'inline' ? 'dashed' : 'primary'}
> >
<PlusOutlined />
</Button> </Button>
</Menu.AddNew> </Menu.AddNew>
</AntdMenu> </AntdMenu>
@ -402,7 +404,7 @@ Menu.AddNew = observer((props: any) => {
const schemas = { const schemas = {
'Menu.Link': { 'Menu.Link': {
icon: <MenuOutlined />, icon: <MenuOutlined />,
title: '创建菜单项', title: '创建页面',
schema: { schema: {
type: 'object', type: 'object',
properties: { properties: {
@ -424,7 +426,7 @@ Menu.AddNew = observer((props: any) => {
}, },
'Menu.SubMenu': { 'Menu.SubMenu': {
icon: <GroupOutlined />, icon: <GroupOutlined />,
title: '创建菜单分组', title: '创建分组',
schema: { schema: {
type: 'object', type: 'object',
properties: { properties: {
@ -446,7 +448,7 @@ Menu.AddNew = observer((props: any) => {
}, },
'Menu.URL': { 'Menu.URL': {
icon: <LinkOutlined />, icon: <LinkOutlined />,
title: '创建自定义链接', title: '创建链接',
schema: { schema: {
type: 'object', type: 'object',
properties: { properties: {
@ -465,7 +467,7 @@ Menu.AddNew = observer((props: any) => {
}, },
'x-component-props.href': { 'x-component-props.href': {
type: 'string', type: 'string',
title: '自定义链接', title: '链接',
required: true, required: true,
'x-decorator': 'FormItem', 'x-decorator': 'FormItem',
'x-component': 'Input', 'x-component': 'Input',
@ -497,14 +499,14 @@ Menu.AddNew = observer((props: any) => {
await createSchema(data); await createSchema(data);
}} }}
> >
<AntdMenu.Item key={'Menu.Link'} icon={<MenuOutlined />}>
</AntdMenu.Item>
<AntdMenu.Item key={'Menu.SubMenu'} icon={<GroupOutlined />}> <AntdMenu.Item key={'Menu.SubMenu'} icon={<GroupOutlined />}>
</AntdMenu.Item>
<AntdMenu.Item key={'Menu.Link'} icon={<MenuOutlined />}>
</AntdMenu.Item> </AntdMenu.Item>
<AntdMenu.Item key={'Menu.URL'} icon={<LinkOutlined />}> <AntdMenu.Item key={'Menu.URL'} icon={<LinkOutlined />}>
</AntdMenu.Item> </AntdMenu.Item>
</AntdMenu> </AntdMenu>
} }
@ -520,7 +522,7 @@ Menu.DesignableBar = (props) => {
const schemas = { const schemas = {
'Menu.Action': { 'Menu.Action': {
icon: <MenuOutlined />, icon: <MenuOutlined />,
title: '菜单项', title: '页面',
schema: { schema: {
type: 'object', type: 'object',
properties: { properties: {
@ -542,7 +544,7 @@ Menu.DesignableBar = (props) => {
}, },
'Menu.Item': { 'Menu.Item': {
icon: <MenuOutlined />, icon: <MenuOutlined />,
title: '菜单项', title: '页面',
schema: { schema: {
type: 'object', type: 'object',
properties: { properties: {
@ -564,7 +566,7 @@ Menu.DesignableBar = (props) => {
}, },
'Menu.Link': { 'Menu.Link': {
icon: <MenuOutlined />, icon: <MenuOutlined />,
title: '菜单项', title: '页面',
schema: { schema: {
type: 'object', type: 'object',
properties: { properties: {
@ -586,7 +588,7 @@ Menu.DesignableBar = (props) => {
}, },
'Menu.SubMenu': { 'Menu.SubMenu': {
icon: <GroupOutlined />, icon: <GroupOutlined />,
title: '菜单分组', title: '分组',
schema: { schema: {
type: 'object', type: 'object',
properties: { properties: {
@ -608,7 +610,7 @@ Menu.DesignableBar = (props) => {
}, },
'Menu.URL': { 'Menu.URL': {
icon: <LinkOutlined />, icon: <LinkOutlined />,
title: '自定义链接', title: '链接',
schema: { schema: {
type: 'object', type: 'object',
properties: { properties: {
@ -627,7 +629,7 @@ Menu.DesignableBar = (props) => {
}, },
'x-component-props.href': { 'x-component-props.href': {
type: 'string', type: 'string',
title: '自定义链接', title: '链接',
required: true, required: true,
'x-decorator': 'FormItem', 'x-decorator': 'FormItem',
'x-component': 'Input', 'x-component': 'Input',
@ -864,23 +866,23 @@ Menu.DesignableBar = (props) => {
icon={<ArrowUpOutlined />} icon={<ArrowUpOutlined />}
title={`${mode == 'inline' ? '上' : '左'}插入`} title={`${mode == 'inline' ? '上' : '左'}插入`}
> >
<AntdMenu.Item
key={'insertBefore.Menu.Link'}
icon={<MenuOutlined />}
>
</AntdMenu.Item>
<AntdMenu.Item <AntdMenu.Item
key={'insertBefore.Menu.SubMenu'} key={'insertBefore.Menu.SubMenu'}
icon={<GroupOutlined />} icon={<GroupOutlined />}
> >
</AntdMenu.Item>
<AntdMenu.Item
key={'insertBefore.Menu.Link'}
icon={<MenuOutlined />}
>
</AntdMenu.Item> </AntdMenu.Item>
<AntdMenu.Item <AntdMenu.Item
key={'insertBefore.Menu.URL'} key={'insertBefore.Menu.URL'}
icon={<LinkOutlined />} icon={<LinkOutlined />}
> >
</AntdMenu.Item> </AntdMenu.Item>
</AntdMenu.SubMenu> </AntdMenu.SubMenu>
<AntdMenu.SubMenu <AntdMenu.SubMenu
@ -888,23 +890,23 @@ Menu.DesignableBar = (props) => {
icon={<ArrowDownOutlined />} icon={<ArrowDownOutlined />}
title={`${mode == 'inline' ? '下' : '右'}插入`} title={`${mode == 'inline' ? '下' : '右'}插入`}
> >
<AntdMenu.Item
key={'insertAfter.Menu.Link'}
icon={<MenuOutlined />}
>
</AntdMenu.Item>
<AntdMenu.Item <AntdMenu.Item
key={'insertAfter.Menu.SubMenu'} key={'insertAfter.Menu.SubMenu'}
icon={<GroupOutlined />} icon={<GroupOutlined />}
> >
</AntdMenu.Item>
<AntdMenu.Item
key={'insertAfter.Menu.Link'}
icon={<MenuOutlined />}
>
</AntdMenu.Item> </AntdMenu.Item>
<AntdMenu.Item <AntdMenu.Item
key={'insertAfter.Menu.URL'} key={'insertAfter.Menu.URL'}
icon={<LinkOutlined />} icon={<LinkOutlined />}
> >
</AntdMenu.Item> </AntdMenu.Item>
</AntdMenu.SubMenu> </AntdMenu.SubMenu>
{isSubMenu && ( {isSubMenu && (
@ -913,23 +915,23 @@ Menu.DesignableBar = (props) => {
icon={<ArrowRightOutlined />} icon={<ArrowRightOutlined />}
title={'向里插入'} title={'向里插入'}
> >
<AntdMenu.Item
key={'appendChild.Menu.Link'}
icon={<MenuOutlined />}
>
</AntdMenu.Item>
<AntdMenu.Item <AntdMenu.Item
key={'appendChild.Menu.SubMenu'} key={'appendChild.Menu.SubMenu'}
icon={<GroupOutlined />} icon={<GroupOutlined />}
> >
</AntdMenu.Item>
<AntdMenu.Item
key={'appendChild.Menu.Link'}
icon={<MenuOutlined />}
>
</AntdMenu.Item> </AntdMenu.Item>
<AntdMenu.Item <AntdMenu.Item
key={'appendChild.Menu.URL'} key={'appendChild.Menu.URL'}
icon={<LinkOutlined />} icon={<LinkOutlined />}
> >
</AntdMenu.Item> </AntdMenu.Item>
</AntdMenu.SubMenu> </AntdMenu.SubMenu>
)} )}
@ -996,8 +998,8 @@ Menu.DesignableBar = (props) => {
key={'delete'} key={'delete'}
onClick={() => { onClick={() => {
Modal.confirm({ Modal.confirm({
title: '删除菜单', title: `删除${formConfig.title}`,
content: '确认删除此菜单项吗?', content: '删除后无法恢复,确定要删除吗?',
onOk: async () => { onOk: async () => {
const target = remove(); const target = remove();
await removeSchema(target); await removeSchema(target);