From 0d266e8a038c82b1ff8d4446c557db01d591e5ab Mon Sep 17 00:00:00 2001
From: fmk1023 <fmk1023@noreply.gitcode.com>
Date: Wed, 19 Nov 2025 17:39:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E4=BF=A1=E4=BB=A3=E7=A0=81=E5=BA=93V2?=
 =?UTF-8?q?=E7=89=88-=E9=A6=96=E9=A1=B5=E5=B1=95=E7=A4=BA=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8E=9F=E5=9E=8B=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Jyh/Home/index.vue | 288 ++++++++++++++++++++++-------------
 1 file changed, 179 insertions(+), 109 deletions(-)

diff --git a/src/views/Jyh/Home/index.vue b/src/views/Jyh/Home/index.vue
index 87f9a81..5cc82c1 100644
--- a/src/views/Jyh/Home/index.vue
+++ b/src/views/Jyh/Home/index.vue
@@ -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>
@@ -58,15 +58,17 @@
             </AdvanceSearch>
           </div>
         </d-dropdown-menu>
-        <d-button icon="search"  shape="circle" @click="search"></d-button>
+        <d-button icon="search" shape="circle" @click="search"></d-button>
       </div>
       <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 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">
@@ -133,10 +136,11 @@
         <!-- 团队与成果 + 最新动态 -->
         <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 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>
@@ -156,72 +160,83 @@
             </div>
           </d-col>
           <d-col style="height: 100%" :span="16">
-            <div  style="height: 100%" class="bg-white rounded-xl shadow-md p-4">
+            <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">
-                    <p class="font-medium">{{ news.title }}</p>
-                    <p class="text-xs text-gray-500">{{ news.desc }}</p>
-                  </div>
-                </div>
+
+              <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>
+                  </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>