From 86b06f1f08d1b323107d63e2e0370714fc6a0746 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=98=E6=B0=91=E5=BA=B7?= <m18571841023@163.com>
Date: Thu, 13 Mar 2025 18:41:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E4=BF=A1=E4=BB=A3=E7=A0=81=E5=BA=93-?=
 =?UTF-8?q?=E8=BD=AF=E4=BB=B6=E8=AF=A6=E6=83=85=E7=89=88=E6=9C=AC=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/jyh.scss                      |  87 ++++++
 src/assets/imgs/jyh/工程首字母图标.png       | Bin 0 -> 3995 bytes
 src/router/config/home.ts                    |  15 +-
 src/views/Jyh/Version/Detail/VersionInfo.vue | 175 ++++++++++++
 src/views/Jyh/Version/Detail/index.vue       | 274 +++++++++++++++++++
 5 files changed, 550 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/imgs/jyh/工程首字母图标.png
 create mode 100644 src/views/Jyh/Version/Detail/VersionInfo.vue
 create mode 100644 src/views/Jyh/Version/Detail/index.vue

diff --git a/src/assets/css/jyh.scss b/src/assets/css/jyh.scss
index 28fa572..29a4f8d 100644
--- a/src/assets/css/jyh.scss
+++ b/src/assets/css/jyh.scss
@@ -62,6 +62,12 @@
   }
 }
 
+.jyh-table-2 {
+  .devui-table__tbody tr {
+    border-bottom: 1px solid #e5e7eb;
+  }
+}
+
 .jyh-tabs {
   .devui-tabs__nav {
     border-bottom: 0;
@@ -100,6 +106,12 @@
   }
 }
 
