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

330
src/views/Jyh/VulnerabilityDatabase/index.vue
View File

@@ -14,7 +14,7 @@
class="main-search-input"
/>
<button class="search-icon-btn">
<i class="icon-search d-icon d-icon-search"></i>
<i class="icon-search d-icon icon-search"></i>
</button>
</div>
</div>
@@ -95,9 +95,9 @@
<div class="filter-item">
<label>查询时间</label>
<div class="date-range-mock">
<input placeholder="开始日期" class="date-input" />
<input placeholder="开始日期" class="date-input"/>
<span class="separator">-</span>
<input placeholder="结束日期" class="date-input" />
<input placeholder="结束日期" class="date-input"/>
</div>
</div>
@@ -110,13 +110,13 @@
<div class="collapse-link">
<a href="#" @click.prevent="isFilterCollapsed = !isFilterCollapsed">
{{ isFilterCollapsed ? '展开' : '收起' }}
<i class="d-icon" :class="isFilterCollapsed ? 'd-icon-arrow-down' : 'd-icon-arrow-up'"></i>
<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 d-icon-download"></i> 下载漏洞数据
<i class="d-icon icon-download"></i> 下载漏洞数据
</d-button>
</div>
@@ -126,7 +126,7 @@
</template>
<script setup>
import { ref } from 'vue';
import {ref} from 'vue';
// 假设已安装 vue-devui，部分组件需要按需引入或全局注册
// import { DButton, DSelect, DInput, DPagination } from 'vue-devui';
@@ -135,11 +135,51 @@ const isFilterCollapsed = ref(true); // 【新增：控制高级搜索的展开/
// 模拟漏洞数据 (保持不变)
const vulnList = ref([
{ title: 'FreePBX SQL注入漏洞', cnnvd: 'CNNVD-202512-423', level: '低危', createTime: '2025-12-04', updateTime: '2025-12-04', iconType: 'blue', iconClass: 'icon-bug' },
{ title: 'WordPress Plugin CSSIgniter Shortcodes 跨站脚本漏洞', cnnvd: 'CNNVD-202512-422', level: '中危', createTime: '2025-12-03', updateTime: '2025-12-04', iconType: 'yellow', iconClass: 'icon-bug' },
{ title: 'WordPress Plugin Modula Image Gallery 路径遍历漏洞', cnnvd: 'CNNVD-202512-421', level: '高危', createTime: '2025-12-03', updateTime: '2025-12-04', iconType: 'orange', iconClass: 'icon-bug' },
{ title: 'WordPress Plugin Modula Image Gallery 代码问题漏洞', cnnvd: 'CNNVD-202512-420', level: '高危', createTime: '2025-12-03', updateTime: '2025-12-04', iconType: 'orange', iconClass: 'icon-bug' },
{ title: 'WordPress Plugin MXChat 信息泄露漏洞', cnnvd: 'CNNVD-202512-419', level: '中危', createTime: '2025-12-03', updateTime: '2025-12-04', iconType: 'yellow', iconClass: 'icon-bug' },
{
title: 'FreePBX SQL注入漏洞',
cnnvd: 'CNNVD-202512-423',
level: '低危',
createTime: '2025-12-04',
updateTime: '2025-12-04',
iconType: 'blue',
iconClass: 'icon-bug'
},
{
title: 'WordPress Plugin CSSIgniter Shortcodes 跨站脚本漏洞',
cnnvd: 'CNNVD-202512-422',
level: '中危',
createTime: '2025-12-03',
updateTime: '2025-12-04',
iconType: 'yellow',
iconClass: 'icon-bug'
},
{
title: 'WordPress Plugin Modula Image Gallery 路径遍历漏洞',
cnnvd: 'CNNVD-202512-421',
level: '高危',
createTime: '2025-12-03',
updateTime: '2025-12-04',
iconType: 'orange',
iconClass: 'icon-bug'
},
{
title: 'WordPress Plugin Modula Image Gallery 代码问题漏洞',
cnnvd: 'CNNVD-202512-420',
level: '高危',
createTime: '2025-12-03',
updateTime: '2025-12-04',
iconType: 'orange',
iconClass: 'icon-bug'
},
{
title: 'WordPress Plugin MXChat 信息泄露漏洞',
cnnvd: 'CNNVD-202512-419',
level: '中危',
createTime: '2025-12-03',
updateTime: '2025-12-04',
iconType: 'yellow',
iconClass: 'icon-bug'
},
]);
// 筛选表单数据 (保持不变)
@@ -150,9 +190,9 @@ const filter = ref({
dateType: '收录时间',
});
const levelOptions = [{ label: '高危', value: 'high' }, { label: '中危', value: 'medium' }, { label: '低危', value: 'low' }];
const typeOptions = [{ label: 'SQL注入', value: 'sql' }, { label: 'XSS', value: 'xss' }];
const dateTypeOptions = [{ label: '收录时间', value: 'create' }, { label: '更新时间', value: 'update' }];
const levelOptions = [{label: '高危', value: 'high'}, {label: '中危', value: 'medium'}, {label: '低危', value: 'low'}];
const typeOptions = [{label: 'SQL注入', value: 'sql'}, {label: 'XSS', value: 'xss'}];
const dateTypeOptions = [{label: '收录时间', value: 'create'}, {label: '更新时间', value: 'update'}];
// 辅助函数 (保持不变)
const getLevelClass = (level) => {
@@ -187,8 +227,9 @@ const highlightKeyword = (text) => {
position: relative;
overflow: hidden;
text-align: center;
background-image: url(@/assets/v3/louDong_back.4bfd0a5.png);
background-image: url(@/assets/v3/louDong_back.4bfd0a5.png);
}
.page-title {
color: #fff;
font-size: 36px;
@@ -196,14 +237,50 @@ const highlightKeyword = (text) => {
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; }
.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;
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;
pointer-events: none;
z-index: 1;
}
.main-container {
@@ -220,8 +297,14 @@ const highlightKeyword = (text) => {
align-items: flex-start;
}
.list-column { flex: 1; }
.sidebar-column { width: 320px; flex-shrink: 0; }
.list-column {
flex: 1;
}
.sidebar-column {
width: 320px;
flex-shrink: 0;
}
.vuln-card {
background-color: #fff;
@@ -232,35 +315,130 @@ const highlightKeyword = (text) => {
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.vuln-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.vuln-card.border-low { border-left: 4px solid #3d7fff; }
.vuln-card.border-medium { border-left: 4px solid #feca57; }
.vuln-card.border-high { border-left: 4px solid #ff9f43; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.vuln-title { font-size: 16px; font-weight: 600; color: #333; margin: 0; line-height: 1.4; }
.vuln-title:hover { color: #3d7fff; }
.vuln-icon-wrapper { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 15px; flex-shrink: 0; }
.vuln-icon-wrapper.blue { background-color: #e6f7ff; color: #1890ff; }
.vuln-icon-wrapper.yellow { background-color: #fffbe6; color: #faad14; }
.vuln-icon-wrapper.orange { background-color: #fff2e8; color: #fa541c; }
.card-meta { display: flex; align-items: center; margin-bottom: 15px; }
.cnnvd-tag { background-color: #eff6ff; color: #3d7fff; font-size: 12px; padding: 4px 8px; border-radius: 2px; margin-right: 10px; }
.level-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; }
.card-footer { font-size: 12px; color: #999; }
.date-item { margin-right: 30px; }
.pagination-wrapper { margin-top: 20px; display: flex; justify-content: flex-end; }
.vuln-card.border-low {
border-left: 4px solid #3d7fff;
}
.vuln-card.border-medium {
border-left: 4px solid #feca57;
}
.vuln-card.border-high {
border-left: 4px solid #ff9f43;
}
.card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.vuln-title {
font-size: 16px;
font-weight: 600;
color: #333;
margin: 0;
line-height: 1.4;
}
.vuln-title:hover {
color: #3d7fff;
}
.vuln-icon-wrapper {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;
flex-shrink: 0;
}
.vuln-icon-wrapper.blue {
background-color: #e6f7ff;
color: #1890ff;
}
.vuln-icon-wrapper.yellow {
background-color: #fffbe6;
color: #faad14;
}
.vuln-icon-wrapper.orange {
background-color: #fff2e8;
color: #fa541c;
}
.card-meta {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.cnnvd-tag {
background-color: #eff6ff;
color: #3d7fff;
font-size: 12px;
padding: 4px 8px;
border-radius: 2px;
margin-right: 10px;
}
.level-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;
}
.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;
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;
font-size: 16px;
font-weight: 600;
margin-bottom: 20px; /* 展开时有间距 */
color: #333;
}
@@ -271,19 +449,55 @@ const highlightKeyword = (text) => {
overflow: hidden;
}
.filter-item { margin-bottom: 15px; }
.filter-item label { display: block; font-size: 13px; color: #666; margin-bottom: 8px; }
.filter-item {
margin-bottom: 15px;
}
.filter-item label {
display: block;
font-size: 13px;
color: #666;
margin-bottom: 8px;
}
/* DevUI 组件样式覆盖 */
: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%;
: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;
}
.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;
@@ -302,5 +516,11 @@ const highlightKeyword = (text) => {
}
}
.download-btn { width: 100%; background-color: #3d7fff !important; border-color: #3d7fff !important; height: 40px; font-size: 14px; }
.download-btn {
width: 100%;
background-color: #3d7fff !important;
border-color: #3d7fff !important;
height: 40px;
font-size: 14px;
}
</style>