3322

cdTMP/src/layout/components/navbar.vue

@@ -13,7 +13,8 @@
                 />
             </a-space>
         </div>
-        <div class="center-side">
+        <div class="center-side flex items-center justify-center">
+            {{ title }}
             <Menu v-if="topMenu"></Menu>
         </div>
         <ul class="right-side">
@@ -110,6 +111,13 @@ import useUser from "@/hooks/logout"
 import { Message } from "@arco-design/web-vue"
 import Menu from "@/layout/components/menu.vue"
 const appStore = useAppStore()
+// title管理-默认在后台
+const props = defineProps({
+    title: {
+        type: String,
+        default: ""
+    }
+})
 // 是否menu在顶部-暂时不用
 const topMenu = computed(() => appStore.topMenu && appStore.menu)
 // 全屏设置,使用了@vueuse/core

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

@@ -0,0 +1,89 @@
+<template>
+    <div class="tab-bar-container">
+        <a-affix ref="affixRef" :offset-top="offsetTop">
+            <div class="tab-bar-box">
+                <div class="tab-bar-scroll">
+                    <div class="tags-wrap">
+                        <tab-item v-for="(tag, index) in tagList" :key="tag.fullPath" :index="index" :item-data="tag" />
+                    </div>
+                </div>
+                <div class="tag-bar-operation"></div>
+            </div>
+        </a-affix>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onUnmounted } from "vue"
+import { listenerRouteChange, removeRouteListener } from "@/utils/route-listener"
+import { useAppStore, useProjectTabBarStore } from "@/store"
+import tabItem from "./tab-item.vue"
+
+const appStore = useAppStore()
+const tabBarStore = useProjectTabBarStore()
+
+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)
+
+onUnmounted(() => {
+    removeRouteListener()
+})
+</script>
+
+<style scoped lang="less">
+.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);
+        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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .tag-bar-operation {
+        width: 100px;
+        height: 32px;
+    }
+}
+</style>