预警详情弹窗

src/views/Jyh/PersonalCenter/Detail/EarlyWarning.vue

@@ -9,21 +9,39 @@
           :data="licenseTableData"
         >
           <d-column field="code" header="编号"></d-column>
-          <d-column field="name" header="名称"></d-column>
+          <d-column field="name" header="名称">
+            <template #default="scope">
+              <a @click="openWarningDetail(scope.row)">{{ scope.row.name }}</a>
+            </template>
+          </d-column>
           <d-column field="detail" header="描述"></d-column>
         </d-table>
       </div>
     </Card>
+
+    <d-modal class="warning-modal" v-model="warningModalVisable" title="主题：">
+      <EarlyWarningDetail @close="colseWarningDetail" :warningData="currentWarning" type="user"></EarlyWarningDetail>
+    </d-modal>
   </div>
 </template>
 
 <script setup lang="ts">
 
 import { ref } from 'vue';
+import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
 
 const licenseTableData = ref([{code: '05822156', name:'MIT License',detail: 'integer'}]);
 const CopyrightTableData = ref([{code: '05822156',detail: 'integer'}]);
 
+const warningModalVisable = ref(false);
+const currentWarning = ref();
+const openWarningDetail = (row) => {
+  warningModalVisable.value = true;
+  currentWarning.value = row;
+};
+const colseWarningDetail = () => {
+  warningModalVisable.value = false;
+};
 </script>
 
 <style scoped lang="scss">
@@ -31,3 +49,18 @@ const CopyrightTableData = ref([{code: '05822156',detail: 'integer'}]);
 
 
 </style>
+
+<style lang="scss">
+.warning-modal {
+  width: auto;
+
+  .devui-modal__header {
+    font-size: 20px;
+    height: auto!important;
+  }
+
+  .devui-modal__body {
+    padding: 0;
+  }
+} 
+</style>

src/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="warning-detail-container">
+    <div class="warning-title">
+      <div>{{ warningData.title }}</div>
+      <div class="sub-title mt-3">
+        <span>重要性</span>
+        <d-tag type="danger" size="sm">{{warningData.importance}}</d-tag>
+      </div>
+    </div>
+    <div class="warning-text">
+      <div class="text-box mb-5">
+        <div>一、概要</div>
+        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warningData.summary }}</p>
+      </div>
+      <div class="text-box">
+        <div>二、修复方案</div>
+        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ warningData.fixMethod }}</p>
+      </div>
+    </div>
+    <div :style="{'border-radius': propsData.type === 'user' ? '6px' : 0}" class="warning-from">可信开源代码库运营团队 {{ warningData.fromTime }}</div>
+    <div v-if="propsData.type === 'system'" class="warning-operation">
+      <d-button @click="confirm" variant="solid" class="mr-2">确认</d-button>
+      <d-button @click="$emit('close')">取消</d-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const emit = defineEmits(['close']);
+const propsData = defineProps(['type', 'warningData']);
+const warningData = ref({
+  title: '【漏洞排查预警】ApacheIgnite远程代码执行漏洞排查（CVE-2024-52577)',
+  importance: '高',
+  summary: '近日，安全中心发现Apache lgnite远程代码执行漏洞（CVE-2024-52577）。在 2.6.0<Apache Ignite< 2.17.0版本中，由于lgnite未能正确实施类序列化过滤器，攻击者能够利用恶意序列化对象绕过安全检查，从而在服务器端反序列化时触发任意代码的执行。经可信开源代码库运营团队评审漏洞技术定级2级/3级，若不满足利用条件可举证降为6级。请你按要求在XX时间内完成修复。',
+  fixMethod: '升级Apache Ignite至安全版本：2.17.0',
+  fromTime: '2025-2-20'
+});
+
+const confirm = () => {
+  emit('close');
+};
+</script>
+
+<style scoped lang="scss">
+.warning-detail-container {
+  width: 600px;
+
+  .warning-title {
+    color: #000000;
+    font-family: HarmonyOS Sans SC;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 28px;
+    padding: 4px 20px 12px;
+
+    .sub-title {
+      >span {
+        margin-right: 12px;
+        color: #808080;
+        font-family: HarmonyOS Sans SC;
+        font-size: 12px;
+      }
+    }
+  }
+  
+  .warning-text {
+    padding: 20px;
+    background: #F6F6F8;
+
+    .text-box {
+
+      div {
+        margin-bottom: 8px;
+        color: #252B3A;
+        font-family: HarmonyOS Sans SC;
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 24px;
+      }
+
+      p {
+        color: #252B3A;
+        font-family: 苹方-简;
+        font-size: 14px;
+        line-height: 24px;
+      }
+    }
+  }
+
+  .warning-from {
+    background: #F6F6F8;
+    color: #808080;
+    font-family: HarmonyOS Sans SC;
+    font-size: 14px;
+    text-align: center;
+    padding: 20px;
+  }
+
+  .warning-operation {
+    text-align: center;
+    padding: 20px;
+  }
+}
+</style>