From 7ee6e050a277ac86006c4df22d1c56e0822c59ed Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Fri, 21 Jul 2023 10:28:13 +0800
Subject: [PATCH] feat: record the comment query conditions in the route query
 parameters (#4209)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind feature
/milestone 2.8.x

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

在评论数据管理列表页面路由中记录查询条件，包括分页信息、筛选信息等。可以保证在刷新浏览器窗口或者从其他页面返回的时候不丢失筛选条件。

<img width="1544" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/39573c8d-f664-40d1-8248-90443179ac73">

#### Special notes for your reviewer:

需要测试：

1. 评论管理列表的所有筛选项是否可以正常工作。
2. 尝试设置部分筛选，然后刷新页面，观察筛选条件是否正常保留。

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

```release-note
Console 端的评论管理列表支持在地址栏记录筛选条件。
```
---
 .../modules/contents/comments/CommentList.vue | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/console/src/modules/contents/comments/CommentList.vue b/console/src/modules/contents/comments/CommentList.vue
index df615c1ac..5a174292f 100644
--- a/console/src/modules/contents/comments/CommentList.vue
+++ b/console/src/modules/contents/comments/CommentList.vue
@@ -19,6 +19,7 @@ import { apiClient } from "@/utils/api-client";
 import { useQuery } from "@tanstack/vue-query";
 import { useI18n } from "vue-i18n";
 import UserFilterDropdown from "@/components/filter/UserFilterDropdown.vue";
+import { useRouteQuery } from "@vueuse/router";
 
 const { t } = useI18n();
 
@@ -26,10 +27,13 @@ const checkAll = ref(false);
 const selectedComment = ref<ListedComment>();
 const selectedCommentNames = ref<string[]>([]);
 
-const keyword = ref("");
-const selectedApprovedStatus = ref();
-const selectedSort = ref();
-const selectedUser = ref();
+const keyword = useRouteQuery<string>("keyword", "");
+const selectedApprovedStatus = useRouteQuery<string | undefined>(
+  "approved",
+  undefined
+);
+const selectedSort = useRouteQuery<string | undefined>("sort");
+const selectedUser = useRouteQuery<string | undefined>("user");
 
 watch(
   () => [
@@ -57,8 +61,12 @@ function handleClearFilters() {
   selectedUser.value = undefined;
 }
 
-const page = ref(1);
-const size = ref(20);
+const page = useRouteQuery<number>("page", 1, {
+  transform: Number,
+});
+const size = useRouteQuery<number>("size", 20, {
+  transform: Number,
+});
 const total = ref(0);
 
 const {
@@ -80,7 +88,10 @@ const {
     const { data } = await apiClient.comment.listComments({
       page: page.value,
       size: size.value,
-      approved: selectedApprovedStatus.value,
+      approved:
+        selectedApprovedStatus.value !== undefined
+          ? Boolean(selectedApprovedStatus.value)
+          : undefined,
       sort: [selectedSort.value].filter(Boolean) as string[],
       keyword: keyword.value,
       ownerName: selectedUser.value,
@@ -260,13 +271,13 @@ const handleApproveInBatch = async () => {
                     },
                     {
                       label: t('core.comment.filters.status.items.approved'),
-                      value: true,
+                      value: 'true',
                     },
                     {
                       label: t(
                         'core.comment.filters.status.items.pending_review'
                       ),
-                      value: false,
+                      value: 'false',
                     },
                   ]"
                 />