新增漏洞详情页

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,
+    })
+  );
+}

src/api/repo/types.ts

@@ -207,3 +207,8 @@ export interface DiscussionCommentProps {
   discussionId: string | number,
 }
 
+export interface VulnDetailProps {
+  repoId: string,
+  id: string,
+}
+

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

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>