287 lines
11 KiB
Vue
287 lines
11 KiB
Vue
<template>
|
|
<d-drawer v-model="detailDrawerCtrl" class="w-[800px] p-[20px]">
|
|
<div class="flex flex-col h-full">
|
|
<div class="flex justify-between items-center mb-[12px]">
|
|
<p class="text-[18px]/[26px] ">恶意代码详情</p>
|
|
<d-icon @click="detailDrawerCtrl = false" name="icon-close" size="18px" class="cursor-pointer text-[#71757F]" />
|
|
</div>
|
|
<div class="flex flex-col mb-[12px] flex-1 h-0">
|
|
<div class="malware-detail-card mb-[16px]">
|
|
<p class="title">文件基本信息</p>
|
|
<div class="content">
|
|
<div class="flex items-center">
|
|
<div class="w-[160px] pr-[20px] flex-shrink-0 text-[#595959]">文件名称</div>
|
|
<div class="single-line-ellipsis">{{ props.detailRow?.packageFullName || '--' }}</div>
|
|
<d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(props.detailRow?.packageFullName)" />
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-[160px] pr-[20px] flex-shrink-0 text-[#595959]">文件路径</div>
|
|
<div class="single-line-ellipsis">{{ props.detailRow?.packagePath || '--' }}</div>
|
|
<d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(props.detailRow?.packagePath)" />
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-[160px] pr-[20px] flex-shrink-0 text-[#595959]">文件版本号</div>
|
|
<div class="single-line-ellipsis">{{ props.detailRow?.packageVersion || '--' }}</div>
|
|
<d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(props.detailRow?.packageVersion)" />
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-[160px] pr-[20px] flex-shrink-0 text-[#595959]">LLM名称</div>
|
|
<div class="single-line-ellipsis">{{ props.detailRow?.llmName || '--' }}</div>
|
|
<d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(props.detailRow?.llmName)" />
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-[160px] pr-[20px] flex-shrink-0 text-[#595959]">敏感API总数</div>
|
|
<div class="single-line-ellipsis">{{ props.detailRow?.totalApisCalledCount }}</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-[160px] pr-[20px] flex-shrink-0 text-[#595959]">可疑文件总数</div>
|
|
<div class="single-line-ellipsis">{{ props.detailRow?.suspiciousFilesCount }}</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-[160px] pr-[20px] flex-shrink-0 text-[#595959]">是否恶意代码</div>
|
|
<div class="single-line-ellipsis">
|
|
<span class="card-val" v-if="props.detailRow?.isMalicious===0">
|
|
<d-tag color="#5e7ce0" size="sm">否</d-tag>
|
|
</span>
|
|
<span class="card-val" v-else>
|
|
<d-tag color="#c7000b" size="sm">是</d-tag>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-[160px] pr-[20px] flex-shrink-0 text-[#595959]">大模型是否正常回复</div>
|
|
<div class="single-line-ellipsis">
|
|
<span class="card-val" v-if="props.detailRow?.isModelResponded===0">
|
|
<d-tag color="#5e7ce0" size="sm">否</d-tag>
|
|
</span>
|
|
<span class="card-val" v-else>
|
|
<d-tag color="#c7000b" size="sm">是</d-tag>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="flex items-center">-->
|
|
<!-- <div class="w-[160px] pr-[20px] flex-shrink-0 text-[#595959]">文件sha256</div>-->
|
|
<!-- <div :title="malwareDetails?.code" class="single-line-ellipsis">{{ malwareDetails?.code }}</div>-->
|
|
<!-- <d-icon name="icon-copy" class="ml-[8px] cursor-pointer" @click="handleCopy(malwareDetails?.code)" />-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="malware-detail-card mb-[16px]">
|
|
<p class="title">调用的敏感API列表</p>
|
|
<div class="content">
|
|
<d-table
|
|
:data="malwareDetails?.apisCalled"
|
|
class="w-full bg-white malware-list-table"
|
|
:fix-header="malwareDetails?.apisCalled.length > 0"
|
|
|
|
max-height="300px"
|
|
>
|
|
<d-column field="isMalicious" header="是否恶意代码">
|
|
<template #default="scope">
|
|
<span class="card-val" v-if="scope.row.isMalicious===0">
|
|
<d-tag color="#5e7ce0" size="sm">否</d-tag>
|
|
</span>
|
|
<span class="card-val" v-else>
|
|
<d-tag color="#c7000b" size="sm">是</d-tag>
|
|
</span>
|
|
</template>
|
|
</d-column>
|
|
<d-column
|
|
field="maliciousCodeCategory"
|
|
header="恶意代码分类"
|
|
/>
|
|
<template #empty>
|
|
<NoData style="padding: 0; margin: -30px 0;" :width="80" />
|
|
</template>
|
|
</d-table>
|
|
|
|
<!-- <d-pagination-->
|
|
<!-- class="flex justify-end mt-[20px]"-->
|
|
<!-- :total="pager.total"-->
|
|
<!-- v-model:pageSize="pager.pageSize"-->
|
|
<!-- v-model:pageIndex="pager.pageIndex"-->
|
|
<!-- :can-view-total="true"-->
|
|
<!-- :can-change-page-size="true"-->
|
|
<!-- :max-items="5"-->
|
|
<!-- @page-index-change="pageIndexChange"-->
|
|
<!-- @page-size-change="pageSizeChange"-->
|
|
<!-- />-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="malware-detail-card mb-[16px]">
|
|
<p class="title">包含恶意代码的文件列表</p>
|
|
<div class="content">
|
|
<d-table
|
|
:data="malwareDetails?.source"
|
|
class="w-full bg-white malware-list-table"
|
|
:fix-header="malwareDetails?.source.length > 0"
|
|
|
|
max-height="300px"
|
|
>
|
|
<d-column
|
|
field="sink"
|
|
header="恶意汇"
|
|
/>
|
|
<d-column
|
|
field="flow"
|
|
header="传播流向"
|
|
/>
|
|
<d-column
|
|
field="purpose"
|
|
header="代码目的"
|
|
/>
|
|
<d-column
|
|
field="analysis"
|
|
header="LLM对于这个代码片段的分析"
|
|
/>
|
|
<d-column
|
|
field="createTime"
|
|
header="创建时间"
|
|
/>
|
|
<template #empty>
|
|
<NoData style="padding: 0; margin: -30px 0;" :width="80" />
|
|
</template>
|
|
</d-table>
|
|
|
|
<!-- <d-pagination-->
|
|
<!-- class="flex justify-end mt-[20px]"-->
|
|
<!-- :total="pager.total"-->
|
|
<!-- v-model:pageSize="pager.pageSize"-->
|
|
<!-- v-model:pageIndex="pager.pageIndex"-->
|
|
<!-- :can-view-total="true"-->
|
|
<!-- :can-change-page-size="true"-->
|
|
<!-- :max-items="5"-->
|
|
<!-- @page-index-change="pageIndexChange"-->
|
|
<!-- @page-size-change="pageSizeChange"-->
|
|
<!-- />-->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="malware-detail-card flex-1 h-0">-->
|
|
<!-- <p class="title">关键日志</p>-->
|
|
<!-- <div class="content flex flex-col flex-1 h-0">-->
|
|
<!-- <div class="log-box flex-1 overflow-y-scroll">-->
|
|
<!-- {{ malwareDetails?.analysis }}-->
|
|
<!-- {{ malwareDetails?.code }}-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
</d-drawer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, shallowRef, defineProps, ref, defineExpose } from 'vue';
|
|
import NoData from "@/components/NoData/NoData.vue";
|
|
import { getMalwareDetailApi, getMalwareDetailApi2 } from '@/api/inboundTask/inboundTaskApi';
|
|
import {Message} from "vue-devui/message";
|
|
import { type MalwareDetailType } from "@/api/inboundTask/inboundTaskType";
|
|
|
|
const props = defineProps({
|
|
detailRow: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
const detailDrawerCtrl = ref(false);
|
|
const malwareDetails = shallowRef<MalwareDetailType | null>(null);
|
|
const threatContentList = shallowRef([]);
|
|
const pager = reactive({
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
});
|
|
|
|
async function getMalwareDetails(id) {
|
|
try {
|
|
const res = await getMalwareDetailApi2({
|
|
current: 1,
|
|
size: 10,
|
|
maliciousId: id
|
|
});
|
|
if(res.data.records&&res.data.records.length>0) {
|
|
malwareDetails.value = res.data.records[0];
|
|
}
|
|
} catch (e) {
|
|
Message.error('接口错误，查询详情失败');
|
|
}
|
|
getCurrentPageData();
|
|
}
|
|
|
|
function getCurrentPageData() {
|
|
// pager.total = malwareDetails.value.contentInfo.total;
|
|
// const endIndex = pager.pageIndex * pager.pageSize;
|
|
// threatContentList.value = malwareDetails.value.contentInfo.list.slice(endIndex - pager.pageSize, endIndex);
|
|
}
|
|
|
|
function pageIndexChange() {
|
|
getCurrentPageData();
|
|
}
|
|
|
|
function pageSizeChange() {
|
|
pager.pageIndex = 1;
|
|
getCurrentPageData();
|
|
}
|
|
|
|
function handleCopy(text: string) {
|
|
inputCopy(text);
|
|
}
|
|
const openDetail = (id) => {
|
|
detailDrawerCtrl.value = true;
|
|
getMalwareDetails(id)
|
|
}
|
|
|
|
function inputCopy(text: string) {
|
|
const aux = document.createElement('input');
|
|
aux.setAttribute('value', text);
|
|
document.body.appendChild(aux);
|
|
aux.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(aux);
|
|
Message({ type: 'success', message: '复制成功' });
|
|
}
|
|
|
|
|
|
// 暴露方法，供父组件调用
|
|
defineExpose({
|
|
openDetail,
|
|
});
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
.malware-detail-card {
|
|
border-radius: 8px;
|
|
border: 1px solid #EEF0F5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.title {
|
|
color: #191919;
|
|
padding: 10px 16px;
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
background-color: #F3F3F3;
|
|
}
|
|
.content {
|
|
padding: 20px 16px;
|
|
:deep(.devui-table__thead .header-container) {
|
|
background-color: #F3F3F3;
|
|
}
|
|
}
|
|
}
|
|
.log-box {
|
|
border-radius: 8px;
|
|
background: #F7F8FA;
|
|
border: 1px solid #EEF0F5;
|
|
padding: 8px 16px;
|
|
}
|
|
.single-line-ellipsis {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
</style>
|