refactor: use tanstack query to refactor plugins fetching (#876)

#### What type of PR is this?

/kind improvement

#### What this PR does / why we need it:

使用 [TanStack Query](https://github.com/TanStack/query) 重构插件管理列表的数据请求相关逻辑。

#### Which issue(s) this PR fixes:

Ref halo-dev/halo#3360

#### Special notes for your reviewer:

测试方式：

1. 需要 `pnpm install`
2. 插件管理页面，安装若干插件。
3. 测试分页、条件筛选等逻辑是否正常。

#### Does this PR introduce a user-facing change?

```release-note
None
```

package.json

@@ -45,6 +45,7 @@
     "@halo-dev/components": "workspace:*",
     "@halo-dev/console-shared": "workspace:*",
     "@halo-dev/richtext-editor": "0.0.0-alpha.19",
+    "@tanstack/vue-query": "^4.24.10",
     "@tiptap/extension-character-count": "^2.0.0-beta.202",
     "@uppy/core": "^3.0.4",
     "@uppy/dashboard": "^3.2.0",

src/main.ts

@@ -21,13 +21,15 @@ import { useSystemStatesStore } from "./stores/system-states";
 import { useUserStore } from "./stores/user";
 import { useSystemConfigMapStore } from "./stores/system-configmap";
 import i18n from "./locales";
+import { VueQueryPlugin } from "@tanstack/vue-query";
 
 const app = createApp(App);
 
 setupComponents(app);
 
 app.use(createPinia());
 app.use(i18n);
+app.use(VueQueryPlugin);
 
 function registerModule(pluginModule: PluginModule, core: boolean) {
   if (pluginModule.components) {

src/modules/system/plugins/PluginDetail.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import { VSwitch, VTag } from "@halo-dev/components";
 import type { Ref } from "vue";
-import { computed, inject, ref, watchEffect } from "vue";
+import { computed, inject } from "vue";
 import { apiClient } from "@/utils/api-client";
 import type { Plugin, Role } from "@halo-dev/api-client";
 import { pluginLabels } from "@/constants/labels";
 import { rbacAnnotations } from "@/constants/annotations";
 import { usePluginLifeCycle } from "./composables/use-plugin";
 import { formatDatetime } from "@/utils/date";
+import { useQuery } from "@tanstack/vue-query";
 
 const plugin = inject<Ref<Plugin | undefined>>("plugin");
 const { changeStatus, isStarted } = usePluginLifeCycle(plugin);
@@ -17,24 +18,22 @@ interface RoleTemplateGroup {
   roles: Role[];
 }
 
-const pluginRoleTemplates = ref<Role[]>([]);
-
-const handleFetchRoles = async () => {
-  try {
+const { data: pluginRoleTemplates } = useQuery({
+  queryKey: ["plugin-roles", plugin?.value?.metadata.name],
+  queryFn: async () => {
     const { data } = await apiClient.extension.role.listv1alpha1Role({
       page: 0,
       size: 0,
       labelSelector: [`${pluginLabels.NAME}=${plugin?.value?.metadata.name}`],
     });
-    pluginRoleTemplates.value = data.items;
-  } catch (e) {
-    console.error(e);
-  }
-};
+
+    return data.items;
+  },
+});
 
 const pluginRoleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
   const groups: RoleTemplateGroup[] = [];
-  pluginRoleTemplates.value.forEach((role) => {
+  pluginRoleTemplates.value?.forEach((role) => {
     const group = groups.find(
       (group) =>
         group.module === role.metadata.annotations?.[rbacAnnotations.MODULE]
@@ -50,12 +49,6 @@ const pluginRoleTemplateGroups = computed<RoleTemplateGroup[]>(() => {
   });
   return groups;
 });
-
-watchEffect(() => {
-  if (plugin?.value) {
-    handleFetchRoles();
-  }
-});
 </script>
 
 <template>