From ef07ed14847efac726f9cb715e67b6c17ea747ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=AA=E5=B0=91=E4=BC=9F?= <wsw.sun@qq.com>
Date: Sat, 15 Mar 2025 17:33:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20SBOM=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Jyh/Version/Detail/SBOM.vue       |  11 +-
 src/views/Jyh/Version/Detail/SBOMDetail.vue | 180 ++++++++++++++++++++
 2 files changed, 190 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Jyh/Version/Detail/SBOMDetail.vue

diff --git a/src/views/Jyh/Version/Detail/SBOM.vue b/src/views/Jyh/Version/Detail/SBOM.vue
index cde5c23..295dc7a 100644
--- a/src/views/Jyh/Version/Detail/SBOM.vue
+++ b/src/views/Jyh/Version/Detail/SBOM.vue
@@ -6,15 +6,24 @@
   <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="firstName" header="组织名称" show-overflow-tooltip>
+          <template #default="scope">
+            <a class="devui-link" @click="showDetail = true">{{ scope.row.firstName }}</a>
+          </template>
+        </d-column>
         <d-column field="lastName" header="版本"></d-column>
       </d-table>
     </div>
   </Card>
+  <d-drawer v-model="showDetail" style="width: 800px; padding: 20px">
+    <SBOMDetail @close="showDetail = false" />
+  </d-drawer>
 </template>
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
+import SBOMDetail from './SBOMDetail.vue';
 const checked = ref(false);
+const showDetail = ref(false);
 
 const baseTreeTableData1 = ref([
   {
diff --git a/src/views/Jyh/Version/Detail/SBOMDetail.vue b/src/views/Jyh/Version/Detail/SBOMDetail.vue
new file mode 100644
index 0000000..c988590
--- /dev/null
+++ b/src/views/Jyh/Version/Detail/SBOMDetail.vue
@@ -0,0 +1,180 @@
+<template>
+  <d-layout class="dlayout">
+    <d-header class="dheader">
+      <div class="title">
+        <h1>openssl</h1>
+        <d-icon style="cursor: pointer" name="icon-close" @click="emit('close')"></d-icon>
+      </div>
+      <div class="sub-title">
+        <span>安全漏洞：</span>
+        <span class="val">3</span>
+        <span class="split"></span>
+        <span>许可证</span>
+        <d-tag color="#3ac295" size="sm" class="ml-2">获准的</d-tag>
+      </div>
+    </d-header>
+    <div class="card-box">
+      <div class="card-body">
+        <d-row :gutter="10">
+          <d-col :span="24" class="flex">
+            <label style="flex: 0.2">简介</label>
+            <p>request</p>
+          </d-col>
+        </d-row>
+        <d-row :gutter="10">
+          <d-col :span="24" class="flex">
+            <label style="flex: 0.2">关联漏洞编号</label>
+            <p>CNVD-201105-215</p>
+          </d-col>
+        </d-row>
+      </div>
+    </div>
+    <div class="card-box">
+      <div class="card-header">组件详情</div>
+      <div class="card-body">
+        <d-row :gutter="10">
+          <d-col :span="12" class="flex">
+            <label>当前版本</label>
+            <p>2.0</p>
+          </d-col>
+          <d-col :span="12" class="flex">
+            <label>最新版本</label>
+            <p>3.0</p>
+          </d-col>
+        </d-row>
+        <d-row :gutter="10">
+          <d-col :span="12" class="flex">
+            <label>深度</label>
+            <p>1</p>
+          </d-col>
+          <d-col :span="12" class="flex">
+            <label>供应商</label>
+            <p>-</p>
+          </d-col>
+        </d-row>
+        <d-row :gutter="10">
+          <d-col :span="12" class="flex">
+            <label>包管理器平台</label>
+            <p>NOT_SPECIFIED</p>
+          </d-col>
+          <d-col :span="12" class="flex">
+            <label>范围</label>
+            <p>-</p>
+          </d-col>
+        </d-row>
+        <d-row :gutter="10">
+          <d-col :span="12" class="flex">
+            <label>程序语言</label>
+            <p>cpp</p>
+          </d-col>
+          <d-col :span="12" class="flex">
+            <label>活跃度</label>
+            <p>-</p>
+          </d-col>
+        </d-row>
+        <d-row :gutter="10">
+          <d-col :span="12" class="flex">
+            <label>下载量</label>
+            <p>-</p>
+          </d-col>
+          <d-col :span="12" class="flex">
+            <label>识别方法</label>
+            <p>BOM定义文件</p>
+          </d-col>
+        </d-row>
+        <d-row :gutter="10">
+          <d-col :span="12" class="flex">
+            <label>匹配度</label>
+            <p>100%</p>
+          </d-col>
+          <d-col :span="12" class="flex">
+            <label>生命周期终点/服务终止</label>
+            <p><d-tag type="danger" size="sm">已停止维护</d-tag></p>
+          </d-col>
+        </d-row>
+        <d-row :gutter="10">
+          <d-col :span="12" class="flex">
+            <label>组件依赖关系</label>
+            <p>openssl</p>
+          </d-col>
+        </d-row>
+      </div>
+    </div>
+  </d-layout>
+</template>
+
+<script setup>
+import { ref, defineEmits } from 'vue';
+
+const emit = defineEmits(['close']);
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+.dlayout {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  .dheader {
+    width: 100%;
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    d-icon {
+      cursor: pointer;
+    }
+  }
+
+  .sub-title {
+    display: flex;
+    gap: 2px;
+    align-items: center;
+    font-size: 12px;
+    margin-top: 6px;
+    color: #808080;
+    .val {
+      color: var(--devui-text);
+    }
+    .split {
+      width: 1px;
+      height: 14px;
+      background-color: #ddd;
+    }
+  }
+
+  .card-box {
+    width: 100%;
+    border-radius: 8px;
+    border: 1px solid #eef0f5;
+    font-size: 14px;
+    margin-top: 15px;
+    .card-header {
+      padding: 10px 16px;
+      background-color: #f5f5f5;
+      border-bottom: 1px solid #eef0f5;
+      font-weight: bold;
+    }
+    .card-body {
+      margin: 10px 16px;
+      .flex {
+        margin: 10px 0;
+        label,
+        p {
+          flex: 1;
+        }
+        label {
+          color: #595959;
+        }
+      }
+    }
+  }
+}
+</style>