@lambo-design/pro-layout 1.0.0-beta.21 → 1.0.0-beta.210

package/src/index.vue

@@ -35,7 +35,7 @@ import LamboProLayoutTabs from './components/pro-layout-tabs'
 import Bus from '@lambo-design/shared/utils/bus'
 import config from "@lambo-design/shared/config/config";
 import {
-  getTagNavListFromLocalstorage, routeEqual, tagExists,
+  getTagNavListFromLocalstorage, isOpenBlank, routeEqual, tagExists,
 } from "@lambo-design/shared/utils/platform";
 import {deepCopy} from "@lambo-design/shared/utils/assist";
 export default {
@@ -47,7 +47,10 @@ export default {
           systemName: '后台管理系统',
           systemLogo: '',
           layoutSize: '',
+          acceptAppId: '',
           tabNum: 8,
+          topMenu: 4,
+          rightTopOptButtonList: []
         }
       }
     },
@@ -63,6 +66,14 @@ export default {
       type: Array,
       default: () => []
     },
+    historyMenuList: {
+      type: Array,
+      default: () => []
+    },
+    collectMenuList: {
+      type: Array,
+      default: () => []
+    },
     homeRouter: {
       type: Object,
       default: () => {
@@ -85,12 +96,14 @@ export default {
   },
   computed: {
     allData(){
-      const { systemInfo, userInfo, navList, menuList, homeRouter} = this;
+      const { systemInfo, userInfo, navList, menuList, historyMenuList, collectMenuList, homeRouter} = this;
       return {
         systemInfo,
         userInfo,
         navList,
         menuList,
+        historyMenuList,
+        collectMenuList,
         homeRouter
       }
     },
@@ -132,6 +145,18 @@ export default {
       Bus.$on('tag-list',(data,current)=>{
         this.changeTabs(data,current)
       });
+      Bus.$on('delete-history-menu',(data) => {
+        this.deleteHistoryMenu(data)
+      })
+      Bus.$on('delete-collect-menu',(data) => {
+        this.deleteCollectMenu(data)
+      })
+      Bus.$on('toggle-collect-menu',(actionType,data) => {
+        this.toggleCollectMenu(actionType,data)
+      })
+      Bus.$on('click-logo',()=>{
+        this.clickLogo();
+      })
     },
     destroyListener(){
       Bus.$off('trigger-change')
@@ -139,12 +164,25 @@ export default {
       Bus.$off('user-action')
       Bus.$off('menu-click')
       Bus.$off('tag-list')
+      Bus.$off('delete-history-menu')
+      Bus.$off('delete-collect-menu')
+      Bus.$off('toggle-collect-menu')
+      Bus.$off('click-logo')
     },
     initEmit(){
+      //在这里改this.menuList
       Bus.$emit('system-info',this.systemInfo)
       Bus.$emit('user-info',this.userInfo)
       Bus.$emit('nav-list',this.navList)
-      Bus.$emit('menu-list',this.menuList)
+      this.menuList.map(item => {
+        // 如果 uri 不以 '/' 开头，添加 '/'
+        if (item.uri&&!item.uri.startsWith('/')&&!item.uri.startsWith('http')) {
+          item.uri = '/' + item.uri;
+        }
+      });
+      Bus.$emit('menu-list',this.menuList);
+      Bus.$emit('history-menu-list',this.historyMenuList);
+      Bus.$emit('collect-menu-list',this.collectMenuList);
     },
     initTags(){
       let tagList = getTagNavListFromLocalstorage(config.routerBase + '-tagNavList');
@@ -173,15 +211,18 @@ export default {
     },
     menuClick(name, item){
       if (!item) {
-        let res = this.menuList.filter(item => item.name == name);
+        let res = this.menuList.filter(item => item.name == name );
         if (res && res.length > 0) {
           item = res[0];
         }
       }
-      sessionStorage.setItem('activeName',name);
+      if (!isOpenBlank(item)) {
+        sessionStorage.setItem('activeName',name);
+      }
       this.$emit('menu-click', name, item)
     },
     changeTabs(data,current){
+      // data = data.filter(item => item.name === current);
       this.$emit('change-tabs',data,current)
     },
     openMenuInTabs(menu){
@@ -202,15 +243,28 @@ export default {
           tagList.push(menuItem);
         } else {
           let tag = tagList.filter(item => item.name == name)[0];
-          if (!routeEqual(tag,menuItem)) {
+          if (!routeEqual(tag,menuItem) && 'home' != name) {
             let res = tagList.filter(item => item.name !== name);
             tag = Object.assign(tag, menu);
             res.push(tag);
             tagList = deepCopy(res);
           }
         }
+
         Bus.$emit('tag-list', tagList, name)
       }
+    },
+    deleteHistoryMenu(data){
+      this.$emit('delete-history-menu',data);
+    },
+    deleteCollectMenu(data){
+      this.$emit('delete-collect-menu',data);
+    },
+    toggleCollectMenu(actionType,data){
+      this.$emit('toggle-collect-menu',actionType,data);
+    },
+    clickLogo(){
+      this.$emit('click-logo')
     }
   },
   mounted(){
@@ -237,15 +291,15 @@ export default {
   }
   .pro-layout-sider{
     overflow: hidden;
-    /deep/.ivu-layout-sider-children{
-      height: ~"calc(100vh - 65px)";
+    .ivu-layout-sider-children{
+      height: calc(100vh - 65px);
       overflow-y: scroll;
       margin-right: -18px;
     }
   }
   .pro-layout-content{
     .pro-layout-content-layout{
-      height: ~"calc(100vh - 65px)";
+      height: ~"calc(100vh - 53px)";
       .pro-layout-page{
         overflow: hidden;
         color: var(--text-color,@_text-color);
@@ -261,13 +315,15 @@ export default {
         .trigger-box{
           .sider-trigger-a{
             margin-top: 5px;
+            width: 64px;
+            height: 50px;
           }
         }
         .logo-box{
           .pro-layout-logo-wrapper{
             .logo{
               height: 45px;
-              margin-top: 5px;
+              margin-top: 14px;
             }
             .divider{
               height: 26px;
@@ -285,7 +341,11 @@ export default {
         }
       }
     }
-
+    .pro-layout-sider{
+      .ivu-layout-sider-children{
+        height: calc(100vh - 50px);
+      }
+    }
   }
 }
-</style>
+</style>

package/src/styles/other-menu.less

@@ -0,0 +1,168 @@
+@import "@lambo-design/core/src/styles/default.less";
+.other-menu {
+  width: 99%;
+  // border-top: 3px solid @_layout-sider-background;
+  position: absolute;
+  bottom: 0;
+  z-index: 1000;
+  background: var(--menu-dark-active-bg ,@_menu-dark-active-bg);
+
+
+
+  &.other-menu-collapsed {
+    .other-menu-item {
+      border-top: 2px solid #000000;
+      width: 100%;
+
+      &:hover {
+        color: #ffffff;
+        // background: #061629;
+      }
+
+      .ivu-tooltip {
+        width: 100%;
+
+        .ivu-tooltip-rel {
+          width: 100%;
+        }
+
+        .ivu-tooltip-popper .ivu-tooltip-content {
+          .ivu-tooltip-arrow {
+            border-right-color: #fff;
+          }
+
+          .ivu-tooltip-inner {
+            background: #fff;
+            color: #495060;
+          }
+        }
+      }
+
+      .other-menu-icon {
+        font-size: 20px;
+      }
+
+      .other-menu-title {
+        display: none;
+      }
+    }
+
+  }
+
+
+  .other-menu-item {
+    color: var(--menu-dark-subsidiary-color, @_menu-dark-subsidiary-color);
+    text-align: center;
+    line-height: 50px;
+    height: 48.6px;
+    width: 49.5%;
+    display: inline-block;
+    border: 1px solid #000000;
+    cursor: pointer;
+
+    &:hover {
+      color: #ffffff;
+      background: var(--primary-color,@_primary-color);
+    }
+
+  }
+}
+
+
+.other-menu-drawer-wrap {
+
+
+  .ivu-drawer {
+    left: 220px;
+    height: calc(100% - 110px);
+    bottom: 0;
+    top: auto;
+    overflow: hidden;
+    .other-menu-history {
+
+      .other-menu-history-item {
+        width: 100%;
+        height: 35px;
+        line-height: 35px;
+        position: relative;
+
+        .delete {
+          display: none;
+          position: absolute;
+          right: 0px;
+          top: 0px;
+          cursor: pointer;
+          font-size: large;
+        }
+
+        &:hover {
+          .content {
+            cursor: pointer;
+            height: 38px;
+            font-weight: bold;
+            color: var(--primary-color,@_primary-color);
+          }
+
+          .delete {
+            display: inline;
+          }
+        }
+      }
+    }
+
+    .other-menu-collect {
+      .other-menu-collect-item {
+        //display: inline-block;
+        //margin: 8px;
+        //position: relative;
+        width: 100%;
+        height: 35px;
+        line-height: 35px;
+        position: relative;
+        .delete {
+          display: none;
+          position: absolute;
+          right: 0px;
+          top: 0px;
+          z-index: 100;
+          cursor: pointer;
+          font-size: large;
+        }
+
+        &:hover {
+          .content {
+            cursor: pointer;
+            color: var(--primary-color,@_primary-color);
+
+            .ivu-tooltip {
+              .ivu-tooltip-rel {
+                .ivu-icon {
+                  font-size: 43px;
+                }
+              }
+            }
+          }
+
+          .delete {
+            display: inline;
+          }
+        }
+        overflow: hidden;
+
+      }
+
+    }
+  }
+
+
+}
+
+.other-menu-drawer-wrap-collapsed {
+  .ivu-drawer {
+    left: 65px;
+    height: calc(100% - 110px);
+    bottom: 0;
+    top: auto;
+
+  }
+}

package/src/utils/menuItem.js

@@ -5,6 +5,12 @@ export default {
       default: () => {
       }
     },
+    activeItem: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
     isShow: {
       type: Boolean,
       default: true