153 lines
4.2 KiB
Vue
153 lines
4.2 KiB
Vue
<template>
|
||
<div class="warning-detail-container">
|
||
<div class="warning-title">
|
||
<div style="padding-right: 20px;">{{ warningData.subject }}</div>
|
||
<div class="sub-title mt-3">
|
||
<div>
|
||
<span>重要性</span>
|
||
<d-tag type="danger" size="sm">{{warningData.importance}}</d-tag>
|
||
</div>
|
||
<div v-if="propsData.type === 'system'">
|
||
<d-button v-show="mode === 'readonly'" class="edit-btn" icon="icon-edit" variant="text" title="编辑" @click="handleModeChange"/>
|
||
<d-button v-show="mode === 'editonly'" class="edit-btn" @click="handleModeChange">预览</d-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="warning-text">
|
||
<d-editor-md
|
||
v-model="warningData.overview"
|
||
:mode="mode"
|
||
:toolbar-config="toolbarConfig"
|
||
></d-editor-md>
|
||
</div>
|
||
<div :style="{'border-radius': propsData.type === 'user' ? '6px' : 0}" class="warning-from">{{warningData.group}} {{ warningData.publishTime }}</div>
|
||
<div v-if="propsData.type === 'system'" class="warning-operation">
|
||
<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 { ref } from 'vue';
|
||
|
||
const emit = defineEmits(['close']);
|
||
const propsData = defineProps(['type', 'warningData']);
|
||
const warningData = ref({});
|
||
const toolbarConfig = [
|
||
['undo', 'redo'],
|
||
['h1', 'h2', 'bold', 'italic', 'strike', 'underline', 'color', 'font'],
|
||
['ul', 'ol', 'checklist', 'code', 'link', 'image', 'table'],
|
||
];
|
||
const mode = ref('readonly');
|
||
console.log(propsData.warningData)
|
||
warningData.value = propsData.warningData ?? {
|
||
subject: '【漏洞排查预警】ApacheIgnite远程代码执行漏洞排查（CVE-2024-52577)',
|
||
importance: '高',
|
||
group: '可信开源代码库运营团队',
|
||
pulishTime: '2025-2-20',
|
||
overview: `## 一、概要
|
||
近日，安全中心发现Apache lgnite远程代码执行漏洞（CVE-2024-52577）。在 2.6.0<Apache Ignite< 2.17.0版本中，由于lgnite未能正确实施类序列化过滤器，攻击者能够利用恶意序列化对象绕过安全检查，从而在服务器端反序列化时触发任意代码的执行。经可信开源代码库运营团队评审漏洞技术定级2级/3级，若不满足利用条件可举证降为6级。请你按要求在XX时间内完成修复。
|
||
## 二、修复方案
|
||
升级Apache Ignite至安全版本：2.17.0`
|
||
};
|
||
const confirm = () => {
|
||
emit('close');
|
||
};
|
||
const handleModeChange = () => {
|
||
if (mode.value === 'editonly') {
|
||
mode.value = 'readonly';
|
||
} else {
|
||
mode.value = 'editonly';
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.warning-detail-container {
|
||
width: 600px;
|
||
|
||
.warning-title {
|
||
color: #000000;
|
||
font-family: HarmonyOS Sans SC;
|
||
font-weight: 600;
|
||
font-size: 20px;
|
||
line-height: 28px;
|
||
padding: 20px 20px 12px;
|
||
|
||
.sub-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
>div:first-of-type>span {
|
||
margin-right: 12px;
|
||
color: #808080;
|
||
font-family: HarmonyOS Sans SC;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.warning-text {
|
||
padding: 20px 20px 0;
|
||
background: #F6F6F8;
|
||
color: initial;
|
||
|
||
:deep .dp-md-readonly {
|
||
.dp-md-toolbar-container {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
:deep .dp-md-view {
|
||
background-color: #F6F6F8;
|
||
|
||
h2 {
|
||
font-size: 1.5em;
|
||
font-weight: bold;
|
||
}
|
||
|
||
p {
|
||
color: #252B3A;
|
||
font-family: 苹方-简;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.text-box {
|
||
|
||
div {
|
||
margin-bottom: 8px;
|
||
color: #252B3A;
|
||
font-family: HarmonyOS Sans SC;
|
||
font-weight: 600;
|
||
font-size: 16px;
|
||
line-height: 24px;
|
||
}
|
||
|
||
::v-deep .devui-textarea {
|
||
color: #252B3A;
|
||
font-family: 苹方-简;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
}
|
||
|
||
.warning-from {
|
||
background: #F6F6F8;
|
||
color: #808080;
|
||
font-family: HarmonyOS Sans SC;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
|
||
.warning-operation {
|
||
text-align: center;
|
||
padding: 20px;
|
||
}
|
||
}
|
||
</style> |