From ae00eb3d6f71d8679763387d159fcefa50a2d903 Mon Sep 17 00:00:00 2001
From: fmk1023 <fmk1023@noreply.gitcode.com>
Date: Fri, 28 Nov 2025 14:32:07 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Jyh/Home/index.vue | 698 +++++++++++++++++------------------
 1 file changed, 333 insertions(+), 365 deletions(-)

diff --git a/src/views/Jyh/Home/index.vue b/src/views/Jyh/Home/index.vue
index 52f91bf..b821bcd 100644
--- a/src/views/Jyh/Home/index.vue
+++ b/src/views/Jyh/Home/index.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="home-container">
     <div class="home-content">
-      <div class="home-title">
+      <div class="home-title animate-fade-in-up">
         <img src="@/assets/imgs/logo.png" alt="logo"/>
         <h1>可信开源代码库</h1>
       </div>
-      <div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
+      <div class="home-search animate-fade-in-up delay-100" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
         <d-input
           ref="searchInput"
           placeholder="请输入搜索关键字"
@@ -17,9 +17,9 @@
         >
           <template #prepend>
             <d-dropdown @toggle="onCateToggle($event)">
-              <div class="flex items-center gap-1 cursor-pointer">
+              <div class="flex items-center gap-1 cursor-pointer dropdown-trigger">
                 {{ searchType }}
-                <d-icon :rotate="cateRotate" name="icon-chevron-down-2"></d-icon>
+                <d-icon :rotate="cateRotate" name="icon-chevron-down-2" class="transition-transform"></d-icon>
               </div>
               <template #menu>
                 <ul class="list-menu">
@@ -44,8 +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-icon class="close-isopen" :rotate="rotate" name="icon-chevron-down-2"></d-icon>
+              <d-icon class="close-isopen transition-transform" :rotate="rotate" name="icon-chevron-down-2"></d-icon>
             </div>
           </template>
         </d-input>
@@ -60,15 +59,21 @@
         </d-dropdown-menu>
         <d-button icon="search" shape="circle" @click="search"></d-button>
       </div>
-      <div style="width: 70%" class="from-blue-50 to-white">
-        <!-- 顶部功能按钮 -->
+      <div style="width: 70%" class="from-blue-50 to-white animate-fade-in-up delay-200">
         <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="cursor: pointer"
+            v-for="(item, index) in topButtons"
+            :key="item.name"
+            @click="handleButtonClick(item)"
+            class="hover-lift"
+            :style="{ animationDelay: `${index * 100}ms` }"
+          >
             <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>
+                     class="text-blue-600 text-xl func-icon transition-transform"></img>
               </div>
               <div class="text-sm font-medium">{{ item.name }}</div>
             </div>
@@ -77,9 +82,8 @@
 
         <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="bg-white rounded-xl shadow-md p-4 hover-shadow">
                 <div class="section-title">全球威胁态势实时监控
                   <a href="#" class="text-blue-600 text-sm">更多 ></a></div>
                 <d-row :gutter="24" class="threat-row">
@@ -91,17 +95,13 @@
                   </d-col>
                   <d-col :span="6">
                     <div class="data-card">
-                      <div class="data-item">
+                      <div class="data-item hover-scale">
                         <span class="data-label">今日检测量</span>
-                        <span class="data-value">128万次</span>
-                        <!--                      <span class="data-value">128万次</span>-->
-                        <!--                      <span class="data-desc">说明0</span>-->
+                        <span class="data-value count-up">128万次</span>
                       </div>
-                      <div class="data-item">
+                      <div class="data-item hover-scale">
                         <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>-->
+                        <span class="data-value danger count-up">327起</span>
                       </div>
                     </div>
                   </d-col>
@@ -109,18 +109,17 @@
               </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 style="height: 100%" class="bg-white rounded-xl shadow-md p-4 hover-shadow">
                 <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-card hover-lift" :style="{ animationDelay: `${index * 150}ms` }">
                       <div class="capability-icon">
-                        <img :src="item.icon" class="text-blue-600 text-2xl"></img>
+                        <img :src="item.icon" class="text-blue-600 text-2xl transition-transform"></img>
                       </div>
                       <h2 class="capability-title">{{ item.title }}</h2>
                       <h4>{{ item.rate }}</h4>
