mirror of https://github.com/halo-dev/halo
fix: add keyword search functionality to AuthProvider list (#3974)
#### What type of PR is this? /kind bug #### What this PR does / why we need it: 添加关键字搜索功能到认证方式列表 #### Which issue(s) this PR fixes: Fixes #3948 #### Special notes for your reviewer: #### Does this PR introduce a user-facing change? ```release-note 修复 Console 端认证方式列表无法使用搜索的问题。 ```pull/3977/head
parent
170cf4e412
commit
b1d95fe06d
|
@ -9,6 +9,8 @@ import { useQuery } from "@tanstack/vue-query";
|
||||||
import { apiClient } from "@/utils/api-client";
|
import { apiClient } from "@/utils/api-client";
|
||||||
import type { ListedAuthProvider } from "@halo-dev/api-client";
|
import type { ListedAuthProvider } from "@halo-dev/api-client";
|
||||||
import AuthProviderListItem from "./components/AuthProviderListItem.vue";
|
import AuthProviderListItem from "./components/AuthProviderListItem.vue";
|
||||||
|
import { computed, ref } from "vue";
|
||||||
|
import Fuse from "fuse.js";
|
||||||
|
|
||||||
const {
|
const {
|
||||||
data: authProviders,
|
data: authProviders,
|
||||||
|
@ -20,6 +22,24 @@ const {
|
||||||
const { data } = await apiClient.authProvider.listAuthProviders();
|
const { data } = await apiClient.authProvider.listAuthProviders();
|
||||||
return data;
|
return data;
|
||||||
},
|
},
|
||||||
|
onSuccess(data) {
|
||||||
|
fuse = new Fuse(data, {
|
||||||
|
keys: ["name", "displayName"],
|
||||||
|
useExtendedSearch: true,
|
||||||
|
threshold: 0.2,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const keyword = ref("");
|
||||||
|
let fuse: Fuse<ListedAuthProvider> | undefined = undefined;
|
||||||
|
|
||||||
|
const searchResults = computed(() => {
|
||||||
|
if (!fuse || !keyword.value) {
|
||||||
|
return authProviders.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return fuse?.search(keyword.value).map((item) => item.item);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -39,6 +59,7 @@ const {
|
||||||
>
|
>
|
||||||
<div class="flex w-full flex-1 sm:w-auto">
|
<div class="flex w-full flex-1 sm:w-auto">
|
||||||
<FormKit
|
<FormKit
|
||||||
|
v-model="keyword"
|
||||||
:placeholder="$t('core.common.placeholder.search')"
|
:placeholder="$t('core.common.placeholder.search')"
|
||||||
type="text"
|
type="text"
|
||||||
></FormKit>
|
></FormKit>
|
||||||
|
@ -52,7 +73,7 @@ const {
|
||||||
class="box-border h-full w-full divide-y divide-gray-100"
|
class="box-border h-full w-full divide-y divide-gray-100"
|
||||||
role="list"
|
role="list"
|
||||||
>
|
>
|
||||||
<li v-for="(authProvider, index) in authProviders" :key="index">
|
<li v-for="(authProvider, index) in searchResults" :key="index">
|
||||||
<AuthProviderListItem
|
<AuthProviderListItem
|
||||||
:auth-provider="authProvider"
|
:auth-provider="authProvider"
|
||||||
@reload="refetch"
|
@reload="refetch"
|
||||||
|
|
Loading…
Reference in New Issue