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

Tcode平台改造升级-安全事件中心页面开发

Browse Source
This commit is contained in:
fmk1023
2025-12-05 16:54:27 +08:00
parent e7150457c4
commit 1e2d8f775d
9 changed files with 1271 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

568
src/views/Jyh/ThreatIntelligence/index.vue Normal file
View File

@@ -0,0 +1,568 @@
<template>
<div class="threat-page">
<header class="page-header">
<div class="header-content">
<h1 class="page-title">威胁情报库</h1>
<div class="main-search-wrapper">
<div class="search-input-group">
<input
v-model="mainKeyword"
type="text"
placeholder="搜索关键字：IP地址 域名 恶意文件哈希"
class="main-search-input"
/>
<button class="search-icon-btn">
<i class="icon-search d-icon icon-search"></i>
</button>
</div>
</div>
</div>
<div class="header-illustration">
<div class="shield-graphic"></div>
</div>
</header>
<main class="main-container">
<div class="content-layout">
<div class="list-column">
<div class="threat-list">
<div
v-for="(item, index) in threatList"
:key="index"
class="threat-card vuln-card"
:class="getCardBorderClass(item.severity)"
>
<div class="card-top">
<h3 class="threat-title vuln-title">{{ item.title }}</h3>
<div class="threat-icon-wrapper vuln-icon-wrapper" :class="item.iconType">
<i class="d-icon" :class="item.iconClass"></i>
</div>
</div>
<div class="card-meta">
<span class="indicator-tag cnnvd-tag">
{{ item.indicatorType }}：{{ item.indicatorValue }}
</span>
<span
v-if="item.severity"
class="severity-tag level-tag"
:class="getLevelClass(item.severity)"
>
{{ item.severity }}
</span>
</div>
<div class="card-footer">
<span class="date-item">首次发现：{{ item.firstSeen }}</span>
<span class="date-item">最后活动：{{ item.lastActivity }}</span>
</div>
</div>
</div>
<div class="pagination-wrapper">
<d-pagination
:total="125678"
:page-size="10"
:page-index="1"
show-page-selector
></d-pagination>
</div>
</div>
<div class="sidebar-column">
<div class="filter-card">
<div class="filter-header">高级筛选</div>
<div class="filter-body-expanded">
<div class="filter-item">
<label>威胁等级</label>
<d-select v-model="filter.severity" placeholder="请选择" :options="severityOptions"></d-select>
</div>
<div class="filter-item">
<label>情报类型</label>
<d-select v-model="filter.type" placeholder="请选择" :options="threatTypeOptions"></d-select>
</div>
<div v-if="!isFilterCollapsed" class="filter-item">
<label>所属组织</label>
<d-input v-model="filter.organization" placeholder="APT组织名称"></d-input>
</div>
<div class="filter-item">
<label>活动时间</label>
<d-select v-model="filter.dateType" placeholder="时间类型" :options="dateTypeOptions"></d-select>
</div>
<div v-if="!isFilterCollapsed" class="filter-item">
<label>查询时间</label>
<div class="date-range-mock">
<input placeholder="开始日期" class="date-input"/>
<span class="separator">-</span>
<input placeholder="结束日期" class="date-input"/>
</div>
</div>
<div class="filter-actions">
<d-button variant="solid" color="primary" class="confirm-btn">查询</d-button>
<d-button class="reset-btn">重置</d-button>
</div>
</div>
<div class="collapse-link">
<a href="#" @click.prevent="isFilterCollapsed = !isFilterCollapsed">
{{ isFilterCollapsed ? '展开' : '收起' }}
<i class="d-icon" :class="isFilterCollapsed ? 'icon-chevron-down-2' : 'icon-chevron-up-2'"></i>
</a>
</div>
</div>
<d-button class="download-btn" variant="solid" color="primary" icon="icon-download">
<i class="d-icon icon-download"></i> 导出情报数据
</d-button>
</div>
</div>
</main>
</div>
</template>
<script setup>
import {ref} from 'vue';
const mainKeyword = ref('');
const isFilterCollapsed = ref(false);
// 模拟威胁情报数据
const threatList = ref([
{
title: '针对金融行业的钓鱼活动（C2: 192.168.1.1）',
severity: '危急',
indicatorType: 'IP',
indicatorValue: '192.168.1.1',
firstSeen: '2025-11-20',
lastActivity: '2025-12-04',
iconType: 'red',
iconClass: 'icon-lock-private', // 模拟一个红色锁图标
},
{
title: 'APT-XYZ组织最新使用的恶意域名',
severity: '高危',
indicatorType: 'Domain',
indicatorValue: 'evil-updates.com',
firstSeen: '2025-12-01',
lastActivity: '2025-12-05',
iconType: 'orange',
iconClass: 'icon-lock-private',
},
{
title: '新型勒索软件变种（Ransom.VariantA）',
severity: '中危',
indicatorType: 'Hash',
indicatorValue: 'A1B2C3D4E5F67890',
firstSeen: '2025-12-03',
lastActivity: '2025-12-05',
iconType: 'yellow',
iconClass: 'icon-lock-private',
},
{
title: '僵尸网络C&C服务器更新',
severity: '中危',
indicatorType: 'IP',
indicatorValue: '203.0.113.44',
firstSeen: '2025-12-04',
lastActivity: '2025-12-04',
iconType: 'yellow',
iconClass: 'icon-lock-private',
},
{
title: '普通信息泄漏警告',
severity: '低危',
indicatorType: 'URL',
indicatorValue: 'example.com/login',
firstSeen: '2025-12-05',
lastActivity: '2025-12-05',
iconType: 'blue',
iconClass: 'icon-lock-private',
},
]);
// 筛选表单数据
const filter = ref({
severity: '',
type: '',
organization: '',
dateType: '首次发现',
});
const severityOptions = [
{label: '危急', value: 'critical'},
{label: '高危', value: 'high'},
{label: '中危', value: 'medium'},
{label: '低危', value: 'low'}
];
const threatTypeOptions = [
{label: '恶意IP', value: 'ip'},
{label: '恶意域名', value: 'domain'},
{label: '恶意文件哈希', value: 'hash'}
];
const dateTypeOptions = [
{label: '首次发现', value: 'first'},
{label: '最后活动', value: 'last'}
];
// 辅助函数：获取标签颜色类
const getLevelClass = (severity) => {
if (severity === '危急') return 'tag-critical';
if (severity === '高危') return 'tag-high';
if (severity === '中危') return 'tag-medium';
return 'tag-low';
};
// 辅助函数：获取卡片左边框颜色类
const getCardBorderClass = (severity) => {
if (severity === '危急') return 'border-critical';
if (severity === '高危') return 'border-high';
if (severity === '中危') return 'border-medium';
return 'border-low';
};
const highlightKeyword = (text) => {
return text;
};
</script>
<style lang="scss" scoped>
.threat-page {
background-color: #f0f2f5;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #333;
}
.page-header {
background-color: #0f1724;
padding: 60px 0 100px;
position: relative;
overflow: hidden;
text-align: center;
/* 假设背景图路径正确 */
background-image: url(@/assets/v3/louDong_back.4bfd0a5.png);
}
.page-title {
color: #fff;
font-size: 36px;
font-weight: 500;
margin-bottom: 30px;
letter-spacing: 2px;
}
.main-search-wrapper {
max-width: 800px;
margin: 0 auto;
}
.search-input-group {
display: flex;
background-color: #fff;
border-radius: 4px;
overflow: hidden;
height: 50px;
}
.main-search-input {
flex: 1;
border: none;
outline: none;
padding: 0 20px;
font-size: 14px;
color: #333;
}
.search-icon-btn {
width: 50px;
background: none;
border: none;
cursor: pointer;
color: #3d7fff;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
}
.header-illustration {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 400px;
background: radial-gradient(circle at 70% 50%, rgba(61, 127, 255, 0.1), transparent 60%);
pointer-events: none;
z-index: 1;
}
.main-container {
max-width: 1300px;
margin: 40px auto;
position: relative;
z-index: 10;
padding: 0 20px;
}
.content-layout {
display: flex;
gap: 20px;
align-items: flex-start;
}
.list-column {
flex: 1;
}
.sidebar-column {
width: 320px;
flex-shrink: 0;
}
.threat-card {
background-color: #fff;
margin-bottom: 16px;
padding: 20px;
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.threat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.threat-card.border-low {
border-left: 4px solid #3d7fff;
}
/* 蓝色 (低危) */
.threat-card.border-medium {
border-left: 4px solid #feca57;
}
/* 黄色 (中危) */
.threat-card.border-high {
border-left: 4px solid #ff9f43;
}
/* 橙色 (高危) */
.threat-card.border-critical {
border-left: 4px solid #ff4757;
}
/* 红色 (危急) */
.card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.threat-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
line-height: 1.4;
}
.threat-title:hover {
color: #3d7fff;
}
.threat-icon-wrapper {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;
flex-shrink: 0;
}
.threat-icon-wrapper.blue {
background-color: #e6f7ff;
color: #1890ff;
}
.threat-icon-wrapper.yellow {
background-color: #fffbe6;
color: #faad14;
}
.threat-icon-wrapper.orange {
background-color: #fff2e8;
color: #fa541c;
}
.threat-icon-wrapper.red {
background-color: #ffe6e6;
color: #ff4757;
}
/* 新增红色图标背景 */
.card-meta {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.indicator-tag {
background-color: #eff6ff;
color: #3d7fff;
font-size: 12px;
padding: 4px 8px;
border-radius: 2px;
margin-right: 10px;
}
.severity-tag {
font-size: 12px;
padding: 4px 12px;
border-radius: 2px;
color: #fff;
}
.tag-low {
background-color: #1890ff;
}
.tag-medium {
background-color: #feca57;
color: #fff;
}
.tag-high {
background-color: #ff9f43;
}
.tag-critical {
background-color: #ff4757;
}
/* 红色 */
.card-footer {
font-size: 12px;
color: #999;
}
.date-item {
margin-right: 30px;
}
.pagination-wrapper {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
.filter-card {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
padding: 20px;
margin-bottom: 20px;
}
.filter-header {
font-size: 16px;
font-weight: 600;
margin-bottom: 20px;
color: #333;
}
.filter-body-expanded {
transition: max-height 0.3s ease-in-out;
overflow: hidden;
}
.filter-item {
margin-bottom: 15px;
}
.filter-item label {
display: block;
font-size: 13px;
color: #666;
margin-bottom: 8px;
}
:deep(.devui-select), :deep(.devui-input__inner) {
width: 100%;
}
.date-range-mock {
display: flex;
align-items: center;
gap: 5px;
}
.date-input {
flex: 1;
border: 1px solid #dcdfe6;
border-radius: 2px;
height: 32px;
padding: 0 10px;
font-size: 12px;
color: #666;
width: 100%;
}
.filter-actions {
display: flex;
gap: 10px;
margin-top: 25px;
justify-content: center;
}
.confirm-btn {
background-color: #3d7fff !important;
border-color: #3d7fff !important;
}
.reset-btn {
border: 1px solid #dcdfe6;
color: #666;
}
.collapse-link {
text-align: right;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid #eee;
}
.collapse-link a {
color: #3d7fff;
font-size: 12px;
text-decoration: none;
}
.collapse-link .d-icon {
margin-left: 5px;
}
.download-btn {
width: 100%;
background-color: #3d7fff !important;
border-color: #3d7fff !important;
height: 40px;
font-size: 14px;
}
</style>