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

Question

使用Ant Design Pro v4，当init项目，脚手架时，您将从盒子中得到设置抽屉。

但是在SettingDrawer.中，您将无法选择complete选项(您可以引用这个演示视频，不需要所有的块或简单的脚手架)，并且 v5的默认支架没有

如何在v5中启用？我读过这，但没有帮助，因为在v5中，布局配置代码与v4非常不同。您可以在v5在这里和v4在这里中输入该项目，以了解我所说的“完全不同”是什么意思。

Answer 1

在和设计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,
              })
            }
          />
        </>
      );
    },
  }
}