ant-design-pro v5中如何启用SettingDrawer

Question

使用 Ant Design Pro v4，当初始化项目时，by choosing the option complete scaffolding, you'll get the Setting Drawer 开箱即用。但是在 v5 中，你将无法 select complete 选项（你可以参考这个 demo video，没有 Do you need all the blocks or a simple scaffold 那里), v5 默认的scaffold 没有SettingDrawer.

如何在Ant Design Pro v5中开启？我已阅读 this but not helpful because in v5 the Layout configuration code is quite different from v4. You may init the project in v5 here and v4 here 以了解“完全不同”是什么意思。

Answer 1

在 And Design Pro v5 中，通过 umi 插件使用各种功能。对于此功能，/src/app.tsx 应该如下所示：

// /src/app.tsx
import type { RunTimeLayoutConfig } from 'umi';
import { SettingDrawer } from '@ant-design/pro-layout';

import defaultSettings from '../config/defaultSettings';

// https://umijs.org/zh-CN/plugins/plugin-initial-state
export async function getInitialState() {
  // ...
  return {
    // others state
    settings: defaultSettings,
  }
}

// https://umijs.org/zh-CN/plugins/plugin-layout
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    // others props
    childrenRender: (dom) => {
      return (
        <>
          {dom}
          <SettingDrawer
            settings={initialState?.settings}
            disableUrlParams
            onSettingChange={(nextSettings) =>
              setInitialState({
                ...initialState,
                settings: nextSettings,
              })
            }
          />
        </>
      );
    },
  }
}

ant-design-pro v5中如何启用SettingDrawer

How to enable SettingDrawer in ant-design-pro v5

reactjs

antd

ant-design-pro