feat: record the comment query conditions in the route query parameters (#4209)

#### 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 端的评论管理列表支持在地址栏记录筛选条件。
```

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 keyword = useRouteQuery<string>("keyword", "");
-const selectedApprovedStatus = ref();
+const selectedApprovedStatus = useRouteQuery<string | undefined>(
-const selectedSort = ref();
+  "approved",
-const selectedUser = ref();
+  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 page = useRouteQuery<number>("page", 1, {
-const size = ref(20);
+  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',
                     },
                   ]"
                 />