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>

cdTMP/src/layout/project-layout.vue

@@ -0,0 +1,123 @@
+<template>
+    <a-layout class="layout">
+        <div class="navbar layout-navbar">
+            <NavBar :title="$route.query.name" />
+        </div>
+        <a-layout class="layout">
+            <a-layout class="layout layout-demo">
+                <a-layout-sider class="layout-sider">
+                    <div class="p-2">
+                        <a-input-group class="mb-2 w-full flex items-center" size="mini">
+                            <a-input style="height: 32px"></a-input>
+                            <a-button>搜索</a-button>
+                        </a-input-group>
+                        <a-tree
+                            :data="treeData"
+                            size="small"
+                            block-node
+                            animation
+                            @select="pointNode"
+                            :load-more="loadMore"
+                            showLine
+                            ref="treeRef"
+                        ></a-tree>
+                    </div>
+                </a-layout-sider>
+            </a-layout>
+            <a-layout class="layout-content">
+                <a-layout-content class="work-area">
+                    <PageLayout />
+                </a-layout-content>
+            </a-layout>
+        </a-layout>
+    </a-layout>
+</template>
+
+<script setup>
+import { provide, ref, onMounted } from "vue"
+import NavBar from "@/layout/components/navbar.vue"
+import PageLayout from "@/layout/page-layout.vue"
+import projectApi from "@/api/project/project"
+import { useRoute } from "vue-router"
+// 缩小后的menu菜单
+const drawerVisible = ref(false)
+provide("toggleDrawerMenu", () => {
+    drawerVisible.value = !drawerVisible.value
+})
+// 树状
+/// 初始化round轮次数据
+const route = useRoute()
+const treeRef = ref()
+const treeData = ref([])
+const projectId = ref(route.query.id)
+onMounted(async () => {
+    const roundData = await projectApi.getRoundInfo(projectId)
+    treeData.value = roundData
+})
+/// 点击树状节点-参数传入为key的值
+const pointNode = (value, data) => {
+    console.log("点击的节点为:", value)
+    console.log(data.node)
+}
+/// 动态加载函数-参数当前节点点击下箭头
+const loadMore = (nodeData) => {
+    console.log("动态加载的节点为：", nodeData) // 输出点击节点的key,以及添加上去的level属性
+    return new Promise(async (resolve) => {
+        const res = await projectApi.getDemandInfo(route.query.id, nodeData.key, nodeData.level)
+        nodeData.children = res
+        resolve()
+    })
+}
+</script>
+
+<style lang="less" scoped>
+.tree {
+    height: 100%;
+}
+.layout-demo :deep(.arco-layout-sider) {
+    width: 300px !important;
+}
+.layout {
+    width: 100%;
+    height: 100%;
+}
+
+.layout-navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    width: 100%;
+    height: 60px;
+}
+
+.layout-sider {
+    position: fixed;
+    top: 60px;
+    left: 0;
+    z-index: 99;
+    height: 100%;
+    transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+    &::after {
+        position: absolute;
+        top: 0;
+        right: -1px;
+        display: block;
+        width: 1px;
+        height: 100%;
+        background-color: var(--color-border);
+        content: "";
+    }
+
+    > :deep(.arco-layout-sider-children) {
+        overflow-y: hidden;
+    }
+}
+
+.layout-content {
+    min-height: 100vh;
+    overflow-y: auto;
+    background-color: var(--color-fill-2);
+    transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+}
+</style>