From 66a626c91655e040cabc3e66708a3feb8e22813a Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 24 Feb 2023 12:10:13 +0800
Subject: [PATCH] refactor: use tanstack query to refactor post-related
 fetching (#879)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### 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
```
---
 .../CategoryDropdownSelector.vue              |  10 +-
 .../dropdown-selector/TagDropdownSelector.vue |   8 +-
 .../inputs/category-select/CategorySelect.vue |  21 +-
 .../components/CategoryTag.vue                |   2 +-
 .../components/SearchResultListItem.vue       |   2 +-
 src/formkit/inputs/tag-select/TagSelect.vue   |  46 +-
 .../contents/posts/DeletedPostList.vue        | 134 ++---
 src/modules/contents/posts/PostList.vue       | 489 ++++++++----------
 .../posts/categories/CategoryList.vue         |  10 +-
 .../composables/use-post-category.ts          |  77 +--
 .../contents/posts/categories/utils/index.ts  |   2 +-
 src/modules/contents/posts/tags/TagList.vue   |  14 +-
 .../posts/tags/composables/use-post-tag.ts    |  74 +--
 .../posts/widgets/RecentPublishedWidget.vue   |  22 +-
 14 files changed, 398 insertions(+), 513 deletions(-)

diff --git a/src/components/dropdown-selector/CategoryDropdownSelector.vue b/src/components/dropdown-selector/CategoryDropdownSelector.vue
index 3d5efb534..6de0f50fb 100644
--- a/src/components/dropdown-selector/CategoryDropdownSelector.vue
+++ b/src/components/dropdown-selector/CategoryDropdownSelector.vue
@@ -20,9 +20,7 @@ const emit = defineEmits<{
   (event: "select", category?: Category): void;
 }>();
 
-const { categories, handleFetchCategories } = usePostCategory({
-  fetchOnMounted: false,
-});
+const { categories } = usePostCategory();
 
 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,
   }
 );
 
diff --git a/src/components/dropdown-selector/TagDropdownSelector.vue b/src/components/dropdown-selector/TagDropdownSelector.vue
index 25983b141..e3d9742b9 100644
--- a/src/components/dropdown-selector/TagDropdownSelector.vue
+++ b/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,
   }
 );
 
diff --git a/src/formkit/inputs/category-select/CategorySelect.vue b/src/formkit/inputs/category-select/CategorySelect.vue
index e1baf5d09..88cabed6a 100644
--- a/src/formkit/inputs/category-select/CategorySelect.vue
+++ b/src/formkit/inputs/category-select/CategorySelect.vue
@@ -35,9 +35,7 @@ const multiple = computed(() => {
   return multiple === "true";
 });
 
-const { categories, categoriesTree, handleFetchCategories } = usePostCategory({
-  fetchOnMounted: true,
-});
+const { categories, categoriesTree, handleFetchCategories } = usePostCategory();
 
 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"
         >
diff --git a/src/formkit/inputs/category-select/components/CategoryTag.vue b/src/formkit/inputs/category-select/components/CategoryTag.vue
index 37a19b40d..f8e02b53d 100644
--- a/src/formkit/inputs/category-select/components/CategoryTag.vue
+++ b/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>
diff --git a/src/formkit/inputs/category-select/components/SearchResultListItem.vue b/src/formkit/inputs/category-select/components/SearchResultListItem.vue
index 5e7c80c73..5cc7bab5e 100644
--- a/src/formkit/inputs/category-select/components/SearchResultListItem.vue
+++ b/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>
diff --git a/src/formkit/inputs/tag-select/TagSelect.vue b/src/formkit/inputs/tag-select/TagSelect.vue
index e62f38a18..8b2afe5d0 100644
--- a/src/formkit/inputs/tag-select/TagSelect.vue
+++ b/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 () => {
-  const { data } = await apiClient.extension.tag.listcontentHaloRunV1alpha1Tag({
-    page: 0,
-    size: 0,
-  });
-
-  postTags.value = data.items;
-
-  fuse = new Fuse(data.items, {
-    keys: ["spec.displayName", "spec.slug"],
-    useExtendedSearch: true,
-    threshold: 0.2,
-  });
-};
+watch(
+  () => postTags.value,
+  () => {
+    fuse = new Fuse(postTags.value || [], {
+      keys: ["spec.displayName", "metadata.name", "spec.email"],
+      useExtendedSearch: true,
+      threshold: 0.2,
+    });
+  },
+  {
+    immediate: true,
+  }
+);
 
 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"
diff --git a/src/modules/contents/posts/DeletedPostList.vue b/src/modules/contents/posts/DeletedPostList.vue
index f81677b49..26795d80c 100644
--- a/src/modules/contents/posts/DeletedPostList.vue
+++ b/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 type { ListedPostList, Post } from "@halo-dev/api-client";
+import { ref, watch } from "vue";
+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) => {
-  try {
-    clearInterval(refreshInterval.value);
-
-    loading.value = true;
-
-    if (page) {
-      posts.value.page = page;
-    }
-
+const page = ref(1);
+const size = ref(20);
+const total = ref(0);
+
+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,
-      size: posts.value.size,
+      page: page.value,
+      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
     );
-
-    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);
+    return deletingPosts?.length ? 3000 : false;
+  },
 });
 
-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;
-});
-
-onMounted(() => {
-  handleFetchPosts();
+  checkedAll.value = newValue.length === posts.value?.length;
 });
 
 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"
-            :size="posts.size"
-            :total="posts.total"
+            v-model:page="page"
+            v-model:size="size"
+            :total="total"
             :size-options="[20, 30, 50, 100]"
-            @change="handlePaginationChange"
           />
         </div>
       </template>
diff --git a/src/modules/contents/posts/PostList.vue b/src/modules/contents/posts/PostList.vue
index 4f16a08ec..167e5c804 100644
--- a/src/modules/contents/posts/PostList.vue
+++ b/src/modules/contents/posts/PostList.vue
@@ -28,65 +28,212 @@ 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);
+// Filters
+interface VisibleItem {
+  label: string;
+  value?: "PUBLIC" | "INTERNAL" | "PRIVATE";
+}
 
-    if (!options?.mute) {
-      loading.value = true;
-    }
+interface PublishStatuItem {
+  label: string;
+  value?: boolean;
+}
+
+interface SortItem {
+  label: string;
+  sort: "PUBLISH_TIME" | "CREATE_TIME";
+  sortOrder: boolean;
+}
+
+const VisibleItems: VisibleItem[] = [
+  {
+    label: "全部",
+    value: undefined,
+  },
+  {
+    label: "公开",
+    value: "PUBLIC",
+  },
+  // TODO: 支持内部成员可访问
+  // {
+  //   label: "内部成员可访问",
+  //   value: "INTERNAL",
+  // },
+  {
+    label: "私有",
+    value: "PRIVATE",
+  },
+];
+
+const PublishStatuItems: PublishStatuItem[] = [
+  {
+    label: "全部",
+    value: undefined,
+  },
+  {
+    label: "已发布",
+    value: true,
+  },
+  {
+    label: "未发布",
+    value: false,
+  },
+];
+
+const SortItems: SortItem[] = [
+  {
+    label: "较近发布",
+    sort: "PUBLISH_TIME",
+    sortOrder: false,
+  },
+  {
+    label: "较早发布",
+    sort: "PUBLISH_TIME",
+    sortOrder: true,
+  },
+  {
+    label: "较近创建",
+    sort: "CREATE_TIME",
+    sortOrder: false,
+  },
+  {
+    label: "较早创建",
+    sort: "CREATE_TIME",
+    sortOrder: true,
+  },
+];
 
+const selectedVisibleItem = ref<VisibleItem>(VisibleItems[0]);
+const selectedPublishStatusItem = ref<PublishStatuItem>(PublishStatuItems[0]);
+const selectedSortItem = ref<SortItem>();
+const selectedCategory = ref<Category>();
+const selectedTag = ref<Tag>();
+const selectedContributor = ref<User>();
+const keyword = ref("");
+
+function handleVisibleItemChange(visibleItem: VisibleItem) {
+  selectedVisibleItem.value = visibleItem;
+  page.value = 1;
+}
+
+function handlePublishStatusItemChange(publishStatusItem: PublishStatuItem) {
+  selectedPublishStatusItem.value = publishStatusItem;
+  page.value = 1;
+}
+
+function handleSortItemChange(sortItem?: SortItem) {
+  selectedSortItem.value = sortItem;
+  page.value = 1;
+}
+
+function handleCategoryChange(category?: Category) {
+  selectedCategory.value = category;
+  page.value = 1;
+}
+
+function handleTagChange(tag?: Tag) {
+  selectedTag.value = tag;
+  page.value = 1;
+}
+
+function handleContributorChange(user?: User) {
+  selectedContributor.value = user;
+  page.value = 1;
+}
+
+function handleKeywordChange() {
+  const keywordNode = getNode("keywordInput");
+  if (keywordNode) {
+    keyword.value = keywordNode._value as string;
+  }
+  page.value = 1;
+}
+
+function handleClearKeyword() {
+  keyword.value = "";
+  page.value = 1;
+}
+
+function handleClearFilters() {
+  selectedVisibleItem.value = VisibleItems[0];
+  selectedPublishStatusItem.value = PublishStatuItems[0];
+  selectedSortItem.value = undefined;
+  selectedCategory.value = undefined;
+  selectedTag.value = undefined;
+  selectedContributor.value = undefined;
+  keyword.value = "";
+  page.value = 1;
+}
+
+const hasFilters = computed(() => {
+  return (
+    selectedVisibleItem.value.value ||
+    selectedPublishStatusItem.value.value !== undefined ||
+    selectedSortItem.value ||
+    selectedCategory.value ||
+    selectedTag.value ||
+    selectedContributor.value ||
+    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,
-        selectedCategory.value.metadata.name,
-      ];
+      categories = [selectedCategory.value.metadata.name];
     }
 
     if (selectedTag.value) {
@@ -103,14 +250,10 @@ const handleFetchPosts = async (options?: {
       );
     }
 
-    if (options?.page) {
-      posts.value.page = options.page;
-    }
-
     const { data } = await apiClient.post.listPosts({
       labelSelector,
-      page: posts.value.page,
-      size: posts.value.size,
+      page: page.value,
+      size: size.value,
       visible: selectedVisibleItem.value?.value,
       sort: selectedSortItem.value?.sort,
       sortOrder: selectedSortItem.value?.sortOrder,
@@ -119,10 +262,15 @@ const handleFetchPosts = async (options?: {
       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) => {
+    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 ||
@@ -131,34 +279,11 @@ const handleFetchPosts = async (options?: {
       );
     });
 
-    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);
+    return abnormalPosts?.length ? 3000 : false;
+  },
+  refetchOnWindowFocus: false,
 });
 
-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(
     {
@@ -171,46 +296,49 @@ const handleOpenSettingModal = async (post: Post) => {
 
 const onSettingModalClose = () => {
   selectedPost.value = undefined;
-  handleFetchPosts({ mute: true });
+  refetch();
 };
 
 const handleSelectPrevious = async () => {
-  const { items, hasPrevious } = posts.value;
-  const index = items.findIndex(
+  if (!posts.value) return;
+
+  const index = posts.value.findIndex(
     (post) => post.post.metadata.name === selectedPost.value?.metadata.name
   );
+
   if (index > 0) {
-    const { data } =
+    const { data: previousPost } =
       await apiClient.extension.post.getcontentHaloRunV1alpha1Post({
-        name: items[index - 1].post.metadata.name,
+        name: posts.value[index - 1].post.metadata.name,
       });
-    selectedPost.value = data;
+    selectedPost.value = previousPost;
     return;
   }
   if (index === 0 && hasPrevious) {
-    posts.value.page--;
-    await handleFetchPosts();
-    selectedPost.value = posts.value.items[posts.value.items.length - 1].post;
+    page.value--;
+    await refetch();
+    selectedPost.value = posts.value[posts.value.length - 1].post;
   }
 };
 
 const handleSelectNext = async () => {
-  const { items, hasNext } = posts.value;
-  const index = items.findIndex(
+  if (!posts.value) return;
+
+  const index = posts.value.findIndex(
     (post) => post.post.metadata.name === selectedPost.value?.metadata.name
   );
-  if (index < items.length - 1) {
-    const { data } =
+  if (index < posts.value.length - 1) {
+    const { data: nextPost } =
       await apiClient.extension.post.getcontentHaloRunV1alpha1Post({
-        name: items[index + 1].post.metadata.name,
+        name: posts.value[index + 1].post.metadata.name,
       });
-    selectedPost.value = data;
+    selectedPost.value = nextPost;
     return;
   }
-  if (index === items.length - 1 && hasNext) {
-    posts.value.page++;
-    await handleFetchPosts();
-    selectedPost.value = posts.value.items[0].post;
+  if (index === posts.value.length - 1 && hasNext) {
+    page.value++;
+    await refetch();
+    selectedPost.value = posts.value[0].post;
   }
 };
 
@@ -239,7 +367,7 @@ const handleCheckAllChange = (e: Event) => {
 
   if (checked) {
     selectedPostNames.value =
-      posts.value.items.map((post) => {
+      posts.value?.map((post) => {
         return post.post.metadata.name;
       }) || [];
   } else {
@@ -256,7 +384,7 @@ const handleDelete = async (post: Post) => {
       await apiClient.post.recyclePost({
         name: post.metadata.name,
       });
-      await handleFetchPosts();
+      await refetch();
 
       Toast.success("删除成功");
     },
@@ -271,22 +399,12 @@ const handleDeleteInBatch = async () => {
     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,
+          return apiClient.post.recyclePost({
+            name,
           });
         })
       );
-      await handleFetchPosts();
+      await refetch();
       selectedPostNames.value = [];
 
       Toast.success("删除成功");
@@ -295,161 +413,7 @@ const handleDeleteInBatch = async () => {
 };
 
 watch(selectedPostNames, (newValue) => {
-  checkedAll.value = newValue.length === posts.value.items?.length;
-});
-
-onMounted(() => {
-  handleFetchPosts();
-});
-
-// Filters
-
-interface VisibleItem {
-  label: string;
-  value?: "PUBLIC" | "INTERNAL" | "PRIVATE";
-}
-
-interface PublishStatuItem {
-  label: string;
-  value?: boolean;
-}
-
-interface SortItem {
-  label: string;
-  sort: "PUBLISH_TIME" | "CREATE_TIME";
-  sortOrder: boolean;
-}
-
-const VisibleItems: VisibleItem[] = [
-  {
-    label: "全部",
-    value: undefined,
-  },
-  {
-    label: "公开",
-    value: "PUBLIC",
-  },
-  // TODO: 支持内部成员可访问
-  // {
-  //   label: "内部成员可访问",
-  //   value: "INTERNAL",
-  // },
-  {
-    label: "私有",
-    value: "PRIVATE",
-  },
-];
-
-const PublishStatuItems: PublishStatuItem[] = [
-  {
-    label: "全部",
-    value: undefined,
-  },
-  {
-    label: "已发布",
-    value: true,
-  },
-  {
-    label: "未发布",
-    value: false,
-  },
-];
-
-const SortItems: SortItem[] = [
-  {
-    label: "较近发布",
-    sort: "PUBLISH_TIME",
-    sortOrder: false,
-  },
-  {
-    label: "较早发布",
-    sort: "PUBLISH_TIME",
-    sortOrder: true,
-  },
-  {
-    label: "较近创建",
-    sort: "CREATE_TIME",
-    sortOrder: false,
-  },
-  {
-    label: "较早创建",
-    sort: "CREATE_TIME",
-    sortOrder: true,
-  },
-];
-
-const selectedVisibleItem = ref<VisibleItem>(VisibleItems[0]);
-const selectedPublishStatusItem = ref<PublishStatuItem>(PublishStatuItems[0]);
-const selectedSortItem = ref<SortItem>();
-const selectedCategory = ref<Category>();
-const selectedTag = ref<Tag>();
-const selectedContributor = ref<User>();
-const keyword = ref("");
-
-function handleVisibleItemChange(visibleItem: VisibleItem) {
-  selectedVisibleItem.value = visibleItem;
-  handleFetchPosts({ page: 1 });
-}
-
-function handlePublishStatusItemChange(publishStatusItem: PublishStatuItem) {
-  selectedPublishStatusItem.value = publishStatusItem;
-  handleFetchPosts({ page: 1 });
-}
-
-function handleSortItemChange(sortItem?: SortItem) {
-  selectedSortItem.value = sortItem;
-  handleFetchPosts({ page: 1 });
-}
-
-function handleCategoryChange(category?: Category) {
-  selectedCategory.value = category;
-  handleFetchPosts({ page: 1 });
-}
-
-function handleTagChange(tag?: Tag) {
-  selectedTag.value = tag;
-  handleFetchPosts({ page: 1 });
-}
-
-function handleContributorChange(user?: User) {
-  selectedContributor.value = user;
-  handleFetchPosts({ page: 1 });
-}
-
-function handleKeywordChange() {
-  const keywordNode = getNode("keywordInput");
-  if (keywordNode) {
-    keyword.value = keywordNode._value as string;
-  }
-  handleFetchPosts({ page: 1 });
-}
-
-function handleClearKeyword() {
-  keyword.value = "";
-  handleFetchPosts({ page: 1 });
-}
-
-function handleClearFilters() {
-  selectedVisibleItem.value = VisibleItems[0];
-  selectedPublishStatusItem.value = PublishStatuItems[0];
-  selectedSortItem.value = undefined;
-  selectedCategory.value = undefined;
-  selectedTag.value = undefined;
-  selectedContributor.value = undefined;
-  keyword.value = "";
-  handleFetchPosts({ page: 1 });
-}
-
-const hasFilters = computed(() => {
-  return (
-    selectedVisibleItem.value.value ||
-    selectedPublishStatusItem.value.value !== undefined ||
-    selectedSortItem.value ||
-    selectedCategory.value ||
-    selectedTag.value ||
-    selectedContributor.value ||
-    keyword.value
-  );
+  checkedAll.value = newValue.length === posts.value?.length;
 });
 </script>
 <template>
@@ -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" />
-      <Transition v-else-if="!posts.items.length" appear name="fade">
+      <VLoading v-if="isLoading" />
+      <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"
-            :size="posts.size"
-            :total="posts.total"
+            v-model:page="page"
+            v-model:size="size"
+            :total="total"
             :size-options="[20, 30, 50, 100]"
-            @change="handlePaginationChange"
           />
         </div>
       </template>
diff --git a/src/modules/contents/posts/categories/CategoryList.vue b/src/modules/contents/posts/categories/CategoryList.vue
index b4b798019..92dd72123 100644
--- a/src/modules/contents/posts/categories/CategoryList.vue
+++ b/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" />
-      <Transition v-else-if="!categories.length" appear name="fade">
+      <VLoading v-if="isLoading" />
+      <Transition v-else-if="!categories?.length" appear name="fade">
         <VEmpty message="你可以尝试刷新或者新建分类" title="当前没有分类">
           <template #actions>
             <VSpace>
diff --git a/src/modules/contents/posts/categories/composables/use-post-category.ts b/src/modules/contents/posts/categories/composables/use-post-category.ts
index 4acc78b58..d800d7f61 100644
--- a/src/modules/contents/posts/categories/composables/use-post-category.ts
+++ b/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 { onMounted, ref } from "vue";
+import type { 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>;
-  handleFetchCategories: (fetchOptions?: { mute?: boolean }) => void;
+  isLoading: Ref<boolean>;
+  handleFetchCategories: () => void;
   handleDelete: (category: CategoryTree) => void;
 }
 
-export function usePostCategory(options?: {
-  fetchOnMounted: boolean;
-}): usePostCategoryReturn {
-  const { fetchOnMounted } = options || {};
-
-  const categories = ref<Category[]>([] as Category[]);
+export function usePostCategory(): usePostCategoryReturn {
   const categoriesTree = ref<CategoryTree[]>([] as CategoryTree[]);
-  const loading = ref(false);
-  const refreshInterval = ref();
-
-  const handleFetchCategories = async (fetchOptions?: { mute?: boolean }) => {
-    try {
-      clearInterval(refreshInterval.value);
 
-      if (!fetchOptions?.mute) {
-        loading.value = true;
-      }
+  const {
+    data: categories,
+    isLoading,
+    refetch,
+  } = useQuery({
+    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
       );
-
-      if (deletedCategories.length) {
-        refreshInterval.value = setInterval(() => {
-          handleFetchCategories({ mute: true });
-        }, 3000);
-      }
-    } catch (e) {
-      console.error("Failed to fetch categories", e);
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  onUnmounted(() => {
-    clearInterval(refreshInterval.value);
-  });
-
-  onBeforeRouteLeave(() => {
-    clearInterval(refreshInterval.value);
+      return deletingCategories?.length ? 3000 : false;
+    },
+    refetchOnWindowFocus: false,
+    onSuccess(data) {
+      categoriesTree.value = buildCategoriesTree(data);
+    },
   });
 
   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,
-    handleFetchCategories,
+    isLoading,
+    handleFetchCategories: refetch,
     handleDelete,
   };
 }
diff --git a/src/modules/contents/posts/categories/utils/index.ts b/src/modules/contents/posts/categories/utils/index.ts
index 13a9768c7..0169e97e4 100644
--- a/src/modules/contents/posts/categories/utils/index.ts
+++ b/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]);
diff --git a/src/modules/contents/posts/tags/TagList.vue b/src/modules/contents/posts/tags/TagList.vue
index 7ca8a1c2a..d0cb18ed7 100644
--- a/src/modules/contents/posts/tags/TagList.vue
+++ b/src/modules/contents/posts/tags/TagList.vue
@@ -46,9 +46,7 @@ const viewTypes = [
 
 const viewType = ref("list");
 
-const { tags, loading, handleFetchTags, handleDelete } = usePostTag({
-  fetchOnMounted: true,
-});
+const { tags, isLoading, handleFetchTags, handleDelete } = usePostTag();
 
 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" />
-      <Transition v-else-if="!tags.length" appear name="fade">
+      <VLoading v-if="isLoading" />
+      <Transition v-else-if="!tags?.length" appear name="fade">
         <VEmpty message="你可以尝试刷新或者新建标签" title="当前没有标签">
           <template #actions>
             <VSpace>
diff --git a/src/modules/contents/posts/tags/composables/use-post-tag.ts b/src/modules/contents/posts/tags/composables/use-post-tag.ts
index ea6f8301d..cd2d60f5c 100644
--- a/src/modules/contents/posts/tags/composables/use-post-tag.ts
+++ b/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 { onMounted, ref } from "vue";
+import type { 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[]>;
-  loading: Ref<boolean>;
-  handleFetchTags: (fetchOptions?: { mute?: boolean }) => void;
+  tags: Ref<Tag[] | undefined>;
+  isLoading: Ref<boolean>;
+  handleFetchTags: () => void;
   handleDelete: (tag: Tag) => void;
 }
 
-export function usePostTag(options?: {
-  fetchOnMounted: boolean;
-}): usePostTagReturn {
-  const { fetchOnMounted } = options || {};
-
-  const tags = ref<Tag[]>([] as Tag[]);
-  const loading = ref(false);
-  const refreshInterval = ref();
-
-  const handleFetchTags = async (fetchOptions?: { mute?: boolean }) => {
-    try {
-      clearInterval(refreshInterval.value);
-
-      if (!fetchOptions?.mute) {
-        loading.value = true;
-      }
+export function usePostTag(): usePostTagReturn {
+  const {
+    data: tags,
+    isLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ["post-tags"],
+    queryFn: async () => {
       const { data } =
         await apiClient.extension.tag.listcontentHaloRunV1alpha1Tag({
           page: 0,
           size: 0,
         });
 
-      tags.value = data.items;
-
-      const deletedTags = tags.value.filter(
+      return data.items;
+    },
+    refetchInterval(data) {
+      const deletingTags = data?.filter(
         (tag) => !!tag.metadata.deletionTimestamp
       );
-
-      if (deletedTags.length) {
-        refreshInterval.value = setInterval(() => {
-          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);
+      return deletingTags?.length ? 3000 : false;
+    },
+    refetchOnWindowFocus: false,
   });
 
   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,
-    handleFetchTags,
+    isLoading,
+    handleFetchTags: refetch,
     handleDelete,
   };
 }
diff --git a/src/modules/contents/posts/widgets/RecentPublishedWidget.vue b/src/modules/contents/posts/widgets/RecentPublishedWidget.vue
index f9beeb8d5..ec98eee27 100644
--- a/src/modules/contents/posts/widgets/RecentPublishedWidget.vue
+++ b/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 handleFetchPosts = async () => {
-  try {
+const { data } = useQuery<ListedPost[]>({
+  queryKey: ["widget-recent-posts"],
+  queryFn: async () => {
     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;
-  } catch (e) {
-    console.error("Failed to fetch posts", e);
-  }
-};
-
-onMounted(handleFetchPosts);
+    return data.items;
+  },
+  refetchOnWindowFocus: false,
+});
 </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