From 02bf7784b1378dc787e07349c40cf2013dbe7153 Mon Sep 17 00:00:00 2001 From: vagusx Date: Sat, 26 Nov 2022 22:15:15 +0800 Subject: [PATCH 1/4] feat: upgrade antd v5 --- .umirc.js | 13 +++++++++-- package.json | 3 ++- src/components/GlobalFooter/index.less | 2 +- src/components/Layout/Header.js | 1 + src/components/Layout/Header.less | 2 ++ src/layouts/PrimaryLayout.js | 10 ++++---- src/pages/user/components/Modal.js | 6 ++--- src/themes/default.less | 32 +++++++++++++------------- src/themes/index.less | 1 + 9 files changed, 42 insertions(+), 28 deletions(-) diff --git a/.umirc.js b/.umirc.js index 32d7d26..b0565dd 100644 --- a/.umirc.js +++ b/.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 }) { diff --git a/package.json b/package.json index 4b1c72b..0cb5bb9 100644 --- a/package.json +++ b/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", diff --git a/src/components/GlobalFooter/index.less b/src/components/GlobalFooter/index.less index e4b3dfd..ac43595 100644 --- a/src/components/GlobalFooter/index.less +++ b/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; diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js index 3b37540..2ee6af9 100644 --- a/src/components/Layout/Header.js +++ b/src/components/Layout/Header.js @@ -141,6 +141,7 @@ class Header extends PureComponent { [styles.fixed]: fixed, [styles.collapsed]: collapsed, })} + style={{height: 72, backgroundColor: 'white', paddingInline: 0}} id="layoutHeader" >
+ ( {isMobile ? (
- - ) + ) + ); } } diff --git a/src/pages/user/components/Modal.js b/src/pages/user/components/Modal.js index cae9d7f..4173fad 100644 --- a/src/pages/user/components/Modal.js +++ b/src/pages/user/components/Modal.js @@ -40,7 +40,7 @@ class UserModal extends PureComponent { const { item = {}, onOk, form, ...modalProps } = this.props return ( - + (
@@ -81,8 +81,8 @@ class UserModal extends PureComponent { />
- - ) + ) + ); } } diff --git a/src/themes/default.less b/src/themes/default.less index 8fabcc1..7d2603d 100644 --- a/src/themes/default.less +++ b/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; diff --git a/src/themes/index.less b/src/themes/index.less index fc5d498..2418b17 100644 --- a/src/themes/index.less +++ b/src/themes/index.less @@ -1,3 +1,4 @@ +@import '~antd/dist/reset.css'; @import '~themes/vars.less'; body { From b25646b033cecfd03559c6d9ea12905775fabd9a Mon Sep 17 00:00:00 2001 From: vagusx Date: Sun, 27 Nov 2022 15:54:25 +0800 Subject: [PATCH 2/4] feat: rename modal open --- src/pages/user/index.js | 4 ++-- src/pages/user/model.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/user/index.js b/src/pages/user/index.js index d713e99..1f8a61d 100644 --- a/src/pages/user/index.js +++ b/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}`], diff --git a/src/pages/user/model.js b/src/pages/user/model.js index 83ba699..031ed90 100644 --- a/src/pages/user/model.js +++ b/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 } }, }, }) From 711d2077e23fb63c47de1d018168ae5c412b8d98 Mon Sep 17 00:00:00 2001 From: vagusx Date: Sun, 27 Nov 2022 16:17:07 +0800 Subject: [PATCH 3/4] feat: import BackTop from FloatButton --- src/layouts/PrimaryLayout.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/layouts/PrimaryLayout.js b/src/layouts/PrimaryLayout.js index a249715..a7e8728 100644 --- a/src/layouts/PrimaryLayout.js +++ b/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' @@ -142,7 +142,7 @@ class PrimaryLayout extends PureComponent { {hasPermission ? children : } - document.querySelector('#primaryLayout')} /> From 8618c75459367db9dab8d77cef8e37f1d3a31102 Mon Sep 17 00:00:00 2001 From: vagusx Date: Sun, 27 Nov 2022 16:29:42 +0800 Subject: [PATCH 4/4] feat: replace moment to dayjs --- src/components/Layout/Header.js | 4 ++-- src/pages/dashboard/components/recentSales.js | 4 ++-- src/pages/user/components/Filter.js | 10 +++++----- src/utils/index.js | 12 ++++++++---- 4 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js index 2ee6af9..08ba1bc 100644 --- a/src/components/Layout/Header.js +++ b/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} } - description={moment(item.date).fromNow()} + description={dayjs(item.date).fromNow()} /> diff --git a/src/pages/dashboard/components/recentSales.js b/src/pages/dashboard/components/recentSales.js index 01907dc..bcfdac1 100644 --- a/src/pages/dashboard/components/recentSales.js +++ b/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', diff --git a/src/pages/user/components/Filter.js b/src/pages/user/components/Filter.js index 3443baa..74315c8 100644 --- a/src/pages/user/components/Filter.js +++ b/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 ( diff --git a/src/utils/index.js b/src/utils/index.js index 925bc5b..85ace7c 100644 --- a/src/utils/index.js +++ b/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() } -} \ No newline at end of file +}