Situation-Awareness-Platform-Frontend/src/views/Jyh/Version/Detail/VersionInfo.vue

<template>
  <div class="version-info">
    <Card simple class="jyh-card mb-4">
      <div class="card-title">基本信息</div>
      <d-row class="mb-3">
        <d-col :span="8">
          <span class="card-key width-90">软件名称</span>
          <span class="card-val">{{ ReleaseInfo.basicInfo.softwareName || '--' }}</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">软件版本</span>
          <span class="card-val">{{ ReleaseInfo.basicInfo.softwareVersion || '--' }}</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">主语言类型</span>
          <span class="card-val">{{ ReleaseInfo.basicInfo.mainLanguageType || '--' }}</span>
        </d-col>
      </d-row>
      <d-row>
        <d-col :span="8">
          <span class="card-key width-90">开发商</span>
          <span class="card-val">{{ ReleaseInfo.basicInfo.developer || '--' }}</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">发布时间</span>
          <span class="card-val">{{ ReleaseInfo.basicInfo.releaseDate || '--' }}</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">版本描述</span>
          <span class="card-val">{{ ReleaseInfo.basicInfo.versionDescription || '--' }}</span>
        </d-col>
      </d-row>
    </Card>

    <Card simple class="jyh-card mb-4">
      <div class="card-title">参考信息</div>
      <d-row class="mb-3">
        <d-col :span="8">
          <span class="card-key width-110">集成风险</span>
          <d-tag color="#F6933B">{{ jcfxList[ReleaseInfo.referenceInfo.integrationRisk ||  ReleaseInfo.basicInfo.integrationRiskLevel] || '--' }}</d-tag>
          <!--          <span class="card-val">{{ ReleaseInfo.referenceInfo.integrationRisk || ReleaseInfo.basicInfo.integrationRisk || '&#45;&#45;' }}</span>-->
        </d-col>
        <d-col :span="8">
          <span class="card-key width-110">代码量(L)</span>
          <span class="card-val">{{ ReleaseInfo.referenceInfo.codeQuantity || '--' }}</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-110">漏洞数量</span>
          <a style="cursor: pointer" @click="handleTabChange('ldxx')" class="card-url">
            {{ ReleaseInfo.referenceInfo.vulnerabilityCount || '--' }}
          </a>
        </d-col>
      </d-row>
      <d-row class="mb-3">
        <d-col :span="8">
          <span class="card-key width-110">社区EOL日期</span>
          <span class="card-val">{{ ReleaseInfo.referenceInfo.communityEolDate || '--' }}</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-110">所属领域/产业</span>
          <span class="card-val">{{ getIndustryName(ReleaseInfo.referenceInfo.industry) || '--' }}</span>
        </d-col>
        <!--        <d-col :span="8">-->
        <!--          <span class="card-key width-110">版本火车名称</span>-->
        <!--          <span class="card-val">CleanSource V8.0</span>-->
        <!--        </d-col>-->
      </d-row>
      <d-row class="mb-3">
        <d-col :span="24">
          <span class="card-key width-140">源码下载包地址</span>
          <a class="card-url" :href="ReleaseInfo.referenceInfo.sourceCodeDownloadUrl || '--'">{{ ReleaseInfo.referenceInfo.sourceCodeDownloadUrl || ReleaseInfo.basicInfo.sourceDownloadUrl || '--' }}</a>
        </d-col>
      </d-row>
      <d-row class="mb-3">
        <d-col :span="24">
          <span class="card-key width-140">源码社区托管地址</span>
          <a class="card-url" :href="ReleaseInfo.referenceInfo.sourceCodeCommunityUrl || '--'">{{ ReleaseInfo.referenceInfo.sourceCodeCommunityUrl || ReleaseInfo.basicInfo.communityWebsite || '--' }}</a>
        </d-col>
      </d-row>
      <d-row>
        <d-col :span="24">
          <span class="card-key width-140">社区EOL披露地址</span>
          <a class="card-url" :href="ReleaseInfo.referenceInfo.communityEolDisclosureUrl || '--'">{{ ReleaseInfo.referenceInfo.communityEolDisclosureUrl || ReleaseInfo.basicInfo.eolNoticeUrl || '--' }}</a>
        </d-col>
      </d-row>
    </Card>

    <Card simple class="jyh-card mb-4">
      <div class="card-title">开源主License信息</div>
      <div class="mb-3">
        <d-table class="jyh-table jyh-table-2" :header-bg="true" :data="ReleaseInfo.openSourceLicenseList">
          <d-column type="index" header="序号" width="80"></d-column>
          <!--          <d-column field="id" header="编号"></d-column>-->
          <d-column field="name" header="名称"></d-column>
          <d-column field="description" header="描述"></d-column>
          <!--          <d-column field="applicationScenario" header="应用场景"></d-column>-->
        </d-table>
      </div>
      <!--      <d-row>-->
      <!--        <d-col :span="24">-->
      <!--          <span class="card-key width-140">主License分析报告</span>-->
      <!--          <a class="card-url" href="https://designcloud.uiplus.huawei.com/developer/main/index.html">https://designcloud.uiplus.huawei.com/developer/main/index.html</a>-->
      <!--        </d-col>-->
      <!--      </d-row>-->
    </Card>
    <Card simple class="jyh-card mb-4">
      <div class="card-title">Copyright报告</div>
      <div class="mb-3">
        <d-table
          class="jyh-table jyh-table-2"
          :header-bg="true"
          :data="[
            {
              reportName: 'Copyright (c) Isaac Z. Schlueter and Contributors',
              entryTime: '2025-03-20'
            }
          ]"
        >
          <d-column field="reportName" header="Copyright报告">
            <template #default="scope">
              {{ scope.row.reportName }}
            </template>
          </d-column>
          <d-column field="entryTime" header="录入时间"></d-column>
        </d-table>
      </div>
      <!--      <d-row>-->
      <!--        <d-col :span="24">-->
      <!--          <span class="card-key width-140">主License分析报告</span>-->
      <!--          <a class="card-url" href="https://designcloud.uiplus.huawei.com/developer/main/index.html">https://designcloud.uiplus.huawei.com/developer/main/index.html</a>-->
      <!--        </d-col>-->
      <!--      </d-row>-->
    </Card>

    <Card simple class="jyh-card mb-4">
      <div class="card-title">实体</div>
      <div>
        <d-table
          class="jyh-table jyh-table-2"
          :header-bg="true"
          :data="[
            {
              type: '二进制包',
              entityPackageDownloadUrl: 'https://raw.gitcode.com/file/inherits/inherits.tar',
              fileName: 'inherits.tar',
              entryTime: '2025-03-20'
            }
          ]"
        >
          <d-column field="type" header="类型"></d-column>
          <d-column field="entityPackageDownloadUrl" header="实体包下载地址">
            <template #default="scope">
              {{ scope.row.entityPackageDownloadUrl }}
            </template>
          </d-column>
          <d-column field="fileName" header="文件名称"></d-column>
          <d-column field="entryTime" header="录入时间"></d-column>
        </d-table>
      </div>
    </Card>

    <d-modal
      title="完整性结果详情"
      v-model="visible"
      class="file-search-modal"
      :style="{ width: '800px', height: '400px' }"
      @close="handleClose"
    >
      <Card simple class="jyh-card mb-4" style="box-shadow: none; padding: 0">
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区哈希类型</span>
            <span class="card-val">sha512</span>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区哈希值</span>
            <span class="card-val">sha5123b831bee9d575a2729065f830a65f830a65f83a65f852...</span>
            <d-tooltip content="复制" :mouse-enter-delay="800">
              <Icon name="icon-copy" class="ml-10 w-4 flex-shrink-0" color="#9FA7B3" @click="handleCopy" />
            </d-tooltip>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区签名校验结果</span>
            <span class="card-val card-success">通过</span>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区签名</span>
            <span class="card-val">确认无社区签名</span>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区签名下载地址</span>
            <span class="card-val">确认无社区签名</span>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区公钥</span>
            <span class="card-val">确认无社区签名</span>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区公钥下载地址</span>
            <span class="card-val">确认无社区签名</span>
          </d-col>
        </d-row>
      </Card>
      <template #footer>
        <d-modal-footer style="text-align: center">
          <d-button variant="solid" color="primary" @click="handleClose">确认</d-button>
          <d-button @click="handleClose">取消</d-button>
        </d-modal-footer>
      </template>
    </d-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, onMounted, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { discussDetailType, userInfoType } from '@/api/discussion/types';
