可信代码库V2版-首页展示页面原型开发
This commit is contained in:
fmk1023
BIN
src/assets/imgs/jyh/menu/AI大模型能力.png
Normal file
BIN
src/assets/imgs/jyh/menu/AI大模型能力.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 503 B |
BIN
src/assets/imgs/jyh/menu/vulnerabilityForewarning.png
Normal file
BIN
src/assets/imgs/jyh/menu/vulnerabilityForewarning.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 510 B |
BIN
src/assets/imgs/jyh/menu/vulnerabilityList.png
Normal file
BIN
src/assets/imgs/jyh/menu/vulnerabilityList.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 430 B |
BIN
src/assets/imgs/jyh/menu/企业审核.png
Normal file
BIN
src/assets/imgs/jyh/menu/企业审核.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/imgs/jyh/menu/企业管理.png
Normal file
BIN
src/assets/imgs/jyh/menu/企业管理.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/imgs/jyh/menu/入库任务列表.png
Normal file
BIN
src/assets/imgs/jyh/menu/入库任务列表.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 B |
BIN
src/assets/imgs/jyh/menu/入库申请.png
Normal file
BIN
src/assets/imgs/jyh/menu/入库申请.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 606 B |
BIN
src/assets/imgs/jyh/menu/可信治理.png
Normal file
BIN
src/assets/imgs/jyh/menu/可信治理.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/imgs/jyh/menu/可信软件.png
Normal file
BIN
src/assets/imgs/jyh/menu/可信软件.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/imgs/jyh/menu/已知漏洞检测.png
Normal file
BIN
src/assets/imgs/jyh/menu/已知漏洞检测.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 806 B |
BIN
src/assets/imgs/jyh/menu/恶意代码检测.png
Normal file
BIN
src/assets/imgs/jyh/menu/恶意代码检测.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 470 B |
BIN
src/assets/imgs/jyh/menu/成分分析.png
Normal file
BIN
src/assets/imgs/jyh/menu/成分分析.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 510 B |
BIN
src/assets/imgs/jyh/menu/治理标准.png
Normal file
BIN
src/assets/imgs/jyh/menu/治理标准.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/imgs/jyh/menu/许可证检测.png
Normal file
BIN
src/assets/imgs/jyh/menu/许可证检测.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 509 B |
BIN
src/assets/imgs/jyh/menu/风险预警.png
Normal file
BIN
src/assets/imgs/jyh/menu/风险预警.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@@ -46,6 +46,12 @@
|
||||
<span>帮助文档</span>
|
||||
</div>
|
||||
</d-button>
|
||||
<d-button class="jyh-button1" variant="solid" @click="handleHelp">
|
||||
<div class="flex flex-center">
|
||||
<img style="height: 15px;margin-right: 8px" width="16" :src="icon_helper" />
|
||||
<span>API开放入口</span>
|
||||
</div>
|
||||
</d-button>
|
||||
|
||||
<template v-if="!isLogin">
|
||||
<d-button @click="handleLogin('register')" class="min-w-[64px]">注册</d-button>
|
||||
|
||||
@@ -37,6 +37,7 @@
|
||||
<div class="cursor-pointer hidden-m" @click="handleLogin('login')" v-if="inSearch">
|
||||
<span>搜索记录</span>
|
||||
</div>
|
||||
<router-link :to="{ name: 'OurTeam' }" style="cursor: pointer; margin-right: 12px; text-decoration: none; color: inherit">关于我们</router-link>
|
||||
<d-button @click="handleLogin('register')" class="min-w-[64px]">注册</d-button>
|
||||
<d-button variant="solid" color="primary" @click="handleLogin('login')">账号登录</d-button>
|
||||
</template>
|
||||
|
||||
@@ -161,6 +161,19 @@ export default [
|
||||
asideMenu: 'drawer' // 左侧菜单抽屉模式
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'Insights',
|
||||
name: 'Insights',
|
||||
component: () => import('@/views/Jyh/Insights/index.vue'),
|
||||
meta: {
|
||||
title: '安全情报与动态',
|
||||
reportTitle: '安全情报与动态',
|
||||
className: 'w-full min-w-full',
|
||||
hiddenFooter: true,
|
||||
hasMobile: true,
|
||||
asideMenu: 'drawer' // 左侧菜单抽屉模式
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -35,9 +35,9 @@ import icon_jh from '@/assets/imgs/jyh/ai/icon_jh.png';
|
||||
const mySwiper = ref(null);
|
||||
const slideData = [
|
||||
{ id: 1, title: '热门开源软件', description: '列出热门开源软件',icon:icon_hot },
|
||||
{ id: 2, title: '预警公告', description: '列出最近预警公告',icon:icon_yj },
|
||||
{ id: 3, title: '你可以帮我做什么', description: '了解当前AI助手可以帮忙干什么',icon:icon_jh },
|
||||
{ id: 4, title: '热门开源软件', description: '列出热门开源软件',icon:icon_hot },
|
||||
{ id: 2, title: '漏洞问答/影响分析', description: '快速查询漏洞详情，分析安全影响范围',icon:icon_yj },
|
||||
{ id: 3, title: '预测功能', description: '基于AI模型预测安全风险趋势',icon:icon_jh },
|
||||
{ id: 4, title: 'API开放入口', description: '对接自动化安全检测与分析能力',icon:icon_hot },
|
||||
{ id: 5, title: '预警公告', description: '列出最近预警公告',icon:icon_yj },
|
||||
{ id: 6, title: '你可以帮我做什么', description: '了解当前AI助手可以帮忙干什么',icon:icon_jh }
|
||||
];
|
||||
|
||||
@@ -109,32 +109,6 @@
|
||||
</div>
|
||||
<!--操作按钮-->
|
||||
<div class="new-convo-button">
|
||||
<!-- <McPrompt-->
|
||||
<!-- v-if="startChat"-->
|
||||
<!-- class="simple-prompt"-->
|
||||
<!-- style="flex: 1"-->
|
||||
<!-- :list="simplePrompt"-->
|
||||
<!-- :direction="'horizontal'"-->
|
||||
<!-- @itemClick="onItemClick($event)"-->
|
||||
<!-- ></McPrompt>-->
|
||||
<!-- <div class="agent-knowledge">-->
|
||||
<!-- <d-dropdown :position="['top']" @toggle="(val) => (isAgentOpen = val)">-->
|
||||
<!-- <div class="agent-wrapper">-->
|
||||
<!-- <img src="@/assets/imgs/jyh/ai/aiLogo2.png" />-->
|
||||
<!-- <span>{{ selectedAgent.label }}</span>-->
|
||||
<!-- <i class="icon-infrastructure"></i>-->
|
||||
<!-- <i :class="['icon-chevron-down-2', { 'is-open': isAgentOpen }]"></i>-->
|
||||
<!-- </div>-->
|
||||
<!-- <template #menu>-->
|
||||
<!-- <McList :data="agentList" @select="(val) => (selectedAgent = val)"></McList>-->
|
||||
<!-- </template>-->
|
||||
<!-- </d-dropdown>-->
|
||||
<!-- <span class="agent-knowledge-dividing-line"></span>-->
|
||||
<!-- <div class="knowledge-wrapper">-->
|
||||
<!-- <i class="icon-operation-log"></i>-->
|
||||
<!-- <span>添加知识</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<d-button icon="add" shape="circle" title="新建对话" size="sm" @click="onNewConvo" />
|
||||
</div>
|
||||
<!--输入框-->
|
||||
@@ -143,11 +117,6 @@
|
||||
<template #extra>
|
||||
<div class="input-foot-wrapper">
|
||||
<div class="input-foot-left">
|
||||
<!-- <span v-for="(item, index) in inputFootIcons" :key="index" @click="() => onInputIconClick(item)">-->
|
||||
<!-- <i :class="item.icon"></i>-->
|
||||
<!-- {{ item.text }}-->
|
||||
<!-- </span>-->
|
||||
<!-- <span class="input-foot-dividing-line"></span>-->
|
||||
<span class="input-foot-maxlength">{{ inputValue.length }}/{{maxLength}}</span>
|
||||
</div>
|
||||
<div class="input-foot-right">
|
||||
@@ -167,9 +136,6 @@
|
||||
<div class="back-in-time-btn" @click="toggleHistory" :class="{ 'active': isHistoryVisible }">
|
||||
<i class="icon icon-history" title="查看历史"></i>
|
||||
</div>
|
||||
<!-- <div class="back-in-time-btn" @click="handleBackInTime">-->
|
||||
<!-- <i class="icon icon-operation-log" title="查看文档"></i>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
|
||||
<ViewHistoryAside ref="viewHistoryRef" :CONV_ID="CONV_ID" :username="username" v-show="isHistoryVisible" @select-conv="handleSelectConv"/>
|
||||
|
||||
@@ -60,54 +60,168 @@
|
||||
</d-dropdown-menu>
|
||||
<d-button icon="search" shape="circle" @click="search"></d-button>
|
||||
</div>
|
||||
<d-button v-if="isLogin" @click="check" ref="origin" icon="share" class="batch-btn">批量检索</d-button>
|
||||
<div class="home-information" v-if="infoList.length > 0">
|
||||
<div class="info-title">
|
||||
<div class="sub-title">
|
||||
<img src="@/assets/imgs/home/informIcon@2x.png" />
|
||||
<span>预警公告</span>
|
||||
<div style="width: 70%" class="from-blue-50 to-white">
|
||||
<!-- 顶部功能按钮 -->
|
||||
<d-row :gutter="16" class="mb-8 top-btn">
|
||||
<div style="cursor: pointer" v-for="item in topButtons" :key="item.name" @click="handleButtonClick(item)">
|
||||
<div style="width: 84px;height: 84px;flex-direction: column;padding: 12px;margin: 0 12px" class="bg-white rounded-lg shadow-md flex items-center justify-center mb-2">
|
||||
<div>
|
||||
<img style="width: 32px;height: 32px;margin-bottom: 4px" :src="item.icon" class="text-blue-600 text-xl"></img>
|
||||
</div>
|
||||
<div class="text-sm font-medium">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</d-row>
|
||||
|
||||
<!-- <a v-if="accountInfo.op_access_token" class="devui-link" @click="checkMore"
|
||||
>更多 <i class="icon icon-chevron-right-2"></i>
|
||||
</a>
|
||||
<span v-else class="text-blue-500">查看更多，请先登录</span> -->
|
||||
<div class="dashboard-page">
|
||||
<d-row :gutter="16" class="main-row">
|
||||
<!-- 左侧：全球威胁态势实时监控 -->
|
||||
<d-col :span="14">
|
||||
<div class="bg-white rounded-xl shadow-md p-4">
|
||||
<div class="section-title">全球威胁态势实时监控
|
||||
<a href="#" class="text-blue-600 text-sm">更多 ></a></div>
|
||||
<d-row :gutter="24" class="threat-row">
|
||||
<d-col :span="10">
|
||||
<d-chart :option="lineOption" style="width: 400px; height: 240px"></d-chart>
|
||||
</d-col>
|
||||
<d-col :span="8">
|
||||
<d-chart :option="pieOption" style="width: 240px; height: 240px"></d-chart>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<div class="data-card">
|
||||
<div class="data-item">
|
||||
<span class="data-label">今日检测量</span>
|
||||
<span class="data-value">128万次</span>
|
||||
<!-- <span class="data-value">128万次</span>-->
|
||||
<!-- <span class="data-desc">说明0</span>-->
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<span class="data-label">高危威胁</span>
|
||||
<span class="data-value danger">327起</span>
|
||||
<!-- <span class="data-value danger">327起</span>-->
|
||||
<!-- <span class="data-desc">说明0</span>-->
|
||||
</div>
|
||||
</div>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</div>
|
||||
</d-col>
|
||||
|
||||
<!-- 右侧：AI+安全核心能力 -->
|
||||
<d-col style="height: 320px" :span="10">
|
||||
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4">
|
||||
<div class="section-title">AI+安全核心能力
|
||||
<router-link :to="{ name: 'aihome' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 ></router-link>
|
||||
</div>
|
||||
<d-row :gutter="16" class="ai-capability-row">
|
||||
<d-col :span="8" v-for="(item, index) in aiCapabilities" :key="index">
|
||||
<div class="capability-card">
|
||||
<div class="capability-icon">
|
||||
<img :src="item.icon" class="text-blue-600 text-2xl"></img>
|
||||
</div>
|
||||
<h2 class="capability-title">{{ item.title }}</h2>
|
||||
<h4>{{ item.rate }}</h4>
|
||||
<p class="capability-desc">{{ item.desc }}</p>
|
||||
</div>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</div>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</div>
|
||||
<div class="info-content">
|
||||
<d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">
|
||||
<d-timeline-item
|
||||
v-for="(item, index) in infoList"
|
||||
:key="index"
|
||||
:dot-color="item.dotColor"
|
||||
:line-color="'var(--devui-form-control-line-hover)'"
|
||||
>
|
||||
<template #default>
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div
|
||||
class="cursor-pointer notice-content flex gap-2 items-center"
|
||||
@click="openWarningDetail(item, index)"
|
||||
>
|
||||
<span>{{ item.subject }}</span>
|
||||
<d-tag
|
||||
v-if="item.importance && tagMap[item.importance]"
|
||||
:color="tagMap[item.importance].color"
|
||||
size="sm"
|
||||
>{{ tagMap[item.importance].text }}</d-tag
|
||||
>
|
||||
</div>
|
||||
<div class="time-container">
|
||||
<d-icon name="icon-time"></d-icon>
|
||||
{{ item.publishTime }}
|
||||
|
||||
<!-- 团队与成果 + 最新动态 -->
|
||||
<d-row style="height: 237px" :gutter="16">
|
||||
<d-col style="height: 100%" :span="8">
|
||||
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4 mb-4">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-bold">团队与成果</h3>
|
||||
<router-link :to="{ name: 'OurTeam' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 ></router-link>
|
||||
</div>
|
||||
<div class="flex flex-col items-center">
|
||||
<h4 class="font-medium mb-2">顶尖安全团队</h4>
|
||||
<div class="flex gap-4 mb-3">
|
||||
<div class="flex flex-col items-center" v-for="member in teamMembers" :key="member.name">
|
||||
<img src="https://picsum.photos/id/1001/60/60" alt="团队成员" class="w-14 h-14 rounded-full mb-1">
|
||||
<span class="text-sm font-medium">{{ member.name }}</span>
|
||||
<span class="text-xs text-gray-500">{{ member.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #time>
|
||||
<span></span>
|
||||
</template>
|
||||
</d-timeline-item>
|
||||
</d-timeline>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="bg-blue-600 text-white text-xs px-3 py-1 rounded">国家级安全认证团队</button>
|
||||
<button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded">200+专利技术</button>
|
||||
<button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded">200+专利技术</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</d-col>
|
||||
<d-col style="height: 100%" :span="16">
|
||||
<div style="height: 100%" class="bg-white rounded-xl shadow-md p-4">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-bold">最新动态</h3>
|
||||
<router-link :to="{ name: 'Insights' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 ></router-link>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex gap-2" v-for="news in latestNews" :key="news.year">
|
||||
<span class="bg-red-100 text-red-600 text-xs px-2 py-0.5 rounded">{{ news.year }}</span>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium">{{ news.title }}</p>
|
||||
<p class="text-xs text-gray-500">{{ news.desc }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</div>
|
||||
<!-- <d-button v-if="isLogin" @click="check" ref="origin" icon="share" class="batch-btn">批量检索</d-button>-->
|
||||
<!-- <div class="home-information" v-if="infoList.length > 0">-->
|
||||
<!-- <div class="info-title">-->
|
||||
<!-- <div class="sub-title">-->
|
||||
<!-- <img src="@/assets/imgs/home/informIcon@2x.png" />-->
|
||||
<!-- <span>预警公告</span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <!– <a v-if="accountInfo.op_access_token" class="devui-link" @click="checkMore"-->
|
||||
<!-- >更多 <i class="icon icon-chevron-right-2"></i>-->
|
||||
<!-- </a>-->
|
||||
<!-- <span v-else class="text-blue-500">查看更多，请先登录</span> –>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="info-content">-->
|
||||
<!-- <d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">-->
|
||||
<!-- <d-timeline-item-->
|
||||
<!-- v-for="(item, index) in infoList"-->
|
||||
<!-- :key="index"-->
|
||||
<!-- :dot-color="item.dotColor"-->
|
||||
<!-- :line-color="'var(--devui-form-control-line-hover)'"-->
|
||||
<!-- >-->
|
||||
<!-- <template #default>-->
|
||||
<!-- <div class="flex items-center justify-between w-full">-->
|
||||
<!-- <div-->
|
||||
<!-- class="cursor-pointer notice-content flex gap-2 items-center"-->
|
||||
<!-- @click="openWarningDetail(item, index)"-->
|
||||
<!-- >-->
|
||||
<!-- <span>{{ item.subject }}</span>-->
|
||||
<!-- <d-tag-->
|
||||
<!-- v-if="item.importance && tagMap[item.importance]"-->
|
||||
<!-- :color="tagMap[item.importance].color"-->
|
||||
<!-- size="sm"-->
|
||||
<!-- >{{ tagMap[item.importance].text }}</d-tag-->
|
||||
<!-- >-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="time-container">-->
|
||||
<!-- <d-icon name="icon-time"></d-icon>-->
|
||||
<!-- {{ item.publishTime }}-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
<!-- <template #time>-->
|
||||
<!-- <span></span>-->
|
||||
<!-- </template>-->
|
||||
<!-- </d-timeline-item>-->
|
||||
<!-- </d-timeline>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -127,6 +241,73 @@ import { useGlobalInfoStore } from '@/stores/Global';
|
||||
const { updateHeaderSearch } = useGlobalInfoStore();
|
||||
const { accountInfo } = useAccount();
|
||||
import { useDiscussGetUserInfo } from '@/api/discussion/hook';
|
||||
import { DChart } from 'vue-devui/echarts';
|
||||
import { reactive } from 'vue';
|
||||
|
||||
const lineOption = reactive({
|
||||
tooltip: { show: true, trigger: 'axis' },
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '3%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['0', '30', '60', '90', '120', '150', '180', '210', '240'],
|
||||
axisLine: { lineStyle: { color: '#909399' } },
|
||||
axisTick: { show: false },
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 550,
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { lineStyle: { color: '#eee' } },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '实时威胁A',
|
||||
data: [0, 150, 250, 200, 350, 400, 450, 500, 550],
|
||||
type: 'line',
|
||||
itemStyle: { color: '#ff9f40' },
|
||||
lineStyle: { color: '#ff9f40' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
},
|
||||
{
|
||||
name: '实时威胁B',
|
||||
data: [0, 100, 200, 150, 300, 350, 400, 450, 500],
|
||||
type: 'line',
|
||||
itemStyle: { color: '#36a2eb' },
|
||||
lineStyle: { color: '#36a2eb' },
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const pieOption = reactive({
|
||||
tooltip: { show: true, trigger: 'item' },
|
||||
series: [
|
||||
{
|
||||
title: '态势感知',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
data: [
|
||||
{ name: '态势感知', value: 34, itemStyle: { color: '#ff6384' } },
|
||||
{ name: '实时威胁', value: 33, itemStyle: { color: '#36a2eb' } },
|
||||
{ name: '其他', value: 33, itemStyle: { color: '#ffce56' } },
|
||||
],
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {d}%',
|
||||
position: 'center',
|
||||
},
|
||||
labelLine: { show: true },
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -147,6 +328,84 @@ const currentWarning = ref();
|
||||
const { isLogin } = useDiscussGetUserInfo();
|
||||
const homeSearch = ref(null);
|
||||
const dropdownWidth = ref(0);
|
||||
|
||||
import aqts from '@/assets/imgs/jyh/menu/风险预警.png'
|
||||
import aqqb from '@/assets/imgs/jyh/menu/许可证检测.png'
|
||||
import aqjc from '@/assets/imgs/jyh/menu/已知漏洞检测.png'
|
||||
import aqzk from '@/assets/imgs/jyh/menu/可信治理.png'
|
||||
import kxrj from '@/assets/imgs/jyh/menu/可信软件.png'
|
||||
// 顶部功能按钮数据
|
||||
const topButtons = ref([
|
||||
{ name: '安全智库', icon: aqzk },
|
||||
{ name: '安全检测', icon: aqjc },
|
||||
{ name: '安全情报', icon: aqqb},
|
||||
{ name: '安全态势', icon: aqts },
|
||||
{ name: '智能引擎', icon: kxrj },
|
||||
]);
|
||||
|
||||
// 按钮点击事件处理
|
||||
const handleButtonClick = (item) => {
|
||||
// 路由映射关系：按钮名称 -> 对应路由name或新页面地址
|
||||
const routeMap = {
|
||||
'安全智库': 'Search', // 对应name: 'Search'的路由
|
||||
'安全检测': 'TestingCenter', // 对应name: 'TestingCenter'的路由
|
||||
'安全情报': 'Insights', // 对应name: 'Insights'的路由
|
||||
'智能引擎': 'aihome', // 对应name: 'aihome'的路由
|
||||
'安全态势': 'https://example.com/security-situation' // 安全态势大屏地址（替换为实际地址）
|
||||
};
|
||||
|
||||
const target = routeMap[item.name];
|
||||
if (!target) return;
|
||||
|
||||
// 区分路由跳转和新页面打开
|
||||
if (item.name === '安全态势') {
|
||||
// 安全态势：打开新页面
|
||||
window.open(target, '_blank');
|
||||
} else {
|
||||
// 其他按钮：路由跳转
|
||||
router.push({ name: target });
|
||||
}
|
||||
};
|
||||
|
||||
import znjc from '@/assets/imgs/jyh/menu/AI大模型能力.png'
|
||||
import aiLogo1 from '@/assets/imgs/jyh/ai/aiLogo1.png'
|
||||
import vulnerabilityForewarning from '@/assets/imgs/jyh/menu/vulnerabilityForewarning.png'
|
||||
// AI+安全核心能力数据
|
||||
const aiCapabilities = ref([
|
||||
{
|
||||
title: '智能检测引擎',
|
||||
rate: '（覆盖99.9%样本率）',
|
||||
desc: '智能检测引擎具备对各类文件、恶意软件的高精度识别能力。',
|
||||
icon: znjc
|
||||
},
|
||||
{
|
||||
title: '行为分析模型',
|
||||
rate: '（实时响应<1秒）',
|
||||
desc: '深度行为分析模型可实时识别异常行为，精准定位威胁根源。',
|
||||
icon: aiLogo1
|
||||
},
|
||||
{
|
||||
title: '自动溯源系统',
|
||||
rate: '（覆盖99.9%）',
|
||||
desc: '自动溯源系统可快速定位威胁来源，助力威胁事件全链路分析。',
|
||||
icon: vulnerabilityForewarning
|
||||
},
|
||||
]);
|
||||
|
||||
// 团队成员数据
|
||||
const teamMembers = ref([
|
||||
{ name: '主理', title: '安全专家/负责人' },
|
||||
{ name: '顾问', title: '企业安全专家' },
|
||||
{ name: '架构', title: '技术架构专家' },
|
||||
]);
|
||||
|
||||
// 最新动态数据
|
||||
const latestNews = ref([
|
||||
{ year: '2024', title: '中国头安全实验室等合作的智能决策模型授奖', desc: '智能决策模型在多领域安全决策中表现卓越，获行业权威奖项。', more: true },
|
||||
{ year: '2023', title: '智能检测引擎从一定论到再超越的与证明', desc: '2024年深度优化检测，在极端场景中达99.9%准确率，性能、智能、召回率再升级。', more: false },
|
||||
{ year: '2023', title: '新闻网常务委员：邻区区委交换稿与证明', desc: '网络空间安全会议上，邻区、外防负责人、专家会首席等共论，包含新成果实证。', more: false },
|
||||
]);
|
||||
|
||||
const tagMap = {
|
||||
critical: {
|
||||
text: '致命',
|
||||
@@ -332,8 +591,8 @@ getNoticeList();
|
||||
|
||||
.home-content {
|
||||
font-size: 14px;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-self: center;
|
||||
@@ -523,12 +782,165 @@ getNoticeList();
|
||||
:deep(.devui-timeline-item-data-right) {
|
||||
width: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.warning-modal {
|
||||
.devui-modal__body {
|
||||
padding: 0px !important;
|
||||
// 页面容器基础样式
|
||||
.bg-gradient-to-b {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
// 卡片通用样式
|
||||
.bg-white {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
// 文本样式
|
||||
.text-lg {
|
||||
font-size: 18px;
|
||||
}
|
||||
.text-sm {
|
||||
font-size: 14px;
|
||||
}
|
||||
.text-xs {
|
||||
font-size: 12px;
|
||||
}
|
||||
.font-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
// 间距与布局
|
||||
.mb-8 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.p-4 {
|
||||
padding: 16px;
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.dashboard-page {
|
||||
//padding: 20px;
|
||||
////background: #fff;
|
||||
//border-radius: 8px;
|
||||
//box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
.chart-card {
|
||||
padding: 20px;
|
||||
//background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
a {
|
||||
font-weight: 400;
|
||||
}
|
||||
.more-link {
|
||||
font-size: 14px;
|
||||
color: #409eff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.data-card {
|
||||
//background: #fff;
|
||||
//border-radius: 8px;
|
||||
//padding: 16px;
|
||||
//box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.data-item {
|
||||
margin-bottom: 24px;
|
||||
background: #f1f5fc;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
|
||||
.data-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.data-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.data-value.danger {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.data-desc {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ai-capability-row {
|
||||
height: calc(100% - 46px);
|
||||
.devui-col {
|
||||
height: 100%;
|
||||
}
|
||||
.capability-card {
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
text-align: center;
|
||||
|
||||
.capability-icon {
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.capability-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.capability-desc {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
625
src/views/Jyh/Insights/index.vue
Normal file
625
src/views/Jyh/Insights/index.vue
Normal file
@@ -0,0 +1,625 @@
|
||||
<template>
|
||||
<d-breadcrumb class="secret-breadcrumb">
|
||||
<gc-breadcrumb-item :to="{ name: 'home' }"><span class="title">首页</span></gc-breadcrumb-item>
|
||||
<gc-breadcrumb-item>
|
||||
<span class="cur-title">安全情报与动态</span>
|
||||
</gc-breadcrumb-item>
|
||||
</d-breadcrumb>
|
||||
|
||||
<div class="page-wrap">
|
||||
<!-- 情报分类标签页 -->
|
||||
<Card class="info-main-card">
|
||||
<div class="info-title">安全情报与动态</div>
|
||||
|
||||
<d-tabs v-model="activeTab" @change="handleTabChange" class="info-tabs">
|
||||
<!-- 漏洞预警 -->
|
||||
<d-tab id="vulnerability" title="漏洞预警">
|
||||
<div class="info-stats">
|
||||
<d-row :gutter="16">
|
||||
<d-col :span="6">
|
||||
<d-card class="stat-card">
|
||||
<div class="stat-title">高危漏洞</div>
|
||||
<div class="stat-value">{{ vulnerabilityStats.critical }}</div>
|
||||
<div class="stat-trend" :class="{ up: vulnerabilityTrends.critical > 0, down: vulnerabilityTrends.critical < 0 }">
|
||||
{{ vulnerabilityTrends.critical > 0 ? '+' : '' }}{{ vulnerabilityTrends.critical }}% 较上周
|
||||
</div>
|
||||
</d-card>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<d-card class="stat-card">
|
||||
<div class="stat-title">中危漏洞</div>
|
||||
<div class="stat-value">{{ vulnerabilityStats.high }}</div>
|
||||
<div class="stat-trend" :class="{ up: vulnerabilityTrends.high > 0, down: vulnerabilityTrends.high < 0 }">
|
||||
{{ vulnerabilityTrends.high > 0 ? '+' : '' }}{{ vulnerabilityTrends.high }}% 较上周
|
||||
</div>
|
||||
</d-card>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<d-card class="stat-card">
|
||||
<div class="stat-title">低危漏洞</div>
|
||||
<div class="stat-value">{{ vulnerabilityStats.medium }}</div>
|
||||
<div class="stat-trend" :class="{ up: vulnerabilityTrends.medium > 0, down: vulnerabilityTrends.medium < 0 }">
|
||||
{{ vulnerabilityTrends.medium > 0 ? '+' : '' }}{{ vulnerabilityTrends.medium }}% 较上周
|
||||
</div>
|
||||
</d-card>
|
||||
</d-col>
|
||||
<d-col :span="6">
|
||||
<d-card class="stat-card">
|
||||
<div class="stat-title">本月新增</div>
|
||||
<div class="stat-value">{{ vulnerabilityStats.total }}</div>
|
||||
<div class="stat-trend" :class="{ up: vulnerabilityTrends.total > 0, down: vulnerabilityTrends.total < 0 }">
|
||||
{{ vulnerabilityTrends.total > 0 ? '+' : '' }}{{ vulnerabilityTrends.total }}% 较上月
|
||||
</div>
|
||||
</d-card>
|
||||
</d-col>
|
||||
</d-row>
|
||||
</div>
|
||||
|
||||
<d-table
|
||||
:data="vulnerabilityList"
|
||||
class="jyh-table "
|
||||
table-layout="auto"
|
||||
:show-loading="loading"
|
||||
>
|
||||
<d-column type="index" width="50"></d-column>
|
||||
<d-column field="title" header="漏洞名称" :width="400">
|
||||
<template #default="scope">
|
||||
<a class="title-link" @click="showDetail(scope.row)">{{ scope.row.title }}</a>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="cveId" header="CVE编号"></d-column>
|
||||
<d-column field="severity" header="危险等级">
|
||||
<template #default="scope">
|
||||
<d-tag :type="getSeverityType(scope.row.severity)">{{ scope.row.severity }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="publishTime" header="发布时间">
|
||||
<template #default="scope">{{ formatTime(scope.row.publishTime) }}</template>
|
||||
</d-column>
|
||||
<d-column field="affectScope" header="影响范围" :width="200">
|
||||
<template #default="scope">{{ scope.row.affectScope }}</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</d-tab>
|
||||
|
||||
<!-- 政策解读 -->
|
||||
<d-tab id="policy" title="政策解读">
|
||||
<d-table
|
||||
:data="policyList"
|
||||
class="info-table"
|
||||
table-layout="auto"
|
||||
:show-loading="loading"
|
||||
>
|
||||
<d-column type="index" width="50"></d-column>
|
||||
<d-column field="title" header="政策标题" :width="400">
|
||||
<template #default="scope">
|
||||
<a class="title-link" @click="showDetail(scope.row)">{{ scope.row.title }}</a>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="department" header="发布部门"></d-column>
|
||||
<d-column field="level" header="政策级别">
|
||||
<template #default="scope">
|
||||
<d-tag :type="getPolicyLevelType(scope.row.level)">{{ scope.row.level }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="publishTime" header="发布时间">
|
||||
<template #default="scope">{{ formatTime(scope.row.publishTime) }}</template>
|
||||
</d-column>
|
||||
<d-column field="effectiveDate" header="生效日期">
|
||||
<template #default="scope">{{ formatTime(scope.row.effectiveDate) }}</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</d-tab>
|
||||
|
||||
<!-- 技术专栏 -->
|
||||
<d-tab id="technology" title="技术专栏">
|
||||
<d-table
|
||||
:data="technologyList"
|
||||
class="info-table"
|
||||
table-layout="auto"
|
||||
:show-loading="loading"
|
||||
>
|
||||
<d-column type="index" width="50"></d-column>
|
||||
<d-column field="title" header="文章标题" :width="400">
|
||||
<template #default="scope">
|
||||
<a class="title-link" @click="showDetail(scope.row)">{{ scope.row.title }}</a>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="author" header="作者/机构"></d-column>
|
||||
<d-column field="category" header="技术分类">
|
||||
<template #default="scope">
|
||||
<d-tag type="info">{{ scope.row.category }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="publishTime" header="发布时间">
|
||||
<template #default="scope">{{ formatTime(scope.row.publishTime) }}</template>
|
||||
</d-column>
|
||||
<d-column field="readCount" header="阅读量">
|
||||
<template #default="scope">{{ scope.row.readCount }}</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</d-tab>
|
||||
|
||||
<!-- 新闻发布 -->
|
||||
<d-tab id="news" title="新闻发布">
|
||||
<d-table
|
||||
:data="newsList"
|
||||
class="info-table"
|
||||
table-layout="auto"
|
||||
:show-loading="loading"
|
||||
>
|
||||
<d-column type="index" width="50"></d-column>
|
||||
<d-column field="title" header="新闻标题" :width="400">
|
||||
<template #default="scope">
|
||||
<a class="title-link" @click="showDetail(scope.row)">{{ scope.row.title }}</a>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="source" header="新闻来源"></d-column>
|
||||
<d-column field="category" header="新闻分类">
|
||||
<template #default="scope">
|
||||
<d-tag type="secondary">{{ scope.row.category }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
<d-column field="publishTime" header="发布时间">
|
||||
<template #default="scope">{{ formatTime(scope.row.publishTime) }}</template>
|
||||
</d-column>
|
||||
<d-column field="importance" header="重要程度">
|
||||
<template #default="scope">
|
||||
<d-tag :type="getImportanceType(scope.row.importance)">{{ scope.row.importance }}</d-tag>
|
||||
</template>
|
||||
</d-column>
|
||||
</d-table>
|
||||
</d-tab>
|
||||
</d-tabs>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container" v-if="currentList.length > 0">
|
||||
<d-pagination
|
||||
size="md"
|
||||
:page-size-options="[10, 20, 50]"
|
||||
:total="pager.total"
|
||||
v-model:pageSize="pager.pageSize"
|
||||
v-model:pageIndex="pager.pageIndex"
|
||||
:max-items="5"
|
||||
:can-change-page-size="true"
|
||||
:can-view-total="true"
|
||||
total-item-text="总计"
|
||||
@page-index-change="handlePageChange"
|
||||
@page-size-change="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<NoData v-if="!loading && currentList.length === 0" :small="false"></NoData>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- 详情抽屉 -->
|
||||
<d-drawer
|
||||
v-model="detailVisible"
|
||||
:width="800"
|
||||
:title="currentDetail?.title || '详情'"
|
||||
>
|
||||
<div class="detail-content">
|
||||
<div class="detail-meta">
|
||||
<div class="meta-item"><span class="meta-label">发布时间：</span>{{ formatTime(currentDetail?.publishTime) }}</div>
|
||||
<div class="meta-item" v-if="currentDetail?.source"><span class="meta-label">来源：</span>{{ currentDetail.source }}</div>
|
||||
<div class="meta-item" v-if="currentDetail?.severity || currentDetail?.level || currentDetail?.importance">
|
||||
<span class="meta-label">级别：</span>
|
||||
<d-tag
|
||||
:type="getDetailTagType()"
|
||||
>{{ currentDetail.severity || currentDetail.level || currentDetail.importance }}</d-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-body" v-html="currentDetail?.content || '暂无详情内容'"></div>
|
||||
</div>
|
||||
</d-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import NoData from '@/components/NoData/NoData.vue';
|
||||
import dayjs from 'dayjs';
|
||||
// 假设引入情报相关接口（实际项目中替换为真实接口）
|
||||
// import { getVulnerabilityList, getPolicyList, getTechnologyList, getNewsList } from '@/api/jyh/securityInfo';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
// 标签页状态
|
||||
const activeTab = ref('vulnerability');
|
||||
const loading = ref(false);
|
||||
|
||||
// 分页配置
|
||||
const pager = ref({
|
||||
total: 0,
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
});
|
||||
|
||||
// 漏洞预警数据
|
||||
const vulnerabilityStats = ref({
|
||||
critical: 28, // 高危
|
||||
high: 76, // 中危
|
||||
medium: 134, // 低危
|
||||
total: 238 // 本月新增
|
||||
});
|
||||
|
||||
// 漏洞趋势数据
|
||||
const vulnerabilityTrends = ref({
|
||||
critical: 12, // 较上周变化百分比
|
||||
high: 8,
|
||||
medium: -5,
|
||||
total: 15
|
||||
});
|
||||
|
||||
// 模拟漏洞列表数据
|
||||
const vulnerabilityList = ref([
|
||||
{
|
||||
id: 'vuln-1',
|
||||
title: 'Apache Log4j2 远程代码执行漏洞 (CVE-2021-44228)',
|
||||
cveId: 'CVE-2021-44228',
|
||||
severity: '高危',
|
||||
publishTime: '2024-06-15T09:30:00',
|
||||
affectScope: 'Apache Log4j 2.0-2.14.1',
|
||||
content: `<p>Apache Log4j2 存在远程代码执行漏洞，攻击者可通过构造特殊请求触发漏洞，执行任意代码。</p>
|
||||
<p><strong>影响范围：</strong>Apache Log4j 2.0 至 2.14.1 版本</p>
|
||||
<p><strong>修复建议：</strong>升级至 Log4j 2.15.0 及以上版本，或采取临时缓解措施。</p>`
|
||||
},
|
||||
{
|
||||
id: 'vuln-2',
|
||||
title: 'Chrome 浏览器类型混淆漏洞 (CVE-2024-2625)',
|
||||
cveId: 'CVE-2024-2625',
|
||||
severity: '中危',
|
||||
publishTime: '2024-06-12T14:20:00',
|
||||
affectScope: 'Chrome < 123.0.6312.105',
|
||||
content: `<p>Google Chrome 存在类型混淆漏洞，攻击者可通过精心构造的网页利用该漏洞执行任意代码。</p>
|
||||
<p><strong>影响范围：</strong>版本低于 123.0.6312.105 的 Chrome 浏览器</p>
|
||||
<p><strong>修复建议：</strong>及时更新 Chrome 浏览器至最新版本。</p>`
|
||||
},
|
||||
{
|
||||
id: 'vuln-3',
|
||||
title: 'Windows 内核权限提升漏洞 (CVE-2024-21303)',
|
||||
cveId: 'CVE-2024-21303',
|
||||
severity: '高危',
|
||||
publishTime: '2024-06-10T11:45:00',
|
||||
affectScope: 'Windows 10/11, Windows Server 2019/2022',
|
||||
content: `<p>Microsoft Windows 内核存在权限提升漏洞，本地攻击者可利用该漏洞提升至系统权限。</p>
|
||||
<p><strong>影响范围：</strong>Windows 10、Windows 11、Windows Server 2019/2022</p>
|
||||
<p><strong>修复建议：</strong>安装微软 2024 年 6 月安全更新补丁。</p>`
|
||||
}
|
||||
]);
|
||||
|
||||
// 模拟政策解读数据
|
||||
const policyList = ref([
|
||||
{
|
||||
id: 'policy-1',
|
||||
title: '《网络安全等级保护基本要求》(GB/T 22239-2025) 修订解读',
|
||||
department: '国家网络安全标准化技术委员会',
|
||||
level: '国家标准',
|
||||
publishTime: '2024-05-20T10:00:00',
|
||||
effectiveDate: '2024-12-01T00:00:00',
|
||||
content: `<p>本次修订进一步完善了网络安全等级保护的基本要求，新增了云计算、大数据、人工智能等新兴技术场景的安全控制点。</p>
|
||||
<p><strong>主要变化：</strong></p>
|
||||
<ul>
|
||||
<li>强化了数据安全保护要求，新增数据全生命周期安全控制</li>
|
||||
<li>增加了供应链安全管理相关条款</li>
|
||||
<li>完善了应急响应与灾备恢复要求</li>
|
||||
</ul>`
|
||||
},
|
||||
{
|
||||
id: 'policy-2',
|
||||
title: '《关键信息基础设施安全保护条例》实施指南',
|
||||
department: '工信部网络安全管理局',
|
||||
level: '部门规章',
|
||||
publishTime: '2024-04-15T09:30:00',
|
||||
effectiveDate: '2024-05-01T00:00:00',
|
||||
content: `<p>指南明确了关键信息基础设施的识别范围、安全责任与保护措施，为运营者提供了具体实施参考。</p>
|
||||
<p><strong>核心内容：</strong></p>
|
||||
<ul>
|
||||
<li>关键信息基础设施识别流程与标准</li>
|
||||
<li>安全防护体系建设要求</li>
|
||||
<li>安全评估与监测预警机制</li>
|
||||
</ul>`
|
||||
}
|
||||
]);
|
||||
|
||||
// 模拟技术专栏数据
|
||||
const technologyList = ref([
|
||||
{
|
||||
id: 'tech-1',
|
||||
title: '基于大语言模型的恶意代码检测技术研究',
|
||||
author: '安全研究院 张教授团队',
|
||||
category: '人工智能安全',
|
||||
publishTime: '2024-06-05T16:20:00',
|
||||
readCount: 2356,
|
||||
content: `<p>本文探讨了利用大语言模型（LLM）进行恶意代码检测的可行性，提出了基于Transformer架构的检测模型。</p>
|
||||
<p><strong>研究亮点：</strong></p>
|
||||
<ul>
|
||||
<li>将恶意代码转换为结构化文本序列，利用LLM进行特征学习</li>
|
||||
<li>在10万级样本集上测试准确率达98.7%</li>
|
||||
<li>对未知变种恶意代码的检测率提升32%</li>
|
||||
</ul>`
|
||||
},
|
||||
{
|
||||
id: 'tech-2',
|
||||
title: '零信任架构在企业网络中的实践路径',
|
||||
author: '某大型科技公司 网络安全部',
|
||||
category: '网络安全架构',
|
||||
publishTime: '2024-05-28T14:10:00',
|
||||
readCount: 1892,
|
||||
content: `<p>本文结合实际案例，阐述了零信任架构从规划到落地的全流程，包括身份认证、权限管理、持续验证等关键环节。</p>
|
||||
<p><strong>实践要点：</strong></p>
|
||||
<ul>
|
||||
<li>基于最小权限原则的动态访问控制</li>
|
||||
<li>多因素认证与持续信任评估</li>
|
||||
<li>零信任与现有安全体系的融合策略</li>
|
||||
</ul>`
|
||||
}
|
||||
]);
|
||||
|
||||
// 模拟新闻发布数据
|
||||
const newsList = ref([
|
||||
{
|
||||
id: 'news-1',
|
||||
title: '2024年国家网络安全宣传周将于9月在郑州举办',
|
||||
source: '央视新闻',
|
||||
category: '行业动态',
|
||||
publishTime: '2024-06-18T08:30:00',
|
||||
importance: '重要',
|
||||
content: `<p>2024年国家网络安全宣传周将于9月16日至22日在河南省郑州市举办，主题为"网络安全为人民，网络安全靠人民"。</p>
|
||||
<p>活动将包括开幕式、网络安全博览会、网络安全技术高峰论坛以及系列主题日活动，聚焦人工智能、数据安全、关键信息基础设施保护等热点领域。</p>`
|
||||
},
|
||||
{
|
||||
id: 'news-2',
|
||||
title: '全球网络攻击事件同比下降12%，勒索软件攻击减少明显',
|
||||
source: '安全产业报',
|
||||
category: '全球态势',
|
||||
publishTime: '2024-06-15T11:20:00',
|
||||
importance: '一般',
|
||||
content: `<p>根据最新全球安全报告，2024年第一季度全球网络攻击事件同比下降12%，其中勒索软件攻击减少23%，归因于企业安全防护意识提升和防护措施加强。</p>
|
||||
<p>报告同时指出，针对工业控制系统和医疗行业的定向攻击有所增加，需引起相关行业重视。</p>`
|
||||
}
|
||||
]);
|
||||
|
||||
// 详情抽屉状态
|
||||
const detailVisible = ref(false);
|
||||
const currentDetail = ref(null);
|
||||
|
||||
// 当前列表（根据标签页动态切换）
|
||||
const currentList = computed(() => {
|
||||
switch (activeTab.value) {
|
||||
case 'vulnerability': return vulnerabilityList.value;
|
||||
case 'policy': return policyList.value;
|
||||
case 'technology': return technologyList.value;
|
||||
case 'news': return newsList.value;
|
||||
default: return [];
|
||||
}
|
||||
});
|
||||
|
||||
// 标签页切换
|
||||
const handleTabChange = (key) => {
|
||||
activeTab.value = key;
|
||||
pager.value.pageIndex = 1; // 切换标签重置页码
|
||||
fetchCurrentList(); // 重新获取数据
|
||||
};
|
||||
|
||||
// 分页切换
|
||||
const handlePageChange = (pageIndex) => {
|
||||
pager.value.pageIndex = pageIndex;
|
||||
fetchCurrentList();
|
||||
};
|
||||
|
||||
const handlePageSizeChange = (pageSize) => {
|
||||
pager.value.pageSize = pageSize;
|
||||
pager.value.pageIndex = 1;
|
||||
fetchCurrentList();
|
||||
};
|
||||
|
||||
// 获取当前标签页数据（实际项目中替换为接口调用）
|
||||
const fetchCurrentList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
// 模拟接口请求延迟
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
|
||||
// 实际项目中根据activeTab调用对应接口
|
||||
// 示例：
|
||||
// if (activeTab.value === 'vulnerability') {
|
||||
// const res = await getVulnerabilityList({ page: pager.value.pageIndex, size: pager.value.pageSize });
|
||||
// vulnerabilityList.value = res.data.records;
|
||||
// pager.value.total = res.data.total;
|
||||
// }
|
||||
|
||||
// 模拟总数
|
||||
pager.value.total = currentList.value.length;
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const showDetail = (item) => {
|
||||
currentDetail.value = item;
|
||||
detailVisible.value = true;
|
||||
};
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (time) => {
|
||||
return time ? dayjs(time).format('YYYY-MM-DD HH:mm:ss') : '--';
|
||||
};
|
||||
|
||||
// 漏洞危险等级标签类型
|
||||
const getSeverityType = (severity) => {
|
||||
const typeMap = {
|
||||
'高危': 'danger',
|
||||
'中危': 'warning',
|
||||
'低危': 'info'
|
||||
};
|
||||
return typeMap[severity] || 'default';
|
||||
};
|
||||
|
||||
// 政策级别标签类型
|
||||
const getPolicyLevelType = (level) => {
|
||||
const typeMap = {
|
||||
'国家标准': 'primary',
|
||||
'部门规章': 'info',
|
||||
'地方规定': 'secondary'
|
||||
};
|
||||
return typeMap[level] || 'default';
|
||||
};
|
||||
|
||||
// 新闻重要程度标签类型
|
||||
const getImportanceType = (importance) => {
|
||||
const typeMap = {
|
||||
'重要': 'warning',
|
||||
'一般': 'info'
|
||||
};
|
||||
return typeMap[importance] || 'default';
|
||||
};
|
||||
|
||||
// 详情页标签类型
|
||||
const getDetailTagType = () => {
|
||||
if (currentDetail.value?.severity) {
|
||||
return getSeverityType(currentDetail.value.severity);
|
||||
}
|
||||
if (currentDetail.value?.level) {
|
||||
return getPolicyLevelType(currentDetail.value.level);
|
||||
}
|
||||
if (currentDetail.value?.importance) {
|
||||
return getImportanceType(currentDetail.value.importance);
|
||||
}
|
||||
return 'default';
|
||||
};
|
||||
|
||||
// 页面加载时获取数据
|
||||
onMounted(() => {
|
||||
fetchCurrentList();
|
||||
});
|
||||
|
||||
// 监听分页和标签变化
|
||||
watch([() => pager.value.pageIndex, () => pager.value.pageSize], () => {
|
||||
fetchCurrentList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-wrap {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.info-main-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #191919;
|
||||
}
|
||||
|
||||
.info-tabs {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// 统计卡片样式
|
||||
.info-stats {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
background-color: #f9fafb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #191919;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.stat-trend {
|
||||
font-size: 14px;
|
||||
&.up {
|
||||
color: #f53f3f; // 上升趋势红色
|
||||
}
|
||||
&.down {
|
||||
color: #00b42a; // 下降趋势绿色
|
||||
}
|
||||
}
|
||||
|
||||
// 表格样式
|
||||
.info-table {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.title-link {
|
||||
font-size: 16px;
|
||||
color: #1890ff;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// 分页样式
|
||||
.pagination-container {
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
// 详情抽屉样式
|
||||
.detail-content {
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.detail-meta {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
ul {
|
||||
margin-left: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
strong {
|
||||
color: #191919;
|
||||
}
|
||||
}
|
||||
|
||||
// 复用安全检测中心的面包屑样式
|
||||
.secret-breadcrumb {
|
||||
padding: 7px 20px 12px;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user