From 4fed383b9c4acdaa713b5d42cff81e8ba20e3203 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: Thu, 13 Mar 2025 19:38:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=BC=8F=E6=B4=9E=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/config/home.ts                     |  20 ++
 .../RepoDetail/VulnerabilitiesList/index.vue  | 309 ++++++++++++++++++
 src/views/RepoDetail/index.vue                | 111 +++++++
 3 files changed, 440 insertions(+)
 create mode 100644 src/views/RepoDetail/VulnerabilitiesList/index.vue
 create mode 100644 src/views/RepoDetail/index.vue

diff --git a/src/router/config/home.ts b/src/router/config/home.ts
index acfeda3..9a3a9a9 100644
--- a/src/router/config/home.ts
+++ b/src/router/config/home.ts
@@ -27,6 +27,26 @@ export default [
           headerClassName: ''
         }
       },
+      {
+        path: 'repoDetail',
+        component: () => import('@/views/RepoDetail/index.vue'),
+        redirect: '/repoDetail/vulnerabilitiesList',
+        children: [
+          {
+            path: 'vulnerabilitiesList',
+            name: 'vulnerabilitiesList',
+            component: () => import('@/views/RepoDetail/VulnerabilitiesList/index.vue'),
+            meta: {
+              hasMobile: true,
+              hiddenFooter: true,
+              title: '漏洞信息',
+              reportTitle: '漏洞信息',
+              className: 'w-full min-w-full',
+              asideMenu: 'drawer'
+            }
+          }
+        ]
+      },
       {
         path: 'search/license',
         name: 'SearchLicense',
diff --git a/src/views/RepoDetail/VulnerabilitiesList/index.vue b/src/views/RepoDetail/VulnerabilitiesList/index.vue
new file mode 100644
index 0000000..c2c8437
--- /dev/null
+++ b/src/views/RepoDetail/VulnerabilitiesList/index.vue
@@ -0,0 +1,309 @@
+<template>
+  <div class="soft-detail-container">
+    <div class="mt-3">
+      <d-table class="jyh-table" v-if="tableData.length" :striped="false" :data="tableData" table-layout="auto">
+        <d-column type="index" width="40"></d-column>
+        <d-column
+          field="versionName"
+          header="编码"
+          filterable
+          :filter-list="filterList"
+          @filter-change="handleFilterChange"
+        >
+          <template #default="scope">
+            <a>{{ scope.row.versionName }}</a>
+          </template>
+        </d-column>
+        <d-column
+          field="name"
+          header="CVE ID"
+          filterable
+          :filter-list="filterList"
+          @filter-change="handleFilterChange"
+        ></d-column>
+        <d-column
+          field="code"
+          header="CVSS 打分"
+          filterable
+          :filter-list="filterList"
+          @filter-change="handleFilterChange"
+        ></d-column>
+        <d-column
+          field="version"
+          header="修补状态"
+          filterable
+          :filter-list="filterList"
+          @filter-change="handleFilterChange"
+        >
+          <template #default="scope">
+            <a>{{ scope.row.version }}</a>
+          </template>
+        </d-column>
+        <d-column
+          field="versionCode"
+          header="漏洞级别"
+          sortable
+          :sort-method="sortNameMethod"
+          filterable
+          :filter-list="filterList"
+          @filter-change="handleFilterChange"
+        >
+          <template #default="scope">
+            <a>{{ scope.row.versionCode }}</a>
+          </template>
+        </d-column>
+        <d-column
+          field="versionCode"
+          header="补丁版本"
+          sortable
+          :sort-method="sortNameMethod"
+          filterable
+          :filter-list="filterList"
+          @filter-change="handleFilterChange"
+        >
+          <template #default="scope">
+            <a>{{ scope.row.versionCode }}</a>
+          </template>
+        </d-column>
+        <d-column field="created" header="补丁修复时间"></d-column>
+      </d-table>
+
+      <DataPanel v-else skeleton :card="false" :empty="true"> </DataPanel>
+    </div>
+
+    <div class="mt-20 mb-20 flex justify-end">
+      <d-pagination
+        size="md"
+        :page-size-options="[10, 20, 50]"
+        :total="pager.total"
+        v-model:pageSize="pager.pageSize"
+        v-model:pageIndex="pager.pageIndex"
+        :max-items="5"
+        :can-change-page-size="true"
+        :can-view-total="true"
+        total-item-text="总计"
+        @page-index-change="changeIndex()"
+        @page-size-change="changeSize()"
+      />
+    </div>
+
+    <!-- 删除组件 -->
+    <GModal
+      v-model="deletevModels"
+      ref="deleteModal"
+      title="删除?"
+      @confirm="confirmDelete"
+      showWarnIcon
+      confirmColor="danger"
+    >
+      <span class="inline-block text-G900 text-sm font-normal leading-[20px] break-all"
+        >你确认删除此项：{{ item.cla_name }} ？</span
+      >
+    </GModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SettingTitle from '@/components/Setting/SettingTitle/index.vue';
+import SettingText from '@/components/Setting/SettingText/index.vue';
+import { ref, reactive } from 'vue';
+import { getGroupClaList, setGroupClaStatus, deleteGroupCla } from '@/api/cla';
+import { useRouter, useRoute } from 'vue-router';
+import { GModal } from '@/components/Setting/index';
+import { reqCatch } from '@/utils/catch';
+import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
+import { Message } from 'vue-devui';
+const { namespace } = getOrgInfo();
+
+const tableData = ref([
+  {
+    versionName: 'HWPSIRT-2022-29348',
+    version: '未修复',
+    code: '7.8 (CVSS3.1)',
+    name: 'CVE-2013-0293',
+    type: '客户指定预装软件（原预装软件）',
+    risk: '中',
+    useType: '软件',
+    versionCode: '2.29.0',
+    key: '',
+    created: '2025-03-10 17:25:19',
+    updated: '2025-03-10 17:25:19'
+  }
+]);
+const formData = ref({
+  title: '',
+  type: '',
+  useType: '',
+  formData: '',
+  select: '',
+  time1: null,
+  name: '',
+  versionCode: '',
+  pulishTime: ''
+});
+const typeOptions = reactive(['主软件', '依赖软件']);
+const riskOptions = reactive(['低', '中', '高']);
+const useTypeOptions = reactive(['软件', '文档', '文档+软件']);
+const isUseOptions = reactive(['是', '否']);
+
+const pager = ref({
+  total: 10,
+  pageIndex: 1,
+  pageSize: 10
+});
+
+// 删除弹窗
+const item = ref('');
+const deleteModal = ref();
+const deletevModels = ref(false);
+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);
+};
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+.soft-detail-container {
+  padding: 7px 20px 12px;
+}
+
+.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;
+}
+</style>
diff --git a/src/views/RepoDetail/index.vue b/src/views/RepoDetail/index.vue
new file mode 100644
index 0000000..5f2d72f
--- /dev/null
+++ b/src/views/RepoDetail/index.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="secret-container">
+    <d-breadcrumb class="secret-breadcrumb">
+      <gc-breadcrumb-item :to="{ name: 'home' }"><span class="title">首页</span></gc-breadcrumb-item>
+      <gc-breadcrumb-item><span class="cur-title">软件商城-软件版本列表</span></gc-breadcrumb-item>
+    </d-breadcrumb>
+    <div class="soft-detail-header">
+      <div class="soft-detail-left">
+        <img src="https://vue-devui.github.io/assets/logo.svg" alt="" class="soft-detail-img flex-shrink-0" />
+        <div class="soft-detail-title">
+          <h2>vue</h2>
+          <div class="info-items">
+            <p>
+              <span class="label">版本：</span>
+              <span class="value">3.5.13</span>
+            </p>
+            <p>
+              <span class="label">生命周期状态：</span>
+              <span class="value">选中型</span>
+            </p>
+            <p>
+              <span class="label">集成风险：</span>
+              <span class="value"><d-tag color="#F6933B" type="small">低风险</d-tag></span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <d-button class="flex-shrink-0" variant="solid">订阅</d-button>
+    </div>
+    <d-tabs class="jyh-tabs" type="wrapped" v-model="selectTab">
+      <d-tab id="1" title="版本信息"> </d-tab>
+      <d-tab id="2" title="依赖关系"> </d-tab>
+      <d-tab id="vulnerabilitiesList" title="漏洞信息"> </d-tab>
+      <d-tab id="4" title="SBOM"> </d-tab>
+      <d-tab id="5" title="许可证信息"> </d-tab>
+      <d-tab id="6" title="开发者社区信息"> </d-tab>
+      <d-tab id="7" title="AI修复建议"> </d-tab>
+    </d-tabs>
+    <RouterView />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+
+const route = useRoute();
+
+const selectTab = ref('');
+
+watch(
+  () => route.name,
+  (newValue) => {
+    selectTab.value = String(newValue);
+  },
+  { immediate: true }
+);
+</script>
+
+<style scoped lang="scss">
+.soft-detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  .soft-detail-left {
+    display: flex;
+    align-items: center;
+    .soft-detail-img {
+      flex-shrink: 0;
+      width: 40px;
+      height: 40px;
+      border-radius: 2.67px;
+      border: 0.67px solid #dfeeec;
+      margin-right: 12px;
+    }
+    .soft-detail-title {
+      h2 {
+        font-weight: bold;
+        font-size: 18px;
+        color: #191919;
+      }
+      .info-items {
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        p {
+          padding: 0 12px;
+          border-right: 1px solid #e3e3ee;
+          &:last-child {
+            border: 0;
+          }
+          &:first-child {
+            padding-left: 0;
+          }
+        }
+        .label {
+          color: #808080;
+        }
+        .value {
+          color: #191919;
+        }
+      }
+    }
+  }
+}
+.secret-breadcrumb,
+.soft-detail-header {
+  padding: 7px 20px 12px;
+  background: #ffffff;
+}
+</style>