cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增漏洞详情页

Browse Source
This commit is contained in:
shenjianbin
2025-03-15 13:18:02 +08:00
parent 1efb34722f
commit 170d42921b
4 changed files with 235 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/api/repo/index.ts
View File

@@ -1542,3 +1542,14 @@ export const getOriginalComment = (params: types.DiscussionCommentProps): Promis
})
);
}
// 获取漏洞数据
export const getVulnDetail = (params: types.VulnDetailProps): Promise<any> => {
return reqCatch(() =>
request({
url: `/api/v1/repo/vulnerability/info`,
method: 'get',
params,
})
);
}

5
src/api/repo/types.ts
View File

@@ -207,3 +207,8 @@ export interface DiscussionCommentProps {
discussionId: string | number,
}
export interface VulnDetailProps {
repoId: string,
id: string,
}

17
src/views/Jyh/Version/Detail/VulnerabilitiesList.vue
View File

@@ -11,7 +11,7 @@
@filter-change="handleFilterChange"
>
<template #default="scope">
<a>{{ scope.row.versionName }}</a>
<a @click="openVulnDetail(scope.row)">{{ scope.row.versionName }}</a>
</template>
</d-column>
<d-column
@@ -100,6 +100,11 @@
>你确认删除此项：{{ item.cla_name }} ？</span
>
</GModal>
<!-- 漏洞详情 -->
<d-drawer v-model="vulnDetailVisable" style="width: auto;">
<VulnerabilityDetail :vulnId="currentVuln.id"></VulnerabilityDetail>
</d-drawer>
</div>
</template>
@@ -110,9 +115,10 @@ import { ref, reactive } from 'vue';
import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
import { useRouter, useRoute } from 'vue-router';
import { GModal } from '@/components/Setting/index';
import { reqCatch } from '@/utils/catch';
import { reqCatch } from '@/utils/catch';
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
import { Message } from 'vue-devui';
import VulnerabilityDetail from '@/views/Jyh/Version/Detail/VulnerabilityDetail.vue'
const { namespace } = getOrgInfo();
const tableData = ref([
@@ -233,6 +239,13 @@ const setClaStatus = async (row: any) => {
const signCla = (row: any) => {
router.push('/cla/' + row.object_id);
};
const vulnDetailVisable = ref(false);
const currentVuln = ref();
const openVulnDetail = (row) => {
vulnDetailVisable.value = true;
currentVuln.value = row;
}
</script>
<style scoped lang="scss">

204
src/views/Jyh/Version/Detail/VulnerabilityDetail.vue Normal file
View File

@@ -0,0 +1,204 @@
<template>
<div class="vuln-detail-container">
<div class="vuln-title mb-2">{{ vulnDetail.id }}</div>
<div class="vuln-sub-title mb-3">
<span>{{ vulnDetail.cveId || '--' }}</span>
<span class="split-line"></span>
<span><span class="release-time">发布时间：</span>{{ vulnDetail.releaseTime || '--' }}</span>
</div>
<Card simple class="jyh-card mb-4">
<div class="card-title">漏洞名称</div>
<d-row class="mb-3">
<d-col :span="12">
<span class="card-key width-90">漏洞名称</span>
<span class="card-val">{{vulnDetail.id || '--'}}</span>
</d-col>
<d-col :span="12">
<span class="card-key width-90">关联漏洞编号</span>
<span class="card-val">{{vulnDetail.cnvdId || '--'}}</span>
</d-col>
</d-row>
<d-row class="mb-3">
<d-col :span="24">
<span class="card-key width-90">简介</span>
<span class="card-val">{{vulnDetail.description || '--'}}</span>
</d-col>
</d-row>
<d-row class="mb-3">
<d-col :span="24">
<span class="card-key width-90">额外信息</span>
<span class="card-val">
<a v-for="link in vulnDetail.links" class="devui-link" :href="link" target="_blank" rel="noreferrer noopener">{{link}}</a>
<span v-if="!vulnDetail.links || vulnDetail.links.length === 0">--</span>
</span>
</d-col>
</d-row>
<d-row>
<d-col :span="24">
<span class="card-key width-90">补丁链接</span>
<span class="card-val">
<a v-for="link in vulnDetail.links2" class="devui-link" :href="link" target="_blank" rel="noreferrer noopener">{{link}}</a>
<span v-if="!vulnDetail.links || vulnDetail.links.length === 0">--</span>
</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="12">
<span class="card-key width-90">严重性</span>
<span class="card-val">{{vulnDetail.id || '--'}}</span>
</d-col>
<d-col :span="12">
<span class="card-key width-90">分值</span>
<span class="card-val">{{vulnDetail.code || '--'}}</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="12">
<span class="card-key width-90">攻击向量</span>
<span class="card-val">{{vulnDetail.id || '--'}}</span>
</d-col>
<d-col :span="12">
<span class="card-key width-90">攻击复杂度</span>
<span class="card-val">{{vulnDetail.complexity || '--'}}</span>
</d-col>
</d-row>
<d-row class="mb-3">
<d-col :span="12">
<span class="card-key width-90">用户交互</span>
<span class="card-val">{{vulnDetail.compName || '--'}}</span>
</d-col>
<d-col :span="12">
<span class="card-key width-90">需要特殊权限</span>
<span class="card-val">{{vulnDetail.cnvdId || '--'}}</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="12">
<span class="card-key width-90">组件名</span>
<span class="card-val">{{vulnDetail.compName || '--'}}</span>
</d-col>
<d-col :span="12">
<span class="card-key width-90">深度</span>
<span class="card-val">{{vulnDetail.complexity || '--'}}</span>
</d-col>
</d-row>
<d-row class="mb-3">
<d-col :span="12">
<span class="card-key width-90">当前版本</span>
<span class="card-val">{{vulnDetail.version || '--'}}</span>
</d-col>
<d-col :span="12">
<span class="card-key width-90">最新版本</span>
<span class="card-val">{{vulnDetail.cnvdId || '--'}}</span>
</d-col>
</d-row>
<d-row>
<d-col :span="24">
<span class="card-key width-90">组件依赖关系</span>
<span class="card-val">{{vulnDetail.version || '--'}}</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="12">
<span class="card-key width-90">补丁版本</span>
<span class="card-val">{{vulnDetail.id || '--'}}</span>
</d-col>
<d-col :span="12">
<span class="card-key width-90">修复兼容性</span>
<span class="card-val">{{vulnDetail.complexity || '--'}}</span>
</d-col>
</d-row>
<d-row>
<d-col :span="24">
<span class="card-key width-90">修复建议</span>
<span class="card-val">{{vulnDetail.description || '--'}}</span>
</d-col>
</d-row>
</Card>
</div>
</template>
<script setup lang="ts">
import { getVulnDetail } from '@/api/repo';
import { ref } from 'vue';
const propsData = defineProps(['repoId', 'vulnId']);
const vulnDetail = ref({
id: 'HWPSIRT-2022-29348',
cveId: 'CVE-2013-0293',
cnvdId: 'CNVD-201105-215',
name: '',
code: '',
description: '华为开发者社区致力于打造华为开发者专属的官方技术交流平台，帮助开发者探索开发实践、交流心得经验、获悉业界动态、解决开发问题。汇聚华为云社区“华为云”领域博客、问答、视频等精彩内容，形成开发者和技术爱好者交流与分享主阵地。',
links: ['/home'],
links2: ['/home'],
vector: '',
complexity: '',
interactive: '',
releaseTime: '2018-07-31',
compName: 'mplayer',
version: '1.4',
});
const queryVulnDetail = async () => {
const data = await getVulnDetail({repoId: propsData.repoId, id: propsData.vulnId});
vulnDetail.value = data;
};
// queryVulnDetail();
</script>
<style scoped lang="scss">
.vuln-detail-container {
width: 800px;
padding: 20px;
.vuln-title {
color: #191919;
font-family: HarmonyOS Sans SC;
font-weight: 400;
font-size: 18px;
}
.vuln-sub-title {
color: #191919;
font-family: HarmonyOS Sans;
font-weight: regular;
font-size: 12px;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
.split-line {
width: 1px;
display: inline-block;
line-height: 16px;
height: 16px;
vertical-align: middle;
margin: 0 8px;
background-color: #EEF0F5;
}
.release-time {
color: #808080;
}
}
.card-val {
display: inline-block;
width: calc(100% - 90px);
vertical-align: top;
}
}
</style>