Situation-Awareness-Platform-Frontend/src/components/Repo/RepoHeaderInfo/index.vue

<template>
  <div class="repo-info">
    <d-row :gutter="64">
      <d-col flex="1" class="min-w-0">
        <div class="flex items-end flex-wrap gap-x-4 gap-y-1">
          <div class="text-[20px]">
            <span v-for="(path, index) in breadcrumb" :key="index">
              <GLink :href="path.href" >
                <span class="font-color-t1 font-semibold" :class="!index ? 'max-w-[200px] whitespace-nowrap table-cell overflow-ellipsis overflow-hidden' : 'break-all'">{{ path.label }}</span>
              </GLink>
              <span v-if="index !== breadcrumb.length - 1" class="breadcrumb-splitter font-color-t1"> / </span>
            </span>
          </div>
          <template v-for="(item, index) in topicData.officialTopicList" :key="index">
            <div class="official-topic mb-0.5">
              <GIcon name="gt-plane-officialCertification" />
              <span class="ml-1">{{ item.name }}</span>
            </div>
          </template>
          <div v-if="repoInfo.visibility === 'private'" class="repo-visible font-color-t2 inline-flex items-center justify-center text-xs">
            私有
          </div>
        </div>
        <div class="mt-4 flex items-center flex-wrap gap-x-4 gap-y-1" v-if="repoInfo?.forked_from_project">
          <span class="font-color-t2 cursor-pointer" :class="{'cursor-pointer': repoInfo.value?.forked_from_project?.web_url}" @click="toForkRepo">
            fork 源：{{ repoInfo?.forked_from_project?.name_with_namespace }}
          </span>
          <div v-if="isAdminOperate" class="fork-btn" @click="handleSync()">
            <GIcon name="gt-plane-synchronous" class="mr-1" />
            同步源项目
            <GIcon size="14" name="gt-line-right" class="ml-1" />
          </div>
        </div>
        <template v-if="isPhone">
          <RepoData class="mt-4" :widthType="widthType" @update-star="handleUpdateStarNumber" />
          <RepoTopic :tagList="tagList" />
          <RepoAction class="mt-3" />
          <!-- 只在项目首页展示 -->
          <DownloadChart v-if="route?.name === 'repoDashboard'" :repoId="repoId" class="mt-8" />
        </template>
        <template v-else>
          <RepoTopic :tagList="tagList" />
        </template>
      </d-col>
      <d-col v-if="!isPhone">
        <RepoData :widthType="widthType" @update-star="handleUpdateStarNumber" />
      </d-col>
    </d-row>

    <d-row align="middle" class="mt-32">
      <d-col flex="1">
        <NewNavTabs />
      </d-col>
      <d-col v-if="!isPhone">
        <RepoAction />
      </d-col>
    </d-row>
    <SyncFork ref="syncFork" :repoId="repoId" :repoInfo="repoInfo" />
  </div>
</template>
<script lang="ts" setup>
import { ref, onUnmounted, watch, computed } from 'vue';
import RepoData from './RepoData.vue';
import RepoAction from './RepoAction.vue';
import DownloadChart from '@/components/Repo/DownloadChart.vue';
import NewNavTabs from '@/components/NavTabs/NewNavTabs.vue';
import RepoTopic from './RepoTopic.vue';
import SyncFork from './SyncFork.vue';
import { addEventListener, offEvent } from '@/utils/eventBus';
import { reqCatch } from '@/utils/catch';
import { storeToRefs } from 'pinia';
import { useRouter, useRoute } from 'vue-router';
import * as types from '@/api/org/types';
import { getCommunityInfo } from '@/api/org/index';
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
import { orgInfoStore } from '@/stores/Org/index';
import { useRepoHeaderInit } from '@/utils/hooks/useRepoHeaderInit';
import { useRepoId } from '@/utils/hooks/useRepoId';
import { useAccountStore } from '@/stores/user';
import { getSettingsValues } from '@/api/repo';
import { repoInfoStore } from '@/stores/Repo';
import { useOrgId } from '@/utils/hooks/useOrgId';
import setting from '@/setting';
const props = withDefaults(
  defineProps<{
    widthType: string;
  }>(),
  {
    widthType: 'md'
  }
);

