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

<template>
  <div class="version-info">
    <Card simple class="jyh-card mb-4">
      <div class="card-title">基本信息</div>
      <d-row class="mb-3">
        <d-col :span="8">
          <span class="card-key width-90">软件名称</span>
          <span class="card-val">vue</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">软件版本</span>
          <span class="card-val">3.5.13</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">主语言类型</span>
          <span class="card-val">JavaScript</span>
        </d-col>
      </d-row>
      <d-row>
        <d-col :span="8">
          <span class="card-key width-90">开发商</span>
          <span class="card-val">vue</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">发布时间</span>
          <span class="card-val">2023/08/05</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-90">版本描述</span>
          <span class="card-val">0583594425</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="8">
          <span class="card-key width-110">集成风险</span>
          <span class="card-val">低</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-110">代码量(KL)</span>
          <span class="card-val">10.259</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-110">漏洞数量</span>
          <a style="cursor: pointer" @click="handleTabChange('ldxx')" class="card-url">9</a>
        </d-col>
      </d-row>
      <d-row class="mb-3">
        <d-col :span="8">
          <span class="card-key width-110">社区EOL日期</span>
          <span class="card-val">2023/08/05</span>
        </d-col>
        <d-col :span="8">
          <span class="card-key width-110">所属领域/产业</span>
          <span class="card-val">CleanSource</span>
        </d-col>
<!--        <d-col :span="8">-->
<!--          <span class="card-key width-110">版本火车名称</span>-->
<!--          <span class="card-val">CleanSource V8.0</span>-->
<!--        </d-col>-->
      </d-row>
      <d-row class="mb-3">
        <d-col :span="24">
          <span class="card-key width-140">源码下载包地址</span>
          <a class="card-url" href="https://designcloud.uiplus.huawei.com/developer/main/index.html">https://designcloud.uiplus.huawei.com/developer/main/index.html</a>
        </d-col>
      </d-row>
      <d-row class="mb-3">
        <d-col :span="24">
          <span class="card-key width-140">源码社区托管地址</span>
          <a class="card-url" href="https://designcloud.uiplus.huawei.com/developer/main/index.html">https://designcloud.uiplus.huawei.com/developer/main/index.html</a>
        </d-col>
      </d-row>
      <d-row>
        <d-col :span="24">
          <span class="card-key width-140">社区EOL披露地址</span>
          <a class="card-url" href="https://designcloud.uiplus.huawei.com/developer/main/index.html">https://designcloud.uiplus.huawei.com/developer/main/index.html</a>
        </d-col>
      </d-row>
    </Card>


    <Card simple class="jyh-card mb-4">
      <div class="card-title">开源主License信息</div>
      <div class="mb-3">
        <d-table
          class="jyh-table jyh-table-2"
          :header-bg="true"
          :data="licenseTableData"
        >
          <d-column field="code" header="编号"></d-column>
          <d-column field="name" header="名称"></d-column>
          <d-column field="detail" header="描述"></d-column>
          <d-column field="detail" header="应用场景"></d-column>
        </d-table>
      </div>
