From 960e727f877a002e6e75b7fc09ae25dce370d5c7 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 24 Feb 2023 17:58:21 +0800
Subject: [PATCH] refactor: use tanstack query to refactor singlePage-related
 fetching (#886)
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
```
---
 .../contents/pages/DeletedSinglePageList.vue  | 134 ++---
 src/modules/contents/pages/SinglePageList.vue | 511 +++++++++---------
 2 files changed, 294 insertions(+), 351 deletions(-)

diff --git a/src/modules/contents/pages/DeletedSinglePageList.vue b/src/modules/contents/pages/DeletedSinglePageList.vue
index 15aca966..7da5ef94 100644
--- a/src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/src/modules/contents/pages/DeletedSinglePageList.vue
@@ -17,93 +17,57 @@ import {
   VLoading,
   Toast,
 } from "@halo-dev/components";
-import { onMounted, ref, watch } from "vue";
-import type { ListedSinglePageList, SinglePage } from "@halo-dev/api-client";
+import { ref, watch } from "vue";
+import type { ListedSinglePage, SinglePage } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { formatDatetime } from "@/utils/date";
-import { onBeforeRouteLeave, RouterLink } from "vue-router";
+import { RouterLink } from "vue-router";
 import cloneDeep from "lodash.clonedeep";
 import { usePermission } from "@/utils/permission";
 import { getNode } from "@formkit/core";
 import FilterTag from "@/components/filter/FilterTag.vue";
+import { useQuery } from "@tanstack/vue-query";
 
 const { currentUserHasPermission } = usePermission();
 
-const singlePages = ref<ListedSinglePageList>({
-  page: 1,
-  size: 50,
-  total: 0,
-  items: [],
-  first: true,
-  last: false,
-  hasNext: false,
-  hasPrevious: false,
-  totalPages: 0,
-});
-const loading = ref(false);
 const selectedPageNames = ref<string[]>([]);
 const checkedAll = ref(false);
-const refreshInterval = ref();
 const keyword = ref("");
 
-const handleFetchSinglePages = async (options?: {
-  mute?: boolean;
-  page?: number;
-}) => {
-  try {
-    clearInterval(refreshInterval.value);
-
-    if (!options?.mute) {
-      loading.value = true;
-    }
-
-    if (options?.page) {
-      singlePages.value.page = options.page;
-    }
+const page = ref(1);
+const size = ref(20);
+const total = ref(0);
 
+const {
+  data: singlePages,
+  isLoading,
+  isFetching,
+  refetch,
+} = useQuery<ListedSinglePage[]>({
+  queryKey: ["deleted-singlePages", page, size, keyword],
+  queryFn: async () => {
     const { data } = await apiClient.singlePage.listSinglePages({
       labelSelector: [`content.halo.run/deleted=true`],
-      page: singlePages.value.page,
-      size: singlePages.value.size,
+      page: page.value,
+      size: size.value,
       keyword: keyword.value,
     });
 
-    singlePages.value = data;
+    total.value = data.total;
 
-    const deletedSinglePages = singlePages.value.items.filter(
+    return data.items;
+  },
+  refetchOnWindowFocus: false,
+  refetchInterval(data) {
+    const deletedSinglePages = data?.filter(
       (singlePage) =>
         !!singlePage.page.metadata.deletionTimestamp ||
         !singlePage.page.spec.deleted
     );
-
-    if (deletedSinglePages.length) {
-      refreshInterval.value = setInterval(() => {
-        handleFetchSinglePages({ mute: true });
-      }, 3000);
-    }
-  } catch (error) {
-    console.error("Failed to fetch deleted single pages", error);
-  } finally {
-    loading.value = false;
-  }
-};
-
-onBeforeRouteLeave(() => {
-  clearInterval(refreshInterval.value);
+    return deletedSinglePages?.length ? 3000 : false;
+  },
 });
 
-const handlePaginationChange = ({
-  page,
-  size,
-}: {
-  page: number;
-  size: number;
-}) => {
-  singlePages.value.page = page;
-  singlePages.value.size = size;
-  handleFetchSinglePages();
-};
-
 const checkSelection = (singlePage: SinglePage) => {
   return selectedPageNames.value.includes(singlePage.metadata.name);
 };
@@ -113,7 +77,7 @@ const handleCheckAllChange = (e: Event) => {
 
   if (checked) {
     selectedPageNames.value =
-      singlePages.value.items.map((singlePage) => {
+      singlePages.value?.map((singlePage) => {
         return singlePage.page.metadata.name;
       }) || [];
   } else {
@@ -132,7 +96,7 @@ const handleDeletePermanently = async (singlePage: SinglePage) => {
           name: singlePage.metadata.name,
         }
       );
-      await handleFetchSinglePages();
+      await refetch();
 
       Toast.success("删除成功");
     },
@@ -154,7 +118,7 @@ const handleDeletePermanentlyInBatch = async () => {
           );
         })
       );
-      await handleFetchSinglePages();
+      await refetch();
       selectedPageNames.value = [];
 
       Toast.success("删除成功");
@@ -175,7 +139,7 @@ const handleRecovery = async (singlePage: SinglePage) => {
           singlePage: singlePageToUpdate,
         }
       );
-      await handleFetchSinglePages();
+      await refetch();
 
       Toast.success("恢复成功");
     },
@@ -189,7 +153,7 @@ const handleRecoveryInBatch = async () => {
     onConfirm: async () => {
       await Promise.all(
         selectedPageNames.value.map((name) => {
-          const singlePage = singlePages.value.items.find(
+          const singlePage = singlePages.value?.find(
             (item) => item.page.metadata.name === name
           )?.page;
 
@@ -197,16 +161,21 @@ const handleRecoveryInBatch = async () => {
             return Promise.resolve();
           }
 
-          singlePage.spec.deleted = false;
           return apiClient.extension.singlePage.updatecontentHaloRunV1alpha1SinglePage(
             {
               name: singlePage.metadata.name,
-              singlePage: singlePage,
+              singlePage: {
+                ...singlePage,
+                spec: {
+                  ...singlePage.spec,
+                  deleted: false,
+                },
+              },
             }
           );
         })
       );
-      await handleFetchSinglePages();
+      await refetch();
       selectedPageNames.value = [];
 
       Toast.success("恢复成功");
@@ -215,23 +184,21 @@ const handleRecoveryInBatch = async () => {
 };
 
 watch(selectedPageNames, (newValue) => {
-  checkedAll.value = newValue.length === singlePages.value.items?.length;
+  checkedAll.value = newValue.length === singlePages.value?.length;
 });
 
-onMounted(handleFetchSinglePages);
-
 // Filters
 function handleKeywordChange() {
   const keywordNode = getNode("keywordInput");
   if (keywordNode) {
     keyword.value = keywordNode._value as string;
   }
-  handleFetchSinglePages({ page: 1 });
+  page.value = 1;
 }
 
 function handleClearKeyword() {
   keyword.value = "";
-  handleFetchSinglePages({ page: 1 });
+  page.value = 1;
 }
 </script>
 
@@ -307,10 +274,10 @@ function handleClearKeyword() {
                 <div class="flex flex-row gap-2">
                   <div
                     class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                    @click="handleFetchSinglePages()"
+                    @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>
@@ -320,15 +287,15 @@ function handleClearKeyword() {
           </div>
         </div>
       </template>
-      <VLoading v-if="loading" />
-      <Transition v-else-if="!singlePages.items.length" appear name="fade">
+      <VLoading v-if="isLoading" />
+      <Transition v-else-if="!singlePages?.length" appear name="fade">
         <VEmpty
           message="你可以尝试刷新或者返回自定义页面管理"
           title="没有自定义页面被放入回收站"
         >
           <template #actions>
             <VSpace>
-              <VButton @click="handleFetchSinglePages">刷新</VButton>
+              <VButton @click="refetch">刷新</VButton>
               <VButton
                 v-permission="['system:singlepages:view']"
                 :route="{ name: 'SinglePages' }"
@@ -345,7 +312,7 @@ function handleClearKeyword() {
           class="box-border h-full w-full divide-y divide-gray-100"
           role="list"
         >
-          <li v-for="(singlePage, index) in singlePages.items" :key="index">
+          <li v-for="(singlePage, index) in singlePages" :key="index">
             <VEntity :is-selected="checkSelection(singlePage.page)">
               <template
                 v-if="currentUserHasPermission(['system:singlepages:manage'])"
@@ -445,11 +412,10 @@ function handleClearKeyword() {
       <template #footer>
         <div class="bg-white sm:flex sm:items-center sm:justify-end">
           <VPagination
-            :page="singlePages.page"
-            :size="singlePages.size"
-            :total="singlePages.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/pages/SinglePageList.vue b/src/modules/contents/pages/SinglePageList.vue
index 8a506a71..07462d7f 100644
--- a/src/modules/contents/pages/SinglePageList.vue
+++ b/src/modules/contents/pages/SinglePageList.vue
@@ -26,273 +26,27 @@ import {
 } from "@halo-dev/components";
 import SinglePageSettingModal from "./components/SinglePageSettingModal.vue";
 import UserDropdownSelector from "@/components/dropdown-selector/UserDropdownSelector.vue";
-import { computed, onMounted, ref, watch } from "vue";
-import type {
-  ListedSinglePageList,
-  SinglePage,
-  User,
-} from "@halo-dev/api-client";
+import { computed, ref, watch } from "vue";
+import type { ListedSinglePage, SinglePage, User } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { formatDatetime } from "@/utils/date";
-import { onBeforeRouteLeave, RouterLink } from "vue-router";
+import { RouterLink } from "vue-router";
 import cloneDeep from "lodash.clonedeep";
 import { usePermission } from "@/utils/permission";
 import { singlePageLabels } from "@/constants/labels";
 import FilterTag from "@/components/filter/FilterTag.vue";
 import FilterCleanButton from "@/components/filter/FilterCleanButton.vue";
 import { getNode } from "@formkit/core";
+import { useQuery } from "@tanstack/vue-query";
 
 const { currentUserHasPermission } = usePermission();
 
-const singlePages = ref<ListedSinglePageList>({
-  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 selectedSinglePage = ref<SinglePage>();
 const selectedPageNames = ref<string[]>([]);
 const checkedAll = ref(false);
-const refreshInterval = ref();
-
-const handleFetchSinglePages = async (options?: {
-  mute?: boolean;
-  page?: number;
-}) => {
-  try {
-    clearInterval(refreshInterval.value);
-
-    if (!options?.mute) {
-      loading.value = true;
-    }
-
-    let contributors: string[] | undefined;
-    const labelSelector: string[] = ["content.halo.run/deleted=false"];
-
-    if (selectedContributor.value) {
-      contributors = [selectedContributor.value.metadata.name];
-    }
-
-    if (selectedPublishStatusItem.value.value !== undefined) {
-      labelSelector.push(
-        `${singlePageLabels.PUBLISHED}=${selectedPublishStatusItem.value.value}`
-      );
-    }
-
-    if (options?.page) {
-      singlePages.value.page = options.page;
-    }
-
-    const { data } = await apiClient.singlePage.listSinglePages({
-      labelSelector,
-      page: singlePages.value.page,
-      size: singlePages.value.size,
-      visible: selectedVisibleItem.value.value,
-      sort: selectedSortItem.value?.sort,
-      sortOrder: selectedSortItem.value?.sortOrder,
-      keyword: keyword.value,
-      contributor: contributors,
-    });
-    singlePages.value = data;
-
-    const abnormalSinglePages = singlePages.value.items.filter((singlePage) => {
-      const { spec, metadata, status } = singlePage.page;
-      return (
-        spec.deleted ||
-        (spec.publish &&
-          metadata.labels?.[singlePageLabels.PUBLISHED] !== "true") ||
-        (spec.releaseSnapshot === spec.headSnapshot && status?.inProgress)
-      );
-    });
-
-    if (abnormalSinglePages.length) {
-      refreshInterval.value = setInterval(() => {
-        handleFetchSinglePages({ mute: true });
-      }, 3000);
-    }
-  } catch (error) {
-    console.error("Failed to fetch single pages", error);
-  } finally {
-    loading.value = false;
-  }
-};
-
-onBeforeRouteLeave(() => {
-  clearInterval(refreshInterval.value);
-});
-
-const handlePaginationChange = ({
-  page,
-  size,
-}: {
-  page: number;
-  size: number;
-}) => {
-  singlePages.value.page = page;
-  singlePages.value.size = size;
-  handleFetchSinglePages();
-};
-
-const handleOpenSettingModal = async (singlePage: SinglePage) => {
-  const { data } =
-    await apiClient.extension.singlePage.getcontentHaloRunV1alpha1SinglePage({
-      name: singlePage.metadata.name,
-    });
-  selectedSinglePage.value = data;
-  settingModal.value = true;
-};
-
-const onSettingModalClose = () => {
-  selectedSinglePage.value = undefined;
-  handleFetchSinglePages({ mute: true });
-};
-
-const handleSelectPrevious = async () => {
-  const { items, hasPrevious } = singlePages.value;
-  const index = items.findIndex(
-    (singlePage) =>
-      singlePage.page.metadata.name === selectedSinglePage.value?.metadata.name
-  );
-  if (index > 0) {
-    const { data } =
-      await apiClient.extension.singlePage.getcontentHaloRunV1alpha1SinglePage({
-        name: items[index - 1].page.metadata.name,
-      });
-    selectedSinglePage.value = data;
-    return;
-  }
-  if (index === 0 && hasPrevious) {
-    singlePages.value.page--;
-    await handleFetchSinglePages();
-    selectedSinglePage.value =
-      singlePages.value.items[singlePages.value.items.length - 1].page;
-  }
-};
-
-const handleSelectNext = async () => {
-  const { items, hasNext } = singlePages.value;
-  const index = items.findIndex(
-    (singlePage) =>
-      singlePage.page.metadata.name === selectedSinglePage.value?.metadata.name
-  );
-  if (index < items.length - 1) {
-    const { data } =
-      await apiClient.extension.singlePage.getcontentHaloRunV1alpha1SinglePage({
-        name: items[index + 1].page.metadata.name,
-      });
-    selectedSinglePage.value = data;
-    return;
-  }
-  if (index === items.length - 1 && hasNext) {
-    singlePages.value.page++;
-    await handleFetchSinglePages();
-    selectedSinglePage.value = singlePages.value.items[0].page;
-  }
-};
-
-const checkSelection = (singlePage: SinglePage) => {
-  return (
-    singlePage.metadata.name === selectedSinglePage.value?.metadata.name ||
-    selectedPageNames.value.includes(singlePage.metadata.name)
-  );
-};
-
-const handleCheckAllChange = (e: Event) => {
-  const { checked } = e.target as HTMLInputElement;
-
-  if (checked) {
-    selectedPageNames.value =
-      singlePages.value.items.map((singlePage) => {
-        return singlePage.page.metadata.name;
-      }) || [];
-  } else {
-    selectedPageNames.value = [];
-  }
-};
-
-const handleDelete = async (singlePage: SinglePage) => {
-  Dialog.warning({
-    title: "确定要删除该自定义页面吗？",
-    description: "该操作会将自定义页面放入回收站，后续可以从回收站恢复",
-    confirmType: "danger",
-    onConfirm: async () => {
-      const singlePageToUpdate = cloneDeep(singlePage);
-      singlePageToUpdate.spec.deleted = true;
-      await apiClient.extension.singlePage.updatecontentHaloRunV1alpha1SinglePage(
-        {
-          name: singlePage.metadata.name,
-          singlePage: singlePageToUpdate,
-        }
-      );
-      await handleFetchSinglePages();
-
-      Toast.success("删除成功");
-    },
-  });
-};
-
-const handleDeleteInBatch = async () => {
-  Dialog.warning({
-    title: "确定要删除选中的自定义页面吗？",
-    description: "该操作会将自定义页面放入回收站，后续可以从回收站恢复",
-    confirmType: "danger",
-    onConfirm: async () => {
-      await Promise.all(
-        selectedPageNames.value.map((name) => {
-          const page = singlePages.value.items.find(
-            (item) => item.page.metadata.name === name
-          )?.page;
-
-          if (!page) {
-            return Promise.resolve();
-          }
-
-          page.spec.deleted = true;
-          return apiClient.extension.singlePage.updatecontentHaloRunV1alpha1SinglePage(
-            {
-              name: page.metadata.name,
-              singlePage: page,
-            }
-          );
-        })
-      );
-      await handleFetchSinglePages();
-      selectedPageNames.value = [];
-
-      Toast.success("删除成功");
-    },
-  });
-};
-
-const getPublishStatus = (singlePage: SinglePage) => {
-  const { labels } = singlePage.metadata;
-  return labels?.[singlePageLabels.PUBLISHED] === "true" ? "已发布" : "未发布";
-};
-
-const isPublishing = (singlePage: SinglePage) => {
-  const { spec, status, metadata } = singlePage;
-  return (
-    (spec.publish &&
-      metadata.labels?.[singlePageLabels.PUBLISHED] !== "true") ||
-    (spec.releaseSnapshot === spec.headSnapshot && status?.inProgress)
-  );
-};
-
-watch(selectedPageNames, (newValue) => {
-  checkedAll.value = newValue.length === singlePages.value.items?.length;
-});
-
-onMounted(handleFetchSinglePages);
 
 // Filters
-
 interface VisibleItem {
   label: string;
   value?: "PUBLIC" | "INTERNAL" | "PRIVATE";
@@ -375,22 +129,22 @@ const keyword = ref("");
 
 function handleVisibleItemChange(visibleItem: VisibleItem) {
   selectedVisibleItem.value = visibleItem;
-  handleFetchSinglePages({ page: 1 });
+  page.value = 1;
 }
 
 const handleSelectUser = (user?: User) => {
   selectedContributor.value = user;
-  handleFetchSinglePages({ page: 1 });
+  page.value = 1;
 };
 
 function handlePublishStatusItemChange(publishStatusItem: PublishStatusItem) {
   selectedPublishStatusItem.value = publishStatusItem;
-  handleFetchSinglePages({ page: 1 });
+  page.value = 1;
 }
 
 function handleSortItemChange(sortItem?: SortItem) {
   selectedSortItem.value = sortItem;
-  handleFetchSinglePages({ page: 1 });
+  page.value = 1;
 }
 
 function handleKeywordChange() {
@@ -398,12 +152,12 @@ function handleKeywordChange() {
   if (keywordNode) {
     keyword.value = keywordNode._value as string;
   }
-  handleFetchSinglePages({ page: 1 });
+  page.value = 1;
 }
 
 function handleClearKeyword() {
   keyword.value = "";
-  handleFetchSinglePages({ page: 1 });
+  page.value = 1;
 }
 
 const hasFilters = computed(() => {
@@ -422,8 +176,232 @@ function handleClearFilters() {
   selectedPublishStatusItem.value = PublishStatusItems[0];
   selectedSortItem.value = undefined;
   keyword.value = "";
-  handleFetchSinglePages({ page: 1 });
+  page.value = 1;
 }
+
+const page = ref(1);
+const size = ref(20);
+const total = ref(0);
+const hasNext = ref(false);
+const hasPrevious = ref(false);
+
+const {
+  data: singlePages,
+  isLoading,
+  isFetching,
+  refetch,
+} = useQuery<ListedSinglePage[]>({
+  queryKey: [
+    "singlePages",
+    selectedContributor,
+    selectedPublishStatusItem,
+    page,
+    size,
+    selectedVisibleItem,
+    selectedSortItem,
+    keyword,
+  ],
+  queryFn: async () => {
+    let contributors: string[] | undefined;
+    const labelSelector: string[] = ["content.halo.run/deleted=false"];
+
+    if (selectedContributor.value) {
+      contributors = [selectedContributor.value.metadata.name];
+    }
+
+    if (selectedPublishStatusItem.value.value !== undefined) {
+      labelSelector.push(
+        `${singlePageLabels.PUBLISHED}=${selectedPublishStatusItem.value.value}`
+      );
+    }
+
+    const { data } = await apiClient.singlePage.listSinglePages({
+      labelSelector,
+      page: page.value,
+      size: size.value,
+      visible: selectedVisibleItem.value.value,
+      sort: selectedSortItem.value?.sort,
+      sortOrder: selectedSortItem.value?.sortOrder,
+      keyword: keyword.value,
+      contributor: contributors,
+    });
+
+    total.value = data.total;
+    hasNext.value = data.hasNext;
+    hasPrevious.value = data.hasPrevious;
+
+    return data.items;
+  },
+  refetchOnWindowFocus: false,
+  refetchInterval(data) {
+    const abnormalSinglePages = data?.filter((singlePage) => {
+      const { spec, metadata, status } = singlePage.page;
+      return (
+        spec.deleted ||
+        (spec.publish &&
+          metadata.labels?.[singlePageLabels.PUBLISHED] !== "true") ||
+        (spec.releaseSnapshot === spec.headSnapshot && status?.inProgress)
+      );
+    });
+    return abnormalSinglePages?.length ? 3000 : false;
+  },
+});
+
+const handleOpenSettingModal = async (singlePage: SinglePage) => {
+  const { data } =
+    await apiClient.extension.singlePage.getcontentHaloRunV1alpha1SinglePage({
+      name: singlePage.metadata.name,
+    });
+  selectedSinglePage.value = data;
+  settingModal.value = true;
+};
+
+const onSettingModalClose = () => {
+  selectedSinglePage.value = undefined;
+  refetch();
+};
+
+const handleSelectPrevious = async () => {
+  if (!singlePages.value) return;
+
+  const index = singlePages.value.findIndex(
+    (singlePage) =>
+      singlePage.page.metadata.name === selectedSinglePage.value?.metadata.name
+  );
+  if (index > 0) {
+    const { data } =
+      await apiClient.extension.singlePage.getcontentHaloRunV1alpha1SinglePage({
+        name: singlePages.value[index - 1].page.metadata.name,
+      });
+    selectedSinglePage.value = data;
+    return;
+  }
+  if (index === 0 && hasPrevious.value) {
+    page.value--;
+    await refetch();
+    selectedSinglePage.value =
+      singlePages.value[singlePages.value.length - 1].page;
+  }
+};
+
+const handleSelectNext = async () => {
+  if (!singlePages.value) return;
+
+  const index = singlePages.value.findIndex(
+    (singlePage) =>
+      singlePage.page.metadata.name === selectedSinglePage.value?.metadata.name
+  );
+  if (index < singlePages.value.length - 1) {
+    const { data } =
+      await apiClient.extension.singlePage.getcontentHaloRunV1alpha1SinglePage({
+        name: singlePages.value[index + 1].page.metadata.name,
+      });
+    selectedSinglePage.value = data;
+    return;
+  }
+  if (index === singlePages.value.length - 1 && hasNext.value) {
+    page.value++;
+    await refetch();
+    selectedSinglePage.value = singlePages.value[0].page;
+  }
+};
+
+const checkSelection = (singlePage: SinglePage) => {
+  return (
+    singlePage.metadata.name === selectedSinglePage.value?.metadata.name ||
+    selectedPageNames.value.includes(singlePage.metadata.name)
+  );
+};
+
+const handleCheckAllChange = (e: Event) => {
+  const { checked } = e.target as HTMLInputElement;
+
+  if (checked) {
+    selectedPageNames.value =
+      singlePages.value?.map((singlePage) => {
+        return singlePage.page.metadata.name;
+      }) || [];
+  } else {
+    selectedPageNames.value = [];
+  }
+};
+
+const handleDelete = async (singlePage: SinglePage) => {
+  Dialog.warning({
+    title: "确定要删除该自定义页面吗？",
+    description: "该操作会将自定义页面放入回收站，后续可以从回收站恢复",
+    confirmType: "danger",
+    onConfirm: async () => {
+      const singlePageToUpdate = cloneDeep(singlePage);
+      singlePageToUpdate.spec.deleted = true;
+      await apiClient.extension.singlePage.updatecontentHaloRunV1alpha1SinglePage(
+        {
+          name: singlePage.metadata.name,
+          singlePage: singlePageToUpdate,
+        }
+      );
+      await refetch();
+
+      Toast.success("删除成功");
+    },
+  });
+};
+
+const handleDeleteInBatch = async () => {
+  Dialog.warning({
+    title: "确定要删除选中的自定义页面吗？",
+    description: "该操作会将自定义页面放入回收站，后续可以从回收站恢复",
+    confirmType: "danger",
+    onConfirm: async () => {
+      await Promise.all(
+        selectedPageNames.value.map((name) => {
+          const page = singlePages.value?.find(
+            (item) => item.page.metadata.name === name
+          )?.page;
+
+          if (!page) {
+            return Promise.resolve();
+          }
+
+          return apiClient.extension.singlePage.updatecontentHaloRunV1alpha1SinglePage(
+            {
+              name: page.metadata.name,
+              singlePage: {
+                ...page,
+                spec: {
+                  ...page.spec,
+                  deleted: true,
+                },
+              },
+            }
+          );
+        })
+      );
+      await refetch();
+      selectedPageNames.value = [];
+
+      Toast.success("删除成功");
+    },
+  });
+};
+
+const getPublishStatus = (singlePage: SinglePage) => {
+  const { labels } = singlePage.metadata;
+  return labels?.[singlePageLabels.PUBLISHED] === "true" ? "已发布" : "未发布";
+};
+
+const isPublishing = (singlePage: SinglePage) => {
+  const { spec, status, metadata } = singlePage;
+  return (
+    (spec.publish &&
+      metadata.labels?.[singlePageLabels.PUBLISHED] !== "true") ||
+    (spec.releaseSnapshot === spec.headSnapshot && status?.inProgress)
+  );
+};
+
+watch(selectedPageNames, (newValue) => {
+  checkedAll.value = newValue.length === singlePages.value?.length;
+});
 </script>
 
 <template>
@@ -649,11 +627,11 @@ function handleClearFilters() {
                 <div class="flex flex-row gap-2">
                   <div
                     class="group cursor-pointer rounded p-1 hover:bg-gray-200"
-                    @click="handleFetchSinglePages()"
+                    @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>
@@ -663,12 +641,12 @@ function handleClearFilters() {
           </div>
         </div>
       </template>
-      <VLoading v-if="loading" />
-      <Transition v-else-if="!singlePages.items.length" appear name="fade">
+      <VLoading v-if="isLoading" />
+      <Transition v-else-if="!singlePages?.length" appear name="fade">
         <VEmpty message="你可以尝试刷新或者新建页面" title="当前没有页面">
           <template #actions>
             <VSpace>
-              <VButton @click="handleFetchSinglePages">刷新</VButton>
+              <VButton @click="refetch">刷新</VButton>
               <VButton
                 v-permission="['system:singlepages:manage']"
                 :route="{ name: 'SinglePageEditor' }"
@@ -688,7 +666,7 @@ function handleClearFilters() {
           class="box-border h-full w-full divide-y divide-gray-100"
           role="list"
         >
-          <li v-for="(singlePage, index) in singlePages.items" :key="index">
+          <li v-for="(singlePage, index) in singlePages" :key="index">
             <VEntity :is-selected="checkSelection(singlePage.page)">
               <template
                 v-if="currentUserHasPermission(['system:singlepages:manage'])"
@@ -838,11 +816,10 @@ function handleClearFilters() {
       <template #footer>
         <div class="bg-white sm:flex sm:items-center sm:justify-end">
           <VPagination
-            :page="singlePages.page"
-            :size="singlePages.size"
-            :total="singlePages.total"
+            v-model:page="page"
+            v-model:size="size"
+            :total="total"
             :size-options="[20, 30, 50, 100]"
-            @change="handlePaginationChange"
           />
         </div>
       </template>