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/components/AIRepair/Panel.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <slot name="header"></slot>
+  </div>
+  <Transition
+    name="collapse-transition"
+    @beforeEnter="beforeEnter"
+    @enter="enter"
+    @afterEnter="afterEnter"
+    @beforeLeave="beforeLeave"
+    @leave="leave"
+    @afterLeave="afterLeave"
+    >
+      <div v-if="props.expand">
+        <slot name="body"></slot>
+      </div>
+    </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, defineProps, type RendererElement } from 'vue';
+
+const props = defineProps({
+    expand: {
+      type: Boolean,
+      required: true
+    },
+  });
+
+const beforeEnter = (el: RendererElement) => {
+    if (!el.dataset) {
+      el.dataset = {};
+    }
+    if (el.style.height) {
+      el.dataset.height = el.style.height;
+    }
+    el.style.maxHeight = 0;
+  };
+  const enter = (el: RendererElement) => {
+    requestAnimationFrame(() => {
+      el.dataset.oldOverflow = el.style.overflow;
+      if (el.dataset.height) {
+        el.style.maxHeight = el.dataset.height;
+      } else if (el.scrollHeight !== 0) {
+        el.style.maxHeight = `${el.scrollHeight}px`;
+      } else {
+        el.style.maxHeight = 0;
+      }
+      el.style.overflow = 'hidden';
+    });
+  };
+  const afterEnter = (el: RendererElement) => {
+    el.style.maxHeight = '';
+    el.style.overflow = el.dataset.oldOverflow;
+  };
+  const beforeLeave = (el: RendererElement) => {
+    if (!el.dataset) {
+      el.dataset = {};
+    }
+    el.dataset.oldOverflow = el.style.overflow;
+    el.style.maxHeight = `${el.scrollHeight}px`;
+    el.style.overflow = 'hidden';
+  };
+  const leave = (el: RendererElement) => {
+    if (el.scrollHeight !== 0) {
+      el.style.maxHeight = 0;
+    }
+  };
+  const afterLeave = (el: RendererElement) => {
+    el.style.maxHeight = '';
+    el.style.overflow = el.dataset.oldOverflow;
+  };
+</script>
+
+<style scoped lang="scss">
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity 0.5s ease;
+  }
+  
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+  }
+
+.collapse-transition {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-to,
+  &-leave-from {
+    opacity: 1;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition:
+      max-height 0.3s cubic-bezier(0.5, 0.05, 0.5, 0.95),
+      opacity 0.3s cubic-bezier(0.5, 0.05, 0.5, 0.95);
+  }
+}
+</style>

src/components/AIRepair/Table.vue

