可信代码库-软件列表软件详情可信度评分展示修改

2025-07-05 15:49:34 +08:00
parent fda8f3abef
commit a22d909b3a
3 changed files with 69 additions and 15 deletions
--- a/src/components/LoginModal/index.vue
+++ b/src/components/LoginModal/index.vue
@@ -784,6 +784,7 @@ onUnmounted(() => {
    :class="['login-modal', formType === 'login' ? 'login-modal-l' : 'login-modal-r']"
  >
    <template #default>
+      <div class="header-h1">国家可信开源代码库</div>
      <iframe :src="`https://gitcode.com/${formType || 'login'}/?be_nested=1`"></iframe>
    </template>
  </Modal>
@@ -794,6 +795,22 @@ $active-title: var(--color-CG900);
 $active-color: var(--color-CG800);
 $inactive-title: var(--color-CG500);
 $active-panel: var(--color-G800);
+.header-h1 {
+  color: #252b3a;
+  letter-spacing: 0.5px;
+  line-height: 24px;
+  font-weight: 700;
+  font-size: 26px;
+  text-align: center;
+  margin-top: 24px;
+  *, :before, :after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: #e5e7eb;
+  }
+}
+
 .login-modal-l iframe {
  border: 0;
  width: 100%;
--- a/src/views/Jyh/Search/Components/OssQuery.vue
+++ b/src/views/Jyh/Search/Components/OssQuery.vue
@@ -109,7 +109,7 @@

        <!-- 动态渲染列 -->
        <template v-for="column in columns" :key="column.key">
-          <d-column v-if="column.visible" :field="column.key" :header="column.label"  :width="column.width||120" show-overflow-tooltip>
+          <d-column v-if="column.visible" :field="column.key" :header="column.label"  :width="column.width||120" :show-overflow-tooltip="!column.tooltip">
            <!-- 自定义列内容 -->
            <template #default="scope">
              <template v-if="column.key === 'softwareName'">
@@ -129,6 +129,11 @@
                  font-size: 16px;
                ">{{ scope.row.securityScore }}</a>
              </template>
+              <template v-else-if="column.key === 'trustScore'">
+                <d-popover :content="scope.row.trustScore || '&#45;&#45;'" trigger="hover" style="background-color: #7693f5; color: #fff">
+                  <d-tag color="#ef4444">{{ '非常重要' || '--' }}</d-tag>
+                </d-popover>
+              </template>
              <template v-else-if="column.key === 'releaseDate'">
                <span>{{ formatTime(scope.row.releaseDate, 'YYYY-MM-DD') }}</span>
              </template>
@@ -298,7 +303,7 @@ const openDelete = (row: any) => {
 const defultColumns = ref([
  { key: 'softwareName', label: '软件名称', visible: true, filterable: true, sortable: false },
  { key: 'softwareVersion', label: '软件版本', visible: true, filterable: true, sortable: false },
-  { key: 'trustScore', label: '软件可信评分', visible: false, filterable: false, sortable: true },
+  { key: 'trustScore', label: '软件可信评分', visible: false, filterable: false, sortable: true, tooltip: true },
  { key: 'securityScore', label: '软件重要性评分', visible: true, filterable: false, sortable: true },
  { key: 'licenseNum', label: 'License数量', visible: true, filterable: false, sortable: false,width: 140 },
  { key: 'industryCategory', label: '行业类型', visible: true, filterable: true, sortable: false },
@@ -329,7 +334,7 @@ const defultColumns = ref([
 const columns = ref([
  { key: 'softwareName', label: '软件名称', visible: true, filterable: true, sortable: false },
  { key: 'softwareVersion', label: '软件版本', visible: true, filterable: true, sortable: false },
-  { key: 'trustScore', label: '软件可信评分', visible: false, filterable: false, sortable: true },
+  { key: 'trustScore', label: '软件可信评分', visible: false, filterable: false, sortable: true, tooltip: true },
  { key: 'securityScore', label: '软件重要性评分', visible: true, filterable: false, sortable: true },
  { key: 'licenseNum', label: 'License数量', visible: true, filterable: false, sortable: false,width: 140 },
  { key: 'industryCategory', label: '行业类型', visible: true, filterable: true, sortable: false },
--- a/src/views/Jyh/Version/Detail/index.vue
+++ b/src/views/Jyh/Version/Detail/index.vue
@@ -15,15 +15,12 @@
            <span class="split"></span>
 <!--            <span class="span1">生命周期状态：</span><span class="span2">{{ softwareData.lifecycle }}</span>-->
 <!--            <span class="split"></span>-->
-            <span class="span1">可信度评分：</span><span class="span2"
-                                                  style="
-                                                    font-weight: bold;
-                                                    color: #409EFF;
-                                                    font-size: 16px;
-                                                    text-decoration: underline;
-                                                    cursor: pointer;
-                                                  "
-          >{{ ReleaseInfo.basicInfo.trustScore || '&#45;&#45;' }}</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><span class="span2"
                                                  style="
@@ -36,7 +33,7 @@
          >{{ ReleaseInfo.networkSecurity.softwareRating || ReleaseInfo.basicInfo.securityScore || '&#45;&#45;' }}</span>
            <span class="split"></span>
            <span class="span1">集成风险：</span>
-            <d-tag color="#F6933B">{{ ReleaseInfo.referenceInfo.integrationRisk || jcfxList[ReleaseInfo.basicInfo.integrationRiskLevel] || '--' }}</d-tag>
+            <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>
@@ -82,7 +79,7 @@
 </template>

 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from 'vue';
+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';
@@ -117,10 +114,45 @@ const ReleaseInfo = ref({
  referenceInfo: {},
 });
 const versionId = route.params.versionId; // 获取路由参数 versionId
-const jcfxList = ['','低','中','高'];
+
+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;
  }