merge dev-shenjianbin into master

新增漏洞详情页 Created-by: MaxShen Commit-by: shenjianbin Merged-by: MaxShen Description: 新增漏洞详情页 See merge request: hk_openRepo/OpenRepo_Portal!8
2025-03-15 18:09:14 +08:00
parent b52895c06a ad85fc3ecf
commit 58cbf468b1
11 changed files with 583 additions and 9 deletions
--- a/src/api/repo/index.ts
+++ b/src/api/repo/index.ts
@@ -1542,3 +1542,14 @@ export const getOriginalComment = (params: types.DiscussionCommentProps): Promis
    })
  );
 }
+
+// 获取漏洞数据
+export const getVulnDetail = (params: types.VulnDetailProps): Promise<any> => {
+  return reqCatch(() =>
+    request({
+      url: `/api/v1/repo/vulnerability/info`,
+      method: 'get',
+      params,
+    })
+  );
+}
--- a/src/api/repo/types.ts
+++ b/src/api/repo/types.ts
@@ -207,3 +207,8 @@ export interface DiscussionCommentProps {
  discussionId: string | number,
 }

+export interface VulnDetailProps {
+  repoId: string,
+  id: string,
+}
+
--- a/src/views/Jyh/PersonalCenter/Detail/EarlyWarning.vue
+++ b/src/views/Jyh/PersonalCenter/Detail/EarlyWarning.vue
@@ -15,7 +15,6 @@ import { ref } from 'vue';
 import EarlyWarningPerson from './EarlyWarningPerson.vue';
 import EarlyWarningOrganization from './EarlyWarningOrganization.vue';
 const selectTab = ref('gryj');
-
 </script>

 <style scoped lang="scss">
@@ -23,3 +22,18 @@ const selectTab = ref('gryj');


 </style>
+
+<style lang="scss">
+.warning-modal {
+  width: auto;
+
+  .devui-modal__header {
+    font-size: 20px;
+    height: auto!important;
+  }
+
+  .devui-modal__body {
+    padding: 0;
+  }
+} 
+</style>
--- a/src/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue
+++ b/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'
+});
+// warningData.value = propsData.warningData;
+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>
--- a/src/views/Jyh/PersonalCenter/Detail/EarlyWarningPerson.vue
+++ b/src/views/Jyh/PersonalCenter/Detail/EarlyWarningPerson.vue
@@ -10,7 +10,7 @@
        <d-column field="code" header="时间"></d-column>
        <d-column field="name" header="标题">
          <template #default="scope">
-            <a>{{scope.row.name}}</a>
+            <a @click="openWarningDetail(scope.row)">{{scope.row.name}}</a>
          </template>
        </d-column>
        <d-column field="detail" header="详情"></d-column>
@@ -25,11 +25,16 @@
      </d-table>
    </div>
  </Card>
+
+  <d-modal class="warning-modal" v-model="warningModalVisable" title="主题：">
+    <EarlyWarningDetail @close="colseWarningDetail" :warningData="currentWarning" type="user"></EarlyWarningDetail>
+  </d-modal>
 </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',level: 4},
@@ -38,6 +43,15 @@ const licenseTableData = ref([
  {code: '05822156', name:'MIT License',detail: 'integer',level: 1},
 ]);

