axwen-test31 2.0.0

package/src/icons/svg/tree-refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g><g><path d="M14.132791440734863,1.7777777910232544Q14.132791440734863,1.7137583910232543,14.145281440734863,1.6509687910232544Q14.157770440734863,1.5881797910232545,14.182269440734864,1.5290337910232543Q14.206769440734863,1.4698877910232544,14.242336440734864,1.4166567910232544Q14.277903440734864,1.3634267910232545,14.323172440734863,1.3181587910232544Q14.368440440734863,1.2728897910232544,14.421671440734864,1.2373227910232543Q14.474901440734863,1.2017557910232544,14.534047440734863,1.1772557910232544Q14.593193540734863,1.1527567910232543,14.655982860734863,1.1402677910232544Q14.718772140734863,1.1277777910232545,14.782791440734863,1.1277777910232545Q14.846811440734863,1.1277777910232545,14.909600440734863,1.1402677910232544Q14.972389440734863,1.1527567910232543,15.031535440734864,1.1772557910232544Q15.090681440734864,1.2017557910232544,15.143912440734864,1.2373227910232543Q15.197142440734863,1.2728897910232544,15.242410440734863,1.3181587910232544Q15.287679440734863,1.3634267910232545,15.323246440734863,1.4166567910232544Q15.358814440734863,1.4698877910232544,15.383313440734863,1.5290337910232543Q15.407812440734864,1.5881797910232545,15.420301440734864,1.6509687910232544Q15.432791440734864,1.7137583910232543,15.432791440734864,1.7777777910232544L15.432791440734864,7.9999977910232545Q15.432791440734864,8.064017791023254,15.420301440734864,8.126807791023253Q15.407812440734864,8.189597791023253,15.383313440734863,8.248747791023256Q15.358814440734863,8.307887791023255,15.323246440734863,8.361117791023254Q15.287679440734863,8.414347791023253,15.242410440734863,8.459617791023256Q15.197142440734863,8.504887791023254,15.143912440734864,8.540457791023254Q15.090681440734864,8.576017791023254,15.031535440734864,8.600517791023254Q14.972389440734863,8.625017791023254,14.909600440734863,8.637507791023253Q14.846811440734863,8.649997791023255,14.782791440734863,8.649997791023255Q14.718772140734863,8.649997791023255,14.655982860734863,8.637507791023253Q14.593193540734863,8.625017791023254,14.534047440734863,8.600517791023254Q14.474901440734863,8.576017791023254,14.421671440734864,8.540457791023254Q14.368440440734863,8.504887791023254,14.323172440734863,8.459617791023256Q14.277903440734864,8.414347791023253,14.242336440734864,8.361117791023254Q14.206769440734863,8.307887791023255,14.182270440734863,8.248747791023256Q14.157770440734863,8.189597791023253,14.145281440734863,8.126807791023253Q14.132791440734863,8.064017791023254,14.132791440734863,7.9999977910232545L14.132791440734863,1.7777777910232544Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g><g><path d="M0.5115021875,8Q0.5115021875,7.9359806,0.5239921875,7.873191Q0.5364811875,7.810402,0.5609801875,7.751256Q0.5854801875,7.69211,0.6210471875,7.638879Q0.6566141875,7.585649,0.7018831875,7.540381Q0.7471511875,7.495112,0.8003821875,7.459545Q0.8536121875,7.423978,0.9127581875,7.399478Q0.9719042875,7.374979,1.0346936075,7.36249Q1.0974828875,7.35,1.1615021875,7.35Q1.2255221875,7.35,1.2883111875,7.36249Q1.3511001875,7.374979,1.4102461875,7.399478Q1.4693921875,7.423978,1.5226231875,7.459545Q1.5758531875,7.495112,1.6211211875,7.540381Q1.6663901875,7.585649,1.7019571875000001,7.638879Q1.7375251875,7.69211,1.7620241875,7.751256Q1.7865231875,7.810402,1.7990121875,7.873191Q1.8115021875,7.9359806,1.8115021875,8L1.8115021875,14.22222Q1.8115021875,14.28624,1.7990121875,14.349029999999999Q1.7865231875,14.411819999999999,1.7620241875,14.470970000000001Q1.7375251875,14.53011,1.7019571875000001,14.58334Q1.6663901875,14.636569999999999,1.6211211875,14.681840000000001Q1.5758531875,14.72711,1.5226231875,14.76268Q1.4693921875,14.79824,1.4102461875,14.82274Q1.3511001875,14.84724,1.2883111875,14.859729999999999Q1.2255221875,14.87222,1.1615021875,14.87222Q1.0974828875,14.87222,1.0346936075,14.859729999999999Q0.9719042875,14.84724,0.9127581875,14.82274Q0.8536121875,14.79824,0.8003821875,14.76268Q0.7471511875,14.72711,0.7018831875,14.681840000000001Q0.6566141875,14.636569999999999,0.6210471875,14.58334Q0.5854801875,14.53011,0.5609811874999999,14.470970000000001Q0.5364811875,14.411819999999999,0.5239921875,14.349029999999999Q0.5115021875,14.28624,0.5115021875,14.22222L0.5115021875,8Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g><g><path d="M8.02572,0.35Q4.8527000000000005,0.35,2.651214,2.6938899999999997Q2.566314,2.78428,2.520657,2.8995800000000003Q2.475,3.01488,2.475,3.13889Q2.475,3.20291,2.48749,3.2657Q2.4999789999999997,3.32849,2.524478,3.38763Q2.548978,3.44678,2.584545,3.50001Q2.6201119999999998,3.55324,2.665381,3.59851Q2.710649,3.64378,2.763879,3.67934Q2.81711,3.71491,2.876256,3.73941Q2.935402,3.76391,2.998191,3.7764Q3.0609806,3.78889,3.125,3.78889Q3.259592,3.78889,3.383117,3.73544Q3.506642,3.682,3.598786,3.58389Q5.41519,1.65,8.02572,1.65Q10.57237,1.65,12.37581,3.50354Q14.1865,5.36455,14.1865,8Q14.1865,8.06402,14.199,8.126809999999999Q14.2115,8.1896,14.236,8.24874Q14.2605,8.30789,14.2961,8.36112Q14.3316,8.414349999999999,14.3769,8.459620000000001Q14.4222,8.50489,14.4754,8.54045Q14.5286,8.57602,14.5878,8.60052Q14.6469,8.62502,14.7097,8.637509999999999Q14.7725,8.65,14.8365,8.65Q14.9005,8.65,14.9633,8.637509999999999Q15.0261,8.62502,15.0853,8.60052Q15.1444,8.57602,15.1976,8.54045Q15.2509,8.50489,15.2961,8.459620000000001Q15.3414,8.414349999999999,15.377,8.36112Q15.4126,8.30789,15.437,8.24874Q15.4615,8.1896,15.474,8.126809999999999Q15.4865,8.06402,15.4865,8Q15.4865,4.83647,13.3076,2.5969800000000003Q11.121310000000001,0.35,8.02572,0.35Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g><g><path d="M0.5650390595197677,8Q0.5650390595197677,7.9359806,0.5775290595197677,7.873191Q0.5900180595197677,7.810402,0.6145170595197678,7.751256Q0.6390170595197677,7.69211,0.6745840595197677,7.638879Q0.7101510595197678,7.585649,0.7554200595197678,7.540381Q0.8006880595197677,7.495112,0.8539180595197677,7.459545Q0.9071490595197678,7.423978,0.9662950595197678,7.399478Q1.0254410595197678,7.374979,1.0882300595197678,7.36249Q1.1510196595197677,7.35,1.2150390595197678,7.35Q1.2790584595197678,7.35,1.3418480595197677,7.36249Q1.4046370595197677,7.374979,1.4637830595197678,7.399478Q1.5229290595197678,7.423978,1.5761600595197678,7.459545Q1.6293900595197677,7.495112,1.6746580595197678,7.540381Q1.7199270595197678,7.585649,1.755494059519768,7.638879Q1.7910610595197678,7.69211,1.8155610595197678,7.751256Q1.8400600595197678,7.810402,1.8525490595197678,7.873191Q1.8650390595197677,7.9359806,1.8650390595197677,8Q1.8650400595197678,10.63545,3.6757590595197676,12.496459999999999Q5.479199059519768,14.35,8.025849059519768,14.35Q10.509119059519767,14.35,12.297739059519769,12.575420000000001Q12.389139059519767,12.484829999999999,12.508039059519767,12.435839999999999Q12.626939059519767,12.386849999999999,12.755539059519768,12.386849999999999Q12.819639059519767,12.386849999999999,12.882339059519767,12.399339999999999Q12.945139059519768,12.41183,13.004339059519769,12.43633Q13.063439059519768,12.46083,13.116739059519768,12.49639Q13.169939059519768,12.53196,13.215239059519767,12.57723Q13.260439059519769,12.622499999999999,13.296039059519767,12.67573Q13.331639059519768,12.72896,13.356139059519768,12.78811Q13.380639059519767,12.847249999999999,13.393139059519768,12.91004Q13.405539059519768,12.97283,13.405539059519768,13.036850000000001Q13.405539059519768,13.16681,13.355639059519767,13.28678Q13.305639059519768,13.406749999999999,13.213339059519768,13.498280000000001L13.213339059519768,13.49832L13.212939059519767,13.4987Q11.044309059519767,15.65,8.025849059519768,15.65Q4.930259059519768,15.65,2.744009059519768,13.40302Q0.5650390595197677,11.16352,0.5650390595197677,8Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g></g></g></svg>