import { Message } from 'vue-devui/message';
import { useClipboard } from '@vueuse/core/index';
import { releaseInfo } from '@/api/jyh';
import { useGlobalInfoStore } from '@/stores/Global';
const route = useRoute();
const emits = defineEmits(['changeTabs']);

// 触发事件的方法
const handleTabChange = (tabName) => {
  emits('changeTabs', tabName); // 触发 changeTabs 事件，并传递参数
};
const jcfxList = ['','低','中','高'];
const licenseTableData = ref([{ code: '05822156', name: 'MIT License', detail: 'integer' }]);
const CopyrightTableData = ref([{ code: '05822156', detail: 'integer' }]);
const visible = ref(false);
const ReleaseInfo = ref({
  basicInfo: {},
  copyRightReportList: [],
  entityList: [],
  networkSecurity: {},
  openSourceLicenseList: [],
  referenceInfo: {}
});
const globalInfo = useGlobalInfoStore();
const industryList = ref(globalInfo.industryList);
const getIndustryName = (value) => {
  const industry = industryList.value.find((item) => item.value === value);
  return industry ? industry.name : '未知行业'; // 如果找不到，返回默认值
};

const router = useRouter();

// 跳转
const gotoDetail = (row) => {
  // 后续请换成params，暂时params传参没传过去
  router.push({
    path: 'repoDetail/' + row.version,
    params: { tab: 'ldxx' } // 指定需要激活的 Tab
  });
};

// 跳转
const handleClose = (row) => {
  visible.value = false;
};

const { copy } = useClipboard();
const handleCopy = (event) => {
  event.stopPropagation();

  copy('');
  Message.success('复制成功');
};

const getReleaseInfo = async (versionId) => {
  const { data, error } = await releaseInfo({ softwareId: versionId });
  if (!error && data) {
    ReleaseInfo.value = data.data;
  }
};

onMounted(() => {
  const versionId = route.params.versionId; // 获取路由参数 versionId
  if (versionId) {
    getReleaseInfo(versionId); // 调用接口获取数据
  }
});
</script>

<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';

.card-key {
  color: #777777;
  font-family: HarmonyOS Sans SC;
  font-weight: regular;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: left;
  width: 112px;
  margin-right: 20px;
}

.card-val {
  color: #191919;
  font-family: HarmonyOS Sans SC;
  font-weight: regular;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0px;
  text-align: left;
}

.card-success {
  display: inline-block;
  border-radius: 4px;
  background: #81c054;
  color: #ffffff;
  font-family: HarmonyOS Sans SC;
  font-weight: medium;
  font-size: 12px;
  line-height: 20px;
  height: 20px;
  letter-spacing: 0px;
  text-align: left;
  padding: 0 8px;
}
</style>