+.jyh-tabs-2 {
+  .devui-tab__content {
+    padding: 0;
+  }
+}
+
 .jyh-checkbox-group {
   div {
     margin-top: 0;
@@ -145,3 +157,78 @@
 .jyh-select-multiple {
 
 }
+
+.split {
+  display: inline-block;
+  margin: 0 12px;
+  width: 1px;
+  height: 100%;
+  background-color: #3c3f41;
+}
+
+.fr {
+  flex: 1;
+  text-align: right;
+}
+
+.width-70 {
+  display: inline-block;
+  width: 90px;
+}
+
+.width-90 {
+  display: inline-block;
+  width: 90px;
+}
+.width-110 {
+  display: inline-block;
+  width: 110px;
+}.width-140 {
+  display: inline-block;
+  width: 140px;
+}.width-160 {
+  display: inline-block;
+  width: 160px;
+}
+
+.jyh-card {
+  padding: 16px 20px;
+  .card-title {
+    color: #252B3A;
+    font-family: HarmonyOS Sans SC;
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+    margin-bottom: 16px;
+  }
+
+  .card-key {
+    color: #595959;
+    font-family: HarmonyOS Sans SC;
+    font-weight: regular;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+  }
+  .card-val {
+    color: #191919;
+    font-family: HarmonyOS Sans;
+    font-weight: regular;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+  }
+  .card-url {
+    color: #5E7CE0;
+    font-family: HarmonyOS Sans;
+    font-weight: regular;
+    font-size: 14px;
+    line-height: 22px;
+    letter-spacing: 0px;
+    text-align: left;
+  }
+}
diff --git a/src/assets/imgs/jyh/工程首字母图标.png b/src/assets/imgs/jyh/工程首字母图标.png
new file mode 100644
index 0000000000000000000000000000000000000000..1841c88a9b393e43e4f3710f93dcfb0c84531255
GIT binary patch
literal 3995
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
Bz7PNa

literal 0
HcmV?d00001

diff --git a/src/router/config/home.ts b/src/router/config/home.ts
index acfeda3..c200127 100644
--- a/src/router/config/home.ts
+++ b/src/router/config/home.ts
@@ -41,7 +41,7 @@ export default [
         }
       },
       {
-        path: 'search',
+        path: 'repoList',
         name: 'Search',
         component: () => import('@/views/Jyh/Search/index.vue'),
         meta: {
@@ -53,6 +53,19 @@ export default [
           asideMenu: 'drawer' // 左侧菜单抽屉模式
         }
       },
+      {
+        path: 'repoDetail/basicInfo/:versionId',
+        name: 'VersionDetail',
+        component: () => import('@/views/Jyh/Version/Detail/index.vue'),
+        meta: {
+          title: '软件版本详情',
+          reportTitle: '软件版本详情页',
+          className: 'w-full min-w-full',
+          hiddenFooter: true,
+          hasMobile: true,
+          asideMenu: 'drawer' // 左侧菜单抽屉模式
+        }
+      },
       {
         path: 'explore',
         name: 'explore',
diff --git a/src/views/Jyh/Version/Detail/VersionInfo.vue b/src/views/Jyh/Version/Detail/VersionInfo.vue
new file mode 100644
index 0000000..5eb7719
--- /dev/null
+++ b/src/views/Jyh/Version/Detail/VersionInfo.vue
@@ -0,0 +1,175 @@
+<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">0583594425</span>
+        </d-col>
+      </d-row>
+      <d-row>
+        <d-col :span="8">
+          <span class="card-key width-90">软件编码</span>
+          <span class="card-val">2023/08/05810TCX</span>
+        </d-col>
+        <d-col :span="8">
+          <span class="card-key width-90">主语言类型</span>
+          <span class="card-val">JavaScript</span>
+        </d-col>
+        <d-col :span="8">
+          <span class="card-key width-90">开发商</span>
+          <span class="card-val">vue</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="24">
+          <span class="card-key width-110">官网地址</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="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>
+          <span class="card-val">--</span>
+        </d-col>
+      </d-row>
+      <d-row>
+        <d-col :span="8">
+          <span class="card-key width-110">选型时间</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>
+    </Card>
+
+
+    <Card simple class="jyh-card mb-4">
+      <div class="card-title">开源主License信息</div>
+      <div class="mb-3">
+        <d-table
+          class="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-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-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>
+      <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-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-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">是否安卓类APP组件</span>
+          <span class="card-val">否</span>
+        </d-col>
+      </d-row>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import { ref } from 'vue';
+
+const licenseTableData = ref([{code: '05822156', name:'MIT License',detail: 'integer'}]);
+const CopyrightTableData = ref([{code: '05822156',detail: 'integer'}]);
+
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+
+</style>
diff --git a/src/views/Jyh/Version/Detail/index.vue b/src/views/Jyh/Version/Detail/index.vue
new file mode 100644
index 0000000..5ae3fae
--- /dev/null
+++ b/src/views/Jyh/Version/Detail/index.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="version-detail">
+    <d-breadcrumb class="secret-breadcrumb">
+      <gc-breadcrumb-item :to="{ name: 'home' }"
+      ><span class="title">首页</span></gc-breadcrumb-item>
+      <gc-breadcrumb-item  :to="{ name: 'Search' }"><span class="title">软件商城-软件版本列表</span></gc-breadcrumb-item>
+      <gc-breadcrumb-item><span class="cur-title">软件商城-软件版本详情</span></gc-breadcrumb-item>
+    </d-breadcrumb>
+    <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">vue</div>
+          <div class="header-div">
+            <span class="span1">版本：</span><span class="span2">3.5.13</span>
+            <span class="split"></span>
+            <span class="span1">生命周期状态：</span><span class="span2">选型中</span>
+            <span class="split"></span>
+            <span class="span1">集成风险：</span>
+            <d-tag color="#F6933B">低风险</d-tag>
+          </div>
+        </div>
+        <div class="fr">
+          <d-button class="mr-2" variant="solid">订阅</d-button>
+        </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="ylgx" title="依赖关系"></d-tab>
+        <d-tab id="ldxx" title="漏洞信息"></d-tab>
+      </d-tabs>
+    </div>
+    <div class="version-detail-content">
+      <version-info></version-info>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref,reactive } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
+import VersionInfo from './VersionInfo.vue';
+const { namespace } = getOrgInfo();
+const avatarUrl = '/src/assets/imgs/jyh/工程首字母图标.png'
+
+const selectTab = ref('bbxx');
+
+// 删除弹窗
+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';
+
+.version-detail {
+  position: relative;
+
+  .secret-op {
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+}
+
+.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 16%;
+  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;
+    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 16%;
+  width: 100%;
+  margin-top: 12px;
+}
+</style>