@lambo-design/pro-layout 1.0.0-beta.13 → 1.0.0-beta.131

package/package.json

@@ -1,17 +1,17 @@
-{
-  "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.13",
-  "description": "",
-  "main": "index.js",
-  "author": "lambo",
-  "license": "ISC",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "devDependencies": {
-    "@lambo-design/shared": "1.0.0-beta.10",
-    "@lambo-design/core": "4.7.1-beta.34"
-  },
-  "scripts": {}
-}
+{
+  "name": "@lambo-design/pro-layout",
+  "version": "1.0.0-beta.131",
+  "description": "",
+  "main": "index.js",
+  "scripts": {},
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@lambo-design/core": "workspace:^",
+    "@lambo-design/shared": "workspace:^"
+  }
+}

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

@@ -4,10 +4,10 @@
       <LamboProTrigger></LamboProTrigger>
     </div>
     <div class="logo-box">
-      <LamboProLogo></LamboProLogo>
+      <LamboProLogo @clickLogo="handleClick"></LamboProLogo>
     </div>
     <div class="nav-box">
-      <LamboProNav></LamboProNav>
+      <LamboProNav :accept-app-id="acceptAppId"></LamboProNav>
     </div>
     <div class="tools-box">
       <LamboProTools></LamboProTools>
@@ -22,11 +22,22 @@ import LamboProNav from './pro-layout-nav'
 import LamboProTools from './pro-layout-tools'
 export default {
   name: "pro-layout-header",
+  props:{
+    acceptAppId: {
+      type: String,
+      default:''
+    }
+  },
   components: {
     LamboProTrigger,
     LamboProLogo,
     LamboProNav,
     LamboProTools
+  },
+  methods:{
+    handleClick(){
+      this.$emit('clickLogo')
+    }
   }
 }
 </script>

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="pro-layout-logo-wrapper">
-    <div class="logo"></div>
+  <div class="pro-layout-logo-wrapper" @click="handleClick">
+    <div class="logo" :style="logoStyle"></div>
     <div class="divider"></div>
     <div class="system-name">{{systemName}}</div>
   </div>
