cfy777/Situation-Awareness-Platform-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://gitcode.com/hk_openRepo/OpenRepo_Portal into dev-shenjianbin

Browse Source
This commit is contained in:
shenjianbin
2025-03-15 15:09:24 +08:00
parent 42c7e6363d 782b7537fe
commit 26e3bbaa5e
20 changed files with 545 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/devui.scss
View File

@@ -289,10 +289,10 @@ button.devui-button--solid--secondary {
padding: 3px 0;
}
.devui-checkbox__label-text {
font-size: 16px;
font-size: 14px;
}
.devui-radio.devui-radio--md span .devui-radio__label {
font-size: 16px;
font-size: 14px;
}
.devui-radio-group div.devui-radio__wrapper {
height: auto;

30
src/assets/css/jyh.scss
View File

@@ -117,11 +117,29 @@
background: transparent;
li {
background: #F3F3F3;
//background: #F3F3F3;
background: transparent;
}
.active {
background: #ffffff !important;
//background: #ffffff !important;
}
}
}
.jyh-tabs-4 {
.devui-tabs__nav {
background: transparent;
li {
background: transparent;
padding: 8px 0;
margin-right: 24px;
}
.active {
background: transparent !important;
border: 0px !important;
border-bottom: 2px solid black !important;
}
}
}
@@ -246,3 +264,11 @@
text-align: left;
}
}
.devui-status:before {
margin-right: 12px;
}
.yellow-status:before {
background-color: #FAC20A !important;
}

53
src/assets/css/main.scss
View File

