页面布局

通过Component devtool，页面布局组件是InternalAdminLayout

在网上找可以发现

所以我们将组件锁定在AdminLayout

// packages/core/client/src/route-switch/antd/admin-layout/index.tsx
export const AdminLayout = (props) => {
  return (
    <CurrentAppInfoProvider>
      <CurrentUserProvider>
        <RemoteSchemaTemplateManagerProvider>
          <RemoteCollectionManagerProvider>
            <ACLRolesCheckProvider>
              <InternalAdminLayout {...props} />
            </ACLRolesCheckProvider>
          </RemoteCollectionManagerProvider>
        </RemoteSchemaTemplateManagerProvider>
      </CurrentUserProvider>
    </CurrentAppInfoProvider>
  );
};

外层都是Provider，我们先忽视，直接看InternalAdminLayout，我们将一些无关重要的元素上的属性去掉，展现为如下代码

return (
    <Layout>
      <Layout.Header>
        <div>
          <div>
            <div>
              <img src={result?.data?.data?.logo?.url} />
            </div>
            <div>
              <MenuEditor sideMenuRef={sideMenuRef} />
            </div>
          </div>
          <div>
            <PinnedPluginList />
            <CurrentUser />
          </div>
        </div>
      </Layout.Header>
      <div></div>
      <Layout.Sider></Layout.Sider>
      <Layout.Content>
        <header></header>
        {service.contentLoading ?
        <Spin /> : props.children}
      </Layout.Content>
    </Layout>
);

很清晰的可以看出来，它有一个Header，Sider，Content三个组件组成布局，然后他的Layout来自于antd。

Header

header主要引入了 MenuEditor，最后我们发现它调用了@formily/react的RecursionField

，通过查看官网他的参数如下

interface IRecursionFieldProps {
  schema: Schema //schema对象
  name?: string //路径名称
  basePath?: FormPathPattern //基础路径
  onlyRenderProperties?: boolean //是否只渲染properties
  onlyRenderSelf?: boolean //是否只渲染自身，不渲染properties
  mapProperties?: (schema: Schema, name: string) => Schema //schema properties映射器，主要用于改写schema
  filterProperties?: (schema: Schema, name: string) => boolean //schema properties过滤器，被过滤掉的schema节点不会被渲染
}