+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">
--- a/src/views/Jyh/PersonalCenter/Detail/InvitationNoticeList.vue
+++ b/src/views/Jyh/PersonalCenter/Detail/InvitationNoticeList.vue
@@ -0,0 +1,74 @@
+<template>
+  <div class="invitation-notice-container">
+    <Card simple class="jyh-card mt-3">
+      <div class="card-title">邀请通知列表</div>
+      <div class="mb-3">
+        <d-table
+          class="jyh-table jyh-table-2"
+          :header-bg="true"
+          :data="noticeTableData"
+        >
+          <d-column field="content" header="邀请内容"></d-column>
+          <d-column field="time" header="邀请时间" width="200"></d-column>
+          <d-column field="creator" header="邀请人" width="180"></d-column>
+          <d-column header="操作" width="150">
+            <template #default="scope">
+              <d-button
+                variant="text"
+                color="primary"
+                class="mr-2"
+              >
+                接收
+              </d-button>
+              <d-button
+                variant="text"
+                color="primary"
+              >
+                拒绝
+              </d-button>
+            </template>
+          </d-column>
+        </d-table>
+        <div class="invitation-pagination">
+          <d-pagination
+            style="display: inline-flex;"
+            :total="pager.total"
+            v-model:pageSize="pager.pageSize"
+            v-model:pageIndex="pager.pageIndex"
+            :can-view-total="true"
+            :can-change-page-size="true"
+            :can-jump-page="true"
+            :max-items="5"
+          />
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, shallowReactive } from 'vue';
+
+const noticeTableData = ref([
+  {
+    content: '当您订阅的软件有漏洞预警通知时，将以应用号的方式通知。可在首页查看或取消订阅！',
+    time: '2025-03-15 17:29:30',
+    creator: '132456798',
+  }
+]);
+const pager = shallowReactive({
+  total: 1,
+  pageIndex: 1,
+  pageSize: 10,
+  pageSizeOptions: [10, 20, 30, 40, 50],
+});
+</script>
+
+<style lang="scss" scoped>
+.invitation-notice-container {
+  .invitation-pagination {
+    padding: 12px 0;
+    text-align: right;
+  }
+}
+</style>
--- a/src/views/Jyh/PersonalCenter/index.vue
+++ b/src/views/Jyh/PersonalCenter/index.vue
@@ -23,6 +23,7 @@
          <d-tab id="yjtzlb" title="预警通知列表"></d-tab>
          <d-tab id="dylb" title="订阅列表"></d-tab>
          <d-tab id="organizationManage" title="组织管理"></d-tab>
+          <d-tab id="invitation" title="邀请通知"></d-tab>
        </d-tabs>
      </div>
    </div>
@@ -30,6 +31,7 @@
      <early-warning v-if="selectTab==='yjtzlb'"/>
      <subscribe-list v-if="selectTab==='dylb'"/>
      <OrganizationManage v-if="selectTab === 'organizationManage'" />
+      <InvitationNoticeList v-if="selectTab === 'invitation'" />
    </div>
  </div>
 </template>
@@ -41,6 +43,7 @@ import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
 import EarlyWarning from './Detail/EarlyWarning.vue';
 import SubscribeList from './Detail/SubscribeList.vue';
 import OrganizationManage from './OrganizationManage/OrganizationManage.vue';
+import InvitationNoticeList from './Detail/InvitationNoticeList.vue';

 const { namespace } = getOrgInfo();
 const avatarUrl = '/src/assets/imgs/avatar/male.png';
