@lambo-design/pro-layout 1.0.0-beta.237 → 1.0.0-beta.238

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.237",
+  "version": "1.0.0-beta.238",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -10,8 +10,8 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@lambo-design/shared": "^1.0.0-beta.119",
-    "@lambo-design/core": "^4.7.1-beta.118"
+    "@lambo-design/shared": "^1.0.0-beta.43",
+    "@lambo-design/core": "^4.7.1-beta.59"
   },
   "scripts": {}
 }

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

@@ -25,10 +25,6 @@ import LamboProNav from './pro-layout-nav'
 import LamboProNavSildeBtn from './pro-layout-nav-slide-btn'
 import LamboProTools from './pro-layout-tools'
 import Bus from "@lambo-design/shared/utils/bus";
-import {deepCopy} from "@lambo-design/shared/utils/assist";
-import generatorMenuList from "@lambo-design/shared/utils/menu";
-import {filterMenuName, filterMenuUri, tagExists} from "@lambo-design/shared/utils/platform";
-import {findComponentsDownward} from "@lambo-design/core/src/utils/assist";
 export default {
   name: "pro-layout-header",
   props:{
@@ -40,25 +36,6 @@ export default {
   data(){
     return {
       systemInfo: {},
-      isShowSearch:'1',
-      navList: [],
-      originMenuList:[],
-      menuList: [],
-      appId: '',
-      primaryColor: '#ff0000',
-      collapsed: false,
-      accordion: true,
-      activeName: '',
-      openedNames: [],
-      activeMenu: null,
-      selectedMenuParent: null,
-      activeMenuItem: null,
-      openedSubMenu: null,
-      currentMenuItem: null,
-      selectedTopParent: '',
-      activeIcon: null,
-      tagValue: '',
-      tagList: []
     }
   },
   components: {
@@ -78,179 +55,14 @@ export default {
       Bus.$on('system-info',(data)=>{
         this.initSystem(data)
       });
-      Bus.$on('nav-list',(data)=>{
-        this.initNav(data)
-      });
-      Bus.$on('menu-list',(data)=>{
-        this.initMenu(data)
-      });
-      Bus.$on('trigger-change',(data)=>{
-        this.triggerChange(data)
-      });
-      Bus.$on('change-app', ({appId,appInfo})=> {
-        this.changeApp(appId,appInfo)
-      })
-      Bus.$on('tag-list',(data,current)=>{
-        this.initTags(data,current)
-      });
-      Bus.$on('menu-click',(current)=>{
-        this.menuClick(current)
-      });
     },
     destroyListener(){
       Bus.$off('system-info')
-      Bus.$off('nav-list')
-      Bus.$off('menu-list')
-      Bus.$off('trigger-change')
-      Bus.$off('change-app')
-      Bus.$off('tag-list')
-      Bus.$off('menu-click')
     },
     initSystem(data){
       if (data) {
         this.systemInfo = data;
-        if (data.isShowSearch) {
-          this.isShowSearch = data.isShowSearch;
-        }
-      }
-    },
-    initNav(data){
-      if (data.toString() === this.navList.toString()) {
-        return;
-      }
-      this.navList = data;
-    },
-    handleSelect(name,uri,pid){
-      let menu = null;
-      if (name.indexOf("isTurnByHref_") > -1) {
-        name = name.replace("isTurnByHref_","");
-        menu = filterMenuUri(this.menuList,name);
-      } else {
-        menu = filterMenuName(this.menuList,name);
       }
-      let tagList = this.tagList;
-      if (menu && menu.name) {
-        if (!tagExists(tagList,menu.name)) {
-          tagList.push(menu);
-        }
-        Bus.$emit('tag-list', tagList, menu.name)
-      }
-      if (menu.meta && Array.isArray(menu.meta.crumbs)) {
-        let parentMenu = menu.meta.crumbs[0]
-        this.$set(this, 'selectedTopParent', parentMenu.name);
-      } else {
-        // 处理没有父菜单的情况
-        this.$set(this, 'selectedTopParent', menu.name);
-      }
-      // 如果 uri 为空，则需要根据 pid 判断是展开父菜单还是同时展开父菜单和当前菜单
-      if (!uri) {
-        let parentName;
-        if (pid === 0) {
-          // 如果 pid 为 0，表示是最外层菜单
-          parentName = this.getNameOrHref(menu);
-          //console.log('parentName',parentName)
-          this.openedNames = [parentName]; // 设置最外层父菜单为展开状态
-        } else {
-          // 如果 pid 不等于 0，查找并打开对应的最外层父菜单
-          parentName = this.getTopParent(menu);
-          this.openedNames = [parentName]; // 设置最外层父菜单为展开状态
-          this.activeName = menu.name; // 设置当前菜单为激活状态
-        }
-      }
-    },
-
-    getTopParent(menu) {
-      return menu.parent ? this.getTopParent(menu.parent) : menu.name;
-    },
-    initMenu(data){
-      if (data && data.length > 0) {
-        let item = data[0];
-        if (item.appId && item.appId !== this.appId) {
-          return;
-        }
-      }
-      this.originMenuList = deepCopy(data);
-      this.changeMenu()
-    },
-    changeApp(appId,appInfo){
-      this.appId = appId;
-      this.changeMenu()
-    },
-    changeMenu(){
-      let treeMenuList = generatorMenuList(this.originMenuList,this.appId);
-      if (treeMenuList && treeMenuList.length > 0) {
-        this.menuList = treeMenuList;
-      } else {
-        this.menuList = [];
-      }
-      this.openedNames = this.getOpenedNamesByActiveName();
-    },
-    activeIconBackground(item) {
-      // 如果当前菜单项是激活的，返回一个颜色值，否则返回空
-      return this.selectedMenuParent=== item.parent ? this.primaryColor : '';
-    },
-    triggerChange(data){
-      this.collapsed = data;
-    },
-    initTags(data,name){
-      this.tagList = data;
-      this.value = name;
-    },
-    menuClick(current) {
-      let item = this.originMenuList.filter(menu => menu.name === current);
-      if (item && item.length > 0){
-        let type = item[0].type;
-        if (type == 2) {
-          this.activeName = current;
-        } else {
-          let pItem = this.originMenuList.filter(menu => menu.permissionId === item[0].pid);
-          if (pItem && pItem.length > 0){
-            this.activeName = pItem[0].name;
-          }
-        }
-      } else {
-        this.activeName = current;
-      }
-    },
-    getOpenedNamesByActiveName(){
-      let res = filterMenuName(this.menuList,this.activeName);
-      let openNames = []
-      if (res) {
-        const crumbs = res.meta.crumbs;
-        if (crumbs) {
-          crumbs.forEach(item => {
-            if (item.type === 1) {
-              openNames.push(item.name)
-            }
-          })
-        }
-      }
-      return openNames
-    },
-    updateOpened () {
-      const items = findComponentsDownward(this, 'Submenu');
-      if (items.length) {
-        items.forEach(item => {
-          if (this.openedNames.indexOf(item.name) > -1) item.opened = true;
-          else item.opened = false;
-        });
-      }
-    },
-    updateActiveName () {
-      if (this.currentActiveName === undefined) {
-        this.currentActiveName = -1;
-      }
-    }
-  },
-  watch:{
-    activeName(){
-      this.openedNames = this.getOpenedNamesByActiveName();
-    },
-    openedNames() {
-      this.$nextTick(() => {
-        this.updateOpened()
-        this.updateActiveName()
-      })
     }
   },
   created(){

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

@@ -1,89 +1,89 @@
-<template>
-  <div>
-    <div class="nav-box-slide">
-      <LamboProNavSlide :accept-int="pointer" @topMen-list="handleCustomEvent" @topMen-num="topMen"  @topMen-true="topMenTrue"></LamboProNavSlide>
-    </div>
-    <!--slide按钮-->
-    <div class="tools-box-slide">
-      <div style="margin-right: 50px;">
-        <Icon
-            class="more-menu"
-            style="margin-right: 10px"
-            type="md-arrow-dropleft-circle"
-            v-if="arrowFlag"
-            @click="moveMenu('left')"
-        />
-        <Icon
-            type="md-arrow-dropright-circle"
-            class="more-menu"
-            v-if="arrowFlag"
-            @click="moveMenu('right')"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import LamboProNavSlide from './pro-layout-nav-slide.vue'
-export default {
-  data(){
-    return {
-      pointer:0,
-      topList:[],
-      topNum:0,
-      arrowFlag: true,
-    }
-  },
-  components: {
-    LamboProNavSlide
-  },
-  methods:{
-    handleCustomEvent(data) {
-      // 接收子组件传递的数据
-      this.topList = data;
-    },
-    topMen(data){
-      this.topNum = data;
-    },
-    topMenTrue(data){
-      this.arrowFlag = data
-    },
-    moveMenu: function (direction) {
-      if (direction === "right") {
-        if (this.pointer + this.topNum === this.topList.length) {
-          return;
-        }
-        this.pointer++;
-      } else {
-        if (this.pointer === 0) {
-          return;
-        }
-        this.pointer--;
-      }
-      this.flag = false;
-      let self = this;
-      setTimeout(() => {
-        self.flag = true;
-      }, 0);
-    },
-
-  },
-}
-</script>
-
-<style scoped lang="less">
-
-.more-menu {
-  color: #d9eeec;
-  font-size: 22px;
-  cursor: pointer;
-}
-
-.nav-box-slide{
-  float: left;
-}
-.tools-box-slide{
-  float: right;
-}
-</style>
+<template>
+  <div>
+    <div class="nav-box-slide">
+      <LamboProNavSlide :accept-int="pointer" @topMen-list="handleCustomEvent" @topMen-num="topMen"  @topMen-true="topMenTrue"></LamboProNavSlide>
+    </div>
+    <!--slide按钮-->
+    <div class="tools-box-slide">
+      <div style="margin-right: 50px;">
+        <Icon
+            class="more-menu"
+            style="margin-right: 10px"
+            type="md-arrow-dropleft-circle"
+            v-if="arrowFlag"
+            @click="moveMenu('left')"
+        />
+        <Icon
+            type="md-arrow-dropright-circle"
+            class="more-menu"
+            v-if="arrowFlag"
+            @click="moveMenu('right')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import LamboProNavSlide from './pro-layout-nav-slide.vue'
+export default {
+  data(){
+    return {
+      pointer:0,
+      topList:[],
+      topNum:0,
+      arrowFlag: true,
+    }
+  },
+  components: {
+    LamboProNavSlide
+  },
+  methods:{
+    handleCustomEvent(data) {
+      // 接收子组件传递的数据
+      this.topList = data;
+    },
+    topMen(data){
+      this.topNum = data;
+    },
+    topMenTrue(data){
+      this.arrowFlag = data
+    },
+    moveMenu: function (direction) {
+      if (direction === "right") {
+        if (this.pointer + this.topNum === this.topList.length) {
+          return;
+        }
+        this.pointer++;
+      } else {
+        if (this.pointer === 0) {
+          return;
+        }
+        this.pointer--;
+      }
+      this.flag = false;
+      let self = this;
+      setTimeout(() => {
+        self.flag = true;
+      }, 0);
+    },
+
+  },
+}
+</script>
+
+<style scoped lang="less">
+
+.more-menu {
+  color: #d9eeec;
+  font-size: 22px;
+  cursor: pointer;
+}
+
+.nav-box-slide{
+  float: left;
+}
+.tools-box-slide{
+  float: right;
+}
+</style>

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

@@ -1,245 +1,245 @@
-<template>
-  <div style="margin-left: 53px;">
-    <div class="menu-list" >
-      <ul class="top-menu"  ref="topNav">
-        <li class="top-menu-item" :class="{ 'active': activeName === item.appId }" v-for="(item,index) in topMenList"  :key="item.appId"  @click="selectApp(item.appId)">
-          <div class="menu-item" v-show="pointer <= index && index < pointer + topMenuNum && flag">
-            <p class="menu-icon"><Icon :type="item.icon" :size="20"></Icon></p>
-            <p class="menu-txt">{{ item.name }}</p>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import Bus from '@lambo-design/shared/utils/bus'
-import { deepCopy } from '@lambo-design/shared/utils/assist'
-
-export default {
-  name: 'pro-layout-tqm',
-  props: {
-    acceptInt: {
-      type: Number,
-      default: 0
-    },
-    topMenListNum: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      pointer:0,
-      flag:true,
-      arrowFlag: true,
-      acceptAppId: '',
-      navList: [],
-      topMenList: [],
-      topTqmMenList:[],
-      otherList: [],
-      activeName: '',
-      topMenuNum: 7,
-      lastTopMenuNum:-1,
-      originMenuList: []
-    }
-  },
-  methods: {
-    initListener() {
-      Bus.$on('system-info',(data) => {
-        this.initSystemInfo(data);
-      })
-      Bus.$on('nav-list', (data) => {
-        this.initNav(data)
-      })
-      Bus.$on('change-app', ({ appId, appInfo }) => {
-        this.changeApp(appId, appInfo)
-      })
-    },
-    destroyListener() {
-      Bus.$off('system-info')
-      Bus.$off('nav-list')
-      Bus.$off('change-app')
-    },
-    initSystemInfo(data) {
-      if (data) {
-        this.topMenuNum = data.topMenu ? data.topMenu : 4;
-        this.acceptAppId = data.acceptAppId ? data.acceptAppId : '';
-        this.initNav(this.navList)
-      }
-    },
-    initNav(data) {
-      if (data.toString() === this.navList.toString() && this.topMenuNum === this.lastTopMenuNum) {
-        return
-      }
-      this.navList = data
-      this.lastTopMenuNum = this.topMenuNum
-      if (data.length > this.topMenuNum) {
-        let navList = deepCopy(data)
-        this.topMenList = navList
-        this.$emit('topMen-list', this.topMenList);
-        this.$emit('topMen-num', this.topMenuNum);
-        this.$emit('topMen-true', true);
-        // this.topMenList = navList.splice(0, this.topMenuNum)
-        // this.otherList = navList
-      } else {
-        this.topMenList = this.navList
-        this.$emit('topMen-true', false);
-      }
-      if (this.topMenList.length > 0) {
-        let appId = this.topMenList[0].appId
-        for (let i = 0; i < this.topMenList.length; i++) {
-          if (this.topMenList[i].selected == true) {
-            appId = this.topMenList[i].appId
-          }
-        }
-        if (this.activeName) {
-          appId = this.activeName
-        }
-        this.selectApp(appId)
-      }
-    },
-    changeApp(appId, appInfo){
-      this.activeName = appId
-    },
-    selectApp(appId) {
-      this.activeName = appId
-      let res = this.navList.filter(app => app.appId == appId)
-      Bus.$emit('change-app', { appId, appInfo: res[0] })
-    },
-  },
-  watch: {
-    acceptInt(val){
-      this.pointer = val;
-    },
-    acceptAppId(val) {
-      this.selectApp(val)
-    }
-  },
-  created() {
-    this.initListener()
-  },
-  beforeDestroy() {
-    this.destroyListener()
-  }
-}
-</script>
-
-<style scoped lang="less">
-@import '@lambo-design/core/src/styles/default.less';
-
-.pro-layout-nav-wrapper {
-  .ivu-menu {
-    .ivu-menu-item {
-      &:hover {
-        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
-
-        .line {
-          border-bottom: 3.35px solid var(--primary-color-tint-5, @_primary-color-tint-5);
-          position: absolute;
-          left: 0;
-          right: 0;
-        }
-      }
-
-      &.ivu-menu-item-active, &.ivu-menu-item-selected {
-        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
-
-        .line {
-          border-bottom: 3.35px solid var(--primary-color-tint-5, @_primary-color-tint-5);
-          position: absolute;
-          left: 0;
-          right: 0;
-          //bottom: 0;
-        }
-      }
-    }
-
-    /deep/ .ivu-menu-submenu {
-      .ivu-menu-submenu-title > i {
-        &.ivu-menu-submenu-title-icon {
-
-        }
-      }
-
-      .ivu-select-dropdown {
-        background: var(--menu-dark-title, @_menu-dark-title);
-        color: var(--heading-color-dark, @_heading-color-dark);
-
-        .ivu-menu-drop-list {
-          .ivu-menu-item {
-            color: var(--menu-dark-subsidiary-color, @_menu-dark-subsidiary-color);
-
-            &:hover {
-              background: rgba(255, 255, 255, 0.2);
-              color: var(--heading-color-dark, @_heading-color-dark);
-            }
-
-            &.ivu-menu-item-active, &.ivu-menu-item-selected {
-              background: rgba(255, 255, 255, 0.2);
-              color: var(--heading-color-dark, @_heading-color-dark);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.menu-list {
-  height: 100%;
-  line-height: 24px;
-  color: #ffffff;
-  cursor: pointer;
-  font-size: 16px;
-  .top-menu {
-    overflow: hidden;
-    height: 100%;
-    .top-menu-item {
-      position: relative;
-      height: 100%;
-      color: #FFFFFF;
-      list-style: none;
-      float: left;
-      &:hover {
-        background: transparent;
-        .menu-item {
-          color: #fff;
-        }
-      }
-      &.active {
-        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) !important;
-        border-bottom: 2px solid var(--primary-color-tint-5, @_primary-color-tint-5);
-        .menu-item {
-          color: #fff;
-        }
-      }
-      .menu-item {
-        padding: 2px 0px 0px 8px;
-        margin: 0px 30px;
-      }
-      .menu-icon {
-        height: 20px;
-        line-height: 20px;
-        text-align: center;
-        //position: absolute;
-        left: 14px;
-      }
-      .menu-txt {
-        text-align: center;
-        font-size: 14px;
-        line-height: 2;
-      }
-    }
-  }
-}
-
-
-
-.more-menu {
-  color: #d9eeec;
-  font-size: 22px;
-  cursor: pointer;
-}
-</style>
+<template>
+  <div style="margin-left: 53px;">
+    <div class="menu-list" >
+      <ul class="top-menu"  ref="topNav">
+        <li class="top-menu-item" :class="{ 'active': activeName === item.appId }" v-for="(item,index) in topMenList"  :key="item.appId"  @click="selectApp(item.appId)">
+          <div class="menu-item" v-show="pointer <= index && index < pointer + topMenuNum && flag">
+            <p class="menu-icon"><Icon :type="item.icon" :size="20"></Icon></p>
+            <p class="menu-txt">{{ item.name }}</p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import Bus from '@lambo-design/shared/utils/bus'
+import { deepCopy } from '@lambo-design/shared/utils/assist'
+
+export default {
+  name: 'pro-layout-tqm',
+  props: {
+    acceptInt: {
+      type: Number,
+      default: 0
+    },
+    topMenListNum: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      pointer:0,
+      flag:true,
+      arrowFlag: true,
+      acceptAppId: '',
+      navList: [],
+      topMenList: [],
+      topTqmMenList:[],
+      otherList: [],
+      activeName: '',
+      topMenuNum: 7,
+      lastTopMenuNum:-1,
+      originMenuList: []
+    }
+  },
+  methods: {
+    initListener() {
+      Bus.$on('system-info',(data) => {
+        this.initSystemInfo(data);
+      })
+      Bus.$on('nav-list', (data) => {
+        this.initNav(data)
+      })
+      Bus.$on('change-app', ({ appId, appInfo }) => {
+        this.changeApp(appId, appInfo)
+      })
+    },
+    destroyListener() {
+      Bus.$off('system-info')
+      Bus.$off('nav-list')
+      Bus.$off('change-app')
+    },
+    initSystemInfo(data) {
+      if (data) {
+        this.topMenuNum = data.topMenu ? data.topMenu : 4;
+        this.acceptAppId = data.acceptAppId ? data.acceptAppId : '';
+        this.initNav(this.navList)
+      }
+    },
+    initNav(data) {
+      if (data.toString() === this.navList.toString() && this.topMenuNum === this.lastTopMenuNum) {
+        return
+      }
+      this.navList = data
+      this.lastTopMenuNum = this.topMenuNum
+      if (data.length > this.topMenuNum) {
+        let navList = deepCopy(data)
+        this.topMenList = navList
+        this.$emit('topMen-list', this.topMenList);
+        this.$emit('topMen-num', this.topMenuNum);
+        this.$emit('topMen-true', true);
+        // this.topMenList = navList.splice(0, this.topMenuNum)
+        // this.otherList = navList
+      } else {
+        this.topMenList = this.navList
+        this.$emit('topMen-true', false);
+      }
+      if (this.topMenList.length > 0) {
+        let appId = this.topMenList[0].appId
+        for (let i = 0; i < this.topMenList.length; i++) {
+          if (this.topMenList[i].selected == true) {
+            appId = this.topMenList[i].appId
+          }
+        }
+        if (this.activeName) {
+          appId = this.activeName
+        }
+        this.selectApp(appId)
+      }
+    },
+    changeApp(appId, appInfo){
+      this.activeName = appId
+    },
+    selectApp(appId) {
+      this.activeName = appId
+      let res = this.navList.filter(app => app.appId == appId)
+      Bus.$emit('change-app', { appId, appInfo: res[0] })
+    },
+  },
+  watch: {
+    acceptInt(val){
+      this.pointer = val;
+    },
+    acceptAppId(val) {
+      this.selectApp(val)
+    }
+  },
+  created() {
+    this.initListener()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import '@lambo-design/core/src/styles/default.less';
+
+.pro-layout-nav-wrapper {
+  .ivu-menu {
+    .ivu-menu-item {
+      &:hover {
+        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
+
+        .line {
+          border-bottom: 3.35px solid var(--primary-color-tint-5, @_primary-color-tint-5);
+          position: absolute;
+          left: 0;
+          right: 0;
+        }
+      }
+
+      &.ivu-menu-item-active, &.ivu-menu-item-selected {
+        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
+
+        .line {
+          border-bottom: 3.35px solid var(--primary-color-tint-5, @_primary-color-tint-5);
+          position: absolute;
+          left: 0;
+          right: 0;
+          //bottom: 0;
+        }
+      }
+    }
+
+    /deep/ .ivu-menu-submenu {
+      .ivu-menu-submenu-title > i {
+        &.ivu-menu-submenu-title-icon {
+
+        }
+      }
+
+      .ivu-select-dropdown {
+        background: var(--menu-dark-title, @_menu-dark-title);
+        color: var(--heading-color-dark, @_heading-color-dark);
+
+        .ivu-menu-drop-list {
+          .ivu-menu-item {
+            color: var(--menu-dark-subsidiary-color, @_menu-dark-subsidiary-color);
+
+            &:hover {
+              background: rgba(255, 255, 255, 0.2);
+              color: var(--heading-color-dark, @_heading-color-dark);
+            }
+
+            &.ivu-menu-item-active, &.ivu-menu-item-selected {
+              background: rgba(255, 255, 255, 0.2);
+              color: var(--heading-color-dark, @_heading-color-dark);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.menu-list {
+  height: 100%;
+  line-height: 24px;
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 16px;
+  .top-menu {
+    overflow: hidden;
+    height: 100%;
+    .top-menu-item {
+      position: relative;
+      height: 100%;
+      color: #FFFFFF;
+      list-style: none;
+      float: left;
+      &:hover {
+        background: transparent;
+        .menu-item {
+          color: #fff;
+        }
+      }
+      &.active {
+        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) !important;
+        border-bottom: 2px solid var(--primary-color-tint-5, @_primary-color-tint-5);
+        .menu-item {
+          color: #fff;
+        }
+      }
+      .menu-item {
+        padding: 2px 0px 0px 8px;
+        margin: 0px 30px;
+      }
+      .menu-icon {
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+        //position: absolute;
+        left: 14px;
+      }
+      .menu-txt {
+        text-align: center;
+        font-size: 14px;
+        line-height: 2;
+      }
+    }
+  }
+}
+
+
+
+.more-menu {
+  color: #d9eeec;
+  font-size: 22px;
+  cursor: pointer;
+}
+</style>

package/src/index.vue

@@ -290,8 +290,8 @@ export default {
 
 <style lang="less">
 @import "@lambo-design/core/src/styles/default";
+@import "styles/color";
 .pro-layout{
-  color: #ffffff;
   height: 100vh;
   width: 100%;
   overflow: hidden;
@@ -311,7 +311,6 @@ export default {
       height: ~"calc(100vh - 53px)";
       .pro-layout-page{
         overflow: hidden;
-        color: var(--text-color,@_text-color);
       }
     }
   }

package/src/styles/color.less

@@ -0,0 +1,113 @@
+@import "@lambo-design/core/src/styles/default";
+.pro-layout{
+  color: var(--layout-color ,@_layout-color);
+  .active {
+    color: var(--layout-active-color ,@_layout-active-color);
+  }
+  .pro-layout-header{
+    background: var(--layout-header-background,@_layout-header-background);
+    color: var(--layout-header-color ,@_layout-header-color);
+    .active {
+      color: var(--layout-header-active-color,@_layout-header-active-color);
+    }
+    .pro-layout-nav-wrapper{
+      background: var(--layout-header-background,@_layout-header-background);
+      color: var(--layout-header-nav-color,@_layout-header-nav-color);
+      .ivu-menu-dark{
+        background: var(--layout-header-background,@_layout-header-background);
+        color: var(--layout-header-nav-color,@_layout-header-nav-color);
+        .ivu-menu-item-active,.ivu-menu-item-selected{
+          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);
+        }
+      }
+    }
+    .pro-layout-tools-wrapper{
+      .user-avatar-dropdown{
+        .ivu-select-dropdown{
+          background: var(--layout-header-background,@_layout-header-background);
+          color: var(--layout-header-drop-color,@_layout-header-drop-color);
+          .ivu-dropdown-item{
+            background: var(--layout-header-background,@_layout-header-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-background,@_layout-sider-background);
+    color: var(--layout-sider-menu-color ,@_layout-sider-menu-color);
+    .pro-layout-sider-wrapper{
+      .ivu-menu-dark{
+        background: var(--layout-sider-menu-background,@_layout-sider-menu-background);
+        color: var(--layout-sider-menu-color ,@_layout-sider-menu-color);
+        .ivu-menu-submenu{
+          background: var(--layout-sider-submenu-background,@_layout-sider-submenu-background);
+          .ivu-menu-submenu-title{
+            background: var(--layout-sider-background,@_layout-sider-background);
+            color: var(--layout-sider-menu-color ,@_layout-sider-menu-color);
+          }
+          .ivu-menu-item{
+            background: var(--layout-sider-menuitem-background,@_layout-sider-menuitem-background);
+            color: var(--layout-sider-menu-color ,@_layout-sider-menu-color);
+            &.ivu-menu-item-active,&.ivu-menu-item-selected{
+              background: var(--layout-sider-menuitem-active-background,@_layout-sider-menuitem-active-background);
+              color: var(--ayout-sider-menu-active-color,@_ayout-sider-menu-active-color);
+            }
+          }
+          &.ivu-menu-item-active,&.ivu-menu-child-item-active{
+            background: var(--layout-sider-submenu-active-background,@_layout-sider-submenu-active-background);
+            color: var(--ayout-sider-menu-active-color,@_ayout-sider-menu-active-color);
+          }
+        }
+      }
+      .other-menu{
+        background: var(--layout-sider-menu-background,@_layout-sider-menu-background);
+        color: var(--layout-sider-menu-color ,@_layout-sider-menu-color);
+        .other-menu-item{
+          &:hover {
+            background: var(--layout-sider-menuitem-active-background,@_layout-sider-menuitem-active-background);
+            color: var(--ayout-sider-menu-active-color,@_ayout-sider-menu-active-color);
+          }
+        }
+      }
+      .search-fast-con{
+        background: var(--layout-sider-menu-background,@_layout-sider-menu-background);
+        color: var(--layout-sider-menu-color ,@_layout-sider-menu-color);
+        .search-fast-con-side{
+          .sideInput{
+            .ivu-input{
+              background: var(--layout-sider-menu-background,@_layout-sider-menu-background);
+              color: var(--layout-sider-menu-color ,@_layout-sider-menu-color);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.search-fast-con-side-modal{
+  .ivu-modal-content{
+    background: var(--layout-sider-menu-background,@_layout-sider-menu-background);
+    color: var(--layout-sider-menu-color ,@_layout-sider-menu-color);
+    .menu-side-style{
+      background: var(--layout-sider-menu-background,@_layout-sider-menu-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);
+      }
+    }
+  }
+}