布局修改

src/layouts/admin/components/navBar/tabs.vue

@@ -1,31 +1,31 @@
 <template>
-    <div class="nav-tabs" ref="tabScrollbarRef">
+    <div class='nav-tabs' ref='tabScrollbarRef'>
         <div
-            v-for="(item, idx) in navTabs.state.tabsView"
-            @click="onTab(item)"
-            @contextmenu.prevent="onContextmenu(item, $event)"
-            class="ba-nav-tab"
+            v-for='(item, idx) in navTabs.state.tabsView'
+            @click='onTab(item)'
+            @contextmenu.prevent='onContextmenu(item, $event)'
+            class='ba-nav-tab'
             :class="navTabs.state.activeIndex == idx ? 'active' : ''"
-            :ref="tabsRefs.set"
-            :key="idx"
+            :ref='tabsRefs.set'
+            :key='idx'
         >
             {{ item.meta.title }}
-            <transition @after-leave="selectNavTab(tabsRefs[navTabs.state.activeIndex])" name="el-fade-in">
+            <transition @after-leave='selectNavTab(tabsRefs[navTabs.state.activeIndex])' name='el-fade-in'>
                 <Icon
-                    v-show="navTabs.state.tabsView.length > 1"
-                    class="close-icon"
-                    @click.stop="closeTab(item)"
-                    size="15"
-                    name="el-icon-Close"
+                    v-show='navTabs.state.tabsView.length > 1'
+                    class='close-icon'
+                    @click.stop='closeTab(item)'
+                    size='15'
+                    name='el-icon-Close'
                 />
             </transition>
         </div>
-        <div :style="activeBoxStyle" class="nav-tabs-active-box"></div>
+        <div :style='activeBoxStyle' class='nav-tabs-active-box'></div>
     </div>
-    <Contextmenu ref="contextmenuRef" :items="state.contextmenuItems" @contextmenuItemClick="onContextmenuItem" />
+    <Contextmenu ref='contextmenuRef' :items='state.contextmenuItems' @contextmenuItemClick='onContextmenuItem' />
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import { useRoute, useRouter, onBeforeRouteUpdate, type RouteLocationNormalized } from 'vue-router'
 import { useConfig } from '@/stores/config'
@@ -85,7 +85,7 @@ const onContextmenu = (menu: RouteLocationNormalized, el: MouseEvent) => {
 }
 
 // tab 激活状态切换
-const selectNavTab = function (dom: HTMLDivElement) {
+const selectNavTab = function(dom: HTMLDivElement) {
     if (!dom) {
         return false
     }
@@ -169,7 +169,7 @@ const onContextmenuItem = async (item: ContextmenuItemClickEmitArg) => {
     }
 }
 
-const updateTab = function (newRoute: RouteLocationNormalized) {
+const updateTab = function(newRoute: RouteLocationNormalized) {
     // 添加tab
     navTabs.addTab(newRoute)
     // 激活当前tab
@@ -190,41 +190,46 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped lang='scss'>
 .dark {
     .close-icon {
         color: v-bind('config.getColorVal("headerBarTabColor")') !important;
     }
+
     .ba-nav-tab.active {
         .close-icon {
             color: v-bind('config.getColorVal("headerBarTabActiveColor")') !important;
         }
     }
 }
+
 .nav-tabs {
     overflow-x: auto;
     overflow-y: hidden;
     margin-right: var(--ba-main-space);
     scrollbar-width: none;
-
     &::-webkit-scrollbar {
         height: 5px;
     }
+
     &::-webkit-scrollbar-thumb {
         background: #eaeaea;
         border-radius: var(--el-border-radius-base);
         box-shadow: none;
         -webkit-box-shadow: none;
     }
+
     &::-webkit-scrollbar-track {
         background: v-bind('config.layout.layoutMode == "Default" ? "none":config.getColorVal("headerBarBackground")');
     }
+
     &:hover {
         &::-webkit-scrollbar-thumb:hover {
             background: #c8c9cc;
         }
     }
 }
+
 .ba-nav-tab {
     white-space: nowrap;
     height: 40px;