搜索结果列表页面开发

src/components/RepoNavTabs/index.vue

@@ -0,0 +1,77 @@
+<template>
+  <d-menu class="g-menu" mode="horizontal" :default-select-keys="[id]" @select="handleNav">
+    <d-menu-item
+      v-for="item in menulist"
+      :key="item.id"
+      class="g-menu-item"
+      :class="{ 'devui-menu-item-select': pType === item.id }"
+    >
+      {{ item.label }}
+    </d-menu-item>
+  </d-menu>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue';
+import { onBeforeRouteUpdate, useRouter, useRoute } from 'vue-router';
+import getRepoId from '@/utils/getRepoId';
+import { getRepo } from '@/api/repo';
+import { type listType } from './types';
+import menu from '@/constant/menu';
+
+// const props = withDefaults(defineProps<{
+//   data?: listType[];
+// }>(), {
+//   data: () => []
+// });
+
+const repoInfo = ref({});
+const initMenu = menu['repo'];
+
+const route = useRoute();
+const menulist = ref<listType[]>([...initMenu]);
+const pType = computed(() => route.meta.pType); // 页面归属的tab高亮
+
+const router = useRouter();
+const id = ref(router.currentRoute.value.name);
+
+const setRepoInfo = async(to: object) => {
+  const res = await getRepo({ repoId: getRepoId() });
+  if (!res.error) {
+    const resData = res?.data?.data;
+    repoInfo.value = resData;
+    const level = repoInfo.value?.permissions?.project_access?.access_level;
+    if (level && level >= 50) { // 项目管理员
+      menulist.value = initMenu;
+    } else {
+      menulist.value.pop();
+    }
+    id.value = to.name; // 页面加载，激活对应tab
+  }
+};
+
+onBeforeRouteUpdate((to) => {
+  id.value = to.name; // 页面加载，激活对应tab
+  setRepoInfo(to);
+});
+
+onMounted(() => {
+  setRepoInfo({ name: id.value });
+});
+
+// 点击tab跳转路由
+const handleNav = (val) => {
+  router.push({ name: val.key });
+};
+</script>
+
+<style lang="scss" scoped>
+.g-menu {
+  padding: 0;
+  height: 100%;
+  background-color: transparent;
+  .g-menu-item {
+    line-height: 45px;
+  }
+}
+</style>

src/components/RepoNavTabs/types.ts

@@ -0,0 +1,12 @@
+export interface itemProps {
+  id: string; // 标识符，这里为路由别名
+  label: string; // 标题
+  number?: number; // 显示数量
+}
+export interface propsType {
+  defaultActiveId?: string; // 默认激活tabId
+  tabList: itemProps[]; // tab列表设置
+}
+export interface listType {
+  [index: number]: itemProps;
+}