@@ -0,0 +1,46 @@
+<template>
+  <d-table :data="dataSource" @sort-change="handleSortChange" :header-bg="true">
+    <d-column v-for="(column, index) in props.tableConfig" :field="column.field"
+    :header="column.header" :sortable="column.sortable" :sort-method="column.sortMethod"></d-column>
+  </d-table>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from 'vue';
+
+export default defineComponent({
+  props: {
+    tableConfig: {
+      type: Array,
+      default: () => [],
+    },
+    dataSource: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props) {
+
+    onMounted(() => {
+      console.log('props', props);
+    });
+
+    const handleSortChange = ({ field, direction }) => {
+      console.log('field', field);
+      console.log('direction', direction);
+    };
+    const sortDateMethod = (a, b) => {
+      return a.date > b.date;
+    };
+    const sortNameMethod = (a, b) => {
+      return a.lastName > b.lastName;
+    };
+
+    return { props, handleSortChange, sortDateMethod, sortNameMethod };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/Header/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="full-w" :style="{ height: `${height}px` }">
-    <div class="g-header fixed z-20" ref="headerRef">
+    <div class="g-header fixed z-20" ref="headerRef" :class="{'home-background': isHome, 'normal-background': !isHome}">
       <div class="g-toolbar w-full overflow-hidden" :class="[searchClass, route?.meta?.headerClassName]">
         <div class="g-toolbar-left flex-shrink items-center">
-          <div class="flex-center gap-[16px]">
+          <div class="flex-center gap-[16px]" v-if="!isHome">
 <!--            <g-icon v-if="!asideSetShow" @click="$emit('clickMenu')" name="gt-hamburger" size="20px" class="cursor-pointer hover:!text-black" color="#1D1F3A"></g-icon>-->
             <GLink class="g-toolbar-left-logo" :href="baseUrl" />
             <GLink class="g-toolbar-left-title" :href="baseUrl">可信代码库</GLink>
@@ -11,7 +11,7 @@
             <!-- <Entrance v-if="isLogin" :is-mobile="isMobile" /> -->
           </div>
         </div>
-        <div class="flex-1 flex items-center justify-end">
+        <div class="flex-1 flex items-center justify-end" v-if="!isHome">
           <Search class="g-toolbar-left-search" v-if="!isMobile" :key="$route.fullPath"/>
         </div>
         <div class="g-toolbar-right gap-[12px] flex-grow-0 flex-shrink-0">
@@ -101,6 +101,7 @@ const { height = 56 } = useElementSize(headerRef);
 const userInfo = useAccountStore();
 const { isLogin } = storeToRefs(userInfo);
 const showSearch = computed(() => route.name !== 'home' && route.name !== 'search');
+const isHome = computed(() => route.name === 'home');
 const handleLogin = (type) => {
   emitEvent('login', { type, triggerType: '主动注册' });
 };
@@ -139,7 +140,12 @@ $header-bg: #fff;
   flex-direction: column;
   align-items: stretch;
   justify-content: space-between;
-  background-color: $header-bg;
+  .home-background {
+    background-color: #fff0;
+  }
+  .normal-background {
+    background-color: $header-bg;
+  }
   :deep(.g-link) {
     color: $devui-text-weak;
   }

src/components/LicenseInfo/SidePanel.vue

@@ -0,0 +1,137 @@
+<template>
+  <d-layout class="dlayout">
+    <d-header class="dheader">
+      <div class="title">
+        <h1>Apache License 2.0</h1>
+        <d-icon style="cursor: pointer;" name="icon-close" @click="emit('close')"></d-icon>
+      </div>
+      <div class="sub-title">
+        <span>分数</span>
+        <span>3</span>
+        <span>类型</span>
+        <d-tag color="#3ac295" size="sm">获准的</d-tag>
+      </div>
+    </d-header>
+    <d-content class="dcontent">
+      <div class="content-title"></div>
+      <div class="content-body">
+        <d-row>
+          <d-col :span="8">
+            <div class="content-body-col">
+              <span class="color-allow">允许的</span>
+              <span>Commercial Use</span>
+              <span>Modify</span>
+              <span>Distribute</span>
+              <span>Sublicense</span>
+              <span>Private Use</span>
+            </div>
+          </d-col>
+          <d-col :span="8">
+            <div class="content-body-col">
+              <span class="color-info">必要的</span>
+              <span>Include Copyright</span>
+              <span>Include License</span>
+              <span>State changes</span>
+              <span>Include Notice</span>
+            </div>
+          </d-col>
+          <d-col :span="8">
+            <div class="content-body-col">
+              <span class="color-danger">受限的</span>
+              <span>Place Warranty</span>
+              <span>Hold Liable</span>
+              <span>Use Trademark</span>
+            </div>
+          </d-col>
+        </d-row>
+      </div>
+    </d-content>
+    <d-footer class="dfooter">
+      <div>
+        <span>影响组件：</span>
+        <span>request</span>
+      </div>
+      <div>
+        <span>当前版本：</span>
+        <span>2.0</span>
+      </div>
+    </d-footer>
+  </d-layout>
+</template>
+
+<script setup>
+import { ref, defineEmits } from 'vue';
+
+const emit = defineEmits(['close']);
+</script>
+
+<style scoped lang="scss">
+@import 'devui-theme/styles-var/devui-var.scss';
+
+.dlayout {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+  padding: 12px;
+
+  .dheader, .dcontent{
+    width: 100%;
+    border-bottom: 1px solid gray;
+    padding: 12px;
+  }
+
+  .dfooter {
+    width: 100%;
+    padding: 12px;
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    d-icon {
+      cursor: pointer;
+    }
+  }
+
+  .sub-title {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}
+
+.content-body-col {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dfooter {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 4px;
+}
+
+.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>

src/layouts/DefaultLayout/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <d-layout class="d-layout h-full">
+  <d-layout class="d-layout h-full" :class="{ 'home-background': isHome }">
     <d-header class="d-header">
       <!-- header -->
       <Header @clickMenu="handleClickMenu" :asideSetShow="asideSetShow" ref="refHeader">
@@ -89,6 +89,7 @@ const asideVisible = ref(false);
 const refFooter = ref(null);
 const refHeader: any = ref(null);
 const footerSize = useElementSize(refFooter);
+const isHome = computed(() => route.name === 'home');
 
 // aside 设置可见性 header有两层，有顶栏信息,两层sidebar 都不可见
 const asideSetShow = computed(() => {
@@ -192,4 +193,19 @@ onUnmounted(() => {
   background-position: 0 center;
 }
 
+.home-background {
+  &::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;
+  }
+
+}
 </style>

src/router/config/home.ts

@@ -15,7 +15,7 @@ export default [
     component: DefaultLayout,
     children: [
       {
-        path: '',
+        path: '/home',
         name: 'home',
         component: () => import('@/views/Jyh/Home/index.vue'),
         meta: {
@@ -28,6 +28,18 @@ export default [
           asideMenu: 'drawer' // 左侧菜单抽屉模式
         }
       },
+      {
+        path: '/repoDetail/AIRepair',
+        name: 'AIRepair',
+        component: () => import('@/views/Jyh/AIRepair/index.vue'),
+        meta: {
+          title: 'AI修复建议',
+          className: 'w-full min-w-full',
+          hiddenFooter: true,
+          hasMobile: true,
+          asideMenu: 'drawer'
+        }
+      },
       {
         path: 'search/license',
         name: 'SearchLicense',

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';