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

src/components/Header/AIHeader.vue

@@ -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>

src/components/Header/index.vue

@@ -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>

src/router/config/home.ts

@@ -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' // 左侧菜单抽屉模式
+        }
+      },
     ]
   },
   {

src/views/Jyh/AI/Home/SwiperComponent.vue

@@ -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: 2, title: '漏洞问答/影响分析', description: '快速查询漏洞详情，分析安全影响范围',icon:icon_yj },
-  { id: 3, title: '你可以帮我做什么', description: '了解当前AI助手可以帮忙干什么',icon:icon_jh },
+  { id: 3, title: '预测功能', description: '基于AI模型预测安全风险趋势',icon:icon_jh },
-  { id: 4, title: '热门开源软件', description: '列出热门开源软件',icon:icon_hot },
+  { id: 4, title: 'API开放入口', description: '对接自动化安全检测与分析能力',icon:icon_hot },
   { id: 5, title: '预警公告', description: '列出最近预警公告',icon:icon_yj },
   { id: 6, title: '你可以帮我做什么', description: '了解当前AI助手可以帮忙干什么',icon:icon_jh }
 ];

src/views/Jyh/AI/Home/index.vue

@@ -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"/>

src/views/Jyh/Home/index.vue

@@ -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 style="width: 70%" class="from-blue-50 to-white">
-      <div class="home-information" v-if="infoList.length > 0">
+        <!-- 顶部功能按钮 -->
-        <div class="info-title">
+        <d-row :gutter="16" class="mb-8 top-btn">
-          <div class="sub-title">
+          <div style="cursor: pointer" v-for="item in topButtons" :key="item.name" @click="handleButtonClick(item)">
-            <img src="@/assets/imgs/home/informIcon@2x.png" />
+            <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">
-            <span>预警公告</span>
+              <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"
+        <div class="dashboard-page">
-            >更多 <i class="icon icon-chevron-right-2"></i>
+          <d-row :gutter="16" class="main-row">
-          </a>
+            <!-- 左侧：全球威胁态势实时监控 -->
-          <span v-else class="text-blue-500">查看更多，请先登录</span> -->
+            <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
+        <d-row style="height: 237px" :gutter="16">
-              v-for="(item, index) in infoList"
+          <d-col style="height: 100%" :span="8">
-              :key="index"
+            <div  style="height: 100%" class="bg-white rounded-xl shadow-md p-4 mb-4">
-              :dot-color="item.dotColor"
+              <div class="flex justify-between items-center mb-4">
-              :line-color="'var(--devui-form-control-line-hover)'"
+                <h3 class="text-lg font-bold">团队与成果</h3>
-            >
+                <router-link :to="{ name: 'OurTeam' }" style="cursor: pointer;" class="text-blue-600 text-sm">更多 ></router-link>
-              <template #default>
+              </div>
-                <div class="flex items-center justify-between w-full">
+              <div class="flex flex-col items-center">
-                  <div
+                <h4 class="font-medium mb-2">顶尖安全团队</h4>
-                    class="cursor-pointer notice-content flex gap-2 items-center"
+                <div class="flex gap-4 mb-3">
-                    @click="openWarningDetail(item, index)"
+                  <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>{{ item.subject }}</span>
+                    <span class="text-sm font-medium">{{ member.name }}</span>
-                    <d-tag
+                    <span class="text-xs text-gray-500">{{ member.title }}</span>
-                      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>
+                <div class="flex gap-2">
-              <template #time>
+                  <button class="bg-blue-600 text-white text-xs px-3 py-1 rounded">国家级安全认证团队</button>
-                <span></span>
+                  <button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded">200+专利技术</button>
-              </template>
+                  <button class="bg-blue-100 text-blue-600 text-xs px-3 py-1 rounded">200+专利技术</button>
-            </d-timeline-item>
+                </div>
-          </d-timeline>
+              </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>-->
+
+<!--          &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>
 
@@ -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%;
+    height: 100%;
-    width: 50%;
+    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 {
+.bg-gradient-to-b {
-  .devui-modal__body {
+  background-size: cover;
-    padding: 0px !important;
+  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>

src/views/Jyh/Insights/index.vue

@@ -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>