--- a/src/views/Jyh/Version/Detail/SubscriptionModal.vue
+++ b/src/views/Jyh/Version/Detail/SubscriptionModal.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="subscribe-container">
+    <div class="subscribe-tip mb-3">当您订阅的软件有漏洞预警通知时，将以应用号的方式通知。可在首页查看或取消订阅！</div>
+    <div class="subscribe-form">
+      <d-form ref="formRef" :data="formData" :rules="rules">
+        <d-form-item field="subscribeType" label="通知方式">
+          <d-radio-group direction="row" v-model="formData.subscribeType" @change="typeChange">
+            <d-radio value="0">短信</d-radio>
+            <d-radio value="1">邮件</d-radio>
+            <d-radio value="2">站内通知</d-radio>
+          </d-radio-group>
+        </d-form-item>
+        <d-form-item v-if="formData.subscribeType && formData.subscribeType !== '2'" field="subscribeText" :label="textLabel">
+          <d-input v-model="formData.subscribeText" />
+        </d-form-item>
+      </d-form>
+    </div>
+    <div class="subscribe-operation mt-5">
+      <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 { computed, ref } from 'vue';
+
+const props = defineProps(['softwareData']);
+const emit = defineEmits(['close']);
+const formRef = ref(null);
+const formData = ref({
+  subscribeType: '',
+  subscribeText: '',
+});
+const rules = {
+  subscribeType: [{ required: true, message: '请选择', trigger: 'change' }],
+  subscribeText: [{ required: true, message: '不能为空', trigger: 'blur' }],
+};
+const textLabel = ref('');
+const confirm = () => {
+  (formRef?.value as any)?.validate((isValid: boolean, invalidFields: any) => {
+    if (!isValid) {
+      return;
+    }
+    emit('close');
+  });
+};
+const typeChange = () => {
+  if (formData.value.subscribeType === '0') {
+    textLabel.value = '手机号';
+  } else if (formData.value.subscribeType === '1') {
+    textLabel.value = '邮箱地址';
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.subscribe-container {
+  width: 600px;
+  
+  .subscribe-tip {
+    color: #191919;
+    font-family: HarmonyOS Sans SC;
+    font-weight: regular;
+    font-size: 14px;
+  }
+
+  .subscribe-form {
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    background: #F2F5FC;
+    padding: 20px 32px 0;
+
+    form {
+      width: 100%;
+    }
+  }
+
+  .subscribe-operation {
+    text-align: center;
+  }
+}
+</style>
--- a/src/views/Jyh/Version/Detail/VulnerabilitiesList.vue
+++ b/src/views/Jyh/Version/Detail/VulnerabilitiesList.vue
@@ -11,7 +11,7 @@
          @filter-change="handleFilterChange"
        >
          <template #default="scope">
-            <a>{{ scope.row.versionName }}</a>
+            <a @click="openVulnDetail(scope.row)">{{ scope.row.versionName }}</a>
          </template>
        </d-column>
        <d-column
@@ -100,6 +100,11 @@
        >你确认删除此项：{{ item.cla_name }} ？</span
      >
    </GModal>
+    
+    <!-- 漏洞详情 -->
+    <d-drawer v-model="vulnDetailVisable" style="width: auto;">
+      <VulnerabilityDetail :vulnId="currentVuln.id"></VulnerabilityDetail>
+    </d-drawer>
  </div>
 </template>

@@ -110,9 +115,10 @@ import { ref, reactive } from 'vue';
 import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
 import { useRouter, useRoute } from 'vue-router';
 import { GModal } from '@/components/Setting/index';
-import { reqCatch } from '@/utils/catch';
+import { reqCatch } from '@/utils/catch'; 
 import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
 import { Message } from 'vue-devui';
+import VulnerabilityDetail from '@/views/Jyh/Version/Detail/VulnerabilityDetail.vue'
 const { namespace } = getOrgInfo();

 const tableData = ref([
@@ -233,6 +239,13 @@ const setClaStatus = async (row: any) => {
 const signCla = (row: any) => {
  router.push('/cla/' + row.object_id);
 };
+
+const vulnDetailVisable = ref(false);
+const currentVuln = ref();
+const openVulnDetail = (row) => {
+  vulnDetailVisable.value = true;
+  currentVuln.value = row;
+}
 </script>

 <style scoped lang="scss">
--- a/src/views/Jyh/Version/Detail/VulnerabilityDetail.vue
+++ b/src/views/Jyh/Version/Detail/VulnerabilityDetail.vue
@@ -0,0 +1,204 @@
+<template>
+  <div class="vuln-detail-container">
+    <div class="vuln-title mb-2">{{ vulnDetail.id }}</div>
+    <div class="vuln-sub-title mb-3">
+      <span>{{ vulnDetail.cveId || '--' }}</span>
+      <span class="split-line"></span>
+      <span><span class="release-time">发布时间：</span>{{ vulnDetail.releaseTime || '--' }}</span>
+    </div>
+    <Card simple class="jyh-card mb-4">
+      <div class="card-title">漏洞名称</div>
+      <d-row class="mb-3">
+        <d-col :span="12">
+          <span class="card-key width-90">漏洞名称</span>
+          <span class="card-val">{{vulnDetail.id || '--'}}</span>
+        </d-col>
+        <d-col :span="12">
+          <span class="card-key width-90">关联漏洞编号</span>
+          <span class="card-val">{{vulnDetail.cnvdId || '--'}}</span>
+        </d-col>
+      </d-row>
+      <d-row class="mb-3">
+        <d-col :span="24">
+          <span class="card-key width-90">简介</span>
+          <span class="card-val">{{vulnDetail.description || '--'}}</span>
+        </d-col>
+      </d-row>
+      <d-row class="mb-3">
+        <d-col :span="24">
+          <span class="card-key width-90">额外信息</span>
+          <span class="card-val">
+            <a v-for="link in vulnDetail.links" class="devui-link" :href="link" target="_blank" rel="noreferrer noopener">{{link}}</a>
+            <span v-if="!vulnDetail.links || vulnDetail.links.length === 0">--</span>
+          </span>
+        </d-col>
+      </d-row>
+      <d-row>
+        <d-col :span="24">
+          <span class="card-key width-90">补丁链接</span>
+          <span class="card-val">
+            <a v-for="link in vulnDetail.links2" class="devui-link" :href="link" target="_blank" rel="noreferrer noopener">{{link}}</a>
+            <span v-if="!vulnDetail.links || vulnDetail.links.length === 0">--</span>
+          </span>
+        </d-col>
+      </d-row>
+    </Card>
+    <Card simple class="jyh-card mb-4">
+      <div class="card-title">安全漏洞</div>
+      <d-row class="mb-3">
+        <d-col :span="12">
+          <span class="card-key width-90">严重性</span>
+          <span class="card-val">{{vulnDetail.id || '--'}}</span>
+        </d-col>
+        <d-col :span="12">
+          <span class="card-key width-90">分值</span>
+          <span class="card-val">{{vulnDetail.code || '--'}}</span>
+        </d-col>
+      </d-row>
+    </Card>
+    <Card simple class="jyh-card mb-4">
+      <div class="card-title">安全问题</div>
+      <d-row class="mb-3">
+        <d-col :span="12">
+          <span class="card-key width-90">攻击向量</span>
+          <span class="card-val">{{vulnDetail.id || '--'}}</span>
+        </d-col>
+        <d-col :span="12">
+          <span class="card-key width-90">攻击复杂度</span>
+          <span class="card-val">{{vulnDetail.complexity || '--'}}</span>
+        </d-col>
+      </d-row>
+      <d-row class="mb-3">
+        <d-col :span="12">
+          <span class="card-key width-90">用户交互</span>
+          <span class="card-val">{{vulnDetail.compName || '--'}}</span>
+        </d-col>
+        <d-col :span="12">
+          <span class="card-key width-90">需要特殊权限</span>
+          <span class="card-val">{{vulnDetail.cnvdId || '--'}}</span>
+        </d-col>
+      </d-row>
+    </Card>
+    <Card simple class="jyh-card mb-4">
+      <div class="card-title">影响的组件</div>
+      <d-row class="mb-3">
+        <d-col :span="12">
+          <span class="card-key width-90">组件名</span>
+          <span class="card-val">{{vulnDetail.compName || '--'}}</span>
+        </d-col>
+        <d-col :span="12">
+          <span class="card-key width-90">深度</span>
+          <span class="card-val">{{vulnDetail.complexity || '--'}}</span>
+        </d-col>
+      </d-row>
+      <d-row class="mb-3">
+        <d-col :span="12">
+          <span class="card-key width-90">当前版本</span>
+          <span class="card-val">{{vulnDetail.version || '--'}}</span>
+        </d-col>
+        <d-col :span="12">
+          <span class="card-key width-90">最新版本</span>
+          <span class="card-val">{{vulnDetail.cnvdId || '--'}}</span>
+        </d-col>
+      </d-row>
+      <d-row>
+        <d-col :span="24">
+          <span class="card-key width-90">组件依赖关系</span>
+          <span class="card-val">{{vulnDetail.version || '--'}}</span>
+        </d-col>
+      </d-row>
+    </Card>
+    <Card simple class="jyh-card mb-4">
+      <div class="card-title">修复建议</div>
+      <d-row class="mb-3">
+        <d-col :span="12">
+          <span class="card-key width-90">补丁版本</span>
+          <span class="card-val">{{vulnDetail.id || '--'}}</span>
+        </d-col>
+        <d-col :span="12">
+          <span class="card-key width-90">修复兼容性</span>
+          <span class="card-val">{{vulnDetail.complexity || '--'}}</span>
+        </d-col>
+      </d-row>
+      <d-row>
+        <d-col :span="24">
+          <span class="card-key width-90">修复建议</span>
+          <span class="card-val">{{vulnDetail.description || '--'}}</span>
+        </d-col>
+      </d-row>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getVulnDetail } from '@/api/repo';
+import { ref } from 'vue';
+
+const propsData = defineProps(['repoId', 'vulnId']);
+const vulnDetail = ref({
+  id: 'HWPSIRT-2022-29348',
+  cveId: 'CVE-2013-0293',
+  cnvdId: 'CNVD-201105-215',
+  name: '',
+  code: '',
+  description: '华为开发者社区致力于打造华为开发者专属的官方技术交流平台，帮助开发者探索开发实践、交流心得经验、获悉业界动态、解决开发问题。汇聚华为云社区“华为云”领域博客、问答、视频等精彩内容，形成开发者和技术爱好者交流与分享主阵地。',
+  links: ['/home'],
+  links2: ['/home'],
+  vector: '',
+  complexity: '',
+  interactive: '',
+  releaseTime: '2018-07-31',
+  compName: 'mplayer',
+  version: '1.4',
+});
+
+const queryVulnDetail = async () => {
+  const data = await getVulnDetail({repoId: propsData.repoId, id: propsData.vulnId});
+  vulnDetail.value = data;
+};
+// queryVulnDetail();
+</script>
+
+<style scoped lang="scss">
+.vuln-detail-container {
+  width: 800px;
+  padding: 20px;
+
+  .vuln-title {
+    color: #191919;
+    font-family: HarmonyOS Sans SC;
+    font-weight: 400;
+    font-size: 18px;
+  }
+
+  .vuln-sub-title {
+    color: #191919;
+    font-family: HarmonyOS Sans;
+    font-weight: regular;
+    font-size: 12px;
+    line-height: 20px;
+    letter-spacing: 0px;
+    text-align: left;
+
+    .split-line {
+      width: 1px;
+      display: inline-block;
+      line-height: 16px;
+      height: 16px;
+      vertical-align: middle;
+      margin: 0 8px;
+      background-color: #EEF0F5;
+    }
+
+    .release-time {
+      color: #808080;
+    }
+  }
+
+  .card-val {
+    display: inline-block;
+    width: calc(100% - 90px);
+    vertical-align: top;
+  }
+}
+</style>
--- a/src/views/Jyh/Version/Detail/index.vue
+++ b/src/views/Jyh/Version/Detail/index.vue
@@ -9,18 +9,27 @@
      <div class="header-top">
        <GAvatar style="margin-right: 12px" :src="avatarUrl" name="Vue" :width="40" :height="40"></GAvatar>
        <div>
-          <div class="header-title1">vue</div>
+          <div class="header-title1">{{ softwareData.name }}</div>
          <div class="header-div">
-            <span class="span1">版本：</span><span class="span2">3.5.13</span>
+            <span class="span1">版本：</span><span class="span2">{{ softwareData.version }}</span>
            <span class="split"></span>
-            <span class="span1">生命周期状态：</span><span class="span2">选型中</span>
+            <span class="span1">生命周期状态：</span><span class="span2">{{ softwareData.lifecycle }}</span>
            <span class="split"></span>
            <span class="span1">集成风险：</span>
-            <d-tag color="#F6933B">低风险</d-tag>
+            <d-tag color="#F6933B">{{ softwareData.risk }}</d-tag>
          </div>
        </div>
        <div class="fr">
-          <d-button class="mr-2" variant="solid">订阅</d-button>
+          <d-button class="mr-2" variant="solid" @click="openSubscription">订阅</d-button>
+          <d-modal class="subscribe-modal" style="width: auto;" v-model="subscribeModalVisable" title="订阅漏洞预警通知">
+            <template #header>
+              <div class="subscribe-header">
+                <d-icon name="icon-info-o" color="var(--devui-info)" size="18px"></d-icon>
+                <span>订阅漏洞预警通知</span>
+              </div>
+            </template>
+            <SubscriptionModal @close="colseSubscription" :softwareData="softwareData"></SubscriptionModal>
+          </d-modal>
        </div>
      </div>
      <d-tabs class="jyh-tabs jyh-tabs-2" type="wrapped" v-model="selectTab">
@@ -57,6 +66,7 @@ import LicenseInfo from '../../LicenseInfo/index.vue';
 const { namespace } = getOrgInfo();
 const route = useRoute(); // 获取路由对象
 const avatarUrl = '/src/assets/imgs/jyh/工程首字母图标.png';
+import SubscriptionModal from '@/views/Jyh/Version/Detail/SubscriptionModal.vue';

 const selectTab = ref('bbxx');

@@ -157,6 +167,21 @@ const setClaStatus = async (row: any) => {
 const signCla = (row: any) => {
  router.push('/cla/' + row.object_id);
 };
+
+const softwareData = ref({
+  name: 'vue',
+  version: '3.5.13',
+  lifecycle: '选中型',
+  risk: '低风险',
+});
+
+const subscribeModalVisable = ref(false);
+const openSubscription = () => {
+  subscribeModalVisable.value = true;
+};
+const colseSubscription = () => {
+  subscribeModalVisable.value = false;
+};
 </script>

 <style scoped lang="scss">
@@ -303,4 +328,25 @@ const signCla = (row: any) => {
  width: 100%;
  margin-top: 12px;
 }
+
+.subscribe-modal {
+  width: auto;
+
+  .subscribe-header {
+    display: flex;
+    align-items: center;
+    padding: 20px 20px 0;
+    >span {
+      margin-left: 8px;
+      color: #191919;
+      font-family: HarmonyOS Sans SC;
+      font-weight: medium;
+      font-size: 18px;
+      line-height: 26px;
+    }
+  }
+}
 </style>
+
+<style lang="scss">
+</style>