merge junjie_dev into master

feat: AI建议 & 许可证页面

Created-by: user8949
Commit-by: @user8949
Merged-by: user8949
Description: feat: AI建议 & 许可证页面

See merge request: hk_openRepo/OpenRepo_Portal!3

src/views/Jyh/AIRepair/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <div class="ai-container">
+    <div class="ai-container-card" style="width: 100%;" v-for="(rowItem, index) in list" :key="index">
+      <Panel :expand="rowItem.expand">
+        <template #header>
+          <div class="ai-panel-header">
+            <div style="padding: 20px 20px 0px 20px;">
+              <img style="width: 60px; height: 50px;" src="@/assets/imgs/jyh/warning.png">
+            </div>
+            <div style="width: 100%; padding: 20px 20px 0px 0;">
+              <div class="ai-panel-header-title">
+                <div>
+                  <d-tag color="red-w98" class="mr-1">严重</d-tag>
+                  <span>Morgan</span>
+                </div>
+                <div style="cursor: pointer; display: flex; gap: 8px; align-items: center;" @click="rowItem.expand = !rowItem.expand">
+                  <img style="width: 14px; height: 14px;" src="@/assets/imgs/jyh/collapseIcon.png">
+                  <span>全部收起</span>
+                </div>
+              </div>
+              <div class="ai-panel-header-sub-title">
+                <div>
+                  <span class="weak-text">安全问题</span>
+                  <span>2</span>
+                </div>
+                <div>
+                  <span class="weak-text">修复兼容性</span>
+                  <span>2</span>
+                  <img src="@/assets/imgs/jyh/help.png" class="icon-sm">
+                  <d-tag class="ml-1" type="warning" size="sm">中</d-tag>
+                </div>
+                <div>
+                  <span class="weak-text">升级版本</span>
+                  <span>xxx</span>
+                  <img src="@/assets/imgs/jyh/ic_digital_power_next_step_@2x.png" class="icon-sm">
+                  <span>xxx</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <template #body>
+          <div style="padding: 20px; width: 100%;">
+            <Table :tableConfig="tableConfig" :dataSource="rowItem.data.listData"/>
+          </div>
+        </template>
+      </Panel>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Panel from '@/components/AIRepair/Panel.vue';
+import Table from '@/components/AIRepair/Table.vue';
+
+const tableConfig = ref([
+  {
+    field: 'securityProblemCode',
+    header: '安全问题编号',
+    sortable: true,
+    sortMethod: null
+  },
+  {
+    field: 'type',
+    header: '安全问题类型',
+    sortable: false,
+    sortMethod: null
+  },
+  {
+    field: 'CWEcode',
+    header: 'CWE编号',
+    sortable: false,
+    sortMethod: null
+  },
+  {
+    field: 'score',
+    header: '分值',
+    sortable: true,
+    sortMethod: null
+  },
+])
+
+
+const list = ref([
+  {
+    expand: true,
+    data: {
+      listData: [
+        {
+          securityProblemCode: '1',
+          type: '安全问题',
+          CWEcode: 'CWE-123',
+          score: 100
+        },
+        {
+          securityProblemCode: '2',
+          type: '安全问题',
+          CWEcode: 'CWE-123',
+          score: 100
+        }
+      ]
+    }
+  },
+  {
+    expand: true,
+    data: {
+      listData: [
+      {
+          securityProblemCode: '1',
+          type: '安全问题',
+          CWEcode: 'CWE-123',
+          score: 100
+        },
+        {
+          securityProblemCode: '2',
+          type: '安全问题',
+          CWEcode: 'CWE-123',
+          score: 100
+        }
+      ]
+    }
+  },
+  {
+    expand: true,
+    data: {
+      listData: [
+      {
+          securityProblemCode: '1',
+          type: '安全问题',
+          CWEcode: 'CWE-123',
+          score: 100
+        },
+        {
+          securityProblemCode: '2',
+          type: '安全问题',
+          CWEcode: 'CWE-123',
+          score: 100
+        }
+      ]
+    }
+  }
+])
+
+
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+.ai-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  justify-content: center;
+  &-card {
+    border-top: 2px solid $devui-danger;
+    background-color: $devui-base-bg;
+    border-radius: var(--devui-border-radius-card, 8px);
+    box-shadow: var(--devui-shadow-length-base, 0 2px 6px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));
+  }
+}
+
+.ai-panel-header {
+  display: flex;
+  flex-direction: row;
+  &-title {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &-sub-title {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+    div {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      margin-right: 20px;
+      position: relative;
+      &:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        right: -10px;
+        height: 100%;
+        width: 1px;
+        background-color: $devui-line;
+      }
+    }
+  }
+}
+
+.weak-text {
+  color: $devui-text-weak;
+}
+
+.icon-sm {
+  width: 14px;
+  height: 14px;
+}
+</style>

