SBOM搜索功能实现

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

@@ -1,16 +1,16 @@
 <template>
   <div class="flex align-center justify-start">
-    <d-search icon-position="left" style="width: 380px" placeholder="请输入搜索软件名称"></d-search>
+    <d-search icon-position="left" style="width: 380px" placeholder="请输入搜索软件名称" v-model="searchText" @change="handleSearch"></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
         class="jyh-table"
-        v-if="tableData.length > 0"
+        v-if="filteredTableData.length > 0"
         :indent="32"
         @check-change="treeCheckChange"
-        :data="tableData"
+        :data="filteredTableData"
         row-key="id"
       >
         <d-column field="libraryName" header="组件名称" show-overflow-tooltip>
@@ -28,7 +28,7 @@
   </d-drawer>
 </template>
 <script setup lang="ts">
-import { ref, reactive, onMounted, defineProps } from 'vue';
+import { ref, reactive, onMounted, defineProps, computed } from 'vue';
 import SBOMDetail from './SBOMDetail.vue';
 import NoData from '@/components/NoData/NoData.vue';
 import { dependencyTree, getVulnList } from '@/api/jyh';
@@ -40,12 +40,20 @@ const showDetail = ref(false);
 const selectRow = ref({});
 
 const tableData = ref([]);
+const searchText = ref(''); // 搜索关键词
 
 const setSelectRow = (row) => {
   selectRow.value = row;
   showDetail.value = true;
 };
 
+const filteredTableData = computed(() => {
+  if (!searchText.value) return tableData.value; // 无关键词时返回全部数据
+  return tableData.value.filter(item =>
+    item.libraryName.toLowerCase().includes(searchText.value.toLowerCase())
+  );
+});
+
 
 function generateUUID() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {