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

Question

使用Ant Design Pro v4，在初始化项目by choosing the option complete scaffolding 时，您将获得开箱即用的Setting Drawer。 但是在 v5 中，你将无法选择 complete 选项（你可以参考这个 demo video，没有你需要那里的所有块或简单的脚手架），并且 v5 的默认脚手架没有SettingDrawer。

如何在 Ant Design Pro v5 中启用它？我已经阅读了this 但没有帮助，因为在 v5 中，布局配置代码与 v4 完全不同。您可以在v5 here 和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,
              })
            }
          />
        </>
      );
    },
  }
}