refactor: use tanstack query to refactor attachments-related fetching (…

…#878)

#### 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. 测试附件管理页面的筛选、存储策略、分组等业务。
2. 测试附件选择模态框组件。

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

```release-note
None
```

src/components/editor/DefaultEditor.vue

@@ -339,7 +339,7 @@ const editor = useEditor({
 });
 
 // image drag and paste upload
-const { policies } = useFetchAttachmentPolicy({ fetchOnMounted: true });
+const { policies } = useFetchAttachmentPolicy();
 
 type Task = {
   file: File;
@@ -349,7 +349,7 @@ type Task = {
 const uploadQueue: queueAsPromised<Task> = fastq.promise(asyncWorker, 1);
 
 async function asyncWorker(arg: Task): Promise<void> {
-  if (!policies.value.length) {
+  if (!policies.value?.length) {
     Toast.warning("目前没有可用的存储策略");
     return;
   }

src/modules/contents/attachments/AttachmentList.vue

@@ -51,10 +51,8 @@ const policyVisible = ref(false);
 const uploadVisible = ref(false);
 const detailVisible = ref(false);
 
-const { policies } = useFetchAttachmentPolicy({ fetchOnMounted: true });
-const { groups, handleFetchGroups } = useFetchAttachmentGroup({
-  fetchOnMounted: true,
-});
+const { policies } = useFetchAttachmentPolicy();
+const { groups, handleFetchGroups } = useFetchAttachmentGroup();
 
 const selectedGroup = ref<Group>();
 
@@ -85,39 +83,37 @@ const SortItems: SortItem[] = [
 
 const selectedPolicy = ref<Policy>();
 const selectedUser = ref<User>();
-const keyword = ref<string>("");
 const selectedSortItem = ref<SortItem>();
-
 const selectedSortItemValue = computed(() => {
   return selectedSortItem.value?.value;
 });
 
 function handleSelectPolicy(policy: Policy | undefined) {
   selectedPolicy.value = policy;
-  handleFetchAttachments({ page: 1 });
+  page.value = 1;
 }
 
 function handleSelectUser(user: User | undefined) {
   selectedUser.value = user;
-  handleFetchAttachments({ page: 1 });
+  page.value = 1;
 }
 
 function handleSortItemChange(sortItem?: SortItem) {
   selectedSortItem.value = sortItem;
-  handleFetchAttachments({ page: 1 });
+  page.value = 1;
 }
 
 function handleKeywordChange() {
   const keywordNode = getNode("keywordInput");
   if (keywordNode) {
     keyword.value = keywordNode._value as string;
   }
-  handleFetchAttachments({ page: 1 });
+  page.value = 1;
 }
 
 function handleClearKeyword() {
   keyword.value = "";
-  handleFetchAttachments({ page: 1 });
+  page.value = 1;
 }
 
 const hasFilters = computed(() => {
@@ -134,19 +130,24 @@ function handleClearFilters() {
   selectedUser.value = undefined;
   selectedSortItem.value = undefined;
   keyword.value = "";
-  handleFetchAttachments({ page: 1 });
+  page.value = 1;
 }
 
+const keyword = ref<string>("");
+const page = ref<number>(1);
+const size = ref<number>(20);
+
 const {
   attachments,
   selectedAttachment,
   selectedAttachments,
   checkedAll,
-  loading,
+  isLoading,
+  isFetching,
+  total,
   handleFetchAttachments,
   handleSelectNext,
   handleSelectPrevious,
-  handlePaginationChange,
   handleDelete,
   handleDeleteInBatch,
   handleCheckAll,
@@ -159,6 +160,8 @@ const {
   user: selectedUser,
   keyword: keyword,
   sort: selectedSortItemValue,
+  page: page,
+  size: size,
 });
 
 const handleMove = async (group: Group) => {
@@ -209,21 +212,16 @@ const onDetailModalClose = () => {
   selectedAttachment.value = undefined;
   nameQuery.value = undefined;
   nameQueryAttachment.value = undefined;
-  handleFetchAttachments({ mute: true });
+  handleFetchAttachments();
 };
 
 const onUploadModalClose = () => {
   routeQueryAction.value = undefined;
-  handleFetchAttachments({ mute: true });
-};
-
-const onGroupChange = () => {
-  handleReset();
   handleFetchAttachments();
 };
 
 const getPolicyName = (name: string | undefined) => {
-  const policy = policies.value.find((p) => p.metadata.name === name);
+  const policy = policies.value?.find((p) => p.metadata.name === name);
   return policy?.spec.displayName;
 };
 
@@ -548,7 +546,7 @@ onMounted(() => {
                       >
                         <IconRefreshLine
                           v-tooltip="`刷新`"
-                          :class="{ 'animate-spin text-gray-900': loading }"
+                          :class="{ 'animate-spin text-gray-900': isFetching }"
                           class="h-4 w-4 text-gray-600 group-hover:text-gray-900"
                         />
                       </div>
@@ -562,15 +560,15 @@ onMounted(() => {
           <div :style="`${viewType === 'list' ? 'padding:12px 16px 0' : ''}`">
             <AttachmentGroupList
               v-model:selected-group="selectedGroup"
-              @select="onGroupChange"
+              @select="handleReset"
               @update="handleFetchGroups"
               @reload-attachments="handleFetchAttachments"
             />
           </div>
 
-          <VLoading v-if="loading" />
+          <VLoading v-if="isLoading" />
 
-          <Transition v-else-if="!attachments.total" appear name="fade">
+          <Transition v-else-if="!attachments?.length" appear name="fade">
             <VEmpty
               message="当前分组没有附件，你可以尝试刷新或者上传附件"
               title="当前分组没有附件"
@@ -600,7 +598,7 @@ onMounted(() => {
                 role="list"
               >
                 <VCard
-                  v-for="(attachment, index) in attachments.items"
+                  v-for="(attachment, index) in attachments"
                   :key="index"
                   :body-class="['!p-0']"
                   :class="{
@@ -680,10 +678,7 @@ onMounted(() => {
                 class="box-border h-full w-full divide-y divide-gray-100"
                 role="list"
               >
-                <li
-                  v-for="(attachment, index) in attachments.items"
-                  :key="index"
-                >
+                <li v-for="(attachment, index) in attachments" :key="index">
                   <VEntity :is-selected="isChecked(attachment)">
                     <template
                       v-if="
@@ -797,11 +792,10 @@ onMounted(() => {
           <template #footer>
             <div class="bg-white sm:flex sm:items-center sm:justify-end">
               <VPagination
-                :page="attachments.page"
-                :size="attachments.size"
-                :total="attachments.total"
+                v-model:page="page"
+                v-model:size="size"
+                :total="total"
                 :size-options="[60, 120, 200]"
-                @change="handlePaginationChange"
               />
             </div>
           </template>

src/modules/contents/attachments/components/AttachmentDetailModal.vue

@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace, VTag } from "@halo-dev/components";
 import LazyImage from "@/components/image/LazyImage.vue";
-import type { Attachment, Policy } from "@halo-dev/api-client";
+import type { Attachment } from "@halo-dev/api-client";
 import prettyBytes from "pretty-bytes";
-import { ref, watch, watchEffect } from "vue";
+import { computed, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { isImage } from "@/utils/image";
 import { formatDatetime } from "@/utils/date";
 import { useFetchAttachmentGroup } from "../composables/use-attachment-group";
+import { useQuery } from "@tanstack/vue-query";
 
 const props = withDefaults(
   defineProps<{
@@ -27,43 +28,40 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const { groups, handleFetchGroups } = useFetchAttachmentGroup();
+const { groups } = useFetchAttachmentGroup();
 
-const policy = ref<Policy>();
 const onlyPreview = ref(false);
 
-watchEffect(async () => {
-  if (props.attachment) {
-    const { policyName } = props.attachment.spec;
-    if (!policyName) {
+const policyName = computed(() => {
+  return props.attachment?.spec.policyName;
+});
+
+const { data: policy } = useQuery({
+  queryKey: ["attachment-policy", policyName],
+  queryFn: async () => {
+    if (!policyName.value) {
       return;
     }
+
     const { data } =
       await apiClient.extension.storage.policy.getstorageHaloRunV1alpha1Policy({
-        name: policyName,
+        name: policyName.value,
       });
-    policy.value = data;
-  }
-});
 
-watch(
-  () => props.visible,
-  (newValue) => {
-    if (newValue) {
-      handleFetchGroups();
-    }
-  }
-);
+    return data;
+  },
+  refetchOnWindowFocus: false,
+  enabled: computed(() => !!policyName.value),
+});
 
 const getGroupName = (name: string | undefined) => {
-  const group = groups.value.find((group) => group.metadata.name === name);
+  const group = groups.value?.find((group) => group.metadata.name === name);
   return group?.spec.displayName || name;
 };
 
 const onVisibleChange = (visible: boolean) => {
   emit("update:visible", visible);
   if (!visible) {
-    policy.value = undefined;
     onlyPreview.value = false;
     emit("close");
   }

src/modules/contents/attachments/components/AttachmentGroupList.vue

@@ -163,9 +163,9 @@ const handleDeleteWithAttachments = (group: Group) => {
 };
 
 watch(
-  () => groups.value.length,
+  () => groups.value?.length,
   () => {
-    const allGroups = [...defaultGroups, ...groups.value];
+    const allGroups = [...defaultGroups, ...(groups.value || [])];
     const groupIndex = allGroups.findIndex(
       (group) => group.metadata.name === routeQuery.value
     );
@@ -178,9 +178,8 @@ watch(
 
 onMounted(async () => {
   await handleFetchGroups();
-
   if (routeQuery.value && !props.readonly) {
-    const allGroups = [...defaultGroups, ...groups.value];
+    const allGroups = [...defaultGroups, ...(groups.value || [])];
     const group = allGroups.find(
       (group) => group.metadata.name === routeQuery.value
     );

src/modules/contents/attachments/components/AttachmentPoliciesModal.vue

@@ -12,7 +12,7 @@ import {
   Toast,
 } from "@halo-dev/components";
 import AttachmentPolicyEditingModal from "./AttachmentPolicyEditingModal.vue";
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import type { Policy, PolicyTemplate } from "@halo-dev/api-client";
 import { formatDatetime } from "@/utils/date";
 import {
@@ -21,7 +21,7 @@ import {
 } from "../composables/use-attachment-policy";
 import { apiClient } from "@/utils/api-client";
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     visible: boolean;
   }>(),
@@ -35,11 +35,8 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const { policies, loading, handleFetchPolicies } = useFetchAttachmentPolicy();
-const { policyTemplates, handleFetchPolicyTemplates } =
-  useFetchAttachmentPolicyTemplate({
-    fetchOnMounted: false,
-  });
+const { policies, isLoading, handleFetchPolicies } = useFetchAttachmentPolicy();
+const { policyTemplates } = useFetchAttachmentPolicyTemplate();
 
 const selectedPolicy = ref<Policy>();
 
@@ -105,16 +102,6 @@ const onEditingModalClose = () => {
   selectedPolicy.value = undefined;
   handleFetchPolicies();
 };
-
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) {
-      handleFetchPolicyTemplates();
-      handleFetchPolicies();
-    }
-  }
-);
 </script>
 <template>
   <VModal
@@ -150,7 +137,7 @@ watch(
       </FloatingDropdown>
     </template>
     <VEmpty
-      v-if="!policies.length && !loading"
+      v-if="!policies?.length && !isLoading"
       message="当前没有可用的存储策略，你可以尝试刷新或者新建策略"
       title="当前没有可用的存储策略"
     >