Amadeus/antd-admin
1
0
Fork 0
mirror of https://github.com/zuiidea/antd-admin.git synced 2024-04-21 12:32:14 +00:00
Code Issues Releases Wiki Activity

upgrade umi@3 partly

Browse Source
This commit is contained in:
Baorong Li
2020-03-15 08:24:05 +08:00
parent 467767a6c5
commit c6ea0454b3
18 changed files with 83 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.umirc.js
+3 -3
View File
@@ -6,14 +6,15 @@ const path = require('path')
const lessToJs = require('less-vars-to-js')
export default {
publicPath: 'https://cdn.antd-admin.zuiidea.com/',
// IMPORTANT! change next line to yours or delete. And hide in dev
// publicPath: 'https://cdn.antd-admin.zuiidea.com/',
hash: true,
ignoreMomentLocale: true,
targets: { ie: 9 },
dva: { immer: true },
antd: {},
dynamicImport: {
loading: 'components/Loader/Loader'
// loading: 'components/Loader/Loader'
},
// TODO: routes need to be array
// routes: {
@@ -66,7 +67,6 @@ export default {
themes: resolve(__dirname, './src/themes'),
utils: resolve(__dirname, './src/utils'),
},
extraBabelPresets: ['@lingui/babel-preset-react'],
extraBabelPlugins: [
[
'import',
package.json
+6 -14
View File
@@ -6,7 +6,6 @@
"dependencies": {
"@ant-design/compatible": "^1.0.0",
"@ant-design/icons": "^4.0.0",
"@lingui/react": "^2.8.0",
"ant-design-pro": "^2.3.0",
"antd": "^4.0.0",
"axios": "^0.19.0",
@@ -14,7 +13,6 @@
"d3-shape": "^1.3.0",
"draftjs-to-html": "^0.9.0",
"draftjs-to-markdown": "^0.6.0",
"dva": "2.4.1",
"dva-model-extend": "^0.1.2",
"echarts": "^4.4.0",
"echarts-for-react": "^2.0.15-beta.1",
@@ -27,7 +25,7 @@
"lodash": "^4.17.11",
"md5": "^2.2.1",
"nprogress": "^0.2.0",
"path-to-regexp": "^3.1.0",
"path-to-regexp": "^6.1.0",
"prop-types": "^15.7.0",
"qs": "^6.9.0",
"react-adsense": "^0.1.0",
@@ -36,19 +34,13 @@
"react-helmet": "^5.2.0",
"react-highcharts": "^16.1.0",
"react-perfect-scrollbar": "^1.5.0",
"recharts": "^1.8.0",
"recharts": "^2.0.0-beta.3",
"store": "^2.0.0"
},
"devDependencies": {
"@lingui/babel-preset-react": "^2.8.2",
"@lingui/cli": "^2.8.2",
"@lingui/loader": "^2.8.2",
"@umijs/preset-react": "^1.3.7",
"babel-core": "7.0.0-bridge.0",
"@umijs/preset-react": "^1.4.0",
"babel-eslint": "^10.0.1",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-import": "^1.12.0",
"babel-plugin-macros": "^2.6.0",
"babel-plugin-module-resolver": "^4.0.0",
"cross-env": "^7.0.0",
"eslint": "^6.8.0",
@@ -61,10 +53,10 @@
"husky": "^4.2.0",
"less-vars-to-js": "^1.3.0",
"lint-staged": "^10.0.0",
"mockjs": "^1.0.1-beta3",
"mockjs": "^1.1.0",
"module": "^1.2.5",
"prettier": "^1.18.0",
"stylelint": "^13.0.0",
"prettier": "^1.19.0",
"stylelint": "^13.2.0",
"stylelint-config-prettier": "^8.0.0",
"stylelint-config-standard": "^20.0.0",
"umi": "^3.0.0"
src/components/Layout/Bread.js
-2
View File
@@ -3,11 +3,9 @@ import PropTypes from 'prop-types'
import { Breadcrumb } from 'antd'
import { Link, withRouter } from 'umi'
import { Icon as LegacyIcon } from '@ant-design/compatible'
import { withI18n } from '@lingui/react'
import { pathMatchRegexp, queryAncestors, addLangPrefix } from 'utils'
import styles from './Bread.less'
@withI18n()
@withRouter
class Bread extends PureComponent {
generateBreadcrumbs = paths => {
src/components/Layout/Header.js
+8 -5
View File
@@ -2,9 +2,9 @@ import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types'
import { Menu, Layout, Avatar, Popover, Badge, List } from 'antd'
import { Ellipsis } from 'ant-design-pro'
import { useIntl } from 'umi'
import { Icon as LegacyIcon } from '@ant-design/compatible'
import { BellOutlined, RightOutlined } from '@ant-design/icons'
import { Trans, withI18n } from '@lingui/react'
import { setLocale } from 'utils'
import moment from 'moment'
import classnames from 'classnames'
@@ -13,7 +13,6 @@ import styles from './Header.less'
const { SubMenu } = Menu
@withI18n()
class Header extends PureComponent {
handleClickMenu = e => {
e.key === 'SignOut' && this.props.onSignOut()
@@ -29,14 +28,16 @@ class Header extends PureComponent {
onCollapseChange,
onAllNotificationsRead,
} = this.props
const intl = useIntl()
const rightContent = [
<Menu key="user" mode="horizontal" onClick={this.handleClickMenu}>
<SubMenu
title={
<Fragment>
<span style={{ color: '#999', marginRight: 4 }}>
<Trans>Hi,</Trans>
{intl.formatMessage({
id: 'Hi,'
})}
</span>
<span>{username}</span>
<Avatar style={{ marginLeft: 8 }} src={avatar} />
@@ -44,7 +45,9 @@ class Header extends PureComponent {
}
>
<Menu.Item key="SignOut">
<Trans>Sign out</Trans>
{intl.formatMessage({
id: 'Sign out'
})}
</Menu.Item>
</SubMenu>
</Menu>,
src/components/Layout/Sider.js
+5 -3
View File
@@ -2,13 +2,11 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Switch, Layout } from 'antd'
import { BulbOutlined } from '@ant-design/icons'
import { withI18n, Trans } from '@lingui/react'
import ScrollBar from '../ScrollBar'
import { config } from 'utils'
import SiderMenu from './Menu'
import styles from './Sider.less'
@withI18n()
class Sider extends PureComponent {
render() {
const {
@@ -59,7 +57,11 @@ class Sider extends PureComponent {
<div className={styles.switchTheme}>
<span>
<BulbOutlined />
<Trans>Switch Theme</Trans>
{intl.formatMessage(
{
id: 'Switch Theme',
defaultMessage: '你好，旅行者',
})}
</span>
<Switch
onChange={onThemeChange.bind(
src/layouts/index.js
+3 -28
View File
@@ -1,7 +1,6 @@
import React, { Component } from 'react'
import { withRouter } from 'umi'
import { withRouter, setLocale } from 'umi'
import { ConfigProvider } from 'antd'
import { I18nProvider } from '@lingui/react'
import { langFromPath, defaultLanguage } from 'utils'
import zh_CN from 'antd/lib/locale-provider/zh_CN'
import en_US from 'antd/lib/locale-provider/en_US'
@@ -24,38 +23,14 @@ class Layout extends Component {
language = defaultLanguage
componentDidMount() {
const language = langFromPath(this.props.location.pathname)
this.language = language
language && this.loadCatalog(language)
}
shouldComponentUpdate(nextProps, nextState) {
const language = langFromPath(nextProps.location.pathname)
const preLanguage = this.language
const { catalogs } = nextState
if (preLanguage !== language && !catalogs[language]) {
language && this.loadCatalog(language)
this.language = language
return false
}
this.language = language
return true
}
loadCatalog = async language => {
const catalog = await import(
/* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
`@lingui/loader!../locales/${language}/messages.json`
)
this.setState(state => ({
catalogs: {
...state.catalogs,
[language]: catalog,
},
}))
// false means no refresh
setLocale(language, false)
}
render() {
src/pages/index.js
+5 -5
View File
@@ -1,12 +1,12 @@
import React, { PureComponent } from 'react'
import { Redirect } from 'umi'
import { withI18n } from '@lingui/react'
import { Redirect, useIntl } from 'umi'
@withI18n()
class Index extends PureComponent {
render() {
const { i18n } = this.props
return <Redirect to={i18n.t`/dashboard`} />
return <Redirect to={intl.formatMessage(
{
id: '/dashboard',
}) } />
}
}
src/pages/login/index.js
+4 -5
View File
@@ -6,14 +6,13 @@ import { GlobalFooter } from 'ant-design-pro'
import { Form } from '@ant-design/compatible'
import '@ant-design/compatible/assets/index.css'
import { GithubOutlined } from '@ant-design/icons'
import { Trans, withI18n } from '@lingui/react'
import { setLocale } from 'utils'
import config from 'utils/config'
import styles from './index.less'
const FormItem = Form.Item
@withI18n()
@connect(({ loading }) => ({ loading }))
@Form.create()
class Login extends PureComponent {
@@ -95,15 +94,15 @@ class Login extends PureComponent {
onClick={this.handleOk}
loading={loading.effects.login}
>
<Trans>Sign in</Trans>
{Intl.formatMessage({id: 'Sign in'})}
</Button>
<p>
<span>
<Trans>Username</Trans>
{Intl.formatMessage({id: 'Username'})}
：guest
</span>
<span>
<Trans>Password</Trans>
{Intl.formatMessage({id: 'Password'})}
：guest
</span>
</p>
src/pages/post/components/List.js
-2
View File
@@ -1,10 +1,8 @@
import React, { PureComponent } from 'react'
import { Table, Avatar } from 'antd'
import { withI18n } from '@lingui/react'
import { Ellipsis } from 'ant-design-pro'
import styles from './List.less'
@withI18n()
class List extends PureComponent {
render() {
const { i18n, ...tableProps } = this.props
src/pages/post/index.js
-2
View File
@@ -4,7 +4,6 @@ import { connect } from 'dva'
import { Tabs } from 'antd'
import { router } from 'utils'
import { stringify } from 'qs'
import { withI18n } from '@lingui/react'
import { Page } from 'components'
import List from './components/List'
@@ -15,7 +14,6 @@ const EnumPostStatus = {
PUBLISHED: 2,
}
@withI18n()
@connect(({ post, loading }) => ({ post, loading }))
class Post extends PureComponent {
handleTabClick = key => {
src/pages/request/index.js
-1
View File
@@ -6,7 +6,6 @@ import classnames from 'classnames'
import { Form } from '@ant-design/compatible'
import '@ant-design/compatible/assets/index.css'
import { CloseOutlined } from '@ant-design/icons'
import { Trans } from '@lingui/react'
import api from '@/services/api'
import { Page } from 'components'
src/pages/user/components/Filter.js
-2
View File
@@ -7,7 +7,6 @@ import { FilterItem } from 'components'
import { Form } from '@ant-design/compatible'
import '@ant-design/compatible/assets/index.css'
import { Trans, withI18n } from '@lingui/react'
import { Button, Row, Col, DatePicker, Input, Cascader } from 'antd'
import city from 'utils/city'
@@ -27,7 +26,6 @@ const TwoColProps = {
xl: 96,
}
@withI18n()
@Form.create()
class Filter extends Component {
handleFields = fields => {
src/pages/user/components/List.js
+27 -20
View File
@@ -2,22 +2,23 @@ import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Table, Modal, Avatar } from 'antd'
import { DropOption } from 'components'
import { Trans, withI18n } from '@lingui/react'
import { Link } from 'umi'
import { Link, useIntl } from 'umi'
import styles from './List.less'
const { confirm } = Modal
@withI18n()
class List extends PureComponent {
handleMenuClick = (record, e) => {
const { onDeleteItem, onEditItem, i18n } = this.props
const { onDeleteItem, onEditItem } = this.props
if (e.key === '1') {
onEditItem(record)
} else if (e.key === '2') {
confirm({
title: i18n.t`Are you sure delete this record?`,
title: intl.formatMessage(
{
id: 'Are you sure delete this record?',
}),
onOk() {
onDeleteItem(record.id)
},
@@ -26,11 +27,11 @@ class List extends PureComponent {
}
render() {
const { onDeleteItem, onEditItem, i18n, ...tableProps } = this.props
const { onDeleteItem, onEditItem, ...tableProps } = this.props
const intl = useIntl()
const columns = [
{
title: <Trans>Avatar</Trans>,
title: intl.formatMessage({id: 'Avatar'}),
dataIndex: 'avatar',
key: 'avatar',
width: 72,
@@ -38,49 +39,49 @@ class List extends PureComponent {
render: text => <Avatar style={{ marginLeft: 8 }} src={text} />,
},
{
title: <Trans>Name</Trans>,
title: intl.formatMessage({id: 'Name'}),
dataIndex: 'name',
key: 'name',
render: (text, record) => <Link to={`user/${record.id}`}>{text}</Link>,
},
{
title: <Trans>NickName</Trans>,
title: intl.formatMessage({id: 'NickName'}),
dataIndex: 'nickName',
key: 'nickName',
},
{
title: <Trans>Age</Trans>,
title: intl.formatMessage({id: 'Age'}),
dataIndex: 'age',
key: 'age',
},
{
title: <Trans>Gender</Trans>,
title: intl.formatMessage({id: 'Gender'}),
dataIndex: 'isMale',
key: 'isMale',
render: text => <span>{text ? 'Male' : 'Female'}</span>,
},
{
title: <Trans>Phone</Trans>,
title: intl.formatMessage({id: 'Phone'}),
dataIndex: 'phone',
key: 'phone',
},
{
title: <Trans>Email</Trans>,
title: intl.formatMessage({id: 'Email'}),
dataIndex: 'email',
key: 'email',
},
{
title: <Trans>Address</Trans>,
title: intl.formatMessage({id: 'Address'}),
dataIndex: 'address',
key: 'address',
},
{
title: <Trans>CreateTime</Trans>,
title: intl.formatMessage({id: 'CreateTime'}),
dataIndex: 'createTime',
key: 'createTime',
},
{
title: <Trans>Operation</Trans>,
title: intl.formatMessage({id: 'Operation'}),
key: 'operation',
fixed: 'right',
render: (text, record) => {
@@ -88,8 +89,14 @@ class List extends PureComponent {
<DropOption
onMenuClick={e => this.handleMenuClick(record, e)}
menuOptions={[
{ key: '1', name: i18n.t`Update` },
{ key: '2', name: i18n.t`Delete` },
{ key: '1', name: intl.formatMessage(
{
id: 'Update',
}) },
{ key: '2', name: intl.formatMessage(
{
id: 'Delete',
}) },
]}
/>
)
@@ -102,7 +109,7 @@ class List extends PureComponent {
{...tableProps}
pagination={{
...tableProps.pagination,
showTotal: total => i18n.t`Total ${total} Items`,
showTotal: total => intl.formatMessage({name: 'Total '},{id: 'Avatar'}, { name: 'Items'}),
}}
className={styles.table}
bordered
src/pages/user/components/Modal.js
+18 -6
View File
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
import { Input, InputNumber, Radio, Modal, Cascader } from 'antd'
import { Form } from '@ant-design/compatible'
import '@ant-design/compatible/assets/index.css'
import { Trans, withI18n } from '@lingui/react'
import { useIntl } from 'umi';
import city from 'utils/city'
const FormItem = Form.Item
@@ -16,7 +17,7 @@ const formItemLayout = {
span: 14,
},
}
@withI18n()
@Form.create()
class UserModal extends PureComponent {
handleOk = () => {
@@ -37,7 +38,7 @@ class UserModal extends PureComponent {
}
render() {
const { item = {}, onOk, form, i18n, ...modalProps } = this.props
const { item = {}, onOk, form, ...modalProps } = this.props
const { getFieldDecorator } = form
return (
@@ -53,7 +54,10 @@ class UserModal extends PureComponent {
],
})(<Input />)}
</FormItem>
<FormItem label={i18n.t`NickName`} hasFeedback {...formItemLayout}>
<FormItem label={intl.formatMessage(
{
id: 'NickName'
})} hasFeedback {...formItemLayout}>
{getFieldDecorator('nickName', {
initialValue: item.nickName,
rules: [
@@ -75,10 +79,18 @@ class UserModal extends PureComponent {
})(
<Radio.Group>
<Radio value>
<Trans>Male</Trans>
{intl.formatMessage(
{
id: 'Male',
defaultMessage: '你好，旅行者',
})}
</Radio>
<Radio value={false}>
<Trans>Female</Trans>
{intl.formatMessage(
{
id: 'Female',
defaultMessage: '你好，旅行者',
})}
</Radio>
</Radio.Group>
)}
src/pages/user/index.js
-1
View File
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
import { router } from 'utils'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm } from 'antd'
import { withI18n } from '@lingui/react'
import { Page } from 'components'
import { stringify } from 'qs'
import List from './components/List'
src/utils/index.js
+2 -115
View File
@@ -1,8 +1,5 @@
import { cloneDeep, isString, flow, curry } from 'lodash'
import { history } from 'umi'
import pathToRegexp from 'path-to-regexp'
import { i18n } from './config'
import moment from 'moment'
import { cloneDeep } from 'lodash'
const { pathToRegexp } = require("path-to-regexp")
import 'moment/locale/zh-cn'
export classnames from 'classnames'
@@ -10,11 +7,6 @@ export config from './config'
export request from './request'
export { Color } from './theme'
// export const { defaultLanguage } = i18n
// export const languages = i18n.languages.map(item => item.key)
export const languages = i18n ? i18n.languages.map(item => item.key) : []
export const defaultLanguage = i18n ? i18n.defaultLanguage : ''
/**
* Query objects that specify keys and values in an array where all values are objects.
* @param {array} array An array where all values are objects, like [{key:1},{key:2}].
@@ -63,97 +55,6 @@ export function arrayToTree(
return result
}
// export const langFromPath = curry(
// /**
// * Query language from pathname.
// * @param {array} languages Specify which languages are currently available.
// * @param {string} defaultLanguage Specify the default language.
// * @param {string} pathname Pathname to be queried.
// * @return {string} Return the queryed language.
// */
// (languages, defaultLanguage, pathname) => {
// for (const item of languages) {
// if (pathname.startsWith(`/${item}/`)) {
// return item
// }
// }
// return defaultLanguage
// }
// )(languages)(defaultLanguage)
export const langFromPath = pathname => {
for (const item of languages) {
if (pathname.startsWith(`/${item}/`)) {
return item
}
}
return defaultLanguage
}
export const deLangPrefix = curry(
/**
* Remove the language prefix in pathname.
* @param {array} languages Specify which languages are currently available.
* @param {string} pathname Remove the language prefix in the pathname.
* @return {string} Return the pathname after removing the language prefix.
*/
(languages, pathname) => {
if (!pathname) {
return
}
for (const item of languages) {
if (pathname.startsWith(`/${item}/`)) {
return pathname.replace(`/${item}/`, '/')
}
}
return pathname
}
)(languages)
/**
* Add the language prefix in pathname.
* @param {string} pathname Add the language prefix in the pathname.
* @return {string} Return the pathname after adding the language prefix.
*/
export function addLangPrefix(pathname) {
if (!i18n) {
return pathname
}
const prefix = langFromPath(window.location.pathname)
return `/${prefix}${deLangPrefix(pathname)}`
}
const routerAddLangPrefix = params => {
if (!i18n) {
return params
}
if (isString(params)) {
params = addLangPrefix(params)
} else {
params.pathname = addLangPrefix(params.pathname)
}
return params
}
/**
* Adjust the router to automatically add the current language prefix before the pathname in push and replace.
*/
const myRouter = { ...history }
myRouter.push = flow(
routerAddLangPrefix,
history.push
)
myRouter.replace = flow(
routerAddLangPrefix,
myRouter.replace
)
export const router = myRouter
/**
* Whether the path matches the regexp if the language prefix is ignored, https://github.com/pillarjs/path-to-regexp.
* @param {string|regexp|array} regexp Specify a string, array of strings, or a regular expression.
@@ -258,17 +159,3 @@ export function queryLayout(layouts, pathname) {
return result
}
export function getLocale() {
return langFromPath(window.location.pathname)
}
export function setLocale(language) {
if (getLocale() !== language) {
moment.locale(language === 'zh' ? 'zh-cn' : language)
history.push({
pathname: `/${language}${deLangPrefix(window.location.pathname)}`,
search: window.location.search,
})
}
}
src/utils/index.test.js
+1 -1
View File
@@ -1,5 +1,5 @@
import { pathMatchRegexp } from './index'
import pathToRegexp from 'path-to-regexp'
const { pathToRegexp } = require("path-to-regexp")
describe('test pathMatchRegexp', () => {
it('get right', () => {
src/utils/request.js
+1 -1
View File
@@ -1,6 +1,6 @@
import axios from 'axios'
import { cloneDeep, isEmpty } from 'lodash'
import pathToRegexp from 'path-to-regexp'
const { pathToRegexp } = require("path-to-regexp")
import { message } from 'antd'
import { CANCEL_REQUEST_MESSAGE } from 'utils/constant'
import qs from 'qs'