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

可信代码库V2版-首页展示页面原型开发

Browse Source
This commit is contained in:
fmk1023
2025-11-19 17:39:35 +08:00
parent f1f05c11f6
commit 0d266e8a03
1 changed files with 179 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
src/views/Jyh/Home/index.vue
View File

@@ -2,7 +2,7 @@
<div class="home-container">
<div class="home-content">
<div class="home-title">
<img src="@/assets/imgs/logo.png" alt="logo" />
<img src="@/assets/imgs/logo.png" alt="logo"/>
<h1>可信开源代码库</h1>
</div>
<div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
@@ -44,7 +44,7 @@
<template #append>
<div id="advancedSearch close-isopen" class="advanced-search" @click="openAdvancedSearch">
<span class="close-isopen">高级筛选</span>
<!-- <d-badge :count="6" :bg-color="'#f0f0f0'" class="close-isopen"></d-badge>-->
<!-- <d-badge :count="6" :bg-color="'#f0f0f0'" class="close-isopen"></d-badge>-->
<d-icon class="close-isopen" :rotate="rotate" name="icon-chevron-down-2"></d-icon>
</div>
</template>
@@ -64,9 +64,11 @@
<!-- 顶部功能按钮 -->
<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 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>
<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>
@@ -111,7 +113,8 @@
<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>
<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">
@@ -136,7 +139,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>
<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>
@@ -159,69 +163,80 @@
<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>
<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">
<div style="overflow: auto; height: calc(100% - 46px);">
<d-timeline direction="vertical" center>
<d-timeline-item
v-for="(news, index) in latestNews"
:key="index"
:time="news.year"
dot-color="#ff6384"
line-color="#e5e7eb"
class="timeline-item"
>
<!-- 时间线内容区域，保留原有样式结构 -->
<div class="timeline-content">
<p class="font-medium">{{ news.title }}</p>
<p class="text-xs text-gray-500">{{ news.desc }}</p>
</div>
</div>
</d-timeline-item>
</d-timeline>
</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>-->
<!-- <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>-->
<!-- &lt;!&ndash; <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> &ndash;&gt;-->
<!-- </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(&#45;&#45;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>-->
<!-- &lt;!&ndash; <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> &ndash;&gt;-->
<!-- </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(&#45;&#45;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>
@@ -231,21 +246,22 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useAccount } from '@/utils/hooks/useAccount';
import {ref, onMounted, onBeforeUnmount, computed} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {useAccount} from '@/utils/hooks/useAccount';
import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
import { getHomeNoticeList } from '@/api/jyh';
import {getHomeNoticeList} from '@/api/jyh';
import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
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';
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' },
tooltip: {show: true, trigger: 'axis'},
grid: {
left: '0%',
right: '3%',
@@ -255,23 +271,23 @@ const lineOption = reactive({
xAxis: {
type: 'category',
data: ['0', '30', '60', '90', '120', '150', '180', '210', '240'],
axisLine: { lineStyle: { color: '#909399' } },
axisTick: { show: false },
axisLine: {lineStyle: {color: '#909399'}},
axisTick: {show: false},
},
yAxis: {
type: 'value',
max: 550,
axisLine: { show: false },
axisTick: { show: false },
splitLine: { lineStyle: { color: '#eee' } },
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' },
itemStyle: {color: '#ff9f40'},
lineStyle: {color: '#ff9f40'},
symbol: 'circle',
symbolSize: 6,
},
@@ -279,8 +295,8 @@ const lineOption = reactive({
name: '实时威胁B',
data: [0, 100, 200, 150, 300, 350, 400, 450, 500],
type: 'line',
itemStyle: { color: '#36a2eb' },
lineStyle: { color: '#36a2eb' },
itemStyle: {color: '#36a2eb'},
lineStyle: {color: '#36a2eb'},
symbol: 'circle',
symbolSize: 6,
},
@@ -288,23 +304,23 @@ const lineOption = reactive({
});
const pieOption = reactive({
tooltip: { show: true, trigger: 'item' },
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' } },
{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 },
labelLine: {show: true},
},
],
});
@@ -317,7 +333,7 @@ const position = ref(['right-start', 'right-end']);
const industryOptions = ref(['通信', '军工', '金融', '能源']);
const searchType = ref('软件');
const searchOptions = ref(['软件']);
const offset = ref({ mainAxis: 7, crossAxis: -10 });
const offset = ref({mainAxis: 7, crossAxis: -10});
const isKeepOpen = ref(true);
const isOpen = ref(false);
const cateRotate = ref(0);
@@ -325,7 +341,7 @@ const infoList = ref([]);
const warningModalVisable = ref(false);
const currentWarning = ref();
const { isLogin } = useDiscussGetUserInfo();
const {isLogin} = useDiscussGetUserInfo();
const homeSearch = ref(null);
const dropdownWidth = ref(0);
@@ -336,11 +352,11 @@ 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 },
{name: '安全智库', icon: aqzk},
{name: '安全检测', icon: aqjc},
{name: '安全情报', icon: aqqb},
{name: '安全态势', icon: aqts},
{name: '智能引擎', icon: kxrj},
]);
// 按钮点击事件处理
@@ -363,7 +379,7 @@ const handleButtonClick = (item) => {
window.open(target, '_blank');
} else {
// 其他按钮：路由跳转
router.push({ name: target });
router.push({name: target});
}
};
@@ -394,16 +410,16 @@ const aiCapabilities = ref([
// 团队成员数据
const teamMembers = ref([
{ name: '主理', title: '安全专家/负责人' },
{ name: '顾问', title: '企业安全专家' },
{ name: '架构', title: '技术架构专家' },
{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 },
{year: '2024', title: '中国头安全实验室等合作的智能决策模型授奖', desc: '智能决策模型在多领域安全决策中表现卓越，获行业权威奖项。', more: true},
{year: '2023', title: '智能检测引擎从一定论到再超越的与证明', desc: '2024年深度优化检测，在极端场景中达99.9%准确率，性能、智能、召回率再升级。', more: false},
{year: '2023', title: '新闻网常务委员：邻区区委交换稿与证明', desc: '网络空间安全会议上，邻区、外防负责人、专家会首席等共论，包含新成果实证。', more: false},
]);
const tagMap = {
@@ -454,7 +470,7 @@ const openAdvancedSearch = () => {
const check = () => {
router.push({
name: 'Search',
query: { tab: 'BatchVerify' } // 通过查询参数指定 Tab
query: {tab: 'BatchVerify'} // 通过查询参数指定 Tab
});
};
@@ -515,7 +531,7 @@ const search = () => {
const onCategoryChange = (event) => {
searchType.value = event?.name || '软件';
globalInfo.updateHeaderSearch({ softwareName: softwareName.value, searchType: event.value });
globalInfo.updateHeaderSearch({softwareName: softwareName.value, searchType: event.value});
};
const onCateToggle = (event) => {
@@ -523,7 +539,7 @@ const onCateToggle = (event) => {
};
const checkMore = () => {
router.push({ name: 'PersonalCenter' });
router.push({name: 'PersonalCenter'});
};
const openWarningDetail = (event, index) => {
@@ -605,6 +621,7 @@ getNoticeList();
justify-content: center;
align-items: center;
gap: 20px;
h1 {
font-size: xx-large;
font-weight: bold;
@@ -693,12 +710,15 @@ getNoticeList();
img {
width: 20px;
}
display: flex;
justify-content: space-between;
.sub-title {
display: flex;
gap: 8px;
}
margin-bottom: 20px;
margin-left: 10px;
}
@@ -741,6 +761,7 @@ getNoticeList();
width: 100%;
padding: 4px;
cursor: pointer;
&:hover {
background-color: var(--devui-list-item-hover-bg, #f2f5fc);
color: var(--devui-list-item-hover-text, #526ecc);
@@ -799,15 +820,19 @@ getNoticeList();
.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;
}
@@ -816,18 +841,23 @@ getNoticeList();
.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;
@@ -839,6 +869,7 @@ getNoticeList();
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.section-title {
font-size: 18px;
font-weight: 600;
@@ -847,9 +878,11 @@ getNoticeList();
display: flex;
justify-content: space-between;
align-items: center;
a {
font-weight: 400;
}
.more-link {
font-size: 14px;
color: #409eff;
@@ -902,20 +935,23 @@ getNoticeList();
.ai-capability-row {
height: calc(100% - 46px);
.devui-col {
height: 100%;
}
.capability-card {
height: 100%;
background: #fff;
background: #f3f7f8;
border-radius: 8px;
padding: 12px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
border: 1px solid #323a4e;
text-align: center;
.capability-icon {
text-align: center;
margin-bottom: 12px;
img {
display: inline-block;
width: 32px;
@@ -943,4 +979,38 @@ getNoticeList();
justify-content: center;
align-items: center;
}
/* 时间线样式调整，保持与原有布局一致 */
:deep(.devui-timeline) {
--devui-timeline-item-padding: 0 0 24px 0; /* 调整项间距 */
}
:deep(.devui-timeline-item-time) {
/* 年份标签样式，与原有红色标签保持一致 */
background-color: #fee2e2; /* 浅红背景 */
color: #dc2626; /* 红色文字 */
font-size: 12px;
padding: 2px 6px;
border-radius: 4px;
min-width: 40px;
text-align: center;
}
:deep(.devui-timeline-item-data-left) {
flex: none;
}
.timeline-content {
margin-top: 4px; /* 与时间标签保持距离 */
}
.font-medium {
font-weight: 500;
margin-bottom: 4px; /* 标题与描述间距 */
}
.text-xs {
font-size: 12px;
line-height: 1.5; /* 描述文字行高 */
}
</style>