import React, { useContext, useEffect, useRef, useState } from 'react'; import { Button, Spin, Layout, PageHeader, Modal, Menu, Collapse, Dropdown, Tooltip, } from 'antd'; import isEmpty from 'lodash/isEmpty'; import { Link, useLocation, useRouteMatch, useHistory, Redirect, } from 'react-router-dom'; import { SchemaRenderer } from '../../schemas'; import { useRequest } from 'ahooks'; import './style.less'; import { ISchema, Schema } from '@formily/react'; import Database, { useAsyncDataSource } from './datatable'; import { HighlightOutlined } from '@ant-design/icons'; import cls from 'classnames'; import { DesignableSwitchProvider, useDesignableSwitchContext, PageTitleProvider, usePageTitleContext, CollectionsProvider, useCollectionsContext, } from '../../constate'; import { uid } from '@formily/shared'; import { Permissions } from './Permissions'; import { Collections } from './Collections' import { More } from './More'; import { UserInfo } from './UserInfo'; import { SiteTitle, SystemSettingsProvider, useSystemSettings, } from './SiteTitle'; import { AuthProvider } from './Auth'; import { Helmet } from 'react-helmet'; import { MenuSelectedKeysContext } from '../../schemas/menu'; function DesignableToggle() { const { designable, setDesignable } = useDesignableSwitchContext(); return ( ); } interface LayoutWithMenuProps { schema: Schema; [key: string]: any; } function LayoutWithMenu(props: LayoutWithMenuProps) { const { schema, defaultSelectedKeys } = props; const match = useRouteMatch(); const sideMenuRef = useRef(); const history = useHistory(); const { title } = useSystemSettings(); const [activeKey, setActiveKey] = useState(match.params.name); const { setPageTitle } = usePageTitleContext(); const [selectedKeys, setSelectedKeys] = useState(defaultSelectedKeys); const onSelect = (info) => { if (!info.schema) { setActiveKey(null); } else if (info.schema['x-component'] === 'Menu.SubMenu') { const findMenuItem = (schema: Schema) => { const first = Object.values(schema.properties || {}).shift(); if (!first) { return null; } if (['Menu.Link', 'Menu.URL'].includes(first['x-component'])) { return first; } return findMenuItem(first); }; console.log('info.schema', findMenuItem(info.schema)); // 实际应该取第一个子元素 const node = findMenuItem(info.schema); setActiveKey(node?.key); if (node?.key) { history.push(`/admin/${node?.key}`); const keys = [node?.name]; let parent = node?.parent; while (parent) { if (parent['x-component'] === 'Menu') { break; } keys.unshift(parent.name); parent = parent.parent; } setSelectedKeys(keys); if (node.title) { setPageTitle(node.title); } } } else { setActiveKey(info.schema.key); history.push(`/admin/${info.schema.key}`); if (info.schema.title) { setPageTitle(info.schema.title); const keys = [info.schema?.name]; let parent = info.schema?.parent; while (parent) { if (parent['x-component'] === 'Menu') { break; } keys.unshift(parent.name); parent = parent.parent; } setSelectedKeys(keys); // setSelectedKeys([info.schema.name]); } } }; useEffect(() => { setActiveKey(match.params.name); }, [match.params.name]); const onMenuItemRemove = () => { history.push(`/admin`); }; console.log({ activeKey, selectedKeys }); return ( { console.log('getSelectedKeys', schema); return selectedKeys.filter(Boolean); }, selectedKeys: selectedKeys.filter(Boolean), }} /> {activeKey ? ( ) : ( {title} )} ); } function Content({ activeKey }) { const { designable } = useDesignableSwitchContext(); const { collections } = useCollectionsContext(); const { data = {}, loading } = useRequest( `ui_schemas:getTree?filter[parentKey]=${activeKey}`, { refreshDeps: [activeKey, collections, designable], formatResult: (result) => result?.data, }, ); if (loading) { return ; } return ; } export function AdminLayout({ route, ...others }: any) { const match = useRouteMatch(); const { data = {}, loading } = useRequest( `ui_schemas:getTree/${route.uiSchemaKey}`, { refreshDeps: [route], formatResult: (result) => result?.data, }, ); if (loading) { return ; } const findProperties = (schema: Schema): Schema[] => { if (!schema) { return []; } return schema.reduceProperties((items, current) => { if (current['key'] == match.params.name) { return [...items, current]; } return [...items, ...findProperties(current)]; }, []); }; const current = findProperties(new Schema(data)).shift(); const defaultSelectedKeys = [current?.name]; let parent = current?.parent; while (parent) { if (parent['x-component'] === 'Menu') { break; } defaultSelectedKeys.unshift(parent.name); parent = parent.parent; } console.log('current?.title', current, current?.title, defaultSelectedKeys); return ( ); } export default AdminLayout;