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

Question

With Ant Design Pro v4, when init project, by choosing the option complete scaffolding , you'll get the Setting Drawer out of the box. But in v5, you won't be able to select the complete option (you can refer to this demo video , no Do you need all the blocks or a simple scaffold there), and the default scaffold of v5 has no SettingDrawer .

How to enable it in Ant Design Pro v5? I've read 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 to see what I mean by "quite different".

Answer 1

In And Design Pro v5, use various features by umi plugins. As for this feature, /src/app.tsx should like below:

// /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,
              })
            }
          />
        </>
      );
    },
  }
}