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

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

@@ -0,0 +1,477 @@
+<template>
+  <div ref="listenWidth" class="pro-layout-sider-wrapper"
+       :class="[(collapsed || systemInfo.showSearchMenu === '0') ? 'menu-has-collapsed' : '',tabsHeight != 46 ? 'custom-tabs' : '']">
+    <Menu v-show="!collapsed" ref="menu"
+          :accordion="isAccordionMode" :active-name="activeName"
+          :open-names="openedNames" theme="dark"
+          width="auto" @on-select="handleSelect"
+          @on-open-change="handleOpenChange">
+      <template v-for="(item,index) in menuList">
+        <template v-if="item.children && item.children.length === 1">
+          <ProLayoutSiderMenuItem v-if="showChildren(item)"
+                                  :key="`menu-${item.name}`"
+                                  :parent-item="item"
+                                  :collect-map="isCollected"
+                                  :system-info="systemInfo"
+                                  :nav-list="navList">
+          </ProLayoutSiderMenuItem>
+          <MenuItem v-else :key="`menu-${item.children[0].name}`"
+                    :name="getNameOrHref(item, true)">
+            <Row type="flex" justify="center" align="top">
+              <Col :span="getSpanNum(systemInfo,'icon')">
+                <ProLayoutSiderIcon v-if="systemInfo.menuLogo == '1'" :icon-type="item.type == 2 ? (isCollected.hasOwnProperty(item.name) ? 'ios-star' : 'ios-star-outline') : item.meta.icon"></ProLayoutSiderIcon>
+              </Col>
+              <Col :span="getSpanNum(systemInfo,'title')">
+                <div :class="['menu-title-' + item.children[0].permissionId,'draggable-text']" v-draggable="dragOptions(item.children[0])">
+                  <Tooltip style="width: 100%" v-if="systemInfo.titleShow ==='ellipsis'" placement="right" transfer :content="showTitle(item.children[0])">
+                    <div class="menu-title-nochildren-ellipsis">{{ showTitle(item.children[0]) }}</div>
+                  </Tooltip>
+                  <span v-else class="menu-title-nochildren-wrap">{{ showTitle(item.children[0]) }}</span>
+                </div>
+              </Col>
+            </Row>
+          </MenuItem>
+        </template>
+        <template v-else>
+          <ProLayoutSiderMenuItem v-if="showChildren(item)"
+                                  :key="`menu-${item.name}`"
+                                  :parent-item="item"
+                                  :collect-map="isCollected"
+                                  :system-info="systemInfo"
+                                  :nav-list="navList">
+          </ProLayoutSiderMenuItem>
+          <MenuItem v-else :key="`menu-${item.name}`"
+                    :name="getNameOrHref(item)">
+            <Row type="flex" justify="center" align="top">
+              <Col :span="getSpanNum(systemInfo,'icon')">
+                <ProLayoutSiderIcon v-if="systemInfo.menuLogo == '1'" :icon-type="item.type == 2 ? (isCollected.hasOwnProperty(item.name) ? 'ios-star' : 'ios-star-outline') : item.meta.icon"></ProLayoutSiderIcon>
+              </Col>
+              <Col :span="getSpanNum(systemInfo,'title')">
+                <div :class="['menu-title-' + item.permissionId,'draggable-text']" v-draggable="dragOptions(item)">
+                  <Tooltip style="width: 100%" v-if="systemInfo.titleShow ==='ellipsis'" placement="right" transfer :content="showTitle(item)">
+                    <div class="menu-title-nochildren-ellipsis">{{ showTitle(item) }}</div>
+                  </Tooltip>
+                  <span v-else class="menu-title-nochildren-wrap">{{ showTitle(item) }}</span>
+                </div>
+              </Col>
+            </Row>
+          </MenuItem>
+        </template>
+      </template>
+    </Menu>
+
+    <ProLayoutSiderOtherMenu :style="systemInfo.menuScaling === '0' ? { width: otherWidth } : {}" :collapsed="collapsed" @select-menu="selectMenu"></ProLayoutSiderOtherMenu>
+    <ProLayoutSiderSearch
+        :style="systemInfo.menuScaling === '0' ? { width: otherWidth } : {}"
+        v-show="!collapsed && (systemInfo.showSearchMenu !== '0')"
+        :searchType="0"
+        @select-menu="selectMenu"
+    ></ProLayoutSiderSearch>
+    <div v-show="collapsed" :list="menuList" class="menu-collapsed" >
+      <template v-for="item in menuList">
+        <ProLayoutSiderCollapsedMenu v-if="item.children && item.children.length > 0" :key="`drop-menu-${item.name}`"
+                                     :parent-item="item" theme="dark" hide-title transfer
+                                     @on-click="handleSelect" :active-item="openedNames">
+        </ProLayoutSiderCollapsedMenu>
+        <Tooltip v-else :key="`drop-menu-${item.name}`" :content="showTitle(item.children && item.children[0] ? item.children[0] : item)"
+                 placement="right" transfer>
+          <template v-slot:default="{ active }">
+            <a :style="{textAlign: 'center'}"
+               :class="['drop-menu-a', item.name === selectedTopParent ? 'selected-parent' : '']"
+               @click="handleSelect(getNameOrHref(item, true))">
+              <!--              <i :class="[item.meta.icon, selectedIconType === item.meta.icon ? 'selected-icon' : '']"></i>-->
+              <ProLayoutSiderIcon :icon-type="item.meta.icon" icon-size="26" :class="{ 'selected-icon': item.name === selectedTopParent && collapsed }"
+              ></ProLayoutSiderIcon>
+            </a>
+          </template>
+        </Tooltip>
+      </template>
+    </div>
+
+  </div>
+</template>
+
+<script>
+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 ProLayoutSiderOtherMenu from "./components/pro-layout-sider-other-menu";
+import ProLayoutSiderSearch from "./components/pro-layout-sider-search";
+import ProLayoutSiderMenuItem from './components/pro-layout-sider-menu-item'
+import ProLayoutSiderCollapsedMenu from './components/pro-layout-sider-collapsed-menu'
+import {
+  filterMenuName, filterMenuUri, tagExists,
+  isOpenBlank, buildSinglePermission,arraysEqual
+} from "@lambo-design/shared/utils/platform";
+import config from "@lambo-design/shared/config/config";
+import {getThemeVarByKey} from "@lambo-design/shared/utils/theme";
+
+export default {
+  name: "pro-layout-sider",
+  components: {
+    ProLayoutSiderMenuItem,
+    ProLayoutSiderCollapsedMenu,
+    ProLayoutSiderOtherMenu,
+    ProLayoutSiderSearch
+  },
+  props:{
+    serverContext: {
+      type: String,
+      default: () => config.upmsServerContext // 设置默认值
+    }
+  },
+  data(){
+    return {
+      show: false,
+      otherWidth:'',
+      originalAllMenuList: [],
+      navList: [],
+      originMenuList:[],
+      menuList: [],
+      appId: '',
+      collapsed: false,
+      activeName: '',
+      openedNames: [],
+      userExpandedMenus: [], // 记录用户手动展开的菜单（非手风琴模式下使用）
+      activeMenu: null,
+      selectedMenuParent: null,
+      activeMenuItem: null,
+      openedSubMenu: null,
+      currentMenuItem: null,
+      selectedTopParent: '',
+      activeIcon: null,
+      tagValue: '',
+      tagList: [],
+      collectMenuList: [],
+      isCollected: {},
+      systemInfo:{},
+      tabsHeight: 46
+    }
+  },
+  mixins:[sider],
+  computed: {
+    isAccordionMode() {
+      // 当 accordionMode 为 '0' 时关闭手风琴模式，否则开启
+      return this.systemInfo.accordionMode !== '0';
+    }
+  },
+  methods: {
+    initListener(){
+      Bus.$on('origin-all-menu-list', (data)=>{
+        this.initAllMenu(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)
+      });
+      Bus.$on('select-menu',(name,item)=>{
+        this.selectMenu(name,item)
+      });
+      Bus.$on('collect-menu-list',(data)=>{
+        this.initCollectMenu(data)
+      });
+      Bus.$on('system-info',(data)=>{
+        this.initSystemInfo(data)
+      })
+    },
+    destroyListener(){
+      Bus.$off('origin-all-menu-list')
+      Bus.$off('nav-list')
+      Bus.$off('menu-list')
+      Bus.$off('trigger-change')
+      Bus.$off('change-app')
+      Bus.$off('tag-list')
+      Bus.$off('menu-click')
+      Bus.$off('select-menu')
+      Bus.$off('collect-menu-list')
+      Bus.$off('system-info')
+    },
+    initSystemInfo(data){
+      this.systemInfo = deepCopy(data)
+    },
+    initAllMenu(data){
+      this.originalAllMenuList = data;
+    },
+    initNav(data){
+      if (this.navList && data && arraysEqual(this.navList,data)){
+        return;
+      }
+      this.navList = data;
+    },
+    initMenu(data){
+      if (this.originMenuList && data && arraysEqual(this.originMenuList,data)){
+        return;
+      }
+      if (data && data.length > 0) {
+        let item = data[0];
+        if (item.appId && item.appId !== this.appId) {
+          return;
+        }
+      }
+      this.originMenuList = deepCopy(data);
+      this.changeMenu()
+    },
+    initCollectMenu(data){
+      this.collectMenuList = data;
+      this.isCollected = {}
+      this.collectMenuList.forEach(menu => {
+        this.isCollected[menu.name] = true
+      })
+    },
+    changeApp(appId,appInfo){
+      this.appId = appId;
+      this.changeMenu()
+    },
+    changeMenu(){
+      let treeMenuList = generatorMenuList(this.originMenuList,this.appId,'menu');
+      if (treeMenuList && treeMenuList.length > 0) {
+        this.menuList = treeMenuList;
+      } else {
+        this.menuList = [];
+      }
+      Bus.$emit('tree-menu-list',this.menuList)
+      this.openedNames = this.getOpenedNamesByActiveName();
+    },
+    selectMenu(name,menu) {
+      if (!menu) {
+        let res = this.originMenuList.filter(item => item.name == name)
+        if (res && res.length > 0) {
+          menu = res[0];
+        }
+      }
+      if (config.mainType && config.mainType == 'singleApp') {
+        menu = buildSinglePermission(this.originalAllMenuList, menu);
+      }
+      if (menu.appId && menu.appId != this.appId) {
+        let appInfo = this.navList.filter(app => app.appId === menu.appId);
+        Bus.$emit('change-app', {appId:menu.appId,appInfo:appInfo[0]})
+      }
+      setTimeout(()=>{
+        this.handleSelect(name)
+      },100)
+    },
+    handleSelect(name,uri,pid){
+      /*if (this.activeName == name) {
+        return;
+      }*/
+      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 (isOpenBlank(menu)) {
+          Bus.$emit('menu-click', menu.name , menu)
+        } else {
+          let tag = tagList.find(item => item.name == menu.name);
+          if (!tag) {
+            tag = {}
+          }
+          if ('home' != menu.name) {
+            let res = tagList.filter(item => item.name !== menu.name);
+            menu.cts = new Date().getTime();
+            tag = Object.assign(tag, menu);
+            res.push(tag);
+            tagList = deepCopy(res);
+          }
+          Bus.$emit('tag-list', tagList, menu.name)
+        }
+
+        /*if (!tagExists(tagList,menu.name)) {
+          if (!isOpenBlank(menu)) {
+            tagList.push(menu);
+          } else {
+            Bus.$emit('menu-click', menu.name , menu)
+          }
+        } else {
+          let tag = tagList.find(item => item.name == menu.name);
+          if ('home' != menu.name) {
+            let res = tagList.filter(item => item.name !== menu.name);
+            menu.cts = new Date().getTime();
+            tag = Object.assign(tag, menu);
+            res.push(tag);
+            tagList = deepCopy(res);
+          }
+        }
+        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);
+        } 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;
+    },
+    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 && menu.type && menu.type == '2');
+      if (item && item.length > 0){
+        if (isOpenBlank(item[0])) {
+          //window.location.href = window.location.href;
+          return;
+        }
+        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
+    },
+    handleOpenChange(openNames) {
+      // openNames 是 Menu 组件当前的所有展开项
+      if (this.systemInfo.accordionMode === '0') {
+        // 非手风琴模式：保存用户手动展开的状态
+        this.userExpandedMenus = [...openNames];
+      }
+      // 注意：这里不直接修改 this.openedNames，避免循环触发
+    },
+    mergeOpenedNames(newNames) {
+      // 如果关闭手风琴模式，保留用户手动展开的菜单
+      if (this.systemInfo.accordionMode === '0') {
+        // 合并用户展开的菜单和新的必需展开项
+        const merged = [...new Set([...this.userExpandedMenus, ...newNames])];
+        return merged;
+      } else {
+        // 手风琴模式，只保留新的 names（路径必需的展开项）
+        return newNames;
+      }
+    },
+    handleResize() {
+      const targetElement = this.$refs.listenWidth; // 获取 DOM 元素的引用
+      this.otherWidth = targetElement.clientWidth+'px'; // 获取 div 元素的宽度
+    },
+    dragOptions(item){
+      if (!item) {
+        item = {}
+      }
+      item.navList = this.navList;
+      return {
+        trigger: '.menu-title-' + item.permissionId,
+        body: '.menu-title-' + item.permissionId,
+        recover: true,
+        item: item
+      }
+    },
+    loadingCustomStyle(){
+      let themeKey = localStorage.getItem("theme") ? localStorage.getItem("theme") : "default"
+      let tabsHeight = getThemeVarByKey(themeKey,'--layout-tabs-height');
+      if (tabsHeight) {
+        this.tabsHeight = tabsHeight;
+      }
+    }
+  },
+  watch:{
+    activeName(){
+      const newOpenNames = this.getOpenedNamesByActiveName();
+      this.openedNames = this.mergeOpenedNames(newOpenNames);
+    },
+    openedNames() {
+      this.$nextTick(() => {
+        this.$refs.menu.updateOpened()
+        this.$refs.menu.updateActiveName()
+      })
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize); // 监听窗口大小变化事件
+    this.handleResize(); // 初始化时获取一次宽度
+    this.loadingCustomStyle();
+  },
+  created(){
+    this.initListener();
+  },
+  beforeDestroy(){
+    this.destroyListener();
+    window.removeEventListener('resize', this.handleResize); // 在组件销毁前移除事件监听器，以防止内存泄漏
+  }
+
+}
+</script>
+
+<style scoped lang="less">
+@import "@lambo-design/core/src/styles/default";
+@import '../../styles/other-menu.less';
+.pro-layout-sider-wrapper{
+  margin-bottom: 50px;
+  padding-top: 47px;
+  .menu-collapsed {
+    padding-top: 10px;
+    /deep/a.drop-menu-a{
+      display: inline-block;
+      padding: 6px 20px;
+      width: 100%;
+      text-align: center;
+      font-weight: normal;
+    }
+    overflow: hidden;
+  }
+  &.menu-has-collapsed{
+    padding-top: 0 !important;
+  }
+  &.custom-tabs{
+    padding-top: 36px;
+  }
+}
+</style>

package/src/components/{pro-layout-tabs.vue → pro-layout-tabs/index.vue}

@@ -1,11 +1,11 @@
 <template>
-  <div class="pro-layout-tabs-wrapper">
+  <div class="pro-layout-tabs-wrapper" :class="tabsHeight != 46 ? 'custom-tabs' : ''">
     <div class="close-con">
       <Dropdown transfer @on-click="handleTagsOption">
         <Icon :size="24" type="ios-close-circle-outline" class="btn-close"/>
         <DropdownMenu slot="list">
-          <DropdownItem name="close-all">关闭所有</DropdownItem>
-          <DropdownItem name="close-others">关闭其他</DropdownItem>
+          <DropdownItem name="close-all">{{ t('pro-layout.tabs.close-all') }}</DropdownItem>
+          <DropdownItem name="close-others">{{ t('pro-layout.tabs.close-others') }}</DropdownItem>
         </DropdownMenu>
       </Dropdown>
     </div>
@@ -46,15 +46,18 @@ import {
   getPreviousTagIndex,
   getDelTagIndex,
   setTagNavListInLocalstorage,
-  showTitle
+  showTitle, getRootPermission
 } from '@lambo-design/shared/utils/platform'
 import beforeClose from '@lambo-design/shared/utils/menu/before-close'
 import Bus from "@lambo-design/shared/utils/bus";
 import config from "@lambo-design/shared/config/config";
 import {deepCopy} from "@lambo-design/shared/utils/assist";
+import {getThemeVarByKey} from "@lambo-design/shared/utils/theme";
+import Locale from "@lambo-design/core/src/mixins/locale";
 
 export default {
   name: 'pro-layout-tabs',
+  mixins: [Locale],
   data() {
     return {
       systemInfo: {},
@@ -72,9 +75,16 @@ export default {
       contextMenuTop: 0,
       visible: false,
       menuList: {
-        others: '关闭其他',
-        all: '关闭所有'
-      }
+        others: this.t('pro-layout.tabs.close-others'),
+        all: this.t('pro-layout.tabs.close-all')
+      },
+      tabsHeight: 46
+    }
+  },
+  props: {
+    notSingleApp: {
+      type: Boolean,
+      default: true
     }
   },
   methods: {
@@ -138,8 +148,31 @@ export default {
       }, 200)
     },
     changeApp(appId,appInfo){
+      let oldAppId = this.appId
+      let oldAppInfo = this.appInfo
       this.appId = appId;
       this.appInfo = appInfo;
+      if(oldAppId !== appId && oldAppInfo && this.appInfo){
+        let oldAppConfig = {}
+        if(oldAppInfo.extendProps){
+          oldAppConfig = oldAppInfo.extendProps
+        }
+        if(oldAppInfo.setting){
+          oldAppConfig = JSON.parse(oldAppInfo.setting)
+        }
+        let newAppConfig = {}
+        if(this.appInfo.extendProps){
+          newAppConfig = this.appInfo.extendProps
+        }
+        if(this.appInfo.setting){
+          newAppConfig = JSON.parse(this.appInfo.setting)
+        }
+        if(oldAppConfig && oldAppConfig.hasOwnProperty('is_hide_left_menu')
+            && oldAppConfig.is_hide_left_menu === '1' && oldAppConfig.homePagePath){
+          let removeTag = this.tagList.filter(item => item.meta.appId === oldAppInfo.appId)
+          this.handleClose(removeTag[0],true)
+        }
+      }
     },
     emitTags(data,current){
       Bus.$emit('tag-list',data,current);
@@ -183,20 +216,22 @@ export default {
         }, 100)
       }
     },
-    handleClose(current) {
+    handleClose(current,isHomePage) {
       if (current.meta && current.meta.beforeCloseName && current.meta.beforeCloseName in beforeClose) {
         new Promise(beforeClose[current.meta.beforeCloseName]).then(close => {
           if (close) {
-            this.close(current)
+            this.close(current,isHomePage)
           }
         })
       } else {
-        this.close(current)
+        this.close(current,isHomePage)
       }
     },
-    close(route) {
+    close(route,isHomePage) {
       let value = this.value;
-      if (route.name == this.value) {
+      if (isHomePage) {
+        value = config.homeRouter.name;
+      } else if (route.name == this.value) {
         let preTagIndex = getPreviousTagIndex(this.tagList, this.value)
         value = this.tagList[preTagIndex].name;
       }
@@ -204,18 +239,33 @@ export default {
       this.emitTags(res, value);
     },
     handleClick(item) {
-      this.value = 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) {
-        let appInfo = this.navList.filter(app => app.appId === item.meta.appId);
-        if (appInfo && appInfo.length > 0) {
-          Bus.$emit('change-app', {appId:appInfo[0].appId,appInfo:appInfo[0]})
-        } else {
-          Bus.$emit('change-app', {appId:item.meta.appId,appInfo:null})
+      if (item.meta && item.meta.appId && item.meta.appId != config.homeRouter.meta.appId) {
+        let appIdInner = item.meta.appId;
+        if (!this.notSingleApp) {
+          // 如果是单应用模式，根据permissionId找到最上层目录（即导航栏中的应用）的permissionId
+          const permissionList = this.$store.getters.getOriginalPermissionList;
+          if (permissionList && permissionList.length > 0) {
+            const permission = {
+              pid: item.pid,
+              appId: item.meta ? item.meta.appId : item.appId
+            }
+            const rootPermission = getRootPermission(permissionList, permission);
+            if (rootPermission && rootPermission.permissionId) {
+              appIdInner = rootPermission.permissionId
+            }
+          }
+        }
+        if (appIdInner != this.appId) {
+          let appInfo = this.navList.filter(app => app.appId === appIdInner);
+          if (appInfo && appInfo.length > 0) {
+            Bus.$emit('change-app', {appId: appInfo[0].appId, appInfo: appInfo[0]})
+          } else {
+            Bus.$emit('change-app', {appId: appIdInner, appInfo: null})
+          }
         }
       }
+      this.value = item.name
+      Bus.$emit('menu-click', item.name , item);
     },
     showTitleInside(item) {
       return showTitle(item, this)
@@ -261,6 +311,13 @@ export default {
     },
     closeMenu() {
       this.visible = false
+    },
+    loadingCustomStyle(){
+      let themeKey = localStorage.getItem("theme") ? localStorage.getItem("theme") : "default"
+      let tabsHeight = getThemeVarByKey(themeKey,'--layout-tabs-height');
+      if (tabsHeight) {
+        this.tabsHeight = tabsHeight;
+      }
     }
   },
   watch: {
@@ -276,6 +333,7 @@ export default {
     setTimeout(() => {
       this.getTagElementByRoute(this.value)
     }, 200)
+    this.loadingCustomStyle();
   },
   created(){
     this.initListener();
@@ -400,5 +458,40 @@ export default {
       background-color: var(--primary-color,@_primary-color)
     }
   }
+  &.custom-tabs{
+    height: 36px;
+    line-height: 30px;
+    .close-con{
+      .btn-close{
+        margin-top: 5px;
+      }
+    }
+    .btn-con{
+      padding: 5px 0px;
+    }
+    .scroll-outer{
+      left: 8px;
+      right: 51px;
+      .scroll-body{
+        /deep/.ivu-tag-dot{
+          height: 28px;
+          line-height: 28px;
+          padding: 0 8px;
+          .ivu-tag-dot-inner{
+            width: 10px;
+            height: 10px;
+            margin-right: 2px;
+            top: 1px;
+          }
+        }
+        /deep/.ivu-tag{
+          .ivu-icon-ios-close{
+            margin-left: 0px !important;
+            top: 0px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>