Merge pull request #1142 from vagusX/feat/upgrade-antd-v5

feat: upgrade antd v5

.umirc.js

@@ -5,6 +5,12 @@ const path = require('path')
 const lessToJs = require('less-vars-to-js')
 const isDevelopment = process.env.NODE_ENV === 'development'
 
+const { theme } = require('antd/lib')
+const { convertLegacyToken } = require('@ant-design/compatible/lib')
+
+const mapToken = theme.defaultAlgorithm(theme.defaultSeed)
+const v4Token = convertLegacyToken(mapToken)
+
 // how to speed compile: https://umijs.org/guide/boost-compile-speed
 export default {
   // IMPORTANT! change next line to yours or delete. And hide in dev
@@ -63,9 +69,12 @@ export default {
   },
   // Theme for antd
   // https://ant.design/docs/react/customize-theme
-  theme: lessToJs(
+  theme: {
+    ...v4Token,
+    ...lessToJs(
     fs.readFileSync(path.join(__dirname, './src/themes/default.less'), 'utf8')
-  ),
+    )
+  },
   webpack5: {},
   mfsu: {},
   chainWebpack: function (config, { webpack }) {

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
     "@lingui/react": "^3.8.0",
-    "antd": "^4.0.0",
+    "antd": "^5.0.0",
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
     "d3-shape": "^2.1.0",
@@ -38,6 +38,7 @@
     "store": "^2.0.0"
   },
   "devDependencies": {
+    "@ant-design/compatible": "^5.1.0",
     "@babel/preset-react": "^7.12.13",
     "@lingui/cli": "^3.8.0",
     "@lingui/macro": "^3.8.0",

src/components/GlobalFooter/index.less

@@ -1,4 +1,4 @@
-@import '~antd/lib/style/themes/default.less';
+/* @import '~antd/lib/style/themes/default.less'; */
 
 .globalFooter {
   margin: 48px 0 24px 0;

src/components/Layout/Header.js

@@ -10,7 +10,7 @@ import {
 } from '@ant-design/icons'
 import { Trans } from "@lingui/macro"
 import { getLocale, setLocale } from 'utils'
-import moment from 'moment'
+import dayjs from 'dayjs'
 import classnames from 'classnames'
 import config from 'config'
 import styles from './Header.less'
@@ -107,7 +107,7 @@ class Header extends PureComponent {
                         {item.title}
                       </Ellipsis>
                     }
-                    description={moment(item.date).fromNow()}
+                    description={dayjs(item.date).fromNow()}
                   />
                   <RightOutlined style={{ fontSize: 10, color: '#ccc' }} />
                 </List.Item>
@@ -141,6 +141,7 @@ class Header extends PureComponent {
           [styles.fixed]: fixed,
           [styles.collapsed]: collapsed,
         })}
+        style={{height: 72, backgroundColor: 'white', paddingInline: 0}}
         id="layoutHeader"
       >
         <div

src/components/Layout/Header.less

@@ -27,6 +27,8 @@
   :global {
     .ant-menu-submenu-title {
       height: 72px;
+      display: flex;
+      align-items: center;
     }
 
     .ant-menu-horizontal {

src/layouts/PrimaryLayout.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 import { withRouter } from 'umi'
 import { connect } from 'umi'
 import { MyLayout, GlobalFooter } from 'components'
-import { BackTop, Layout, Drawer } from 'antd'
+import { Drawer, FloatButton, Layout } from 'antd';
 import { enquireScreen, unenquireScreen } from 'enquire-js'
 const { pathToRegexp } = require("path-to-regexp")
 import { config, getLocale } from 'utils'
@@ -112,17 +112,17 @@ class PrimaryLayout extends PureComponent {
     }
 
     return (
-      <Fragment>
+      (<Fragment>
         <Layout>
           {isMobile ? (
             <Drawer
               maskClosable
               closable={false}
               onClose={onCollapseChange.bind(this, !collapsed)}
-              visible={!collapsed}
+              open={!collapsed}
               placement="left"
               width={200}
-              style={{
+              rootStyle={{
                 padding: 0,
                 height: '100vh',
               }}
@@ -142,7 +142,7 @@ class PrimaryLayout extends PureComponent {
               <Bread routeList={newRouteList} />
               {hasPermission ? children : <Error />}
             </Content>
-            <BackTop
+            <FloatButton.BackTop
               className={styles.backTop}
               target={() => document.querySelector('#primaryLayout')}
             />
@@ -152,8 +152,8 @@ class PrimaryLayout extends PureComponent {
             />
           </div>
         </Layout>
-      </Fragment>
-    )
+      </Fragment>)
+    );
   }
 }
 

src/pages/dashboard/components/recentSales.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import moment from 'moment'
+import dayjs from 'dayjs'
 import PropTypes from 'prop-types'
 import { Table, Tag } from 'antd'
 import { Color } from 'utils'
@@ -38,7 +38,7 @@ function RecentSales({ data }) {
     {
       title: 'DATE',
       dataIndex: 'date',
-      render: text => moment(text).format('YYYY-MM-DD'),
+      render: text => dayjs(text).format('YYYY-MM-DD'),
     },
     {
       title: 'PRICE',

src/pages/user/components/Filter.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import moment from 'moment'
+import dayjs from 'dayjs'
 import { FilterItem } from 'components'
 import { Trans } from "@lingui/macro"
 import { t } from "@lingui/macro"
@@ -30,8 +30,8 @@ class Filter extends Component {
     const { createTime } = fields
     if (createTime && createTime.length) {
       fields.createTime = [
-        moment(createTime[0]).format('YYYY-MM-DD'),
-        moment(createTime[1]).format('YYYY-MM-DD'),
+        dayjs(createTime[0]).format('YYYY-MM-DD'),
+        dayjs(createTime[1]).format('YYYY-MM-DD'),
       ]
     }
     return fields
@@ -72,10 +72,10 @@ class Filter extends Component {
 
     let initialCreateTime = []
     if (filter.createTime && filter.createTime[0]) {
-      initialCreateTime[0] = moment(filter.createTime[0])
+      initialCreateTime[0] = dayjs(filter.createTime[0])
     }
     if (filter.createTime && filter.createTime[1]) {
-      initialCreateTime[1] = moment(filter.createTime[1])
+      initialCreateTime[1] = dayjs(filter.createTime[1])
     }
 
     return (

src/pages/user/components/Modal.js

@@ -40,7 +40,7 @@ class UserModal extends PureComponent {
     const { item = {}, onOk, form, ...modalProps } = this.props
 
     return (
-      <Modal {...modalProps} onOk={this.handleOk}>
+      (<Modal {...modalProps} onOk={this.handleOk}>
         <Form ref={this.formRef} name="control-ref" initialValues={{ ...item, address: item.address && item.address.split(' ') }} layout="horizontal">
           <FormItem name='name' rules={[{ required: true }]}
             label={t`Name`} hasFeedback {...formItemLayout}>
@@ -81,8 +81,8 @@ class UserModal extends PureComponent {
             />
           </FormItem>
         </Form>
-      </Modal>
-    )
+      </Modal>)
+    );
   }
 }
 

src/pages/user/index.js

@@ -49,11 +49,11 @@ class User extends PureComponent {
 
   get modalProps() {
     const { dispatch, user, loading } = this.props
-    const { currentItem, modalVisible, modalType } = user
+    const { currentItem, modalOpen, modalType } = user
 
     return {
       item: modalType === 'create' ? {} : currentItem,
-      visible: modalVisible,
+      open: modalOpen,
       destroyOnClose: true,
       maskClosable: false,
       confirmLoading: loading.effects[`user/${modalType}`],

src/pages/user/model.js

@@ -16,7 +16,7 @@ export default modelExtend(pageModel, {
 
   state: {
     currentItem: {},
-    modalVisible: false,
+    modalOpen: false,
     modalType: 'create',
     selectedRowKeys: [],
   },
@@ -100,11 +100,11 @@ export default modelExtend(pageModel, {
 
   reducers: {
     showModal(state, { payload }) {
-      return { ...state, ...payload, modalVisible: true }
+      return { ...state, ...payload, modalOpen: true }
     },
 
     hideModal(state) {
-      return { ...state, modalVisible: false }
+      return { ...state, modalOpen: false }
     },
   },
 })

src/themes/default.less

@@ -1,16 +1,16 @@
-// 本文件是对 ant-design:
-// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
-// 相应变量值的覆盖
-// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
-
-@import '../../node_modules/antd/lib/style/themes/default.less';
-
-@border-radius-base: 3px;
-@border-radius-sm: 2px;
-@shadow-color: rgba(0, 0, 0, 0.05);
-@shadow-1-down: 4px 4px 40px @shadow-color;
-@border-color-split: #f4f4f4;
-@border-color-base: #e5e5e5;
-@font-size-base: 13px;
-@text-color: #666;
-@hover-color: #f9f9fc;
+// 本文件是对 ant-design:
+// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
+// 相应变量值的覆盖
+// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
+
+/* @import '../../node_modules/antd/lib/style/themes/default.less';*/
+
+@border-radius-base: 3px;
+@border-radius-sm: 2px;
+@shadow-color: rgba(0, 0, 0, 0.05);
+@shadow-1-down: 4px 4px 40px @shadow-color;
+@border-color-split: #f4f4f4;
+@border-color-base: #e5e5e5;
+@font-size-base: 13px;
+@text-color: #666;
+@hover-color: #f9f9fc;

src/themes/index.less

@@ -1,3 +1,4 @@
+@import '~antd/dist/reset.css';
 @import '~themes/vars.less';
 
 body {

src/utils/index.js

@@ -1,10 +1,14 @@
 import { cloneDeep } from 'lodash'
 const { pathToRegexp } = require("path-to-regexp")
-import moment from 'moment'
-import 'moment/locale/zh-cn'
 import store from 'store'
 import { i18n } from './config'
 
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import 'dayjs/locale/zh-cn'
+
+dayjs.extend(relativeTime)
+
 export classnames from 'classnames'
 export config from './config'
 export request from './request'
@@ -165,8 +169,8 @@ export function getLocale() {
 
 export function setLocale(language) {
   if (getLocale() !== language) {
-    moment.locale(language === 'zh' ? 'zh-cn' : language)
+    dayjs.locale(language === 'zh' ? 'zh-cn' : language)
     store.set('locale', language)
     window.location.reload()
   }
-}
+}