fix #1945 and use Skeleton replace card

package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@antv/data-set": "^0.9.0",
-    "antd": "^3.8.2",
+    "antd": "^3.9.0-beta.0",
     "bizcharts": "^3.1.10",
     "bizcharts-plugin-slider": "^2.0.3",
     "classnames": "^2.2.6",

src/components/PageHeader/index.js

@@ -1,6 +1,6 @@
 import React, { PureComponent, createElement } from 'react';
 import pathToRegexp from 'path-to-regexp';
-import { Breadcrumb, Tabs, Card } from 'antd';
+import { Breadcrumb, Tabs, Skeleton } from 'antd';
 import classNames from 'classnames';
 import styles from './index.less';
 import { urlToList } from '../_utils/pathTools';
@@ -200,34 +200,36 @@ export default class PageHeader extends PureComponent {
       activeKeyProps.activeKey = tabActiveKey;
     }
     return (
-      <Card className={clsString} bodyStyle={{ padding: 0 }} loading={loading}>
-        {breadcrumb}
-        <div className={styles.detail}>
-          {logo && <div className={styles.logo}>{logo}</div>}
-          <div className={styles.main}>
-            <div className={styles.row}>
-              {title && <h1 className={styles.title}>{title}</h1>}
-              {action && <div className={styles.action}>{action}</div>}
-            </div>
-            <div className={styles.row}>
-              {content && <div className={styles.content}>{content}</div>}
-              {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
+      <div className={clsString}>
+        <Skeleton loading={loading}>
+          {breadcrumb}
+          <div className={styles.detail}>
+            {logo && <div className={styles.logo}>{logo}</div>}
+            <div className={styles.main}>
+              <div className={styles.row}>
+                {title && <h1 className={styles.title}>{title}</h1>}
+                {action && <div className={styles.action}>{action}</div>}
+              </div>
+              <div className={styles.row}>
+                {content && <div className={styles.content}>{content}</div>}
+                {extraContent && <div className={styles.extraContent}>{extraContent}</div>}
+              </div>
             </div>
           </div>
-        </div>
-        {tabList && tabList.length ? (
-          <Tabs
-            className={styles.tabs}
-            {...activeKeyProps}
-            onChange={this.onChange}
-            tabBarExtraContent={tabBarExtraContent}
-          >
-            {tabList.map(item => (
-              <TabPane tab={item.tab} key={item.key} />
-            ))}
-          </Tabs>
-        ) : null}
-      </Card>
+          {tabList && tabList.length ? (
+            <Tabs
+              className={styles.tabs}
+              {...activeKeyProps}
+              onChange={this.onChange}
+              tabBarExtraContent={tabBarExtraContent}
+            >
+              {tabList.map(item => (
+                <TabPane tab={item.tab} key={item.key} />
+              ))}
+            </Tabs>
+          ) : null}
+        </Skeleton>
+      </div>
     );
   }
 }

src/global.less

@@ -27,6 +27,11 @@ body {
   margin: 40px 0 !important;
 }
 
+ul,
+ol {
+  list-style: none;
+}
+
 :global {
   body .ant-drawer .ant-drawer-content {
     opacity: 1;

src/layouts/BasicLayout.js

@@ -71,6 +71,7 @@ class BasicLayout extends React.PureComponent {
     super(props);
     const { menuData } = this.props;
     this.getPageTitle = memoizeOne(this.getPageTitle);
+    // Because there are many places to be. So put it here
     this.breadcrumbNameMap = getBreadcrumbNameMap(menuData);
   }
   getContext() {
@@ -80,6 +81,10 @@ class BasicLayout extends React.PureComponent {
       breadcrumbNameMap: this.breadcrumbNameMap,
     };
   }
+  componentDidUpdate() {
+    const { menuData } = this.props;
+    this.breadcrumbNameMap = getBreadcrumbNameMap(menuData);
+  }
   getPageTitle = pathname => {
     let currRouterData = null;
     // match params path