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

src/components/layouts/UserLayout.vue

 <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

 <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,16 +14,16 @@
           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>
@@ -31,7 +31,7 @@
     <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,7 +41,7 @@
           mode="inline"
           :menus="menus"
           @menuSelect="menuSelect"
-          :theme="theme"
+          :theme="navTheme"
           :collapsed="false"
           :collapsible="true"></side-menu>
       </a-drawer>
@@ -49,7 +49,14 @@
 
     <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

@@ -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

+// 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 }
\ No newline at end of file

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'

src/views/account/settings/Custom.vue

 <script>
-  import { mapState } from "vuex"
   import { colorList } from '@/components/tools/setting'
   import ASwitch from 'ant-design-vue/es/switch'
   import AList from "ant-design-vue/es/list"
   import AListItem from "ant-design-vue/es/list/Item"
+  import { mixin } from '@/utils/mixin.js'
 
   const Meta = AListItem.Meta
 
@@ -14,16 +14,11 @@
       ASwitch,
       Meta
     },
+    mixins: [mixin],
     data () {
       return {
       }
     },
-    computed: {
-      ...mapState({
-        theme: state => state.app.theme,
-        color: state => state.app.color
-      })
-    },
     filters: {
       themeFilter(theme) {
         const themeMap = {
@@ -58,14 +53,14 @@
               </span>
             </Meta>
             <div slot="actions">
-              <ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.theme === 'dark' && true || false} onChange={this.onChange} />
+              <ASwitch checkedChildren="暗色" unCheckedChildren="白色" defaultChecked={this.navTheme === 'dark' && true || false} onChange={this.onChange} />
             </div>
           </AListItem>
           <AListItem>
             <Meta>
               <a slot="title">主题色</a>
               <span slot="description">
-                页面风格配色： <a domPropsInnerHTML={ this.colorFilter(this.color) }/>
+                页面风格配色： <a domPropsInnerHTML={ this.colorFilter(this.primaryColor) }/>
               </span>
             </Meta>
           </AListItem>

src/views/account/settings/Index.vue

@@ -51,13 +51,14 @@
 <script>
   import PageLayout from '@/components/page/PageLayout'
   import RouteView from "@/components/layouts/RouteView"
-  import { mapState } from 'vuex'
+  import { mixinDevice } from '@/utils/mixin.js'
 
   export default {
     components: {
       RouteView,
       PageLayout
     },
+    mixins: [mixinDevice],
     data () {
       return {
         // horizontal  inline
@@ -87,11 +88,6 @@
         pageTitle: ''
       }
     },
-    computed: {
-      ...mapState({
-        device: state => state.app.device,
-      })
-    },
     created () {
       this.updateMenu()
     },
@@ -121,9 +117,9 @@
         border-right: unset;
         border-bottom: 1px solid #e8e8e8;
         width: 100%;
-        height: 48px;
-        overflow-x: hidden;
-        overflow-y: auto;
+        height: 50px;
+        overflow-x: auto;
+        overflow-y: scroll;
       }
       .account-settings-info-right {
         padding: 20px 40px;

src/views/profile/advanced/Advanced.vue

@@ -30,7 +30,7 @@
     </template>
 
     <a-card :bordered="false" title="流程进度">
-      <a-steps :direction="device==='mobile' && 'vertical' || 'horizontal'" :current="1" progressDot>
+      <a-steps :direction="isMobile() && 'vertical' || 'horizontal'" :current="1" progressDot>
         <a-step title="创建项目">
         </a-step>
         <a-step title="部门初审">
@@ -133,7 +133,7 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+  import { mixinDevice } from '@/utils/mixin.js'
   import PageLayout from '@/components/page/PageLayout'
   import DetailList from '@/components/tools/DetailList'
 
@@ -146,6 +146,7 @@
       DetailList,
       DetailListItem
     },
+    mixins: [mixinDevice],
     data () {
       return {
         tabList: [
@@ -295,12 +296,7 @@
         }
         return statusTypeMap[type]
       }
-    },
-    computed: {
-      ...mapState({
-        device: state => state.app.device,
-      })
-    },
+    }
   }
 </script>
 

src/views/result/Success.vue

@@ -22,7 +22,7 @@
             2016-12-12 ~ 2017-12-12
           </a-col>
         </a-row>
-        <a-steps :current="1" :direction="device === 'mobile' && directionType.vertical || directionType.horizontal" progressDot>
+        <a-steps :current="1" :direction="isMobile() && directionType.vertical || directionType.horizontal" progressDot>
           <a-step >
             <span style="font-size: 14px" slot="title">创建项目</span>
             <template slot="description">
@@ -61,7 +61,7 @@
 
 <script>
   import Result from './Result'
-  import { mapState } from 'vuex'
+  import { mixinDevice } from '@/utils/mixin.js'
 
   const directionType = {
     horizontal: 'horizontal',
@@ -73,6 +73,7 @@
     components: {
       Result
     },
+    mixins: [mixinDevice],
     data () {
       return {
         title: '提交成功',
@@ -82,11 +83,6 @@
           ' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。',
         directionType
       }
-    },
-    computed: {
-      ...mapState({
-        device: state => state.app.device,
-      })
     }
   }
 </script>

src/views/user/Register.vue

@@ -90,7 +90,7 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+  import { mixinDevice } from '@/utils/mixin.js'
   import { getSmsCaptcha } from '@/api/login'
 
   const levelNames = {
@@ -115,6 +115,7 @@
     name: "Register",
     components: {
     },
+    mixins: [mixinDevice],
     data() {
       return {
         form: null,
@@ -131,9 +132,6 @@
       }
     },
     computed: {
-      ...mapState({
-        isMobile: state => state.app.device === 'mobile',
-      }),
       passwordLevelClass () {
         return levelClass[this.state.passwordLevel]
       },
@@ -198,7 +196,7 @@
       },
 
       handlePasswordInputClick () {
-        if (!this.isMobile) {
+        if (!this.isMobile()) {
           this.state.passwordLevelChecked = true
           return;
         }

vue.config.js

@@ -52,12 +52,14 @@ module.exports = {
   devServer: {
     proxy: {
       '/api': {
-        target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
+        // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
+        target: 'https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro',
         ws: false,
         changeOrigin: true
       },
       '/gateway': {
-        target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
+        target: 'https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro',
+        ws: false,
         changeOrigin: true,
         pathRewrite: {
           '^/gateway': '/api'