designable bar
This commit is contained in:
parent
75cd158a27
commit
46e4089140
@ -1,6 +1,6 @@
|
|||||||
import React, { createContext, useState } from 'react';
|
import React, { createContext, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
FormItem,
|
// FormItem,
|
||||||
FormLayout,
|
FormLayout,
|
||||||
FormButtonGroup,
|
FormButtonGroup,
|
||||||
Submit,
|
Submit,
|
||||||
@ -41,6 +41,9 @@ import { Table } from './table';
|
|||||||
import { Tabs } from './tabs';
|
import { Tabs } from './tabs';
|
||||||
import { TimePicker } from './time-picker';
|
import { TimePicker } from './time-picker';
|
||||||
import { Upload } from './upload';
|
import { Upload } from './upload';
|
||||||
|
import { FormItem } from './form-item';
|
||||||
|
|
||||||
|
export const BlockContext = createContext({ dragRef: null });
|
||||||
|
|
||||||
const Div = (props) => <div {...props} />;
|
const Div = (props) => <div {...props} />;
|
||||||
|
|
||||||
@ -51,7 +54,6 @@ const scope = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const components = {
|
const components = {
|
||||||
|
|
||||||
Div,
|
Div,
|
||||||
Space,
|
Space,
|
||||||
Card,
|
Card,
|
||||||
@ -87,13 +89,13 @@ const components = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export function registerScope(scopes) {
|
export function registerScope(scopes) {
|
||||||
Object.keys(scopes).forEach(key => {
|
Object.keys(scopes).forEach((key) => {
|
||||||
scope[key] = scopes[key];
|
scope[key] = scopes[key];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export function registerComponents(values) {
|
export function registerComponents(values) {
|
||||||
Object.keys(values).forEach(key => {
|
Object.keys(values).forEach((key) => {
|
||||||
components[key] = values[key];
|
components[key] = values[key];
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -123,6 +125,9 @@ export function DesignableProvider(props) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const DesignableContext =
|
||||||
|
createContext<{ schema: Schema; refresh: any }>(null);
|
||||||
|
|
||||||
export function DesignableSchemaField(props: { schema?: ISchema }) {
|
export function DesignableSchemaField(props: { schema?: ISchema }) {
|
||||||
return (
|
return (
|
||||||
<DesignableProvider schema={new Schema(props.schema)}>
|
<DesignableProvider schema={new Schema(props.schema)}>
|
||||||
|
@ -127,8 +127,8 @@ export type ActionType = React.FC<ActionProps> & {
|
|||||||
DesignableBar?: React.FC<any>;
|
DesignableBar?: React.FC<any>;
|
||||||
};
|
};
|
||||||
|
|
||||||
function Blank({ children }) {
|
function Blank() {
|
||||||
return children;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function useDesignableBar() {
|
function useDesignableBar() {
|
||||||
@ -171,7 +171,6 @@ export const Action: ActionType = observer((props) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<DesignableBar>
|
|
||||||
<Button
|
<Button
|
||||||
{...others}
|
{...others}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
@ -208,8 +207,8 @@ export const Action: ActionType = observer((props) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{field.title}
|
{field.title}
|
||||||
|
<DesignableBar />
|
||||||
</Button>
|
</Button>
|
||||||
</DesignableBar>
|
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -228,17 +227,17 @@ Action.URL = observer((props) => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
Action.DesignableBar = (props) => {
|
Action.DesignableBar = () => {
|
||||||
const field = useField();
|
const field = useField();
|
||||||
const { schema, refresh } = useSchemaQuery();
|
const { schema, refresh } = useSchemaQuery();
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
return (
|
return (
|
||||||
<div className={'designable'}>
|
<div className={classNames('designable-bar', { active: visible })}>
|
||||||
<span
|
<span
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
}}
|
}}
|
||||||
className={classNames('designable-bar', { active: visible })}
|
className={classNames('designable-bar-actions', { active: visible })}
|
||||||
>
|
>
|
||||||
<Dropdown
|
<Dropdown
|
||||||
trigger={['click']}
|
trigger={['click']}
|
||||||
@ -266,7 +265,6 @@ Action.DesignableBar = (props) => {
|
|||||||
<MenuOutlined />
|
<MenuOutlined />
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</span>
|
</span>
|
||||||
{props.children}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,6 +1,25 @@
|
|||||||
.designable {
|
// .designable {
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
position: relative;
|
// position: relative;
|
||||||
|
// &:hover {
|
||||||
|
// .designable-bar {
|
||||||
|
// display: block;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .designable-bar {
|
||||||
|
// display: none;
|
||||||
|
// background: #fff;
|
||||||
|
// z-index: 2;
|
||||||
|
// position: absolute;
|
||||||
|
// right: 10px;
|
||||||
|
// top: 50%;
|
||||||
|
// transform: translateY(-50%);
|
||||||
|
// &.active {
|
||||||
|
// display: block;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
.ant-btn {
|
||||||
&:hover {
|
&:hover {
|
||||||
.designable-bar {
|
.designable-bar {
|
||||||
display: block;
|
display: block;
|
||||||
@ -8,14 +27,27 @@
|
|||||||
}
|
}
|
||||||
.designable-bar {
|
.designable-bar {
|
||||||
display: none;
|
display: none;
|
||||||
background: #fff;
|
|
||||||
z-index: 2;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
top: -1px;
|
||||||
top: 50%;
|
right: -1px;
|
||||||
transform: translateY(-50%);
|
left: -1px;
|
||||||
|
bottom: -1px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 2px solid #1890ff;
|
||||||
&.active {
|
&.active {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.designable-bar-actions {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
line-height: 1rem;
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
z-index: 10;
|
||||||
|
padding: 0 3px;
|
||||||
|
.anticon {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -75,10 +75,6 @@ const row = (schema) => {
|
|||||||
[`gb_${uid()}`]: {
|
[`gb_${uid()}`]: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Grid.Block',
|
'x-component': 'Grid.Block',
|
||||||
'x-component-props': {
|
|
||||||
DesignableBar: `${component}.DesignableBar`,
|
|
||||||
},
|
|
||||||
'x-designable-bar': `${component}.DesignableBar`,
|
|
||||||
properties: {
|
properties: {
|
||||||
[`gbn_${uid()}`]: schema,
|
[`gbn_${uid()}`]: schema,
|
||||||
},
|
},
|
||||||
@ -394,6 +390,7 @@ AddNew.FormItem = observer((props) => {
|
|||||||
name: `f_${uid()}`,
|
name: `f_${uid()}`,
|
||||||
title: `字段${uid()}`,
|
title: `字段${uid()}`,
|
||||||
'x-decorator': 'FormItem',
|
'x-decorator': 'FormItem',
|
||||||
|
'x-designable-bar': 'FormItem.DesignableBar',
|
||||||
'x-component': 'Input',
|
'x-component': 'Input',
|
||||||
});
|
});
|
||||||
console.log({ rowData });
|
console.log({ rowData });
|
||||||
|
@ -41,11 +41,19 @@ const schema = {
|
|||||||
interface: 'icon',
|
interface: 'icon',
|
||||||
type: 'string',
|
type: 'string',
|
||||||
title: `阅读模式`,
|
title: `阅读模式`,
|
||||||
name: 'name2',
|
|
||||||
'x-read-pretty': true,
|
'x-read-pretty': true,
|
||||||
'x-decorator': 'FormItem',
|
'x-decorator': 'FormItem',
|
||||||
'x-component': 'ColorSelect',
|
'x-component': 'ColorSelect',
|
||||||
}
|
},
|
||||||
|
designable: {
|
||||||
|
interface: 'icon',
|
||||||
|
type: 'string',
|
||||||
|
title: `配置模式`,
|
||||||
|
// 'x-read-pretty': true,
|
||||||
|
'x-decorator': 'FormItem',
|
||||||
|
'x-designable-bar': 'FormItem.DesignableBar',
|
||||||
|
'x-component': 'ColorSelect',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
71
packages/client/src/blocks/form-item/index.tsx
Normal file
71
packages/client/src/blocks/form-item/index.tsx
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
import React, { useContext, useState } from 'react';
|
||||||
|
import { connect, mapProps, mapReadPretty, SchemaOptionsContext, useField, useFieldSchema } from '@formily/react';
|
||||||
|
import { FormItem as FormilyFormItem } from '@formily/antd';
|
||||||
|
import { Dropdown, Menu } from 'antd';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { MenuOutlined } from '@ant-design/icons';
|
||||||
|
import './style.less';
|
||||||
|
import get from 'lodash/get';
|
||||||
|
import { BlockContext } from '../SchemaField';
|
||||||
|
|
||||||
|
function Blank() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function useDesignableBar() {
|
||||||
|
const schema = useFieldSchema();
|
||||||
|
const options = useContext(SchemaOptionsContext);
|
||||||
|
const DesignableBar = get(options.components, schema['x-designable-bar']);
|
||||||
|
|
||||||
|
return {
|
||||||
|
DesignableBar: DesignableBar || Blank,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FormItem: any = connect((props) => {
|
||||||
|
const { DesignableBar } = useDesignableBar();
|
||||||
|
const { dragRef } = useContext(BlockContext);
|
||||||
|
return (
|
||||||
|
<div className={'designable-form-item'}>
|
||||||
|
<FormilyFormItem {...props} />
|
||||||
|
{dragRef && <div ref={dragRef}>Drag</div>}
|
||||||
|
<DesignableBar/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
FormItem.DesignableBar = () => {
|
||||||
|
const field = useField();
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
return (
|
||||||
|
<div className={classNames('designable-bar', { active: visible })}>
|
||||||
|
<span
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
className={classNames('designable-bar-actions', { active: visible })}
|
||||||
|
>
|
||||||
|
<Dropdown
|
||||||
|
trigger={['click']}
|
||||||
|
visible={visible}
|
||||||
|
onVisibleChange={(visible) => {
|
||||||
|
setVisible(visible);
|
||||||
|
}}
|
||||||
|
overlay={
|
||||||
|
<Menu>
|
||||||
|
<Menu.Item
|
||||||
|
onClick={(e) => {
|
||||||
|
setVisible(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
点击修改按钮文案
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<MenuOutlined />
|
||||||
|
</Dropdown>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
36
packages/client/src/blocks/form-item/style.less
Normal file
36
packages/client/src/blocks/form-item/style.less
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
.designable-form-item {
|
||||||
|
position: relative;
|
||||||
|
&:hover {
|
||||||
|
.designable-bar {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.designable-bar {
|
||||||
|
z-index: 1;
|
||||||
|
pointer-events: none;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -0;
|
||||||
|
left: -0;
|
||||||
|
bottom: -0;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 2px solid #1890ff;
|
||||||
|
&.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.designable-bar-actions {
|
||||||
|
pointer-events: auto;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
line-height: 1rem;
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
z-index: 10;
|
||||||
|
padding: 0 3px;
|
||||||
|
.anticon {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useState, useContext } from 'react';
|
import React, { useState, useContext, createContext } from 'react';
|
||||||
import { useDrag, mergeRefs, useDrop } from './DND';
|
import { useDrag, mergeRefs, useDrop } from './DND';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import {
|
import {
|
||||||
@ -17,6 +17,7 @@ import {
|
|||||||
DeleteOutlined,
|
DeleteOutlined,
|
||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import get from 'lodash/get';
|
import get from 'lodash/get';
|
||||||
|
import { BlockContext } from '../SchemaField';
|
||||||
|
|
||||||
export const Block = observer((props: any) => {
|
export const Block = observer((props: any) => {
|
||||||
const { children, title, DesignableBar } = props;
|
const { children, title, DesignableBar } = props;
|
||||||
@ -50,6 +51,8 @@ export const Block = observer((props: any) => {
|
|||||||
console.log({ DesignableBarComponent, DesignableBar });
|
console.log({ DesignableBarComponent, DesignableBar });
|
||||||
|
|
||||||
const { addBlock } = useSchemaQuery();
|
const { addBlock } = useSchemaQuery();
|
||||||
|
|
||||||
|
console.log({ children });
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
data-type={'block'}
|
data-type={'block'}
|
||||||
@ -57,10 +60,12 @@ export const Block = observer((props: any) => {
|
|||||||
className={classNames('block', { 'top-half': onTopHalf, hover: isOver })}
|
className={classNames('block', { 'top-half': onTopHalf, hover: isOver })}
|
||||||
// style={{ textAlign: 'center', lineHeight: '60px', background: '#f1f1f1' }}
|
// style={{ textAlign: 'center', lineHeight: '60px', background: '#f1f1f1' }}
|
||||||
>
|
>
|
||||||
{DesignableBarComponent && (
|
<BlockContext.Provider value={{ dragRef }}>
|
||||||
<DefaultActionBar DesignableBarComponent={DesignableBarComponent} dragRef={dragRef} />
|
|
||||||
)}
|
|
||||||
{children}
|
{children}
|
||||||
|
</BlockContext.Provider>
|
||||||
|
{/* {DesignableBarComponent && (
|
||||||
|
<DefaultActionBar DesignableBarComponent={DesignableBarComponent} dragRef={dragRef} />
|
||||||
|
)} */}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -30,7 +30,7 @@ const schema = {
|
|||||||
menu1: {
|
menu1: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Menu',
|
'x-component': 'Menu',
|
||||||
// 'x-decorator': 'Menu.Designable',
|
'x-designable-bar': 'Menu.DesignableBar',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
mode: 'horizontal',
|
mode: 'horizontal',
|
||||||
},
|
},
|
||||||
@ -124,7 +124,7 @@ const schema = {
|
|||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
return (
|
return (
|
||||||
<SchemaBlock schema={schema} />
|
<div style={{width: 200}}><SchemaBlock schema={schema} /></div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
```
|
```
|
@ -3,6 +3,7 @@ import React, {
|
|||||||
createContext,
|
createContext,
|
||||||
useContext,
|
useContext,
|
||||||
useEffect,
|
useEffect,
|
||||||
|
useRef,
|
||||||
useState,
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import {
|
import {
|
||||||
@ -14,6 +15,7 @@ import {
|
|||||||
useFieldSchema,
|
useFieldSchema,
|
||||||
RecursionField,
|
RecursionField,
|
||||||
Schema,
|
Schema,
|
||||||
|
SchemaOptionsContext,
|
||||||
} from '@formily/react';
|
} from '@formily/react';
|
||||||
import {
|
import {
|
||||||
Menu as AntdMenu,
|
Menu as AntdMenu,
|
||||||
@ -49,20 +51,44 @@ import {
|
|||||||
} from '@ant-design/icons';
|
} from '@ant-design/icons';
|
||||||
import './style.less';
|
import './style.less';
|
||||||
import { Icon } from '../icon-picker';
|
import { Icon } from '../icon-picker';
|
||||||
import {
|
import { useHistory } from 'react-router-dom';
|
||||||
useHistory,
|
import cls from 'classnames';
|
||||||
} from 'react-router-dom';
|
|
||||||
|
|
||||||
export type MenuType = React.FC<MenuProps & { hideSubMenu?: boolean }> & {
|
export type MenuType = React.FC<MenuProps & { hideSubMenu?: boolean }> & {
|
||||||
Item?: React.FC<MenuItemProps>;
|
Item?: React.FC<MenuItemProps>;
|
||||||
SubMenu?: React.FC<SubMenuProps>;
|
SubMenu?: React.FC<SubMenuProps>;
|
||||||
Divider?: React.FC<DividerProps>;
|
Divider?: React.FC<DividerProps>;
|
||||||
Designable?: React.FC<any>;
|
DesignableBar?: React.FC<any>;
|
||||||
AddNew?: React.FC<any>;
|
AddNew?: React.FC<any>;
|
||||||
Link?: React.FC<MenuItemProps>;
|
Link?: React.FC<MenuItemProps>;
|
||||||
Url?: React.FC<MenuItemProps & { url: string }>;
|
Url?: React.FC<MenuItemProps & { url: string }>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function Blank() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function useDesignableBar() {
|
||||||
|
const schema = useFieldSchema();
|
||||||
|
|
||||||
|
let s = schema;
|
||||||
|
let DesignableBarName;
|
||||||
|
while (s.parent) {
|
||||||
|
if (s.parent['x-component'] === 'Menu') {
|
||||||
|
DesignableBarName = s.parent['x-designable-bar'];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
s = s.parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
const options = useContext(SchemaOptionsContext);
|
||||||
|
const DesignableBar = DesignableBarName ? get(options.components, DesignableBarName) : null;
|
||||||
|
|
||||||
|
return {
|
||||||
|
DesignableBar: DesignableBar || Blank,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
export function removeProperty(property: Schema) {
|
export function removeProperty(property: Schema) {
|
||||||
property.parent.removeProperty(property.name);
|
property.parent.removeProperty(property.name);
|
||||||
}
|
}
|
||||||
@ -98,7 +124,7 @@ export function useSchemaQuery(segments?: any[]) {
|
|||||||
const getSchemaByPath = (path) => {
|
const getSchemaByPath = (path) => {
|
||||||
let s: Schema = context;
|
let s: Schema = context;
|
||||||
const names = [...path];
|
const names = [...path];
|
||||||
console.log('names', [...names], path, context)
|
console.log('names', [...names], path, context);
|
||||||
// names.shift();
|
// names.shift();
|
||||||
while (s && names.length) {
|
while (s && names.length) {
|
||||||
const name = names.shift();
|
const name = names.shift();
|
||||||
@ -247,21 +273,28 @@ const AddNewAction = () => {
|
|||||||
|
|
||||||
const SettingAction = () => {
|
const SettingAction = () => {
|
||||||
const field = useField();
|
const field = useField();
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
const { schema, refresh, remove, insertBefore, insertAfter, appendChild } =
|
const { schema, refresh, remove, insertBefore, insertAfter, appendChild } =
|
||||||
useSchemaQuery();
|
useSchemaQuery();
|
||||||
const text = schema['x-component'] === 'Menu.SubMenu' ? '当前菜单组' : '当前菜单';
|
const text =
|
||||||
|
schema['x-component'] === 'Menu.SubMenu' ? '当前菜单组' : '当前菜单';
|
||||||
return (
|
return (
|
||||||
|
<div className={cls('designable-bar', { active: visible })}>
|
||||||
<div
|
<div
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}}
|
}}
|
||||||
className={'designable-action'}
|
className={'designable-bar-actions'}
|
||||||
>
|
>
|
||||||
<Dropdown
|
<Dropdown
|
||||||
overlayStyle={{
|
overlayStyle={{
|
||||||
minWidth: 150,
|
minWidth: 150,
|
||||||
}}
|
}}
|
||||||
|
visible={visible}
|
||||||
|
onVisibleChange={(visible) => {
|
||||||
|
setVisible(visible);
|
||||||
|
}}
|
||||||
trigger={['click']}
|
trigger={['click']}
|
||||||
overlay={
|
overlay={
|
||||||
<AntdMenu>
|
<AntdMenu>
|
||||||
@ -404,7 +437,10 @@ const SettingAction = () => {
|
|||||||
<LinkOutlined /> 添加链接
|
<LinkOutlined /> 添加链接
|
||||||
</AntdMenu.Item>
|
</AntdMenu.Item>
|
||||||
</AntdMenu.SubMenu>
|
</AntdMenu.SubMenu>
|
||||||
<AntdMenu.SubMenu icon={<ArrowDownOutlined />} title={`${text}后`}>
|
<AntdMenu.SubMenu
|
||||||
|
icon={<ArrowDownOutlined />}
|
||||||
|
title={`${text}后`}
|
||||||
|
>
|
||||||
<AntdMenu.Item
|
<AntdMenu.Item
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
FormDialog(`新建菜单`, () => {
|
FormDialog(`新建菜单`, () => {
|
||||||
@ -500,7 +536,10 @@ const SettingAction = () => {
|
|||||||
</AntdMenu.Item>
|
</AntdMenu.Item>
|
||||||
</AntdMenu.SubMenu>
|
</AntdMenu.SubMenu>
|
||||||
{schema['x-component'] === 'Menu.SubMenu' ? (
|
{schema['x-component'] === 'Menu.SubMenu' ? (
|
||||||
<AntdMenu.SubMenu icon={<ArrowRightOutlined />} title={`${text}里`}>
|
<AntdMenu.SubMenu
|
||||||
|
icon={<ArrowRightOutlined />}
|
||||||
|
title={`${text}里`}
|
||||||
|
>
|
||||||
<AntdMenu.Item
|
<AntdMenu.Item
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
FormDialog(`新建菜单`, () => {
|
FormDialog(`新建菜单`, () => {
|
||||||
@ -614,6 +653,7 @@ const SettingAction = () => {
|
|||||||
<MenuOutlined />
|
<MenuOutlined />
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -680,27 +720,424 @@ Menu.Link = observer((props) => {
|
|||||||
|
|
||||||
Menu.Item = observer((props) => {
|
Menu.Item = observer((props) => {
|
||||||
const field = useField();
|
const field = useField();
|
||||||
|
const { DesignableBar } = useDesignableBar();
|
||||||
const { schema, refresh } = useSchemaQuery();
|
const { schema, refresh } = useSchemaQuery();
|
||||||
return (
|
return (
|
||||||
<AntdMenu.Item
|
<AntdMenu.Item
|
||||||
{...props}
|
{...props}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
const el = e.domEvent.target as HTMLElement;
|
||||||
|
console.log(
|
||||||
|
'onMouseEnter',
|
||||||
|
el.offsetTop,
|
||||||
|
el.offsetLeft,
|
||||||
|
el.clientWidth,
|
||||||
|
el.clientHeight,
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
console.log('onMouseLeave');
|
||||||
|
}}
|
||||||
schema={schema}
|
schema={schema}
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
eventKey={schema.name}
|
eventKey={schema.name}
|
||||||
key={schema.name}
|
key={schema.name}
|
||||||
icon={props.icon ? <Icon type={props.icon as string} /> : undefined}
|
icon={props.icon ? <Icon type={props.icon as string} /> : undefined}
|
||||||
>
|
>
|
||||||
{field.title} <SettingAction />
|
{field.title}
|
||||||
|
<DesignableBar />
|
||||||
</AntdMenu.Item>
|
</AntdMenu.Item>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Menu
|
Menu.DesignableBar = (props) => {
|
||||||
Menu.Designable = (props) => {
|
const field = useField();
|
||||||
return props.children;
|
const [visible, setVisible] = useState(false);
|
||||||
|
const { schema, refresh, remove, insertBefore, insertAfter, appendChild } =
|
||||||
|
useSchemaQuery();
|
||||||
|
const text =
|
||||||
|
schema['x-component'] === 'Menu.SubMenu' ? '当前菜单组' : '当前菜单';
|
||||||
|
return (
|
||||||
|
<div className={cls('designable-bar', { active: visible })}>
|
||||||
|
<div
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
}}
|
||||||
|
className={'designable-bar-actions'}
|
||||||
|
>
|
||||||
|
<Dropdown
|
||||||
|
overlayStyle={{
|
||||||
|
minWidth: 150,
|
||||||
|
}}
|
||||||
|
visible={visible}
|
||||||
|
onVisibleChange={(visible) => {
|
||||||
|
setVisible(visible);
|
||||||
|
}}
|
||||||
|
trigger={['click']}
|
||||||
|
overlay={
|
||||||
|
<AntdMenu>
|
||||||
|
<AntdMenu.Item
|
||||||
|
onClick={() => {
|
||||||
|
FormDialog('编辑菜单', () => {
|
||||||
|
return (
|
||||||
|
<FormLayout layout={'vertical'}>
|
||||||
|
<SchemaField>
|
||||||
|
<SchemaField.String
|
||||||
|
name="title"
|
||||||
|
required
|
||||||
|
title="菜单名称"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="Input"
|
||||||
|
/>
|
||||||
|
<SchemaField.String
|
||||||
|
name=".icon"
|
||||||
|
title="图标"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="IconPicker"
|
||||||
|
/>
|
||||||
|
</SchemaField>
|
||||||
|
{/* <FormDialog.Footer>
|
||||||
|
<span style={{ marginLeft: 4 }}>扩展文案</span>
|
||||||
|
</FormDialog.Footer> */}
|
||||||
|
</FormLayout>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.open({
|
||||||
|
initialValues: {
|
||||||
|
title: schema.title,
|
||||||
|
icon: schema['x-component-props']?.['icon'],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((data) => {
|
||||||
|
schema.title = data.title;
|
||||||
|
const componentProps = schema['x-component-props'] || {};
|
||||||
|
componentProps['icon'] = data.icon;
|
||||||
|
field.setTitle(data.title);
|
||||||
|
field.setComponentProps(componentProps);
|
||||||
|
refresh();
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EditOutlined /> 编辑菜单
|
||||||
|
</AntdMenu.Item>
|
||||||
|
<AntdMenu.Item>
|
||||||
|
<ArrowRightOutlined /> 移动到
|
||||||
|
</AntdMenu.Item>
|
||||||
|
<AntdMenu.Divider />
|
||||||
|
<AntdMenu.SubMenu icon={<ArrowUpOutlined />} title={`${text}前`}>
|
||||||
|
<AntdMenu.Item
|
||||||
|
onClick={() => {
|
||||||
|
FormDialog(`新建菜单`, () => {
|
||||||
|
return (
|
||||||
|
<FormLayout layout={'vertical'}>
|
||||||
|
<SchemaField>
|
||||||
|
<SchemaField.String
|
||||||
|
name="title"
|
||||||
|
required
|
||||||
|
title="名称"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="Input"
|
||||||
|
/>
|
||||||
|
<SchemaField.String
|
||||||
|
name="icon"
|
||||||
|
title="图标"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="IconPicker"
|
||||||
|
/>
|
||||||
|
</SchemaField>
|
||||||
|
</FormLayout>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.open({})
|
||||||
|
.then((data) => {
|
||||||
|
insertBefore({
|
||||||
|
name: `m_${uid()}`,
|
||||||
|
type: 'void',
|
||||||
|
title: data.title,
|
||||||
|
'x-component': 'Menu.Item',
|
||||||
|
'x-component-props': {
|
||||||
|
icon: data.icon,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
style={{ minWidth: 150 }}
|
||||||
|
>
|
||||||
|
<MenuOutlined /> 新建菜单
|
||||||
|
</AntdMenu.Item>
|
||||||
|
<AntdMenu.Item
|
||||||
|
onClick={() => {
|
||||||
|
FormDialog(`新建菜单组`, () => {
|
||||||
|
return (
|
||||||
|
<FormLayout layout={'vertical'}>
|
||||||
|
<SchemaField>
|
||||||
|
<SchemaField.String
|
||||||
|
name="title"
|
||||||
|
required
|
||||||
|
title="名称"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="Input"
|
||||||
|
/>
|
||||||
|
<SchemaField.String
|
||||||
|
name="icon"
|
||||||
|
title="图标"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="IconPicker"
|
||||||
|
/>
|
||||||
|
</SchemaField>
|
||||||
|
</FormLayout>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.open({})
|
||||||
|
.then((data) => {
|
||||||
|
insertBefore({
|
||||||
|
name: `m_${uid()}`,
|
||||||
|
type: 'void',
|
||||||
|
title: data.title,
|
||||||
|
'x-component': 'Menu.SubMenu',
|
||||||
|
'x-component-props': {
|
||||||
|
icon: data.icon,
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
[`m_${uid()}`]: {
|
||||||
|
type: 'void',
|
||||||
|
title: `菜单 ${uid()}`,
|
||||||
|
'x-component': 'Menu.Item',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<GroupOutlined /> 新建分组
|
||||||
|
</AntdMenu.Item>
|
||||||
|
<AntdMenu.Item>
|
||||||
|
<LinkOutlined /> 添加链接
|
||||||
|
</AntdMenu.Item>
|
||||||
|
</AntdMenu.SubMenu>
|
||||||
|
<AntdMenu.SubMenu
|
||||||
|
icon={<ArrowDownOutlined />}
|
||||||
|
title={`${text}后`}
|
||||||
|
>
|
||||||
|
<AntdMenu.Item
|
||||||
|
onClick={() => {
|
||||||
|
FormDialog(`新建菜单`, () => {
|
||||||
|
return (
|
||||||
|
<FormLayout layout={'vertical'}>
|
||||||
|
<SchemaField>
|
||||||
|
<SchemaField.String
|
||||||
|
name="title"
|
||||||
|
required
|
||||||
|
title="名称"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="Input"
|
||||||
|
/>
|
||||||
|
<SchemaField.String
|
||||||
|
name="icon"
|
||||||
|
title="图标"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="IconPicker"
|
||||||
|
/>
|
||||||
|
</SchemaField>
|
||||||
|
</FormLayout>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.open({})
|
||||||
|
.then((data) => {
|
||||||
|
insertAfter(
|
||||||
|
new Schema({
|
||||||
|
name: `m_${uid()}`,
|
||||||
|
type: 'void',
|
||||||
|
title: data.title,
|
||||||
|
'x-component': 'Menu.Item',
|
||||||
|
'x-component-props': {
|
||||||
|
icon: data.icon,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
style={{ minWidth: 150 }}
|
||||||
|
>
|
||||||
|
<MenuOutlined /> 新建菜单
|
||||||
|
</AntdMenu.Item>
|
||||||
|
<AntdMenu.Item
|
||||||
|
onClick={() => {
|
||||||
|
FormDialog(`新建菜单组`, () => {
|
||||||
|
return (
|
||||||
|
<FormLayout layout={'vertical'}>
|
||||||
|
<SchemaField>
|
||||||
|
<SchemaField.String
|
||||||
|
name="title"
|
||||||
|
required
|
||||||
|
title="名称"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="Input"
|
||||||
|
/>
|
||||||
|
<SchemaField.String
|
||||||
|
name="icon"
|
||||||
|
title="图标"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="IconPicker"
|
||||||
|
/>
|
||||||
|
</SchemaField>
|
||||||
|
</FormLayout>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.open({})
|
||||||
|
.then((data) => {
|
||||||
|
insertAfter(
|
||||||
|
new Schema({
|
||||||
|
name: `m_${uid()}`,
|
||||||
|
type: 'void',
|
||||||
|
title: data.title,
|
||||||
|
'x-component': 'Menu.SubMenu',
|
||||||
|
'x-component-props': {
|
||||||
|
icon: data.icon,
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
[`m_${uid()}`]: {
|
||||||
|
type: 'void',
|
||||||
|
title: `菜单 ${uid()}`,
|
||||||
|
'x-component': 'Menu.Item',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<GroupOutlined /> 新建分组
|
||||||
|
</AntdMenu.Item>
|
||||||
|
<AntdMenu.Item>
|
||||||
|
<LinkOutlined /> 添加链接
|
||||||
|
</AntdMenu.Item>
|
||||||
|
</AntdMenu.SubMenu>
|
||||||
|
{schema['x-component'] === 'Menu.SubMenu' ? (
|
||||||
|
<AntdMenu.SubMenu
|
||||||
|
icon={<ArrowRightOutlined />}
|
||||||
|
title={`${text}里`}
|
||||||
|
>
|
||||||
|
<AntdMenu.Item
|
||||||
|
onClick={() => {
|
||||||
|
FormDialog(`新建菜单`, () => {
|
||||||
|
return (
|
||||||
|
<FormLayout layout={'vertical'}>
|
||||||
|
<SchemaField>
|
||||||
|
<SchemaField.String
|
||||||
|
name="title"
|
||||||
|
required
|
||||||
|
title="名称"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="Input"
|
||||||
|
/>
|
||||||
|
<SchemaField.String
|
||||||
|
name="icon"
|
||||||
|
title="图标"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="IconPicker"
|
||||||
|
/>
|
||||||
|
</SchemaField>
|
||||||
|
</FormLayout>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.open({})
|
||||||
|
.then((data) => {
|
||||||
|
appendChild(
|
||||||
|
new Schema({
|
||||||
|
name: `m_${uid()}`,
|
||||||
|
type: 'void',
|
||||||
|
title: data.title,
|
||||||
|
'x-component': 'Menu.Item',
|
||||||
|
'x-component-props': {
|
||||||
|
icon: data.icon,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
style={{ minWidth: 150 }}
|
||||||
|
>
|
||||||
|
<MenuOutlined /> 新建菜单
|
||||||
|
</AntdMenu.Item>
|
||||||
|
<AntdMenu.Item
|
||||||
|
onClick={() => {
|
||||||
|
FormDialog(`新建菜单组`, () => {
|
||||||
|
return (
|
||||||
|
<FormLayout layout={'vertical'}>
|
||||||
|
<SchemaField>
|
||||||
|
<SchemaField.String
|
||||||
|
name="title"
|
||||||
|
required
|
||||||
|
title="名称"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="Input"
|
||||||
|
/>
|
||||||
|
<SchemaField.String
|
||||||
|
name="icon"
|
||||||
|
title="图标"
|
||||||
|
x-decorator="FormItem"
|
||||||
|
x-component="IconPicker"
|
||||||
|
/>
|
||||||
|
</SchemaField>
|
||||||
|
</FormLayout>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.open({})
|
||||||
|
.then((data) => {
|
||||||
|
appendChild(
|
||||||
|
new Schema({
|
||||||
|
name: `m_${uid()}`,
|
||||||
|
type: 'void',
|
||||||
|
title: data.title,
|
||||||
|
'x-component': 'Menu.SubMenu',
|
||||||
|
'x-component-props': {
|
||||||
|
icon: data.icon,
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
[`m_${uid()}`]: {
|
||||||
|
type: 'void',
|
||||||
|
title: `菜单 ${uid()}`,
|
||||||
|
'x-component': 'Menu.Item',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<GroupOutlined /> 新建分组
|
||||||
|
</AntdMenu.Item>
|
||||||
|
<AntdMenu.Item>
|
||||||
|
<LinkOutlined /> 添加链接
|
||||||
|
</AntdMenu.Item>
|
||||||
|
</AntdMenu.SubMenu>
|
||||||
|
) : null}
|
||||||
|
<AntdMenu.Divider />
|
||||||
|
<AntdMenu.Item
|
||||||
|
onClick={() => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '删除菜单',
|
||||||
|
content: '确认删除此菜单项吗?',
|
||||||
|
onOk: remove,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteOutlined /> 删除菜单
|
||||||
|
</AntdMenu.Item>
|
||||||
|
</AntdMenu>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<MenuOutlined />
|
||||||
|
</Dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
Menu.SubMenu = observer((props) => {
|
Menu.SubMenu = observer((props) => {
|
||||||
|
const { DesignableBar } = useDesignableBar();
|
||||||
const schema = useFieldSchema();
|
const schema = useFieldSchema();
|
||||||
let s = schema;
|
let s = schema;
|
||||||
let hideSubMenu;
|
let hideSubMenu;
|
||||||
@ -721,7 +1158,7 @@ Menu.SubMenu = observer((props) => {
|
|||||||
schema={schema}
|
schema={schema}
|
||||||
title={
|
title={
|
||||||
<>
|
<>
|
||||||
{schema.title} <SettingAction />
|
{schema.title} <DesignableBar />
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
eventKey={schema.name}
|
eventKey={schema.name}
|
||||||
|
@ -1,34 +1,62 @@
|
|||||||
.designable-action {
|
|
||||||
position: absolute;
|
|
||||||
right: 16px;
|
|
||||||
display: none;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.ant-menu-dark.ant-menu-horizontal {
|
.ant-menu-dark.ant-menu-horizontal {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.ant-menu-dark .ant-menu-item-active .designable-action {
|
.ant-menu-dark .ant-menu-item-active .designable-bar {
|
||||||
background-color: #001529;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-menu-dark .ant-menu-item-active:hover .designable-action,
|
.ant-menu-dark .ant-menu-item-active:hover .designable-bar,
|
||||||
.ant-menu-dark .ant-menu-item-active.ant-menu-item-selected .designable-action {
|
.ant-menu-dark .ant-menu-item-active.ant-menu-item-selected .designable-bar {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-menu-light .ant-menu-submenu-active > .ant-menu-submenu-title .designable-bar,
|
||||||
|
.ant-menu-light .ant-menu-item-active .designable-bar {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .ant-menu-sub.ant-menu-inline .ant-menu-submenu-active > .ant-menu-submenu-title .designable-action,
|
||||||
|
// .ant-menu-sub.ant-menu-inline .ant-menu-item-active .designable-action {
|
||||||
|
// background-color: #fafafa;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .ant-menu-light .ant-menu-item-selected .designable-action {
|
||||||
|
// background-color: #e6f7ff !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.ant-menu {
|
||||||
|
.designable-bar {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border: 2px solid #1890ff;
|
||||||
|
&.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.designable-bar-actions {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
line-height: 1rem;
|
||||||
background-color: #1890ff;
|
background-color: #1890ff;
|
||||||
display: inline-block;
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
z-index: 10;
|
||||||
|
.anticon {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-menu-light .ant-menu-submenu-active > .ant-menu-submenu-title .designable-action,
|
.ant-menu-submenu-horizontal > .ant-menu-submenu-title {
|
||||||
.ant-menu-light .ant-menu-item-active .designable-action {
|
.designable-bar {
|
||||||
background-color: #fff;
|
position: absolute;
|
||||||
display: inline-block;
|
left: -20px;
|
||||||
}
|
right: -20px;
|
||||||
|
border: 2px solid #1890ff;
|
||||||
.ant-menu-sub.ant-menu-inline .ant-menu-submenu-active > .ant-menu-submenu-title .designable-action,
|
}
|
||||||
.ant-menu-sub.ant-menu-inline .ant-menu-item-active .designable-action {
|
|
||||||
background-color: #fafafa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-menu-light .ant-menu-item-selected .designable-action {
|
|
||||||
background-color: #e6f7ff !important;
|
|
||||||
}
|
}
|
@ -189,11 +189,11 @@ function useMenuSchema({ schema, selectedKey }) {
|
|||||||
|
|
||||||
// const topMenuSchema = new Schema(cloneDeep(schema.toJSON()));
|
// const topMenuSchema = new Schema(cloneDeep(schema.toJSON()));
|
||||||
|
|
||||||
let selected = find(schema).shift() as Schema;
|
let selected = find(topMenuSchema).shift() as Schema;
|
||||||
|
|
||||||
console.log({ topMenuSchema, selected, schema });
|
console.log({ topMenuSchema, selected, schema });
|
||||||
|
|
||||||
if (selected.properties) {
|
if (selected && selected.properties) {
|
||||||
const findChild = (properties) => {
|
const findChild = (properties) => {
|
||||||
const keys = Object.keys(properties || {});
|
const keys = Object.keys(properties || {});
|
||||||
const firstKey = keys.shift();
|
const firstKey = keys.shift();
|
||||||
@ -420,8 +420,6 @@ function Content({ activeKey }) {
|
|||||||
export function AdminLayout({ route, children }: any) {
|
export function AdminLayout({ route, children }: any) {
|
||||||
const match = useRouteMatch<any>();
|
const match = useRouteMatch<any>();
|
||||||
|
|
||||||
console.log('match.params', match.params);
|
|
||||||
|
|
||||||
const { data = {}, loading } = useRequest(
|
const { data = {}, loading } = useRequest(
|
||||||
`/api/blocks:getSchema/${route.blockId}`,
|
`/api/blocks:getSchema/${route.blockId}`,
|
||||||
{
|
{
|
||||||
|
Loading…
Reference in New Issue
Block a user