分模块打包与按需加载

.webpackrc

@@ -1,12 +0,0 @@
-{
-    "extraBabelPlugins": [
-        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
-    ],
-    "disableCSSModules": true,
-    "hash": true,
-    "html": {
-        "favicon": "./static/images/favicon.png",
-        "template": "./src/index.ejs"
-    },
-    "theme": "./src/theme.js"
-}

.webpackrc.js

@@ -0,0 +1,27 @@
+const path = require('path');
+
+export default {
+    "alias": {
+        "@":path.resolve(__dirname, 'src/'),
+        components: path.resolve(__dirname, 'src/components/'),
+        models: path.resolve(__dirname, 'src/models/'),
+        utils: path.resolve(__dirname, 'src/utils/')
+    },
+    "extraBabelPlugins": [
+        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
+    ],
+    "disableCSSModules": true,
+    "hash": true,
+    "html": {
+        "favicon": "./static/images/favicon.png",
+        "template": "./src/index.ejs"
+    },
+    "commons": [
+        {
+            async: '__common',
+            children: true,
+            minChunks: 2,
+        },
+    ],
+    "theme": "./src/theme.js"
+}

package.json

@@ -26,6 +26,7 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-grid-layout": "^0.16.6",
+    "react-loadable": "^5.5.0",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "redux": "^4.0.0",

src/components/admin/userGroupManagement.jsx

@@ -2,14 +2,26 @@
  * 用户分组
  */
 import React from 'react';
