fix: #51 sidebar collapsed padding

src/App.vue

@@ -9,18 +9,15 @@
 <script>
   import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
   import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
-  import { version } from 'ant-design-vue'
 
   export default {
     data () {
       return {
-        locale: zhCN,
-        version
+        locale: zhCN
       }
     },
     mounted () {
       const { $store } = this
-      console.log('use Ant-Design Of Vue:', version)
       deviceEnquire(deviceType => {
 
         switch (deviceType) {
@@ -29,14 +26,13 @@
             $store.dispatch('setSidebar', true)
             break
           case DEVICE_TYPE.TABLET:
-            console.log('tablet')
-            $store.dispatch('ToggleDevice', 'tablet')
+            $store.commit('TOGGLE_DEVICE', 'tablet')
             $store.dispatch('setSidebar', false)
             break
           case DEVICE_TYPE.MOBILE:
           default:
             $store.commit('TOGGLE_DEVICE', 'mobile')
-            $store.dispatch('setSidebar', false)
+            $store.dispatch('setSidebar', true)
             break
         }
         console.log('deviceType', deviceType)

src/components/page/GlobalLayout.vue

@@ -47,7 +47,7 @@
       </a-drawer>
     </template>
 
-    <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 256 : 80}px` : '0', minHeight: '100vh' }">
+    <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
       <!-- layout header -->
       <global-header
         :mode="layoutMode"
@@ -64,7 +64,7 @@
       </a-layout-content>
 
       <!-- layout footer -->
-      <a-layout-footer style="padding: 0px">
+      <a-layout-footer style="padding: 0">
         <global-footer />
       </a-layout-footer>
       <setting-drawer></setting-drawer>
@@ -100,7 +100,16 @@
       ...mapState({
         // 主路由
         mainMenu: state => state.permission.addRouters,
-      })
+      }),
+      contentPaddingLeft () {
+        if(!this.fixSidebar || this.isMobile()){
+          return '0'
+        }
+        if(this.sidebarOpened){
+          return '256px'
+        }
+        return '80px'
+      }
     },
     watch: {
       sidebarOpened(val) {
@@ -110,7 +119,6 @@
     },
     created() {
       this.menus = this.mainMenu.find((item) => item.path === '/').children
-      console.log('created/sidebarOpened', this.sidebarOpened)
       this.collapsed = !this.sidebarOpened
     },
     methods: {
@@ -120,6 +128,16 @@
         this.setSidebar(!this.collapsed)
         triggerWindowResizeEvent()
       },
+      paddingCalc () {
+        let left = ''
+        if (this.sidebarOpened) {
+          left = this.isDesktop() ? '256px' : '80px'
+        } else {
+          left = this.isMobile() && '0' || (this.fixSidebar && '80px' || '0')
+        }
+        console.log('left', left)
+        return left
+      },
       menuSelect() {
         if (!this.isDesktop()) {
           this.collapsed = false

src/utils/mixin.js

@@ -14,6 +14,7 @@ const mixin = {
       colorWeak: state => state.app.weak,
       fixedHeader: state => state.app.fixedHeader,
       fixSiderbar: state => state.app.fixSiderbar,
+      fixSidebar: state => state.app.fixSiderbar,
       contentWidth: state => state.app.contentWidth,
       autoHideHeader: state => state.app.autoHideHeader,
       sidebarOpened: state => state.app.sidebar