hyperledger · yeasy · May 27, 2020 · May 27, 2020
diff --git a/src/dashboard/config/router.config.js b/src/dashboard/config/router.config.js
@@ -29,7 +29,7 @@ export default [
             path: '/overview',
             name: 'overview',
             icon: 'eye',
-            component: './Overview/Overview',
+            component: './Overview/index',
           },
           {
             path: '/operator',
@@ -99,7 +99,7 @@ export default [
               },
             ],
           },
-        ]
+        ],
       },
       {
         component: '404',

diff --git a/src/dashboard/config/theme.js b/src/dashboard/config/theme.js
@@ -16,8 +16,6 @@ module.exports = {
   'border-color-split': '#152935',
   'text-color ': 'fade(#fff, 80%)',
   'text-color-secondary ': 'fade(#dfe6eb, 80%)',
-  'text-color-warning': '#efc100',
-  'text-color-danger': '#ff5050',
   'success-color': '#8cd211',
   'error-color': '#ff5050',
   'warning-color': '#efc100',

diff --git a/src/dashboard/package.json b/src/dashboard/package.json
@@ -52,7 +52,8 @@
   ],
   "dependencies": {
     "@antv/data-set": "^0.10.1",
-    "antd": "3.16.1",
+    "antd": "^4.2.5",
+    "@ant-design/icons": "^4.1.0",
     "bizcharts": "3.5.2-beta.1",
     "bizcharts-plugin-slider": "^2.1.1-beta.1",
     "classnames": "^2.2.6",
@@ -82,6 +83,8 @@
     "cello-paginator": "^1.0.1",
     "umi-request": "^1.2.19",
     "@ant-design/pro-layout": "^5.0.0",
+    "umi": "^3.1.4",
+    "redux": "^4.0.5",
     "validator": "^11.0.0"
   },
   "devDependencies": {
@@ -126,7 +129,6 @@
     "tslint-config-prettier": "^1.17.0",
     "tslint-react": "^3.6.0",
     "faker": "^4.1.0",
-    "umi": "^3.1.4",
     "@umijs/preset-react": "^1.2.2"
   },
   "engines": {

diff --git a/src/dashboard/src/components/GlobalHeader/RightContent.js b/src/dashboard/src/components/GlobalHeader/RightContent.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { injectIntl } from 'umi';
-import { Spin, Menu, Icon, Avatar } from 'antd';
+import { Spin, Menu, Avatar } from 'antd';
+import { LogoutOutlined } from '@ant-design/icons';
 import HeaderDropdown from '../HeaderDropdown';
 import SelectLang from '../SelectLang';
 import styles from './index.less';
@@ -11,10 +12,10 @@ class GlobalHeaderRight extends PureComponent {
     const menu = (
       <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
         <Menu.Item key="logout">
-          <Icon type="logout" />
+          <LogoutOutlined />
           {intl.formatMessage({
             id: 'menu.account.logout',
-            defaultMessage: 'logout'
+            defaultMessage: 'logout',
           })}
         </Menu.Item>
       </Menu>
@@ -41,4 +42,4 @@ class GlobalHeaderRight extends PureComponent {
   }
 }
 
-export default injectIntl(GlobalHeaderRight)
+export default injectIntl(GlobalHeaderRight);
diff --git a/src/dashboard/src/components/GlobalHeader/index.js b/src/dashboard/src/components/GlobalHeader/index.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { Icon } from 'antd';
+import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 import { Link } from 'umi';
 import Debounce from 'lodash-decorators/debounce';
 import styles from './index.less';
@@ -32,7 +32,7 @@ export default class GlobalHeader extends PureComponent {
           </Link>
         )}
         <span className={styles.trigger} onClick={this.toggle}>
-          <Icon type={collapsed ? 'menu-unfold' : 'menu-fold'} />
+          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
         </span>
         <RightContent {...this.props} />
       </div>

diff --git a/src/dashboard/src/components/IconFont/index.js b/src/dashboard/src/components/IconFont/index.js
@@ -1,4 +1,4 @@
-import { Icon } from 'antd';
+import Icon from '@ant-design/icons';
 import { iconfontUrl as scriptUrl } from '../../defaultSettings';
 
 // 使用：

diff --git a/src/dashboard/src/components/Login/LoginItem.js b/src/dashboard/src/components/Login/LoginItem.js
@@ -73,10 +73,6 @@ class WrapFormItem extends Component {
   render() {
     const { count } = this.state;
 
-    const {
-      form: { getFieldDecorator },
-    } = this.props;
-
     // 这么写是为了防止restProps中 带入 onChange, defaultValue, rules props
     const {
       onChange,
@@ -98,10 +94,10 @@ class WrapFormItem extends Component {
     if (type === 'Captcha') {
       const inputProps = omit(otherProps, ['onGetCaptcha', 'countDown']);
       return (
-        <FormItem>
+        <FormItem name={name} {...options}>
           <Row gutter={8}>
             <Col span={16}>
-              {getFieldDecorator(name, options)(<Input {...customprops} {...inputProps} />)}
+              <Input {...customprops} {...inputProps} />
             </Col>
             <Col span={8}>
               <Button
@@ -118,8 +114,8 @@ class WrapFormItem extends Component {
       );
     }
     return (
-      <FormItem>
-        {getFieldDecorator(name, options)(<Input {...customprops} {...otherProps} />)}
+      <FormItem name={name} {...options}>
+        <Input {...customprops} {...otherProps} />
       </FormItem>
     );
   }

diff --git a/src/dashboard/src/components/Login/index.js b/src/dashboard/src/components/Login/index.js
@@ -71,18 +71,18 @@ class Login extends Component {
     };
   };
 
-  handleSubmit = e => {
-    e.preventDefault();
-    const { active, type } = this.state;
-    const { form, onSubmit } = this.props;
-    const activeFileds = active[type];
-    form.validateFields(activeFileds, { force: true }, (err, values) => {
-      onSubmit(err, values);
-    });
+  handleSubmit = values => {
+    const { onSubmit } = this.props;
+    onSubmit(null, values);
+  };
+
+  onFinishFailed = errInfo => {
+    const { onSubmit } = this.props;
+    onSubmit(errInfo, null);
   };
 
   render() {
-    const { className, children } = this.props;
+    const { className, children, form } = this.props;
     const { type, tabs } = this.state;
     const TabChildren = [];
     const otherChildren = [];
@@ -100,7 +100,7 @@ class Login extends Component {
     return (
       <LoginContext.Provider value={this.getContext()}>
         <div className={classNames(className, styles.login)}>
-          <Form onSubmit={this.handleSubmit}>
+          <Form form={form} onFinish={this.handleSubmit} onFinishFailed={this.onFinishFailed}>
             {tabs.length ? (
               <React.Fragment>
                 <Tabs
@@ -129,4 +129,4 @@ Object.keys(LoginItem).forEach(item => {
   Login[item] = LoginItem[item];
 });
 
-export default Form.create()(Login);
+export default Login;
diff --git a/src/dashboard/src/components/Login/map.js b/src/dashboard/src/components/Login/map.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import { Icon } from 'antd';
+import { UserOutlined, LockOutlined, MobileOutlined, MailOutlined } from '@ant-design/icons';
 import styles from './index.less';
 
 export default {
   UserName: {
     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: [

diff --git a/src/dashboard/src/components/PageHeaderWrapper/GridContent.js b/src/dashboard/src/components/PageHeaderWrapper/GridContent.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { connect } from 'dva';
+import { connect } from 'umi';
 import styles from './GridContent.less';
 
 class GridContent extends PureComponent {

diff --git a/src/dashboard/src/components/SelectLang/index.js b/src/dashboard/src/components/SelectLang/index.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { injectIntl, setLocale, getLocale } from 'umi';
-import { Menu, Icon } from 'antd';
+import { Menu } from 'antd';
+import { GlobalOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
@@ -37,11 +38,11 @@ class SelectLang extends PureComponent {
     return (
       <HeaderDropdown overlay={langMenu} placement="bottomRight">
         <span className={classNames(styles.dropDown, className)}>
-          <Icon type="global" title={intl.formatMessage({ id: 'navBar.lang' })} />
+          <GlobalOutlined title={intl.formatMessage({ id: 'navBar.lang' })} />
         </span>
       </HeaderDropdown>
     );
   }
 }
 
-export default injectIntl(SelectLang)
+export default injectIntl(SelectLang);
diff --git a/src/dashboard/src/components/SettingDrawer/BlockCheckbox.js b/src/dashboard/src/components/SettingDrawer/BlockCheckbox.js
@@ -1,9 +1,10 @@
 import React from 'react';
-import { Tooltip, Icon } from 'antd';
+import { Tooltip } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
 import style from './index.less';
 
 const BlockChecbox = ({ value, onChange, list }) => (
-  <div className={style.blockChecbox} key={value}>
+  <div className={style.blockCheckbox} key={value}>
     {list.map(item => (
       <Tooltip title={item.title} key={item.key}>
         <div className={style.item} onClick={() => onChange(item.key)}>
@@ -14,7 +15,7 @@ const BlockChecbox = ({ value, onChange, list }) => (
               display: value === item.key ? 'block' : 'none',
             }}
           >
-            <Icon type="check" />
+            <CheckOutlined />
           </div>
         </div>
       </Tooltip>

diff --git a/src/dashboard/src/components/SettingDrawer/ThemeColor.js b/src/dashboard/src/components/SettingDrawer/ThemeColor.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Tooltip, Icon } from 'antd';
-import { formatMessage } from 'umi';
+import { Tooltip } from 'antd';
+import { CheckOutlined } from '@ant-design/icons';
+import { useIntl } from 'umi';
 import styles from './ThemeColor.less';
 
 const Tag = ({ color, check, ...rest }) => (
@@ -10,7 +11,7 @@ const Tag = ({ color, check, ...rest }) => (
       backgroundColor: color,
     }}
   >
-    {check ? <Icon type="check" /> : ''}
+    {check ? <CheckOutlined /> : ''}
   </div>
 );
 
@@ -52,12 +53,13 @@ const ThemeColor = ({ colors, title, value, onChange }) => {
       },
     ];
   }
+  const intl = useIntl();
   return (
     <div className={styles.themeColor}>
       <h3 className={styles.title}>{title}</h3>
       <div className={styles.content}>
         {colorList.map(({ key, color }) => (
-          <Tooltip key={color} title={formatMessage({ id: `app.setting.themecolor.${key}` })}>
+          <Tooltip key={color} title={intl.formatMessage({ id: `app.setting.themecolor.${key}` })}>
             <Tag
               className={styles.colorBlock}
               color={color}