From 03db951292ef4c8dd9873475dcb29206bf7ede24 Mon Sep 17 00:00:00 2001
From: "@user8949" <user8949@noreply.gitcode.com>
Date: Fri, 14 Mar 2025 20:03:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20AI=E5=BB=BA=E8=AE=AE=20&=20=E8=AE=B8?=
 =?UTF-8?q?=E5=8F=AF=E8=AF=81=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/imgs/jyh/collapseIcon.png          | Bin 0 -> 268 bytes
 src/assets/imgs/jyh/help.png                  | Bin 0 -> 513 bytes
 .../jyh/ic_digital_power_next_step_@2x.png    | Bin 0 -> 560 bytes
 src/assets/imgs/jyh/warning.png               | Bin 0 -> 870 bytes
 src/components/AIRepair/Panel.vue             | 104 +++++++++
 src/components/AIRepair/Table.vue             |  46 ++++
 src/components/Header/index.vue               |  14 +-
 src/components/LicenseInfo/SidePanel.vue      | 137 ++++++++++++
 src/layouts/DefaultLayout/index.vue           |  18 +-
 src/router/config/home.ts                     |  14 +-
 src/views/Jyh/AIRepair/index.vue              | 206 ++++++++++++++++++
 src/views/Jyh/Home/index.vue                  | 194 ++++++++++-------
 src/views/Jyh/LicenseInfo/index.vue           | 135 ++++++++++++
 src/views/Jyh/Version/Detail/index.vue        |   7 +-
 14 files changed, 786 insertions(+), 89 deletions(-)
 create mode 100644 src/assets/imgs/jyh/collapseIcon.png
 create mode 100644 src/assets/imgs/jyh/help.png
 create mode 100644 src/assets/imgs/jyh/ic_digital_power_next_step_@2x.png
 create mode 100644 src/assets/imgs/jyh/warning.png
 create mode 100644 src/components/AIRepair/Panel.vue
 create mode 100644 src/components/AIRepair/Table.vue
 create mode 100644 src/components/LicenseInfo/SidePanel.vue
 create mode 100644 src/views/Jyh/AIRepair/index.vue
 create mode 100644 src/views/Jyh/LicenseInfo/index.vue