-import { Layout, Input, Table, Button, Icon, Menu } from 'antd'
-import { connect } from 'dva'
-import './userGroupManagement.less'
-import DetailBox from './userGroupDetailBox'
-import AddMemberBox from '../common/selectUserBox/selectUserBox'
-import DeleteBox from '../common/deleteBox/deleteBox'
-const { Sider, Content } = Layout
-const { Search } = Input
+import { Layout, Input, Table, Button, Icon, Menu } from 'antd';
+import { connect } from 'dva';
+import './userGroupManagement.less';
+import DetailBox from './userGroupDetailBox';
+// import AddMemberBox from '../common/selectUserBox/selectUserBox';
+// import DeleteBox from '../common/deleteBox/deleteBox';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal'
+
+const AddMemberBox = Loadable({
+    loader: () => import('components/common/selectUserBox/selectUserBox'),
+    loading: () => <SkeletonModal />
+});
+const DeleteBox = Loadable({
+    loader: () => import('components/common/deleteBox/deleteBox'),
+    loading: () => <SkeletonModal />
+});
+
+const { Sider, Content } = Layout;
+const { Search } = Input;
 
 class UserGroupManagement extends React.Component {
 

src/components/chart/chooseDataSourceBox.less

@@ -1,5 +1,6 @@
 .choosedatasource-box {
     width: 800px !important;
+    top: 10%;
     .ant-modal-body {
         padding: 0 36px;
         max-height: 60vh;

src/components/chart/distributeBox.jsx

@@ -1,10 +1,21 @@
-import React from 'react'
-import { Modal, Layout, Card, Table, Col, Row, Button, Input, Icon, Tag, Checkbox } from 'antd'
-import { connect } from 'dva'
-import FilterBox from '../common/filterBox/filterBox'
-import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
-import moment from 'moment'
-import './distributeBox.less'
+import React from 'react';
+import { Modal, Layout, Card, Table, Col, Row, Button, Input, Icon, Tag, Checkbox } from 'antd';
+import { connect } from 'dva';
+// import FilterBox from '../common/filterBox/filterBox';
+// import AccessObjectBox from '../common/accessObjectBox/accessObjectBox';
+import moment from 'moment';
+import './distributeBox.less';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const FilterBox = Loadable({
+    loader: () => import('components/common/filterBox/filterBox'),
+    loading: () => <SkeletonModal />
+});
+const AccessObjectBox = Loadable({
+    loader: () => import('components/common/accessObjectBox/accessObjectBox'),
+    loading: () => <SkeletonModal />
+});
 const { Content } = Layout
 
 const Search = Input.Search;

src/components/chart/list.jsx

@@ -1,23 +1,35 @@
 /**
  * 图表列表
  */
-import React from 'react'
-import { Layout, Button, Icon, Menu, Card, Col, Row, Breadcrumb, Tag, Checkbox } from 'antd'
-import { connect } from 'dva'
-import ChooseDataSourceBox from './chooseDataSourceBox'
-import GroupManagementBox from '../common/groupManageMentBox/box'
-import EmptyContent from '../common/emptyContent/index'
-import 'ant-design-pro/dist/ant-design-pro.css'
-import GroupSelector from '../common/groupSelector/popover'
-import ChartCard from './chartCard'
-import DistributeBox from './distributeBox'
-import TransferBox from '../common/selectUserBox/selectUserBox'
-import DeleteBox from '../common/deleteBox/deleteBox'
-import { arrayToTree } from '../../utils/baseUtils'
-import ListFilter from '../common/listFilter/index'
-import Loading from '../common/loading/index'
-import CusIcon from '../common/cusIcon/index'
-import './list.less'
+import React from 'react';
+import { Layout, Button, Icon, Menu, Card, Col, Row, Breadcrumb, Tag, Checkbox } from 'antd';
+import { connect } from 'dva';
+import ChooseDataSourceBox from './chooseDataSourceBox';
+import GroupManagementBox from '../common/groupManageMentBox/box';
+import EmptyContent from '../common/emptyContent/index';
+import 'ant-design-pro/dist/ant-design-pro.css';
+import GroupSelector from '../common/groupSelector/popover';
+import ChartCard from './chartCard';
+import DistributeBox from './distributeBox';
+// import TransferBox from '../common/selectUserBox/selectUserBox';
+// import DeleteBox from '../common/deleteBox/deleteBox';
+import { arrayToTree } from '../../utils/baseUtils';
+import ListFilter from '../common/listFilter/index';
+import Loading from '../common/loading/index';
+import CusIcon from '../common/cusIcon/index';
+import './list.less';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const TransferBox = Loadable({
+    loader: () => import('components/common/selectUserBox/selectUserBox'),
+    loading: () => <SkeletonModal />
+});
+const DeleteBox = Loadable({
+    loader: () => import('components/common/deleteBox/deleteBox'),
+    loading: () => <SkeletonModal />
+});
+
 const { Content } = Layout
 const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
 

src/components/chartDesigner/charts/styleConfig.js

@@ -1,44 +0,0 @@
-/**
- * 应用样式
- */
-export default function(viewType, chartConfig) {
-    try {
-        let o;
-        switch(viewType) {
-            case 'bar': {
-                // o = barStyle(chartConfig);
-                break;
-            }
-            case 'pie': {
-                // o = pieStyle(chartConfig);
-                break;
-            }
-            case 'line': {
-                // o = lineStyle(chartConfig);
-                break;
-            }
-            case 'scatter': {
-                // o = scatterStyle(chartConfig);
-                break;
-            }
-            case 'aggregateTable': {
-                // o = aggregateTableStyle(chartConfig);
-                break;
-            }case 'dataView' : {
-                o = dataViewStyle(chartConfig);
-                break;
-            }
-            default:{
-                o = {};
-                break;
-            }
-        }
-        return o;
-    }catch(e) {
-        console.error(e);
-    }
-}
-
-function dataViewStyle(config) {
-    return config;
-}

src/components/chartDesigner/content.jsx

@@ -1,26 +1,46 @@
-import React from 'react'
-import { Layout, Tabs, Switch, Button } from 'antd'
-import BaseConfigForm from './sections/baseConfigForm'
-import AggregateTableConfigForm from './sections/aggregateTableConfigForm'
-import DataViewConfigForm from './sections/dataViewConfigForm'
-import BarConfigForm from './sections/barConfigForm'
-import PieConfigForm from './sections/pieConfigForm'
-import LineConfigForm from './sections/lineConfigForm'
-import ScatterConfigForm from './sections/scatterConfigForm'
-import IndicatorConfigForm from './sections/indicatorConfigForm'
-import StyleConfigForm from './sections/style/index'
-import OtherConfigForm from './sections/otherConfigForm'
-import TableView from './charts/tableView'
-import EchartsView from './charts/echartsView'
-import AggregateTableView from './charts/aggregateTableView'
-import IndicatorView from './charts/indicatorView'
-import ToolBar from './sections/toolbar'
-import { connect } from 'dva'
-import EmptyContent from '../common/emptyContent/index'
-import Thumbnail from '../common/echarts/thumbnail'
-import { hashcode } from '../../utils/baseUtils'
-import themes from './sections/style/theme/index'
-import './content.less'
+import React from 'react';
+import { Layout, Tabs, Switch, Button } from 'antd';
+import BaseConfigForm from './sections/baseConfigForm';
+import AggregateTableConfigForm from './sections/aggregateTableConfigForm';
+import DataViewConfigForm from './sections/dataViewConfigForm';
+import BarConfigForm from './sections/barConfigForm';
+import PieConfigForm from './sections/pieConfigForm';
+import LineConfigForm from './sections/lineConfigForm';
+import ScatterConfigForm from './sections/scatterConfigForm';
+import IndicatorConfigForm from './sections/indicatorConfigForm';
+import StyleConfigForm from './sections/style/index';
+import OtherConfigForm from './sections/otherConfigForm';
+// import TableView from './charts/tableView';
+// import EchartsView from './charts/echartsView';
+// import AggregateTableView from './charts/aggregateTableView';
+// import IndicatorView from './charts/indicatorView';
+import ToolBar from './sections/toolbar';
+import { connect } from 'dva';
+import EmptyContent from '../common/emptyContent/index';
+import Thumbnail from '../common/echarts/thumbnail';
+import { hashcode } from '../../utils/baseUtils';
+import themes from './sections/style/theme/index';
+import './content.less';
+import Loadable from 'react-loadable';
+import Skeleton from 'components/common/skeleton';
+
+const AggregateTableView = Loadable({
+    loader: () => import('components/chartDesigner/charts/aggregateTableView'),
+    loading: () => <Skeleton />
+});
+const TableView = Loadable({
+    loader: () => import('components/chartDesigner/charts/tableView'),
+    loading: () => <Skeleton />
+});
+const EchartsView = Loadable({
+    loader: () => import('components/chartDesigner/charts/echartsView'),
+    loading: () => <Skeleton />
+});
+const IndicatorView = Loadable({
+    loader: () => import('components/chartDesigner/charts/indicatorView'),
+    loading: () => <Skeleton />
+});
+
 const { Header, Sider, Content, Footer } = Layout
 const { TabPane } = Tabs
 

src/components/chartDesigner/header.jsx

@@ -1,8 +1,15 @@
-import React from 'react'
-import { Input, Icon, Button, Popconfirm, Tooltip, Modal, Form } from 'antd'
-import { connect } from 'dva'
-import DeleteBox from '../common/deleteBox/deleteBox'
-import './header.less'
+import React from 'react';
+import { Input, Icon, Button, Popconfirm, Tooltip, Modal, Form } from 'antd';
+import { connect } from 'dva';
+// import DeleteBox from '../common/deleteBox/deleteBox';
+import './header.less';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const DeleteBox = Loadable({
+    loader: () => import('components/common/deleteBox/deleteBox'),
+    loading: () => <SkeletonModal />
+});
 const FormItem = Form.Item
 
 class Header extends React.Component {

src/components/chartDesigner/sections/style/theme/theme2.less

@@ -188,7 +188,7 @@
     >.ant-modal-content {
         >.ant-modal-body {
             background: rgba(41,52,65,1);
-            .chartview-toolbar {
+            >div>div>.chartview-toolbar {
                 background: rgba(41,52,65,1);
                 > .chart-title {
                     color: #9fc8e6;

src/components/chartDesigner/sections/toolbar.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Tag, Icon, message } from 'antd';
-import FilterBox from '../../common/filterBox/filterBox';
+// import FilterBox from '../../common/filterBox/filterBox';
 import { connect } from 'dva';
 import moment from 'moment';
 import Filter from '../../common/filterBox/filter';
@@ -8,6 +8,13 @@ import CusIcon from '../../common/cusIcon/index';
 import ChartDataPreview from './chartDataPreview';
 import { isEqual } from '../../../utils/baseUtils.js';
 import './toolbar.less';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const FilterBox = Loadable({
+    loader: () => import('components/common/filterBox/filterBox'),
+    loading: () => <SkeletonModal />
+});
 
 class Toolbar extends React.Component {
     constructor(props) {

src/components/common/groupManageMentBox/box.jsx

@@ -1,8 +1,15 @@
-import React from 'react'
-import { Modal, Tree, Form, Input, Icon, Row, Col, Button } from 'antd'
-import DeleteBox from '../deleteBox/deleteBox'
-import { arrayToTree, hashcode } from '../../../utils/baseUtils'
-import './box.less'
+import React from 'react';
+import { Modal, Tree, Form, Input, Icon, Row, Col, Button } from 'antd';
+// import DeleteBox from '../deleteBox/deleteBox';
+import { arrayToTree, hashcode } from '../../../utils/baseUtils';
+import './box.less';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const DeleteBox = Loadable({
+    loader: () => import('components/common/deleteBox/deleteBox'),
+    loading: () => <SkeletonModal />
+});
 const { TreeNode } = Tree;
 const Search = Input.Search
 

src/components/common/login/register.jsx

@@ -288,6 +288,4 @@ class Register extends Component {
     }
 }
 
-export default connect(({ register }) => ({
-    register,
-}))(Form.create()(Register))
+export default connect()(Form.create()(Register))

src/components/common/shareQR/shareQR.jsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import QRCode from 'qrcode.react'
-
-class ShareQR extends React.Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            url: ""
-        }
-    }
-    componentDidMount(){
-        this.setState({
-            url: "http://www.baidu.com/"
-        })
-    }
-
-    render(){
-        return(
-            <div>
-                <QRCode size={150} value={this.state.url} level={"L"}/>
-            </div>
-        )
-    }
-}
-
-export default ShareQR

src/components/common/skeleton/index.jsx

@@ -0,0 +1,3 @@
+import Loading from 'components/common/loading';
+
+export default () => <Loading />

src/components/common/skeletonModal/index.jsx

@@ -0,0 +1,10 @@
+import Loading from 'components/common/loading';
+
+export default () => <div>
+    <div className="ant-modal-mask"></div>
+    <div className="ant-modal-wrap ">
+        <div class="ant-modal" style={{ textAlign: 'center', height: '200px', width: '400px' }}>
+            <Loading />
+        </div>
+    </div>
+</div>

src/components/dashboard/list.jsx

@@ -1,16 +1,32 @@
 import React from 'react'
 import { Layout, Button, Icon, Table, Menu, Dropdown, Card, Col, Row, Select } from 'antd'
 import { connect } from 'dva'
-import TransferBox from '../common/selectUserBox/selectUserBox';
-import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
+// import TransferBox from '../common/selectUserBox/selectUserBox';
+// import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
 import { dateFormat } from '../../utils/baseUtils'
-import DeleteBox from '../common/deleteBox/deleteBox'
+// import DeleteBox from '../common/deleteBox/deleteBox'
 import ShareBox from './shareBox'
 import CopyBox from './copyBox'
 import ListFilter from '../common/listFilter/index'
 import Loading from '../common/loading/index'
 import CusIcon from '../common/cusIcon/index'
-import './list.less'
+import './list.less';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const DeleteBox = Loadable({
+    loader: () => import('components/common/deleteBox/deleteBox'),
+    loading: () => <SkeletonModal />
+});
+const TransferBox = Loadable({
+    loader: () => import('components/common/selectUserBox/selectUserBox'),
+    loading: () => <SkeletonModal />
+});
+const AccessObjectBox = Loadable({
+    loader: () => import('components/common/accessObjectBox/accessObjectBox'),
+    loading: () => <SkeletonModal />
+});
+
 const { Content } = Layout
 const { Option } = Select
 

src/components/dashboard/menu.jsx

@@ -1,9 +1,17 @@
-import React from 'react'
-import { connect } from 'dva'
-import { Tree, Input, Button, Icon } from 'antd'
-import DeleteBox from '../common/deleteBox/deleteBox'
-import CusIcon from '../common/cusIcon/index'
-import './menu.less'
+import React from 'react';
+import { connect } from 'dva';
+import { Tree, Input, Button, Icon } from 'antd';
+// import DeleteBox from '../common/deleteBox/deleteBox';
+import CusIcon from '../common/cusIcon/index';
+import './menu.less';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const DeleteBox = Loadable({
+    loader: () => import('components/common/deleteBox/deleteBox'),
+    loading: () => <SkeletonModal />
+});
+
 const { TreeNode } = Tree
 const { Search } = Input
 

src/components/dashboard/shareKeyView.jsx

@@ -1,6 +1,13 @@
-import React from 'react'
-import { connect } from 'dva'
-import DashboardDesigner from '../dashboardDesigner/layout'
+import React from 'react';
+import { connect } from 'dva';
+// import DashboardDesigner from '../dashboardDesigner/layout';
+import Loadable from 'react-loadable';
+import Skeleton from 'components/common/skeleton';
+
+const DashboardDesigner = Loadable({
+    loader: () => import('../dashboardDesigner/layout'),
+    loading: () => <Skeleton />
+});
 
 class DashboardView extends React.Component {
     render() {

src/components/dashboard/shareView.jsx

@@ -1,6 +1,13 @@
-import React from 'react'
-import { connect } from 'dva'
-import DashboardDesigner from '../dashboardDesigner/layout'
+import React from 'react';
+import { connect } from 'dva';
+// import DashboardDesigner from '../dashboardDesigner/layout';
+import Loadable from 'react-loadable';
+import Skeleton from 'components/common/skeleton';
+
+const DashboardDesigner = Loadable({
+    loader: () => import('../dashboardDesigner/layout'),
+    loading: () => <Skeleton />
+});
 
 class DashboardView extends React.Component {
     render() {

src/components/dashboard/view.jsx

@@ -1,6 +1,13 @@
-import React from 'react'
-import { connect } from 'dva'
-import DashboardDesigner from '../dashboardDesigner/layout'
+import React from 'react';
+import { connect } from 'dva';
+// import DashboardDesigner from '../dashboardDesigner/layout';
+import Loadable from 'react-loadable';
+import Skeleton from 'components/common/skeleton';
+
+const DashboardDesigner = Loadable({
+    loader: () => import('../dashboardDesigner/layout'),
+    loading: () => <Skeleton />
+});
 
 class DashboardView extends React.Component {
     render() {

src/components/dashboardDesigner/chartView.jsx

@@ -1,13 +1,36 @@
-import React from 'react'
-import AggregateTableView from '../chartDesigner/charts/aggregateTableView'
-import TableView from '../chartDesigner/charts/tableView'
-import EchartsView from '../chartDesigner/charts/echartsView'
-import IndicatorView from '../chartDesigner/charts/indicatorView'
-import RichTextEditor from './richTextEditor'
-import { connect } from 'dva'
-import { hashcode } from '../../utils/baseUtils'
-import EmptyContent from '../common/emptyContent/index'
-import Loading from '../common/loading/index'
+import React from 'react';
+// import AggregateTableView from '../chartDesigner/charts/aggregateTableView';
+// import TableView from '../chartDesigner/charts/tableView';
+// import EchartsView from '../chartDesigner/charts/echartsView';
+// import IndicatorView from '../chartDesigner/charts/indicatorView';
+// import RichTextEditor from './richTextEditor';
+import { connect } from 'dva';
+import { hashcode } from '../../utils/baseUtils';
+import EmptyContent from '../common/emptyContent/index';
+import Loading from '../common/loading/index';
+import Loadable from 'react-loadable';
+import Skeleton from 'components/common/skeleton';
+
+const AggregateTableView = Loadable({
+    loader: () => import('components/chartDesigner/charts/aggregateTableView'),
+    loading: () => <Skeleton />
+});
+const TableView = Loadable({
+    loader: () => import('components/chartDesigner/charts/tableView'),
+    loading: () => <Skeleton />
+});
+const EchartsView = Loadable({
+    loader: () => import('components/chartDesigner/charts/echartsView'),
+    loading: () => <Skeleton />
+});
+const IndicatorView = Loadable({
+    loader: () => import('components/chartDesigner/charts/indicatorView'),
+    loading: () => <Skeleton />
+});
+const RichTextEditor = Loadable({
+    loader: () => import('./richTextEditor'),
+    loading: () => <Skeleton />
+});
 
 class ChartView extends React.Component {
     

src/components/dashboardDesigner/filterBar.jsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import { connect } from 'dva';
 import { Tag, Icon } from 'antd';
-import FilterBox from '../common/filterBox/filterBox2';
+// import FilterBox from '../common/filterBox/filterBox2';
 import Filter from '../common/filterBox/filter2';
 import MobileFilterList from './mobileFilterList';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const FilterBox = Loadable({
+    loader: () => import('components/common/filterBox/filterBox2'),
+    loading: () => <SkeletonModal />
+});
 
 class FilterBar extends React.Component {
 

src/components/dashboardDesigner/filterList.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Modal } from 'antd';
-import Filter from '../common/filterBox/filter2';
-import './filterList.less'
-
-const FilterList = ({ visible, onCancel, filters, changeFilterValue }) => {
-    return <Modal
-        className='filterlist'
-        footer={null}
-        visible={visible}
-        onCancel={onCancel}
-        maskClosable={true}
-        destroyOnClose={true}
-    >
-        {filters.map(f => <Filter
-            vertical={true}
-            key={f.key}
-            filter={f}
-            changeFilterValue={changeFilterValue}
-        />)}
-    </Modal>
-}
-
-export default FilterList;

src/components/dashboardDesigner/filterList.less

@@ -1,3 +0,0 @@
-.filterlist {
-    top: 5%;
-}

src/components/dashboardDesigner/header.jsx

@@ -1,8 +1,15 @@
-import React from 'react'
-import { Input, Icon, Button, Popconfirm, Switch, Form } from 'antd'
-import { connect } from 'dva'
-import DeleteBox from '../common/deleteBox/deleteBox'
-import './header.less'
+import React from 'react';
+import { Input, Icon, Button, Popconfirm, Switch, Form } from 'antd';
+import { connect } from 'dva';
+// import DeleteBox from '../common/deleteBox/deleteBox';
+import './header.less';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const DeleteBox = Loadable({
+    loader: () => import('components/common/deleteBox/deleteBox'),
+    loading: () => <SkeletonModal />
+});
 const FormItem = Form.Item
 
 class Header extends React.Component {

src/components/dashboardDesigner/layout.less

@@ -17,7 +17,6 @@
             &>.dashboard-content {
                 display: flex;
                 flex-direction: column;
-                margin: 10px;
                 overflow: hidden;
                 &.nomargin {
                     margin: 0;
@@ -41,10 +40,8 @@
                     >.config-sider {
                         border: none;
                         .ant-layout-sider-children {
-                            margin: 0 10px 0 0;
                             padding: 12px;
                             overflow: auto;
-                            border: 1px solid @border-color-base;
                         }
                         &-closed {
                             .ant-layout-sider-children {

src/components/dashboardDesigner/viewLayout.less

@@ -304,7 +304,7 @@
     }
     .ant-modal-body {
       height: 100%;
-      padding-top: 0;
+      padding: 0 24px 24px 24px;
       .chartview  {
         display: flex;
         flex-direction: column;

src/components/dataConnect/list.jsx

@@ -1,13 +1,25 @@
 import React from 'react'
 import { Layout, Row, Col, Button, Icon, Card, Select, Menu, Dropdown } from 'antd'
 import { connect } from 'dva'
-import DeleteBox from '../common/deleteBox/deleteBox'
+// import DeleteBox from '../common/deleteBox/deleteBox'
 import EmptyContent from '../common/emptyContent/index'
-import DataConnectBox from '../dataSourceDetail/dataConnectBox'
+// import DataConnectBox from '../dataSourceDetail/dataConnectBox'
 import ListFilter from '../common/listFilter/index'
 import Loading from '../common/loading/index'
-import './list.less'
+import './list.less';
 import CusIcon from '../common/cusIcon';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const DeleteBox = Loadable({
+    loader: () => import('components/common/deleteBox/deleteBox'),
+    loading: () => <SkeletonModal />
+});
+const DataConnectBox = Loadable({
+    loader: () => import('../dataSourceDetail/dataConnectBox'),
+    loading: () => <SkeletonModal />
+});
+
 const CardGrid = Card.Grid
 const { Content } = Layout
 const { Option } = Select

src/components/dataSource/list.jsx

@@ -1,18 +1,29 @@
-import React from 'react'
-import { Layout, Row, Col, Button, Table, Icon, Menu, Dropdown, Card, Breadcrumb, Tag, Checkbox } from 'antd'
-import { connect } from 'dva'
-import { arrayToTree, dateFormat } from '../../utils/baseUtils'
-import GroupManagementBox from '../common/groupManageMentBox/box'
-import GroupSelector from '../common/groupSelector/popover'
-import TransferBox from '../common/selectUserBox/selectUserBox'
+import React from 'react';
+import { Layout, Row, Col, Button, Table, Icon, Menu, Dropdown, Card, Breadcrumb, Tag, Checkbox } from 'antd';
+import { connect } from 'dva';
+import { arrayToTree, dateFormat } from '../../utils/baseUtils';
+import GroupManagementBox from '../common/groupManageMentBox/box';
+import GroupSelector from '../common/groupSelector/popover';
+// import TransferBox from '../common/selectUserBox/selectUserBox';
 import CopyBox from './copyBox'
-import DeleteBox from '../common/deleteBox/deleteBox'
-import DataPreview from '../common/dataPreview/dataPreview'
-import ListFilter from '../common/listFilter/index'
-import EllipsisTooltip from '../common/ellipsisTooltip/index'
-import Loading from '../common/loading/index'
-import CusIcon from '../common/cusIcon'
-import './list.less'
+// import DeleteBox from '../common/deleteBox/deleteBox';
+import DataPreview from '../common/dataPreview/dataPreview';
+import ListFilter from '../common/listFilter/index';
+import EllipsisTooltip from '../common/ellipsisTooltip/index';
+import Loading from '../common/loading/index';
+import CusIcon from '../common/cusIcon';
+import './list.less';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const DeleteBox = Loadable({
+    loader: () => import('components/common/deleteBox/deleteBox'),
+    loading: () => <SkeletonModal />
+});
+const TransferBox = Loadable({
+    loader: () => import('components/common/selectUserBox/selectUserBox'),
+    loading: () => <SkeletonModal />
+});
 const { Content } = Layout
 
 class DataSource extends React.Component {
@@ -272,7 +283,7 @@ class DataSource extends React.Component {
                     <div>
                         <span style={{ color: '#1890ff', cursor: 'pointer' }} onClick={() => {
                             dispatch({ type: 'dataSource/resetNewModel' });
-                            dispatch({type: 'main/redirect', path: {pathname: '/workshop/datasource/'+ record.type +'/' + record.code + '/base'}});
+                            dispatch({type: 'main/redirect', path: {pathname: '/workshop/datasource/' + record.code }});
                         }}>
                             {record.type === 'database' ? <Icon type="database" theme="outlined" style={{ marginRight: '8px' }}/> : <Icon type="file-excel" theme="outlined" style={{ marginRight: '8px' }}/>}
                             { (filterItem.name === 'name' && filterLabel) ?
@@ -382,12 +393,9 @@ class DataSource extends React.Component {
                                 </Col>
                                 <Col>
                                     <Dropdown overlay={(
-                                        <Menu onClick={(item, key, keyPath) => {
-                                            const type = item.key;
-                                            // dispatch({ type: 'dataSource/resetNewModel' });
+                                        <Menu onClick={() => {
                                             dispatch({ type: 'dataConnect/resetSelected' });
-                                            // dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: type, group });
-                                            dispatch({type: 'main/redirect', path: {pathname: '/workshop/datasource/'+ type +'/create/base'}});
+                                            dispatch({type: 'main/redirect', path: {pathname: '/workshop/datasource/create'}});
                                         }}>
                                             { (currentUser.role === 'admin' || currentUser.role === 'superAdmin') && <Menu.Item key='database'>选择数据链接</Menu.Item>}
                                             <Menu.Item disabled key='file'>上传文件</Menu.Item>

src/components/dataSourceDetail/accessConfig.jsx

@@ -1,11 +1,27 @@
 import React from 'react'
 import { connect } from 'dva'
 import { Layout, Card, Row, Col, Table, Input, Checkbox, Button, Icon, Tag } from 'antd'
-import FilterBox from '../common/filterBox/filterBox'
-import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
-import DeleteBox from '../common/deleteBox/deleteBox'
+// import FilterBox from '../common/filterBox/filterBox'
+// import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
+// import DeleteBox from '../common/deleteBox/deleteBox'
 import moment from 'moment'
-import './accessConfig.less'
+import './accessConfig.less';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const FilterBox = Loadable({
+    loader: () => import('components/common/filterBox/filterBox'),
+    loading: () => <SkeletonModal />
+});
+const AccessObjectBox = Loadable({
+    loader: () => import('components/common/accessObjectBox/accessObjectBox'),
+    loading: () => <SkeletonModal />
+});
+const DeleteBox = Loadable({
+    loader: () => import('components/common/deleteBox/deleteBox'),
+    loading: () => <SkeletonModal />
+});
+
 const { Content } = Layout
 
 const Search = Input.Search;

src/components/dataSourceDetail/content.jsx

@@ -8,49 +8,40 @@ import './content.less'
 const { Content } = Layout
 const TabPane = Tabs.TabPane
 
+const tabs = [{
+    tabName: 'base',
+    title: '基本信息',
+    content: (mode) => <BaseConfig mode={mode} />,
+}, {
+    tabName: 'column',
+    title: '数据列配置',
+    content: (mode) => <ColumnConfig mode={mode} />,
+}, {
+    tabName: 'access',
+    title: '数据开放策略',
+    content: (mode) => <AccessConfig mode={mode} />,
+}];
+
 class DataSourceDetailContent extends React.Component {
 
     constructor(props) {
         super(props);
         this.state = {
             mode: props.params.code && props.params.code==='create'?'create':'modify',
-            type: props.params.type,
             code: props.params.code,
-            tab: props.params.tab
         }
     }
 
     render() {
-        const { dispatch } = this.props;
-        const { type, code, tab, mode } = this.state;
+        const { mode } = this.state;
 
-        const tabs = [{
-            tabName: 'base',
-            title: '基本信息',
-            content: <BaseConfig mode={mode} />,
-        }, {
-            tabName: 'column',
-            title: '数据列配置',
-            content: <ColumnConfig mode={mode} />,
-        }, {
-            tabName: 'access',
-            title: '数据开放策略',
-            content: <AccessConfig mode={mode} />,
-        }];
         return (
             <Layout className='content-datasourcedetail'>
                 <Content className='content'>
-                    <Tabs activeKey={tab} type="card"
-                        onChange={(key) => {
-                            dispatch({ type: 'main/redirect', path: '/workshop/datasource/' + type + '/' + code + '/' + key })
-                            this.setState({
-                                tab: key,
-                            })
-                        }}
-                    >
+                    <Tabs type="card">
                         {tabs.map((item, index) => {
                             return <TabPane className='tab-datasource' key={item.tabName} tab={item.title}>
-                                {item.content}
+                                {item.content(mode)}
                             </TabPane>
                         })}
                     </Tabs>

src/components/dataSourceDetail/contentCreate.jsx

@@ -8,53 +8,34 @@ import './contentCreate.less'
 const { Content } = Layout
 const Step = Steps.Step
 
+const steps = [{
+    tabName: 'base',
+    title: '选择数据链接',
+    content: (mode) => <DataConnectConfig mode={mode} />,
+}, {
+    tabName: 'column',
+    title: '数据列配置',
+    content: (mode) => <ColumnConfig mode={mode} />,
+}, {
+    tabName: 'other',
+    title: '完成',
+    content: (mode) => <OtherConfig mode={mode} />,
+}];
+
 class DataSourceCreateContent extends React.Component {
 
     constructor(props) {
         super(props);
         this.state = {
             mode: props.params.code && props.params.code==='create'?'create':'modify',
-            type: props.params.type,
             code: props.params.code,
-            tab: props.params.tab,
-            // current: ['base', 'column', 'access', 'other'].indexOf(props.match.params.tab)
-            current: ['base', 'column', 'other'].indexOf(props.params.tab),
+            current: 0
         }
     }
 
-    next() {
-        const { type, current } = this.state;
-        this.setState({ current: current + 1 });
-        // let step = ['base', 'column', 'access', 'other'][current + 1];
-        let step = ['base', 'column', 'other'][current + 1];
-        this.props.dispatch({ type: 'main/redirect', path: '/workshop/datasource/' + type + '/create/' + step })
-    }
-
-    prev() {
-        const { type, current } = this.state;
-        this.setState({ current: current - 1 });
-        // let step = ['base', 'column', 'access', 'other'][current - 1];
-        let step = ['base', 'column', 'other'][current - 1];
-        this.props.dispatch({ type: 'main/redirect', path: '/workshop/datasource/' + type + '/create/' + step })
-    }
-
     render() {
         const { dispatch, dataSourceDetail, dataConnect } = this.props;
-        const { type, mode, current } = this.state;
-
-        const steps = [{
-            tabName: 'base',
-            title: type === 'database' ? '选择数据链接' : '选择文件',
-            content: <DataConnectConfig mode={mode} />,
-        }, {
-            tabName: 'column',
-            title: '数据列配置',
-            content: <ColumnConfig mode={mode} />,
-        }, {
-            tabName: 'other',
-            title: '完成',
-            content: <OtherConfig mode={mode} />,
-        }];
+        const { mode, current } = this.state;
 
         return (
             <Layout className='content-datasourcecreate'>
@@ -64,13 +45,17 @@ class DataSourceCreateContent extends React.Component {
                             {steps.map((item,index) => <Step key={'step-' + index} title={item.title} />)}
                         </Steps>
                         <div className="steps-content">
-                            {steps[current].content}
+                            {steps[current].content(mode)}
                         </div>
                         <div className="steps-action">
                             <div className='steps-buttons'>
                                 {
                                     current > 0 && (
-                                    <Button onClick={() => this.prev()}>
+                                    <Button onClick={() => {
+                                        this.setState({
+                                            current: current - 1
+                                        });
+                                    }}>
                                         上一步
                                     </Button>)
                                 }
@@ -78,10 +63,14 @@ class DataSourceCreateContent extends React.Component {
                                     current < steps.length - 1
                                     && <Button disabled={
                                         // 第一步：没有选择数据连接或没有上传文件或上传文件有误
-                                        ( current === 0 && ( ( type === 'database' && !dataSourceDetail.connectCode ) || ( type === 'file' && +1 === 2) ) ) ||
+                                        current === 0 && !dataSourceDetail.connectCode ||
                                         // 第二步：数据列为空或者数据对象有变更
                                         (current === 1 && (!dataSourceDetail.columns || dataSourceDetail.columns.length === 0 || dataSourceDetail.targetDirty))
-                                    } type="primary" onClick={() => this.next()}>下一步</Button>
+                                    } type="primary" onClick={() => {
+                                        this.setState({
+                                            current: current + 1
+                                        })
+                                    }}>下一步</Button>
                                 }
                                 {
                                     current === steps.length - 1

src/components/dataSourceDetail/dataConnectBox.less

@@ -1,15 +1,19 @@
 .dataconnect-box {
     width: 680px !important;
+    top: 10%;
     .ant-modal-body {
         max-height: 60vh;
         overflow-y: auto;
-        .ant-form-item.required {
-            .ant-form-item-label label:before{
-                content: '*';
-                position: absolute;
-                font-weight: bold;
-                color: red;
-                left: -8px;
+        .ant-form-item {
+            margin-bottom: 0;
+            &.required {
+                .ant-form-item-label label:before{
+                    content: '*';
+                    position: absolute;
+                    font-weight: bold;
+                    color: red;
+                    left: -8px;
+                }
             }
         }
         .ant-input-number-handler-wrap {

src/components/dataSourceDetail/dataConnectConfig.jsx

@@ -1,12 +1,20 @@
 /**
  * 新增数据源-选择数据链接
  */
-import React from 'react'
-import { Layout, Form, Row, Col, Input, Icon, Menu, Dropdown, Divider, Upload, message, Card } from 'antd'
-import { connect } from 'dva'
-import DataConnectBox from './dataConnectBox'
-import EmptyContent from '../common/emptyContent/index'
-import './dataConnectConfig.less'
+import React from 'react';
+import { Layout, Form, Row, Col, Input, Icon, Menu, Dropdown, Divider, Upload, message, Card } from 'antd';
+import { connect } from 'dva';
+// import DataConnectBox from './dataConnectBox';
+import EmptyContent from '../common/emptyContent/index';
+import './dataConnectConfig.less';
+import Loadable from 'react-loadable';
+import SkeletonModal from 'components/common/skeletonModal';
+
+const DataConnectBox = Loadable({
+    loader: () => import('./dataConnectBox'),
+    loading: () => <SkeletonModal />
+});
+
 const { Content } = Layout
 const CardGrid = Card.Grid
 const UploadDragger = Upload.Dragger

src/components/dataSourceDetail/header.jsx

@@ -40,7 +40,7 @@ class DataSourceDetailHeader extends React.Component {
         return (
             <div className='dataSourcedetail-header'>
                 <div style={{ maxWidth: '400px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                    <span className='title-label' title={name || '未命名'}>{name || '未命名'}</span>
+                    <span className='title-label' title={name}>{name}</span>
                 </div>
                 <div className='buttons'>
                     <Popconfirm

src/components/dataSourceDetail/layout.jsx

@@ -12,23 +12,23 @@ const { Header, Content } = Layout
 class DataSourceDetail extends React.Component {
 
     constructor(props) {
+        console.log('constructor');
         super(props);
         this.state = {
-            paramsType: props.match.params.type,
             paramsCode: props.match.params.code,
         }
     }
 
     componentDidMount() {
         const { dataSource, dispatch } = this.props;
-        const { paramsType: type, paramsCode: code } = this.state;
+        const { paramsCode: code } = this.state;
         dispatch({ type: 'dataSourceDetail/reset' });
         if(code !== 'create') {
             dispatch({ type: 'dataSource/remoteDetail', code: code })
             dispatch({ type: 'dataSourcePolicy/fetchList', dataSourceCode: code });
         }else {
             dispatch({ type: 'dataSourceDetail/setFields', fields: [
-                { name: 'type', value: type },
+                { name: 'type', value: 'database' },
                 { name: 'group', value: dataSource.currentGroup ? dataSource.currentGroup.code : '-1'  }
             ] });
         }

src/components/homePage/toolbar.jsx

@@ -1,9 +1,16 @@
-import React from 'react'
-import { Icon, Modal } from 'antd'
-import { connect } from 'dva'
-import DashboardDesigner from '../dashboardDesigner/layout'
-import CusIcon from '../common/cusIcon/index'
-import './toolbar.less'
+import React from 'react';
+import { Icon, Modal } from 'antd';
+import { connect } from 'dva';
+// import DashboardDesigner from '../dashboardDesigner/layout';
+import CusIcon from '../common/cusIcon/index';
+import './toolbar.less';
+import Loadable from 'react-loadable';
+import Skeleton from 'components/common/skeleton';
+
+const DashboardDesigner = Loadable({
+    loader: () => import('../dashboardDesigner/layout'),
+    loading: () => <Skeleton />
+});
 
 class Toolbar extends React.Component {
     constructor(props) {

src/components/homePage/view.jsx

@@ -1,6 +1,13 @@
-import React from 'react'
-import { connect } from 'dva'
-import DashboardDesigner from '../dashboardDesigner/layout'
+import React from 'react';
+import { connect } from 'dva';
+// import DashboardDesigner from '../dashboardDesigner/layout';
+import Loadable from 'react-loadable';
+import Skeleton from 'components/common/skeleton';
+
+const DashboardDesigner = Loadable({
+    loader: () => import('../dashboardDesigner/layout'),
+    loading: () => <Skeleton />
+});
 
 class DashboardView extends React.Component {
     afterLoad = (data) => {

src/components/logs/logs.jsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import { Layout, Row, Col, Table, Card, Button, Icon } from 'antd'
-import { connect } from 'dva'
-import moment from 'moment'
-import ListFilter from '../common/listFilter/index'
-import EllipsisTooltip from '../common/ellipsisTooltip/index'
-import Loading from '../common/loading/index'
-import './logs.less'
+import React from 'react';
+import { Layout, Row, Col, Table, Card, Button, Icon } from 'antd';
+import { connect } from 'dva';
+import moment from 'moment';
+import ListFilter from '../common/listFilter/index';
+import EllipsisTooltip from '../common/ellipsisTooltip/index';
+import Loading from '../common/loading/index';
+import './logs.less';
+
 const { Content } = Layout
 
 class Logs extends React.Component {

src/components/workshop/index.jsx

@@ -1,16 +1,40 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
-import { Route, Switch, Redirect } from 'dva/router'
-import { Layout, Button } from 'antd'
-import { connect } from 'dva'
-import DataConnect from '../dataConnect/list'
-import DataSource from '../dataSource/list'
-import Dashboard from '../dashboard/layout'
-import Chart from '../chart/list'
-import DataSourceDetail from '../dataSourceDetail/layout'
-import CusIcon from '../common/cusIcon/index'
-import './index.less'
-const { Sider, Content } = Layout
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Route, Switch, Redirect } from 'dva/router';
+import { Layout, Button } from 'antd';
+import { connect } from 'dva';
+// import DataConnect from '../dataConnect/list';
+// import DataSource from '../dataSource/list';
+// import Dashboard from '../dashboard/layout';
+// import Chart from '../chart/list';
+// import DataSourceDetail from '../dataSourceDetail/layout';
+import CusIcon from '../common/cusIcon/index';
+import './index.less';
+import Loadable from 'react-loadable';
+import Skeleton from 'components/common/skeleton';
+
+const DataConnect = Loadable({
+    loader: () => import('components/dataConnect/list'),
+    loading: () => <Skeleton />
+});
+const DataSource = Loadable({
+    loader: () => import('components/dataSource/list'),
+    loading: () => <Skeleton />
+});
+const Dashboard = Loadable({
+    loader: () => import('components/dashboard/layout'),
+    loading: () => <Skeleton />
+});
+const Chart = Loadable({
+    loader: () => import('components/chart/list'),
+    loading: () => <Skeleton />
+});
+const DataSourceDetail = Loadable({
+    loader: () => import('components/dataSourceDetail/layout'),
+    loading: () => <Skeleton />
+});
+
+const { Sider, Content } = Layout;
 
 class Workshop extends React.Component {
     constructor(props) {
@@ -43,7 +67,7 @@ class Workshop extends React.Component {
             <Content className='content-workshop'>
                 <Switch>
                     <Route sensitive path='/workshop/dataconnect' component={DataConnect}/>
-                    <Route sensitive path='/workshop/datasource/:type/:code/:tab' component={DataSourceDetail}/>
+                    <Route sensitive path='/workshop/datasource/:code' component={DataSourceDetail}/>
                     <Route sensitive path='/workshop/datasource' component={DataSource}/>
                     <Route sensitive path='/workshop/chart' component={Chart} />
                     <Route sensitive path='/workshop/dashboard' component={Dashboard} />

src/models/dataSourceDetail.js

@@ -85,7 +85,7 @@ export default {
                 const res = yield call(service.fetch, {
                     url: URLS.DATASOURCE_QUERY_SQLCOLUMNS,
                     body: body,
-                    timeout: 120000
+                    timeout: 30000
                 });
     
                 const getColumnType = (dataType) => {

src/routes/authLayout.jsx

@@ -28,7 +28,7 @@ class AuthLayout extends React.Component {
     render() {
         const { location, children, main } = this.props;
         const { isLogin, authenticated,  } = main;
-        const { checking } = this.state
+        const { checking } = this.state;
 
         return (
             isLogin ? (

src/routes/mainLayout.jsx

@@ -1,15 +1,35 @@
-import React from 'react'
-import { Layout } from 'antd'
-import { Route, Switch, Redirect } from 'dva/router'
-import Navigator from '../components/common/navigator'
-import HomePage from '../components/homePage/index'
-import Workshop from '../components/workshop/index'
-import Setting from '../components/setting/index'
-import './mainLayout.less'
-import UserInfo from '../components/user/userInfo'
-const { Header, Content } = Layout
+import React from 'react';
+import { Layout } from 'antd';
+import { Route, Switch, Redirect } from 'dva/router';
+import Navigator from '../components/common/navigator';
+// import HomePage from '../components/homePage/index';
+// import Workshop from '../components/workshop/index';
+// import Setting from '../components/setting/index';
+import './mainLayout.less';
+// import UserInfo from '../components/user/userInfo';
+import Loadable from 'react-loadable';
+import Skeleton from 'components/common/skeleton';
 
-const MainLayout = () => {
+const HomePage = Loadable({
+    loader: () => import('components/homePage/index'),
+    loading: () => <Skeleton />
+});
+const Workshop = Loadable({
+    loader: () => import('components/workshop/index'),
+    loading: () => <Skeleton />
+});
+const Setting = Loadable({
+    loader: () => import('components/setting/index'),
+    loading: () => <Skeleton />
+});
+const UserInfo = Loadable({
+    loader: () => import('components/user/userInfo'),
+    loading: () => <Skeleton />
+});
+
+const { Header, Content } = Layout;
+
+const MainLayout = ({ app }) => {
     return(
         <Layout className='main-layout'>
             <Header className='main-header'>

src/routes/router.js

@@ -1,16 +1,43 @@
-import React from 'react'
-import { LocaleProvider } from 'antd'
-import { Router, Route, Switch } from 'dva/router'
-import PrivateRoute from './privateRoute'
-import Login from '../components/common/login/login'
-import Register from '../components/common/login/register'
-import MainLayout from './mainLayout'
-import ChartDesigner from '../components/chartDesigner/layout'
-import DashboardView from '../components/dashboard/view'
-import DashboardShareView from '../components/dashboard/shareView'
-import DashboardShareKeyView from '../components/dashboard/shareKeyView'
+import React from 'react';
+import { LocaleProvider } from 'antd';
+import { Router, Route, Switch } from 'dva/router';
+import PrivateRoute from './privateRoute';
+// import Login from '../components/common/login/login';
+// import Register from '../components/common/login/register';
+import MainLayout from './mainLayout';
+// import ChartDesigner from '../components/chartDesigner/layout';
+// import DashboardView from '../components/dashboard/view';
+// import DashboardShareView from '../components/dashboard/shareView';
+// import DashboardShareKeyView from '../components/dashboard/shareKeyView';
 // 由于 antd 组件的默认文案是英文，所以需要修改为中文
-import zhCN from 'antd/lib/locale-provider/zh_CN'
+import zhCN from 'antd/lib/locale-provider/zh_CN';
+import Loadable from 'react-loadable';
+import Skeleton from 'components/common/skeleton';
+
+const Login = Loadable({
+    loader: () => import('components/common/login/login'),
+    loading: () => <Skeleton />
+});
+const Register = Loadable({
+    loader: () => import('components/common/login/register'),
+    loading: () => <Skeleton />
+});
+const ChartDesigner = Loadable({
+    loader: () => import('components/chartDesigner/layout'),
+    loading: () => <Skeleton />
+});
+const DashboardView = Loadable({
+    loader: () => import('components/dashboard/view'),
+    loading: () => <Skeleton />
+});
+const DashboardShareView = Loadable({
+    loader: () => import('components/dashboard/shareView'),
+    loading: () => <Skeleton />
+});
+const DashboardShareKeyView = Loadable({
+    loader: () => import('components/dashboard/shareKeyView'),
+    loading: () => <Skeleton />
+});
 
 function RouterConfig({ history }) {
     return (

src/themes/default/base.less

@@ -143,12 +143,9 @@ input::-webkit-input-placeholder {
         background-color: #fff;
     }
 }
-
-.ant-select-dropdown-menu {
-    .ant-select-dropdown-menu-item:hover {
-        color: @item-active-color;
-        background-color: @item-active-bg-color;
-    }
+.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
+    color: @item-active-color;
+    background-color: @item-active-bg-color;
 }
 
 // Checkbox
@@ -227,6 +224,11 @@ input::-webkit-input-placeholder {
     }
 }
 
+// 表单
+.ant-form-item {
+    margin-bottom: 0;
+}
+
 // 错误提示
 .ant-form-explain {
     font-size: 12px;