@lambo-design/pro-layout 1.0.0-beta.44 → 1.0.0-beta.441

package/src/styles/color.less

@@ -0,0 +1,267 @@
+@import "@lambo-design/core/src/styles/default";
+.pro-layout{
+  color: var(--layout-color ,@_layout-color);
+  .pro-layout-header{
+    background: var(--layout-header-background,@_layout-header-background);
+    color: var(--layout-header-color ,@_layout-header-color);
+    background-position: center;
+    background-size: cover;
+    .pro-layout-header-wrapper{
+      .sider-trigger-a{
+        color: var(--layout-color ,@_layout-color);
+      }
+    }
+    .pro-layout-logo-wrapper{
+      .system-name{
+        color: var(--layout-color ,@_layout-color);
+      }
+    }
+    .pro-layout-nav-wrapper{
+      background: transparent;
+      color: var(--layout-header-nav-color,@_layout-header-nav-color);
+      .ivu-menu-dark{
+        background: transparent;
+        color: var(--layout-header-nav-color,@_layout-header-nav-color);
+        .ivu-menu-item {
+          font-size:var(--layout-header-nav-fontSize,@_layout-header-nav-fontSize);
+          background: transparent;
+          color: var(--layout-header-nav-color,@_layout-header-nav-color);
+          &:hover {
+            .line {
+              border-bottom: var(--layout-menu-item-hover-bottom-border-width, @_layout-menu-item-hover-bottom-border-width) solid var(--primary-color-tint-5, @_primary-color-tint-5);
+            }
+          }
+          &.ivu-menu-item-active,&.ivu-menu-item-selected{
+            font-weight: var(--layout-header-nav-active-font-weight,@_layout-header-nav-active-font-weight);
+            background: linear-gradient(to bottom, var(--layout-header-nav-active-background-begin,@_layout-header-nav-active-background-begin) 0%, var(--layout-header-nav-active-background-end,@_layout-header-nav-active-background-end) 100%);
+            color: var(--layout-header-nav-active-color,@_layout-header-nav-active-color);
+            .line {
+              border-bottom: var(--layout-menu-item-hover-bottom-border-width, @_layout-menu-item-hover-bottom-border-width) solid var(--layout-menu-item-hover-bottom-border-color, @_layout-menu-item-hover-bottom-border-color);
+            }
+          }
+        }
+        .ivu-menu-submenu {
+          background: transparent;
+          color: var(--layout-header-nav-color,@_layout-header-nav-color);
+          .ivu-select-dropdown {
+            background: var(--layout-header-drop-background,@_layout-header-drop-background);
+            color: var(--layout-header-drop-color,@_layout-header-drop-color);
+            .ivu-menu-item {
+              background: var(--layout-header-drop-background,@_layout-header-drop-background);
+              color: var(--layout-header-drop-color,@_layout-header-drop-color);
+              &:hover {
+                background: var(--layout-header-drop-active-background,@_layout-header-drop-active-background);
+                color: var(--layout-header-drop-active-color,@_layout-header-drop-active-color);
+              }
+              &.ivu-menu-item-active, &.ivu-menu-item-selected {
+                background: var(--layout-header-drop-active-background,@_layout-header-drop-active-background);
+                color: var(--layout-header-drop-active-color,@_layout-header-drop-active-color);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .pro-layout-nav-slide-wrapper{
+      .nav-box-slide{
+        .menu-list{
+          color: var(--layout-header-nav-color,@_layout-header-nav-color);
+          .top-menu-item{
+            color: var(--layout-header-nav-color,@_layout-header-nav-color);
+            &:hover {
+              background: transparent;
+              .menu-item {
+                color: var(--layout-header-nav-active-color,@_layout-header-nav-active-color);
+              }
+            }
+            &.active {
+              background: linear-gradient(to bottom, var(--layout-header-nav-active-background-begin,@_layout-header-nav-active-background-begin) 0%, var(--layout-header-nav-active-background-end,@_layout-header-nav-active-background-end) 100%);
+              border-bottom: 2px solid var(--primary-color-tint-5, @_primary-color-tint-5);
+              .menu-item {
+                color: var(--layout-header-nav-active-color,@_layout-header-nav-active-color);
+              }
+            }
+          }
+        }
+      }
+      .tools-box-slide{
+        .more-menu{
+          color: var(--layout-header-color ,@_layout-header-color);
+          &:hover{
+            color: var(--layout-header-nav-active-color,@_layout-header-nav-active-color);
+          }
+        }
+      }
+    }
+
+    .pro-layout-tools-wrapper{
+      .font-padding{
+        color: var(--layout-header-color,@_layout-header-color);
+        &:hover {
+          color: var(--layout-header-active-color,@_layout-header-active-color);
+        }
+      }
+      .user-avatar-dropdown{
+        .ivu-dropdown-rel{
+          &:hover{
+            color: var(--layout-header-active-color,@_layout-header-active-color);
+          }
+        }
+        .ivu-select-dropdown{
+          background: var(--layout-header-drop-background,@_layout-header-drop-background);
+          color: var(--layout-header-drop-color,@_layout-header-drop-color);
+          .ivu-dropdown-item{
+            background: var(--layout-header-drop-background,@_layout-header-drop-background);
+            color: var(--layout-header-drop-color,@_layout-header-drop-color);
+            &.active {
+              background: var(--layout-header-drop-active-background,@_layout-header-drop-active-background);
+              color: var(--layout-header-drop-active-color,@_layout-header-drop-active-color);
+            }
+            &:hover {
+              background: var(--layout-header-drop-active-background,@_layout-header-drop-active-background);
+              color: var(--layout-header-drop-active-color,@_layout-header-drop-active-color);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pro-layout-sider{
+    background: var(--layout-sider-submenu-background,@_layout-sider-submenu-background);
+    color: var(--layout-sider-submenu-color ,@_layout-sider-submenu-color);
+    .pro-layout-sider-wrapper{
+      .ivu-menu-dark{
+        background: var(--layout-sider-submenu-background,@_layout-sider-submenu-background);
+        color: var(--layout-sider-submenu-color ,@_layout-sider-submenu-color);
+        .ivu-menu-submenu{
+          background: var(--layout-sider-submenu-background,@_layout-sider-submenu-background)!important;
+          .ivu-menu-submenu-title{
+            background: var(--layout-sider-submenu-background,@_layout-sider-submenu-background)!important;
+            color: var(--layout-sider-submenu-color ,@_layout-sider-submenu-color);
+            &:hover {
+              background: var(--layout-sider-submenu-hover-background,@_layout-sider-submenu-hover-background)!important;
+              color: var(--layout-sider-submenu-hover-color ,@_layout-sider-submenu-hover-color);
+            }
+          }
+          &.ivu-menu-opened{
+            background: var(--layout-sider-submenu-active-background,@_layout-sider-submenu-active-background)!important;
+            color: var(--layout-sider-submenu-active-color ,@_layout-sider-submenu-active-color);
+            >.ivu-menu-submenu-title{
+              background: var(--layout-sider-submenu-active-background,@_layout-sider-submenu-active-background)!important;
+              color: var(--layout-sider-submenu-active-color ,@_layout-sider-submenu-active-color);
+              &:hover {
+                background: var(--layout-sider-submenu-hover-background,@_layout-sider-submenu-hover-background)!important;
+                color: var(--layout-sider-submenu-hover-color ,@_layout-sider-submenu-hover-color);
+              }
+            }
+          }
+        }
+        .ivu-menu-item{
+          background: var(--layout-sider-menuitem-background,@_layout-sider-menuitem-background)!important;
+          color: var(--layout-sider-menuitem-color ,@_layout-sider-menuitem-color);
+          &.ivu-menu-item-active,&.ivu-menu-item-selected{
+            background: var(--layout-sider-menuitem-active-background,@_layout-sider-menuitem-active-background)!important;
+            color: var(--layout-sider-menuitem-active-color,@_layout-sider-menuitem-active-color);
+            margin:var(--layout-sider-menuitem-active-margin,@_layout-sider-menuitem-active-margin);
+            border-radius: var(--layout-sider-menuitem-active-border-radius,@_layout-sider-menuitem-active-border-radius);
+            font-weight: var(--layout-sider-menuitem-active-font-weight,@_layout-sider-menuitem-active-font-weight);
+          }
+          &:hover{
+            background: var(--layout-sider-menuitem-hover-background,@_layout-sider-menuitem-hover-background)!important;
+            color: var(--layout-sider-menuitem-hover-color,@_layout-sider-menuitem-hover-color);
+            margin:var(--layout-sider-menuitem-active-margin,@_layout-sider-menuitem-active-margin);
+            border-radius: var(--layout-sider-menuitem-active-border-radius,@_layout-sider-menuitem-active-border-radius);
+            font-weight: var(--layout-sider-menuitem-active-font-weight,@_layout-sider-menuitem-active-font-weight);
+          }
+        }
+      }
+      .menu-collapsed{
+        a.drop-menu-a{
+          color: var(--layout-sider-submenu-color ,@_layout-sider-submenu-color);
+          &:hover{
+            background: var(--layout-sider-submenu-hover-background,@_layout-sider-submenu-hover-background);
+            color: var(--layout-sider-submenu-hover-color ,@_layout-sider-submenu-hover-color);
+          }
+          &.selected-parent{
+            background: var(--layout-sider-menuitem-active-background,@_layout-sider-menuitem-active-background);
+            color: var(--layout-sider-menuitem-active-color ,@_layout-sider-menuitem-active-color);
+            &:hover{
+              background: var(--layout-sider-submenu-hover-background,@_layout-sider-submenu-hover-background);
+              color: var(--layout-sider-submenu-hover-color ,@_layout-sider-submenu-hover-color);
+            }
+          }
+        }
+      }
+      .other-menu{
+        background: var(--layout-sider-background,@_layout-sider-background);
+        color: var(--layout-sider-submenu-color ,@_layout-sider-submenu-color);
+        .other-menu-item{
+          border: 1px solid var(--layout-sider-line-color,@_layout-sider-line-color);
+          &:hover {
+            background: var(--layout-sider-menuitem-hover-background,@_layout-sider-menuitem-hover-background);
+            color: var(--layout-sider-menuitem-hover-color,@_layout-sider-menuitem-hover-color);
+          }
+        }
+        &.other-menu-collapsed {
+          .other-menu-item {
+            border-top : 2px solid var(--layout-sider-line-color,@_layout-sider-line-color);
+          }
+        }
+      }
+      .search-fast-con{
+        background: var(--layout-sider-search-background,@_layout-sider-search-background);
+        color: var(--layout-sider-search-color,@_layout-sider-search-color);
+        .search-fast-con-side{
+          .sideInput{
+            background: var(--layout-sider-search-background,@_layout-sider-search-background);
+            .ivu-input{
+              background: var(--layout-sider-search-background,@_layout-sider-search-background);
+              color: var(--layout-sider-search-color,@_layout-sider-search-color);
+              &::placeholder{
+                background: var(--layout-sider-search-background,@_layout-sider-search-background);
+                color: var(--layout-sider-search-color,@_layout-sider-search-color);
+              }
+            }
+            .ivu-input-prefix{
+              background: var(--layout-sider-search-background,@_layout-sider-search-background);
+              color: var(--layout-sider-search-color,@_layout-sider-search-color);
+              i{
+                background: var(--layout-sider-search-background,@_layout-sider-search-background);
+                color: var(--layout-sider-search-color,@_layout-sider-search-color);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.collased-menu-dropdown{
+  .ivu-dropdown-rel{
+    a.drop-menu-a{
+      color: var(--text-color ,@_text-color);
+      &:hover{
+        color: var(--text-color ,@_text-color);
+      }
+    }
+  }
+}
+.search-fast-con-side-modal{
+  .ivu-modal-content{
+    background: var(--layout-sider-search-background,@_layout-sider-search-background);
+    color: var(--layout-sider-search-color,@_layout-sider-search-color);
+    .menu-side-style{
+      background: var(--layout-sider-search-background,@_layout-sider-search-background);
+      color: var(--layout-sider-search-color,@_layout-sider-search-color);
+      &:hover {
+        background: var(--layout-sider-search-active-background,@_layout-sider-search-active-background);
+        color: var(--layout-sider-search-active-color,@_layout-sider-search-active-color);
+      }
+    }
+    .no-result{
+      color: var(--layout-sider-search-color,@_layout-sider-search-color);
+    }
+  }
+}

package/src/styles/other-menu.less

@@ -1,152 +1,72 @@
+@import "@lambo-design/core/src/styles/default.less";
 .other-menu {
   width: 100%;
-  border-top: 3px solid #000000;
   position: absolute;
   bottom: 0;
   z-index: 1000;
-  background: #061629;
-
   &.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: #F0F0F0;
     text-align: center;
-    line-height: 50px;
-    height: 50px;
-    width: 100px;
+    line-height: 54px;
+    height: 54px;
+    width: 50%;
     display: inline-block;
-    border-right: 2px solid #000000;
     cursor: pointer;
-    border-radius: 3px;
+  }
+}
 
+.other-menu-drawer-list {
+  .other-menu-drawer-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 {
-      color: #ffffff;
-      background: @primary-color;
+      .content {
+        cursor: pointer;
+        height: 38px;
+        font-weight: bold;
+        color: var(--primary-color,@_primary-color);
+      }
+      .delete {
+        display: inline;
+      }
     }
-
   }
 }
 
-
 .other-menu-drawer-wrap {
-
-
   .ivu-drawer {
-    left: 256px;
+    left: 220px;
     height: calc(100% - 110px);
     bottom: 0;
     top: auto;
-
-    .other-menu-history {
-
-      .other-menu-history-item {
-        width: 100%;
-        height: 35px;
-        line-height: 35px;
-        position: relative;
-
-        .delete {
-          display: none;
-          position: absolute;
-          right: 15px;
-          top: 0px;
-          cursor: pointer;
-        }
-
-        &:hover {
-          .content {
-            cursor: pointer;
-            height: 38px;
-            font-weight: bold;
-            color: @primary-color;
-          }
-
-          .delete {
-            display: inline;
-          }
-        }
-      }
-    }
-
-    .other-menu-collect {
-      .other-menu-collect-item {
-        display: inline-block;
-        margin: 8px;
-        position: relative;
-
-        .delete {
-          display: none;
-          position: absolute;
-          right: -5px;
-          top: -5px;
-          z-index: 100;
-          cursor: pointer;
-        }
-
-        &:hover {
-          .content {
-            cursor: pointer;
-            color: @primary-color;
-
-            .ivu-tooltip {
-              .ivu-tooltip-rel {
-                .ivu-icon {
-                  font-size: 43px;
-                }
-              }
-            }
-          }
-
-          .delete {
-            display: inline;
-          }
-        }
-
-      }
-
-    }
+    overflow: hidden;
   }
-
-
 }
 
 .other-menu-drawer-wrap-collapsed {
@@ -157,3 +77,35 @@
     top: auto;
   }
 }
+.menu-title-wrap{
+  width: 90%;
+  word-wrap: break-word;
+  display: inline-block;
+}
+.menu-title-ellipsis{
+  width: 90%;
+  overflow: hidden;
+  white-space: nowrap; /* 防止内容换行 */
+  text-overflow: ellipsis; /* 超出部分省略 */
+  align-items: center;
+  line-height: 1.6;
+}
+.menu-title-nochildren-wrap{
+  width: 100%;
+  word-wrap: break-word;
+  display: inline-block;
+}
+.menu-title-nochildren-ellipsis{
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap; /* 防止内容换行 */
+  text-overflow: ellipsis; /* 超出部分省略 */
+  align-items: center;
+  line-height: 1.6;
+}
+.draggable-text {
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none;    /* Firefox */
+  -ms-user-select: none;     /* IE10+/Edge */
+  user-select: none;         /* Standard syntax */
+}

package/src/utils/menuItem.js

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

package/src/utils/sider.js

@@ -1,5 +1,5 @@
 import {showTitle} from '@lambo-design/shared/utils/platform'
-import ProLayoutSiderIcon from "../components/pro-layout-sider-icon";
+import ProLayoutSiderIcon from "../components/pro-layout-sider/components/pro-layout-sider-icon";
 
 export default {
   components: {
@@ -20,6 +20,21 @@ export default {
         return item.href && false ? `isTurnByHref_${item.href}` : (children0 ? item.children[0].name : item.name)
       }
       return item.name
+    },
+    getSpanNum(systemInfo,type){
+      if (systemInfo && systemInfo.menuLogo && systemInfo.menuLogo == '1') {
+        if (type && type == 'icon') {
+          return '3'
+        } else {
+          return '21'
+        }
+      } else {
+        if (type && type == 'icon') {
+          return '0'
+        } else {
+          return '24'
+        }
+      }
     }
   }
 }

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

@@ -1,52 +0,0 @@
-<template>
-  <div class="pro-layout-header-wrapper">
-    <div class="trigger-box">
-      <LamboProTrigger></LamboProTrigger>
-    </div>
-    <div class="logo-box">
-      <LamboProLogo></LamboProLogo>
-    </div>
-    <div class="nav-box">
-      <LamboProNav></LamboProNav>
-    </div>
-    <div class="tools-box">
-      <LamboProTools></LamboProTools>
-    </div>
-  </div>
-</template>
-
-<script>
-import LamboProTrigger from './pro-layout-trigger'
-import LamboProLogo from './pro-layout-logo'
-import LamboProNav from './pro-layout-nav'
-import LamboProTools from './pro-layout-tools'
-export default {
-  name: "pro-layout-header",
-  components: {
-    LamboProTrigger,
-    LamboProLogo,
-    LamboProNav,
-    LamboProTools
-  }
-}
-</script>
-
-<style scoped lang="less">
-.pro-layout-header-wrapper{
-  width: auto;
-  height: 64px;
-  .trigger-box{
-    float: left;
-    height: inherit;
-  }
-  .logo-box{
-    float: left;
-  }
-  .nav-box{
-    float: left;
-  }
-  .tools-box{
-    float: right;
-  }
-}
-</style>

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

@@ -1,79 +0,0 @@
-<template>
-  <div class="pro-layout-logo-wrapper">
-    <div class="logo" :style="logoStyle"></div>
-    <div class="divider"></div>
-    <div class="system-name">{{systemName}}</div>
-  </div>
-</template>
-
-<script>
-import Bus from '@lambo-design/shared/utils/bus'
-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-info',(data)=>{
-        this.initSystem(data)
-      });
-    },
-    destroyListener(){
-      Bus.$off('system-info')
-    },
-    initSystem(data){
-      if (data) {
-        this.systemInfo = data;
-        if (data.systemName) {
-          this.systemName = data.systemName;
-        }
-      }
-    }
-  },
-  created(){
-    this.initListener();
-  },
-  beforeDestroy(){
-    this.destroyListener();
-  }
-}
-</script>
-
-<style scoped lang="less">
-.pro-layout-logo-wrapper{
-  overflow: hidden;
-  .logo{
-    width: 150px;
-    height: 55px;
-    background: url("../styles/images/inspur.png") no-repeat;
-    background-size: 100%;
-    float: left;
-    margin-top: 20px;
-  }
-  .divider{
-    height: 33px;
-    width: 2px;
-    border-right: 2px dashed fade(#ffffff,30%);
-    float: left;
-    margin: 15px;
-  }
-  .system-name{
-    float: left;
-    font-weight: bold;
-    font-size: 20px;
-    margin-right: 15px;
-  }
-}
-</style>