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 };
};

然后就完事了,啟動項目就能看到效果了.

不過目前這個組件還是存在一些bug.不是十全十美,只能等待阿里的大佬修復完成了.對了還有一個問題,

開啟這兩個插件實現動態主題后,編譯會相當慢,建議在項目完成開發后再加入這兩個插件,不然開發過程中每次代碼變動都需要重新編譯樣式,會很難受的.我這個項目,暫時不會加入這個動態主題切換的功能.

等后期阿里修復好了后再加入.現階段開發過程中,編譯太慢還是有點難受.這個項目用到了V5中新的東西,也可以學習一下其他內容的使用.