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

<template>
  <!-- 导入失败项目不展示 -->
  <div v-if="repoInfo?.import_status !== 'failed'"  class="flex font-color-t1">
    <!-- <div v-if="isVisitorOperate" class="mr-2 clone-btn px-4 flex cursor-pointer items-center" @click="handleEnter">
      <GIcon name="gt-plane-code-red" class="mr-2" />用编辑器打开
    </div> -->
    <div  v-if="!repoInfo.empty_repo" class="clone-btn px-4 flex cursor-pointer items-center" @click="download">
      <GIcon name="gt-plane-upload-red" class="mr-2" />下载zip
    </div>
    <div class="ml-2 clone-btn px-4 flex cursor-pointer items-center" @click="handleClone(true)">
      <GIcon name="gt-plane-terminal-red" class="mr-2" />Clone
    </div>
    <Notification type="warning" title="下载项目" v-model="showWarn">
      <div>
        <span>{{ downloadWarn }}</span>
      </div>
    </Notification>
    <CloneRepo v-model="cloneVisible" :repoInfo="repoInfo" @handleClose="handleClone(false)" />
  </div>
</template>
<script lang="ts" setup>
import { onUnmounted, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { Notification } from 'vue-devui/notification';
import CloneRepo from './CloneRepo.vue';
import { useLoginCheck } from '@/utils/hooks/useLoginCheck';
import { useRepoId } from '@/utils/hooks/useRepoId';
import { repoInfoStore } from '@/stores/Repo';
import { useReport } from '@/utils/hooks/useReport';
import { storeToRefs } from 'pinia';
import { openEditor } from '@/utils/editor';

const route = useRoute();
const { repoId } = useRepoId('/');
const { repoInfo, isVisitorOperate } = storeToRefs(repoInfoStore()); // pinia直接解构会失去响应式
const cloneVisible = ref(false);

const fileDownloadBaseURL = (import.meta as any).env.VITE_DOWNLOAD_HOST;

const { loginCheck } = useLoginCheck();
const showWarn = ref(false);
const downLoadWait = ref(30); // 文件频繁下载间隔
const downloadWarn = ref(`文件频繁下载，请${downLoadWait.value}s后再试`);

const handleWait = ref<any>(null);
function start() {
  handleWait.value = setInterval(() => {
    downLoadWait.value--;
    if (downLoadWait.value <= 0) {
      clearInterval(handleWait.value);
      handleWait.value = null;
      downLoadWait.value = 30;
    }
  }, 1000);
}

const reportClone = (url: String, cloneType: string, fileType?: string) => {
  useReport('clone_repo_fr', {
    repo_title: repoInfo.value?.name,
    repo_namespace: repoInfo.value?.namespace?.name,
    namespace_type: repoInfo.value?.namespace?.kind,
    clone_url: url,
    type: cloneType,
    file_type: fileType
  });
};
// const handleEnter = ()=> {
//   const { id, default_branch } = repoInfo.value;
//   openEditor({ project_id: String(id) , file_path: '', branch: curBranch.value || default_branch})
// }
const curBranch = computed(() => route.params.branchName);
const download = () => {
  const url = `${fileDownloadBaseURL}/${repoId.value}/archive/refs/heads/${curBranch.value || repoInfo.value.default_branch}.zip`;
  if (handleWait.value) {
    // 阻止文件下载
    downloadWarn.value = `文件频繁下载，请${downLoadWait.value}s后再试`;
    showWarn.value = true;
    return;
  }
  start();
  if (loginCheck('下载源码')) {
    // 上报
    reportClone(url, 'download', 'zip');
    window.open(url, '_self');
  }
};

const handleClone = (visible: boolean) => {
  cloneVisible.value = visible;
};

onUnmounted(() => {
  if (handleWait.value) {
    clearInterval(handleWait.value);
    handleWait.value = null;
    downLoadWait.value = 30;
  }
});
</script>
<style lang="scss" scoped>
.clone-btn {
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--devui-btn-common-border-color);
  background: #fff;
  &:hover {
    background: linear-gradient(0deg, rgba(188, 188, 208, 0.1) 0%, rgba(188, 188, 208, 0.1) 100%), var(--White, #fff);
  }
}
</style>