From 0b360eeebb53145ce993690a2b31a4198316dea9 Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Sun, 28 Oct 2018 22:34:24 +0800
Subject: [PATCH] fix some style, remove svg config.

---
 .umirc.js                                | 15 +++++----------
 package.json                             |  3 +--
 src/components/Layout/Sider.js           |  7 ++++++-
 src/components/Layout/Sider.less         |  6 ++++++
 src/components/Loader/Loader.js          |  2 +-
 src/layouts/PrimaryLayout.less           |  3 +++
 src/pages/dashboard/components/user.js   | 11 ++++++-----
 src/pages/dashboard/components/user.less |  9 +--------
 src/pages/dashboard/index.js             | 15 +++++++++++----
 src/pages/post/components/List.js        |  2 +-
 src/pages/user/components/List.js        |  2 +-
 11 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/.umirc.js b/.umirc.js
index 5574479..0dd66d8 100644
--- a/.umirc.js
+++ b/.umirc.js
@@ -5,7 +5,6 @@ import { i18n } from './src/utils/config'
 export default {
   ignoreMomentLocale: true,
   targets: { ie: 9 },
-  urlLoaderExcludes: [/\.svg$/],
   plugins: [
     [
       // https://umijs.org/plugin/umi-plugin-react.html
@@ -13,7 +12,10 @@ export default {
       {
         dva: { immer: true },
         antd: true,
-        dynamicImport: true,
+        dynamicImport: {
+          webpackChunkName: true,
+          loadingComponent: './components/Loader/Loader',
+        },
         routes: {
           exclude: [
             /model\.(j|t)sx?$/,
@@ -55,7 +57,7 @@ export default {
         dll: {
           include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch', 'antd/es'],
         },
-        hardSource: /* isMac */ process.platform === 'darwin'
+        hardSource: /* isMac */ process.platform === 'darwin',
       },
     ],
   ],
@@ -80,13 +82,6 @@ export default {
     themes: resolve(__dirname, './src/themes'),
     utils: resolve(__dirname, './src/utils'),
   },
-  chainWebpack(config) {
-    config.module
-      .rule('svg')
-      .test(/\.svg$/i)
-      .use('svg-sprite-loader')
-      .loader(require.resolve('svg-sprite-loader'))
-  },
   extraBabelPresets: ['@lingui/babel-preset-react'],
   extraBabelPlugins: [
     [
diff --git a/package.json b/package.json
index d96ad94..3a9e686 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,7 @@
     "stylelint": "^9.6.0",
     "stylelint-config-prettier": "^4.0.0",
     "stylelint-config-standard": "^18.2.0",
-    "svg-sprite-loader": "^4.1.1",
-    "umi": "2.1.2",
+    "umi": "^2.2.1",
     "umi-plugin-react": "^1.2.0"
   },
   "optionalDependencies": {
diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js
index c4affe6..0a9d57c 100644
--- a/src/components/Layout/Sider.js
+++ b/src/components/Layout/Sider.js
@@ -39,7 +39,12 @@ class Sider extends PureComponent {
         </div>
 
         <div className={styles.menuContainer}>
-          <ScrollBar>
+          <ScrollBar
+            option={{
+              // Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
+              suppressScrollX: true,
+            }}
+          >
             <SiderMenu
               menus={menus}
               theme={theme}
diff --git a/src/components/Layout/Sider.less b/src/components/Layout/Sider.less
index dce326d..9f41821 100644
--- a/src/components/Layout/Sider.less
+++ b/src/components/Layout/Sider.less
@@ -64,6 +64,12 @@
       background-color: rgba(0, 0, 0, 0.2);
     }
   }
+
+  :global {
+    .ant-menu-inline {
+      border-right: none;
+    }
+  }
 }
 
 .switchTheme {
diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js
index d0075f9..29abe44 100644
--- a/src/components/Loader/Loader.js
+++ b/src/components/Loader/Loader.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import styles from './Loader.less'
 
-const Loader = ({ spinning, fullScreen }) => {
+const Loader = ({ spinning = true, fullScreen }) => {
   return (
     <div
       className={classNames(styles.loader, {
diff --git a/src/layouts/PrimaryLayout.less b/src/layouts/PrimaryLayout.less
index 56af53f..009cad3 100644
--- a/src/layouts/PrimaryLayout.less
+++ b/src/layouts/PrimaryLayout.less
@@ -30,11 +30,13 @@
 
 .content {
   padding: 24px;
+  min-height: ~'calc(100% - 72px)';
 }
 
 .container {
   height: 100vh;
   flex: 1;
+  width: ~'calc(100% - 256px)';
 }
 
 .footer {
@@ -43,4 +45,5 @@
   margin-bottom: 0;
   padding-top: 24px;
   padding-bottom: 24px;
+  min-height: 72px;
 }
diff --git a/src/pages/dashboard/components/user.js b/src/pages/dashboard/components/user.js
index 92ed367..c988487 100644
--- a/src/pages/dashboard/components/user.js
+++ b/src/pages/dashboard/components/user.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Button, Icon } from 'antd'
+import { Button, Avatar } from 'antd'
 import CountUp from 'react-countup'
 import { Color } from 'utils'
 import styles from './user.less'
@@ -13,13 +13,13 @@ const countUpProps = {
   separator: ',',
 }
 
-function User({ name, sales = 0, sold = 0 }) {
+function User({ avatar, username, sales = 0, sold = 0 }) {
   return (
     <div className={styles.user}>
       <div className={styles.header}>
         <div className={styles.headerinner}>
-          <Icon className={styles.avatar} type="github" theme="outlined" />
-          <h5 className={styles.name}>{name}</h5>
+          <Avatar size="large" src={avatar} />
+          <h5 className={styles.name}>{username}</h5>
         </div>
       </div>
       <div className={styles.number}>
@@ -46,7 +46,8 @@ function User({ name, sales = 0, sold = 0 }) {
 }
 
 User.propTypes = {
-  name: PropTypes.string,
+  avatar: PropTypes.string,
+  username: PropTypes.string,
   sales: PropTypes.number,
   sold: PropTypes.number,
 }
diff --git a/src/pages/dashboard/components/user.less b/src/pages/dashboard/components/user.less
index a693d72..00645c1 100644
--- a/src/pages/dashboard/components/user.less
+++ b/src/pages/dashboard/components/user.less
@@ -26,16 +26,9 @@
       z-index: 1;
     }
 
-    .avatar {
-      font-size: 48px;
-      background-position: center;
-      background-size: cover;
-      border-radius: 50%;
-      display: inline-block;
-    }
-
     .name {
       font-size: 16px;
+      margin-top: 8px;
     }
   }
 
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
index 824ea45..72a76c9 100644
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -25,10 +25,15 @@ const bodyStyle = {
   },
 }
 
-@connect(({ dashboard, loading }) => ({ dashboard, loading }))
+@connect(({ app, dashboard, loading }) => ({
+  avatar: app.user.avatar,
+  username: app.user.username,
+  dashboard,
+  loading,
+}))
 class Dashboard extends PureComponent {
   render() {
-    const { dashboard, loading } = this.props
+    const { avatar, username, dashboard, loading } = this.props
     const {
       weather,
       sales,
@@ -50,7 +55,7 @@ class Dashboard extends PureComponent {
 
     return (
       <Page
-        loading={loading.models.dashboard && sales.length === 0}
+        // loading={loading.models.dashboard && sales.length === 0}
         className={styles.dashboard}
       >
         <Row gutter={24}>
@@ -139,7 +144,7 @@ class Dashboard extends PureComponent {
               bordered={false}
               bodyStyle={{ ...bodyStyle.bodyStyle, padding: 0 }}
             >
-              <User {...user} />
+              <User {...user} avatar={avatar} username={username} />
             </Card>
           </Col>
         </Row>
@@ -149,6 +154,8 @@ class Dashboard extends PureComponent {
 }
 
 Dashboard.propTypes = {
+  avatar: PropTypes.string,
+  username: PropTypes.string,
   dashboard: PropTypes.object,
   loading: PropTypes.object,
 }
diff --git a/src/pages/post/components/List.js b/src/pages/post/components/List.js
index cecaee2..e7741fc 100644
--- a/src/pages/post/components/List.js
+++ b/src/pages/post/components/List.js
@@ -56,7 +56,7 @@ class List extends PureComponent {
             showTotal: total => i18n.t`Total ${total} Items`,
           }}
           bordered
-          scroll={{ x: 1200 }}
+          scroll={{ x: 1200, y: 'auto' }}
           columns={columns}
           simple
           rowKey={record => record.id}
diff --git a/src/pages/user/components/List.js b/src/pages/user/components/List.js
index 60e69f7..39fc25b 100644
--- a/src/pages/user/components/List.js
+++ b/src/pages/user/components/List.js
@@ -109,7 +109,7 @@ class List extends PureComponent {
           showTotal: total => i18n.t`Total ${total} Items`,
         }}
         bordered
-        scroll={{ x: 1250 }}
+        scroll={{ x: 1250, y: 'auto' }}
         columns={columns}
         simple
         rowKey={record => record.id}