@@ -133,10 +132,9 @@
           </d-row>
         </div>
 
-        <!-- 团队与成果 + 最新动态 -->
-        <d-row style="height: 237px" :gutter="16">
+        <d-row style="height: 237px" :gutter="16" class="mb-8">
           <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 hover-shadow">
               <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">更多 >
@@ -145,22 +143,22 @@
               <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">
+                  <div class="flex flex-col items-center member-item hover-bob" v-for="(member, index) in teamMembers" :key="member.name" :style="{ animationDelay: `${index * 100}ms` }">
+                    <img src="https://picsum.photos/id/1001/60/60" alt="团队成员" class="w-14 h-14 rounded-full mb-1 member-avatar transition-transform">
                     <span class="text-sm font-medium">{{ member.name }}</span>
                     <span class="text-xs text-gray-500">{{ member.title }}</span>
                   </div>
                 </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>
+                  <button class="bg-blue-600 text-white text-xs px-3 py-1 rounded hover-scale">国家级安全认证团队</button>
+                  <button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded hover-scale">200+专利技术</button>
+                  <button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded hover-scale">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 style="height: 100%" class="bg-white rounded-xl shadow-md p-4 hover-shadow">
               <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">更多 >
@@ -175,11 +173,11 @@
                     :time="news.year"
                     dot-color="#ff6384"
                     line-color="#e5e7eb"
-                    class="timeline-item"
+                    class="timeline-item animate-fade-in-left"
+                    :style="{ animationDelay: `${index * 150}ms` }"
                   >
-                    <!-- 时间线内容区域，保留原有样式结构 -->
-                    <div class="timeline-content">
-                      <p class="font-medium">{{ news.title }}</p>
+                    <div class="timeline-content hover-translate-x">
+                      <p class="font-medium transition-color">{{ news.title }}</p>
                       <p class="text-xs text-gray-500">{{ news.desc }}</p>
                     </div>
                   </d-timeline-item>
@@ -189,54 +187,6 @@
           </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>-->
-
-      <!--          &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>
 
@@ -246,6 +196,7 @@
 </template>
 
 <script setup lang="ts">
+// 保持原有的逻辑和数据定义
 import {ref, onMounted, onBeforeUnmount, computed} from 'vue';
 import {useRoute, useRouter} from 'vue-router';
 import {useAccount} from '@/utils/hooks/useAccount';
@@ -253,13 +204,11 @@ import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
 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';
 