const { isLogin } = useAccountStore();
const { repoId } = useRepoId();
const { orgId } = useOrgId('/');
const route = useRoute();
const { access_level, repoInfo, isAdminOperate } = storeToRefs(repoInfoStore()); // pinia直接解构会失去响应式
const { setRepoInfo } = repoInfoStore();
// 获取组织namespace
const { namespace } = getOrgInfo();

const { initRepoDashboard, validLinks, topicData } = useRepoHeaderInit(isLogin);
initRepoDashboard();

const tagList = ref(validLinks.value);
const isPhone = computed(() => ['lg', 'sm'].includes(props.widthType));

const visiMap = new Map([
  ['public', '公开'],
  ['private', '私有'],
  ['internal', '内部']
]);

const toForkRepo = () => {
  if (repoInfo.value?.forked_from_project?.web_url) {
    location.href = repoInfo.value?.forked_from_project?.web_url;
  }
};

const router = useRouter();
const breadcrumb = computed(() => {
  const pathStrList = repoInfo.value.name_with_namespace?.split('/');
  const pathList = pathStrList.map((item) => ({
    label: item
  }));

  // 第一个路由带链接
  if (pathList.length === 2) {
    pathList[0].href = router.resolve({
      name: 'homepage',
      params: { namespace: orgId.value }
    }).path;
    pathList[1].href = router.resolve({
      name: 'repoDashboard'
    }).path;
  }
  return pathList;
});

// 获取仓库
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);
  }
};

async function getModuleState() {
  const res = await getSettingsValues({
    repoId: repoId.value,
    group_id: namespace.value
  });
  if (res.data) {
    const { modules } = res.data.data;
    modules.forEach(({ key, value }) => {
      if (key === 'COMMUNITY' && value === '1') {
        getCommunityInfoFun();
      }
    });
  }
}
const handleUpdateStarNumber = (params:Record<string, any>) => {
  setRepoInfo(params);
};
const syncFork = ref(null);
const handleSync = () => {
  syncFork.value.handleOpen();
};

// @TODO 此处只用于repo切换时，读取项目模块配置信息。是否直接从repo详情获取？
watch(repoId, () => getModuleState(), { flush: 'post', immediate: true });

addEventListener('updateNaviBar', getModuleState);
onUnmounted(() => offEvent('updateNaviBar', getModuleState));

watch(() => topicData.userTopicList, val => {
  if (val && val.length) {
    tagList.value = validLinks.value.concat(topicData.userTopicList);
  }
});

watch(() => validLinks.value, val => {
  if (val && val.length) {
    tagList.value = validLinks.value.concat(topicData.userTopicList);
  }
}, { deep: true });

</script>
<style scoped lang="scss">
.repo-info {
  .repo-visible {
    border-radius: 14px;
    border: 1px solid var(--devui-btn-common-border-color);
    padding: 7px;
    line-height: 16px;
    height: 24px;
  }
  .official-topic {
    background: rgba(#2951E0, 0.12);
    border-radius: 4px;
    padding: 0 8px;
    height: 22px;
    color: #2951E0;
    font-weight: 600;
  }
  .status-btn-tag {
    height: 24px;
    border-radius: 12px;
    border: 1px solid #e3e3ee;
    padding: 0 8px;
    font-size: 12px;
    &:hover {
      background: #f1f1f8;
      color: #000 !important;
    }
    &:not(:last-of-type) {
      margin-right: 4px;
    }
  }
  .fork-btn {
    border-radius: 4px;
    border: 1px solid #E3E3EE;
    background: #fff;
    padding: 2px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    &:hover {
      background: linear-gradient(0deg, rgba(188, 188, 208, 0.1) 0%, rgba(188, 188, 208, 0.1) 100%), var(--White, #fff);
    }
  }
}
</style>