园龄：10年3个月粉丝：19 关注：49

Ant Design+Ant Design Pro+Umi 3.x实现线上动态主题切换.

之前写了Umi2.x和AntD 3.x以及AntD Pro 4.x版本的在线主题切换的文章,后来刚写完不久,官方就准备出AntD 4.x和Umi3.x了.与似乎就有人问我应该怎么搞.

说实话,我也不知道怎么搞.🤣🤣🤣😂当时只是知道,阿里大佬会提供新的方式来实现.最近AntD Pro V5预览版出来了,我也第一时间用上了.终于可以补上之前咕咕了好久的在线切换主题的教程.

首先我们从GitHub 下载下来V5的预览版代码.其实可以不下载他那个,可以试试我的一个练手的项目. Github 我这个项目目前还没有加实现动态主题的内容,我现在边写文章边添加,一步一步的教大家.

首先看一下我们的package.json

没啥特别的地方,比起阿里官方的依赖,我算是精简了很多,把一些东西通过VS code插件的方式实现了.我也推荐大家用这种方式.因为这样可以减少安装依赖的时间,减少写入包文件的数量,间接加长硬盘的寿命.

废话不多说,接着说正事.

接着我们需要安装两个依赖库来实现主题动态切换.

在powershell中执行如下代码.

yarn add umi-plugin-antd-theme umi-plugin-setting-drawer

如图

安装好后,就成了如下内容

接着我们去app.tsx文件或者app.ts

在src根目录下.不能更改这个文件的名称.如图,找到如下函数 getInitialState

我们需要做的就是将SettingDrawer组件的默认数据配置一下,然后启动项目就能自动识别并显示到页面中了.

目前我项目中的代码改成了如下内容.

export const getInitialState = async (): Promise<{
  currentUser?: Types.CurrentUser;
  settings?: LayoutSettings;
  settingDrawer?: SettingDrawerProps;
}> => {
  try {
    // 如果是登录页面，不执行
    if (history.location.pathname !== '/login') {
      let userid: string = Cookies.get('userId') ?? '';
      const response: Types.AjaxResult = await LoadUser({ id: userid });
      const userInfo: Types.UserTable = response.data;
      const { nickName } = userInfo;
      return {
        currentUser: { name: nickName ?? '默认用户名', userid, avatar: AvatarGif },
        settings: defaultSettings,
        settingDrawer: {
          hideCopyButton: true,
          hideHintAlert: true
        }
      };
    } else {
      const perDate: undefined | string = Cookies.get('date');
      const isExpired = Date.now() - parseInt(perDate ?? '0') < ExpiredTime;
      if (!isExpired) {
        message.info('登陆信息已过期,请重新登陆.');
        history.push('/login');
      }
    }
  } catch (error) {
    history.push('/login');
  }
  return { settings: defaultSettings };
};