package/src/icons/svg/tree-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="16" viewBox="0 0 16 16"><g><g></g><g><g><path d="M7.3499995077209475,1Q7.3499995077209475,0.9359805999999999,7.362489507720947,0.873191Q7.3749785077209475,0.8104020000000001,7.399478507720947,0.751256Q7.423977507720947,0.69211,7.459544507720947,0.638879Q7.495111507720948,0.585649,7.540380507720947,0.540381Q7.585649507720947,0.495112,7.638879507720947,0.459545Q7.692109407720947,0.42397799999999997,7.751255607720947,0.399478Q7.810401807720948,0.37497899999999995,7.873191107720947,0.36249Q7.935980507720947,0.35,7.999999507720947,0.35Q8.064019507720948,0.35,8.126808507720947,0.36249Q8.189597507720947,0.37497899999999995,8.248744507720946,0.399478Q8.307890507720947,0.42397799999999997,8.361120507720948,0.459545Q8.414350507720947,0.495112,8.459619507720948,0.540381Q8.504887507720948,0.585649,8.540455507720948,0.638879Q8.576022507720948,0.69211,8.600521507720947,0.751256Q8.625020507720947,0.8104020000000001,8.637510507720947,0.873191Q8.649999507720947,0.9359805999999999,8.649999507720947,1L8.649999507720947,15Q8.649999507720947,15.064,8.637510507720947,15.1268Q8.625020507720947,15.1896,8.600521507720947,15.2487Q8.576022507720948,15.3079,8.540454507720947,15.3611Q8.504887507720948,15.4143,8.459619507720948,15.4596Q8.414350507720947,15.5049,8.361120507720948,15.5405Q8.307890507720947,15.576,8.248744507720946,15.6005Q8.189597507720947,15.625,8.126808507720947,15.6375Q8.064019507720948,15.65,7.999999507720947,15.65Q7.935980507720947,15.65,7.873191107720947,15.6375Q7.810401807720948,15.625,7.751255607720947,15.6005Q7.692109407720947,15.576,7.638879507720947,15.5405Q7.585649507720947,15.5049,7.540380507720947,15.4596Q7.495111507720948,15.4143,7.459544507720947,15.3611Q7.423977507720947,15.3079,7.399478507720947,15.2487Q7.3749785077209475,15.1896,7.362489507720947,15.1268Q7.3499995077209475,15.064,7.3499995077209475,15L7.3499995077209475,1Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g><g><path d="M8,1.889126L12.55649,6.14185Q12.64676,6.22611,12.76164,6.27139Q12.87652,6.31667,13,6.31667Q13.064,6.31667,13.1268,6.30418Q13.1896,6.29169,13.2487,6.26719Q13.3079,6.24269,13.3611,6.20712Q13.4143,6.17155,13.4596,6.12629Q13.5049,6.08102,13.5405,6.02779Q13.576,5.97456,13.6005,5.91541Q13.625,5.85626,13.6375,5.79347Q13.65,5.73069,13.65,5.66667Q13.65,5.53154,13.5961,5.40761Q13.5423,5.28368,13.4435,5.19148L8.44351,0.524814Q8.398769999999999,0.48306099999999996,8.34703,0.450391Q8.29529,0.41772,8.23836,0.395281Q8.181429999999999,0.372841,8.121310000000001,0.361421Q8.06119,0.35,8,0.35Q7.93881,0.35,7.87869,0.361421Q7.81857,0.372841,7.76164,0.395281Q7.70471,0.41772,7.65297,0.450391Q7.60123,0.48306099999999996,7.55649,0.524814L2.556776,5.19122L2.556493,5.19148Q2.457709,5.28368,2.403854,5.40761Q2.35,5.53154,2.35,5.66667Q2.35,5.73069,2.36249,5.79347Q2.3749789999999997,5.85626,2.399478,5.91541Q2.423978,5.97456,2.459545,6.02779Q2.4951119999999998,6.08102,2.540381,6.12629Q2.585649,6.17155,2.638879,6.20712Q2.69211,6.24269,2.751256,6.26719Q2.810402,6.29169,2.873191,6.30418Q2.9359806,6.31667,3,6.31667Q3.12348,6.31667,3.238358,6.27139Q3.353236,6.2261,3.443507,6.14185L3.4437889999999998,6.14159L8,1.889126Z" fill-rule="evenodd" fill="currentColor" fill-opacity="1"/></g></g></g></svg>

