1122

cdTMP/src/layout/components/tab-bar.vue

@@ -13,78 +13,77 @@
     </div>
 </template>
 
-<script lang="ts" setup>
-    import { ref, computed, watch, onUnmounted } from 'vue'
-    import type { RouteLocationNormalized } from 'vue-router'
-    import { listenerRouteChange, removeRouteListener } from '@/utils/route-listener'
-    import { useAppStore, useTabBarStore } from '@/store'
-    import tabItem from './tab-item.vue'
+<script setup>
+import { ref, computed, watch, onUnmounted } from "vue"
+import { listenerRouteChange, removeRouteListener } from "@/utils/route-listener"
+import { useAppStore, useTabBarStore } from "@/store"
+import tabItem from "./tab-item.vue"
 
-    const appStore = useAppStore()
-    const tabBarStore = useTabBarStore()
+const appStore = useAppStore()
+const tabBarStore = useTabBarStore()
 
-    const affixRef = ref()
-    const tagList = computed(() => {
-        return tabBarStore.getTabList
-    })
-    const offsetTop = computed(() => {
-        return appStore.navbar ? 60 : 0
-    })
+const affixRef = ref()
+const tagList = computed(() => {
+    return tabBarStore.getTabList
+})
+const offsetTop = computed(() => {
+    return appStore.navbar ? 60 : 0
+})
 
-    watch(
-        () => appStore.navbar,
-        () => {
-            affixRef.value.updatePosition()
-        }
-    )
-    listenerRouteChange((route) => {
-        if (!route.meta.noAffix && !tagList.value.some((tag) => tag.fullPath === route.fullPath)) {
-            tabBarStore.updateTabList(route)
-        }
-    }, true)
+watch(
+    () => appStore.navbar,
+    () => {
+        affixRef.value.updatePosition()
+    }
+)
+listenerRouteChange((route) => {
+    if (!route.meta.noAffix && !tagList.value.some((tag) => tag.fullPath === route.fullPath)) {
+        tabBarStore.updateTabList(route)
+    }
+}, true)
 
-    onUnmounted(() => {
-        removeRouteListener()
-    })
+onUnmounted(() => {
+    removeRouteListener()
+})
 </script>
 
 <style scoped lang="less">
-    .tab-bar-container {
-        position: relative;
+.tab-bar-container {
+    position: relative;
+    background-color: var(--color-bg-2);
+    .tab-bar-box {
+        display: flex;
+        padding: 0 0 0 20px;
         background-color: var(--color-bg-2);
-        .tab-bar-box {
-            display: flex;
-            padding: 0 0 0 20px;
-            background-color: var(--color-bg-2);
-            border-bottom: 1px solid var(--color-border);
-            .tab-bar-scroll {
-                height: 32px;
-                flex: 1;
-                overflow: hidden;
-                .tags-wrap {
-                    padding: 4px 0;
-                    height: 48px;
-                    white-space: nowrap;
-                    overflow-x: auto;
+        border-bottom: 1px solid var(--color-border);
+        .tab-bar-scroll {
+            height: 32px;
+            flex: 1;
+            overflow: hidden;
+            .tags-wrap {
+                padding: 4px 0;
+                height: 48px;
+                white-space: nowrap;
+                overflow-x: auto;
 
-                    :deep(.arco-tag) {
-                        display: inline-flex;
-                        align-items: center;
-                        margin-right: 6px;
-                        cursor: pointer;
-                        &:first-child {
-                            .arco-tag-close-btn {
-                                display: none;
-                            }
+                :deep(.arco-tag) {
+                    display: inline-flex;
+                    align-items: center;
+                    margin-right: 6px;
+                    cursor: pointer;
+                    &:first-child {
+                        .arco-tag-close-btn {
+                            display: none;
                         }
                     }
                 }
             }
         }
-
-        .tag-bar-operation {
-            width: 100px;
-            height: 32px;
-        }
     }
+
+    .tag-bar-operation {
+        width: 100px;
+        height: 32px;
+    }
+}
 </style>