feat: SBOM列表

src/assets/css/devui.scss

@@ -289,10 +289,10 @@ button.devui-button--solid--secondary {
   padding: 3px 0;
 }
 .devui-checkbox__label-text {
-  font-size: 16px;
+  font-size: 14px;
 }
 .devui-radio.devui-radio--md span .devui-radio__label {
-  font-size: 16px;
+  font-size: 14px;
 }
 .devui-radio-group div.devui-radio__wrapper {
   height: auto;

src/assets/css/main.scss

@@ -16,13 +16,15 @@ body,
   height: 100%;
   -webkit-font-smoothing: antialiased;
   // scorll 事件失效 overflow-y: overlay
+  // devUI 主题颜色重置
+  --devui-text: rgb(25, 25, 25);
 }
 html {
   overflow-y: scroll; // html本身没有滚动 为了防止自定义滚动条出现时界面抖动，需要预留轨道
 }
 html body {
   //background-color: $devui-global-bg;
-  background-color: #F6F6F8;
+  background-color: #f6f6f8;
 
   font-size: var(--text-sm);
   color: var(--color-font);
@@ -126,15 +128,17 @@ textarea::placeholder {
   }
 }
 /* 滚动条样式自定义 */
-body::-webkit-scrollbar, body>* ::-webkit-scrollbar {
+body::-webkit-scrollbar,
+body > * ::-webkit-scrollbar {
   width: 6px;
   height: 4px;
 }
-body::-webkit-scrollbar-thumb, body>* ::-webkit-scrollbar-thumb {
+body::-webkit-scrollbar-thumb,
+body > * ::-webkit-scrollbar-thumb {
   border-radius: 8px;
   background-color: var(--devui-disabled-text);
-  &:hover{
+  &:hover {
-    background-color: var(--devui-placeholder)
+    background-color: var(--devui-placeholder);
   }
 }
 body::-webkit-scrollbar-track {
@@ -188,12 +192,16 @@ body::-webkit-scrollbar-corner {
 }
 
 /* 自动补全输入框 去掉hover效果*/
-.devui-auto-complete-input__wrapper:not(.devui-auto-complete--disabled):not(.devui-auto-complete-input__wrapper--error):hover {
+.devui-auto-complete-input__wrapper:not(.devui-auto-complete--disabled):not(
+    .devui-auto-complete-input__wrapper--error
+  ):hover {
   border-color: var(--devui-line, #d7d8da);
 }
 
 /* 可输入下拉选择框 去掉hover效果*/
-.devui-editable-select-input__wrapper:not(.devui-editable-select-input__wrapper--disabled):not(.devui-editable-select-input__wrapper--focus):hover {
+.devui-editable-select-input__wrapper:not(.devui-editable-select-input__wrapper--disabled):not(
+    .devui-editable-select-input__wrapper--focus
+  ):hover {
   border-color: var(--devui-line, #d7d8da);
 }
 
@@ -216,7 +224,10 @@ body::-webkit-scrollbar-corner {
 }
 
 /* 时间范围选择 去掉hover效果 */
-.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker:not(.devui-range-date-picker-pro--error):not(.devui-range-date-picker-pro--disabled):hover {
+.devui-range-date-picker-pro
+  .devui-range-date-picker-pro__range-picker:not(.devui-range-date-picker-pro--error):not(
+    .devui-range-date-picker-pro--disabled
+  ):hover {
   border-color: var(--devui-line, #d7d8da);
 }
 
@@ -356,16 +367,20 @@ body::-webkit-scrollbar-corner {
 }
 
 input {
-  background-color:transparent !important;
+  background-color: transparent !important;
   // appearance: none;
 
-  &:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
+  &:-webkit-autofill,
+  textarea:-webkit-autofill,
+  select:-webkit-autofill {
     -webkit-text-fill-color: inherit !important;
     background-color: transparent !important;
     background-image: none;
     transition: background-color 36000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
   }
-  &:-moz-autofill, textarea:-moz-autofill, select:-moz-autofill {
+  &:-moz-autofill,
+  textarea:-moz-autofill,
+  select:-moz-autofill {
     -webkit-text-fill-color: inherit !important;
     background-color: transparent !important;
     background-image: none;
@@ -385,8 +400,6 @@ input {
   }
 }
 
-
-
 .g-content-card-v2 {
   background-color: $devui-global-bg;
   border-radius: $devui-border-radius-card;
@@ -424,7 +437,7 @@ input {
   height: 1px;
   width: 100%;
   background: var(--devui-dividing-line);
-  margin: 32px 0
+  margin: 32px 0;
 }
 
 .g-tip-text {
@@ -434,7 +447,7 @@ input {
 }
 
 // 新版设计统一设置标题样式 大小颜色行高
-.unify-settingTitle-title{
+.unify-settingTitle-title {
   font-weight: 700;
   line-height: 34px;
   font-size: 24px;
@@ -447,14 +460,16 @@ input {
 }
 
 // 下拉框动效
-.arrow-down{
+.arrow-down {
-  transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
+  transition: transform var(--devui-animation-duration-slow, 0.3s)
+    var(--devui-animation-ease-in-out-smooth, cubic-bezier(0.645, 0.045, 0.355, 1));
   transform-origin: center;
   transform: rotateZ(0deg) !important;
 }
 
-.arrow-up{
+.arrow-up {
-  transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
+  transition: transform var(--devui-animation-duration-slow, 0.3s)
+    var(--devui-animation-ease-in-out-smooth, cubic-bezier(0.645, 0.045, 0.355, 1));
   transform-origin: center;
   transform: rotateZ(180deg) !important;
 }

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();