可信代码库-供应链代码质量检测页面开发
This commit is contained in:
付民康
43
src/views/Jyh/Version/Detail/CodeQuality/Code.vue
Normal file
43
src/views/Jyh/Version/Detail/CodeQuality/Code.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<pre class="pre-code"><code :data-ln-start-from="1">
|
||||
<span v-html="renderCode(fixed_code)"></span>
|
||||
</code></pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 引入 highlight.js
|
||||
import hljs from 'highlight.js';
|
||||
import 'highlight.js/styles/rainbow.css'; // 引入样式
|
||||
import {lineNumbersBlock} from "@/utils/highlightjs-line-numbers";
|
||||
|
||||
const fixed_code = '/*'
|
||||
|
||||
const renderCode = (code, num = 1) => {
|
||||
return hljs.highlightAuto(code).value;
|
||||
};
|
||||
// 显示代码行数
|
||||
const updateLineNumbers = () => {
|
||||
// 搜索pre、code元素进行高亮和行号添加
|
||||
let blocks = document.querySelectorAll('pre code');
|
||||
console.log(blocks)
|
||||
blocks.forEach((block) => {
|
||||
//高亮
|
||||
// hljs.highlightElement(block)
|
||||
//添加行号
|
||||
lineNumbersBlock(block)
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.pre-code {
|
||||
background: #474949!important;
|
||||
color: #d1d9e1!important;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
</style>
|
||||
295
src/views/Jyh/Version/Detail/CodeQuality/index.vue
Normal file
295
src/views/Jyh/Version/Detail/CodeQuality/index.vue
Normal file
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<Card simple class="jyh-card mb-4">
|
||||
<d-row class="mb-3">
|
||||
<d-col :span="8">
|
||||
<span class="card-key width-140">问题数<d-icon style="color: grey" name="icon-info-o" size="12px" />
|
||||
</span>
|
||||
<span class="card-val">{{ ReleaseInfo?.basicInfo?.softwareName || '--' }}</span>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<span class="card-key width-140">未解决问题数<d-icon style="color: grey; margin-left: 4px" name="icon-info-o" size="12px" /></span>
|
||||
<span class="card-val">{{ ReleaseInfo?.basicInfo?.softwareVersion || '--' }}</span>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<span class="card-key width-140">已解决问题数<d-icon style="color: grey; margin-left: 4px" name="icon-info-o" size="12px" /></span>
|
||||
<span class="card-val">{{ ReleaseInfo?.basicInfo?.mainLanguageType || '--' }}</span>
|
||||
</d-col>
|
||||
</d-row>
|
||||
<d-row>
|
||||
<d-col :span="8">
|
||||
<span class="card-key width-140">代码平均复杂度<d-icon style="color: grey; margin-left: 4px" name="icon-info-o" size="12px" /></span>
|
||||
<span class="card-val">{{ ReleaseInfo?.basicInfo?.developer || '--' }}</span>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<span class="card-key width-140">代码重复率<d-icon style="color: grey; margin-left: 4px" name="icon-info-o" size="12px" /></span>
|
||||
<span class="card-val">{{ ReleaseInfo?.basicInfo?.developer || '--' }}</span>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<span class="card-key width-140">代码总行数<d-icon style="color: grey; margin-left: 4px" name="icon-info-o" size="12px" /></span>
|
||||
<span class="card-val">{{ ReleaseInfo?.basicInfo?.developer || '--' }}</span>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</Card>
|
||||
<div class="ai-container">
|
||||
<template v-if="tableData.length > 0">
|
||||
<div class="ai-container-card" style="width: 100%" v-for="(rowItem, index) in tableData" :key="index">
|
||||
<Panel :expand="rowItem.expand">
|
||||
<template #header>
|
||||
<div class="ai-panel-header">
|
||||
<div style="padding: 25px 8px 0px 20px">
|
||||
<img style="width: 36px; height: 33px" src="@/assets/imgs/jyh/warning.png" />
|
||||
</div>
|
||||
<div style="width: 100%; padding: 20px 20px 0px 0">
|
||||
<div class="ai-panel-header-title">
|
||||
<div>
|
||||
<d-tag color="red-w98" class="mr-1" size="sm">--</d-tag>
|
||||
<span>{{ rowItem.libraryName || '--' }}</span>
|
||||
</div>
|
||||
<div
|
||||
style="cursor: pointer; display: flex; gap: 8px; align-items: center"
|
||||
@click="rowItem.expand = !rowItem.expand"
|
||||
>
|
||||
<div style="margin-right: 8px">
|
||||
<span style="margin-right: 4px" class="weak-text">问题发现时间</span>
|
||||
<span>{{ rowItem.vulnerabilities.length || '--' }}</span>
|
||||
</div>
|
||||
<div style="margin-right: 8px">
|
||||
<span style="margin-right: 4px" class="weak-text">修改点个数</span>
|
||||
<span>{{ rowItem.vulnerabilities.length || '--' }}</span>
|
||||
</div>
|
||||
<d-icon :name="rowItem.expand ? 'icon-expand-new' : 'icon-drag-new'"></d-icon>
|
||||
<span>{{ rowItem.expand ? '收起' : '展开' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ai-panel-header-sub-title">
|
||||
<div>
|
||||
<span class="weak-text">待处理 </span>
|
||||
<span>{{ rowItem.vulnerabilities.length || '--' }}</span>
|
||||
</div>
|
||||
<!-- <div>-->
|
||||
<!-- <span class="weak-text">修复兼容性</span>-->
|
||||
<!-- <span>{{ rowItem.vulnerabilities.length || '--' }}</span>-->
|
||||
<!-- <d-tooltip-->
|
||||
<!-- position="bottom"-->
|
||||
<!-- content="这个评分是在比较当前版本和推荐版本之间的差异，并建议修复此组件时的复杂程度。"-->
|
||||
<!-- >-->
|
||||
<!-- <img src="@/assets/imgs/jyh/help.png" class="icon-sm" />-->
|
||||
<!-- </d-tooltip>-->
|
||||
<!-- <d-tag class="ml-1" type="warning" size="sm">{{'--'}}</d-tag>-->
|
||||
<!-- </div>-->
|
||||
<div>
|
||||
<span class="weak-text">负责人</span>
|
||||
<span>{{ rowItem.currentVersion || '--' }}</span>
|
||||
<!-- <img src="@/assets/imgs/jyh/ic_digital_power_next_step_@2x.png" class="icon-sm" />-->
|
||||
<!-- <span>{{ rowItem.recommendedVersion || '--' }}</span>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<div style="padding: 8px 20px 20px 20px; width: 100%">
|
||||
<Code />
|
||||
<!-- <Table class="jyh-table" :tableConfig="tableConfig" :dataSource="rowItem.vulnerabilities" :libraryName="rowItem.libraryName" :currentVersion="rowItem.currentVersion"/>-->
|
||||
<!-- <div class="w-full flex items-center justify-end">-->
|
||||
<!-- <span>共{{ rowItem.vulnerabilities.length }}条</span>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</template>
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="mt-20 mb-20 flex justify-end" v-if="tableData.length > 0">
|
||||
<d-pagination
|
||||
size="md"
|
||||
:page-size-options="[10, 20, 50]"
|
||||
:total="pager.total"
|
||||
v-model:pageSize="pager.pageSize"
|
||||
v-model:pageIndex="pager.pageIndex"
|
||||
:max-items="5"
|
||||
:can-change-page-size="true"
|
||||
:can-view-total="true"
|
||||
total-item-text="总计"
|
||||
@page-index-change="fetchVulnList()"
|
||||
@page-size-change="fetchVulnList()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<NoData v-else :small="false"></NoData>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, onMounted, ref } from 'vue';
|
||||
import Panel from '@/components/AIRepair/Panel.vue';
|
||||
import Table from '@/components/AIRepair/Table.vue';
|
||||
import NoData from '@/components/NoData/NoData.vue';
|
||||
import Code from './Code.vue';
|
||||
import { getVulnList, remediationSearchRemediations } from '@/api/jyh';
|
||||
|
||||
const infoList = ref([
|
||||
'当前代码主要风险为易受常见的注入攻击，包括命令注入、SQL注入、表达式注入，针对每种攻击，应提供相应的防范措施，如数据校验、使用安全函数和限制程序权限。',
|
||||
'相对上一次检查，【提升点】在于代码基础编码问题少了47.8%，问题总数降低29.3%；'
|
||||
]);
|
||||
|
||||
const tableConfig = ref([
|
||||
{
|
||||
field: 'vulnId',
|
||||
header: '安全问题编号',
|
||||
sortable: true,
|
||||
sortMethod: null
|
||||
},
|
||||
{
|
||||
field: 'vulnType',
|
||||
header: '安全问题类型',
|
||||
sortable: false,
|
||||
sortMethod: null,
|
||||
format: (val) => {
|
||||
// val小写转大写
|
||||
return (val || '').toUpperCase();
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'vulnId',
|
||||
header: 'CWE编号',
|
||||
sortable: false,
|
||||
sortMethod: null
|
||||
},
|
||||
{
|
||||
field: 'cvssScore',
|
||||
header: '分值',
|
||||
sortable: true,
|
||||
sortMethod: null
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
const pager = ref({
|
||||
total: 0,
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
const propsData = defineProps(['versionId']);
|
||||
|
||||
const fetchVulnList = async () => {
|
||||
const { data } = await remediationSearchRemediations({
|
||||
// softwareId: 47,
|
||||
softwareId: propsData.versionId,
|
||||
current: pager.value.pageIndex,
|
||||
size: pager.value.pageSize
|
||||
// componentId: '',
|
||||
});
|
||||
|
||||
if (data.data.code === 200) {
|
||||
tableData.value = data?.data?.data?.records || [];
|
||||
pager.value.total = data?.data?.data?.total || 0;
|
||||
// pager.value.total = data?.data?.data?.total || [];
|
||||
}
|
||||
};
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
"componentId": 1,
|
||||
"libraryName": "",
|
||||
"currentVersion": "",
|
||||
|
||||
expand: true,
|
||||
"vulnerabilities": [ ]
|
||||
}
|
||||
]);
|
||||
onMounted(() => {
|
||||
// fetchVulnList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'devui-theme/styles-var/devui-var.scss';
|
||||
|
||||
.ai-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
&-card {
|
||||
border-top: 2px solid $devui-danger;
|
||||
background-color: $devui-base-bg;
|
||||
border-radius: var(--devui-border-radius-card, 8px);
|
||||
box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, 0.12));
|
||||
}
|
||||
}
|
||||
|
||||
.ai-panel-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 80px;
|
||||
&-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-sub-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
div {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
&:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: $devui-line;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.weak-text {
|
||||
//margin-right: 4px;
|
||||
color: $devui-text-weak;
|
||||
}
|
||||
|
||||
.icon-sm {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.info-outside {
|
||||
margin: 20px 0;
|
||||
padding: 1px;
|
||||
border-radius: 8px;
|
||||
background-image: linear-gradient(
|
||||
134.79deg,
|
||||
#a4f7df 0%,
|
||||
#a0cefb 21%,
|
||||
#5f9afe 43%,
|
||||
#d9b9fc 62%,
|
||||
#01efbb 73%,
|
||||
#fbae46 100%
|
||||
);
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
background-color: #ffffff;
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
ul {
|
||||
list-style: disc;
|
||||
padding-left: 18px;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -52,6 +52,7 @@
|
||||
<d-tab id="ai" title="AI修复建议"></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="深度检测分析" />-->
|
||||
</d-tabs>
|
||||
</div>
|
||||
@@ -64,6 +65,7 @@
|
||||
<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'" />
|
||||
<CodeQuality :versionId="versionId" v-else-if="selectTab === 'codeQuality'" />
|
||||
<!-- <DeepDetectionAnalysis :versionId="versionId" v-else-if="selectTab === 'DeepDetectionAnalysis'" />-->
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,6 +83,7 @@ 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";
|
||||
const { namespace } = getOrgInfo();
|
||||
const route = useRoute(); // 获取路由对象
|
||||
|
||||
Reference in New Issue
Block a user