src/views/Jyh/Home/index.vue

@@ -5,79 +5,78 @@
         <img src="@/assets/imgs/home/home-title-logo-2x.webp" alt="logo" />
         <h1>可信开源代码库</h1>
       </div>
-      <div class="home-search" ref="homeSearch">
-        <d-input>
+      <div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
+        <d-input ref="searchInput" placeholder="请输入搜索关键字" @focus="inputFocus" @blur="inputBlur"
+        v-model="searchStr">
           <template #prepend>
-            <d-select v-model="searchType" :options="searchOptions" :offset="offset"></d-select>
+            <d-select v-model="searchType" :options="searchOptions"></d-select>
           </template>
           <template #append>
-            <d-dropdown :style="{ width: dropdownWidth + 'px' }" :offset="offset" :close-scope="'blank'"
-            :position="['bottom-start']"	>
-              <div class="advanced-search">
+            <div class="advanced-search" @click="openAdvancedSearch">
                 <span>高级筛选</span>
                 <d-badge :count="5" :bg-color="'#f0f0f0'"></d-badge>
-                <d-icon name="icon-chevron-down-2"></d-icon>
+                <d-icon :rotate="rotate" name="icon-chevron-down-2"></d-icon>
               </div>
-              <template #menu>
-                <div class="advanced-search-menu">
-                  <div style="padding: 12PX;">
-                    <span>高级筛选</span>
-                    <d-form style="margin-top: 20px" layout="vertical">
-                      <d-row :gutter="16">
-                        <d-col :span="8">
-                          <d-form-item field="name" label="license">
-                            <d-input placeholder="请输入license"/>
-                          </d-form-item>
-                        </d-col>
-                        <d-col :span="8">
-                          <d-form-item field="select" label="软件/组件名称">
-                            <d-input placeholder="请输入软件/组件名称"/>
-                          </d-form-item>
-                        </d-col>
-                        <d-col :span="8">
-                          <d-form-item field="multiSelect" label="license强弱" help-tips="license强弱说明">
-                            <d-input />
-                          </d-form-item>
-                        </d-col>
-                      </d-row>
-                      <d-row :gutter="16">
-                        <d-col :span="8">
-                          <d-form-item field="executionDay" label="软件版本">
-                            <d-input />
-                          </d-form-item>
-                        </d-col>
-                        <d-col :span="8">
-                          <d-form-item field="radio" label="依赖软件">
-                            <d-input />
-                          </d-form-item>
-                        </d-col>
-                        <d-col :span="8">
-                          <d-form-item field="switch" label="编程语言">
-                            <d-input />
-                          </d-form-item>
-                        </d-col>
-                      </d-row>
-                      <d-row :gutter="16">
-                        <d-col :span="8">
-                          <d-form-item field="date" label="版本发布日期">
-                            <d-input />
-                          </d-form-item>
-                        </d-col>
-                      </d-row>
-                      <gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
-                        <d-button variant="solid">搜索</d-button>
-                        <d-button>取消</d-button>
-                      </gc-form-operation>
-                    </d-form>
-                  </div>
-                </div>
-              </template>
-            </d-dropdown>
           </template>
         </d-input>
