@lambo-design/pro-layout 1.0.0-beta.8 → 1.0.0-beta.80

package/package.json

@@ -1,18 +1,17 @@
-{
-  "name": "@lambo-design/pro-layout",
-  "version": "1.0.0-beta.8",
-  "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.80",
+  "description": "",
+  "main": "index.js",
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@lambo-design/core": "^4.7.1-beta.60",
+    "@lambo-design/shared": "^1.0.0-beta.43"
+  },
+  "scripts": {}
+}

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

@@ -38,7 +38,6 @@ export default {
   .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-wrapper">
-    <div class="logo"></div>
+    <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(){
@@ -40,15 +54,13 @@ export default {
 <style scoped lang="less">
 .pro-layout-logo-wrapper{
   overflow: hidden;
-  border-bottom: 1px solid #000000;
   .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;
@@ -64,4 +76,4 @@ export default {
     margin-right: 15px;
   }
 }
-</style>
+</style>

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

@@ -147,4 +147,4 @@ export default {
   }
 }
 
-</style>
+</style>

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

@@ -0,0 +1,139 @@
+<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 in list" class="other-menu-history-item">
+          <div class="content" @click="handleClick(item)">
+            <common-icon :type="item.icon"></common-icon>
+            <span> {{ item.label }}</span>
+          </div>
+          <div class="delete">
+            <common-icon type="ios-close" @click.native="handleHistoryDelete(item)"></common-icon>
+          </div>
+        </div>
+      </div>
+      <div v-if="drawer.type=='collect'" class="other-menu-collect">
+        <div v-for="item in list" class="other-menu-collect-item" @click="handleClick(item)">
+          <div class="content">
+            <Tooltip :content="item.label" :delay="1000">
+              <common-icon :size="40" :type="item.icon"></common-icon>
+            </Tooltip>
+          </div>
+          <div class="delete">
+            <common-icon type="ios-close" @click.native.stop="handleCollectDelete(item)"></common-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
+    },
+  },
+  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(config.upmsServerContext + 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(config.upmsServerContext + "/manage/upmsMenuHistory/delete/" + item.historyId).then(resp => {
+        if (resp.data.code == 1) {
+          this.getList()
+        }
+      })
+    },
+    handleCollectDelete(item) {
+      ajax.get(config.upmsServerContext + "/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-collapsed-menu.vue

@@ -1,13 +1,13 @@
 <template>
   <Dropdown ref="dropdown" :class="hideTitle ? '' : 'collased-menu-dropdown'" :placement="placement"
-            :transfer="!hideTitle" @on-click="handleClick">
+            :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="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,6 +69,7 @@ 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);
@@ -78,6 +79,7 @@ export default {
       display: inline-block;
       width: 100%;
       font-weight: normal;
+      margin-left: -5px;
       color: var(--text-color, @_text-color) !important;
       text-decoration: none;
       &:hover{

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

@@ -10,6 +10,7 @@
                         :parent-item="item">
         </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>
@@ -19,6 +20,7 @@
                         :parent-item="item">
         </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,70 @@
 <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],
+  data() {
+    return {
+      isCollected: {} // 使用对象来记录每个子菜单的收藏状态
+    };
+  },
+  mounted() {
+    this.fetchCollectedMenus();
+  },
+  methods: {
+    fetchCollectedMenus() {
+      ajax.get(config.upmsServerContext + "/manage/upmsMenuCollect/list").then(resp => {
+        const collectedMenus = resp.data.data;
+        console.log('collectedMenus', collectedMenus)
+        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);
+      });
+      console.log('isCollected', this.isCollected)
+    },
+    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] ?
+          config.upmsServerContext + "/manage/upmsMenuCollect/remove" :
+          config.upmsServerContext + "/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

@@ -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";
 
@@ -118,6 +118,7 @@ export default {
     initMenu(data){
       if (data && data.length > 0) {
         let item = data[0];
+        console.log("item:",item)
         if (item.appId && item.appId !== this.appId) {
           return;
         }
@@ -153,7 +154,6 @@ export default {
         }
         Bus.$emit('tag-list', tagList, menu.name)
       }
-      //Bus.$emit('menu-click', name)
     },
     triggerChange(data){
       this.collapsed = data;
@@ -163,7 +163,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);
@@ -225,4 +238,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,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
@@ -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-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,5 +1,5 @@
 <template>
-  <i-layout class="pro-layout">
+  <i-layout class="pro-layout" :class="layoutClass">
     <i-header class="pro-layout-header">
       <LamboProLayoutHeader></LamboProLayoutHeader>
     </i-header>
@@ -8,7 +8,7 @@
           class="pro-layout-sider"
           hide-trigger
           collapsible
-          :width="256"
+          :width="220"
           :collapsed-width="64"
           v-model="collapsed">
         <LamboProLayoutSider ref="sider"></LamboProLayoutSider>
@@ -35,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,
@@ -86,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: {
@@ -108,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)
@@ -123,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);
       }
@@ -155,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)
@@ -176,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)
       }
@@ -196,7 +225,8 @@ export default {
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less">
+@import "@lambo-design/core/src/styles/default";
 .pro-layout{
   color: #ffffff;
   height: 100vh;
@@ -207,19 +237,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,161 @@
+@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: #F0F0F0;
+    text-align: center;
+    line-height: 50px;
+    height: 50px;
+    width: 100px;
+    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: 256px;
+    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;
+
+        .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;
+  }
+}