fix some style, remove svg config.

.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: [
     [

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": {

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}

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 {

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, {

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;
 }

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,
 }

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;
     }
   }
 

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,
 }

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}

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}