-        <d-button color="primary" variant="solid">搜索</d-button>
+        <d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" close-scope="'blank'"
+        :offset="offset">
+          <div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px'}">
+            <div style="padding: 12PX;">
+              <span>高级筛选</span>
+              <d-form style="margin-top: 20px" layout="vertical">
+                <d-row :gutter="16">
+                  <d-col :span="8">
+                    <d-form-item field="name" label="license">
+                      <d-input placeholder="请输入license"/>
+                    </d-form-item>
+                  </d-col>
+                  <d-col :span="8">
+                    <d-form-item field="select" label="软件/组件名称">
+                      <d-input placeholder="请输入软件/组件名称"/>
+                    </d-form-item>
+                  </d-col>
+                  <d-col :span="8">
+                    <d-form-item field="multiSelect" label="license强弱" help-tips="license强弱说明">
+                      <d-input />
+                    </d-form-item>
+                  </d-col>
+                </d-row>
+                <d-row :gutter="16">
+                  <d-col :span="8">
+                    <d-form-item field="executionDay" label="软件版本">
+                      <d-input />
+                    </d-form-item>
+                  </d-col>
+                  <d-col :span="8">
+                    <d-form-item field="radio" label="依赖软件">
+                      <d-input />
+                    </d-form-item>
+                  </d-col>
+                  <d-col :span="8">
+                    <d-form-item field="switch" label="编程语言">
+                      <d-input />
+                    </d-form-item>
+                  </d-col>
+                </d-row>
+                <d-row :gutter="16">
+                  <d-col :span="8">
+                    <d-form-item field="date" label="版本发布日期">
+                      <d-input />
+                    </d-form-item>
+                  </d-col>
+                </d-row>
+                <gc-form-operation style="display: flex; justify-content: center; gap: 8px;">
+                  <d-button variant="solid">搜索</d-button>
+                  <d-button>取消</d-button>
+                </gc-form-operation>
+              </d-form>
+            </div>
+          </div>
+        </d-dropdown-menu>
+        <d-button color="primary" variant="solid" @click="search">搜索</d-button>
       </div>
-      <d-button icon="share" class="batch-btn">批量校验</d-button>
+      <d-button ref="origin" icon="share" class="batch-btn">批量校验</d-button>
       <div class="home-information">
         <div class="info-title">
           <div class="sub-title">
@@ -112,10 +111,17 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
+const route = useRoute();
+const router = useRouter();
+const inputGlow = ref(false);
+const searchStr = ref('');
 const searchType = ref('组件/软件');
 const searchOptions = ref(['组件/软件']);
