refactor: use tanstack query to refactor post-related fetching (#879)

#### 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 https://github.com/halo-dev/halo/issues/3360

#### Special notes for your reviewer:

测试方式：

1. 测试文章相关联的页面，包括文章管理、分类、标签。

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

```release-note
None
```

src/components/dropdown-selector/CategoryDropdownSelector.vue

@@ -20,9 +20,7 @@ const emit = defineEmits<{
   (event: "select", category?: Category): void;
 }>();
 
-const { categories, handleFetchCategories } = usePostCategory({
+const { categories } = usePostCategory();
-  fetchOnMounted: false,
-});
 
 const handleSelect = (category: Category) => {
   if (
@@ -39,7 +37,6 @@ const handleSelect = (category: Category) => {
 };
 
 function onDropdownShow() {
-  handleFetchCategories();
   setTimeout(() => {
     setFocus("categoryDropdownSelectorInput");
   }, 200);
@@ -53,11 +50,14 @@ let fuse: Fuse<Category> | undefined = undefined;
 watch(
   () => categories.value,
   () => {
-    fuse = new Fuse(categories.value, {
+    fuse = new Fuse(categories.value || [], {
       keys: ["spec.displayName", "metadata.name"],
       useExtendedSearch: true,
       threshold: 0.2,
     });
+  },
+  {
+    immediate: true,
   }
 );
 

src/components/dropdown-selector/TagDropdownSelector.vue

@@ -21,7 +21,7 @@ const emit = defineEmits<{
   (event: "select", tag?: Tag): void;
 }>();
 
-const { tags, handleFetchTags } = usePostTag({ fetchOnMounted: false });
+const { tags } = usePostTag();
 
 const handleSelect = (tag: Tag) => {
   if (props.selected && tag.metadata.name === props.selected.metadata.name) {
@@ -35,7 +35,6 @@ const handleSelect = (tag: Tag) => {
 };
 
 function onDropdownShow() {
-  handleFetchTags();
   setTimeout(() => {
     setFocus("tagDropdownSelectorInput");
   }, 200);
@@ -49,11 +48,14 @@ let fuse: Fuse<Tag> | undefined = undefined;
 watch(
   () => tags.value,
   () => {
-    fuse = new Fuse(tags.value, {
+    fuse = new Fuse(tags.value || [], {
       keys: ["spec.displayName", "metadata.name", "spec.email"],
       useExtendedSearch: true,
       threshold: 0.2,
     });
+  },
+  {
+    immediate: true,
   }
 );
 

src/formkit/inputs/category-select/CategorySelect.vue

@@ -35,9 +35,7 @@ const multiple = computed(() => {
   return multiple === "true";
 });
 
-const { categories, categoriesTree, handleFetchCategories } = usePostCategory({
+const { categories, categoriesTree, handleFetchCategories } = usePostCategory();
-  fetchOnMounted: true,
-});
 
 provide<Ref<CategoryTree[]>>("categoriesTree", categoriesTree);
 
@@ -69,7 +67,7 @@ const searchResults = computed(() => {
 watch(
   () => searchResults.value,
   (value) => {
-    if (value?.length > 0 && text.value) {
+    if (value?.length && text.value) {
       selectedCategory.value = value[0];
       scrollToSelected();
     } else {
@@ -81,11 +79,14 @@ watch(
 watch(
   () => categories.value,
   () => {
-    fuse = new Fuse(categories.value, {
+    fuse = new Fuse(categories.value || [], {
       keys: ["spec.displayName", "spec.slug"],
       useExtendedSearch: true,
       threshold: 0.2,
     });
+  },
+  {
+    immediate: true,
   }
 );
 
@@ -94,14 +95,14 @@ const selectedCategories = computed(() => {
     const currentValue = props.context._value || [];
     return currentValue
       .map((categoryName): Category | undefined => {
-        return categories.value.find(
+        return categories.value?.find(
           (category) => category.metadata.name === categoryName
         );
       })
       .filter(Boolean) as Category[];
   }
 
-  const category = categories.value.find(
+  const category = categories.value?.find(
     (category) => category.metadata.name === props.context._value
   );
   return [category].filter(Boolean) as Category[];
@@ -140,6 +141,8 @@ const handleSelect = (category: CategoryTree | Category) => {
 };
 
 const handleKeydown = (e: KeyboardEvent) => {
+  if (!searchResults.value) return;
+
   if (e.key === "ArrowDown") {
     e.preventDefault();
 
@@ -217,7 +220,7 @@ const handleCreateCategory = async () => {
           description: "",
           cover: "",
           template: "",
-          priority: categories.value.length + 1,
+          priority: categories.value?.length || 0 + 1,
           children: [],
         },
         apiVersion: "content.halo.run/v1alpha1",
@@ -286,7 +289,7 @@ const handleDelete = () => {
     <div v-if="dropdownVisible" :class="context.classes['dropdown-wrapper']">
       <ul class="p-1">
         <li
-          v-if="text.trim() && searchResults.length <= 0"
+          v-if="text.trim() && !searchResults?.length"
           v-permission="['system:posts:manage']"
           class="group flex cursor-pointer items-center justify-between rounded bg-gray-100 p-2"
         >

src/formkit/inputs/category-select/components/CategoryTag.vue

@@ -24,7 +24,7 @@ const label = computed(() => {
     props.category.metadata.name
   );
   return categories
-    .map((category: CategoryTree) => category.spec.displayName)
+    ?.map((category: CategoryTree) => category.spec.displayName)
     .join(" / ");
 });
 </script>

src/formkit/inputs/category-select/components/SearchResultListItem.vue

@@ -33,7 +33,7 @@ const label = computed(() => {
     props.category.metadata.name
   );
   return categories
-    .map((category: CategoryTree) => category.spec.displayName)
+    ?.map((category: CategoryTree) => category.spec.displayName)
     .join(" / ");
 });
 </script>

src/formkit/inputs/tag-select/TagSelect.vue

@@ -2,7 +2,7 @@
 import { apiClient } from "@/utils/api-client";
 import type { FormKitFrameworkContext } from "@formkit/core";
 import type { Tag } from "@halo-dev/api-client";
-import { computed, onMounted, ref, watch, type PropType } from "vue";
+import { computed, ref, watch, type PropType } from "vue";
 import PostTag from "@/modules/contents/posts/tags/components/PostTag.vue";
 import {
   IconCheckboxCircle,
@@ -13,6 +13,7 @@ import { onClickOutside } from "@vueuse/core";
 import Fuse from "fuse.js";
 import { usePermission } from "@/utils/permission";
 import { slugify } from "transliteration";
+import { usePostTag } from "@/modules/contents/posts/tags/composables/use-post-tag";
 
 const { currentUserHasPermission } = usePermission();
 
@@ -36,7 +37,6 @@ const multiple = computed(() => {
   return multiple === "true";
 });
 
-const postTags = ref<Tag[]>([] as Tag[]);
 const selectedTag = ref<Tag>();
 const dropdownVisible = ref(false);
 const text = ref("");
@@ -46,8 +46,9 @@ onClickOutside(wrapperRef, () => {
   dropdownVisible.value = false;
 });
 
-// search
+const { tags: postTags, handleFetchTags } = usePostTag();
 
+// search
 let fuse: Fuse<Tag> | undefined = undefined;
 
 const searchResults = computed(() => {
@@ -61,7 +62,7 @@ const searchResults = computed(() => {
 watch(
   () => searchResults.value,
   (value) => {
-    if (value?.length > 0 && text.value) {
+    if (value?.length && text.value) {
       selectedTag.value = value[0];
       scrollToSelected();
     } else {
@@ -70,32 +71,31 @@ watch(
   }
 );
 
-const handleFetchTags = async () => {
+watch(
-  const { data } = await apiClient.extension.tag.listcontentHaloRunV1alpha1Tag({
+  () => postTags.value,
-    page: 0,
+  () => {
-    size: 0,
+    fuse = new Fuse(postTags.value || [], {
-  });
+      keys: ["spec.displayName", "metadata.name", "spec.email"],
-
+      useExtendedSearch: true,
-  postTags.value = data.items;
+      threshold: 0.2,
-
+    });
-  fuse = new Fuse(data.items, {
+  },
-    keys: ["spec.displayName", "spec.slug"],
+  {
-    useExtendedSearch: true,
+    immediate: true,
-    threshold: 0.2,
+  }
-  });
+);
-};
 
 const selectedTags = computed(() => {
   if (multiple.value) {
     const selectedTagNames = (props.context._value as string[]) || [];
     return selectedTagNames
       .map((tagName): Tag | undefined => {
-        return postTags.value.find((tag) => tag.metadata.name === tagName);
+        return postTags.value?.find((tag) => tag.metadata.name === tagName);
       })
       .filter(Boolean) as Tag[];
   }
 
-  const tag = postTags.value.find(
+  const tag = postTags.value?.find(
     (tag) => tag.metadata.name === props.context._value
   );
 
@@ -129,6 +129,8 @@ const handleSelect = (tag: Tag) => {
 };
 
 const handleKeydown = (e: KeyboardEvent) => {
+  if (!searchResults.value) return;
+
   if (e.key === "ArrowDown") {
     e.preventDefault();
 
@@ -234,8 +236,6 @@ const handleDelete = () => {
     props.context.node.input("");
   }
 };
-
-onMounted(handleFetchTags);
 </script>
 
 <template>
@@ -279,7 +279,7 @@ onMounted(handleFetchTags);
     <div v-if="dropdownVisible" :class="context.classes['dropdown-wrapper']">
       <ul class="p-1">
         <li
-          v-if="text.trim() && searchResults.length <= 0"
+          v-if="text.trim() && !searchResults?.length"
           v-permission="['system:posts:manage']"
           class="group flex cursor-pointer items-center justify-between rounded bg-gray-100 p-2"
           @click="handleCreateTag"

src/modules/contents/posts/DeletedPostList.vue

@@ -18,86 +18,55 @@ import {
   Toast,
 } from "@halo-dev/components";
 import PostTag from "./tags/components/PostTag.vue";
-import { onMounted, ref, watch } from "vue";
+import { ref, watch } from "vue";
-import type { ListedPostList, Post } from "@halo-dev/api-client";
+import type { ListedPost, Post } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { formatDatetime } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
-import { onBeforeRouteLeave } from "vue-router";
 import cloneDeep from "lodash.clonedeep";
 import { getNode } from "@formkit/core";
 import FilterTag from "@/components/filter/FilterTag.vue";
+import { useQuery } from "@tanstack/vue-query";
 
 const { currentUserHasPermission } = usePermission();
 
-const posts = ref<ListedPostList>({
-  page: 1,
-  size: 50,
-  total: 0,
-  items: [],
-  first: true,
-  last: false,
-  hasNext: false,
-  hasPrevious: false,
-  totalPages: 0,
-});
-const loading = ref(false);
 const checkedAll = ref(false);
 const selectedPostNames = ref<string[]>([]);
-const refreshInterval = ref();
 const keyword = ref("");
 
-const handleFetchPosts = async (page?: number) => {
+const page = ref(1);
-  try {
+const size = ref(20);
-    clearInterval(refreshInterval.value);
+const total = ref(0);
-
-    loading.value = true;
-
-    if (page) {
-      posts.value.page = page;
-    }
 
+const {
+  data: posts,
+  isLoading,
+  isFetching,
+  refetch,
+} = useQuery<ListedPost[]>({
+  queryKey: ["deleted-posts", page, size, keyword],
+  queryFn: async () => {
     const { data } = await apiClient.post.listPosts({
       labelSelector: [`content.halo.run/deleted=true`],
-      page: posts.value.page,
+      page: page.value,
-      size: posts.value.size,
+      size: size.value,
       keyword: keyword.value,
     });
-    posts.value = data;
 
-    const deletedPosts = posts.value.items.filter(
+    total.value = data.total;
+
+    return data.items;
+  },
+  refetchOnWindowFocus: false,
+  refetchInterval: (data) => {
+    const deletingPosts = data?.filter(
       (post) =>
         !!post.post.metadata.deletionTimestamp || !post.post.spec.deleted
     );
-
+    return deletingPosts?.length ? 3000 : false;
-    if (deletedPosts.length) {
+  },
-      refreshInterval.value = setInterval(() => {
-        handleFetchPosts();
-      }, 3000);
-    }
-  } catch (e) {
-    console.error("Failed to fetch deleted posts", e);
-  } finally {
-    loading.value = false;
-  }
-};
-
-onBeforeRouteLeave(() => {
-  clearInterval(refreshInterval.value);
 });
 
-const handlePaginationChange = ({
-  page,
-  size,
-}: {
-  page: number;
-  size: number;
-}) => {
-  posts.value.page = page;
-  posts.value.size = size;
-  handleFetchPosts();
-};
-
 const checkSelection = (post: Post) => {
   return selectedPostNames.value.includes(post.metadata.name);
 };
@@ -107,7 +76,7 @@ const handleCheckAllChange = (e: Event) => {
 
   if (checked) {
     selectedPostNames.value =
-      posts.value.items.map((post) => {
+      posts.value?.map((post) => {
         return post.post.metadata.name;
       }) || [];
   } else {
@@ -124,7 +93,7 @@ const handleDeletePermanently = async (post: Post) => {
       await apiClient.extension.post.deletecontentHaloRunV1alpha1Post({
         name: post.metadata.name,
       });
-      await handleFetchPosts();
+      await refetch();
 
       Toast.success("删除成功");
     },
@@ -144,7 +113,7 @@ const handleDeletePermanentlyInBatch = async () => {
           });
         })
       );
-      await handleFetchPosts();
+      await refetch();
       selectedPostNames.value = [];
 
       Toast.success("删除成功");
@@ -163,7 +132,8 @@ const handleRecovery = async (post: Post) => {
         name: postToUpdate.metadata.name,
         post: postToUpdate,
       });
-      await handleFetchPosts();
+
+      await refetch();
 
       Toast.success("恢复成功");
     },
@@ -177,7 +147,7 @@ const handleRecoveryInBatch = async () => {
     onConfirm: async () => {
       await Promise.all(
         selectedPostNames.value.map((name) => {
-          const post = posts.value.items.find(
+          const post = posts.value?.find(
             (item) => item.post.metadata.name === name
           )?.post;
 
@@ -185,14 +155,19 @@ const handleRecoveryInBatch = async () => {
             return Promise.resolve();
           }
 
-          post.spec.deleted = false;
           return apiClient.extension.post.updatecontentHaloRunV1alpha1Post({
             name: post.metadata.name,
-            post: post,
+            post: {
+              ...post,
+              spec: {
+                ...post.spec,
+                deleted: false,
+              },
+            },
           });
         })
       );
-      await handleFetchPosts();
+      await refetch();
       selectedPostNames.value = [];
 
       Toast.success("恢复成功");
@@ -201,11 +176,7 @@ const handleRecoveryInBatch = async () => {
 };
 
 watch(selectedPostNames, (newValue) => {
-  checkedAll.value = newValue.length === posts.value.items?.length;
+  checkedAll.value = newValue.length === posts.value?.length;
-});
-
-onMounted(() => {
-  handleFetchPosts();
 });
 
 function handleKeywordChange() {
@@ -213,12 +184,12 @@ function handleKeywordChange() {
   if (keywordNode) {
     keyword.value = keywordNode._value as string;
   }
-  handleFetchPosts(1);
+  page.value = 1;
 }
 
 function handleClearKeyword() {
   keyword.value = "";
-  handleFetchPosts(1);
+  page.value = 1;
 }
 </script>
 <template>
@@ -294,10 +265,10 @@ function handleClearKeyword() {
                 <div class="flex flex-row gap-2">
                   <div
                     class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                    @click="handleFetchPosts()"
+                    @click="refetch()"
                   >
                     <IconRefreshLine
-                      :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>
@@ -308,16 +279,16 @@ function handleClearKeyword() {
         </div>
       </template>
 
-      <VLoading v-if="loading" />
+      <VLoading v-if="isLoading" />
 
-      <Transition v-else-if="!posts.items.length" appear name="fade">
+      <Transition v-else-if="!posts?.length" appear name="fade">
         <VEmpty
           message="你可以尝试刷新或者返回文章管理"
           title="没有文章被放入回收站"
         >
           <template #actions>
             <VSpace>
-              <VButton @click="handleFetchPosts">刷新</VButton>
+              <VButton @click="refetch">刷新</VButton>
               <VButton :route="{ name: 'Posts' }" type="primary">
                 返回
               </VButton>
@@ -331,7 +302,7 @@ function handleClearKeyword() {
           class="box-border h-full w-full divide-y divide-gray-100"
           role="list"
         >
-          <li v-for="(post, index) in posts.items" :key="index">
+          <li v-for="(post, index) in posts" :key="index">
             <VEntity :is-selected="checkSelection(post.post)">
               <template
                 v-if="currentUserHasPermission(['system:posts:manage'])"
@@ -452,11 +423,10 @@ function handleClearKeyword() {
       <template #footer>
         <div class="bg-white sm:flex sm:items-center sm:justify-end">
           <VPagination
-            :page="posts.page"
+            v-model:page="page"
-            :size="posts.size"
+            v-model:size="size"
-            :total="posts.total"
+            :total="total"
             :size-options="[20, 30, 50, 100]"
-            @change="handlePaginationChange"
           />
         </div>
       </template>

src/modules/contents/posts/PostList.vue

@@ -28,282 +28,32 @@ import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSel
 import CategoryDropdownSelector from "@/components/dropdown-selector/CategoryDropdownSelector.vue";
 import PostSettingModal from "./components/PostSettingModal.vue";
 import PostTag from "../posts/tags/components/PostTag.vue";
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import type {
   User,
   Category,
-  ListedPostList,
   Post,
   Tag,
+  ListedPost,
 } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { formatDatetime } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
-import { onBeforeRouteLeave } from "vue-router";
 import { postLabels } from "@/constants/labels";
 import FilterTag from "@/components/filter/FilterTag.vue";
 import FilteCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
 import TagDropdownSelector from "@/components/dropdown-selector/TagDropdownSelector.vue";
+import { useQuery } from "@tanstack/vue-query";
 
 const { currentUserHasPermission } = usePermission();
 
-const posts = ref<ListedPostList>({
-  page: 1,
-  size: 20,
-  total: 0,
-  items: [],
-  first: true,
-  last: false,
-  hasNext: false,
-  hasPrevious: false,
-  totalPages: 0,
-});
-const loading = ref(false);
 const settingModal = ref(false);
 const selectedPost = ref<Post>();
 const checkedAll = ref(false);
 const selectedPostNames = ref<string[]>([]);
-const refreshInterval = ref();
-
-const handleFetchPosts = async (options?: {
-  mute?: boolean;
-  page?: number;
-}) => {
-  try {
-    clearInterval(refreshInterval.value);
-
-    if (!options?.mute) {
-      loading.value = true;
-    }
-
-    let categories: string[] | undefined;
-    let tags: string[] | undefined;
-    let contributors: string[] | undefined;
-    const labelSelector: string[] = ["content.halo.run/deleted=false"];
-
-    if (selectedCategory.value) {
-      categories = [
-        selectedCategory.value.metadata.name,
-        selectedCategory.value.metadata.name,
-      ];
-    }
-
-    if (selectedTag.value) {
-      tags = [selectedTag.value.metadata.name];
-    }
-
-    if (selectedContributor.value) {
-      contributors = [selectedContributor.value.metadata.name];
-    }
-
-    if (selectedPublishStatusItem.value.value !== undefined) {
-      labelSelector.push(
-        `${postLabels.PUBLISHED}=${selectedPublishStatusItem.value.value}`
-      );
-    }
-
-    if (options?.page) {
-      posts.value.page = options.page;
-    }
-
-    const { data } = await apiClient.post.listPosts({
-      labelSelector,
-      page: posts.value.page,
-      size: posts.value.size,
-      visible: selectedVisibleItem.value?.value,
-      sort: selectedSortItem.value?.sort,
-      sortOrder: selectedSortItem.value?.sortOrder,
-      keyword: keyword.value,
-      category: categories,
-      tag: tags,
-      contributor: contributors,
-    });
-    posts.value = data;
-
-    // When an post is in the process of deleting or publishing, the list needs to be refreshed regularly
-    const abnormalPosts = posts.value.items.filter((post) => {
-      const { spec, metadata, status } = post.post;
-      return (
-        spec.deleted ||
-        (spec.publish && metadata.labels?.[postLabels.PUBLISHED] !== "true") ||
-        (spec.releaseSnapshot === spec.headSnapshot && status?.inProgress)
-      );
-    });
-
-    if (abnormalPosts.length) {
-      refreshInterval.value = setInterval(() => {
-        handleFetchPosts({ mute: true });
-      }, 3000);
-    }
-  } catch (e) {
-    console.error("Failed to fetch posts", e);
-  } finally {
-    loading.value = false;
-  }
-};
-
-onBeforeRouteLeave(() => {
-  clearInterval(refreshInterval.value);
-});
-
-const handlePaginationChange = ({
-  page,
-  size,
-}: {
-  page: number;
-  size: number;
-}) => {
-  posts.value.page = page;
-  posts.value.size = size;
-  handleFetchPosts();
-};
-
-const handleOpenSettingModal = async (post: Post) => {
-  const { data } = await apiClient.extension.post.getcontentHaloRunV1alpha1Post(
-    {
-      name: post.metadata.name,
-    }
-  );
-  selectedPost.value = data;
-  settingModal.value = true;
-};
-
-const onSettingModalClose = () => {
-  selectedPost.value = undefined;
-  handleFetchPosts({ mute: true });
-};
-
-const handleSelectPrevious = async () => {
-  const { items, hasPrevious } = posts.value;
-  const index = items.findIndex(
-    (post) => post.post.metadata.name === selectedPost.value?.metadata.name
-  );
-  if (index > 0) {
-    const { data } =
-      await apiClient.extension.post.getcontentHaloRunV1alpha1Post({
-        name: items[index - 1].post.metadata.name,
-      });
-    selectedPost.value = data;
-    return;
-  }
-  if (index === 0 && hasPrevious) {
-    posts.value.page--;
-    await handleFetchPosts();
-    selectedPost.value = posts.value.items[posts.value.items.length - 1].post;
-  }
-};
-
-const handleSelectNext = async () => {
-  const { items, hasNext } = posts.value;
-  const index = items.findIndex(
-    (post) => post.post.metadata.name === selectedPost.value?.metadata.name
-  );
-  if (index < items.length - 1) {
-    const { data } =
-      await apiClient.extension.post.getcontentHaloRunV1alpha1Post({
-        name: items[index + 1].post.metadata.name,
-      });
-    selectedPost.value = data;
-    return;
-  }
-  if (index === items.length - 1 && hasNext) {
-    posts.value.page++;
-    await handleFetchPosts();
-    selectedPost.value = posts.value.items[0].post;
-  }
-};
-
-const checkSelection = (post: Post) => {
-  return (
-    post.metadata.name === selectedPost.value?.metadata.name ||
-    selectedPostNames.value.includes(post.metadata.name)
-  );
-};
-
-const getPublishStatus = (post: Post) => {
-  const { labels } = post.metadata;
-  return labels?.[postLabels.PUBLISHED] === "true" ? "已发布" : "未发布";
-};
-
-const isPublishing = (post: Post) => {
-  const { spec, status, metadata } = post;
-  return (
-    (spec.publish && metadata.labels?.[postLabels.PUBLISHED] !== "true") ||
-    (spec.releaseSnapshot === spec.headSnapshot && status?.inProgress)
-  );
-};
-
-const handleCheckAllChange = (e: Event) => {
-  const { checked } = e.target as HTMLInputElement;
-
-  if (checked) {
-    selectedPostNames.value =
-      posts.value.items.map((post) => {
-        return post.post.metadata.name;
-      }) || [];
-  } else {
-    selectedPostNames.value = [];
-  }
-};
-
-const handleDelete = async (post: Post) => {
-  Dialog.warning({
-    title: "确定要删除该文章吗？",
-    description: "该操作会将文章放入回收站，后续可以从回收站恢复",
-    confirmType: "danger",
-    onConfirm: async () => {
-      await apiClient.post.recyclePost({
-        name: post.metadata.name,
-      });
-      await handleFetchPosts();
-
-      Toast.success("删除成功");
-    },
-  });
-};
-
-const handleDeleteInBatch = async () => {
-  Dialog.warning({
-    title: "确定要删除选中的文章吗？",
-    description: "该操作会将文章放入回收站，后续可以从回收站恢复",
-    confirmType: "danger",
-    onConfirm: async () => {
-      await Promise.all(
-        selectedPostNames.value.map((name) => {
-          const post = posts.value.items.find(
-            (item) => item.post.metadata.name === name
-          )?.post;
-
-          if (!post) {
-            return Promise.resolve();
-          }
-
-          post.spec.deleted = true;
-          return apiClient.extension.post.updatecontentHaloRunV1alpha1Post({
-            name: post.metadata.name,
-            post: post,
-          });
-        })
-      );
-      await handleFetchPosts();
-      selectedPostNames.value = [];
-
-      Toast.success("删除成功");
-    },
-  });
-};
-
-watch(selectedPostNames, (newValue) => {
-  checkedAll.value = newValue.length === posts.value.items?.length;
-});
-
-onMounted(() => {
-  handleFetchPosts();
-});
 
 // Filters
-
 interface VisibleItem {
   label: string;
   value?: "PUBLIC" | "INTERNAL" | "PRIVATE";
@@ -388,32 +138,32 @@ const keyword = ref("");
 
 function handleVisibleItemChange(visibleItem: VisibleItem) {
   selectedVisibleItem.value = visibleItem;
-  handleFetchPosts({ page: 1 });
+  page.value = 1;
 }
 
 function handlePublishStatusItemChange(publishStatusItem: PublishStatuItem) {
   selectedPublishStatusItem.value = publishStatusItem;
-  handleFetchPosts({ page: 1 });
+  page.value = 1;
 }
 
 function handleSortItemChange(sortItem?: SortItem) {
   selectedSortItem.value = sortItem;
-  handleFetchPosts({ page: 1 });
+  page.value = 1;
 }
 
 function handleCategoryChange(category?: Category) {
   selectedCategory.value = category;
-  handleFetchPosts({ page: 1 });
+  page.value = 1;
 }
 
 function handleTagChange(tag?: Tag) {
   selectedTag.value = tag;
-  handleFetchPosts({ page: 1 });
+  page.value = 1;
 }
 
 function handleContributorChange(user?: User) {
   selectedContributor.value = user;
-  handleFetchPosts({ page: 1 });
+  page.value = 1;
 }
 
 function handleKeywordChange() {
@@ -421,12 +171,12 @@ function handleKeywordChange() {
   if (keywordNode) {
     keyword.value = keywordNode._value as string;
   }
-  handleFetchPosts({ page: 1 });
+  page.value = 1;
 }
 
 function handleClearKeyword() {
   keyword.value = "";
-  handleFetchPosts({ page: 1 });
+  page.value = 1;
 }
 
 function handleClearFilters() {
@@ -437,7 +187,7 @@ function handleClearFilters() {
   selectedTag.value = undefined;
   selectedContributor.value = undefined;
   keyword.value = "";
-  handleFetchPosts({ page: 1 });
+  page.value = 1;
 }
 
 const hasFilters = computed(() => {
@@ -451,6 +201,220 @@ const hasFilters = computed(() => {
     keyword.value
   );
 });
+
+const page = ref(1);
+const size = ref(20);
+const total = ref(0);
+const hasPrevious = ref(false);
+const hasNext = ref(false);
+
+const {
+  data: posts,
+  isLoading,
+  isFetching,
+  refetch,
+} = useQuery<ListedPost[]>({
+  queryKey: [
+    "posts",
+    page,
+    size,
+    selectedCategory,
+    selectedTag,
+    selectedContributor,
+    selectedPublishStatusItem,
+    selectedVisibleItem,
+    selectedSortItem,
+    keyword,
+  ],
+  queryFn: async () => {
+    let categories: string[] | undefined;
+    let tags: string[] | undefined;
+    let contributors: string[] | undefined;
+    const labelSelector: string[] = ["content.halo.run/deleted=false"];
+
+    if (selectedCategory.value) {
+      categories = [selectedCategory.value.metadata.name];
+    }
+
+    if (selectedTag.value) {
+      tags = [selectedTag.value.metadata.name];
+    }
+
+    if (selectedContributor.value) {
+      contributors = [selectedContributor.value.metadata.name];
+    }
+
+    if (selectedPublishStatusItem.value.value !== undefined) {
+      labelSelector.push(
+        `${postLabels.PUBLISHED}=${selectedPublishStatusItem.value.value}`
+      );
+    }
+
+    const { data } = await apiClient.post.listPosts({
+      labelSelector,
+      page: page.value,
+      size: size.value,
+      visible: selectedVisibleItem.value?.value,
+      sort: selectedSortItem.value?.sort,
+      sortOrder: selectedSortItem.value?.sortOrder,
+      keyword: keyword.value,
+      category: categories,
+      tag: tags,
+      contributor: contributors,
+    });
+
+    total.value = data.total;
+    hasNext.value = data.hasNext;
+    hasPrevious.value = data.hasPrevious;
+
+    return data.items;
+  },
+  refetchInterval: (data) => {
+    const abnormalPosts = data?.filter((post) => {
+      const { spec, metadata, status } = post.post;
+      return (
+        spec.deleted ||
+        (spec.publish && metadata.labels?.[postLabels.PUBLISHED] !== "true") ||
+        (spec.releaseSnapshot === spec.headSnapshot && status?.inProgress)
+      );
+    });
+
+    return abnormalPosts?.length ? 3000 : false;
+  },
+  refetchOnWindowFocus: false,
+});
+
+const handleOpenSettingModal = async (post: Post) => {
+  const { data } = await apiClient.extension.post.getcontentHaloRunV1alpha1Post(
+    {
+      name: post.metadata.name,
+    }
+  );
+  selectedPost.value = data;
+  settingModal.value = true;
+};
+
+const onSettingModalClose = () => {
+  selectedPost.value = undefined;
+  refetch();
+};
+
+const handleSelectPrevious = async () => {
+  if (!posts.value) return;
+
+  const index = posts.value.findIndex(
+    (post) => post.post.metadata.name === selectedPost.value?.metadata.name
+  );
+
+  if (index > 0) {
+    const { data: previousPost } =
+      await apiClient.extension.post.getcontentHaloRunV1alpha1Post({
+        name: posts.value[index - 1].post.metadata.name,
+      });
+    selectedPost.value = previousPost;
+    return;
+  }
+  if (index === 0 && hasPrevious) {
+    page.value--;
+    await refetch();
+    selectedPost.value = posts.value[posts.value.length - 1].post;
+  }
+};
+
+const handleSelectNext = async () => {
+  if (!posts.value) return;
+
+  const index = posts.value.findIndex(
+    (post) => post.post.metadata.name === selectedPost.value?.metadata.name
+  );
+  if (index < posts.value.length - 1) {
+    const { data: nextPost } =
+      await apiClient.extension.post.getcontentHaloRunV1alpha1Post({
+        name: posts.value[index + 1].post.metadata.name,
+      });
+    selectedPost.value = nextPost;
+    return;
+  }
+  if (index === posts.value.length - 1 && hasNext) {
+    page.value++;
+    await refetch();
+    selectedPost.value = posts.value[0].post;
+  }
+};
+
+const checkSelection = (post: Post) => {
+  return (
+    post.metadata.name === selectedPost.value?.metadata.name ||
+    selectedPostNames.value.includes(post.metadata.name)
+  );
+};
+
+const getPublishStatus = (post: Post) => {
+  const { labels } = post.metadata;
+  return labels?.[postLabels.PUBLISHED] === "true" ? "已发布" : "未发布";
+};
+
+const isPublishing = (post: Post) => {
+  const { spec, status, metadata } = post;
+  return (
+    (spec.publish && metadata.labels?.[postLabels.PUBLISHED] !== "true") ||
+    (spec.releaseSnapshot === spec.headSnapshot && status?.inProgress)
+  );
+};
+
+const handleCheckAllChange = (e: Event) => {
+  const { checked } = e.target as HTMLInputElement;
+
+  if (checked) {
+    selectedPostNames.value =
+      posts.value?.map((post) => {
+        return post.post.metadata.name;
+      }) || [];
+  } else {
+    selectedPostNames.value = [];
+  }
+};
+
+const handleDelete = async (post: Post) => {
+  Dialog.warning({
+    title: "确定要删除该文章吗？",
+    description: "该操作会将文章放入回收站，后续可以从回收站恢复",
+    confirmType: "danger",
+    onConfirm: async () => {
+      await apiClient.post.recyclePost({
+        name: post.metadata.name,
+      });
+      await refetch();
+
+      Toast.success("删除成功");
+    },
+  });
+};
+
+const handleDeleteInBatch = async () => {
+  Dialog.warning({
+    title: "确定要删除选中的文章吗？",
+    description: "该操作会将文章放入回收站，后续可以从回收站恢复",
+    confirmType: "danger",
+    onConfirm: async () => {
+      await Promise.all(
+        selectedPostNames.value.map((name) => {
+          return apiClient.post.recyclePost({
+            name,
+          });
+        })
+      );
+      await refetch();
+      selectedPostNames.value = [];
+
+      Toast.success("删除成功");
+    },
+  });
+};
+
+watch(selectedPostNames, (newValue) => {
+  checkedAll.value = newValue.length === posts.value?.length;
+});
 </script>
 <template>
   <PostSettingModal
@@ -708,11 +672,11 @@ const hasFilters = computed(() => {
                 <div class="flex flex-row gap-2">
                   <div
                     class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                    @click="handleFetchPosts()"
+                    @click="refetch()"
                   >
                     <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>
@@ -722,12 +686,12 @@ const hasFilters = computed(() => {
           </div>
         </div>
       </template>
-      <VLoading v-if="loading" />
+      <VLoading v-if="isLoading" />
-      <Transition v-else-if="!posts.items.length" appear name="fade">
+      <Transition v-else-if="!posts?.length" appear name="fade">
         <VEmpty message="你可以尝试刷新或者新建文章" title="当前没有文章">
           <template #actions>
             <VSpace>
-              <VButton @click="handleFetchPosts">刷新</VButton>
+              <VButton @click="refetch">刷新</VButton>
               <VButton
                 v-permission="['system:posts:manage']"
                 :route="{ name: 'PostEditor' }"
@@ -747,7 +711,7 @@ const hasFilters = computed(() => {
           class="box-border h-full w-full divide-y divide-gray-100"
           role="list"
         >
-          <li v-for="(post, index) in posts.items" :key="index">
+          <li v-for="(post, index) in posts" :key="index">
             <VEntity :is-selected="checkSelection(post.post)">
               <template
                 v-if="currentUserHasPermission(['system:posts:manage'])"
@@ -928,11 +892,10 @@ const hasFilters = computed(() => {
       <template #footer>
         <div class="bg-white sm:flex sm:items-center sm:justify-end">
           <VPagination
-            :page="posts.page"
+            v-model:page="page"
-            :size="posts.size"
+            v-model:size="size"
-            :total="posts.total"
+            :total="total"
             :size-options="[20, 30, 50, 100]"
-            @change="handlePaginationChange"
           />
         </div>
       </template>

src/modules/contents/posts/categories/CategoryList.vue

@@ -38,10 +38,10 @@ const selectedCategory = ref<Category | null>(null);
 const {
   categories,
   categoriesTree,
-  loading,
+  isLoading,
   handleFetchCategories,
   handleDelete,
-} = usePostCategory({ fetchOnMounted: true });
+} = usePostCategory();
 
 const handleUpdateInBatch = useDebounceFn(async () => {
   const categoriesTreeToUpdate = resetCategoriesTreePriority(
@@ -106,14 +106,14 @@ const onEditingModalClose = () => {
           >
             <div class="flex w-full flex-1 sm:w-auto">
               <span class="text-base font-medium">
-                {{ categories.length }} 个分类
+                {{ categories?.length || 0 }} 个分类
               </span>
             </div>
           </div>
         </div>
       </template>
-      <VLoading v-if="loading" />
+      <VLoading v-if="isLoading" />
-      <Transition v-else-if="!categories.length" appear name="fade">
+      <Transition v-else-if="!categories?.length" appear name="fade">
         <VEmpty message="你可以尝试刷新或者新建分类" title="当前没有分类">
           <template #actions>
             <VSpace>

src/modules/contents/posts/categories/composables/use-post-category.ts

@@ -1,67 +1,48 @@
 import { apiClient } from "@/utils/api-client";
 import type { Category } from "@halo-dev/api-client";
-import { onUnmounted, type Ref } from "vue";
+import type { Ref } from "vue";
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import type { CategoryTree } from "@/modules/contents/posts/categories/utils";
 import { buildCategoriesTree } from "@/modules/contents/posts/categories/utils";
 import { Dialog, Toast } from "@halo-dev/components";
-import { onBeforeRouteLeave } from "vue-router";
+import { useQuery } from "@tanstack/vue-query";
 
 interface usePostCategoryReturn {
-  categories: Ref<Category[]>;
+  categories: Ref<Category[] | undefined>;
   categoriesTree: Ref<CategoryTree[]>;
-  loading: Ref<boolean>;
+  isLoading: Ref<boolean>;
-  handleFetchCategories: (fetchOptions?: { mute?: boolean }) => void;
+  handleFetchCategories: () => void;
   handleDelete: (category: CategoryTree) => void;
 }
 
-export function usePostCategory(options?: {
+export function usePostCategory(): usePostCategoryReturn {
-  fetchOnMounted: boolean;
-}): usePostCategoryReturn {
-  const { fetchOnMounted } = options || {};
-
-  const categories = ref<Category[]>([] as Category[]);
   const categoriesTree = ref<CategoryTree[]>([] as CategoryTree[]);
-  const loading = ref(false);
-  const refreshInterval = ref();
 
-  const handleFetchCategories = async (fetchOptions?: { mute?: boolean }) => {
+  const {
-    try {
+    data: categories,
-      clearInterval(refreshInterval.value);
+    isLoading,
-
+    refetch,
-      if (!fetchOptions?.mute) {
+  } = useQuery({
-        loading.value = true;
+    queryKey: ["post-categories"],
-      }
+    queryFn: async () => {
       const { data } =
         await apiClient.extension.category.listcontentHaloRunV1alpha1Category({
           page: 0,
           size: 0,
         });
-      categories.value = data.items;
-      categoriesTree.value = buildCategoriesTree(data.items);
 
-      const deletedCategories = categories.value.filter(
+      return data.items;
+    },
+    refetchInterval(data) {
+      const deletingCategories = data?.filter(
         (category) => !!category.metadata.deletionTimestamp
       );
-
+      return deletingCategories?.length ? 3000 : false;
-      if (deletedCategories.length) {
+    },
-        refreshInterval.value = setInterval(() => {
+    refetchOnWindowFocus: false,
-          handleFetchCategories({ mute: true });
+    onSuccess(data) {
-        }, 3000);
+      categoriesTree.value = buildCategoriesTree(data);
-      }
+    },
-    } catch (e) {
-      console.error("Failed to fetch categories", e);
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  onUnmounted(() => {
-    clearInterval(refreshInterval.value);
-  });
-
-  onBeforeRouteLeave(() => {
-    clearInterval(refreshInterval.value);
   });
 
   const handleDelete = async (category: CategoryTree) => {
@@ -81,21 +62,17 @@ export function usePostCategory(options?: {
         } catch (e) {
           console.error("Failed to delete tag", e);
         } finally {
-          await handleFetchCategories();
+          await refetch();
         }
       },
     });
   };
 
-  onMounted(() => {
-    fetchOnMounted && handleFetchCategories();
-  });
-
   return {
     categories,
     categoriesTree,
-    loading,
+    isLoading,
-    handleFetchCategories,
+    handleFetchCategories: refetch,
     handleDelete,
   };
 }

src/modules/contents/posts/categories/utils/index.ts

@@ -126,7 +126,7 @@ export const getCategoryPath = (
   categories: CategoryTree[],
   name: string,
   path: CategoryTree[] = []
-) => {
+): CategoryTree[] | undefined => {
   for (const category of categories) {
     if (category.metadata && category.metadata.name === name) {
       return path.concat([category]);

src/modules/contents/posts/tags/TagList.vue

@@ -46,9 +46,7 @@ const viewTypes = [
 
 const viewType = ref("list");
 
-const { tags, loading, handleFetchTags, handleDelete } = usePostTag({
+const { tags, isLoading, handleFetchTags, handleDelete } = usePostTag();
-  fetchOnMounted: true,
-});
 
 const editingModal = ref(false);
 const selectedTag = ref<Tag | null>(null);
@@ -59,6 +57,8 @@ const handleOpenEditingModal = (tag: Tag | null) => {
 };
 
 const handleSelectPrevious = () => {
+  if (!tags.value) return;
+
   const currentIndex = tags.value.findIndex(
     (tag) => tag.metadata.name === selectedTag.value?.metadata.name
   );
@@ -74,6 +74,8 @@ const handleSelectPrevious = () => {
 };
 
 const handleSelectNext = () => {
+  if (!tags.value) return;
+
   if (!selectedTag.value) {
     selectedTag.value = tags.value[0];
     return;
@@ -140,7 +142,7 @@ onMounted(async () => {
           >
             <div class="flex w-full flex-1 sm:w-auto">
               <span class="text-base font-medium">
-                {{ tags.length }} 个标签
+                {{ tags?.length || 0 }} 个标签
               </span>
             </div>
             <div class="flex flex-row gap-2">
@@ -159,8 +161,8 @@ onMounted(async () => {
           </div>
         </div>
       </template>
-      <VLoading v-if="loading" />
+      <VLoading v-if="isLoading" />
-      <Transition v-else-if="!tags.length" appear name="fade">
+      <Transition v-else-if="!tags?.length" appear name="fade">
         <VEmpty message="你可以尝试刷新或者新建标签" title="当前没有标签">
           <template #actions>
             <VSpace>

src/modules/contents/posts/tags/composables/use-post-tag.ts

@@ -1,63 +1,39 @@
 import { apiClient } from "@/utils/api-client";
 import type { Tag } from "@halo-dev/api-client";
-import { onUnmounted, type Ref } from "vue";
+import type { Ref } from "vue";
-import { onMounted, ref } from "vue";
 import { Dialog, Toast } from "@halo-dev/components";
-import { onBeforeRouteLeave } from "vue-router";
+import { useQuery } from "@tanstack/vue-query";
 
 interface usePostTagReturn {
-  tags: Ref<Tag[]>;
+  tags: Ref<Tag[] | undefined>;
-  loading: Ref<boolean>;
+  isLoading: Ref<boolean>;
-  handleFetchTags: (fetchOptions?: { mute?: boolean }) => void;
+  handleFetchTags: () => void;
   handleDelete: (tag: Tag) => void;
 }
 
-export function usePostTag(options?: {
+export function usePostTag(): usePostTagReturn {
-  fetchOnMounted: boolean;
+  const {
-}): usePostTagReturn {
+    data: tags,
-  const { fetchOnMounted } = options || {};
+    isLoading,
-
+    refetch,
-  const tags = ref<Tag[]>([] as Tag[]);
+  } = useQuery({
-  const loading = ref(false);
+    queryKey: ["post-tags"],
-  const refreshInterval = ref();
+    queryFn: async () => {
-
-  const handleFetchTags = async (fetchOptions?: { mute?: boolean }) => {
-    try {
-      clearInterval(refreshInterval.value);
-
-      if (!fetchOptions?.mute) {
-        loading.value = true;
-      }
       const { data } =
         await apiClient.extension.tag.listcontentHaloRunV1alpha1Tag({
           page: 0,
           size: 0,
         });
 
-      tags.value = data.items;
+      return data.items;
-
+    },
-      const deletedTags = tags.value.filter(
+    refetchInterval(data) {
+      const deletingTags = data?.filter(
         (tag) => !!tag.metadata.deletionTimestamp
       );
-
+      return deletingTags?.length ? 3000 : false;
-      if (deletedTags.length) {
+    },
-        refreshInterval.value = setInterval(() => {
+    refetchOnWindowFocus: false,
-          handleFetchTags({ mute: true });
-        }, 3000);
-      }
-    } catch (e) {
-      console.error("Failed to fetch tags", e);
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  onUnmounted(() => {
-    clearInterval(refreshInterval.value);
-  });
-
-  onBeforeRouteLeave(() => {
-    clearInterval(refreshInterval.value);
   });
 
   const handleDelete = async (tag: Tag) => {
@@ -75,20 +51,16 @@ export function usePostTag(options?: {
         } catch (e) {
           console.error("Failed to delete tag", e);
         } finally {
-          await handleFetchTags();
+          await refetch();
         }
       },
     });
   };
 
-  onMounted(() => {
-    fetchOnMounted && handleFetchTags();
-  });
-
   return {
     tags,
-    loading,
+    isLoading,
-    handleFetchTags,
+    handleFetchTags: refetch,
     handleDelete,
   };
 }

src/modules/contents/posts/widgets/RecentPublishedWidget.vue

@@ -6,16 +6,15 @@ import {
   VEntityField,
   IconExternalLinkLine,
 } from "@halo-dev/components";
-import { onMounted, ref } from "vue";
 import type { ListedPost } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { formatDatetime } from "@/utils/date";
 import { postLabels } from "@/constants/labels";
+import { useQuery } from "@tanstack/vue-query";
 
-const posts = ref<ListedPost[]>([] as ListedPost[]);
+const { data } = useQuery<ListedPost[]>({
-
+  queryKey: ["widget-recent-posts"],
-const handleFetchPosts = async () => {
+  queryFn: async () => {
-  try {
     const { data } = await apiClient.post.listPosts({
       labelSelector: [
         `${postLabels.DELETED}=false`,
@@ -26,13 +25,10 @@ const handleFetchPosts = async () => {
       page: 1,
       size: 10,
     });
-    posts.value = data.items;
+    return data.items;
-  } catch (e) {
+  },
-    console.error("Failed to fetch posts", e);
+  refetchOnWindowFocus: false,
-  }
+});
-};
-
-onMounted(handleFetchPosts);
 </script>
 <template>
   <VCard
@@ -41,7 +37,7 @@ onMounted(handleFetchPosts);
     title="最近文章"
   >
     <ul class="box-border h-full w-full divide-y divide-gray-100" role="list">
-      <li v-for="(post, index) in posts" :key="index">
+      <li v-for="(post, index) in data" :key="index">
         <VEntity>
           <template #start>
             <VEntityField