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

package/package.json

@@ -1,18 +1,17 @@
-{
-  "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.2",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    
-  },
-  "author": "lambo",
-  "license": "ISC",
-  "publishConfig": {
-    "access": "public"
-  },
-  "devDependencies": {
-    "@lambo-design/core": "workspace:*",
-    "@lambo-design/shared": "workspace:*"
-  }
-}
+{
+  "name": "@lambo-design/pro-layout",
+  "version": "1.0.0-beta.21",
+  "description": "",
+  "main": "index.js",
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@lambo-design/core": "4.7.1-beta.37",
+    "@lambo-design/shared": "1.0.0-beta.16"
+  },
+  "scripts": {}
+}

package/src/components/pro-layout-header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pro-layout-header">
+  <div class="pro-layout-header-wrapper">
     <div class="trigger-box">
       <LamboProTrigger></LamboProTrigger>
     </div>
@@ -32,13 +32,12 @@ export default {
 </script>
 
 <style scoped lang="less">
-.pro-layout-header{
+.pro-layout-header-wrapper{
   width: auto;
   height: 64px;
   .trigger-box{
     float: left;
     height: inherit;
-    border: 1px solid #000000;
   }
   .logo-box{
     float: left;

package/src/components/pro-layout-logo.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="pro-layout-logo">
-    <div class="logo"></div>
+  <div class="pro-layout-logo-wrapper">
+    <div class="logo" :style="logoStyle"></div>
     <div class="divider"></div>
     <div class="system-name">{{systemName}}</div>
   </div>
@@ -12,20 +12,34 @@ export default {
   name: "pro-layout-logo",
   data(){
     return {
+      systemInfo: {},
       systemName: '后台管理系统'
     }
   },
+  computed:{
+    logoStyle(){
+      if (this.systemInfo && this.systemInfo.systemLogo) {
+        return 'background: url("' + this.systemInfo.systemLogo + '") no-repeat;background-size: 100%;'
+      }
+      return '';
+    }
+  },
   methods: {
     initListener(){
-      Bus.$on('system-name-change',(data)=>{
-        this.systemNameChange(data)
+      Bus.$on('system-info',(data)=>{
+        this.initSystem(data)
       });
     },
     destroyListener(){
-      Bus.$off('system-name-change')
+      Bus.$off('system-info')
     },
-    systemNameChange(data){
-      this.systemName = data;
+    initSystem(data){
+      if (data) {
+        this.systemInfo = data;
+        if (data.systemName) {
+          this.systemName = data.systemName;
+        }
+      }
     }
   },
   created(){
@@ -38,9 +52,8 @@ export default {
 </script>
 
 <style scoped lang="less">
-.pro-layout-logo{
+.pro-layout-logo-wrapper{
   overflow: hidden;
-  border-bottom: 1px solid #000000;
   .logo{
     width: 150px;
     height: 55px;
@@ -48,7 +61,6 @@ export default {
     background-size: 100%;
     float: left;
     margin-top: 8px;
-    border-bottom: 1px solid #000000;
   }
   .divider{
     height: 33px;

package/src/components/pro-layout-nav.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pro-layout-nav">
+  <div class="pro-layout-nav-wrapper">
     <Menu ref="topNav" mode="horizontal" theme="dark" :active-name="activeName" @on-select="selectApp">
       <MenuItem :name="item.appId" v-for="item in topMenList" :key="item.appId">
         {{item.name}}
@@ -104,7 +104,7 @@ export default {
 
 <style scoped lang="less">
 @import '@lambo-design/core/src/styles/default.less';
-.pro-layout-nav{
+.pro-layout-nav-wrapper{
   .ivu-menu{
     .ivu-menu-item{
       &:hover{

package/src/components/pro-layout-sider-collapsed-menu.vue

@@ -1,13 +1,13 @@
 <template>
   <Dropdown ref="dropdown" :class="hideTitle ? '' : 'collased-menu-dropdown'" :placement="placement"
-            :transfer="hideTitle" @on-click="handleClick">
-    <a :style="{textAlign: !hideTitle ? 'left' : ''}" class="drop-menu-a" type="text"
+            :transfer="true" @on-click="handleClick">
+    <a :style="{textAlign: !hideTitle ? 'left' : '',padding: !hideTitle ? '0px' : ''}" class="drop-menu-a" type="text"
        @mouseover="handleMousemove($event, children)">
-      <ProLayoutSiderIcon :icon-type="parentItem.meta.icon"></ProLayoutSiderIcon>
+      <ProLayoutSiderIcon :icon-type="parentItem.meta.icon" :icon-size="hideTitle ? 26 : 14"></ProLayoutSiderIcon>
       <span v-if="!hideTitle" class="menu-title">{{ showTitle(parentItem) }}</span>
-      <Icon v-if="!hideTitle" :size="20" style="float: right;" type="ios-arrow-forward"/>
+      <Icon v-if="!hideTitle" :size="16"type="ios-arrow-forward"/>
     </a>
-    <DropdownMenu ref="dropdown" slot="list">
+    <DropdownMenu ref="dropdown" slot="list" style="width: auto">
       <template v-for="child in children">
         <ProLayoutSiderCollapsedMenu v-if="showChildren(child)" :key="`drop-${child.name}`"
                         :parent-item="child">
@@ -69,26 +69,23 @@ export default {
   list-style: none;
   cursor: pointer;
   transition: background 0.2s ease-in-out;
+  display: block;
   &:hover{
     color: var(--heading-color, @_heading-color);
     background: rgba(26,26,26,0.05);
   }
-  a.drop-menu-a{
-    display: inline-block;
-    width: 100%;
-    font-weight: normal;
-    color: var(--text-color, @_text-color);
-    &:hover{
-      color: var(--heading-color, @_heading-color);
+  /deep/.ivu-dropdown-rel{
+    a.drop-menu-a{
+      display: inline-block;
+      width: 100%;
+      font-weight: normal;
+      margin-left: -5px;
+      color: var(--text-color, @_text-color) !important;
+      text-decoration: none;
+      &:hover{
+        color: var(--heading-color, @_heading-color) !important;
+      }
     }
   }
 }
-</style>
-<style lang="less">
-.ivu-select-dropdown {
-  &.ivu-dropdown-transfer {
-    max-height: 400px;
-    max-width: 150px;
-  }
-}
 </style>

package/src/components/pro-layout-sider.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pro-layout-sider">
+  <div class="pro-layout-sider-wrapper">
     <Menu v-show="!collapsed" ref="menu"
           :accordion="accordion" :active-name="activeName"
           :open-names="openedNames" theme="dark"
@@ -55,7 +55,7 @@ import ProLayoutSiderMenuItem from './pro-layout-sider-menu-item'
 import ProLayoutSiderCollapsedMenu from './pro-layout-sider-collapsed-menu'
 import {
   filterMenuName,
-  filterMenuUri,
+  filterMenuUri, routeEqual,
   tagExists
 } from "@lambo-design/shared/utils/platform";
 
@@ -153,7 +153,6 @@ export default {
         }
         Bus.$emit('tag-list', tagList, menu.name)
       }
-      //Bus.$emit('menu-click', name)
     },
     triggerChange(data){
       this.collapsed = data;
@@ -163,7 +162,21 @@ export default {
       this.value = name;
     },
     menuClick(current) {
-      this.activeName = current;
+      let item = this.originMenuList.filter(menu => menu.name === current);
+      console.log("item=",item)
+      if (item && item.length > 0){
+        let type = item.type;
+        if (type == 2) {
+          this.activeName = current;
+        } else {
+          let pItem = this.originMenuList.filter(menu => menu.permissionId === item.pid);
+          if (pItem && pItem.length > 0){
+            this.activeName = pItem.name;
+          }
+        }
+      } else {
+        this.activeName = current;
+      }
     },
     getOpenedNamesByActiveName(){
       let res = filterMenuName(this.menuList,this.activeName);
@@ -204,7 +217,7 @@ export default {
 
 <style scoped lang="less">
 @import "@lambo-design/core/src/styles/default";
-.pro-layout-sider{
+.pro-layout-sider-wrapper{
   /deep/.ivu-menu-submenu{
     .ivu-menu{
       background: #1A1A1A;

package/src/components/pro-layout-tabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pro-layout-tabs">
+  <div class="pro-layout-tabs-wrapper">
     <div class="close-con">
       <Dropdown transfer @on-click="handleTagsOption">
         <Icon :size="24" type="ios-close-circle-outline" class="btn-close"/>
@@ -44,6 +44,7 @@
 <script>
 import {
   getPreviousTagIndex,
+  getDelTagIndex,
   setTagNavListInLocalstorage,
   showTitle
 } from '@lambo-design/shared/utils/platform'
@@ -56,6 +57,8 @@ export default {
   name: 'pro-layout-tabs',
   data() {
     return {
+      systemInfo: {},
+      tabNum : 8,
       appId: '',
       appInfo: {},
       navList: [],
@@ -76,6 +79,9 @@ export default {
   },
   methods: {
     initListener(){
+      Bus.$on('system-info',(data)=>{
+        this.initSystem(data)
+      });
       Bus.$on('nav-list',(data)=>{
         this.initNav(data)
       });
@@ -90,11 +96,20 @@ export default {
       })
     },
     destroyListener(){
+      Bus.$off('system-info')
       Bus.$off('nav-list')
       Bus.$off('menu-list')
       Bus.$off('tag-list')
       Bus.$off('change-app')
     },
+    initSystem(data){
+      if (data) {
+        this.systemInfo = data;
+        if (data.tabNum) {
+          this.tabNum = data.tabNum;
+        }
+      }
+    },
     initNav(data){
       if (data.toString() === this.navList.toString()) {
         return;
@@ -105,7 +120,11 @@ export default {
       this.originMenuList = deepCopy(data);
     },
     initTags(data,current){
-      setTagNavListInLocalstorage(data);
+      if (data.length > this.tabNum) {
+        let index = getDelTagIndex(data,current);
+        data.splice(index,1);
+      }
+      setTagNavListInLocalstorage(data, config.routerBase + '-tagNavList');
       this.tagList = data;
       if (current !== this.value) {
         this.value = current;
@@ -186,7 +205,7 @@ export default {
     },
     handleClick(item) {
       this.value = item.name
-      Bus.$emit('menu-click', item.name)
+      Bus.$emit('menu-click', item.name , item)
       if (item.meta && item.meta.appId
           && item.meta.appId != this.appId
           && item.meta.appId != config.homeRouter.meta.appId) {
@@ -238,7 +257,7 @@ export default {
       this.visible = true
       const offsetLeft = this.$el.getBoundingClientRect().left
       this.contextMenuLeft = e.clientX - offsetLeft + 10
-      this.contextMenuTop = e.clientY - 114
+      this.contextMenuTop = e.clientY - 54
     },
     closeMenu() {
       this.visible = false
@@ -278,13 +297,13 @@ export default {
   user-select: none;
 }
 
-.pro-layout-tabs {
+.pro-layout-tabs-wrapper {
   position: relative;
   border-top: 1px solid #F0F0F0;
   border-bottom: 1px solid #F0F0F0;
   width: 100%;
-  height: 50px;
-  line-height: 38px;
+  height: 46px;
+  line-height: 42px;
   color: var(--text-color, @_text-color);
   .no-select;
 
@@ -368,6 +387,7 @@ export default {
       margin: 0;
       padding: 5px 15px;
       cursor: pointer;
+      line-height: 18px;
 
       &:hover {
         background: #eee;

package/src/components/pro-layout-tools-user.vue

@@ -4,7 +4,7 @@
       <span>欢迎，{{ userInfo.userName }}</span>
       <Icon type="ios-arrow-down" />
       <DropdownMenu v-if="userInfo.dropList.length > 0" slot="list">
-        <DropdownItem v-for="item in userInfo.dropList" :name="item.name">&nbsp;{{item.value}}</DropdownItem>
+        <DropdownItem v-for="item in userInfo.dropList" :name="item.name" :key="item.name">&nbsp;{{item.value}}</DropdownItem>
       </DropdownMenu>
     </Dropdown>
   </div>

package/src/components/pro-layout-tools.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pro-layout-tools">
+  <div class="pro-layout-tools-wrapper">
     <LamboProLayoutToolsUser></LamboProLayoutToolsUser>
   </div>
 </template>
@@ -15,7 +15,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-  .pro-layout-tools{
+  .pro-layout-tools-wrapper{
     margin-right: 15px;
   }
 </style>

package/src/index.vue

@@ -1,19 +1,20 @@
 <template>
-  <i-layout class="pro-layout">
-    <i-header>
+  <i-layout class="pro-layout" :class="layoutClass">
+    <i-header class="pro-layout-header">
       <LamboProLayoutHeader></LamboProLayoutHeader>
     </i-header>
     <i-layout>
       <i-sider
+          class="pro-layout-sider"
           hide-trigger
           collapsible
-          :width="256"
+          :width="220"
           :collapsed-width="64"
           v-model="collapsed">
         <LamboProLayoutSider ref="sider"></LamboProLayoutSider>
       </i-sider>
       <i-content class="pro-layout-content">
-        <i-layout>
+        <i-layout class="pro-layout-content-layout">
           <div class="pro-layout-tabs">
             <LamboProLayoutTabs></LamboProLayoutTabs>
           </div>
@@ -34,14 +35,21 @@ 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, tagExists,
+  getTagNavListFromLocalstorage, routeEqual, tagExists,
 } from "@lambo-design/shared/utils/platform";
 import {deepCopy} from "@lambo-design/shared/utils/assist";
 export default {
   props:{
     systemInfo: {
       type: Object,
-      default: () => {}
+      default: () => {
+        return {
+          systemName: '后台管理系统',
+          systemLogo: '',
+          layoutSize: '',
+          tabNum: 8,
+        }
+      }
     },
     userInfo: {
       type: Object,
@@ -85,6 +93,17 @@ export default {
         menuList,
         homeRouter
       }
+    },
+    layoutClass(){
+      if (this.systemInfo && this.systemInfo.layoutSize) {
+        let layoutSize = this.systemInfo.layoutSize;
+        if (layoutSize == 'default') {
+          return '';
+        } else {
+          return 'small';
+        }
+      }
+      return '';
     }
   },
   watch: {
@@ -107,8 +126,8 @@ export default {
       Bus.$on('user-action', (name)=> {
         this.userAction(name)
       })
-      Bus.$on('menu-click',(name)=>{
-        this.menuClick(name)
+      Bus.$on('menu-click',(name, item)=>{
+        this.menuClick(name, item)
       })
       Bus.$on('tag-list',(data,current)=>{
         this.changeTabs(data,current)
@@ -122,15 +141,13 @@ export default {
       Bus.$off('tag-list')
     },
     initEmit(){
-      if (this.systemInfo && this.systemInfo.systemName) {
-        Bus.$emit('system-name-change',this.systemInfo.systemName)
-      }
+      Bus.$emit('system-info',this.systemInfo)
       Bus.$emit('user-info',this.userInfo)
       Bus.$emit('nav-list',this.navList)
       Bus.$emit('menu-list',this.menuList)
     },
     initTags(){
-      let tagList = getTagNavListFromLocalstorage();
+      let tagList = getTagNavListFromLocalstorage(config.routerBase + '-tagNavList');
       if (tagList.length == 0) {
         tagList.push(this.homeRouter);
       }
@@ -154,10 +171,15 @@ export default {
     userAction(name){
       this.$emit('user-action',name)
     },
-    menuClick(name){
-      let res = this.menuList.filter(item => item.name == name);
+    menuClick(name, item){
+      if (!item) {
+        let res = this.menuList.filter(item => item.name == name);
+        if (res && res.length > 0) {
+          item = res[0];
+        }
+      }
       sessionStorage.setItem('activeName',name);
-      this.$emit('menu-click', name, res[0])
+      this.$emit('menu-click', name, item)
     },
     changeTabs(data,current){
       this.$emit('change-tabs',data,current)
@@ -175,9 +197,17 @@ export default {
       } else {
         name = menu.name;
         menuItem = deepCopy(menu);
-        let tagList = getTagNavListFromLocalstorage();
+        let tagList = getTagNavListFromLocalstorage(config.routerBase + '-tagNavList');
         if (!tagExists(tagList,name)) {
           tagList.push(menuItem);
+        } else {
+          let tag = tagList.filter(item => item.name == name)[0];
+          if (!routeEqual(tag,menuItem)) {
+            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)
       }
@@ -195,13 +225,67 @@ export default {
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less">
+@import "@lambo-design/core/src/styles/default";
 .pro-layout{
   color: #ffffff;
-  min-width: 1100px;
-  min-height: 600px;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
   .ivu-layout-header{
     padding: 0;
   }
+  .pro-layout-sider{
+    overflow: hidden;
+    /deep/.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)";
+      .pro-layout-page{
+        overflow: hidden;
+        color: var(--text-color,@_text-color);
+      }
+    }
+  }
+  &.small {
+    .ivu-layout-header{
+      height: 50px;
+      line-height: 50px;
+      .pro-layout-header-wrapper{
+        height: 50px;
+        .trigger-box{
+          .sider-trigger-a{
+            margin-top: 5px;
+          }
+        }
+        .logo-box{
+          .pro-layout-logo-wrapper{
+            .logo{
+              height: 45px;
+              margin-top: 5px;
+            }
+            .divider{
+              height: 26px;
+              margin: 12px;
+            }
+          }
+        }
+        .nav-box{
+          .pro-layout-nav-wrapper{
+            .ivu-menu-horizontal{
+              height: 46px;
+              line-height: 46px;
+            }
+          }
+        }
+      }
+    }
+
+  }
 }
 </style>

package/src/styles/css/main.less

@@ -1,92 +0,0 @@
-.pro-layout{
-  .logo-con{
-    height: 64px;
-    padding: 10px;
-    background-color: #1890ff;
-    position: sticky;
-    top: 0px;
-    z-index: 1000;
-    img{
-      height: 44px;
-      width: 44px;
-      margin-left: 15px;
-      float: left;
-    }
-    .system-title{
-      float: left;
-      font-weight: bolder;
-      font-size: 30px;
-      margin-right: 20px;
-      color: #ffffff;
-    }
-  }
-  .header-con{
-    background: #1890ff;
-    color: #ffffff;
-    padding: 0 0px;
-    width: 100%;
-  }
-  .main-layout-con{
-    height: 100%;
-    overflow: hidden;
-  }
-  .main-content-con{
-    height: ~"calc(100% - 60px)";
-    overflow: hidden;
-  }
-  //tab框样式
-  .tags-nav .scroll-outer {
-    background: #f5f7f9;
-    box-shadow: 0px 0 3px 2px #f5f7f9 inset
-  }
-  .tag-nav-wrapper{
-    padding: 0;
-    height:40px;
-    background:#F0F0F0;
-  }
-  .content-wrapper{
-    height: ~"calc(100% - 80px)";
-    background: #ffffff;
-  }
-  .left-sider{
-    background: #f5f7f9;
-    .ivu-layout-sider-children{
-      overflow-y: scroll;
-      margin-right: -18px;
-    }
-  }
-}
-.ivu-menu-item > i{
-  margin-right: 12px !important;
-}
-.ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
-  margin-right: 8px !important;
-}
-.collased-menu-dropdown{
-  width: 100%;
-  margin: 0;
-  line-height: normal;
-  padding: 7px 0 6px 16px;
-  clear: both;
-  font-size: 12px !important;
-  white-space: nowrap;
-  list-style: none;
-  cursor: pointer;
-  transition: background 0.2s ease-in-out;
-  &:hover{
-    background: rgba(100, 100, 100, 0.1);
-  }
-  & * {
-    color: #515a6e;
-  }
-  .ivu-menu-item > i{
-    margin-right: 12px !important;
-  }
-  .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
-    margin-right: 8px !important;
-  }
-}
-
-.ivu-select-dropdown.ivu-dropdown-transfer{
-  max-height: 400px;
-}