版本4.0

package.json

@@ -6,7 +6,7 @@
 	"scripts": {
 		"analyze": "cross-env ANALYZE=1 umi build",
 		"build": "umi build",
-    "build:pre": "cross-env PRE_ENV=pre umi build",
+		"build:pre": "cross-env PRE_ENV=pre umi build",
 		"deploy": "npm run site && npm run gh-pages",
 		"fetch:blocks": "pro fetch-blocks && npm run prettier",
 		"format-imports": "cross-env import-sort --write '**/*.{js,jsx,ts,tsx}'",
@@ -48,11 +48,13 @@
 		"not ie <= 10"
 	],
 	"dependencies": {
+    "@ant-design/compatible": "^1.0.0",
+    "@ant-design/icons": "^4.6.4",
 		"@ant-design/colors": "^3.1.0",
 		"@ant-design/pro-layout": "^4.10.0",
 		"@ant-design/pro-table": "^1.0.31",
 		"@antv/data-set": "^0.10.2",
-		"antd": "^3.23.6",
+		"antd": "^4.0.0",
 		"antd-virtual-select": "^1.1.2",
 		"classnames": "^2.2.6",
 		"date-fns": "^2.16.1",
@@ -63,9 +65,9 @@
 		"omit.js": "^1.0.2",
 		"path-to-regexp": "^3.1.0",
 		"qs": "^6.9.0",
-		"react": "^16.8.6",
+		"react": "^16.9.0",
 		"react-copy-to-clipboard": "^5.0.1",
-		"react-dom": "^16.8.6",
+		"react-dom": "^16.9.0",
 		"react-helmet": "^5.2.1",
 		"react-sortablejs": "^6.0.0",
 		"redux": "^4.0.1",

src/components/CopyBlock/index.jsx

-import { Icon, Popover, Typography } from 'antd';
+import { DownloadOutlined } from '@ant-design/icons';
+import { Popover, Typography } from 'antd';
 import React, { useRef } from 'react';
 import { connect } from 'dva';
 import { isAntDesignPro } from '@/utils/utils';
@@ -63,7 +64,7 @@ export default connect(({ routing }) => ({
       getPopupContainer={dom => (divDom.current ? divDom.current : dom)}
     >
       <div className={styles['copy-block']} ref={divDom}>
-        <Icon type="download" />
+        <DownloadOutlined />
       </div>
     </Popover>
   );

src/components/GlobalHeader/AvatarDropdown.jsx

-import { Avatar, Icon, Menu, Spin } from 'antd';
+import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
+import { Avatar, Menu, Spin } from 'antd';
 import React from 'react';
 import { connect } from 'dva';
 import router from 'umi/router';
@@ -36,20 +37,20 @@ class AvatarDropdown extends React.Component {
       <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
         {menu && (
           <Menu.Item key="center">
-            <Icon type="user" />
+            <UserOutlined />
             个人中心
           </Menu.Item>
         )}
         {menu && (
           <Menu.Item key="settings">
-            <Icon type="setting" />
+            <SettingOutlined />
             个人设置
           </Menu.Item>
         )}
         {menu && <Menu.Divider />}
 
         <Menu.Item key="logout">
-          <Icon type="logout" />
+          <LogoutOutlined />
           退出登录
         </Menu.Item>
       </Menu>
@@ -57,7 +58,10 @@ class AvatarDropdown extends React.Component {
     return currentUser && currentUser.name ? (
       <HeaderDropdown overlay={menuHeaderDropdown}>
         <span className={`${styles.action} ${styles.account}`}>
-          <Avatar icon="user" style={{ backgroundColor: '#388bd8', marginRight: '10px' }} />
+          <Avatar
+            icon={<UserOutlined />}
+            style={{ backgroundColor: '#388bd8', marginRight: '10px' }}
+          />
           <span className={styles.name}>{currentUser.name}</span>
         </span>
       </HeaderDropdown>

src/components/GlobalHeader/RightContent.jsx

-import { Icon, Tooltip } from 'antd';
+import { Tooltip } from 'antd';
 import React from 'react';
 import { connect } from 'dva';
 import Avatar from './AvatarDropdown';

src/components/HeaderSearch/index.jsx

-import { AutoComplete, Icon, Input } from 'antd';
+import { SearchOutlined } from '@ant-design/icons';
+import { AutoComplete, Input } from 'antd';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import debounce from 'lodash/debounce';
@@ -112,7 +113,7 @@ export default class HeaderSearch extends Component {
           }
         }}
       >
-        <Icon type="search" key="Icon" />
+        <SearchOutlined key="Icon" />
         <AutoComplete
           key="AutoComplete"
           {...restProps}

src/components/NoticeIcon/index.jsx

-import { Badge, Icon, Spin, Tabs } from 'antd';
+import { BellOutlined } from '@ant-design/icons';
+import { Badge, Spin, Tabs } from 'antd';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import NoticeList from './NoticeList';
@@ -116,7 +117,7 @@ export default class NoticeIcon extends Component {
     const { visible } = this.state;
     const noticeButtonClass = classNames(className, styles.noticeButton);
     const notificationBox = this.getNotificationBox();
-    const NoticeBellIcon = bell || <Icon type="bell" className={styles.icon} />;
+    const NoticeBellIcon = bell || <BellOutlined className={styles.icon} />;
     const trigger = (
       <span
         className={classNames(noticeButtonClass, {

src/layouts/BasicLayout.jsx

@@ -8,7 +8,8 @@ import ProLayout from '@ant-design/pro-layout';
 import React, { useState, useEffect } from 'react';
 import Link from 'umi/link';
 import { connect } from 'dva';
-import { Result, Button, Layout, Menu, Icon } from 'antd';
+import { Icon as LegacyIcon } from '@ant-design/compatible';
+import { Result, Button, Layout, Menu } from 'antd';
 import Authorized from '@/utils/Authorized';
 import RightContent from '@/components/GlobalHeader/RightContent';
 import { getAuthorityFromRouter } from '@/utils/utils';
@@ -84,7 +85,7 @@ const BasicLayout = props => {
           key={v.path}
           title={
             <span>
-              <Icon type={v.icon} />
+              <LegacyIcon type={v.icon} />
               <span>{v.name}</span>
             </span>
           }
@@ -94,7 +95,7 @@ const BasicLayout = props => {
       ) : (
         <Menu.Item key={v.path}>
           <Link to={v.path}>
-            <Icon type={v.icon} />
+            <LegacyIcon type={v.icon} />
             <span className="nav-text">{v.name}</span>
           </Link>
         </Menu.Item>

src/pages/Admin.jsx

 import React from 'react';
-import { Card, Typography, Alert, Icon } from 'antd';
+import { Card, Typography, Alert } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
-export default () => (
-  <h2>欢迎使用商户管理后台系统</h2>
-);
+export default () => <h2>欢迎使用商户管理后台系统</h2>;

src/pages/AfterSaleManage/components/auditModal.jsx

 import React from 'react';
-import { Modal, Form, Input, Cascader, notification, InputNumber } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, Cascader, notification, InputNumber } from 'antd';
 import { shopAudit } from '../services';
 
 const FormItem = Form.Item;

src/pages/AfterSaleManage/components/rejectModal.jsx

 import React from 'react';
-import { Modal, Form, Input, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, notification } from 'antd';
 import { shopCheck } from '../services';
 
 const FormItem = Form.Item;

src/pages/GoodsManage/SearchForm/index.jsx

-import { Button, Form, Input, Select, notification, Upload, Cascader, InputNumber } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Button, Input, Select, notification, Upload, Cascader, InputNumber } from 'antd';
 import React, { Component } from 'react';
 import { connect } from 'dva';
 import styles from '../style.less';

src/pages/GoodsManage/UpdateStock/index.jsx

-import { Modal, InputNumber, notification, Form, Input, Radio } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, InputNumber, notification, Input, Radio } from 'antd';
 import React from 'react';
 import { updateStock } from '../service';
 

src/pages/GoodsManage/createModal/batchSetting.jsx

 /* eslint-disable no-param-reassign */
-import { Form, Select, Input, InputNumber, Button } from 'antd';
+import { Form } from '@ant-design/compatible';
+
+import '@ant-design/compatible/assets/index.css';
+import { Select, Input, InputNumber, Button } from 'antd';
 import React, { Component } from 'react';
 // import styles from '../style.less';
 

src/pages/GoodsManage/createModal/index.jsx

-/* eslint-disable no-param-reassign */
+import { MinusCircleOutlined, PlusOutlined, RestOutlined } from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
 import {
   Modal,
   Table,
   Button,
-  Form,
   Select,
   Input,
-  Icon,
   Row,
   Col,
   Checkbox,
@@ -678,9 +678,8 @@ class goodsManage extends Component {
                       />,
                     )}
                     {firstKeys.length > 0 ? (
-                      <Icon
+                      <MinusCircleOutlined
                         className="dynamic-delete-button"
-                        type="minus-circle-o"
                         onClick={() => this.remove('firstKeys', k)}
                       />
                     ) : null}
@@ -693,7 +692,7 @@ class goodsManage extends Component {
                     onClick={() => this.add('firstKeys')}
                     style={{ textAlign: 'center' }}
                   >
-                    <Icon type="plus" />
+                    <PlusOutlined />
                   </Button>
                 </FormItem>
               </Row>
@@ -742,9 +741,8 @@ class goodsManage extends Component {
                       validateTrigger: ['onChange', 'onBlur'],
                     })(<Input key={k} style={{ width: '60%', marginRight: 8 }} />)}
                     {secondKeys.length > 0 ? (
-                      <Icon
+                      <MinusCircleOutlined
                         className="dynamic-delete-button"
-                        type="minus-circle-o"
                         onClick={() => this.remove('secondKeys', k)}
                       />
                     ) : null}
@@ -757,7 +755,7 @@ class goodsManage extends Component {
                     style={{ textAlign: 'center' }}
                     disabled={isJDGoods}
                   >
-                    <Icon type="plus" />
+                    <PlusOutlined />
                   </Button>
                 </FormItem>
               </Row>
@@ -813,7 +811,7 @@ class goodsManage extends Component {
                 size="small"
                 onClick={this.deleteImg}
                 style={{ marginTop: '10px' }}
-                icon="rest"
+                icon={<RestOutlined />}
               >
                 图片批量删除
               </Button>

src/pages/GoodsManage/createModal/skuNameChange.jsx

-import { Form, Input, Modal } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Input, Modal } from 'antd';
 import React, { Component } from 'react';
 
 const { TextArea } = Input;

src/pages/GoodsManage/index.jsx

-import { Card, Form, Pagination, Table, notification, Drawer, Spin } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Card, Pagination, Table, notification, Drawer, Spin } from 'antd';
 import React, { Component } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { connect } from 'dva';

src/pages/afterSale/components/audit.jsx

 import React from 'react';
-import { Modal, Row, Col, Input, Form, Select, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Row, Col, Input, Select, notification } from 'antd';
 import { audit } from '../appeal/services';
 
 const { TextArea } = Input;

src/pages/afterSaleAddress/form.jsx

 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Select, Input, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Select, Input, notification } from 'antd';
 import _ from 'lodash';
 import { addrQuery, update } from './services';
 

src/pages/cancelBillManage/components/auditModal.jsx

 import React from 'react';
-import { Modal, Form, Input, Cascader, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, Cascader, notification } from 'antd';
 import { shopAudit } from '../service';
 
 const FormItem = Form.Item;

src/pages/cancelBillManage/components/rejectModal.jsx

 import React from 'react';
-import { Modal, Form, Input, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, notification } from 'antd';
 import { shopCheck } from '../service';
 
 const FormItem = Form.Item;

src/pages/components/sortablUpload/index.jsx

-import { Upload, Icon, Modal, notification } from 'antd';
+import { DeleteOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons';
+import { Upload, Modal, notification } from 'antd';
 import React from 'react';
 import { ReactSortable } from 'react-sortablejs';
 import lodash from 'lodash';
@@ -152,7 +153,7 @@ class PicturesWall extends React.Component {
     const { previewVisible, previewImage, fileList } = this.state;
     const uploadButton = (
       <div>
-        <Icon type="plus" />
+        <PlusOutlined />
         <div className="ant-upload-text">上传图片</div>
       </div>
     );
@@ -213,13 +214,11 @@ class PicturesWall extends React.Component {
                   </div>
                   {this.state.activeImgIndex === index && (
                     <div className={styles.mask}>
-                      <Icon
-                        type="eye"
+                      <EyeOutlined
                         className={styles.maskIcon}
                         onClick={() => this.handlePreview(item)}
                       />
-                      <Icon
-                        type="delete"
+                      <DeleteOutlined
                         className={styles.maskIcon}
                         onClick={() => this.onRemoveImg(item)}
                       />

src/pages/components/upload.jsx

-import { Upload, Icon, Modal, message } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
+import { Upload, Modal, message } from 'antd';
 import React from 'react';
 import config from '../../../config/env.config';
 import { qiniuToken } from '@/services/qiniu';
@@ -88,7 +89,7 @@ class PicturesWall extends React.Component {
     const { previewVisible, previewImage, fileList } = this.state;
     const uploadButton = (
       <div>
-        <Icon type="plus" />
+        <PlusOutlined />
         <div className="ant-upload-text">上传图片</div>
       </div>
     );

src/pages/orderManage/pendingDeliveryOrder/components/LogisticsForm.jsx

 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Select, Input, Icon, Card, notification } from 'antd';
+import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Select, Input, Card, notification } from 'antd';
 import style from '../index.less';
 import { updateExpress } from '../service';
 
@@ -160,8 +163,8 @@ const LogisticsForm = props => {
             </Card>
           ))}
         <div className={style.logistics}>
-          <Icon className={style.logisticsIcon} onClick={addForm} type="plus-circle" />
-          <Icon className={style.logisticsIcon} onClick={rmForm} type="minus-circle" />
+          <PlusCircleOutlined className={style.logisticsIcon} onClick={addForm} />
+          <MinusCircleOutlined className={style.logisticsIcon} onClick={rmForm} />
         </div>
       </Form>
     </Modal>

src/pages/reconciliation/detail/modal.jsx

 import React from 'react';
-import { Modal, Form, Select, Input, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Select, Input, notification } from 'antd';
 import { updateStatus } from '../services';
 
 const FormItem = Form.Item;

src/pages/reconciliation/form.jsx

 import React, { useState, useEffect } from 'react';
-import { Modal, Form, Select, Input, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Select, Input, notification } from 'antd';
 import _ from 'lodash';
 import { update } from './services';
 import { addrQuery } from '../afterSaleAddress/services';

src/pages/settleManage/uploadModal/index.jsx

 import React, { useRef, useState, useEffect } from 'react';
-import { Modal, Button, Tabs, Upload, notification, Icon } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+import { Modal, Button, Tabs, Upload, notification } from 'antd';
 import styles from '../style.less';
 import { uploadFile, uploadPic } from '../service';
 import UploadC from '../../components/upload';
@@ -87,7 +88,7 @@ export default props => {
           </a>
           <Dragger {...uploadProps} className={styles.clearfloat}>
             <p>
-              <Icon type="upload" />
+              <UploadOutlined />
             </p>
             <p>点击上传附件</p>
           </Dragger>

src/pages/user/login/components/Login/LoginItem.jsx

-import { Button, Col, Form, Input, Row } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Button, Col, Input, Row } from 'antd';
 import React, { Component } from 'react';
 import omit from 'omit.js';
 import ItemMap from './map';

src/pages/user/login/components/Login/LoginSubmit.jsx

-import { Button, Form } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Button } from 'antd';
 import React from 'react';
 import classNames from 'classnames';
 import styles from './index.less';

src/pages/user/login/components/Login/index.jsx

-import { Form, Tabs } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Tabs } from 'antd';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import LoginContext from './LoginContext';

src/pages/user/login/components/Login/map.jsx

-import { Icon } from 'antd';
+import { LockOutlined, MailOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons';
 import React from 'react';
 import styles from './index.less';
 
@@ -7,7 +7,7 @@ export default {
     props: {
       size: 'large',
       id: 'userName',
-      prefix: <Icon type="user" className={styles.prefixIcon} />,
+      prefix: <UserOutlined className={styles.prefixIcon} />,
       placeholder: 'admin',
     },
     rules: [
@@ -20,7 +20,7 @@ export default {
   Password: {
     props: {
       size: 'large',
-      prefix: <Icon type="lock" className={styles.prefixIcon} />,
+      prefix: <LockOutlined className={styles.prefixIcon} />,
       type: 'password',
       id: 'password',
       placeholder: '888888',
@@ -35,7 +35,7 @@ export default {
   Mobile: {
     props: {
       size: 'large',
-      prefix: <Icon type="mobile" className={styles.prefixIcon} />,
+      prefix: <MobileOutlined className={styles.prefixIcon} />,
       placeholder: 'mobile number',
     },
     rules: [
@@ -52,7 +52,7 @@ export default {
   Captcha: {
     props: {
       size: 'large',
-      prefix: <Icon type="mail" className={styles.prefixIcon} />,
+      prefix: <MailOutlined className={styles.prefixIcon} />,
       placeholder: 'captcha',
     },
     rules: [