perf: Resource management filters optimization (#3815)

Co-authored-by: wangdan-fit2cloud <dan.wang@fit2cloud.com>

ui/src/views/system-resource-management/ApplicationResourceIndex.vue

@@ -93,7 +93,7 @@
           <template #header>
             <div>
               <span>{{ $t('common.status.label') }}</span>
-              <el-popover :width="200" trigger="click" :visible="statusVisible">
+              <el-popover :width="100" trigger="click" :visible="statusVisible">
                 <template #reference>
                   <el-button
                     style="margin-top: -2px"
@@ -109,19 +109,17 @@
                 <div class="filter">
                   <div class="form-item mb-16">
                     <div @click.stop>
-                      <el-scrollbar height="300" style="margin: 0 0 0 10px">
+                      <el-checkbox-group
-                        <el-checkbox-group
+                        v-model="statusArr"
-                          v-model="statusArr"
+                        style="display: flex; flex-direction: column"
-                          style="display: flex; flex-direction: column"
+                      >
-                        >
+                        <el-checkbox
-                          <el-checkbox
+                          v-for="item in statusOptions"
-                            v-for="item in statusOptions"
+                          :key="item.value"
-                            :key="item.value"
+                          :label="item.label"
-                            :label="item.label"
+                          :value="item.value"
-                            :value="item.value"
+                        />
-                          />
+                      </el-checkbox-group>
-                        </el-checkbox-group>
-                      </el-scrollbar>
                     </div>
                   </div>
                 </div>
@@ -177,21 +175,28 @@
                   </el-button>
                 </template>
                 <div class="filter">
-                  <div class="form-item mb-16">
+                  <div class="form-item mb-16 ml-4">
                     <div @click.stop>
-                      <el-scrollbar height="300" style="margin: 0 0 0 10px">
+                      <el-input
+                        v-model="filterText"
+                        :placeholder="$t('common.search')"
+                        prefix-icon="Search"
+                        clearable
+                      />
+                      <el-scrollbar height="300" v-if="filterData.length">
                         <el-checkbox-group
                           v-model="workspaceArr"
                           style="display: flex; flex-direction: column"
                         >
                           <el-checkbox
-                            v-for="item in workspaceOptions"
+                            v-for="item in filterData"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"
                           />
                         </el-checkbox-group>
                       </el-scrollbar>
+                      <el-empty v-else :description="$t('common.noData')" />
                     </div>
                   </div>
                 </div>
@@ -289,7 +294,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, computed } from 'vue'
+import { onMounted, ref, reactive, computed, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import ApplicationResourceApi from '@/api/system-resource-management/application'
 import { t } from '@/locales'
@@ -427,10 +432,28 @@ const statusOptions = ref<any[]>([
   },
 ])
 
+const filterText = ref('')
+const filterData = ref<any[]>([])
+
+watch(
+  [() => workspaceOptions.value, () => filterText.value],
+  () => {
+    if (!filterText.value.length) {
+      filterData.value = workspaceOptions.value
+    }
+    filterData.value = workspaceOptions.value.filter((v: any) =>
+      v.label.toLowerCase().includes(filterText.value.toLowerCase()),
+    )
+  },
+  { immediate: true },
+)
+
+
 function filterWorkspaceChange(val: string) {
   if (val === 'clear') {
     workspaceArr.value = []
   }
+  filterText.value = ''
   getList()
   workspaceVisible.value = false
 }

ui/src/views/system-resource-management/KnowledgeResourceIndex.vue

@@ -98,21 +98,28 @@
                   </el-button>
                 </template>
                 <div class="filter">
-                  <div class="form-item mb-16">
+                  <div class="form-item mb-16 ml-4">
                     <div @click.stop>
-                      <el-scrollbar height="300" style="margin: 0 0 0 10px">
+                      <el-input
+                        v-model="filterText"
+                        :placeholder="$t('common.search')"
+                        prefix-icon="Search"
+                        clearable
+                      />
+                      <el-scrollbar height="300" v-if="filterData.length">
                         <el-checkbox-group
                           v-model="workspaceArr"
                           style="display: flex; flex-direction: column"
                         >
                           <el-checkbox
-                            v-for="item in workspaceOptions"
+                            v-for="item in filterData"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"
                           />
                         </el-checkbox-group>
                       </el-scrollbar>
+                      <el-empty v-else :description="$t('common.noData')" />
                     </div>
                   </div>
                 </div>
@@ -245,7 +252,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, computed } from 'vue'
+import { onMounted, ref, reactive, computed, watch } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import KnowledgeResourceApi from '@/api/system-resource-management/knowledge'
 import UserApi from '@/api/user/user'