+// --- Echarts Options (保持不变) ---
 const lineOption = reactive({
   tooltip: {show: true, trigger: 'axis'},
   grid: {
@@ -305,6 +254,15 @@ const lineOption = reactive({
 
 const pieOption = reactive({
   tooltip: {show: true, trigger: 'item'},
+  legend: {
+    icon: "rect",
+    itemHeight: 13,
+    itemWidth: 13,
+    itemGap: 10,
+    top: '0%',
+    left: '0%',
+    right: '0%',
+  },
   series: [
     {
       title: '态势感知',
@@ -325,22 +283,18 @@ const pieOption = reactive({
   ],
 });
 
+// --- Data & State (保持不变) ---
 const route = useRoute();
 const router = useRouter();
 const inputGlow = ref(false);
 const searchStr = ref('');
 const position = ref(['right-start', 'right-end']);
-const industryOptions = ref(['通信', '军工', '金融', '能源']);
 const searchType = ref('软件');
-const searchOptions = ref(['软件']);
 const offset = ref({mainAxis: 7, crossAxis: -10});
-const isKeepOpen = ref(true);
 const isOpen = ref(false);
 const cateRotate = ref(0);
-const infoList = ref([]);
 const warningModalVisable = ref(false);
 const currentWarning = ref();
-
 const {isLogin} = useDiscussGetUserInfo();
 const homeSearch = ref(null);
 const dropdownWidth = ref(0);
@@ -350,7 +304,7 @@ 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},
@@ -359,26 +313,22 @@ const topButtons = ref([
   {name: '智能引擎', icon: kxrj},
 ]);
 
-// 按钮点击事件处理
+// 按钮点击事件处理 (保持不变)
 const handleButtonClick = (item) => {
-  // 路由映射关系：按钮名称 -> 对应路由name或新页面地址
   const routeMap = {
-    '安全智库': 'Search', // 对应name: 'Search'的路由
-    '安全检测': 'TestingCenter', // 对应name: 'TestingCenter'的路由
-    '安全情报': 'Insights', // 对应name: 'Insights'的路由
-    '智能引擎': 'aihome', // 对应name: 'aihome'的路由
-    '安全态势': 'http://222.20.126.217:10010/bigScreen/#/kxky' // 安全态势大屏地址（替换为实际地址）
+    '安全智库': 'Search',
+    '安全检测': 'TestingCenter',
+    '安全情报': 'Insights',
+    '智能引擎': '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});
   }
 };
@@ -386,7 +336,7 @@ const handleButtonClick = (item) => {
 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+安全核心能力数据
+// AI+安全核心能力数据 (保持不变)
 const aiCapabilities = ref([
   {
     title: '智能检测引擎',
@@ -408,72 +358,31 @@ const aiCapabilities = ref([
   },
 ]);
 
-// 团队成员数据
+// 团队成员数据 (保持不变)
 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: '致命',
-    color: '#c7000b'
-  },
-  high: {
-    text: '高',
-    color: '#f66f6a'
-  },
-  medium: {
-    text: '中',
-    color: '#fac20a'
-  },
-  low: {
-    text: '低',
-    color: '#5e7ce0'
-  },
-  Critical: {
-    text: '致命',
-    color: '#c7000b'
-  },
-  High: {
-    text: '高',
-    color: '#f66f6a'
-  },
-  Medium: {
-    text: '中',
-    color: '#fac20a'
-  },
-  Low: {
-    text: '低',
-    color: '#5e7ce0'
-  }
-};
-
 const rotate = computed(() => {
   return isOpen.value ? 180 : 0;
 });
 
+// --- Methods (保持不变) ---
 const searchInput = ref(null);
 const openAdvancedSearch = () => {
   isOpen.value = !isOpen.value;
   inputGlow.value = isOpen.value;
 };
 
-const check = () => {
-  router.push({
-    name: 'Search',
-    query: {tab: 'BatchVerify'} // 通过查询参数指定 Tab
-  });
-};
-
 const closeOutside = () => {
   return false;
 };
@@ -514,11 +423,10 @@ const globalInfo = useGlobalInfoStore();
 const industryList = globalInfo.industryList;
 const getIndustryValue = (name) => {
   const industry = industryList.find((item) => item.name === name);
-  return industry ? industry.value : ''; // 如果找不到，返回默认值
+  return industry ? industry.value : '';
 };
 
 const search = () => {
-  // updateHeaderSearch({ searchWord: searchStr.value, searchType: selectedCate.value });
   router.push({
     name: 'Search',
     query: {
@@ -526,35 +434,17 @@ const search = () => {
       searchType: getIndustryValue(searchType.value)
     }
   });
-  // window.open(`${import.meta.env.VITE_BASE_URL}repoList?softwareName=${searchStr.value ? searchStr.value : ''}&searchType=${getIndustryValue(searchType.value)}`, '_blank')
 };
 
 const onCategoryChange = (event) => {
   searchType.value = event?.name || '软件';
-  globalInfo.updateHeaderSearch({softwareName: softwareName.value, searchType: event.value});
+  globalInfo.updateHeaderSearch({softwareName: searchStr.value, searchType: event.value});
 };
 
 const onCateToggle = (event) => {
   cateRotate.value = event ? 180 : 0;
 };
 
-const checkMore = () => {
-  router.push({name: 'PersonalCenter'});
-};
-
-const openWarningDetail = (event, index) => {
-  infoList.value.forEach((item, i) => {
-    if (i <= index) {
-      item.dotColor = 'var(--devui-info)';
-    } else {
-      item.dotColor = '';
-    }
-  });
-
-  warningModalVisable.value = true;
-  currentWarning.value = event;
-};
-
 let resizeObserver: ResizeObserver | null = null;
 
 onMounted(() => {
@@ -567,10 +457,13 @@ onMounted(() => {
 
   document.querySelector('body').onclick = (e) => {
     const className = e.target.className;
+    // 优化点击外部关闭逻辑，兼容SVG图标
     if (
-      !className.includes('close-isopen') &&
-      !className.includes('devui-badge__content') &&
-      !className.includes('advanced-search')
+      !className.includes ||
+      (!className.includes('close-isopen') &&
+        !className.includes('devui-badge__content') &&
+        !className.includes('advanced-search') &&
+        e.target.tagName !== 'svg' && e.target.tagName !== 'path')
     ) {
       isOpen.value = false;
     }
@@ -582,20 +475,116 @@ onBeforeUnmount(() => {
     resizeObserver.unobserve(homeSearch.value);
   }
 });
-
-const getNoticeList = async () => {
-  const res: any = await getHomeNoticeList();
-  if (!res.error) {
-    infoList.value = res.data.data || [];
-  }
-};
-
-getNoticeList();
 </script>
 
 <style scoped lang="scss">
 @import 'devui-theme/styles-var/devui-var.scss';
 
+// ----------------------------------------------------
+// 通用样式与动画
+// ----------------------------------------------------
+$shadow-base: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+$shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
+$primary-color: #5e7ce0;
+
+.transition-transform {
+  transition: transform 0.3s ease;
+}
+
+.transition-color {
+  transition: color 0.3s ease;
+}
+
+.hover-lift {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  &:hover {
+    transform: translateY(-6px);
+    //box-shadow: $shadow-hover !important;
+  }
+}
+
+.hover-scale {
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  &:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15) !important;
+  }
+}
+
+
+.hover-shadow {
+  transition: box-shadow 0.3s ease;
+  &:hover {
+    box-shadow: $shadow-hover !important;
+  }
+}
+
+.hover-bob {
+  transition: transform 0.3s ease;
+  &:hover {
+    transform: translateY(-4px);
+  }
+}
+
+.hover-translate-x {
+  transition: transform 0.3s ease;
+  &:hover {
+    transform: translateX(6px);
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 20px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translate3d(-20px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.animate-fade-in-left {
+  animation: fadeInLeft 0.6s ease-out forwards;
+  opacity: 0; // 初始不可见
+}
+
+@keyframes countUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.count-up {
+  display: inline-block;
+  animation: countUp 0.8s ease-out forwards;
+}
+
+.delay-100 { animation-delay: 100ms; }
+.delay-200 { animation-delay: 200ms; }
+.delay-300 { animation-delay: 300ms; }
+
+
+// ----------------------------------------------------
+// 基础样式 (保持不变)
+// ----------------------------------------------------
 .home-container {
   width: 100%;
   height: 100%;
@@ -629,7 +618,6 @@ getNoticeList();
 
       img {
         width: 50px;
-        //filter: brightness(0);
       }
     }
 
@@ -639,17 +627,18 @@ getNoticeList();
       border: 1px solid #dfe1e5;
       box-shadow: 0px 2px 8px 0px rgba(60, 64, 67, 0.25);
       border-radius: 24px;
-
-      //width: 100%;
-      //height: 40px;
       flex-shrink: 0;
       background-color: white;
-      //border-radius: 10px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 12px;
-      //box-shadow: var(--devui-shadow, 0 2px 12px 0);
+      transition: all 0.3s ease; // 添加过渡
+
+      &:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
       input {
         border: none;
         outline: none;
@@ -657,12 +646,24 @@ getNoticeList();
         font-size: 14px;
       }
 
+      .dropdown-trigger {
+        transition: color 0.3s ease;
+        &:hover {
+          color: $primary-color;
+        }
+      }
+
       .advanced-search {
         cursor: pointer;
         display: flex;
         justify-content: center;
         align-items: center;
         gap: 8px;
+        transition: color 0.3s ease; // 添加过渡
+
+        &:hover {
+          color: $primary-color;
+        }
 
         &::before {
           content: '';
@@ -681,59 +682,154 @@ getNoticeList();
         padding: 12px;
         background-color: white;
       }
-
-      .form-operation {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 8px;
-      }
-    }
-
-    .batch-btn {
-      color: $devui-aide-text;
-      width: 150px;
-      flex-shrink: 0;
-      background-color: #f0f0f0;
-      border-color: $devui-aide-text;
-    }
-
-    .home-information {
-      width: 100%;
-      background-color: #f0f0f0;
-      //overflow: auto;
-      margin-bottom: 20px;
-      border-radius: 10px;
-      padding: 12px;
-
-      .info-title {
-        img {
-          width: 20px;
-        }
-
-        display: flex;
-        justify-content: space-between;
-
-        .sub-title {
-          display: flex;
-          gap: 8px;
-        }
-
-        margin-bottom: 20px;
-        margin-left: 10px;
-      }
-
-      :deep(.devui-timeline-item-data-left) {
-        display: none;
-      }
-
-      :deep(.devui-timeline-item-dot) {
-        scale: 0.7;
-      }
     }
   }
 }
 
+.glow-border {
+  border: 1px solid var(--devui-form-control-line, #d7d8da);
+  border-color: var(--devui-form-control-line-active, #5e7ce0) !important;
+  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.15)); // 调整光晕颜色透明度
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+// 卡片通用样式
+.bg-white {
+  border-radius: 8px;
+  box-shadow: $shadow-base;
+  transition: box-shadow 0.3s ease; // 添加过渡
+}
+
+// 顶部功能按钮
+.top-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .func-icon {
+    transition: transform 0.3s ease;
+  }
+
+  &:hover .func-icon {
+    transform: scale(1.1);
+  }
+}
+
+
+// 威胁监控卡片
+.data-card {
+  .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;
+    }
+  }
+}
+$primary-light: #e8f0fe;
+// AI能力卡片
+.ai-capability-row {
+  .capability-card {
+    height: 100%;
+    background: white;
+    border-radius: 10px;
+    padding: 18px 12px;
+    border: 1px solid #e9ecef;
+    text-align: center;
+    transition: all 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    &:hover {
+      border-color: #b8daff;
+      background: $primary-light;
+      transform: translateY(-5px);
+      box-shadow: 0 8px 16px rgba(66, 133, 244, 0.1);
+    }
+
+    .capability-icon {
+      text-align: center;
+      margin-bottom: 12px;
+      width: 50px;
+      height: 50px;
+      margin-left: auto;
+      margin-right: auto;
+      border-radius: 12px;
+      background-color: rgba(66, 133, 244, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      img {
+        display: inline-block;
+        width: 28px;
+      }
+    }
+
+    &:hover .capability-icon img {
+      transform: scale(1.15);
+    }
+
+    .capability-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #202124;
+      margin-bottom: 6px;
+    }
+
+    h4 {
+      font-size: 12px;
+      color: $primary-color;
+      margin: 0 0 10px 0;
+      font-weight: 500;
+    }
+
+    .capability-desc {
+      font-size: 13px;
+      color: #5f6368;
+      line-height: 1.5;
+    }
+  }
+}
+
+// 团队成员卡片
+.member-item {
+  &:hover .member-avatar {
+    transform: scale(1.05);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  }
+}
+
+// 最新动态
+.timeline-content {
+  margin-top: 4px;
+  cursor: pointer;
+
+  &:hover .font-medium {
+    color: $primary-color;
+  }
+}
+
+// 其他样式保持不变...
 .home-search {
   :deep(.devui-input-slot__prepend),
   :deep(.devui-input-slot__append),
@@ -747,13 +843,6 @@ getNoticeList();
   }
 }
 
-.glow-border {
-  border: 1px solid var(--devui-form-control-line, #d7d8da);
-  border-color: var(--devui-form-control-line-active, #5e7ce0) !important;
-  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.08));
-  transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
 .menu-item {
   display: flex;
   justify-content: space-between;
@@ -804,18 +893,6 @@ getNoticeList();
   width: 80%;
 }
 
-// 页面容器基础样式
-.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;
@@ -859,17 +936,6 @@ getNoticeList();
 }
 
 .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;
@@ -882,104 +948,20 @@ getNoticeList();
     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: #f3f7f8;
-      border-radius: 8px;
-      padding: 12px;
-      border: 1px solid #323a4e;
-      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;
-}
-
 /* 时间线样式调整，保持与原有布局一致 */
 :deep(.devui-timeline) {
   --devui-timeline-item-padding: 0 0 24px 0; /* 调整项间距 */
@@ -999,18 +981,4 @@ getNoticeList();
 :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>