diff --git a/src/assets/imgs/jyh/collapseIcon.png b/src/assets/imgs/jyh/collapseIcon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8fd5cad343fc930168445dccaa77a3379d6f2644
GIT binary patch
literal 268
zcmV+n0rUQeP)<h;3K|Lk000e1NJLTq000~S000^Y1^@s6q*OeK00004b3#c}2nYxW
zd<bNS0002PNkl<ZNQv#1F%E+;3`M`oob2}2lN3${9Hl3Lo+bwfyF0X9s@8Q7WT<!}
zvi^&d=$i%xA~J*!+MM%j&AnjeDaLrV=1*3Ds$NvJXXeQx1JHU7_A`i?)slK<Hj{2H
zvx3*is8ou_J<ZQgEr2<t)a@dClcH1x08OcIS(a;zkpQ4ncJLpNhzzRQSCJ8oW|tlu
ze4@D80N-Z+M)mTpzMhI?TP)z!vfZRrf1*TW@CJFMo-TDgij-1EL?aR1thqatPH+>V
S><cmg0000<MNUMnLSTX;ENwdg

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/jyh/help.png b/src/assets/imgs/jyh/help.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9266bc1625131f82e55ab9cfd571456e4df15cf
GIT binary patch
literal 513
zcmV+c0{;DpP)<h;3K|Lk000e1NJLTq0012T0012b1^@s6R+DEB00004b3#c}2nYxW
zd<bNS0005FNkl<ZNQuQ(OLoH`3>@)%ui#U`E_es0GC7&Luy9opKF&+qS%p~ENJtus
zFbVIyW#+pat$LJ+=m7vR#xUcHCW&m%?uSF7ZA9KA_1*`S8E|B@0YHo~*R}wl?R(@e
zNu6^$B)gf&JHh6Z(mEtngjoplEMdz}O-!?fpCmTrht%a`ga9CZG5}lZ4ya6>b1a6#
zjs{?v`6i>1dnJ$w*a3iu))-?p@*v2c+kh}I^Ipb?neWWJ>nv)-7|*UR4QBMA*QIq=
z649oe$qlrKi(d->i#Qu*$;>z4d4#<8kc{s*>eoWXQCn*|Mm1~|^~)?;(6_Rb42IIx
zxCv>LamWhGD8hnHP_`G8dOtho0KhKO;Z-PuU$VR+l~-zdLJ0|Qbn+!JF_4bywR{Ui
zw562Ri~5}3%Jdy50eYBPEhdqHYju2rbB>Gl{uVSxx!w$XU%?38`{118**>VX-RQ$e
zLko(aU~<N5Z8vgw`V#bzQd;FR6-Kr)&p*WDUp9yCj`S{ZwYv6qq!+}0vkf+0hT3^U
zWoLo27p%6wwD<PNCoo)HhoqVuILF0m65!0NNu==wTgp}|$<G4(00000NkvXXu0mjf
D%R1+M

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/jyh/ic_digital_power_next_step_@2x.png b/src/assets/imgs/jyh/ic_digital_power_next_step_@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..37e7f101196d083da641f5206323f9f8dd261c56
GIT binary patch
literal 560
zcmV-00?+-4P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS0005!Nkl<ZScSb;-FbsB3_Q7AhpZ513(PWvWdd8&nSl(@Nl+hR@hJ{JHYMCk
z@&!kClF?ZvWS}fdOGLH$$*S+3i0%MzyWOs-F)3w{bM7Z1TMtasqzG9QP*v5HnRUjV
zi0;EMcmU|S&I8ZN7-K8|F!Nc9T@x}ZAj;Y^b0dUn2*O7pOCsI`gnj<mLOdg+UJ~&p
zz&Xc4-nQ*!3-OeYVHmtI#>OIE1gNs_MlMj5eTh8^(B*2|HmN&uA=PE(i)^crhkCC*
zK`z9BW9+Oi;F&!Do7%e?RaIS!qOg76`?a-?$K$ss3JbuVPABU7-kYGT2J#$Cz|3c6
zu0s+j>l@8!)E|8=c^oiBMA&-|1Ot-?;^VpKy3Whq=2RkZ)+RU>#9ogOp_4UB3qK`7
zCri?sbG;u~a~77mN_bZ*AgA1?Kw`hzowh<(Ybkqe%e%b;spK(60skp=F1c_K(cLH`
zIUhkDa~ZYowk%7VD?kpG%yYy7PwSU0@H$uyn7PRz7k`jbckKPCvwCk#%^dnHXu@Z9
z6;d%Za~w93&BZ=sDAgl=Z28~uVrIUCwzAGS-ZCW#)K$((?08Mm#UximOpJwU?shc;
yo({L$)oevb3X<NTtodI|L|Lg7GFg**mHPuHp@$jJ{+7)E0000<MNUMnLSTZtv-3g#

literal 0
HcmV?d00001

diff --git a/src/assets/imgs/jyh/warning.png b/src/assets/imgs/jyh/warning.png
new file mode 100644
index 0000000000000000000000000000000000000000..490ee911a5cb52adbea67b06d182be1093f2873a
GIT binary patch
literal 870
zcmV-s1DX7ZP)<h;3K|Lk000e1NJLTq002n<002S=1^@s68?^f$00004b3#c}2nYxW
zd<bNS0009WNkl<Zc%0>%U6QIW5JtbwolUTs!F}jdjpaU&eN1_)uCouB)vyZ9eL(RK
zNCKVi;G8$7RN}`;C-eXz0qXU~7O=(LA1x~Uv1Ru4U8xM}2GSlt{kb}TkoUeJfw11R
z4h(n%1OS8_M*@IKU`U-9tpnHVkF7JH3xvFxk~*kNw|cY8aiT-;2aR25OgkNuj#Rkc
z)WON*tmE)RJfwQF%)O`C6SmNpcJd~TwW!5T{Cqf~Aq5p{*Y^k_Y!a6RvNnl@#C`T9
zZ4wEo-Yj$evoB|pj7gJ=bvIHrMGtA(lJ7!hOAz0rNEWqN`yTcC5jmu|7M&5eu8V6@
zutij6yFJ0!McC)!7V&5yg>M|G%y$2_0MJ~-QW<=_NJI%~)RJ#b)!=I<@ob7?QtV>g
zLoA!vLlP<0z1X6$m=}JNlq_nA&~su9N!Owa{2NSOle8^r;Vt59A#wGJxZt#j(Iokf
z;V^vTVF^j|-#tTcjcam9ae75u@QiD^Ny!xJZa8e36jB;XzKiKwf@vltZc)p`p3~@%
z=3&v9i9M(BCe6j7mhnY=R7k099DNyUQ*cOWFZnLUjXT_=*-f*1#@G}T(yWSgFX26>
zFq39(QA=RY$vdRiu;@bA2Gif9SFxzYzleK<G}k5Hg|AJXCJ8M0D)&SB{Vr!nYP}+%
z>Fx9T25(UweJk-;EGiKFz}k1o>7DKNgE<VFBweftIbaLv`scE#H>B5E@?8vX3HnWX
zxh3DhK+mZ&q~B%HnSq{Dw@E4%Q3+59V;3-X0ju#;QumhNsj7EApckF%y-6vK<t`-g
zB_9ARs_gH+_s%wrpdPmb_tQ;dni2hoAJf5OZE8bGwpa(>@y5Y@&*^GXs!P7oGj6xX
zHGsB7u6m=@Prq(38<UhRsy|nUu9m9)jTp@dB9#@bkIMya^CFSyPvu)P_pJ6v8k!5-
zTzeRg7>Q>y=8Y{(lFNQdSX4&m8fjjb6nDI-K>$#%SBX^a1Tl7T-f@RL5%hbYGW+_j
w+N)iiwnWNYTPDw~k|T*X;?ts;RkuB*{}o$R@j)}#X#fBK07*qoM6N<$f*F9HcmMzZ

literal 0
HcmV?d00001

diff --git a/src/components/AIRepair/Panel.vue b/src/components/AIRepair/Panel.vue
new file mode 100644
index 0000000..243ff66
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/AIRepair/Table.vue b/src/components/AIRepair/Table.vue
new file mode 100644
index 0000000..5a68f71
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Header/index.vue b/src/components/Header/index.vue
index a4169f6..98c97c9 100644
--- a/src/components/Header/index.vue
+++ b/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;
   }
diff --git a/src/components/LicenseInfo/SidePanel.vue b/src/components/LicenseInfo/SidePanel.vue
new file mode 100644
index 0000000..bdfb202
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/layouts/DefaultLayout/index.vue b/src/layouts/DefaultLayout/index.vue
index e1babb9..63b12e2 100644
--- a/src/layouts/DefaultLayout/index.vue
+++ b/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>
diff --git a/src/router/config/home.ts b/src/router/config/home.ts
index ae870cf..957ed74 100644
--- a/src/router/config/home.ts
+++ b/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',
diff --git a/src/views/Jyh/AIRepair/index.vue b/src/views/Jyh/AIRepair/index.vue
new file mode 100644
index 0000000..6a18f50
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Jyh/Home/index.vue b/src/views/Jyh/Home/index.vue
index 8eaf063..2ef52a1 100644
--- a/src/views/Jyh/Home/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Jyh/LicenseInfo/index.vue b/src/views/Jyh/LicenseInfo/index.vue
new file mode 100644
index 0000000..7cf7322
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Jyh/Version/Detail/index.vue b/src/views/Jyh/Version/Detail/index.vue
index 1804037..014a98f 100644
--- a/src/views/Jyh/Version/Detail/index.vue
+++ b/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';