伸缩菜单

-import UserInfo from './user-info';
 import Editor from './editor';
 import FileUpload from './file-upload';
 import DragFileUpload from './drag-file-upload';
 import IFrame from './iframe';
 
 export default {
-    UserInfo,
     Editor,
     FileUpload,
     DragFileUpload,

+import UserInfo from './user-info';
 import Breadcrumb from './breadcrumbs';
 import Menus from './menus';
 import FilterItem from './layout-filter-item';
@@ -8,6 +9,7 @@ import LayoutTab from './layout-tab';
 import LayoutFilter from './layout-filter';
 
 export default {
+    UserInfo,
     Menus,
     Breadcrumb,
     FilterItem,

@@ -3,8 +3,13 @@
         <div class="layout-logo-left"></div>
         <Submenu :name="purview.id" v-for="purview in purviews" :key="purview.id" >
             <template slot="title">
-                <Icon type="ios-navigate"></Icon>
-                {{purview.menu_name}}
+                <div class="nor">
+                    <Icon type="ios-navigate"></Icon>
+                    {{purview.menu_name}}
+                </div>
+                <div class="collapse">
+                    {{purview.menu_name[0]}}
+                </div>
             </template>
             <Menu-item :name="subPurview.id" v-for="subPurview in purview.sub" :key="subPurview.id">{{subPurview.menu_name}}</Menu-item>
         </Submenu>
@@ -33,6 +38,10 @@ export default {
                 this.openNames = [menu.pMenu.id];
             }
         }
+
+        this.$root.$on('menu-trigger', () => {
+              
+        });
     },
     methods: {
         open(menuId) {
@@ -49,5 +58,102 @@ export default {
 </script>
 
 <style lang="scss">
+$collapseMenuWidth: 200px;
+$collapseWidth: 50px;
+$collapseLeftBorder: 2px;
+@mixin submenuHover {
+    .ivu-menu-submenu-title {
+        margin-left: 0px;
+        border-left: solid 2px #fff;
+        background-color: #3d4350 !important;
+        transition: none;
+
+    }
+}
+.ivu-menu-submenu-title {
+    .collapse {
+        display: none;
+    }
+    .nor {
+        display: inline-block;
+    }
+}
+
+.menu-collapse {
+    .layout-logo-left {
+        background: none;
+        color: #fff;
+        font-size: 18px;
+        text-align: center;
+        &:before {
+            content: 'Yoho!';
+        }
+    }
+    .ivu-menu-submenu {
+        position: relative;
+        margin-left: 2px;
+        
+        &:hover {
+            .ivu-menu {
+                display: block !important;
+            }
+            .nor {
+                display: block;
+            }
+        }
+        &:hover, &.ivu-menu-item-active {
+            @include submenuHover;
+        }
+        .ivu-menu {
+            display: none;
+            position: absolute;
+            top: 49px;
+            left: $collapseWidth - $collapseLeftBorder;
+            z-index: 2;
+            background: #464c5b;
+            width: $collapseMenuWidth;
+            
+        }
+    }
+    .ivu-menu-submenu-title {
+        position: initial !important;
+        padding: 0px !important;
+        width: $collapseWidth - $collapseLeftBorder;
+        height: $collapseWidth - $collapseLeftBorder;
+        justify-content: center;
+        align-items: center;
+        display: flex;
 
+        .ivu-icon-ios-arrow-down {
+            display: none;
+        }
+        .nor {
+            display: none;
+            position: absolute;
+            height: 49px;
+            width: $collapseMenuWidth;
+            left: $collapseWidth - $collapseLeftBorder;
+            top: 0;
+            background-color: #3d4350;
+            z-index: 2;
+            line-height: 49px;
+            padding-left: 43px;
+            color: #fff !important;
+            cursor: initial;
+        }
+        .collapse {
+            width: 30px;
+            height: 30px;
+            margin: 0 auto;
+            display: block;
+            line-height: 30px;
+            text-align: center;
+            font-size: 20px;
+            background-color: #fff;
+            color: #464c5b;
+            border-radius: 50%;
+            overflow: hidden;
+        }
+    }
+}
 </style>

 <template>
     <Row class="layout-header">
-        <Col :span="12" class="brand-title">{{userInfo.name}}</Col>
+        <Col :span="12" class="brand-title">
+            <i class="fa fa-bars" aria-hidden="true" @click="$emit('menu-trigger')"></i>
+            {{userInfo.name}}
+        </Col>
         <Col :span="12" class="shop-info">
             <span class="name">{{userInfo.currentShop.shopName}}</span>
             <span>|</span>
@@ -49,6 +52,13 @@ export default {
     font-size: 14px;
     line-height: 20px;
     padding: 20px;
+
+    .fa-bars {
+        font-size: 20px;
+        vertical-align: middle;
+        margin-right: 10px;
+        cursor: pointer;
+    }
     
     .shop-info {
         text-align: right;

 <template>
     <Row type="flex" class-name="layout">
-        <Col :span="6" class="layout-menu-left">
-            <PurviewMenu></PurviewMenu>
+        <Col :span="6" :class="menuLeftClass" class="layout-menu-left">
+            <PurviewMenu :class="menuClass"></PurviewMenu>
         </Col>
         <Col :span="18" class="layout-menu-right">
-            <UserInfo></UserInfo>
+            <UserInfo @menu-trigger="menuTrigger"></UserInfo>
             <div class="layout-breadcrumb">
                 <Breadcrumbs></Breadcrumbs>
             </div>
@@ -20,7 +20,23 @@
 
 <script>
 export default {
-    name: 'layout'
+    name: 'layout',
+    data() {
+        return {
+            menuClass: {
+                'menu-collapse': false
+            },
+            menuLeftClass: {
+                'left-collapse': false
+            }
+        };
+    },
+    methods: {
+        menuTrigger() {
+            this.menuClass['menu-collapse'] = !this.menuClass['menu-collapse'];
+            this.menuLeftClass['left-collapse'] = !this.menuLeftClass['left-collapse'];
+        }
+    }
 };
 </script>
 
@@ -44,6 +60,11 @@ body {
         background: #464c5b;
         min-width: 170px;
         max-width: 250px;
+
+        &.left-collapse {
+            width: 50px;
+            min-width: initial;
+        }
     }
 
     .layout-menu-right {

@@ -30,12 +30,6 @@ const plugin = {
         // return Promise.reject();
     },
     initPurview(Vue, user) {
-        Vue.$cookie.set('_isLogin', true, {
-            path: '/'
-        });
-        Vue.$cookie.set('shopsId', user.currentShop.id, {
-            path: '/'
-        });
         return userService.purviews().then((purviews) => {
             this.updateUser(Vue, user, purviews);
         });
@@ -96,7 +90,6 @@ const plugin = {
             Vue.prop('user', void 0);
             Vue.prop('isLogin', void 0);
             Vue.prop('purviews', void 0);
-            Vue.$cookie.empty();
             axios.post('/logout');
             Vue.$router.push('/login.html');
         };

@@ -23,10 +23,12 @@ class UserController extends Context {
 
                 this.userService.getShops(user.pid).then(result => {
                     if (result.code === 200) {
+                        let currentShop = _.first(result.data);
+
                         this.syncSession({req, res}, Object.assign(user, {
-                            shops: result.data
+                            shops: result.data,
+                            currentShop: currentShop
                         }), sess);
-                        let currentShop = _.first(result.data);
 
                         return res.json({
                             code: 200,
@@ -65,6 +67,8 @@ class UserController extends Context {
         res.clearCookie('connect.sid', {
             domain: '.yohobuy.com'
         });
+        res.clearCookie('_isLogin');
+        res.clearCookie('shopsId');
         res.clearCookie('yoho-shop');
         res.clearCookie('yoho-shop.sig');
         return res.json({
@@ -76,6 +80,7 @@ class UserController extends Context {
     syncSession(context, user, sess) {
         context.req.session.USER = user;
         context.req.session.LOGIN_UID = user.pid; // pid 为用户名
+
         _.each(sess, (v, k) => {
             context.res.cookie(k, v, {
                 path: '/',
@@ -85,6 +90,12 @@ class UserController extends Context {
                 encode: val => val
             });
         });
+        context.res.cookie('_isLogin', true, {
+            path: '/'
+        });
+        context.res.cookie('shopsId', user.currentShop.id, {
+            path: '/'
+        });
     }
 }