fix: merge mixin, fix user-layout 320px css

Author: sendya

src/components/layouts/UserLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="userLayout" class="user-layout-wrapper">
+  <div id="userLayout" :class="['user-layout-wrapper', device]">
     <div class="container">
       <div class="top">
         <div class="header">
@@ -31,10 +31,12 @@
 
 <script>
   import RouteView from "@/components/layouts/RouteView"
+  import { mixinDevice } from '@/utils/mixin.js'
 
   export default {
     name: "UserLayout",
     components: { RouteView },
+    mixins: [mixinDevice],
     data () {
       return {}
     },
@@ -51,6 +53,15 @@
   #userLayout.user-layout-wrapper {
     height: 100%;
 
+    &.mobile {
+      .container {
+        .main {
+          max-width: 368px;
+          width: 98%;
+        }
+      }
+    }
+
     .container {
       width: 100%;
       min-height: 100%;
@@ -105,6 +116,7 @@
       }
 
       .main {
+        min-width: 260px;
         width: 368px;
         margin: 0 auto;
       }

src/components/menu/SideMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <a-layout-sider
-    :class="['sider', device === 'desktop' ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
+    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
     width="256px" 
     :collapsible="collapsible"
     v-model="collapsed" 
@@ -21,11 +21,12 @@
   import ALayoutSider from "ant-design-vue/es/layout/Sider"
   import Logo from '../tools/Logo'
   import SMenu from './index'
-  import { mapState } from 'vuex'
+  import { mixin, mixinDevice } from '@/utils/mixin.js'
 
   export default {
     name: "SideMenu",
     components: { ALayoutSider, Logo, SMenu },
+    mixins: [mixin, mixinDevice],
     props: {
       mode: {
         type: String,
@@ -52,15 +53,6 @@
         required: true
       }
     },
-    created () {
-
-    },
-    computed: {
-      ...mapState({
-        device: state => state.app.device,
-        fixSiderbar: state => state.app.fixSiderbar,
-      })
-    },
     methods: {
       onSelect (obj) {
         this.$emit('menuSelect', obj)

src/components/page/GlobalHeader.vue

@@ -43,21 +43,26 @@
   import SMenu from '../menu/'
   import Logo from '../tools/Logo'
 
-  import { mapState } from 'vuex'
+  import { mixin } from '@/utils/mixin.js'
 
   export default {
-    name: "LayoutHeader",
+    name: "GlobalHeader",
     components: {
       UserMenu,
       SMenu,
       Logo
     },
+    mixins: [mixin],
     props: {
       mode: {
         type: String,
         // sidemenu, topmenu
         default: 'sidemenu'
       },
+      menus: {
+        type: Array,
+        required: true
+      },
       theme: {
         type: String,
         required: false,
@@ -76,24 +81,12 @@
     },
     data() {
       return {
-        menus: [],
         headerBarFixed: false,
       }
     },
     mounted () {
       window.addEventListener('scroll', this.handleScroll)
     },
-    created() {
-      this.menus = this.mainMenu.find((item) => item.path === '/').children
-    },
-    computed: {
-      ...mapState({
-        mainMenu: state => state.permission.addRouters,
-        sidebarOpened: state => state.app.sidebar.opened,
-        fixedHeader: state => state.app.fixedHeader,
-        autoHideHeader: state => state.app.autoHideHeader,
-      }),
-    },
     methods: {
       handleScroll () {
         if (this.autoHideHeader) {

src/components/page/GlobalLayout.vue

@@ -4,7 +4,7 @@
     <template v-if="layoutMode === 'sidemenu'">
       <a-drawer
         v-if="device === 'mobile'"
-        :wrapClassName="'drawer-sider ' + theme"
+        :wrapClassName="'drawer-sider ' + navTheme"
         placement="left"
         @close="() => this.collapsed = false"
         :closable="false"
@@ -14,24 +14,24 @@
           mode="inline"
           :menus="menus"
           @menuSelect="menuSelect"
-          :theme="theme"
+          :theme="navTheme"
           :collapsed="false"
           :collapsible="true"></side-menu>
       </a-drawer>
 
       <side-menu
         v-else
+        mode="inline"
         :menus="menus"
-        :theme="theme"
-        :mode="menuMode"
+        :theme="navTheme"
         :collapsed="collapsed"
         :collapsible="true"></side-menu>
     </template>
     <!-- 下次优化这些代码 -->
     <template v-else>
       <a-drawer
         v-if="device === 'mobile'"
-        :wrapClassName="'drawer-sider ' + theme"
+        :wrapClassName="'drawer-sider ' + navTheme"
         placement="left"
         @close="() => this.collapsed = false"
         :closable="false"
@@ -41,15 +41,22 @@
           mode="inline"
           :menus="menus"
           @menuSelect="menuSelect"
-          :theme="theme"
+          :theme="navTheme"
           :collapsed="false"
           :collapsible="true"></side-menu>
       </a-drawer>
     </template>
 
     <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: fixSiderbar && device === 'desktop' ? `${sidebarOpened ? 256 : 80}px` : '0' }">
       <!-- layout header -->
-      <global-header :mode="layoutMode" :theme="theme" :collapsed="collapsed" :device="device" @toggle="toggle"/>
+      <global-header 
+        :mode="layoutMode" 
+        :menus="menus" 
+        :theme="navTheme" 
+        :collapsed="collapsed" 
+        :device="device" 
+        @toggle="toggle"
+      />
 
       <!-- layout content -->
       <a-layout-content :style="{ margin: '24px 24px 0', height: '100%', paddingTop: fixedHeader ? '64px' : '0' }">
@@ -71,41 +78,33 @@
   import GlobalHeader from '@/components/page/GlobalHeader'
   import GlobalFooter from '@/components/page/GlobalFooter'
   import SettingDrawer from '@/components/setting/SettingDrawer'
-  import { triggerResize } from '@/utils/util'
+  import { triggerWindowResizeEvent } from '@/utils/util'
   import { mapState, mapActions } from 'vuex'
+  import { mixin, mixinDevice } from '@/utils/mixin.js'
+
   export default {
-    name: "BasicLayout",
+    name: "GlobalLayout",
     components: {
       SideMenu,
       GlobalHeader,
       GlobalFooter,
       SettingDrawer
     },
+    mixins: [mixin, mixinDevice],
     data () {
       return {
-        // light, dark
-        menuTheme: 'light',
-        // inline, horizontal
-        menuMode: 'inline',
         collapsed: false,
         menus: []
       }
     },
     computed: {
       ...mapState({
+        // 主路由
         mainMenu: state => state.permission.addRouters,
-        layoutMode: state => state.app.layout,
-        sidebarOpened: state => state.app.sidebar.opened,
-        fixedHeader: state => state.app.fixedHeader,
-        fixSiderbar: state => state.app.fixSiderbar,
-        contentWidth: state => state.app.contentWidth,
-        theme: state => state.app.theme,
-        device: state => state.app.device,
       })
     },
     watch: {
       sidebarOpened(val) {
-        console.log('watch',val)
         this.collapsed = !val
       },
     },
@@ -116,11 +115,11 @@
       ...mapActions(['setSidebar']),
       toggle() {
         this.collapsed = !this.collapsed
-        triggerResize()
         this.setSidebar(!this.collapsed)
+        triggerWindowResizeEvent()
       },
       menuSelect() {
-        if (this.device !== 'desktop') {
+        if (!this.isDesktop()) {
           this.collapsed = false
         }
       }

src/components/setting/SettingDrawer.vue

@@ -92,7 +92,7 @@
                   <template slot='title'>
                     该设定仅 [顶部栏导航] 时有效
                   </template>
-                  <a-select  size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
+                  <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">
                     <a-select-option value="Fixed">固定</a-select-option>
                     <a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>
                   </a-select>
@@ -160,39 +160,25 @@
   import SettingItem from '@/components/setting/SettingItem'
   import config from '@/defaultSettings'
   import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'
-  import { mapState } from 'vuex'
+  import { mixin, mixinDevice } from '@/utils/mixin.js'
 
   export default {
     components: {
       DetailList,
       SettingItem
     },
+    mixins: [mixin, mixinDevice],
     data() {
       return {
         visible: true,
         colorList,
       }
     },
-    computed: {
-      ...mapState({
-        navTheme: state => state.app.theme,
-        layoutMode: state => state.app.layout,
-        primaryColor: state => state.app.color,
-        colorWeak: state => state.app.weak,
-        fixedHeader: state => state.app.fixedHeader,
-        fixSiderbar: state => state.app.fixSiderbar,
-        autoHideHeader: state => state.app.autoHideHeader,
-        contentWidth: state => state.app.contentWidth,
-      }),
-    },
     watch: {
 
     },
     mounted () {
       const vm = this
-      /*this.$nextTick(() => {
-        vm.visible = false
-      })*/
       setTimeout(() => {
         vm.visible = false
       }, 16)

src/defaultSettings.js

@@ -17,7 +17,7 @@ export default {
   primaryColor: '#1890FF', // primary color of ant design
   navTheme: 'dark', // theme for nav menu
   layout: 'sidemenu', // nav menu position: sidemenu or topmenu
-  contentWidth: 'Fluid', // layout of content: Fluid or Fixed, only works when layout is topmenu
+  contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
   fixedHeader: false, // sticky header
   fixSiderbar: false, // sticky siderbar
   autoHideHeader: false, //  auto hide header

src/utils/mixin.js

@@ -0,0 +1,39 @@
+// import Vue from 'vue'
+import { mapState } from "vuex";
+
+// const mixinsComputed = Vue.config.optionMergeStrategies.computed
+// const mixinsMethods = Vue.config.optionMergeStrategies.methods
+
+const mixin = {
+  computed: {
+    ...mapState({
+      layoutMode: state => state.app.layout,
+      navTheme: state => state.app.theme,
+      primaryColor: state => state.app.color,
+      colorWeak: state => state.app.weak,
+      fixedHeader: state => state.app.fixedHeader,
+      fixSiderbar: state => state.app.fixSiderbar,
+      contentWidth: state => state.app.contentWidth,
+      autoHideHeader: state => state.app.autoHideHeader,
+      sidebarOpened: state => state.app.sidebarOpened
+    })
+  }
+}
+
+const mixinDevice = {
+  computed: {
+    ...mapState({
+      device: state => state.app.device,
+    })
+  },
+  methods: {
+    isMobile () {
+      return this.device === 'mobile'
+    },
+    isDesktop () {
+      return this.device === 'desktop'
+    }
+  }
+}
+
+export { mixin, mixinDevice }

src/utils/util.js

@@ -13,7 +13,7 @@ export function welcome() {
 /**
  * 触发 window.resize
  */
-export function triggerResize() {
+export function triggerWindowResizeEvent() {
   let event = document.createEvent('HTMLEvents')
   event.initEvent('resize', true, true)
   event.eventType = 'message'