@@ -10,22 +10,44 @@
 import Bus from '@lambo-design/shared/utils/bus'
 export default {
   name: "pro-layout-logo",
+  props:{
+    routeName:String,
+    default:''
+  },
   data(){
     return {
-      systemName: '后台管理系统'
+      systemInfo: {},
+      systemName: '后台管理系统',
+      isHovered: false,
+    }
+  },
+  computed:{
+    logoStyle(){
+      if (this.systemInfo && this.systemInfo.systemLogo) {
+        return 'background: url("' + this.systemInfo.systemLogo + '") no-repeat;background-size: 100%;'
+      }
+      return '';
     }
   },
   methods: {
+    handleClick(){
+      this.$emit('clickLogo')
+    },
     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(){
@@ -40,14 +62,14 @@ export default {
 <style scoped lang="less">
 .pro-layout-logo-wrapper{
   overflow: hidden;
+  cursor:pointer;
   .logo{
     width: 150px;
     height: 55px;
-    background: url("../styles/images/logo.png") no-repeat;
+    background: url("../styles/images/inspur.png") no-repeat;
     background-size: 100%;
     float: left;
-    margin-top: 8px;
-    border-bottom: 1px solid #000000;
+    margin-top: 20px;
   }
   .divider{
     height: 33px;
@@ -63,4 +85,4 @@ export default {
     margin-right: 15px;
   }
 }
-</style>
+</style>

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

@@ -24,6 +24,12 @@ import config from "@lambo-design/shared/config/config";
 
 export default {
   name: "pro-layout-logo",
+  props:{
+    acceptAppId: {
+      type: String,
+      default: ''
+    }
+  },
   data(){
     return {
       navList : [],
@@ -65,6 +71,11 @@ export default {
       }
       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;
         }
@@ -91,6 +102,9 @@ export default {
       this.$nextTick(()=>{
         this.$refs.topNav.updateActiveName();
       })
+    },
+    acceptAppId(val) {
+      this.selectApp(val)
     }
   },
   created(){
@@ -147,4 +161,4 @@ export default {
   }
 }
 
-</style>
+</style>

package/src/components/pro-layout-other-menu.vue

@@ -0,0 +1,142 @@
+<template>
+  <div :class="classes">
+    <div class="other-menu-item" @click="onChange('history')">
+      <Tooltip :disabled="!collapsed" content="历史" placement="right" transfer>
+        <div>
+          <Icon class="other-menu-icon" type="md-time"/>
+          <span class="other-menu-title"> 历史</span>
+        </div>
+      </Tooltip>
+    </div>
+    <div class="other-menu-item" @click="onChange('collect')">
+      <Tooltip :disabled="!collapsed" content="收藏" placement="right" transfer>
+        <div>
+          <Icon class="other-menu-icon" type="md-star-outline"/>
+          <span class="other-menu-title"> 收藏</span>
+        </div>
+
+      </Tooltip>
+    </div>
+    <Drawer v-model="drawer.model"
+            :class-name="drawerClasses"
+            :closable="false"
+            :mask-style="{backgroundColor: 'unset'}"
+            :scrollable="true"
+            :title="drawer.title"
+            placement="left"
+    >
+      <div v-if="drawer.type=='history'" class="other-menu-history">
+        <div v-for="(item,index) in list" :key="index" class="other-menu-history-item">
+          <div class="content" @click="handleClick(item)">
+            <Icon :type="item.icon"></Icon>
+            <span> {{ item.label }}</span>
+          </div>
+          <div class="delete">
+            <Icon type="ios-close" @click.native="handleHistoryDelete(item)"></Icon>
+          </div>
+        </div>
+      </div>
+      <div v-if="drawer.type=='collect'" class="other-menu-collect">
+        <div v-for="(item,index) in list"  :key="index" class="other-menu-collect-item" @click="handleClick(item)">
+          <div class="content" @click="handleClick(item)">
+            <Icon :type="item.icon"></Icon>
+            <span> {{ item.label }}</span>
+          </div>
+          <div class="delete">
+            <Icon type="ios-close" @click.native.stop="handleCollectDelete(item)"></Icon>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  </div>
+</template>
+
+<script>
+import ajax from '@lambo-design/shared/utils/ajax';
+import config from "@lambo-design/shared/config/config";
+
+
+export default {
+  name: "other-menu",
+  components: {},
+  props: {
+    collapsed: {
+      type: Boolean,
+      default:false
+    },
+    serverContext: {
+      type: String,
+      default: () => config.upmsServerContext // 设置默认值
+    }
+  },
+  data() {
+    return {
+      drawer: {
+        model: false,
+        url: '',
+        title: '',
+        type: '',
+      },
+      list: []
+    }
+  },
+  computed: {
+    classes() {
+      let classes = ["other-menu"]
+      return this.collapsed ? ["other-menu-collapsed", ...classes] : [...classes]
+    },
+    drawerClasses() {
+      return this.collapsed ? "other-menu-drawer-wrap-collapsed" : "other-menu-drawer-wrap"
+    }
+  },
+  methods: {
+    onChange(value) {
+      if (value == 'history') {
+        this.drawer.title = '历史菜单'
+        this.drawer.url = '/manage/upmsMenuHistory/list'
+      } else {
+        this.drawer.title = '收藏菜单'
+        this.drawer.url = '/manage/upmsMenuCollect/list'
+      }
+      this.getList()
+      this.drawer.type = value
+      this.drawer.model = !this.drawer.model
+    },
+    getList() {
+      this.list = []
+      ajax.get(this.serverContext + this.drawer.url).then(resp => {
+        if (resp.data.code == 1) {
+          this.list = resp.data.data
+          if (this.drawer.type == 'collect') {
+            this.$store.commit('setCollectMenuList', this.list)
+          }
+        }
+      })
+    },
+    handleClick(item) {
+      this.$emit('on-select', item.name)
+      this.drawer.model = false
+    },
+    handleHistoryDelete(item) {
+      ajax.get(this.serverContext + "/manage/upmsMenuHistory/delete/" + item.historyId).then(resp => {
+        if (resp.data.code == 1) {
+          this.getList()
+        }
+      })
+    },
+    handleCollectDelete(item) {
+      ajax.get(this.serverContext + "/manage/upmsMenuCollect/delete/" + item.collectId).then(resp => {
+        if (resp.data.code == 1) {
+          this.getList()
+        }
+      })
+    }
+  }
+}
+</script>
+
+
+<style lang="less">
+@import '../styles/other-menu.less';
+@import "@lambo-design/core/src/styles/default.less";
+</style>

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

@@ -2,23 +2,25 @@
   <Submenu v-show="isShow" :name="`${parentName}`">
     <template slot="title">
       <ProLayoutSiderIcon :icon-type="parentItem.meta.icon"></ProLayoutSiderIcon>
-      <span>{{ showTitle(parentItem) }}</span>
+      <span style="color: red">{{ showTitle(parentItem) }}</span>
     </template>
     <template v-for="item in children">
       <template v-if="item.children && item.children.length === 1">
         <ProLayoutSiderMenuItem v-if="showChildren(item)" :key="`menu-${item.name}`"
-                        :parent-item="item">
+                        :parent-item="item" :server-context="serverContext">
         </ProLayoutSiderMenuItem>
         <menu-item v-else :key="`menu-${item.children[0].name}`" :name="getNameOrHref(item, true)">
+          <Icon :type="isCollected[item.name] ? 'ios-star' : 'ios-star-outline'" @click="toggleCollect(item)"></Icon>
           <ProLayoutSiderIcon :icon-type="item.meta.icon"></ProLayoutSiderIcon>
           <span>{{ showTitle(item.children[0]) }}</span>
         </menu-item>
       </template>
       <template v-else>
         <ProLayoutSiderMenuItem v-if="showChildren(item)" :key="`menu-${item.name}`"
-                        :parent-item="item">
+                        :parent-item="item" :server-context="serverContext">
         </ProLayoutSiderMenuItem>
         <menu-item v-else :key="`menu-${item.name}`" :name="getNameOrHref(item)">
+          <Icon :type="isCollected[item.name] ? 'ios-star' : 'ios-star-outline'" @click="toggleCollect(item)"></Icon>
           <ProLayoutSiderIcon :icon-type="item.meta.icon"></ProLayoutSiderIcon>
           <span>{{ showTitle(item) }}</span>
         </menu-item>
@@ -29,9 +31,73 @@
 <script>
 import sider from '../utils/sider'
 import menuItem from '../utils/menuItem'
+import ajax from '@lambo-design/shared/utils/ajax';
+import config from "@lambo-design/shared/config/config";
 
 export default {
   name: 'ProLayoutSiderMenuItem',
   mixins: [sider, menuItem],
+  props: {
+    serverContext: {
+      type: String,
+      default: () => config.upmsServerContext
+    }
+  },
+  data() {
+    return {
+      isCollected: {}, // 使用对象来记录每个子菜单的收藏状态
+    };
+  },
+  mounted() {
+    this.fetchCollectedMenus();
+  },
+  methods: {
+    fetchCollectedMenus() {
+      ajax.get(this.serverContext + "/manage/upmsMenuCollect/list").then(resp => {
+        const collectedMenus = resp.data.data;
+        if (Array.isArray(collectedMenus)) {
+          collectedMenus.forEach(menu => {
+            // 使用 menu 的 name 属性作为键
+            this.$set(this.isCollected, menu.name, true);
+          });
+        } else {
+          console.error("Expected an array but got:", typeof collectedMenus);
+        }
+        ;
+      }).catch(err => {
+        console.error("Error fetching collected menus:", err);
+      });
+    },
+    toggleCollect(item) {
+      const self = this;
+      let list = this.$store.state.app.originalPermissionList;
+
+      let item1 = list.find(item1 => item1.name == item.component);
+
+      const apiUrl = self.isCollected[item.name] ?
+          self.serverContext + "/manage/upmsMenuCollect/remove" :
+          self.serverContext + "/manage/upmsMenuCollect/add";
+
+      const data = {
+        appId: item1.appId,
+        permissionId: item1.permissionId
+      };
+      ajax.post(apiUrl, data).then(function(resp) {
+        if (resp.data.code == 1) {
+          // Use 'self' instead of 'this'
+          self.$set(self.isCollected, item.name, !self.isCollected[item.name]);
+          const message = self.isCollected[item.name] ? '收藏成功' : '取消收藏成功';
+          self.$Message.success(message);
+        } else {
+          const message = self.isCollected[item.name] ? '取消收藏失败' : '收藏失败';
+          self.$Message.error(message + ', 请联系系统管理员');
+        }
+      }).catch(function(err) {
+        console.error("收藏操作失败:", err);
+        self.$Message.error('操作失败, 请联系系统管理员');
+      });
+    }
+
+  }
 }
 </script>

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

@@ -8,7 +8,7 @@
         <template v-if="item.children && item.children.length === 1">
           <ProLayoutSiderMenuItem v-if="showChildren(item)"
                           :key="`menu-${item.name}`"
-                          :parent-item="item">
+                          :parent-item="item" :server-context="serverContext">
           </ProLayoutSiderMenuItem>
           <MenuItem v-else :key="`menu-${item.children[0].name}`"
                      :name="getNameOrHref(item, true)">
@@ -18,7 +18,7 @@
         </template>
         <template v-else>
           <ProLayoutSiderMenuItem v-if="showChildren(item)" :key="`menu-${item.name}`"
-                          :parent-item="item">
+                          :parent-item="item" :server-context="serverContext">
           </ProLayoutSiderMenuItem>
           <MenuItem v-else :key="`menu-${item.name}`"
                      :name="getNameOrHref(item)">
@@ -28,6 +28,8 @@
         </template>
       </template>
     </Menu>
+    <ProLayoutOtherMenu @on-select="selectHandle" :server-context="serverContext"></ProLayoutOtherMenu>
+
     <div v-show="collapsed" :list="menuList" class="menu-collapsed">
       <template v-for="item in menuList">
         <ProLayoutSiderCollapsedMenu v-if="item.children && item.children.length > 1" :key="`drop-menu-${item.name}`"
@@ -51,19 +53,28 @@ import Bus from "@lambo-design/shared/utils/bus";
 import {deepCopy} from "@lambo-design/shared/utils/assist";
 import generatorMenuList from "@lambo-design/shared/utils/menu/index";
 import sider from '../utils/sider'
+import ProLayoutOtherMenu from "./pro-layout-other-menu";
 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";
+import config from "@lambo-design/shared/config/config";
 
 export default {
   name: "pro-layout-sider",
   components: {
     ProLayoutSiderMenuItem,
-    ProLayoutSiderCollapsedMenu
+    ProLayoutSiderCollapsedMenu,
+    ProLayoutOtherMenu
+  },
+  props:{
+    serverContext: {
+      type: String,
+      default: () => config.upmsServerContext // 设置默认值
+    }
   },
   data(){
     return {
@@ -125,6 +136,9 @@ export default {
       this.originMenuList = deepCopy(data);
       this.changeMenu()
     },
+    selectHandle(name){
+      this.$emit('on-select', name)
+    },
     changeApp(appId,appInfo){
       this.appId = appId;
       this.changeMenu()
@@ -153,7 +167,6 @@ export default {
         }
         Bus.$emit('tag-list', tagList, menu.name)
       }
-      //Bus.$emit('menu-click', name)
     },
     triggerChange(data){
       this.collapsed = data;
@@ -163,7 +176,20 @@ export default {
       this.value = name;
     },
     menuClick(current) {
-      this.activeName = 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);
@@ -205,6 +231,7 @@ export default {
 <style scoped lang="less">
 @import "@lambo-design/core/src/styles/default";
 .pro-layout-sider-wrapper{
+  margin-bottom: 50px;
   /deep/.ivu-menu-submenu{
     .ivu-menu{
       background: #1A1A1A;
@@ -225,4 +252,4 @@ export default {
     }
   }
 }
-</style>
+</style>

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

@@ -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,6 +120,10 @@ export default {
       this.originMenuList = deepCopy(data);
     },
     initTags(data,current){
+      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) {
@@ -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) {

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-trigger.vue

@@ -26,7 +26,7 @@ export default {
 .trans{
   transition: transform .2s ease;
 }
-@size: 40px;
+@size: 64px;
 .sider-trigger-a{
   float: left;
   padding: 6px;

package/src/index.vue

@@ -1,17 +1,17 @@
 <template>
-  <i-layout class="pro-layout">
+  <i-layout class="pro-layout" :class="layoutClass">
     <i-header class="pro-layout-header">
-      <LamboProLayoutHeader></LamboProLayoutHeader>
+      <LamboProLayoutHeader :accept-app-id="acceptAppId" @clickLogo="handleClick"></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>
+        <LamboProLayoutSider ref="sider" @on-select="handleSelect" :server-context="serverContext"></LamboProLayoutSider>
       </i-sider>
       <i-content class="pro-layout-content">
         <i-layout class="pro-layout-content-layout">
@@ -35,14 +35,29 @@ 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:{
+    acceptAppId: {
+      type: String,
+      default:''
+    },
     systemInfo: {
       type: Object,
-      default: () => {}
+      default: () => {
+        return {
+          systemName: '后台管理系统',
+          systemLogo: '',
+          layoutSize: '',
+          tabNum: 8,
+        }
+      }
+    },
+    serverContext: {
+      type: String,
+      default: () => config.upmsServerContext // 设置默认值
     },
     userInfo: {
       type: Object,
@@ -86,6 +101,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: {
@@ -98,6 +124,12 @@ export default {
     }
   },
   methods: {
+    handleClick(){
+      this.$emit('clickLogo')
+    },
+    handleSelect(name){
+      this.$emit('on-select',name)
+    },
     initListener(){
       Bus.$on('trigger-change',(data)=>{
         this.triggerChange(data)
@@ -108,8 +140,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)
@@ -123,9 +155,7 @@ 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)
@@ -147,7 +177,7 @@ export default {
     },
     changeApp(appId,appInfo) {
       if (!appInfo) {
-        appInfo = this.navList.filter(item => item.appId == appId)[0];
+          appInfo = this.navList.filter(item => item.appId == appId)[0];
       }
       this.appId = appId;
       this.$emit('change-app',{appId,appInfo})
@@ -155,10 +185,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)
@@ -179,6 +214,14 @@ export default {
         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)
       }
@@ -196,7 +239,7 @@ export default {
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less">
 @import "@lambo-design/core/src/styles/default";
 .pro-layout{
   color: #ffffff;
@@ -208,20 +251,61 @@ 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);
       }
     }
   }
+  &.small {
+    .ivu-layout-header{
+      height: 50px;
+      line-height: 50px;
+      .pro-layout-header-wrapper{
+        height: 50px;
+        .trigger-box{
+          .sider-trigger-a{
+            margin-top: 5px;
+            width: 64px;
+            height: 50px;
+          }
+        }
+        .logo-box{
+          .pro-layout-logo-wrapper{
+            .logo{
+              height: 45px;
+              margin-top: 14px;
+            }
+            .divider{
+              height: 26px;
+              margin: 12px;
+            }
+          }
+        }
+        .nav-box{
+          .pro-layout-nav-wrapper{
+            .ivu-menu-horizontal{
+              height: 46px;
+              line-height: 46px;
+            }
+          }
+        }
+      }
+    }
+    .pro-layout-sider{
+      .ivu-layout-sider-children{
+        height: calc(100vh - 50px);
+      }
+    }
+  }
 }
-</style>
+</style>

package/src/styles/other-menu.less

@@ -0,0 +1,165 @@
+@import "@lambo-design/core/src/styles/default.less";
+
+.other-menu {
+  width: 100%;
+  border-top: 3px solid @_layout-sider-background;
+  position: absolute;
+  bottom: 0;
+  z-index: 1000;
+  background: @_layout-sider-background;
+
+  &.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, rgba(255, 255, 255, 0.7));
+    //color: #F0F0F0;
+    text-align: center;
+    line-height: 50px;
+    height: 50px;
+    width: 50%;
+    display: inline-block;
+    border-right: 2px solid #000000;
+    cursor: pointer;
+    border-radius: 3px;
+
+    &: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;
+
+    .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: 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: -5px;
+          top: -5px;
+          z-index: 100;
+          cursor: pointer;
+        }
+
+        &:hover {
+          .content {
+            cursor: pointer;
+            color: var(--primary-color,@_primary-color);
+
+            .ivu-tooltip {
+              .ivu-tooltip-rel {
+                .ivu-icon {
+                  font-size: 43px;
+                }
+              }
+            }
+          }
+
+          .delete {
+            display: inline;
+          }
+        }
+
+      }
+
+    }
+  }
+
+
+}
+
+.other-menu-drawer-wrap-collapsed {
+  .ivu-drawer {
+    left: 65px;
+    height: calc(100% - 110px);
+    bottom: 0;
+    top: auto;
+  }
+}