pro5不支持自定义export Layout 🧐[问题]

[huangshiqiang]

🧐 问题描述

pro5的布局采用在app.tsx中导出一个layout的配置，而不是导出一个layout的组件，这样布局就不够灵活。希望可以像pro4一样，可以直接修改BasicLayout.tsx

💻 示例代码

  initialState,
}: {
  initialState: {
    settings?: LayoutSettings;
    currentUser?: API.CurrentUser;
    menuData: MenuDataItem[];
  };
}): BasicLayoutProps => {
  console.log(initialState);
  const props: BasicLayoutProps = {
    title: 'YLOO',
    logo: <EditOutlined />,
    formatMessage: undefined,
    disableContentMargin: true,
    rightContentRender: () => <RightContent />,
    footerRender: () => <Footer />,
    onPageChange: () => {
      const { currentUser } = initialState;
      const { location } = history;
      // 如果没有登录，重定向到 login
      if (!currentUser && location.pathname !== '/user/login') {
        history.push('/user/login');
      }
    },
    collapsedButtonRender: false,
    menuDataRender: () => {
      const { menuData } = initialState;
      return menuDataRender(menuData);
    },
    // children: ({children}) => {return<div>========{children}</div>},
    menuHeaderRender: undefined,
    ...initialState?.settings,
  };
  return props;
};

希望可类似如下的方式，导出的是虚拟dom的形式，而不是配置，这样灵活度更高。。 export default BasicLayout;

🚑 其他信息

[chenshuai2144]

那不就回去了，我们就是不想灵活，你需要灵活可以用自定义 layout来实现， 官方就是为了收敛才做的插件

[huangshiqiang]

那不就回去了，我们就是不想灵活，你需要灵活可以用自定义 layout来实现， 官方就是为了收敛才做的插件

问题是这样我就实现不了微前端，根据不同的要求，加载不同的布局，比如作为子应用的时候的布局方式和主应用的时候的布局，甚至希望添加tab的方式，现在都扩展不了。那应该如何解决呢？又想用框架，但是又扩展不了。。。收敛设计应该是保证业务还能完成具体的功能的基础上的吧。。

另外自定义layout要怎么实现？有文档介绍吗？

[zexliu]

同样有这个问题....

[huangshiqiang]

同样有这个问题....

pro5里面export的是layout的配置，导致想自定义collapsed的位置，在app.tsx中也不能使用hooks来控制pro4里面就可以自定义，使用起来扩展性高很多。。哎。。。

[chenshuai2144]

你可以关掉 layout，然后自定义，这样就可以回到 v4 了

[huangshiqiang]

你可以关掉 layout，然后自定义，这样就可以回到 v4 了

请问v5下面要怎么关闭layout，然后使用类似v4的自定义的layout呢？以下方法关闭layout是吧？ 1.修改config.ts的layout的值为false? export default defineConfig({ ... layout: false, .... });

其他的这么调整呢？谢谢。。

[chenshuai2144]

https://beta-pro.ant.design/docs/my-layout-cn

看这个文档

[yunsii]

@chenshuai2144 有配置能让 Provider 组件包裹插件的 Layout 吗？因为这个问题好像只能去自己搞个 Layout 了

[chenshuai2144]

有 childrenRender 这个 api

[yunsii]

有 childrenRender 这个 api

发现了，想配置 UseRequestProvider 来着，不过从 umi 里导出的的 useRequest 类型好像有问题，不能推导 😂 还是打算直接用 ahooks

[whaty]

https://beta-pro.ant.design/docs/my-layout-cn

看这个文档

文档404

[chenshuai2144]

https://pro.ant.design/zh-CN/docs/layout

[wzc0x0]

同样有这个问题....

pro5里面export的是layout的配置，导致想自定义collapsed的位置，在app.tsx中也不能使用hooks来控制pro4里面就可以自定义，使用起来扩展性高很多。。哎。。。

通过layout导出的 setInitialState和initialState来控制闭合

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    rightContentRender: () => <RightContent />,
    menu: {
      request: async () =>
        loopMenuItem(initialState?.resourceInfoList || []).concat(
          routes.filter((item) => item.hideInMenu),
        ),
      locale: false,
    },
    disableContentMargin: false,
    collapsed: initialState?.collapsed,
    onCollapse: (collapsed: boolean) => setInitialState({ ...initialState, collapsed }),
    onPageChange: () => {
      const { location } = history;
      if (collapsedPathList.includes(location.pathname)) {
        setInitialState({ ...initialState, collapsed: true });
      } else {
        setInitialState({ ...initialState, collapsed: false });
      }
      // 如果没有登录，重定向到 login
      if (!initialState?.currentUser && !whitePathList.includes(location.pathname)) {
        loginOut();
      }
    },
    menuHeaderRender: (_: any, title, props) =>
      !props?.collapsed && (
        <div className="menu-header-container">
          <img src={require('@/assets/logo.png')} alt="" />
          <div className="header-title">{title}</div>
        </div>
      ),
    headerContentRender: (headerContentRenderProps: any) => {
      const { matchMenuKeys, breadcrumb } = headerContentRenderProps;
      return (
        <div>
          {matchMenuKeys.map((i: any, index: number) => {
            const route = breadcrumb[i];
            if (!route) {
              return <span key="/" />;
            }
            const lastName = route.name;
            return (
              <span key={route.path}>
                {index === matchMenuKeys.length - 1 ? (
                  <>
                    {matchMenuKeys.length > 1 && (
                      <span className="ant-breadcrumb-separator">/</span>
                    )}
                    <span style={{ color: 'rgb(0,0,0,0.85)' }}>{lastName}</span>
                  </>
                ) : (
                  <Link to={route.path}>
                    <span style={{ color: 'rgb(0,0,0,0.45)', cursor: 'point' }}>{route.name}</span>
                  </Link>
                )}
              </span>
            );
          })}
        </div>
      );
    },
    // 自定义 403 页面
    // unAccessible: <div>unAccessible</div>,
    // ...initialState?.settings,
  };
};```