@@ -16,13 +16,15 @@ body,
height: 100%;
-webkit-font-smoothing: antialiased;
// scorll 事件失效 overflow-y: overlay
// devUI 主题颜色重置
--devui-text: rgb(25, 25, 25);
}
html {
overflow-y: scroll; // html本身没有滚动 为了防止自定义滚动条出现时界面抖动，需要预留轨道
}
html body {
//background-color: $devui-global-bg;
background-color: #F6F6F8;
background-color: #f6f6f8;
font-size: var(--text-sm);
color: var(--color-font);
@@ -126,15 +128,17 @@ textarea::placeholder {
}
}
/* 滚动条样式自定义 */
body::-webkit-scrollbar, body>* ::-webkit-scrollbar {
body::-webkit-scrollbar,
body > * ::-webkit-scrollbar {
width: 6px;
height: 4px;
}
body::-webkit-scrollbar-thumb, body>* ::-webkit-scrollbar-thumb {
body::-webkit-scrollbar-thumb,
body > * ::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: var(--devui-disabled-text);
&:hover{
background-color: var(--devui-placeholder)
&:hover {
background-color: var(--devui-placeholder);
}
}
body::-webkit-scrollbar-track {
@@ -188,12 +192,16 @@ body::-webkit-scrollbar-corner {
}
/* 自动补全输入框 去掉hover效果*/
.devui-auto-complete-input__wrapper:not(.devui-auto-complete--disabled):not(.devui-auto-complete-input__wrapper--error):hover {
.devui-auto-complete-input__wrapper:not(.devui-auto-complete--disabled):not(
.devui-auto-complete-input__wrapper--error
):hover {
border-color: var(--devui-line, #d7d8da);
}
/* 可输入下拉选择框 去掉hover效果*/
.devui-editable-select-input__wrapper:not(.devui-editable-select-input__wrapper--disabled):not(.devui-editable-select-input__wrapper--focus):hover {
.devui-editable-select-input__wrapper:not(.devui-editable-select-input__wrapper--disabled):not(
.devui-editable-select-input__wrapper--focus
):hover {
border-color: var(--devui-line, #d7d8da);
}
@@ -216,7 +224,10 @@ body::-webkit-scrollbar-corner {
}
/* 时间范围选择 去掉hover效果 */
.devui-range-date-picker-pro .devui-range-date-picker-pro__range-picker:not(.devui-range-date-picker-pro--error):not(.devui-range-date-picker-pro--disabled):hover {
.devui-range-date-picker-pro
.devui-range-date-picker-pro__range-picker:not(.devui-range-date-picker-pro--error):not(
.devui-range-date-picker-pro--disabled
):hover {
border-color: var(--devui-line, #d7d8da);
}
@@ -356,16 +367,20 @@ body::-webkit-scrollbar-corner {
}
input {
background-color:transparent !important;
background-color: transparent !important;
// appearance: none;
&:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
&:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: inherit !important;
background-color: transparent !important;
background-image: none;
transition: background-color 36000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
}
&:-moz-autofill, textarea:-moz-autofill, select:-moz-autofill {
&:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
-webkit-text-fill-color: inherit !important;
background-color: transparent !important;
background-image: none;
@@ -385,8 +400,6 @@ input {
}
}
.g-content-card-v2 {
background-color: $devui-global-bg;
border-radius: $devui-border-radius-card;
@@ -424,7 +437,7 @@ input {
height: 1px;
width: 100%;
background: var(--devui-dividing-line);
margin: 32px 0
margin: 32px 0;
}
.g-tip-text {
@@ -434,7 +447,7 @@ input {
}
// 新版设计统一设置标题样式 大小颜色行高
.unify-settingTitle-title{
.unify-settingTitle-title {
font-weight: 700;
line-height: 34px;
font-size: 24px;
@@ -447,14 +460,16 @@ input {
}
// 下拉框动效
.arrow-down{
transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
.arrow-down {
transition: transform var(--devui-animation-duration-slow, 0.3s)
var(--devui-animation-ease-in-out-smooth, cubic-bezier(0.645, 0.045, 0.355, 1));
transform-origin: center;
transform: rotateZ(0deg) !important;
}
.arrow-up{
transition: transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
.arrow-up {
transition: transform var(--devui-animation-duration-slow, 0.3s)
var(--devui-animation-ease-in-out-smooth, cubic-bezier(0.645, 0.045, 0.355, 1));
transform-origin: center;
transform: rotateZ(180deg) !important;
}

BIN
src/assets/imgs/jyh/license/allow.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 722 B

BIN
src/assets/imgs/jyh/license/notAllow.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 678 B

BIN
src/assets/imgs/jyh/license/warning.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 722 B

BIN
src/assets/imgs/jyh/nodata.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

121
src/components/LicenseInfo/SidePanel.vue
View File

@@ -13,12 +13,19 @@
</div>
</d-header>
<d-content class="dcontent">
<div class="content-title"></div>
<div class="content-body">
<d-row>
<div class="dcontent-title">
<h1>许可证属性</h1>
</div>
<div class="dcontent-body">
<d-row :gutter="10">
<d-col :span="8">
<div class="content-body-col">
<span class="color-allow">允许的</span>
<div class="dcontent-body-col-title dcontent-body-col-title-1">
<div class="dcontent-body-col-title-icon">
<img src="@/assets/imgs/jyh/license/allow.webp">
</div>
<span>允许的</span>
</div>
<span>Commercial Use</span>
<span>Modify</span>
<span>Distribute</span>
@@ -28,7 +35,12 @@
</d-col>
<d-col :span="8">
<div class="content-body-col">
<span class="color-info">必要的</span>
<div class="dcontent-body-col-title dcontent-body-col-title-2">
<div class="dcontent-body-col-title-icon">
<img src="@/assets/imgs/jyh/license/warning.webp">
</div>
<span>必要的</span>
</div>
<span>Include Copyright</span>
<span>Include License</span>
<span>State changes</span>
@@ -37,7 +49,12 @@
</d-col>
<d-col :span="8">
<div class="content-body-col">
<span class="color-danger">受限的</span>
<div class="dcontent-body-col-title dcontent-body-col-title-3">
<div class="dcontent-body-col-title-icon">
<img src="@/assets/imgs/jyh/license/notAllow.webp">
</div>
<span>受限的</span>
</div>
<span>Place Warranty</span>
<span>Hold Liable</span>
<span>Use Trademark</span>
@@ -73,25 +90,84 @@ const emit = defineEmits(['close']);
display: flex;
flex-direction: column;
align-items: start;
gap: 8px;
padding: 12px;
.dheader, .dcontent{
.dheader {
width: 100%;
border-bottom: 1px solid gray;
padding: 12px;
}
.dfooter {
.dcontent {
border-radius: 8px;
border: 1px solid #EEF0F5;
margin: 20px 0;
width: 100%;
padding: 12px;
&-title {
height: 40px;
background-color: $devui-area;
display: flex;
justify-content: left;
align-items: center;
h1 {
padding-left: 20px;
color: #252B3A;
font-weight: 800;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
}
}
&-body {
padding: 20px;
&-col-title {
width: 100%;
height: 23px;
border-radius: 14px;
border: 1px solid;
display: flex;
align-items: center;
img {
width: 14px;
height: 14px;
}
&-icon {
height: 100%;
width: 32px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 14px 0 0 14px;
margin-right: 8px;
}
&-1 {
border-color: #24B286;
.dcontent-body-col-title-icon {
background-color: #24B286;
}
}
&-2 {
border-color: #FAC20A;
.dcontent-body-col-title-icon {
background-color: #FAC20A;
}
}
&-3 {
border-color: $devui-danger;
.dcontent-body-col-title-icon {
background-color: $devui-danger;
}
}
}
}
}
.title {
font-size: 20px;
font-weight: bold;
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
d-icon {
cursor: pointer;
}
@@ -111,6 +187,10 @@ const emit = defineEmits(['close']);
}
.dfooter {
border-radius: 8px;
border: 1px solid #EEF0F5;
padding: 20px;
width: 100%;
display: flex;
flex-direction: column;
align-items: start;
@@ -118,20 +198,7 @@ const emit = defineEmits(['close']);
}
.side-panel {
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
.color-danger {
color: $devui-danger;
}
.color-info {
color: $devui-warning;
}
.color-allow {
color: $devui-success;
}
</style>

32
src/components/NoData/NoData.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div class="bg-white w-full flex flex-col items-center py-[20px]">
<slot name="img">
<img
v-if="!hideImg"
class="block mb-[20px]"
width="300"
height="240"
src="/src/assets/imgs/jyh/nodata.png"
alt="NoData"
/>
</slot>
<slot>
<div>没有查询到数据</div>
</slot>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
hideImg: {
type: Boolean,
default: false,
},
});
</script>
<style scoped lang="scss">
.bg-white {
background-color: #fff;
}
</style>

2
src/router/config/home.ts
View File

@@ -68,7 +68,7 @@ export default [
}
},
{
path: 'repoDetail/basicInfo/:versionId',
path: 'repoDetail/:versionId',
name: 'VersionDetail',
component: () => import('@/views/Jyh/Version/Detail/index.vue'),
meta: {

71
src/views/Jyh/LicenseInfo/index.vue
View File

@@ -1,42 +1,60 @@
<template>
<div class="license-info-container">
<div class="license-info-content" :class="{ 'license-info-content-full': !showDetail, 'license-info-half': showDetail }">
<div class="license-info-content">
<d-layout>
<d-header class="dheader">
<d-search icon-position="left" style="width: 200px" placeholder="搜索许可证名称"></d-search>
<d-search icon-position="left" style="width: 200px" placeholder="搜索组件名称"></d-search>
<d-select style="width: 200px" placeholder="许可证种类"></d-select>
</d-header>
<d-content class="dcontent">
<d-table :data="list" :header-bg="true">
<d-table :data="list" style="width: 100%;">
<d-column type="index" width="40"></d-column>
<d-column v-for="(column, index) in tableConfig" :field="column.field"
:header="column.header" :sortable="column.sortable" :sort-method="column.sortMethod"></d-column>
<d-column header="详情" width="100px">
<template #default="scope">
<img src="@/assets/imgs/jyh/ic_digital_power_next_step_@2x.png" class="operation" @click="showDetail = !showDetail">
<a class="devui-link" @click="openPanel">查看</a>
</template>
</d-column>
</d-table>
</d-content>
<d-footer class="dfooter">Footer</d-footer>
</d-layout>
</div>
<div class="license-info-side" v-if="showDetail">
<SidePanel @close="close"/>
<div class="license-info-container-page">
<d-pagination
size="sm"
:total="pager.total"
v-model:pageSize="pager.pageSize"
v-model:pageIndex="pager.pageIndex"
:can-view-total="true"
:can-change-page-size="true"
:can-jump-page="true"
:max-items="5"
/>
</div>
</div>
<d-drawer v-model="showDetail" style="width: 800px; padding: 20px" >
<SidePanel @close="close"/>
</d-drawer>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import Table from '@/components/AIRepair/Table.vue';
import SidePanel from '@/components/LicenseInfo/SidePanel.vue';
const pager = ref({
pageIndex: 1,
pageSize: 30,
total: 10
})
const pageOptions = ref({
})
const showDetail = ref(false);
const close = () => {
showDetail.value = false;
}
const openPanel = () => {
showDetail.value = true;
}
const tableConfig = ref([
{
field: 'licenseName',
@@ -95,21 +113,18 @@ const list = ref([
<style scoped lang="scss">
.license-info-container {
height: calc(100vh - 250px);
display: flex;
gap: 8px;
gap: 12px;
flex-direction: column;
width: 100%;
background-color: $devui-global-bg-normal;
.license-info-content {
flex-grow: 1;
height: 100%;
transition: width 0.3s;
&.license-info-content-full {
width: 100%;
}
&.license-info-half {
width: 60%;
}
background-color: $devui-global-bg-normal;
border-radius: 10px;
}
&-page {
width: 100%;
display: flex;
justify-content: end;
}
}
@@ -121,10 +136,10 @@ const list = ref([
padding: 12px;
}
.license-info-side {
height: 100%;
width: 40%;
border-left: 1px solid #e8e8e8;
.dfooter {
display: flex;
justify-content: end;
margin-top: 20px
}
.operation {

35
src/views/Jyh/PersonalCenter/Detail/EarlyWarning.vue
View File

@@ -1,37 +1,20 @@
<template>
<div class="version-info">
<Card simple class="jyh-card mt-3">
<div class="card-title">预警通知列表</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="名称">
<template #default="scope">
<a @click="openWarningDetail(scope.row)">{{ scope.row.name }}</a>
</template>
</d-column>
<d-column field="detail" header="描述"></d-column>
</d-table>
</div>
</Card>
<d-modal class="warning-modal" v-model="warningModalVisable" title="主题：">
<EarlyWarningDetail @close="colseWarningDetail" :warningData="currentWarning" type="user"></EarlyWarningDetail>
</d-modal>
<d-tabs class="jyh-tabs jyh-tabs-2 jyh-tabs-4" type="wrapped" v-model="selectTab">
<d-tab id="gryj" title="个人预警通知列表"></d-tab>
<d-tab id="zzyj" title="组织预警通知列表"></d-tab>
</d-tabs>
<EarlyWarningPerson v-if="selectTab==='gryj'"/>
<EarlyWarningOrganization v-if="selectTab==='zzyj'"/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
const licenseTableData = ref([{code: '05822156', name:'MIT License',detail: 'integer'}]);
const CopyrightTableData = ref([{code: '05822156',detail: 'integer'}]);
import EarlyWarningPerson from './EarlyWarningPerson.vue';
import EarlyWarningOrganization from './EarlyWarningOrganization.vue';
const selectTab = ref('gryj');
const warningModalVisable = ref(false);
const currentWarning = ref();

47
src/views/Jyh/PersonalCenter/Detail/EarlyWarningOrganization.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<Card simple class="jyh-card mt-3">
<div class="card-title">组织预警通知列表</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="标题">
<template #default="scope">
<a>{{scope.row.name}}</a>
</template>
</d-column>
<d-column field="detail" header="详情"></d-column>
<d-column field="level" header="级别">
<template #default="scope,text">
<d-status v-if="scope.row.level===4" type="error">危险</d-status>
<d-status v-if="scope.row.level===3" type="warning">严重</d-status>
<d-status v-if="scope.row.level===2" class="yellow-status">一般</d-status>
<d-status v-if="scope.row.level===1" type="running">提示</d-status>
</template>
</d-column>
</d-table>
</div>
</Card>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const licenseTableData = ref([
{code: '05822156', name:'MIT License',detail: 'integer',level: 4},
{code: '05822156', name:'MIT License',detail: 'integer',level: 3},
{code: '05822156', name:'MIT License',detail: 'integer',level: 2},
{code: '05822156', name:'MIT License',detail: 'integer',level: 1},
]);
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
</style>

47
src/views/Jyh/PersonalCenter/Detail/EarlyWarningPerson.vue Normal file
View File

@@ -0,0 +1,47 @@
<template>
<Card simple class="jyh-card mt-3">
<div class="card-title">个人预警通知列表</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="标题">
<template #default="scope">
<a>{{scope.row.name}}</a>
</template>
</d-column>
<d-column field="detail" header="详情"></d-column>
<d-column field="level" header="级别">
<template #default="scope,text">
<d-status v-if="scope.row.level===4" type="error">危险</d-status>
<d-status v-if="scope.row.level===3" type="warning">严重</d-status>
<d-status v-if="scope.row.level===2" class="yellow-status">一般</d-status>
<d-status v-if="scope.row.level===1" type="running">提示</d-status>
</template>
</d-column>
</d-table>
</div>
</Card>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const licenseTableData = ref([
{code: '05822156', name:'MIT License',detail: 'integer',level: 4},
{code: '05822156', name:'MIT License',detail: 'integer',level: 3},
{code: '05822156', name:'MIT License',detail: 'integer',level: 2},
{code: '05822156', name:'MIT License',detail: 'integer',level: 1},
]);
</script>
<style scoped lang="scss">
@import 'devui-theme/styles-var/devui-var.scss';
</style>

98
src/views/Jyh/PersonalCenter/OrganizationManage/OrganizationManage.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div>
<div v-if="hasOrganization"></div>
<div v-else>
<NoData>
<div class="font-bold mb-[20px]">很抱歉，当前无任何组织，赶快去</div>
<d-button
size="lg"
variant="solid"
@click="createOrganizationBtnClick"
>新建组织</d-button>
</NoData>
</div>
</div>
<d-modal
v-model="createOrganizationModalCtrl"
title="新建组织"
class="w-[600px]"
>
<d-form
ref="createFormRef"
layout="vertical"
:data="createFormData"
message-type="none"
>
<d-form-item
field="organizationName"
label="组织名称"
required
>
<d-input v-model="createFormData.organizationName" />
</d-form-item>
<d-form-item field="organizationProfile" label="组织简介" required>
<d-textarea
v-model="createFormData.organizationProfile"
show-count
maxlength="200"
/>
</d-form-item>
</d-form>
<div class="flex justify-center">
<d-button
variant="solid"
class="mr-[8px]"
@click="confirmCreateOrganizationBtnClick"
>确定</d-button>
<d-button @click="createOrganizationModalClose">取消</d-button>
</div>
</d-modal>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";
import NoData from "@/components/NoData/NoData.vue";
const hasOrganization = ref(false);
const createOrganizationModalCtrl = ref(false);
const createFormData = reactive({
organizationName: "",
organizationProfile: "", // 组织简介
});
const createFormRef = ref();
function confirmCreateOrganizationBtnClick() {
createFormRef.value.validate(isValid => {
if (isValid) {
createOrganization();
}
});
}
async function createOrganization() {
const params = {
organizationName: createFormData.organizationName,
organizationProfile: createFormData.organizationProfile,
};
try {
} catch (e) {
}
}
function createOrganizationBtnClick(): void {
createOrganizationModalCtrl.value = true;
}
function createOrganizationModalClose(): void {
createOrganizationModalCtrl.value = false;
}
</script>
<style scoped lang="scss">
</style>

6
src/views/Jyh/PersonalCenter/index.vue
View File

@@ -3,7 +3,7 @@
<div class="version-header">
<d-breadcrumb class="secret-breadcrumb">
<gc-breadcrumb-item :to="{ name: 'home' }"><span class="title">首页</span></gc-breadcrumb-item>
<gc-breadcrumb-item :to="{ name: 'home' }"><span class="title">高级搜索</span></gc-breadcrumb-item>
<!-- <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="version-detail-header">
@@ -22,12 +22,14 @@
<d-tabs class="jyh-tabs jyh-tabs-2 jyh-tabs-3" type="wrapped" v-model="selectTab">
<d-tab id="yjtzlb" title="预警通知列表"></d-tab>
<d-tab id="dylb" title="订阅列表"></d-tab>
<d-tab id="organizationManage" title="组织管理"></d-tab>
</d-tabs>
</div>
</div>
<div class="version-detail-content">
<early-warning v-if="selectTab==='yjtzlb'"/>
<subscribe-list v-if="selectTab==='dylb'"/>
<OrganizationManage v-if="selectTab === 'organizationManage'" />
</div>
</div>
</template>
@@ -38,6 +40,8 @@ import { useRouter, useRoute } from 'vue-router';
import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
import EarlyWarning from './Detail/EarlyWarning.vue';
import SubscribeList from './Detail/SubscribeList.vue';
import OrganizationManage from './OrganizationManage/OrganizationManage.vue';
const { namespace } = getOrgInfo();
const avatarUrl = '/src/assets/imgs/avatar/male.png';

2
src/views/Jyh/Search/index.vue
View File

@@ -3,7 +3,7 @@
<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>
<gc-breadcrumb-item><span class="cur-title">开源软件列表</span></gc-breadcrumb-item>
</d-breadcrumb>
<d-tabs class="jyh-tabs" type="wrapped" v-model="selectTab">
<d-tab id="OssQuery" title="开源软件查询">

7
src/views/Jyh/Version/Detail/CommunityInfo.vue
View File

@@ -34,11 +34,11 @@
<d-row class="mt-3">
<d-col :span="12">
<d-chart :option="optionConChart" style="width: 100%; height: 400px"></d-chart>
<p class="text-center mb-3">国家/地球分布</p>
<p class="text-center mt-translate-y">国家/地球分布</p>
</d-col>
<d-col :span="12">
<d-chart :option="optionOrgChart" style="width: 100%; height: 400px"></d-chart>
<p class="text-center mb-3">组织/公司分布</p>
<p class="text-center mt-translate-y">组织/公司分布</p>
</d-col>
</d-row>
</Card>
@@ -127,4 +127,7 @@ const optionOrgChart = reactive({
font-size: 12px;
color: #808080;
}
.mt-translate-y {
transform: translateY(-30px);
}
</style>

91
src/views/Jyh/Version/Detail/SBOM.vue Normal file
View File

@@ -0,0 +1,91 @@
<template>
<div class="flex align-center justify-start">
<d-search icon-position="left" style="width: 380px" placeholder="请输入搜索组件名称"></d-search>
<d-checkbox class="ml-10" label="只显示有漏洞的组件" :isShowTitle="false" v-model="checked" />
</div>
<Card simple class="jyh-card mt-3">
<div class="clear-padding">
<d-table :indent="32" @check-change="treeCheckChange" :data="baseTreeTableData1" row-key="id">
<d-column field="firstName" header="组织名称" show-overflow-tooltip> </d-column>
<d-column field="lastName" header="版本"></d-column>
</d-table>
</div>
</Card>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
const checked = ref(false);
const baseTreeTableData1 = ref([
{
id: '1',
firstName: 'openssl',
lastName: 'N.A.',
children: [
{
id: '2',
firstName: 'ssl',
lastName: 'N.A.',
children: [
{
id: '3',
firstName: 'ssl',
lastName: 'N.A.'
},
{
id: '4',
firstName: 'crypto',
lastName: 'N.A.'
}
]
}
]
},
{
id: '5',
firstName: 'Text-Template-1.56',
lastName: 'N.A.',
children: [
{
id: '6',
firstName: 'ssl',
lastName: 'N.A.',
children: [
{
id: '7',
firstName: 'ssl',
lastName: 'N.A.'
},
{
id: '8',
firstName: 'crypto',
lastName: 'N.A.'
}
]
}
]
},
{
id: '9',
firstName: 'Text-Template-1.56',
lastName: 'N.A.'
}
]);
const treeCheckChange = (val, row, selection) => {
console.log('treeCheckChange', selection);
};
</script>
<style scoped lang="scss">
.clear-padding {
margin: -16px -20px;
}
:deep(.devui-table__cell) {
display: flex;
align-items: center;
.devui-table__tree-operate {
transform: translateY(-3px);
}
}
</style>

12
src/views/Jyh/Version/Detail/index.vue
View File

@@ -2,8 +2,8 @@
<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>
<!-- <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">
@@ -27,17 +27,20 @@
<d-tab id="bbxx" title="版本信息"></d-tab>
<d-tab id="ylgx" title="依赖关系"></d-tab>
<d-tab id="ldxx" title="漏洞信息"></d-tab>
<d-tab id="SBOM" title="SBOM"></d-tab>
<d-tab id="communityInfo" title="开发者社区信息"></d-tab>
<d-tab id="ai" title="AI修复建议"></d-tab>
<d-tab id="licenseInfo" title="许可证信息"></d-tab>
<d-tab id="licenseInfo" title="许可证信息"></d-tab>
</d-tabs>
</div>
<div class="version-detail-content">
<version-info v-if="selectTab === 'bbxx'"></version-info>
<vulnerabilities-list v-else-if="selectTab === 'ldxx'"></vulnerabilities-list>
<community-info v-else-if="selectTab === 'communityInfo'"></community-info>
<SBOM v-else-if="selectTab === 'SBOM'" />
<AIRepair v-else-if="selectTab === 'ai'"></AIRepair>
<LicenseInfo v-else-if="selectTab === 'licenseInfo'"></LicenseInfo> </div>
<LicenseInfo v-else-if="selectTab === 'licenseInfo'"></LicenseInfo>
</div>
</div>
</template>
@@ -48,6 +51,7 @@ 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';
const { namespace } = getOrgInfo();