@@ -349,10 +356,28 @@ function reEmbeddingKnowledge(row: any) {
 const workspaceOptions = ref<any[]>([])
 const workspaceVisible = ref(false)
 const workspaceArr = ref<any[]>([])
+
+const filterText = ref('')
+const filterData = ref<any[]>([])
+
+watch(
+  [() => workspaceOptions.value, () => filterText.value],
+  () => {
+    if (!filterText.value.length) {
+      filterData.value = workspaceOptions.value
+    }
+    filterData.value = workspaceOptions.value.filter((v: any) =>
+      v.label.toLowerCase().includes(filterText.value.toLowerCase()),
+    )
+  },
+  { immediate: true },
+)
+
 function filterWorkspaceChange(val: string) {
   if (val === 'clear') {
     workspaceArr.value = []
   }
+  filterText.value = ''
   getList()
   workspaceVisible.value = false
 }

ui/src/views/system-resource-management/ModelResourceIndex.vue

@@ -120,21 +120,28 @@
                   </el-button>
                 </template>
                 <div class="filter">
-                  <div class="form-item mb-16">
+                  <div class="form-item mb-16 ml-4">
                     <div @click.stop>
-                      <el-scrollbar height="300" style="margin: 0 0 0 10px">
+                      <el-input
+                        v-model="filterText"
+                        :placeholder="$t('common.search')"
+                        prefix-icon="Search"
+                        clearable
+                      />
+                      <el-scrollbar height="300" v-if="filterData.length">
                         <el-checkbox-group
                           v-model="workspaceArr"
                           style="display: flex; flex-direction: column"
                         >
                           <el-checkbox
-                            v-for="item in workspaceOptions"
+                            v-for="item in filterData"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"
                           />
                         </el-checkbox-group>
                       </el-scrollbar>
+                      <el-empty v-else :description="$t('common.noData')" />
                     </div>
                   </div>
                 </div>
@@ -230,7 +237,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeMount, onMounted, ref, reactive, nextTick, computed } from 'vue'
+import { onBeforeMount, onMounted, ref, reactive, watch, computed } from 'vue'
 import type { Provider, Model } from '@/api/type/model'
 import EditModel from '@/views/model/component/EditModel.vue'
 import ParamSettingDialog from '@/views/model/component/ParamSettingDialog.vue'
@@ -314,6 +321,22 @@ const getRowProvider = computed(() => {
   }
 })
 
+const filterText = ref('')
+const filterData = ref<any[]>([])
+
+watch(
+  [() => workspaceOptions.value, () => filterText.value],
+  () => {
+    if (!filterText.value.length) {
+      filterData.value = workspaceOptions.value
+    }
+    filterData.value = workspaceOptions.value.filter((v: any) =>
+      v.label.toLowerCase().includes(filterText.value.toLowerCase()),
+    )
+  },
+  { immediate: true },
+)
+
 function filterWorkspaceChange(val: string) {
   if (val === 'clear') {
     workspaceArr.value = []

ui/src/views/system-resource-management/ToolResourceIndex.vue

@@ -119,21 +119,28 @@
                   </el-button>
                 </template>
                 <div class="filter">
-                  <div class="form-item mb-16">
+                  <div class="form-item mb-16 ml-4">
                     <div @click.stop>
-                      <el-scrollbar height="300" style="margin: 0 0 0 10px">
+                      <el-input
+                        v-model="filterText"
+                        :placeholder="$t('common.search')"
+                        prefix-icon="Search"
+                        clearable
+                      />
+                      <el-scrollbar height="300" v-if="filterData.length">
                         <el-checkbox-group
                           v-model="workspaceArr"
                           style="display: flex; flex-direction: column"
                         >
                           <el-checkbox
-                            v-for="item in workspaceOptions"
+                            v-for="item in filterData"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"
                           />
                         </el-checkbox-group>
                       </el-scrollbar>
+                      <el-empty v-else :description="$t('common.noData')" />
                     </div>
                   </div>
                 </div>
@@ -269,7 +276,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, computed } from 'vue'
+import { onMounted, ref, reactive, computed, watch } from 'vue'
 import { cloneDeep } from 'lodash'
 import InitParamDrawer from '@/views/tool/component/InitParamDrawer.vue'
 import ToolResourceApi from '@/api/system-resource-management/tool'
@@ -444,6 +451,22 @@ async function changeState(row: any) {
   }
 }
 
+const filterText = ref('')
+const filterData = ref<any[]>([])
+
+watch(
+  [() => workspaceOptions.value, () => filterText.value],
+  () => {
+    if (!filterText.value.length) {
+      filterData.value = workspaceOptions.value
+    }
+    filterData.value = workspaceOptions.value.filter((v: any) =>
+      v.label.toLowerCase().includes(filterText.value.toLowerCase()),
+    )
+  },
+  { immediate: true },
+)
+
 function filterWorkspaceChange(val: string) {
   if (val === 'clear') {
     workspaceArr.value = []