Skip to content

Commit f8012b1

Browse files
LyricTianLyricTian
committed
Upgrade umi3.0 and antd4.0
1 parent 0b31b0e commit f8012b1

24 files changed

Lines changed: 120 additions & 154 deletions

File tree

‎config/config.js‎

Lines changed: 13 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,30 @@
11
// https://umijs.org/config/
2-
import os from 'os';
32
import pageRoutes from './router.config';
43

5-
const plugins = [
6-
[
7-
'umi-plugin-react',
8-
{
9-
antd: true,
10-
dva: {
11-
hmr: true,
12-
},
13-
targets: {
14-
ie: 11,
15-
},
16-
locale: {
17-
enable: true, // default false
18-
default: 'zh-CN', // default zh-CN
19-
},
20-
dynamicImport: {
21-
loadingComponent: './components/PageLoading/index',
22-
},
23-
...(!process.env.TEST && os.platform() === 'darwin'
24-
? {
25-
dll: {
26-
include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
27-
exclude: ['@babel/runtime'],
28-
},
29-
hardSource: false,
30-
}
31-
: {}),
32-
},
33-
],
34-
];
35-
364
export default {
375
// add for transfer to umi
38-
plugins,
6+
antd: {},
7+
dva: {
8+
hmr: true,
9+
},
3910
targets: {
4011
ie: 11,
4112
},
13+
locale: {
14+
// default zh-CN
15+
default: 'zh-CN',
16+
antd: true,
17+
},
18+
dynamicImport: {
19+
loading: '@/components/PageLoading/index',
20+
},
4221
// 路由配置
4322
routes: pageRoutes,
4423
hash: true,
4524
// Theme for antd
4625
// https://ant.design/docs/react/customize-theme-cn
4726
theme: {
48-
'primary-color': '#2F54EB',
27+
'primary-color': '#1890ff',
4928
},
5029
proxy: {
5130
'/api/': {
@@ -54,31 +33,6 @@ export default {
5433
},
5534
},
5635
ignoreMomentLocale: true,
57-
lessLoaderOptions: {
58-
javascriptEnabled: true,
59-
},
60-
disableRedirectHoist: true,
61-
cssLoaderOptions: {
62-
modules: true,
63-
getLocalIdent: (context, _, localName) => {
64-
if (
65-
context.resourcePath.includes('node_modules') ||
66-
context.resourcePath.includes('global.less')
67-
) {
68-
return localName;
69-
}
70-
const match = context.resourcePath.match(/src(.*)/);
71-
if (match && match[1]) {
72-
const antdProPath = match[1].replace('.less', '');
73-
const arr = antdProPath
74-
.split('/')
75-
.map(a => a.replace(/([A-Z])/g, '-$1'))
76-
.map(a => a.toLowerCase());
77-
return `gin-admin${arr.join('-')}-${localName}`.replace(/--/g, '-');
78-
}
79-
return localName;
80-
},
81-
},
8236
manifest: {
8337
basePath: '/',
8438
},

‎package.json‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,11 @@
1515
"lint-staged:js": "eslint --ext .js"
1616
},
1717
"dependencies": {
18-
"@babel/polyfill": "^7.0.0-beta.36",
19-
"@babel/runtime": "^7.3.1",
20-
"antd": "^3.15.2",
18+
"@ant-design/compatible": "^1.0.2",
19+
"@ant-design/icons": "^4.0.6",
20+
"antd": "^4.1.2",
2121
"axios": "^0.18.0",
2222
"classnames": "^2.2.5",
23-
"dva": "^2.4.1",
2423
"history": "^4.7.2",
2524
"lodash": "^4.17.10",
2625
"lodash-decorators": "^6.0.0",
@@ -29,7 +28,7 @@
2928
"path-to-regexp": "^2.4.0",
3029
"prop-types": "^15.5.10",
3130
"qs": "^6.5.0",
32-
"react": "^16.6.3",
31+
"react": "^16.13.1",
3332
"react-container-query": "^0.11.0",
3433
"react-document-title": "^2.0.3",
3534
"setprototypeof": "^1.1.0",
@@ -40,18 +39,18 @@
4039
"devDependencies": {
4140
"@types/react": "^16.7.7",
4241
"@types/react-dom": "^16.0.10",
42+
"@typescript-eslint/eslint-plugin": "^1.12.0",
4343
"babel-eslint": "^10.0.1",
4444
"cross-env": "^5.1.1",
4545
"cross-port-killer": "^1.0.1",
4646
"eslint": "6.0.1",
47-
"@typescript-eslint/eslint-plugin": "^1.12.0",
48-
"eslint-plugin-eslint-comments": "^3.1.2",
49-
"eslint-plugin-jest": "^22.11.1",
5047
"eslint-config-airbnb": "^17.0.0",
5148
"eslint-config-prettier": "6.0.0",
5249
"eslint-plugin-babel": "^5.3.0",
5350
"eslint-plugin-compat": "3.3.0",
51+
"eslint-plugin-eslint-comments": "^3.1.2",
5452
"eslint-plugin-import": "^2.14.0",
53+
"eslint-plugin-jest": "^22.11.1",
5554
"eslint-plugin-jsx-a11y": "^6.1.2",
5655
"eslint-plugin-markdown": "^1.0.0-beta.6",
5756
"eslint-plugin-react": "^7.11.1",
@@ -64,8 +63,8 @@
6463
"tslint": "^5.10.0",
6564
"tslint-config-prettier": "^1.10.0",
6665
"tslint-react": "^3.6.0",
67-
"umi": "^2.4.4",
68-
"umi-plugin-react": "^1.4.2"
66+
"umi": "^3",
67+
"@umijs/preset-react": "^1"
6968
},
7069
"lint-staged": {
7170
"**/*.{js,jsx,less}": [

‎src/components/CopyRight/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
2-
import { Icon } from 'antd';
2+
import { CopyrightOutlined } from '@ant-design/icons';
33

44
export default ({ title }) => (
55
<div>
6-
Copyright <Icon type="copyright" /> {title}
6+
Copyright <CopyrightOutlined /> {title}
77
</div>
88
);

‎src/components/UpdatePasswordDialog/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React, { PureComponent } from 'react';
2-
import { Form, Input, Modal, message } from 'antd';
3-
import { md5Hash } from '../../utils/utils';
2+
import { Form } from '@ant-design/compatible';
3+
import '@ant-design/compatible/assets/index.css';
4+
import { Input, Modal, message } from 'antd';
45
import { updatePwd } from '@/services/login';
6+
import { md5Hash } from '../../utils/utils';
57

68
@Form.create()
79
class UpdatePasswordDialog extends PureComponent {

‎src/global.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
import './polyfill';
21
import './global.less';
32
import 'moment/locale/zh-cn';

‎src/layouts/AdminLayout.js‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
11
import React from 'react';
2-
import { Layout, Menu, Icon, Avatar, Dropdown, Spin } from 'antd';
2+
import { Icon as LegacyIcon } from '@ant-design/compatible';
3+
import {
4+
LockOutlined,
5+
LogoutOutlined,
6+
UserOutlined,
7+
MenuFoldOutlined,
8+
MenuUnfoldOutlined,
9+
} from '@ant-design/icons';
10+
import { Layout, Menu, Avatar, Dropdown, Spin } from 'antd';
311
import DocumentTitle from 'react-document-title';
412
import { connect } from 'dva';
513
// eslint-disable-next-line import/no-extraneous-dependencies
6-
import Link from 'umi/link';
14+
import { Link } from 'umi';
715
import { ContainerQuery } from 'react-container-query';
816
import classNames from 'classnames';
917
import Debounce from 'lodash-decorators/debounce';
1018
import GlobalFooter from '@/components/GlobalFooter';
1119
import CopyRight from '@/components/CopyRight';
1220
import UpdatePasswordDialog from '@/components/UpdatePasswordDialog';
13-
import styles from './AdminLayout.less';
14-
import logo from '../assets/logo.svg';
1521
import GetGlobalContext from '@/utils/context';
22+
import './AdminLayout.less';
23+
import logo from '../assets/logo.svg';
1624

1725
const { Header, Sider, Content } = Layout;
1826
const { SubMenu } = Menu;
@@ -75,10 +83,11 @@ class AdminLayout extends React.PureComponent {
7583
dispatch(action);
7684
};
7785

78-
onCollapse = collapsed => {
86+
onCollapse = () => {
87+
const { collapsed } = this.props;
7988
this.dispatch({
8089
type: 'global/changeLayoutCollapsed',
81-
payload: collapsed,
90+
payload: !collapsed,
8291
});
8392
};
8493

@@ -169,7 +178,7 @@ class AdminLayout extends React.PureComponent {
169178
title={
170179
item.icon ? (
171180
<span>
172-
<Icon type={item.icon} />
181+
<LegacyIcon type={item.icon} />
173182
<span>{item.name}</span>
174183
</span>
175184
) : (
@@ -184,7 +193,7 @@ class AdminLayout extends React.PureComponent {
184193
}
185194

186195
const { router } = item;
187-
const icon = item.icon && <Icon type={item.icon} />;
196+
const icon = item.icon && <LegacyIcon type={item.icon} />;
188197
const {
189198
location: { pathname },
190199
} = this.props;
@@ -239,21 +248,22 @@ class AdminLayout extends React.PureComponent {
239248
const GlobalContext = GetGlobalContext();
240249

241250
const menu = (
242-
<Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
251+
<Menu className={classNames('menu')} selectedKeys={[]} onClick={this.onMenuClick}>
243252
<Menu.Item key="updatepwd">
244-
<Icon type="lock" />
253+
<LockOutlined />
245254
修改密码
246255
</Menu.Item>
247256
<Menu.Divider />
248257
<Menu.Item key="logout">
249-
<Icon type="logout" />
258+
<LogoutOutlined />
250259
退出登录
251260
</Menu.Item>
252261
</Menu>
253262
);
254263

255264
// Don't show popup menu when it is been collapsed
256265
const menuProps = collapsed ? {} : { openKeys };
266+
const siderWidth = 256;
257267

258268
const layout = (
259269
<Layout>
@@ -263,10 +273,10 @@ class AdminLayout extends React.PureComponent {
263273
collapsed={collapsed}
264274
breakpoint="lg"
265275
onCollapse={this.onCollapse}
266-
width={256}
267-
className={styles.sider}
276+
width={siderWidth}
277+
className={classNames('sider')}
268278
>
269-
<div className={styles.logo}>
279+
<div className={classNames('logo')}>
270280
<Link to="/">
271281
<img src={logo} alt="logo" />
272282
<h1>{title}</h1>
@@ -284,17 +294,15 @@ class AdminLayout extends React.PureComponent {
284294
</Menu>
285295
</Sider>
286296
<Layout>
287-
<Header className={styles.header}>
288-
<Icon
289-
className={styles.trigger}
290-
type={collapsed ? 'menu-unfold' : 'menu-fold'}
291-
onClick={this.onToggleClick}
292-
/>
293-
<div className={styles.right}>
297+
<Header className={classNames('header')}>
298+
<div className={classNames('foldout')} onClick={() => this.onCollapse()}>
299+
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
300+
</div>
301+
<div className={classNames('right')}>
294302
{user.user_name ? (
295303
<Dropdown overlay={menu}>
296-
<span className={`${styles.action} ${styles.account}`}>
297-
<Avatar size="small" className={styles.avatar} icon="user" />
304+
<span className={classNames(['action', 'account'])}>
305+
<Avatar size="small" className={classNames('avatar')} icon={<UserOutlined />} />
298306
{user.real_name !== ''
299307
? `${user.user_name}(${user.real_name})`
300308
: user.user_name}
@@ -305,8 +313,8 @@ class AdminLayout extends React.PureComponent {
305313
)}
306314
</div>
307315
</Header>
308-
<Content style={{ margin: '24px 24px 0', height: '100%' }}>
309-
<div style={{ minHeight: 'calc(100vh - 260px)' }}>
316+
<Content className={classNames('content')}>
317+
<div style={{ minHeight: 'calc(100vh - 150px)' }}>
310318
<GlobalContext.Provider value={global}>{children}</GlobalContext.Provider>
311319
</div>
312320
<GlobalFooter copyright={<CopyRight title={copyRight} />} />

‎src/layouts/AdminLayout.less‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,15 @@
3030
}
3131
}
3232

33-
i.trigger {
33+
.foldout {
34+
float: left;
3435
color: #fff;
3536
font-size: 20px;
3637
line-height: 64px;
3738
cursor: pointer;
3839
transition: all 0.3s;
3940
padding: 0 24px;
41+
margin-left: -50px;
4042
&:hover {
4143
background: #072f53;
4244
}
@@ -84,20 +86,19 @@ i.trigger {
8486
}
8587
}
8688

87-
:global {
88-
.ant-layout {
89-
overflow-x: hidden;
90-
}
91-
}
92-
9389
.menu {
9490
:global(.anticon) {
9591
margin-right: 8px;
9692
}
9793
}
9894

9995
.sider {
100-
min-height: 100vh;
10196
position: relative;
10297
z-index: 10;
98+
min-height: 100vh;
99+
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
100+
}
101+
102+
.content {
103+
padding: 24px;
103104
}

‎src/layouts/PageHeaderLayout.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import Link from 'umi/link';
2+
import { Link } from 'umi';
33
import PageHeader from '@/components/PageHeader';
44
import styles from './PageHeaderLayout.less';
55

‎src/pages/404.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import Link from 'umi/link';
2+
import { Link } from 'umi';
33
import Exception from '@/components/Exception';
44

55
export default () => (

‎src/pages/Demo/DemoCard.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React, { PureComponent } from 'react';
22
import { connect } from 'dva';
3-
import { Form, Input, Modal, Radio } from 'antd';
3+
import { Form } from '@ant-design/compatible';
4+
import '@ant-design/compatible/assets/index.css';
5+
import { Input, Modal, Radio } from 'antd';
46

57
@connect(state => ({
68
demo: state.demo,

0 commit comments

Comments
 (0)