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:08:59 +08:00
parent 28ea0cc27f
commit 5550b0fb7f
6 changed files with 366 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/Jyh/Pricing/component/PricingComparisonTable.vue
View File

@@ -205,7 +205,7 @@ const comparisonData = ref<FeatureSection[]>([
.comparison-table-container {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
margin: 60px auto;
padding: 40px 20px;
background-color: #fff;
color: #000;

306
src/views/Jyh/VulnerabilityDatabase/index.vue Normal file
View File

@@ -0,0 +1,306 @@
<template>
<div class="vuln-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="搜索关键字：CNNVD编号 CVE编号"
class="main-search-input"
/>
<button class="search-icon-btn">
<i class="icon-search d-icon d-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="vuln-list">
<div
v-for="(item, index) in vulnList"
:key="index"
class="vuln-card"
:class="getCardBorderClass(item.level)"
>
<div class="card-top">
<h3 class="vuln-title" v-html="highlightKeyword(item.title)"></h3>
<div class="vuln-icon-wrapper" :class="item.iconType">
<i class="d-icon" :class="item.iconClass"></i>
</div>
</div>
<div class="card-meta">
<span class="cnnvd-tag">CNNVD编号：{{ item.cnnvd }}</span>
<span
v-if="item.level"
class="level-tag"
:class="getLevelClass(item.level)"
>
{{ item.level }}
</span>
</div>
<div class="card-footer">
<span class="date-item">收录时间：{{ item.createTime }}</span>
<span class="date-item">更新时间：{{ item.updateTime }}</span>
</div>
</div>
</div>
<div class="pagination-wrapper">
<d-pagination
:total="317483"
: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.level" placeholder="请选择" :options="levelOptions"></d-select>
</div>
<div class="filter-item">
<label>漏洞类型</label>
<d-select v-model="filter.type" placeholder="请选择" :options="typeOptions"></d-select>
</div>
<div v-if="!isFilterCollapsed" class="filter-item">
<label>厂商</label>
<d-input v-model="filter.vendor" placeholder="请输入厂商"></d-input>
</div>
<div v-if="!isFilterCollapsed" class="filter-item">
<label>时间类型</label>
<d-select v-model="filter.dateType" placeholder="时间类型" :options="dateTypeOptions"></d-select>
</div>
<div 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 icon="search" variant="solid" color="primary" class="confirm-btn">确认</d-button>
<d-button icon="refresh" class="reset-btn">取消</d-button>
</div>
</div>
<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>
</a>
</div>
</div>
<d-button class="download-btn" variant="solid" color="primary" icon="icon-download">
<i class="d-icon d-icon-download"></i> 下载漏洞数据
</d-button>
</div>
</div>
</main>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 假设已安装 vue-devui，部分组件需要按需引入或全局注册
// import { DButton, DSelect, DInput, DPagination } from 'vue-devui';
const mainKeyword = ref('');
const isFilterCollapsed = ref(false); // 【新增：控制高级搜索的展开/收起】
// 模拟漏洞数据 (保持不变)
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' },
]);
// 筛选表单数据 (保持不变)
const filter = ref({
level: '',
type: '',
vendor: '',
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 getLevelClass = (level) => {
if (level === '高危') return 'tag-high';
if (level === '中危') return 'tag-medium';
return 'tag-low';
};
const getCardBorderClass = (level) => {
if (level === '高危') return 'border-high';
if (level === '中危') return 'border-medium';
return 'border-low';
};
const highlightKeyword = (text) => {
return text;
};
</script>
<style lang="scss" scoped>
/* 全局重置 */
.vuln-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; }
.vuln-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);
}
.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; }
.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; }
/* 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%;
}
.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;
.d-icon {
margin-left: 5px;
}
}
.download-btn { width: 100%; background-color: #3d7fff !important; border-color: #3d7fff !important; height: 40px; font-size: 14px; }
</style>