🐛 💄 Fix can't scroll on the table, Update the UI in the dashbord page.

mock/_utils.js

@@ -27,7 +27,6 @@ export function randomAvatar() {
     'https://pbs.twimg.com/profile_images/584098247641300992/N25WgvW_.png',
     'https://d3iw72m71ie81c.cloudfront.net/male-5.jpg',
     'https://images.pexels.com/photos/413723/pexels-photo-413723.jpeg?h=350&auto=compress&cs=tinysrgb',
-    'https://images.pexels.com/photos/61100/pexels-photo-61100.jpeg?h=350&auto=compress&cs=tinysrgb',
     'https://randomuser.me/api/portraits/women/44.jpg',
     'https://randomuser.me/api/portraits/women/68.jpg',
     'https://randomuser.me/api/portraits/women/65.jpg',

mock/route.js

@@ -48,15 +48,6 @@ const database = [
     zhName: 'UI组件',
     icon: 'camera-o',
   },
-  {
-    id: '43',
-    breadcrumbParentId: '4',
-    menuParentId: '4',
-    name: 'DropOption',
-    zhName: 'DropOption',
-    icon: 'bars',
-    route: '/UIElement/dropOption',
-  },
   {
     id: '45',
     breadcrumbParentId: '4',

src/layouts/PrimaryLayout.js

@@ -4,7 +4,7 @@ import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import withRouter from 'umi/withRouter'
 import { connect } from 'dva'
-import { MyLayout, ScrollBar } from 'components'
+import { MyLayout } from 'components'
 import { BackTop, Layout, Drawer } from 'antd'
 import { GlobalFooter } from 'ant-design-pro'
 import { enquireScreen, unenquireScreen } from 'enquire-js'
@@ -138,26 +138,19 @@ class PrimaryLayout extends PureComponent {
             style={{ paddingTop: config.fixedHeader ? 72 : 0 }}
             id="primaryLayout"
           >
-            <ScrollBar
-              option={{
-                // Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
-                suppressScrollX: true,
-              }}
-            >
-              <Header {...headerProps} />
-              <Content className={styles.content}>
-                <Bread routeList={newRouteList} />
-                {hasPermission ? children : <Error />}
-              </Content>
-              <BackTop
-                className={styles.backTop}
-                target={() => document.querySelector('#primaryLayout>div')}
-              />
-              <GlobalFooter
-                className={styles.footer}
-                copyright={config.copyright}
-              />
-            </ScrollBar>
+            <Header {...headerProps} />
+            <Content className={styles.content}>
+              <Bread routeList={newRouteList} />
+              {hasPermission ? children : <Error />}
+            </Content>
+            <BackTop
+              className={styles.backTop}
+              target={() => document.querySelector('#primaryLayout>div')}
+            />
+            <GlobalFooter
+              className={styles.footer}
+              copyright={config.copyright}
+            />
           </div>
         </Layout>
       </Fragment>

src/layouts/PrimaryLayout.less

@@ -1,16 +1,5 @@
 @import '~themes/vars.less';
 
-@media (max-width: 767px) {
-  .content {
-    padding: 12px;
-  }
-
-  .backTop {
-    right: 20px;
-    bottom: 20px;
-  }
-}
-
 .backTop {
   right: 50px;
 
@@ -31,12 +20,15 @@
 .content {
   padding: 24px;
   min-height: ~'calc(100% - 72px)';
+  // overflow-y: scroll;
 }
 
 .container {
   height: 100vh;
   flex: 1;
   width: ~'calc(100% - 256px)';
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
 
 .footer {
@@ -47,3 +39,20 @@
   padding-bottom: 24px;
   min-height: 72px;
 }
+
+@media (max-width: 767px) {
+  .content {
+    padding: 12px;
+  }
+
+  .backTop {
+    right: 20px;
+    bottom: 20px;
+  }
+
+  .container {
+    height: 100vh;
+    flex: 1;
+    width: 100%;
+  }
+}

src/pages/UIElement/editor/index.js

@@ -24,6 +24,9 @@ export default class EditorPage extends React.Component {
     const colProps = {
       lg: 12,
       md: 24,
+      style: {
+        marginBottom: 32,
+      },
     }
     const textareaStyle = {
       minHeight: 496,

src/pages/dashboard/components/user.less

@@ -16,7 +16,8 @@
 
     &::after {
       content: '';
-      background: #c5bec7;
+      background-image: url('./user-background.png');
+      background-size: contain;
       position: absolute;
       width: 100%;
       height: 200px;

src/pages/post/components/List.js

@@ -1,6 +1,8 @@
 import React, { PureComponent } from 'react'
 import { Table, Avatar } from 'antd'
 import { withI18n } from '@lingui/react'
+import { Ellipsis } from 'ant-design-pro'
+import styles from './List.less'
 
 @withI18n()
 class List extends PureComponent {
@@ -10,12 +12,12 @@ class List extends PureComponent {
       {
         title: i18n.t`Image`,
         dataIndex: 'image',
-        width: 100,
         render: text => <Avatar shape="square" src={text} />,
       },
       {
         title: i18n.t`Title`,
         dataIndex: 'title',
+        render: text => <Ellipsis length={30}>{text}</Ellipsis>,
       },
       {
         title: i18n.t`Author`,
@@ -56,7 +58,7 @@ class List extends PureComponent {
             showTotal: total => i18n.t`Total ${total} Items`,
           }}
           bordered
-          scroll={{ x: 1200, y: 'auto' }}
+          className={styles.table}
           columns={columns}
           simple
           rowKey={record => record.id}

src/pages/post/components/List.less

@@ -0,0 +1,7 @@
+.table {
+  :global {
+    .ant-table td {
+      white-space: nowrap;
+    }
+  }
+}

src/pages/user/components/List.js

@@ -4,6 +4,7 @@ import { Table, Modal, Avatar } from 'antd'
 import { DropOption } from 'components'
 import { Trans, withI18n } from '@lingui/react'
 import Link from 'umi/link'
+import styles from './List.less'
 
 const { confirm } = Modal
 
@@ -38,7 +39,8 @@ class List extends PureComponent {
         title: <Trans>Avatar</Trans>,
         dataIndex: 'avatar',
         key: 'avatar',
-        width: 100,
+        width: 72,
+        fixed: 'left',
         render: text => <Avatar style={{ marginLeft: 8 }} src={text} />,
       },
       {
@@ -86,7 +88,7 @@ class List extends PureComponent {
       {
         title: <Trans>Operation</Trans>,
         key: 'operation',
-        width: 100,
+        fixed: 'right',
         render: (text, record) => {
           return (
             <DropOption
@@ -108,8 +110,9 @@ class List extends PureComponent {
           ...tableProps.pagination,
           showTotal: total => i18n.t`Total ${total} Items`,
         }}
+        className={styles.table}
         bordered
-        scroll={{ x: 1250, y: 'auto' }}
+        scroll={{ x: 1600 }}
         columns={columns}
         simple
         rowKey={record => record.id}

src/pages/user/components/List.less

@@ -0,0 +1,7 @@
+.table {
+  :global {
+    .ant-table td {
+      white-space: nowrap;
+    }
+  }
+}

src/pages/user/components/Modal.js

@@ -139,7 +139,6 @@ class UserModal extends PureComponent {
 }
 
 UserModal.propTypes = {
-  form: PropTypes.object.isRequired,
   type: PropTypes.string,
   item: PropTypes.object,
   onOk: PropTypes.func,

src/utils/config.js

@@ -4,7 +4,7 @@ module.exports = {
   copyright: 'Ant Design Admin  © 2018 zuiidea',
   logoPath: '/logo.svg',
   apiPrefix: '/api/v1',
-  fixedHeader: true, // sticky primary layout header
+  // fixedHeader: true, // sticky primary layout header
 
   /* Layout configuration, specify which layout to use for route. */
   layouts: [