-const offset = ref({ mainAxis: 12, crossAxis: -200 });
+const offset = ref({ mainAxis: 7 , crossAxis: -10 });
+const isOpen = ref(false);
+const rotate = ref(0);
 const infoList = ref([
   {
     text: '公告1',
@@ -137,17 +143,35 @@ const infoList = ref([
   },
 ])
 
-const homeSearch: any = ref(null);
+const homeSearch = ref(null);
 const dropdownWidth = ref(0);
-const isOpen = ref(true)
+
+
+const searchInput = ref(null);
+const openAdvancedSearch = () => {
+  isOpen.value = !isOpen.value;
+  rotate.value = isOpen.value ? 180 : 0;
+  inputGlow.value = isOpen.value;
+};
+
+const inputFocus = () => {
+  inputGlow.value = true;
+};
+
+const inputBlur = () => {
+  inputGlow.value = false;
+}
 
 const updateDropdownWidth = () => {
   if (homeSearch.value) {
-    dropdownWidth.value = homeSearch.value.offsetWidth * 0.8;
-    offset.value.crossAxis = -homeSearch.value.offsetWidth * 0.3;
+    dropdownWidth.value = homeSearch.value.offsetWidth * 0.85;
   }
 };
 
+const search = () => {
+  router.push({ name: 'Search', query: { val: searchStr.value || '', type: route?.query?.type || 'License' }});
+};
+
 let resizeObserver: ResizeObserver | null = null;
 
 onMounted(() => {
@@ -179,19 +203,6 @@ onBeforeUnmount(() => {
   position: relative;
   overflow: hidden;
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1)),url('@/assets/imgs/home/background@2x.png');
-    background-size: cover;
-    background-position: center;
-    z-index: -1;
-  }
-
 
   .home-content {
     font-size: 14px;
@@ -228,6 +239,7 @@ onBeforeUnmount(() => {
       justify-content: space-between;
       align-items: center;
       padding: 12px;
+      box-shadow: var(--devui-shadow, 0 2px 12px 0);
       input {
         border: none;
         outline: none;
@@ -241,6 +253,17 @@ onBeforeUnmount(() => {
         justify-content: center;
         align-items: center;
         gap: 8px;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: -10px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 20px;
+          background-color: var(--devui-form-control-line, #d7d8da);
+        }
       }
 
       .advanced-search-menu {
@@ -308,5 +331,12 @@ onBeforeUnmount(() => {
   }
 }
 
+.glow-border {
+  border: 1px solid var(--devui-form-control-line, #d7d8da);
+  border-color: var(--devui-form-control-line-active, #5e7ce0) !important;
+  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08));
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
 
 </style>

src/views/Jyh/LicenseInfo/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="license-info-container">
+    <div class="license-info-content" :class="{ 'license-info-content-full': !showDetail, 'license-info-half': showDetail }">
+      <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-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">
+              </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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Table from '@/components/AIRepair/Table.vue';
+import SidePanel from '@/components/LicenseInfo/SidePanel.vue';
+const showDetail = ref(false);
+
+const close = () => {
+  showDetail.value = false;
+}
+
+const tableConfig = ref([
+  {
+    field: 'licenseName',
+    header: '许可证名称',
+    sortable: true,
+    sortMethod: null
+  },
+  {
+    field: 'licenseType',
+    header: '许可证种类',
+    sortable: false,
+    sortMethod: null
+  },
+  {
+    field: 'affectedComponent',
+    header: '影响组件',
+    sortable: true,
+    sortMethod: null
+  },
+  {
+    field: 'version',
+    header: '版本',
+    sortable: true,
+    sortMethod: null
+  }
+])
+
+const list = ref([
+  {
+    licenseName: 'Apache License 2.0',
+    licenseType: '获准的',
+    affectedComponent: 'org.apache.commons:commons-collections4',
+    version: '4.4',
+  },
+  {
+    licenseName: 'Apache License 2.0',
+    licenseType: '获准的',
+    affectedComponent: 'org.apache.commons:commons-collections4',
+    version: '4.4',
+  },
+  {
+    licenseName: 'Apache License 2.0',
+    licenseType: '获准的',
+    affectedComponent: 'org.apache.commons:commons-collections4',
+    version: '4.4',
+  },
+  {
+    licenseName: 'Apache License 2.0',
+    licenseType: '获准的',
+    affectedComponent: 'org.apache.commons:commons-collections4',
+    version: '4.4',
+  }
+])
+</script>
+
+<style scoped lang="scss">
+
+.license-info-container {
+  height: calc(100vh - 250px);
+  display: flex;
+  gap: 8px;
+  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%;
+    }
+  }
+}
+
+.dheader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+}
+
+.license-info-side {
+  height: 100%;
+  width: 40%;
+  border-left: 1px solid #e8e8e8;
+}
+
+.operation {
+  cursor: pointer;
+  width: 14px;
+  height: 14px;
+}
+</style>

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

@@ -28,13 +28,16 @@
         <d-tab id="ylgx" title="依赖关系"></d-tab>
         <d-tab id="ldxx" title="漏洞信息"></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-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>
-    </div>
+      <AIRepair v-else-if="selectTab === 'ai'"></AIRepair>
+      <LicenseInfo v-else-if="selectTab === 'licenseInfo'"></LicenseInfo>    </div>
   </div>
 </template>
 
@@ -45,6 +48,8 @@ import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
 import VulnerabilitiesList from './VulnerabilitiesList.vue';
 import CommunityInfo from './CommunityInfo.vue';
 import VersionInfo from './VersionInfo.vue';
+import AIRepair from '../../AIRepair/index.vue';
+import LicenseInfo from '../../LicenseInfo/index.vue';
 const { namespace } = getOrgInfo();
 const avatarUrl = '/src/assets/imgs/jyh/工程首字母图标.png';