diff --git a/src/api/jyh/index.ts b/src/api/jyh/index.ts
index 7be5c16..c96a56c 100644
--- a/src/api/jyh/index.ts
+++ b/src/api/jyh/index.ts
@@ -277,3 +277,12 @@ export function getVulSuggestion(data) {
     },
   });
 }
+// 许可证信息详情
+export const getLicenseDetail = ({ id }): Promise<any> => {
+  return reqCatchV2(() =>
+    request({
+      url: `/api/v1/repo/license/detail/${id}`,
+      method: 'get',
+    })
+  );
+};
diff --git a/src/components/LicenseInfo/SidePanel.vue b/src/components/LicenseInfo/SidePanel.vue
index 036046d..83242c8 100644
--- a/src/components/LicenseInfo/SidePanel.vue
+++ b/src/components/LicenseInfo/SidePanel.vue
@@ -2,14 +2,14 @@
   <d-layout class="dlayout">
     <d-header class="dheader">
       <div class="title">
-        <h1>{{ data.licenseName }}</h1>
+        <h1>{{ vulnDetail.licenseName || data.licenseName || '--' }}</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>
+        <span>{{ vulnDetail.score || data.score || '--' }}</span>
         <span>类型</span>
-        <d-tag color="#3ac295" size="sm">{{ data.category }}</d-tag>
+        <d-tag color="#3ac295" size="sm">{{ vulnDetail.category || data.category || '--' }}</d-tag>
       </div>
     </d-header>
     <d-content class="dcontent">
@@ -26,11 +26,7 @@
                 </div>
                 <span>允许的</span>
               </div>
-              <span>Commercial Use</span>
-              <span>Modify</span>
-              <span>Distribute</span>
-              <span>Sublicense</span>
-              <span>Private Use</span>
+              <span v-for="item in vulnDetail.allowedList">{{item}}</span>
             </div>
           </d-col>
           <d-col :span="8">
@@ -41,10 +37,7 @@
                 </div>
                 <span>必要的</span>
               </div>
-              <span>Include Copyright</span>
-              <span>Include License</span>
-              <span>State changes</span>
-              <span>Include Notice</span>
+              <span v-for="item in vulnDetail.requiredList">{{item}}</span>
             </div>
           </d-col>
           <d-col :span="8">
@@ -55,9 +48,7 @@
                 </div>
                 <span>受限的</span>
               </div>
-              <span>Place Warranty</span>
-              <span>Hold Liable</span>
-              <span>Use Trademark</span>
+              <span v-for="item in vulnDetail.restrictedList">{{item}}</span>
             </div>
           </d-col>
         </d-row>
@@ -66,11 +57,11 @@
     <d-footer class="dfooter">
       <div>
         <span>影响组件：</span>
-        <span>request</span>
+        <span>{{vulnDetail.effectedScanLibraryName || '--'}}</span>
       </div>
       <div>
         <span>当前版本：</span>
-        <span>2.0</span>
+        <span>{{vulnDetail.effectedScanLibraryVersionNumber || '--'}}</span>
       </div>
     </d-footer>
   </d-layout>
@@ -78,12 +69,25 @@
 
 <script setup>
 import { ref, defineEmits } from 'vue';
+import { getLicenseDetail, getVulnDetail } from '@/api/jyh';
 const props = defineProps({
   data: {
     type: Object
   }
 })
 const emit = defineEmits(['close']);
+const vulnDetail = ref({});
+
+const queryVulnDetail = async () => {
+  const { data,err } = await getLicenseDetail({id: props.data.id});
+  if(!err) {
+    if(data.data.code===200) {
+      vulnDetail.value = data.data.data
+    }
+  }
+};
+queryVulnDetail();
+
 </script>
 
 <style scoped lang="scss">