diff --git a/console/src/modules/system/auth-providers/AuthProviders.vue b/console/src/modules/system/auth-providers/AuthProviders.vue index d2886d405..fe829d1db 100644 --- a/console/src/modules/system/auth-providers/AuthProviders.vue +++ b/console/src/modules/system/auth-providers/AuthProviders.vue @@ -9,6 +9,8 @@ import { useQuery } from "@tanstack/vue-query"; import { apiClient } from "@/utils/api-client"; import type { ListedAuthProvider } from "@halo-dev/api-client"; import AuthProviderListItem from "./components/AuthProviderListItem.vue"; +import { computed, ref } from "vue"; +import Fuse from "fuse.js"; const { data: authProviders, @@ -20,6 +22,24 @@ const { const { data } = await apiClient.authProvider.listAuthProviders(); return data; }, + onSuccess(data) { + fuse = new Fuse(data, { + keys: ["name", "displayName"], + useExtendedSearch: true, + threshold: 0.2, + }); + }, +}); + +const keyword = ref(""); +let fuse: Fuse | undefined = undefined; + +const searchResults = computed(() => { + if (!fuse || !keyword.value) { + return authProviders.value; + } + + return fuse?.search(keyword.value).map((item) => item.item); }); @@ -39,6 +59,7 @@ const { >
@@ -52,7 +73,7 @@ const { class="box-border h-full w-full divide-y divide-gray-100" role="list" > -
  • +