feat: SBOM列表

src/views/Jyh/Version/Detail/CommunityInfo.vue

@@ -34,11 +34,11 @@
       <d-row class="mt-3">
         <d-col :span="12">
           <d-chart :option="optionConChart" style="width: 100%; height: 400px"></d-chart>
-          <p class="text-center mb-3">国家/地球分布</p>
+          <p class="text-center mt-translate-y">国家/地球分布</p>
         </d-col>
         <d-col :span="12">
           <d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
-          <p class="text-center mb-3">组织/公司分布</p>
+          <p class="text-center mt-translate-y">组织/公司分布</p>
         </d-col>
       </d-row>
     </Card>
@@ -127,4 +127,7 @@ const optionOrgChart = reactive({
   font-size: 12px;
   color: #808080;
 }
+.mt-translate-y {
+  transform: translateY(-30px);
+}
 </style>

src/views/Jyh/Version/Detail/SBOM.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="flex align-center justify-start">
+    <d-search icon-position="left" style="width: 380px" placeholder="请输入搜索组件名称"></d-search>
+    <d-checkbox class="ml-10" label="只显示有漏洞的组件" :isShowTitle="false" v-model="checked" />
+  </div>
+  <Card simple class="jyh-card mt-3">
+    <div class="clear-padding">
+      <d-table :indent="32" @check-change="treeCheckChange" :data="baseTreeTableData1" row-key="id">
+        <d-column field="firstName" header="组织名称" show-overflow-tooltip> </d-column>
+        <d-column field="lastName" header="版本"></d-column>
+      </d-table>
+    </div>
+  </Card>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+const checked = ref(false);
+
+const baseTreeTableData1 = ref([
+  {
+    id: '1',
+    firstName: 'openssl',
+    lastName: 'N.A.',
+    children: [
+      {
+        id: '2',
+        firstName: 'ssl',
+        lastName: 'N.A.',
+        children: [
+          {
+            id: '3',
+            firstName: 'ssl',
+            lastName: 'N.A.'
+          },
+          {
+            id: '4',
+            firstName: 'crypto',
+            lastName: 'N.A.'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: '5',
+    firstName: 'Text-Template-1.56',
+    lastName: 'N.A.',
+    children: [
+      {
+        id: '6',
+        firstName: 'ssl',
+        lastName: 'N.A.',
+        children: [
+          {
+            id: '7',
+            firstName: 'ssl',
+            lastName: 'N.A.'
+          },
+          {
+            id: '8',
+            firstName: 'crypto',
+            lastName: 'N.A.'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: '9',
+    firstName: 'Text-Template-1.56',
+    lastName: 'N.A.'
+  }
+]);
+
+const treeCheckChange = (val, row, selection) => {
+  console.log('treeCheckChange', selection);
+};
+</script>
+
+<style scoped lang="scss">
+.clear-padding {
+  margin: -16px -20px;
+}
+:deep(.devui-table__cell) {
+  display: flex;
+  align-items: center;
+  .devui-table__tree-operate {
+    transform: translateY(-3px);
+  }
+}
+</style>

src/views/Jyh/Version/Detail/index.vue

@@ -27,17 +27,20 @@
         <d-tab id="bbxx" title="版本信息"></d-tab>
         <d-tab id="ylgx" title="依赖关系"></d-tab>
         <d-tab id="ldxx" title="漏洞信息"></d-tab>
+        <d-tab id="SBOM" title="SBOM"></d-tab>
         <d-tab id="communityInfo" title="开发者社区信息"></d-tab>
         <d-tab id="ai" title="AI修复建议"></d-tab>
-        <d-tab id="licenseInfo" title="许可证信息"></d-tab>      
+        <d-tab id="licenseInfo" title="许可证信息"></d-tab>
       </d-tabs>
     </div>
     <div class="version-detail-content">
       <version-info v-if="selectTab === 'bbxx'"></version-info>
       <vulnerabilities-list v-else-if="selectTab === 'ldxx'"></vulnerabilities-list>
       <community-info v-else-if="selectTab === 'communityInfo'"></community-info>
+      <SBOM v-else-if="selectTab === 'SBOM'" />
       <AIRepair v-else-if="selectTab === 'ai'"></AIRepair>
-      <LicenseInfo v-else-if="selectTab === 'licenseInfo'"></LicenseInfo>    </div>
+      <LicenseInfo v-else-if="selectTab === 'licenseInfo'"></LicenseInfo>
+    </div>
   </div>
 </template>
 
@@ -48,6 +51,7 @@ import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
 import VulnerabilitiesList from './VulnerabilitiesList.vue';
 import CommunityInfo from './CommunityInfo.vue';
 import VersionInfo from './VersionInfo.vue';
+import SBOM from './SBOM.vue';
 import AIRepair from '../../AIRepair/index.vue';
 import LicenseInfo from '../../LicenseInfo/index.vue';
 const { namespace } = getOrgInfo();