package/src/icons/svgo.yml

@@ -0,0 +1,21 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+    # - name
+    #
+    # or:
+    # - name: false
+    # - name: true
+    #
+    # or:
+    # - name:
+    #     param1: 1
+    #     param2: 2
+
+    - removeAttrs:
+          attrs:
+              - 'fill'
+              - 'fill-rule'

package/src/layout/layout-chrome-nav.vue

@@ -0,0 +1,420 @@
+<template>
+    <nav class="layout-nav">
+        <div v-html="closeStyle" />
+        <vue-tabs-chrome
+            ref="tab"
+            v-model="activeTab"
+            theme="custom"
+            @input="handleInput"
+            :tabs="navList"
+            :gap="2"
+            :maxWidth="200"
+            :props="{ key: 'name' }"
+            :renderLabel="renderLabel"
+            :insert-to-after="true"
+            @contextmenu="handleContextmenu"
+        />
+        <div
+            class="nav-menu"
+            :style="menuStyle"
+            v-clickoutside="closeMenu"
+        >
+            <div
+                class="nav-menu-item"
+                v-for="menu in menuList"
+                :key="menu.key"
+                @click="handleMenuSelect(menu.key)"
+            >{{ menu.title }}</div>
+        </div>
+    </nav>
+</template>
+<script>
+import { MAX_OVER_MESSAGE } from '@/utils/variable'
+import clickoutside from '@/utils/clickoutside'
+import VueTabsChrome from 'vue-tabs-chrome'
+import Vue from 'vue'
+import { mapState } from 'vuex'
+Vue.use(VueTabsChrome)
+
+const getTabByName = (navList, name) => {
+    return navList.find(nav => nav.name === name)
+}
+const isQueryEqual = (query1, query2) => {
+    return JSON.stringify(query1) === JSON.stringify(query2)
+}
+
+export default {
+    name: 'layout-chrome-nav',
+    inject: ['reload'],
+    directives: { clickoutside },
+    data () {
+        return {
+            // 导航栏向左偏移位置
+            navLeft: 0,
+            // 每次向左或向右的偏移量
+            navOffset: 400,
+            activeTab: 'home',
+            activeMenuTab: null, // 打开 右键菜单 时标记的那个 nav
+            contextMenuTop: -1000, // 右键菜单 上边距
+            contextMenuLeft: 0, // 右键菜单 左边距
+            navList: [
+                {
+                    path: '/home',
+                    name: 'home',
+                    meta: {
+                        draggable: false,
+                        title: '首页',
+                        closable: false,
+                        keepAlive: true
+                    }
+                }
+            ]
+        }
+    },
+    computed: {
+        ...mapState(['config']),
+        max () {
+            return this.config.NAV_MAX_SIZE ? +this.config.NAV_MAX_SIZE : 1000
+        },
+        navListStyle () {
+            return {
+                left: -this.navLeft + 'px'
+            }
+        },
+        menuStyle () {
+            return {
+                top: this.contextMenuTop + 'px',
+                left: this.contextMenuLeft + 'px'
+            }
+        },
+        menuList () {
+            const { activeMenuTab, navList } = this
+            const menuNav = getTabByName(navList, activeMenuTab)
+            const list = [
+                { key: 'refresh', title: '刷新' },
+                { key: 'close', title: '关闭' },
+                { key: 'close-all', title: '关闭全部' },
+                { key: 'close-other', title: '关闭其它' },
+                { key: 'close-left', title: '关闭左侧' },
+                { key: 'close-right', title: '关闭右侧' }
+            ]
+            if (menuNav && menuNav.meta.closable === false) {
+                list.splice(1, 1)
+            }
+            return list
+        },
+        closeStyle () {
+            const list = this.navList.filter(nav => nav.meta.closable === false)
+            const style = `<style>${list.map(item => `.tab-${item.name} .tabs-close { display: none }`)}</style>`
+            return style
+        }
+    },
+    watch: {
+        $route (route) {
+            this.handleRouteChange(route)
+        },
+        activeTab () {
+            this.save()
+        }
+    },
+    created () {
+        this.load()
+    },
+    methods: {
+        // 保存 nav 到本地
+        save () {
+            const navList = JSON.stringify(this.$refs.tab.getTabs())
+            localStorage.setItem('NAV_LIST', navList)
+            localStorage.setItem('ACTIVE_TAB', this.activeTab)
+        },
+        // 提取本地 nav 数据
+        load () {
+            let data = localStorage.getItem('NAV_LIST')
+            if (data) {
+                data = JSON.parse(data)
+                if (data.length) {
+                    this.navList = data
+                }
+            }
+            let activeTab = localStorage.getItem('ACTIVE_TAB')
+            if (this.$route.name !== activeTab) {
+                activeTab = this.$route.name
+            }
+            this.activeTab = activeTab
+        },
+        // 清空本地 nav 数据
+        clear () {
+            localStorage.removeItem('NAV_LIST')
+            localStorage.removeItem('ACTIVE_TAB')
+        },
+        // 监听路由变化
+        handleRouteChange (route) {
+            const { name } = route
+            const nav = this.navList.find(nav => nav.name === route.name)
+            if (name === 'base' || (name === this.activeTab && isQueryEqual(nav.query, route.query))) return
+            const temp = {
+                name: route.name,
+                path: route.path,
+                meta: route.meta,
+                query: route.query,
+                params: route.params
+            }
+            if (this.navList.every(nav => nav.name !== name)) {
+                if (this.navList.length >= this.max) {
+                    this.$info(MAX_OVER_MESSAGE)
+                    this.$router.back()
+                    return
+                }
+                this.addTab(temp)
+            } else {
+                this.$nextTick(() => {
+                    if (!isQueryEqual(nav.query, temp.query)) {
+                        nav.query = temp.query
+                    }
+                })
+                this.activeTab = name
+            }
+        },
+        handleInput () {
+            this.$nextTick(() => {
+                const { activeTab, $route } = this
+                if ($route.name !== activeTab) {
+                    const tab = this.navList.find(tab => tab.name === activeTab)
+                    this.$router.push(tab)
+                }
+            })
+        },
+        addTab (tab) {
+            this.activeTab = tab.name
+            this.$refs.tab.addTab(tab)
+        },
+        // 右键点击导航弹出菜单
+        handleContextmenu (e, nav, index) {
+            e.preventDefault()
+            this.activeMenuTab = nav.name
+            const offsetLeft = this.$el.getBoundingClientRect().left
+            this.contextMenuTop = e.pageY - 40
+            this.contextMenuLeft = e.pageX - offsetLeft
+        },
+        // 关闭菜单
+        closeMenu () {
+            this.contextMenuTop = -1000
+            this.activeMenuIndex = -1
+        },
+        // 菜单选择
+        handleMenuSelect (key) {
+            switch (key) {
+                case 'refresh':
+                    this.reload(this.activeTab)
+                    break
+                case 'close':
+                    this.close()
+                    break
+                case 'close-all':
+                    this.closeAll()
+                    break
+                case 'close-other':
+                    this.closeOther()
+                    break
+                case 'close-left':
+                    this.closeLeft()
+                    break
+                case 'close-right':
+                    this.closeRight()
+                    break
+                default:
+                    break
+            }
+            this.$nextTick(() => {
+                this.save()
+                this.closeMenu()
+            })
+        },
+        // 关闭左侧 关闭右侧 关闭其它 逻辑差不多一致，就提出来了
+        closeNavByCb (cb = () => {}) {
+            let { navList, activeTab, activeMenuTab } = this
+            const activeMenuNav = getTabByName(navList, activeMenuTab)
+            let tab = null
+            // 过滤掉 不允许关闭的 剩下的由 cb 判断
+            navList = navList.filter((nav, i) => nav.meta.closable === false || cb(nav, activeMenuNav))
+            if (navList.every(nav => nav.name !== activeTab)) {
+                tab = navList[navList.length - 1]
+                // this.activeTab = tab.name
+            }
+            this.navList = navList
+            this.$nextTick(() => {
+                // this.save()
+                if (tab) {
+                    this.$router.push({ name: tab.name })
+                }
+                this.$refs.tab.doLayout()
+            })
+        },
+        // 菜单 - 关闭当前
+        close () {
+            this.closeNavByCb((nav, activeMenuNav) => nav.name !== activeMenuNav.name)
+        },
+        // 菜单 - 关闭全部
+        closeAll () {
+            this.closeNavByCb()
+        },
+        // 菜单 - 关闭其它
+        closeOther () {
+            this.closeNavByCb((nav, activeMenuNav) => nav.name === activeMenuNav.name)
+        },
+        // 菜单 - 关闭左侧
+        closeLeft () {
+            this.closeNavByCb((nav, activeMenuNav) => nav._x >= activeMenuNav._x)
+        },
+        // 菜单 - 关闭右侧
+        closeRight () {
+            this.closeNavByCb((nav, activeMenuNav) => nav._x <= activeMenuNav._x)
+        },
+        renderLabel (nav, i) {
+            if (!nav) return
+            if (nav.query && nav.query.title) {
+                return nav.query.title
+            } else if (nav.meta && nav.meta.title) {
+                return nav.meta.title
+            } else {
+                return nav.name
+            }
+        },
+        changeRoute (name) {
+            if (!name) return
+            if (this.navList.length >= this.max) {
+                this.$info(MAX_OVER_MESSAGE)
+                return
+            }
+            const { navList } = this
+            name = name.slice(1, name.length)
+            const nav = navList.find(nav => nav.name === name)
+            if (nav) {
+                this.$router.push(nav)
+            } else {
+                this.$router.push({
+                    name: name,
+                    query: {}
+                })
+            }
+        },
+        removeNav (name) {
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    const { navList } = this
+                    const index = navList.findIndex(nav => nav.name === name)
+                    navList.splice(index, 1)
+                    this.$refs.tab.doLayout()
+                    resolve()
+                }, 300)
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.layout-nav {
+    height: @space * 5;
+    background-color: #fff;
+    user-select: none;
+    position: relative;
+    flex-shrink: 0;
+    z-index: 12;
+    .nav-menu-item {
+        padding: @space @space2;
+        cursor: pointer;
+        &:hover {
+            color: @primary;
+            background-color: @primary-bg;
+        }
+    }
+    .nav-menu {
+        top: 0;
+        left: 300px;
+        min-width: 100px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        border-radius: @space * .5;
+        padding: @space 0;
+        .border();
+        background-color: #fff;
+        z-index: 15;
+        position: absolute;
+        white-space: nowrap;
+    }
+}
+.vue-tabs-chrome.theme-custom {
+    padding-top: 0;
+    background-color: transparent;
+    overflow: hidden;
+    .tabs-footer,
+    .tabs-divider,
+    .tabs-background-before,
+    .tabs-background-after {
+        display: none;
+    }
+    .tabs-label {
+        color: #3F3F3F;
+        margin-left: 0;
+    }
+    .tabs-close-icon {
+        stroke: #818181;
+    }
+    .tabs-item {
+        cursor: pointer;
+        &:hover {
+            .tabs-main {
+                opacity: 1;
+            }
+        }
+        .tabs-main {
+            opacity: .65;
+        }
+    }
+    // .tab-home {
+    //     .tabs-close {
+    //         display: none;
+    //     }
+    // }
+    .tabs-content {
+        height: 40px;
+        overflow: unset;
+        margin-left: -1px;
+        border-bottom: 1px solid #e4e7ed;
+    }
+    .tabs-background {
+        padding: 0;
+    }
+    .tabs-background-content {
+        border-left: 1px solid #e4e7ed;
+        border-right: 1px solid #e4e7ed;
+        border-radius: 0;
+        background-color: #fff;
+    }
+    .active {
+        .tabs-main {
+            opacity: 1;
+        }
+        .tabs-background-content {
+            background-color: @color-bg !important;
+        }
+        .tabs-background {
+            &::after,
+            &::before {
+                top: 0;
+                left: 0;
+                content: '';
+                width: 100%;
+                height: 2px;
+                background-color: @primary;
+                z-index: 1;
+                position: absolute;
+            }
+            &::after {
+                top: 100%;
+                background-color: @color-bg;
+            }
+        }
+    }
+}
+</style>