搜索结果列表页面开发

src/layouts/RepoLayout/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <DefaultLayout class="g-repo-layout">
+    <template #contentBanner v-if="hasPermission">
+      <div class="g-repo-header">
+        <ContentLayout>
+          <div class="pt-8 g-repo-dashboard-header">
+            <div class="g-repo-dashboard-width">
+              <RepoHeaderInfo :widthType="widthType" />
+            </div>
+          </div>
+        </ContentLayout>
+      </div>
+      <div class="g-archived" v-if="isArchived">此项目已归档</div>
+    </template>
+    <template #content>
+      <ErrorPage :code="errorCode" v-if="errorCode" />
+    </template>
+    <template v-if="hasPermission" #sidebar>
+      <NavSidebar :key="route.fullPath" :showAvatar="false" />
+    </template>
+  </DefaultLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { getSettingsValues } from '@/api/repo';
+import { reqCatch } from '@/utils/catch';
+import { useRepoId } from '@/utils/hooks/useRepoId';
+import { repoInfoStore } from '@/stores/Repo';
+import { useGlobalInfoStore } from '@/stores/Global';
+import { storeToRefs } from 'pinia';
+
+import DefaultLayout from '@/layouts/DefaultLayout/index.vue';
+import NavSidebar from '@/components/NavSidebar/index.vue';
+import { addEventListener, offEvent } from '@/utils/eventBus';
+import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
+import * as types from '@/api/org/types';
+import { getCommunityInfo } from '@/api/org/index';
+import { orgInfoStore } from '@/stores/Org/index';
+import setting from '@/setting';
+import ErrorPage from '@/views/ErrorPage/index.vue';
+import { usePagePermission } from '@/layouts/hooks/usePagePermission';
+import RepoHeaderInfo from '@/components/Repo/RepoHeaderInfo/index.vue';
+import ContentLayout from '@/components/ContentLayout/index.vue';
+import { usePageResize } from '@/utils/hooks/usePageResize';
+
+const { repoId } = useRepoId();
+const { widthType } = usePageResize();
+const { access_level, isPrivate, repoInfo, isArchived } = storeToRefs(repoInfoStore()); // pinia直接解构会失去响应式
+const { hasPermission } = usePagePermission(access_level.value, isPrivate.value);
+const globalInfo = useGlobalInfoStore();
+globalInfo.updateMenuNum('repoIssues', repoInfo.value.open_issues_count);
+globalInfo.updateMenuNum('repoMerge', repoInfo.value.open_merge_requests_count);
+globalInfo.updateMenuNum('repoMember', repoInfo.value.member_count);
+
+// 根据权限及是否允许显示设置错误页面
+const errorCode = computed(() => {
+  if (globalInfo.isNotFound) {
+    return 404;
+  }
+  if (!hasPermission.value) {
+    return 403;
+  }
+  return null;
+})
+
+// 获取组织namespace
+const { namespace } = getOrgInfo();
+const route = useRoute();
+
+// 获取仓库
+const orgStore = orgInfoStore();
+// 社区基本信息
+const getCommunityInfoFun = async() => {
+  const params: types.commonGroupReqType = {
+    orgId: namespace.value
+  };
+  const { data, error } = await reqCatch(getCommunityInfo, params);
+  if (!error && data) {
+    orgStore.setCommunityUrl({
+      communityUrl: `https://${data.data.custom_domain}`,
+      communityactivityUrl: `https://${data.data.custom_domain}/activelist`
+    });
+    orgStore.setCommunityInfo(data.data);
+  }
+};
+
+const filterFn = ref<Function | null>(null);
+const nameMap = new Map([
+  ['WIKI', 'repoWiki'],
+  ['ISSUE', 'repoIssues'],
+  ['MERGE_REQUEST', 'repoMerge'],
+  ['FORK', 'repoFork'],
+  ['ANALYSIS', 'repoAnalysis'],
+  ['DISCUSSION', 'repoDiscussion'],
+  ['COMMUNITY', 'reqCommunity']
+]);
+async function getModuleState() {
+  const res = await getSettingsValues({
+    repoId: repoId.value,
+    group_id: namespace.value
+  });
+  if (res.data) {
+    const { modules } = res.data.data;
+    const vModules = new Set();
+    modules.forEach(({ key, value }) => {
+      // 判断是否获取社区基本信息，拿到社区跳转链接
+      if (key === 'COMMUNITY' && value === '1') {
+        getCommunityInfoFun();
+      }
+      if (nameMap.get(key) && value === '0') vModules.add(nameMap.get(key));
+    });
+    filterFn.value = (item: any) => {
+      const isAllowed = !item.permission || access_level.value >= setting.role[item.permission];
+      if (item.id === 'reqCommunity') {
+        const par = modules.find((item: any) => item.key === 'COMMUNITY');
+        return !!(par && par.value === '1');
+      }
+      const isEnabled = !vModules.has(item.id);
+      return isEnabled && isAllowed;
+    };
+  }
+}
+
+// @TODO 此处只用于repo切换时，读取项目模块配置信息。是否直接从repo详情获取？
+watch(repoId, () => getModuleState(), { flush: 'post', immediate: true });
+
+addEventListener('updateNaviBar', getModuleState);
+onUnmounted(() => offEvent('updateNaviBar', getModuleState));
+</script>
+
+<style scoped lang="scss">
+.breadcrumb {
+  :deep(.g-link) {
+    font-weight: 500;
+    color: var(--color-CG600);
+    line-height: 20px;
+
+    &:last-child {
+      color: var(--color-G900);
+    }
+  }
+
+  &-splitter {
+    font-weight: 500;
+    color: var(--color-CG600);
+    line-height: 20px;
+    padding: 0 2px;
+  }
+}
+.g-archived {
+  width: 100%;
+  padding: 8px;
+  background-color: var(--color-Y100);
+  font-weight: bold;
+  color: var(--color-G900);
+  line-height: 20px;
+  text-align: center;
+  border-bottom: 1px solid var(--color-Y200);
+}
+.g-repo-header {
+  background-color: #F9F9FB;
+  border-bottom: 1px solid #F1F1F8;
+  position: relative;
+  z-index: 1;
+}
+.g-repo-content {
+  .g-repo-content-width {
+    max-width: 1536px;
+    margin: 0 auto;
+  }
+  .g-repo-content-header {
+    border-bottom: 1px solid #f1f1f8;
+    background: #f9f9fb;
+  }
+}
+.g-repo-layout {
+  :deep(.devui-layout) {
+    background-color: #fff;
+  }
+  :deep(.devui-layout__content) {
+    background: #fff;
+  }
+}
+</style>