<!--      <d-row>-->
<!--        <d-col :span="24">-->
<!--          <span class="card-key width-140">主License分析报告</span>-->
<!--          <a class="card-url" href="https://designcloud.uiplus.huawei.com/developer/main/index.html">https://designcloud.uiplus.huawei.com/developer/main/index.html</a>-->
<!--        </d-col>-->
<!--      </d-row>-->
    </Card>
    <Card simple class="jyh-card mb-4">
      <div class="card-title">Copyright报告</div>
      <div class="mb-3">
        <d-table
          class="jyh-table jyh-table-2"
          :header-bg="true"
          :data="CopyrightTableData"
        >
          <d-column field="code" header="Copyright报告"></d-column>
          <d-column field="detail" header="录入时间"></d-column>
        </d-table>
      </div>
      <d-row>
        <d-col :span="24">
          <span class="card-key width-140">主License分析报告</span>
          <a class="card-url" href="https://designcloud.uiplus.huawei.com/developer/main/index.html">https://designcloud.uiplus.huawei.com/developer/main/index.html</a>
        </d-col>
      </d-row>
    </Card>

    <Card simple class="jyh-card mb-4">
      <div class="card-title">实体</div>
      <div>
        <d-table
          class="jyh-table jyh-table-2"
          :header-bg="true"
          :data="CopyrightTableData"
        >
          <d-column field="code" header="类型"></d-column>
          <d-column field="code" header="实体包下载地址">
            <template #default="scope">
              <a>{{scope.row.code}}</a>
            </template>
          </d-column>
          <d-column field="detail" header="文件名称"></d-column>
          <d-column field="detail" header="录入时间"></d-column>
          <d-column field="detail" header="完整性结果">
            <template #default="scope">
              <a @click="visible=true">{{scope.row.detail}}</a>
            </template>
          </d-column>
        </d-table>
      </div>
    </Card>

    <Card simple class="jyh-card mb-4">
      <div class="card-title">网络安全</div>
      <d-row class="mb-3">
        <d-col :span="24">
          <span class="card-key width-160">软件评分</span>
          <span class="card-val">--</span>
        </d-col>
      </d-row>
      <d-row class="mb-3">
        <d-col :span="24">
          <span class="card-key width-160">社区安全问题求助渠道</span>
          <a class="card-url" href="https://designcloud.uiplus.huawei.com/developer/main/index.html">https://designcloud.uiplus.huawei.com/developer/main/index.html</a>
        </d-col>
      </d-row>
      <div class="mb-3 flex">
        <span class="card-key width-160">官网漏洞披露地址</span>
        <d-table
          style="display: contents"
          class="jyh-table jyh-table-2"
          :header-bg="true"
          :data="CopyrightTableData"
        >
          <d-column type="index" width="40"></d-column>
          <d-column field="code" header="url"></d-column>
        </d-table>
      </div>
      <div class="mb-3 flex">
        <span class="card-key width-160">外部漏洞源的软件名称</span>
        <d-table
          style="display: contents"
          class="jyh-table jyh-table-2"
          :header-bg="true"
          :data="CopyrightTableData"
        >
          <d-column field="code" header="厂商"></d-column>
          <d-column field="detail" header="软件名"></d-column>
          <d-column field="detail" header="来源"></d-column>
        </d-table>
      </div>
      <d-row class="mb-3">
        <d-col :span="24">
          <span class="card-key width-160">是否涉及用户登录</span>
          <span class="card-val">不涉及</span>
        </d-col>
      </d-row>
      <d-row>
        <d-col :span="24">
          <span class="card-key width-160">兼容性风险描述</span>
          <span class="card-val">否</span>
        </d-col>
      </d-row>
    </Card>

    <d-modal
      title="完整性结果详情"
      v-model="visible"
      class="file-search-modal"
      :style="{ width: '800px', height: '400px' }"
      @close="handleClose"
    >
      <Card simple class="jyh-card mb-4" style="box-shadow: none">
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区哈希类型</span>
            <span class="card-val">sha512</span>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区哈希值</span>
            <span class="card-val">23u4guj2i3hni32h2o34io234</span>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区签名校验结果</span>
            <span class="card-val">通过</span>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区签名</span>
            <span class="card-val">确认无社区签名</span>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区签名下载地址</span>
            <span class="card-val">确认无社区签名</span>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区公钥</span>
            <span class="card-val">确认无社区签名</span>
          </d-col>
        </d-row>
        <d-row class="mb-3">
          <d-col :span="24">
            <span class="card-key width-160">社区公钥下载地址</span>
            <span class="card-val">确认无社区签名</span>
          </d-col>
        </d-row>
      </Card>
    </d-modal>

  </div>
</template>

<script setup lang="ts">

import { ref,defineEmits } from 'vue';
import { useRouter } from 'vue-router';
import { discussDetailType, userInfoType } from '@/api/discussion/types';

const emits = defineEmits(['changeTabs']);

// 触发事件的方法
const handleTabChange = (tabName) => {
  emits('changeTabs', tabName); // 触发 changeTabs 事件，并传递参数
};

const licenseTableData = ref([{code: '05822156', name:'MIT License',detail: 'integer'}]);
const CopyrightTableData = ref([{code: '05822156',detail: 'integer'}]);
const visible = ref(false);


const router = useRouter();

// 跳转
const gotoDetail = (row) => {
  // 后续请换成params，暂时params传参没传过去
  router.push({
    path: 'repoDetail/' + row.version,
    params: { tab: 'ldxx' } // 指定需要激活的 Tab
  });
};

</script>

<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';


</style>