fix: display problem in mobile mode

Author: sendya

src/App.vue

@@ -1,44 +1,44 @@
-<template>
-  <a-locale-provider :locale="locale">
-    <div id="app">
-      <router-view/>
-    </div>
-  </a-locale-provider>
-</template>
-<script>
-  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
-  import enquireScreen from '@/utils/device'
-
-  export default {
-    data () {
-      return {
-        locale: zhCN,
-      }
-    },
-    created () {
-      let that = this
-      enquireScreen(deviceType => {
-        // tablet
-        if (deviceType === 0) {
-          that.$store.commit('TOGGLE_DEVICE', 'tablet')
-          that.$store.commit('CLOSE_SIDEBAR', false)
-        }
-        // mobile
-        else if (deviceType === 1) {
-          that.$store.commit('TOGGLE_DEVICE', 'mobile')
-          that.$store.commit('CLOSE_SIDEBAR', false)
-        }
-        else {
-          that.$store.commit('TOGGLE_DEVICE', 'desktop')
-          that.$store.commit('SET_SIDEBAR_TYPE', true)
-        }
-
-      })
-    }
-  }
-</script>
-<style>
-  #app {
-    height: 100%;
-  }
+<template>
+  <a-locale-provider :locale="locale">
+    <div id="app">
+      <router-view/>
+    </div>
+  </a-locale-provider>
+</template>
+<script>
+  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+  import enquireScreen from '@/utils/device'
+
+  export default {
+    data () {
+      return {
+        locale: zhCN,
+      }
+    },
+    created () {
+      let that = this
+      enquireScreen(deviceType => {
+        // tablet
+        if (deviceType === 0) {
+          that.$store.commit('TOGGLE_DEVICE', 'tablet')
+          that.$store.dispatch('setSidebar', false)
+        }
+        // mobile
+        else if (deviceType === 1) {
+          that.$store.commit('TOGGLE_DEVICE', 'mobile')
+          that.$store.dispatch('setSidebar', false)
+        }
+        else {
+          that.$store.commit('TOGGLE_DEVICE', 'desktop')
+          that.$store.dispatch('setSidebar', true)
+        }
+
+      })
+    }
+  }
+</script>
+<style>
+  #app {
+    height: 100%;
+  }
 </style>

src/components/page/GlobalLayout.vue

@@ -102,6 +102,12 @@
         device: state => state.app.device,
       })
     },
+    watch: {
+      sidebarOpened(val) {
+        console.log('watch',val)
+        this.collapsed = !val
+      },
+    },
     created() {
       this.menus = this.mainMenu.find((item) => item.path === '/').children
     },
@@ -144,10 +150,17 @@
         }
       }
 
+      /**
+       * ant-table-wrapper
+       * 覆盖的表格手机模式样式，如果想修改在手机上表格最低宽度，可以在这里改动
+       */
       .ant-table-wrapper {
-        .ant-table-body {
+        .ant-table-content {
           overflow-y: auto;
         }
+        .ant-table-body {
+          min-width: 800px;
+        }
       }
       .sidemenu {
         .ant-header-fixedHeader {

src/config/router.config.js

@@ -13,7 +13,7 @@ export const asyncRouterMap = [
       {
         path: '/dashboard',
         name: 'dashboard',
-        redirect: '/dashboard/analysis',
+        redirect: '/dashboard/workplace',
         component: RouteView,
         meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
         children: [