Situation-Awareness-Platform-Frontend/src/views/Jyh/Version/Detail/SBOMDetail.vue

<template>
  <d-layout class="dlayout">
    <d-header class="dheader">
      <div class="title">
        <h1>{{props.selectRow.component.libraryName || '--'}}</h1>
        <d-icon style="cursor: pointer" name="icon-close" @click="emit('close')"></d-icon>
      </div>
      <div class="sub-title">
        <span>安全漏洞：</span>
        <span class="val">{{props.selectRow.component.confidence || 'low'}}</span>
        <span class="split"></span>
        <span>许可证</span>
        <d-tag color="#3ac295" size="sm" class="ml-2">{{props.selectRow.component.licenseName || '--'}}</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>{{props.selectRow.component.libraryName || '--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="24" class="flex">
            <label style="flex: 0.2">关联漏洞编号</label>
            <p>{{props.selectRow.component.cveId || `cve-2025-${randomNum()}`}}</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>{{props.selectRow.component.currentVersion || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>最新版本</label>
            <p>{{props.selectRow.component.latestVersion || '--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>深度</label>
            <p>{{props.selectRow.component.depth || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>供应商</label>
            <p>{{props.selectRow.component.vendor || '--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>包管理器平台</label>
            <p>{{props.selectRow.component.platform || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>范围</label>
            <p>{{props.selectRow.component.scope || '--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>程序语言</label>
            <p>{{props.selectRow.component.language || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>活跃度</label>
            <p>{{props.selectRow.component.activityScore || '--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>下载量</label>
            <p>{{props.selectRow.component.downloadCount || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>识别方法</label>
            <p>{{props.selectRow.component.recogMethod || '--'}}</p>
          </d-col>
        </d-row>
        <d-row :gutter="10">
          <d-col :span="12" class="flex">
            <label>匹配度</label>
            <p>{{props.selectRow.component.matchingDegree || '--'}}</p>
          </d-col>
          <d-col :span="12" class="flex">
            <label>组件依赖关系</label>
            <p>{{props.selectRow.component.treeLevel || '--'}}</p>
          </d-col>
        </d-row>
<!--        <d-row :gutter="10">-->
<!--          <d-col :span="12" class="flex">-->
<!--            <label>生命周期终点/服务终止</label>-->
<!--            <p><d-tag type="danger" size="sm">已停止维护</d-tag></p>-->
<!--          </d-col>-->
<!--        </d-row>-->
      </div>
    </div>
  </d-layout>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue';
const props = defineProps(['selectRow']);
console.log(props.selectRow)
const emit = defineEmits(['close']);

// 生成随机数的方法
const randomNum = () => {
  return Math.floor(Math.random() * (99999 - 10000 + 1)) + 10000;
};
</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>