可信代码库-对外开放的iframe软件详情页开发

src/router/config/home.ts

@@ -119,7 +119,7 @@ export default [
           hasMobile: true,
           asideMenu: 'drawer' // 左侧菜单抽屉模式
         }
-      }
+      },
     ]
   },
   {
@@ -142,5 +142,19 @@ export default [
         }
       }
     ]
-  }
+  },
+
+  {
+    path: '/repoDetails/:versionId',
+    name: 'RepoDetails',
+    component: () => import('@/views/Jyh/Version/Detail/index2.vue'),
+    meta: {
+      title: '软件版本详情',
+      reportTitle: '软件版本详情页',
+      className: 'w-full min-w-full',
+      hiddenFooter: true,
+      hasMobile: true,
+      asideMenu: 'drawer' // 左侧菜单抽屉模式
+    }
+  },
 ];

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

@@ -0,0 +1,476 @@
+<template>
+  <div class="version-detail">
+    <div class="version-detail-header">
+      <div class="header-top">
+        <GAvatar style="margin-right: 12px" :src="avatarUrl" name="Vue" :width="40" :height="40"></GAvatar>
+        <div>
+          <div class="header-title1">{{ ReleaseInfo.basicInfo.softwareName || '--' }}</div>
+          <div class="header-div">
+            <span class="span1">版本：</span><span class="span2">{{ ReleaseInfo.basicInfo.softwareVersion || '--' }}</span>
+            <span class="split"></span>
+<!--            <span class="span1">生命周期状态：</span><span class="span2">{{ softwareData.lifecycle }}</span>-->
+<!--            <span class="split"></span>-->
+            <span class="span1">可信度评分：</span>
+
+            <d-popover :content="ReleaseInfo.basicInfo.trustScore || '&#45;&#45;'" trigger="hover" style="background-color: #7693f5; color: #fff">
+              <d-tag color="#ef4444">{{ '高度可信' || '--' }}</d-tag>
+            </d-popover>
+
+            <span class="split"></span>
+            <span class="span1">重要性评分：</span>
+            <d-popover :content="ReleaseInfo.basicInfo.securityScore || '&#45;&#45;'" trigger="hover" style="background-color: #7693f5; color: #fff">
+              <d-tag color="#ef4444">{{ '非常重要' || '--' }}</d-tag>
+            </d-popover>
+
+<!--            <span class="span2" style="-->
+<!--                                                    font-weight: bold;-->
+<!--                                                    color: #409EFF;-->
+<!--                                                    font-size: 16px;-->
+<!--                                                    text-decoration: underline;-->
+<!--                                                    cursor: pointer;-->
+<!--                                                  ">{{ ReleaseInfo.networkSecurity.softwareRating || ReleaseInfo.basicInfo.securityScore || '&#45;&#45;' }}</span>-->
+            <span class="split"></span>
+            <span class="span1">集成风险：</span>
+            <d-tag :color="jcfxList[ReleaseInfo.referenceInfo.integrationRisk].color">{{ ReleaseInfo.referenceInfo.integrationRisk || jcfxList[ReleaseInfo.basicInfo.integrationRiskLevel].text || '--' }}</d-tag>
+<!--            <d-tag color="#F6933B">{{ ReleaseInfo.referenceInfo.integrationRisk || '&#45;&#45;' }}</d-tag>-->
+          </div>
+        </div>
+        <div class="fr">
+          <d-button v-if="!isSub" class="mr-2" variant="solid" @click="openSubscription">订阅</d-button>
+          <d-button v-else class="mr-2" variant="solid" disabled>已订阅</d-button>
+          <d-modal class="subscribe-modal" style="width: auto;" v-model="subscribeModalVisable" title="订阅漏洞预警通知">
+            <template #header>
+              <div class="subscribe-header">
+                <d-icon name="icon-info-o" color="var(--devui-info)" size="18px"></d-icon>
+                <span>订阅漏洞预警通知</span>
+              </div>
+            </template>
+            <SubscriptionModal @closeSub="isSub = true;" @close="colseSubscription" :softwareData="{id: softwareId}"></SubscriptionModal>
+          </d-modal>
+        </div>
+      </div>
+      <d-tabs class="jyh-tabs jyh-tabs-2" type="wrapped" v-model="selectTab">
+        <d-tab id="bbxx" title="版本信息"></d-tab>
+        <d-tab id="SBOM" title="SBOM"></d-tab>
+        <d-tab id="ldxx" title="漏洞信息"></d-tab>
+        <d-tab id="Malware" title="恶意代码信息" />
+        <d-tab id="ai" title="AI修复建议"></d-tab>
+        <d-tab id="licenseInfo" title="许可证信息"></d-tab>
+        <d-tab id="communityInfo" title="开发者社区信息"></d-tab>
+<!--        <d-tab id="codeQuality" title="代码质量检测"></d-tab>-->
+<!--        <d-tab id="DeepDetectionAnalysis" title="深度检测分析" />-->
+      </d-tabs>
+    </div>
+    <div class="version-detail-content">
+      <version-info :ReleaseInfo="ReleaseInfo" v-if="selectTab === 'bbxx'" @changeTabs="changeTabs"></version-info>
+      <vulnerabilities-list :versionId="versionId" v-else-if="selectTab === 'ldxx'"></vulnerabilities-list>
+      <community-info :versionId="versionId" :ReleaseInfo="ReleaseInfo"  v-else-if="selectTab === 'communityInfo'"></community-info>
+      <Dependence :versionId="versionId" v-else-if="selectTab === 'ylgx'"></Dependence>
+      <SBOM :versionId="versionId" v-else-if="selectTab === 'SBOM'" />
+      <AIRepair :versionId="versionId" v-else-if="selectTab === 'ai'"></AIRepair>
+      <LicenseInfo :versionId="versionId" v-else-if="selectTab === 'licenseInfo'"></LicenseInfo>
+      <Malware :versionId="versionId" v-else-if="selectTab === 'Malware'" />
+<!--      <CodeQuality :versionId="versionId" v-else-if="selectTab === 'codeQuality'" />-->
+<!--      <DeepDetectionAnalysis :versionId="versionId" v-else-if="selectTab === 'DeepDetectionAnalysis'" />-->
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted,computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+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';
+import Dependence from './Dependency.vue'
+import Malware from "@/views/Jyh/Version/Detail/Malware/Malware.vue";
+import CodeQuality from "@/views/Jyh/Version/Detail/CodeQuality/index.vue";
+import DeepDetectionAnalysis from "@/views/Jyh/Version/Detail/DeepDetectionAnalysis/index.vue";
+const { namespace } = getOrgInfo();
+const route = useRoute(); // 获取路由对象
+const avatarUrl = '/src/assets/imgs/jyh/工程首字母图标.png';
+import SubscriptionModal from '@/views/Jyh/Version/Detail/SubscriptionModal.vue';
+import { alertIsSubscribe, releaseInfo, releasePage } from '@/api/jyh';
+
+const selectTab = ref('bbxx');
+const softwareId = ref();
+// 删除弹窗
+const item = ref('');
+const deleteModal = ref();
+const deletevModels = ref(false);
+const isSub = ref(false);
+const ReleaseInfo = ref({
+  basicInfo: {},
+  copyRightReportList: [],
+  entityList: [],
+  networkSecurity: {},
+  openSourceLicenseList: [],
+  referenceInfo: {},
+});
+const versionId = route.params.versionId; // 获取路由参数 versionId
+
+const jcfxList = {
+  '0': { text: '', color: '#ef4444' }, // 红色
+  '1': { text: '低', color: '#F6933B' }, // 橙色
+  '2': { text: '中', color: '#eab308' }, // 黄色
+  '3': { text: '高', color: '#10b981' },  // 绿色
+  '低': { text: '低', color: '#F6933B' }, // 橙色
+  '中': { text: '中', color: '#eab308' }, // 黄色
+  '高': { text: '高', color: '#10b981' }  // 绿色
+}
+
+// 定义评分范围和对应的显示配置
+const scoreRanges = [
+  { min: 0, max: 59, color: '#F6933B', text: '低', description: '0-59分，可信度较低' },
+  { min: 60, max: 84, color: '#eab308', text: '中', description: '60-84分，可信度中等' },
+  { min: 85, max: 100, color: '#10b981', text: '高', description: '85-100分，可信度高' }
+];
+
+// // 根据评分获取标签颜色
+// const getTrustScoreColor = computed(() => {
+//   const score = ReleaseInfo.value.basicInfo.trustScore;
+//   if (!score) return '#909399'; // 未评分时的默认颜色
+//
+//   const range = scoreRanges.find(range => score >= range.min && score <= range.max);
+//   return range ? range.color : '#909399';
+// });
+//
+// // 根据评分获取标签文本
+// const getTrustScoreText = computed(() => {
+//   const score = ReleaseInfo.value.basicInfo.trustScore;
+//   if (!score) return '--';
+//
+//   const range = scoreRanges.find(range => score >= range.min && score <= range.max);
+//   return range ? range.text : '--';
+// });
+
+const getReleaseInfo = async(versionId) => {
+  const { data, error } = await releaseInfo({ softwareId: versionId });
+  debugger
+  if (!error && data) {
+    ReleaseInfo.value = data.data;
+  }
+};
+
+const getAlertIsSubscribe = async(versionId) => {
+  const { data, error } = await alertIsSubscribe({ softwareId: versionId });
+  if (!error) {
+    if (data.data) {
+      isSub.value = data.data.data
+    } else {
+      isSub.value = false;
+    }
+  }
+};
+
+const getReleaseList = async (softwareName) => {
+  const { data, error } = await releasePage({
+    softwareName: '',
+    searchType: '',
+    softwareVersion: '',
+    programmingLanguage: '',
+    interestTag: '',
+    industry: '',
+    licenseName: '',
+    dependentSoftware: '',
+    releaseDateStart: '',
+    releaseDateEnd: '',
+    current: 1,
+    size: 10
+  });
+  if (!error && data) {
+    if(data.data.records&&data.data.records.length>0) {
+      return data.data.records[0]
+    }
+
+    // allTableData.value = data.data.records;
+  }
+};
+
+const init = async () => {
+  const versionName = route.params.versionId; // 获取路由参数 versionId
+  const { id:versionId=null } = await getReleaseList(versionName);
+  softwareId.value = versionId;
+  if (versionId) {
+    await getReleaseInfo(versionId); // 调用接口获取数据
+    await getAlertIsSubscribe(versionId); // 调用接口获取数据
+  }
+};
+
+onMounted(() => {
+  debugger
+  init()
+});
+
+// 监听路由的 query.tab 变化
+watch(
+  () => route.query.tab,
+  (newTab) => {
+    if (newTab) {
+      selectTab.value = newTab; // 根据 query 参数激活 Tab
+    }
+  },
+  { immediate: true } // 立即执行一次
+);
+
+const changeTabs = (tab:string) => {
+  selectTab.value = tab;
+}
+
+const openDelete = (row: any) => {
+  item.value = row;
+  deleteModal.value.showFlag = true;
+  deletevModels.value = true;
+};
+
+const router = useRouter();
+
+// 分页
+const changeIndex = () => {
+  // getGroupClaListData();
+};
+
+const changeSize = () => {
+  pager.value.pageIndex = 1;
+  // getGroupClaListData();
+};
+
+const repoFun = (arr: any) => {
+  return arr ? (arr.length > 3 ? arr.slice(0, 3) : arr) : [];
+};
+
+// 编辑
+const editRow = (row: any) => {
+  // 后续请换成params，暂时params传参没传过去
+  router.push({
+    path: 'cla/edit/' + row.object_id,
+    query: { cla: row.cla, pageType: 'edit' }
+  });
+};
+
+// 确认删除
+const confirmDelete = async (e: any) => {
+  // const res = await reqCatch(deleteGroupCla, { group_id: namespace.value, cla_id: item.value.object_id });
+  // if (!res.error) {
+  //   getGroupClaListData();
+  // }
+};
+
+// 去成员页
+const goMember = (row: any) => {
+  // 后续请换成params，暂时params传参没传过去,注意路由有个:claID
+  router.push({
+    path: 'cla/claId/member',
+    query: { claId: row.object_id, claName: row.cla_name, group_path: namespace.value, pageType: 'edit' }
+  });
+};
+const getGroupClaListData = async () => {
+  // const params = {
+  //   group_id: namespace.value,
+  //   page: pager.value.pageIndex,
+  //   per_page: pager.value.pageSize
+  // };
+  // const res = await reqCatch(getGroupClaList, params);
+  // if (!res.error) {
+  //   tableData.value = res?.data?.data?.content;
+  //   pager.value.total = res.data.data.total;
+  // }
+};
+getGroupClaListData();
+
+const setClaStatus = async (row: any) => {
+  // const params = {
+  //   group_id: namespace.value,
+  //   cla_id: row.object_id,
+  //   status: row.status
+  // };
+  // const res = await reqCatch(setGroupClaStatus, params);
+  // if (!res.error) {
+  //   Message.success('操作成功!');
+  //   getGroupClaListData();
+  // }
+};
+
+const signCla = (row: any) => {
+  router.push('/cla/' + row.object_id);
+};
+
+const subscribeModalVisable = ref(false);
+const openSubscription = () => {
+  subscribeModalVisable.value = true;
+};
+const colseSubscription = () => {
+  subscribeModalVisable.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+.version-detail {
+  position: relative;
+
+  .secret-op {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+.split {
+  height: 60%;
+  background-color: #ddd;
+}
+.error {
+  color: $devui-contrast;
+}
+
+:deep(.devui-table__row td) {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+:deep(.devui-tag .devui-tag--default) {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 16px;
+  margin-right: 8px;
+  border: 1px solid #e3e3ee;
+}
+
+.one-line {
+  word-break: break-all;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 400;
+  color: #9a9b9c;
+  line-height: 20px;
+}
+
+.cur-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #2d2d2e;
+  line-height: 20px;
+}
+
+.search-form {
+  position: relative;
+  padding: 12px 20px 12px 0;
+  border-radius: 8px 0px 8px 8px;
+  background: #f2f5fc;
+
+  .output-btn {
+    position: absolute;
+    right: 28px;
+    bottom: 4px;
+    color: #191919;
+    font-family: HarmonyOS Sans SC;
+    font-weight: regular;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+  }
+}
+
+.secret-breadcrumb {
+  padding: 7px 20px 12px;
+  background: #ffffff;
+}
+
+.version-detail-header {
+  background: #ffffff;
+  padding: 0 12%;
+  width: 100%;
+  //box-shadow: inset 0px -1px 0px 0px #EEF0F5;
+  .header-top {
+    display: flex;
+    width: 100%;
+  }
+  .header-title1 {
+    color: #191919;
+    font-family: HarmonyOS Sans;
+    font-weight: bold;
+    font-size: 18px;
+    line-height: 26px;
+    letter-spacing: 0px;
+    text-align: left;
+    margin-bottom: 4px;
+  }
+  .header-div {
+    display: flex;
+    align-items: center;
+    height: 20px;
+    margin-bottom: 12px;
+    .span1 {
+      color: #808080;
+      font-family: HarmonyOS Sans SC;
+      font-weight: regular;
+      font-size: 12px;
+      line-height: 20px;
+      letter-spacing: 0px;
+      text-align: left;
+    }
+    .span2 {
+      color: #191919;
+      font-family: HarmonyOS Sans;
+      font-weight: regular;
+      font-size: 12px;
+      line-height: 20px;
+      letter-spacing: 0px;
+      text-align: left;
+    }
+
+    ::v-deep .devui-tag {
+      .devui-tag--md {
+        color: #f6933b;
+        font-family: HarmonyOS Sans SC;
+        font-weight: regular;
+        font-size: 12px;
+        line-height: 20px;
+        letter-spacing: 0px;
+        text-align: left;
+        height: 20px;
+      }
+    }
+  }
+}
+
+.version-detail-content {
+  padding: 0 12%;
+  width: 100%;
+  margin-top: 12px;
+}
+
+.subscribe-modal {
+  width: auto;
+
+  .subscribe-header {
+    display: flex;
+    align-items: center;
+    padding: 20px 20px 0;
+    >span {
+      margin-left: 8px;
+      color: #191919;
+      font-family: HarmonyOS Sans SC;
+      font-weight: medium;
+      font-size: 18px;
+      line-height: 26px;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+</style>