可信代码库-与gitlink对接iframe软件详情页开发
This commit is contained in:
@@ -145,9 +145,9 @@ export default [
|
||||
},
|
||||
|
||||
{
|
||||
path: '/repoDetails/:versionId',
|
||||
path: '/repoDetails/:versionId/:version?',
|
||||
name: 'RepoDetails',
|
||||
component: () => import('@/views/Jyh/Version/Detail/index2.vue'),
|
||||
component: () => import('@/views/Jyh/Version/Detail/repoDetails/index2.vue'),
|
||||
meta: {
|
||||
title: '软件版本详情',
|
||||
reportTitle: '软件版本详情页',
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, shallowRef } from 'vue';
|
||||
import { reactive, ref, shallowRef,defineProps } from 'vue';
|
||||
import TableFilter from '@/components/TableFilter/TableFilter.vue';
|
||||
import NoData from '@/components/NoData/NoData.vue';
|
||||
import MalwareDetail from '@/views/Jyh/Version/Detail/Malware/MalwareDetail.vue';
|
||||
@@ -154,8 +154,8 @@ enum ConfidenceCoefficientEnum {
|
||||
}
|
||||
|
||||
const route = useRoute();
|
||||
const props = defineProps(['versionId']);
|
||||
|
||||
const versionId = route.params.versionId;
|
||||
const searchText = ref('');
|
||||
const searchLoading = ref(false);
|
||||
const MalwareDetailRef = ref<InstanceType<typeof MalwareDetail> | null>(null)
|
||||
@@ -205,7 +205,7 @@ async function getMalwareList() {
|
||||
current: pager.pageIndex,
|
||||
size: pager.pageSize,
|
||||
taskId: '',
|
||||
softwareId: versionId
|
||||
softwareId: props.versionId
|
||||
};
|
||||
pager.total = 0;
|
||||
tableData.value = [];
|
||||
|
||||
506
src/views/Jyh/Version/Detail/repoDetails/VersionInfo.vue
Normal file
506
src/views/Jyh/Version/Detail/repoDetails/VersionInfo.vue
Normal file
@@ -0,0 +1,506 @@
|
||||
<template>
|
||||
<div class="version-info">
|
||||
<!-- <d-row style="margin-top: 16px" :gutter="16">-->
|
||||
<!-- <d-col v-for="item in vulnSegments" :span="12">-->
|
||||
<!-- <!– 安全漏洞进度条 –>-->
|
||||
<!-- <VulnProgress-->
|
||||
<!-- :total="item.total"-->
|
||||
<!-- :segments="item.value"-->
|
||||
<!-- :title="item.title"-->
|
||||
<!-- :suppressed="0"-->
|
||||
<!-- />-->
|
||||
<!-- </d-col>-->
|
||||
<!-- </d-row>-->
|
||||
<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?dayjs(ReleaseInfo.basicInfo.releaseDate).format('YYYY-MM-DD') :'--' }}</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">{{ ReleaseInfo.referenceInfo.integrationRisk || jcfxList[ReleaseInfo.basicInfo.integrationRiskLevel] || '--' }}</d-tag>
|
||||
<!-- <span class="card-val">{{ ReleaseInfo.referenceInfo.integrationRisk || ReleaseInfo.basicInfo.integrationRisk || '--' }}</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">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
<span class="card-key width-110">社区EOL日期</span>
|
||||
<span class="card-val">
|
||||
{{ ReleaseInfo.criticalSoftwareAIGenerateInfo.communityEolDate?dayjs(ReleaseInfo.criticalSoftwareAIGenerateInfo.communityEolDate).format('YYYY-MM-DD') :'--' }}</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">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
开源主License信息</div>
|
||||
<div class="mb-3">
|
||||
<d-table class="jyh-table jyh-table-2" :header-bg="true"
|
||||
:data="[
|
||||
{ name: ReleaseInfo.basicInfo.mainLicenseName || ReleaseInfo.criticalSoftwareAIGenerateInfo.mainLicenseName,
|
||||
description: ReleaseInfo.basicInfo.mainLicenseDescription || ReleaseInfo.criticalSoftwareAIGenerateInfo.mainLicenseDescription}
|
||||
]">
|
||||
<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">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
Copyright报告</div>
|
||||
<div class="mb-3">
|
||||
<d-table
|
||||
class="jyh-table jyh-table-2"
|
||||
:header-bg="true"
|
||||
:data="[
|
||||
{
|
||||
reportName: ReleaseInfo.basicInfo.copyrightReportName || ReleaseInfo.criticalSoftwareAIGenerateInfo.copyrightReportName,
|
||||
reportUrl: ReleaseInfo.basicInfo.copyrightReportUrl || ReleaseInfo.criticalSoftwareAIGenerateInfo.copyrightReportUrl,
|
||||
entryTime: ReleaseInfo.basicInfo.copyrightEntryTime || ReleaseInfo.criticalSoftwareAIGenerateInfo.copyrightEntryTime
|
||||
}
|
||||
]"
|
||||
>
|
||||
<d-column field="reportName" header="Copyright报告">
|
||||
<template #default="scope">
|
||||
<a :href="scope.row.reportUrl">{{ scope.row.reportName }}</a>
|
||||
</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="ReleaseInfo.entityInfoList"
|
||||
>
|
||||
<d-column field="entityType" header="类型"></d-column>
|
||||
<d-column field="entityDownloadUrl" header="实体包下载地址">
|
||||
<template #default="scope">
|
||||
<a :href="scope.row.entityDownloadUrl" target="_blank">{{ scope.row.entityDownloadUrl }}</a>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="entityFilename" header="文件名称"></d-column>
|
||||
<d-column field="entryTime" header="录入时间"></d-column>
|
||||
<d-column field="integrityCheckResult" header="完整性结果">
|
||||
<template #default="scope">
|
||||
<a @click="visible = true">{{ scope.row.integrityCheckResult }}</a>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card simple class="jyh-card mb-4">
|
||||
<div class="card-title">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
网络安全
|
||||
<!-- <span style="color: #3b82f6;font-size: 12px;font-weight: normal">(该数据由AI生成)</span>-->
|
||||
</div>
|
||||
<!-- <d-row class="mb-3">-->
|
||||
<!-- <d-col :span="24">-->
|
||||
<!-- <span class="card-key width-160">软件评分</span>-->
|
||||
<!-- <span class="card-val">{{ ReleaseInfo.networkSecurity.softwareRating || '--' }}</span>-->
|
||||
<!-- </d-col>-->
|
||||
<!-- </d-row>-->
|
||||
<d-row class="mb-3">
|
||||
<d-col :span="24">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
<span class="card-key width-160">社区安全问题求助</span>
|
||||
<a class="card-url" :href="ReleaseInfo.basicInfo.securityHelpChannel || ReleaseInfo.criticalSoftwareAIGenerateInfo.securityHelpChannel || ''" target="_blank">{{
|
||||
ReleaseInfo.basicInfo.securityHelpChannel || ReleaseInfo.criticalSoftwareAIGenerateInfo.securityHelpChannel || '--'
|
||||
}}</a>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<div class="mb-3 flex">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
<span class="card-key width-160">官网漏洞披露地址</span>
|
||||
<d-table style="display: contents" class="jyh-table jyh-table-2" :header-bg="true" :data="vulnDisclosureUrl">
|
||||
<!-- <d-column field="id" header="编号"></d-column> -->
|
||||
<d-column field="厂商" header="厂商"></d-column>
|
||||
<d-column field="软件名称" header="软件名称"></d-column>
|
||||
<!-- <d-column field="source" header="来源"></d-column> -->
|
||||
<d-column field="软件地址" header="来源url"> </d-column>
|
||||
</d-table>
|
||||
</div>
|
||||
<div class="mb-3 flex">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
<span class="card-key width-160">外部漏洞源的软件名称</span>
|
||||
<d-table
|
||||
style="display: contents"
|
||||
class="jyh-table jyh-table-2"
|
||||
:header-bg="true"
|
||||
:data="externalVulnSourceInfo"
|
||||
>
|
||||
<!-- <d-column field="id" header="编号"></d-column> -->
|
||||
<d-column field="厂商" header="厂商"></d-column>
|
||||
<d-column field="软件名称" header="软件名称"></d-column>
|
||||
<!-- <d-column field="source" header="来源"></d-column> -->
|
||||
<d-column field="软件地址" header="来源url"> </d-column>
|
||||
</d-table>
|
||||
</div>
|
||||
<d-row class="mb-3">
|
||||
<d-col :span="24">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
<span class="card-key width-160">是否涉及用户登录</span>
|
||||
<span class="card-val">{{ securityInfoList.involvesUserLogin ? '是' : '否' }}</span>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<d-row>
|
||||
<d-col :span="24">
|
||||
<d-tooltip position="left" content="此内容由AI辅助生成">
|
||||
<img
|
||||
style="width: 14px; height: 14px;display: inline-block"
|
||||
src="@/assets/imgs/jyh/aiLogo.png"
|
||||
/>
|
||||
</d-tooltip>
|
||||
<span class="card-key width-160">是否安卓类APP组件</span>
|
||||
<span class="card-val">{{ securityInfoList.isAndroidComponent ? '是' : '否' }}</span>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</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,computed,defineProps,toRef } 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';
|
||||
import dayjs from 'dayjs';
|
||||
import VulnProgress from './VulnProgress.vue';
|
||||
|
||||
|
||||
const route = useRoute();
|
||||
const emits = defineEmits(['changeTabs']);
|
||||
const props = defineProps(['ReleaseInfo']);
|
||||
// 触发事件的方法
|
||||
const handleTabChange = (tabName) => {
|
||||
emits('changeTabs', tabName); // 触发 changeTabs 事件,并传递参数
|
||||
};
|
||||
const jcfxList = ['','低','中','高'];
|
||||
const visible = ref(false);
|
||||
// 将 props.ReleaseInfo 转换为响应式引用
|
||||
const ReleaseInfo = toRef(props, 'ReleaseInfo');
|
||||
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 vulnSegments = ref([
|
||||
{title:'组件版本数',total:197,value:[
|
||||
{ value: 23, color: '#C53030',title:'' }, // 深红色段
|
||||
{ value: 101, color: '#F56565',title:'' }, // 浅红色段
|
||||
{ value: 64, color: '#F6AD55',title:'' }, // 黄色段
|
||||
{ value: 9, color: '#FBBF24',title:'' }, // 深黄色段
|
||||
]},{title:'安全漏洞',total:197,value:[
|
||||
{ value: 23, color: '#C53030',title:'' }, // 深红色段
|
||||
{ value: 101, color: '#F56565',title:'' }, // 浅红色段
|
||||
{ value: 64, color: '#F6AD55',title:'' }, // 黄色段
|
||||
{ value: 9, color: '#FBBF24',title:'' }, // 深黄色段
|
||||
]}
|
||||
])
|
||||
|
||||
const securityInfoList = computed(() => {
|
||||
if(ReleaseInfo.value.securityInfoList&&ReleaseInfo.value.securityInfoList.length>0) {
|
||||
return ReleaseInfo.value.securityInfoList[0]
|
||||
} else if(ReleaseInfo.value.softwareSecurityAIGenerateInfo&&ReleaseInfo.value.softwareSecurityAIGenerateInfo.length>0) {
|
||||
return ReleaseInfo.value.softwareSecurityAIGenerateInfo[0]
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
});
|
||||
|
||||
const vulnDisclosureUrl = computed(() => {
|
||||
if(ReleaseInfo.value.softwareSecurityAIGenerateInfo) {
|
||||
const _vulnDisclosureUrl: any = JSON.parse(ReleaseInfo?.value.softwareSecurityAIGenerateInfo[0]?.vulnDisclosureUrl || '[]');
|
||||
return _vulnDisclosureUrl || [];
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
});
|
||||
const externalVulnSourceInfo = computed(() => {
|
||||
if(props.ReleaseInfo) {
|
||||
const _vulnDisclosureUrl: any = JSON.parse(props.ReleaseInfo?.softwareSecurityAIGenerateInfo[0]?.externalVulnSourceInfo || '[]');
|
||||
return _vulnDisclosureUrl || [];
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
});
|
||||
|
||||
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>
|
||||
100
src/views/Jyh/Version/Detail/repoDetails/VulnProgress.vue
Normal file
100
src/views/Jyh/Version/Detail/repoDetails/VulnProgress.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<Card simple class="jyh-card mb-4">
|
||||
<!-- 标题栏:名称 + 总数 + 被抑制数 -->
|
||||
<div class="vuln-header">
|
||||
<div>
|
||||
<span class="vuln-title">{{ title }}</span>
|
||||
<d-tooltip v-if="title==='安全漏洞'" position="left" content="所有组件版本对应的安全漏洞数量">
|
||||
<d-icon name="icon-info-o" color="gray" size="12px" class="ml-1"></d-icon>
|
||||
</d-tooltip>
|
||||
<span class="vuln-total">{{ total }}</span>
|
||||
</div>
|
||||
<span v-if="title==='安全漏洞'" class="vuln-suppressed">{{ suppressed }} 被抑制</span>
|
||||
</div>
|
||||
<!-- 分段进度条容器 -->
|
||||
<div class="vuln-progress-container">
|
||||
<div
|
||||
v-for="(segment, index) in segments"
|
||||
:key="index"
|
||||
class="vuln-segment"
|
||||
:style="{
|
||||
width: `${(segment.value / total) * 100}%`, // 自动计算宽度占比
|
||||
backgroundColor: segment.color, // 自定义分段颜色
|
||||
}"
|
||||
>
|
||||
<span class="vuln-segment-label">{{ segment.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from 'vue';
|
||||
|
||||
// 定义组件接收的属性
|
||||
defineProps({
|
||||
total: {
|
||||
type: Number,
|
||||
required: true, // 总数(必填)
|
||||
},
|
||||
segments: {
|
||||
type: Array,
|
||||
required: true, // 分段配置(必填,格式:[{value: 数值, color: 颜色}, ...])
|
||||
default: () => [],
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '安全漏洞', // 默认标题
|
||||
},
|
||||
suppressed: {
|
||||
type: Number,
|
||||
default: 0, // 被抑制数默认值
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.vuln-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.vuln-title {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.vuln-total {
|
||||
font-size: 23px;
|
||||
font-weight: bold;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.vuln-suppressed {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.vuln-progress-container {
|
||||
height: 29px; // 进度条高度
|
||||
border-radius: 4px; // 圆角
|
||||
overflow: hidden; // 隐藏超出部分,实现分段无缝衔接
|
||||
display: flex; // 分段横向排列
|
||||
}
|
||||
|
||||
.vuln-segment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff; // 分段内文字颜色
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vuln-segment-label {
|
||||
padding: 0 4px; // 文字内边距,避免拥挤
|
||||
}
|
||||
</style>
|
||||
@@ -31,23 +31,23 @@
|
||||
<!-- ">{{ ReleaseInfo.networkSecurity.softwareRating || ReleaseInfo.basicInfo.securityScore || '--' }}</span>-->
|
||||
<span class="split"></span>
|
||||
<span class="span1">集成风险:</span>
|
||||
<d-tag :color="jcfxList[ReleaseInfo.referenceInfo.integrationRisk].color">{{ ReleaseInfo.referenceInfo.integrationRisk || jcfxList[ReleaseInfo.basicInfo.integrationRiskLevel].text || '--' }}</d-tag>
|
||||
<d-tag :color="jcfxList[ReleaseInfo?.referenceInfo?.integrationRisk]?.color">{{ ReleaseInfo?.referenceInfo?.integrationRisk || jcfxList[ReleaseInfo.basicInfo.integrationRiskLevel].text || '--' }}</d-tag>
|
||||
<!-- <d-tag color="#F6933B">{{ ReleaseInfo.referenceInfo.integrationRisk || '--' }}</d-tag>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr">
|
||||
<d-button v-if="!isSub" class="mr-2" variant="solid" @click="openSubscription">订阅</d-button>
|
||||
<d-button v-else class="mr-2" variant="solid" disabled>已订阅</d-button>
|
||||
<d-modal class="subscribe-modal" style="width: auto;" v-model="subscribeModalVisable" title="订阅漏洞预警通知">
|
||||
<template #header>
|
||||
<div class="subscribe-header">
|
||||
<d-icon name="icon-info-o" color="var(--devui-info)" size="18px"></d-icon>
|
||||
<span>订阅漏洞预警通知</span>
|
||||
</div>
|
||||
</template>
|
||||
<SubscriptionModal @closeSub="isSub = true;" @close="colseSubscription" :softwareData="{id: softwareId}"></SubscriptionModal>
|
||||
</d-modal>
|
||||
</div>
|
||||
<!-- <div class="fr">-->
|
||||
<!-- <d-button v-if="!isSub" class="mr-2" variant="solid" @click="openSubscription">订阅</d-button>-->
|
||||
<!-- <d-button v-else class="mr-2" variant="solid" disabled>已订阅</d-button>-->
|
||||
<!-- <d-modal class="subscribe-modal" style="width: auto;" v-model="subscribeModalVisable" title="订阅漏洞预警通知">-->
|
||||
<!-- <template #header>-->
|
||||
<!-- <div class="subscribe-header">-->
|
||||
<!-- <d-icon name="icon-info-o" color="var(--devui-info)" size="18px"></d-icon>-->
|
||||
<!-- <span>订阅漏洞预警通知</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <SubscriptionModal @closeSub="isSub = true;" @close="colseSubscription" :softwareData="{id: softwareId}"></SubscriptionModal>-->
|
||||
<!-- </d-modal>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<d-tabs class="jyh-tabs jyh-tabs-2" type="wrapped" v-model="selectTab">
|
||||
<d-tab id="bbxx" title="版本信息"></d-tab>
|
||||
@@ -55,7 +55,7 @@
|
||||
<d-tab id="ldxx" title="漏洞信息"></d-tab>
|
||||
<d-tab id="Malware" title="恶意代码信息" />
|
||||
<d-tab id="ai" title="AI修复建议"></d-tab>
|
||||
<d-tab id="licenseInfo" title="许可证信息"></d-tab>
|
||||
<!-- <d-tab id="licenseInfo" title="许可证信息"></d-tab>-->
|
||||
<d-tab id="communityInfo" title="开发者社区信息"></d-tab>
|
||||
<!-- <d-tab id="codeQuality" title="代码质量检测"></d-tab>-->
|
||||
<!-- <d-tab id="DeepDetectionAnalysis" title="深度检测分析" />-->
|
||||
@@ -63,13 +63,13 @@
|
||||
</div>
|
||||
<div class="version-detail-content">
|
||||
<version-info :ReleaseInfo="ReleaseInfo" v-if="selectTab === 'bbxx'" @changeTabs="changeTabs"></version-info>
|
||||
<vulnerabilities-list :versionId="versionId" v-else-if="selectTab === 'ldxx'"></vulnerabilities-list>
|
||||
<community-info :versionId="versionId" :ReleaseInfo="ReleaseInfo" v-else-if="selectTab === 'communityInfo'"></community-info>
|
||||
<Dependence :versionId="versionId" v-else-if="selectTab === 'ylgx'"></Dependence>
|
||||
<SBOM :versionId="versionId" v-else-if="selectTab === 'SBOM'" />
|
||||
<AIRepair :versionId="versionId" v-else-if="selectTab === 'ai'"></AIRepair>
|
||||
<LicenseInfo :versionId="versionId" v-else-if="selectTab === 'licenseInfo'"></LicenseInfo>
|
||||
<Malware :versionId="versionId" v-else-if="selectTab === 'Malware'" />
|
||||
<vulnerabilities-list :versionId="softwareId" v-else-if="selectTab === 'ldxx'"></vulnerabilities-list>
|
||||
<community-info :versionId="softwareId" :ReleaseInfo="ReleaseInfo" v-else-if="selectTab === 'communityInfo'"></community-info>
|
||||
<Dependence :versionId="softwareId" v-else-if="selectTab === 'ylgx'"></Dependence>
|
||||
<SBOM :versionId="softwareId" v-else-if="selectTab === 'SBOM'" />
|
||||
<AIRepair :versionId="softwareId" v-else-if="selectTab === 'ai'"></AIRepair>
|
||||
<LicenseInfo :versionId="softwareId" v-else-if="selectTab === 'licenseInfo'"></LicenseInfo>
|
||||
<Malware :versionId="softwareId" v-else-if="selectTab === 'Malware'" />
|
||||
<!-- <CodeQuality :versionId="versionId" v-else-if="selectTab === 'codeQuality'" />-->
|
||||
<!-- <DeepDetectionAnalysis :versionId="versionId" v-else-if="selectTab === 'DeepDetectionAnalysis'" />-->
|
||||
</div>
|
||||
@@ -80,13 +80,13 @@
|
||||
import { ref, reactive, watch, onMounted,computed } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
|
||||
import VulnerabilitiesList from './VulnerabilitiesList.vue';
|
||||
import CommunityInfo from './CommunityInfo.vue';
|
||||
import VulnerabilitiesList from '../VulnerabilitiesList.vue';
|
||||
import CommunityInfo from '../CommunityInfo.vue';
|
||||
import VersionInfo from './VersionInfo.vue';
|
||||
import SBOM from './SBOM.vue';
|
||||
import AIRepair from '../../AIRepair/index.vue';
|
||||
import LicenseInfo from '../../LicenseInfo/index.vue';
|
||||
import Dependence from './Dependency.vue'
|
||||
import SBOM from '../SBOM.vue';
|
||||
import AIRepair from '../../../AIRepair/index.vue';
|
||||
import LicenseInfo from '../../../LicenseInfo/index.vue';
|
||||
import Dependence from '../Dependency.vue'
|
||||
import Malware from "@/views/Jyh/Version/Detail/Malware/Malware.vue";
|
||||
import CodeQuality from "@/views/Jyh/Version/Detail/CodeQuality/index.vue";
|
||||
import DeepDetectionAnalysis from "@/views/Jyh/Version/Detail/DeepDetectionAnalysis/index.vue";
|
||||
@@ -111,7 +111,7 @@ const ReleaseInfo = ref({
|
||||
openSourceLicenseList: [],
|
||||
referenceInfo: {},
|
||||
});
|
||||
const versionId = route.params.versionId; // 获取路由参数 versionId
|
||||
// const versionId = route.params.versionId; // 获取路由参数 versionId
|
||||
|
||||
const jcfxList = {
|
||||
'0': { text: '', color: '#ef4444' }, // 红色
|
||||
@@ -167,11 +167,11 @@ const getAlertIsSubscribe = async(versionId) => {
|
||||
}
|
||||
};
|
||||
|
||||
const getReleaseList = async (softwareName) => {
|
||||
const getReleaseList = async ({softwareName,softwareVersion}) => {
|
||||
const { data, error } = await releasePage({
|
||||
softwareName: '',
|
||||
softwareName,
|
||||
searchType: '',
|
||||
softwareVersion: '',
|
||||
softwareVersion,
|
||||
programmingLanguage: '',
|
||||
interestTag: '',
|
||||
industry: '',
|
||||
@@ -192,8 +192,13 @@ const getReleaseList = async (softwareName) => {
|
||||
};
|
||||
|
||||
const init = async () => {
|
||||
const versionName = route.params.versionId; // 获取路由参数 versionId
|
||||
const { id:versionId=null } = await getReleaseList(versionName);
|
||||
const softwareName = route.params.versionId; // 获取路由参数 versionId
|
||||
const softwareVersion = route.params.version; // 获取路由参数 versionId
|
||||
debugger
|
||||
const data = await getReleaseList({
|
||||
softwareName,softwareVersion
|
||||
});
|
||||
const versionId = data?.id || '';
|
||||
softwareId.value = versionId;
|
||||
if (versionId) {
|
||||
await getReleaseInfo(versionId); // 调用接口获取数据
|
||||
Reference in New Issue
Block a user