Merge remote-tracking branch 'origin/master'
This commit is contained in:
付民康
84
src/views/Jyh/Version/Detail/SubscriptionModal.vue
Normal file
84
src/views/Jyh/Version/Detail/SubscriptionModal.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div class="subscribe-container">
|
||||
<div class="subscribe-tip mb-3">当您订阅的软件有漏洞预警通知时，将以应用号的方式通知。可在首页查看或取消订阅！</div>
|
||||
<div class="subscribe-form">
|
||||
<d-form ref="formRef" :data="formData" :rules="rules">
|
||||
<d-form-item field="subscribeType" label="通知方式">
|
||||
<d-radio-group direction="row" v-model="formData.subscribeType" @change="typeChange">
|
||||
<d-radio value="0">短信</d-radio>
|
||||
<d-radio value="1">邮件</d-radio>
|
||||
<d-radio value="2">站内通知</d-radio>
|
||||
</d-radio-group>
|
||||
</d-form-item>
|
||||
<d-form-item v-if="formData.subscribeType && formData.subscribeType !== '2'" field="subscribeText" :label="textLabel">
|
||||
<d-input v-model="formData.subscribeText" />
|
||||
</d-form-item>
|
||||
</d-form>
|
||||
</div>
|
||||
<div class="subscribe-operation mt-5">
|
||||
<d-button @click="confirm" variant="solid" class="mr-2">确定</d-button>
|
||||
<d-button @click="$emit('close')">取消</d-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const props = defineProps(['softwareData']);
|
||||
const emit = defineEmits(['close']);
|
||||
const formRef = ref(null);
|
||||
const formData = ref({
|
||||
subscribeType: '',
|
||||
subscribeText: '',
|
||||
});
|
||||
const rules = {
|
||||
subscribeType: [{ required: true, message: '请选择', trigger: 'change' }],
|
||||
subscribeText: [{ required: true, message: '不能为空', trigger: 'blur' }],
|
||||
};
|
||||
const textLabel = ref('');
|
||||
const confirm = () => {
|
||||
(formRef?.value as any)?.validate((isValid: boolean, invalidFields: any) => {
|
||||
if (!isValid) {
|
||||
return;
|
||||
}
|
||||
emit('close');
|
||||
});
|
||||
};
|
||||
const typeChange = () => {
|
||||
if (formData.value.subscribeType === '0') {
|
||||
textLabel.value = '手机号';
|
||||
} else if (formData.value.subscribeType === '1') {
|
||||
textLabel.value = '邮箱地址';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.subscribe-container {
|
||||
width: 600px;
|
||||
|
||||
.subscribe-tip {
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: regular;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.subscribe-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
background: #F2F5FC;
|
||||
padding: 20px 32px 0;
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.subscribe-operation {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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
204
src/views/Jyh/Version/Detail/VulnerabilityDetail.vue
Normal 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>
|
||||
@@ -9,18 +9,27 @@
|
||||
<div class="header-top">
|
||||
<GAvatar style="margin-right: 12px" :src="avatarUrl" name="Vue" :width="40" :height="40"></GAvatar>
|
||||
<div>
|
||||
<div class="header-title1">vue</div>
|
||||
<div class="header-title1">{{ softwareData.name }}</div>
|
||||
<div class="header-div">
|
||||
<span class="span1">版本：</span><span class="span2">3.5.13</span>
|
||||
<span class="span1">版本：</span><span class="span2">{{ softwareData.version }}</span>
|
||||
<span class="split"></span>
|
||||
<span class="span1">生命周期状态：</span><span class="span2">选型中</span>
|
||||
<span class="span1">生命周期状态：</span><span class="span2">{{ softwareData.lifecycle }}</span>
|
||||
<span class="split"></span>
|
||||
<span class="span1">集成风险：</span>
|
||||
<d-tag color="#F6933B">低风险</d-tag>
|
||||
<d-tag color="#F6933B">{{ softwareData.risk }}</d-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr">
|
||||
<d-button class="mr-2" variant="solid">订阅</d-button>
|
||||
<d-button class="mr-2" variant="solid" @click="openSubscription">订阅</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 @close="colseSubscription" :softwareData="softwareData"></SubscriptionModal>
|
||||
</d-modal>
|
||||
</div>
|
||||
</div>
|
||||
<d-tabs class="jyh-tabs jyh-tabs-2" type="wrapped" v-model="selectTab">
|
||||
@@ -57,6 +66,7 @@ import LicenseInfo from '../../LicenseInfo/index.vue';
|
||||
const { namespace } = getOrgInfo();
|
||||
const route = useRoute(); // 获取路由对象
|
||||
const avatarUrl = '/src/assets/imgs/jyh/工程首字母图标.png';
|
||||
import SubscriptionModal from '@/views/Jyh/Version/Detail/SubscriptionModal.vue';
|
||||
|
||||
const selectTab = ref('bbxx');
|
||||
|
||||
@@ -157,6 +167,21 @@ const setClaStatus = async (row: any) => {
|
||||
const signCla = (row: any) => {
|
||||
router.push('/cla/' + row.object_id);
|
||||
};
|
||||
|
||||
const softwareData = ref({
|
||||
name: 'vue',
|
||||
version: '3.5.13',
|
||||
lifecycle: '选中型',
|
||||
risk: '低风险',
|
||||
});
|
||||
|
||||
const subscribeModalVisable = ref(false);
|
||||
const openSubscription = () => {
|
||||
subscribeModalVisable.value = true;
|
||||
};
|
||||
const colseSubscription = () => {
|
||||
subscribeModalVisable.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -303,4 +328,25 @@ const signCla = (row: any) => {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.subscribe-modal {
|
||||
width: auto;
|
||||
|
||||
.subscribe-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 20px 0;
|
||||
>span {
|
||||
margin-left: 8px;
|
||||
color: #191919;
|
||||
font-family: HarmonyOS Sans SC;
|
||||
font-weight: medium;
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
Reference in New Issue
Block a user