import React, { useRef } from 'react'; import { SchemaRenderer } from '@nocobase/client'; import { Layout } from 'antd'; import { uid } from '@formily/shared'; const schema = { type: 'object', properties: { [uid()]: { type: 'void', 'x-component': 'Menu', 'x-designable-bar': 'Menu.DesignableBar', 'x-component-props': { sideMenuRef: '{{ sideMenuRef }}', mode: 'mix', theme: 'dark', }, properties: { [uid()]: { type: 'void', title: `菜单1`, 'x-designable-bar': 'Menu.DesignableBar', 'x-component': 'Menu.Item', }, [uid()]: { type: 'void', title: `菜单2`, 'x-designable-bar': 'Menu.DesignableBar', 'x-component': 'Menu.Item', }, [uid()]: { type: 'void', title: '菜单组3', 'x-designable-bar': 'Menu.DesignableBar', 'x-component': 'Menu.SubMenu', properties: { [uid()]: { type: 'void', title: `子菜单5`, 'x-designable-bar': 'Menu.DesignableBar', 'x-component': 'Menu.SubMenu', properties: { [uid()]: { type: 'void', title: `子菜单8`, 'x-designable-bar': 'Menu.DesignableBar', 'x-component': 'Menu.Item', }, [uid()]: { type: 'void', title: `子菜单9`, 'x-designable-bar': 'Menu.DesignableBar', 'x-component': 'Menu.Item', }, }, }, }, }, [uid()]: { type: 'void', title: '菜单组4', 'x-designable-bar': 'Menu.DesignableBar', 'x-component': 'Menu.SubMenu', properties: { [uid()]: { type: 'void', title: `子菜单6`, 'x-designable-bar': 'Menu.DesignableBar', 'x-component': 'Menu.Item', }, [uid()]: { type: 'void', title: `子菜单7`, 'x-designable-bar': 'Menu.DesignableBar', 'x-component': 'Menu.Item', }, }, }, }, }, }, }; export default () => { const sideMenuRef = useRef(); return ( ); };