From cdd5cb44bbb293fa990d260aa9f70c2fb5d4a9cc Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 21 Dec 2023 14:52:12 +0800
Subject: [PATCH] feat: record the user query conditions in the route query
 parameters (#5071)
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.12.x

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

在用户数据管理列表页面路由中记录查询条件，包括分页信息、筛选信息等。可以保证在刷新页面或者切换路由返回时保留之前的查询状态。

<img width="1671" alt="图片" src="https://github.com/halo-dev/halo/assets/21301288/f63240b8-800a-4dc8-be80-1542c43815ee">

#### Which issue(s) this PR fixes:

Fixes #5060

#### Special notes for your reviewer:

需要测试：

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

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

```release-note
Console 端的用户管理列表支持在地址栏记录筛选条件。
```
---
 .../console-src/modules/system/users/UserList.vue  | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/console/console-src/modules/system/users/UserList.vue b/console/console-src/modules/system/users/UserList.vue
index ef98a1bdf..8bcda7a79 100644
--- a/console/console-src/modules/system/users/UserList.vue
+++ b/console/console-src/modules/system/users/UserList.vue
@@ -48,7 +48,7 @@ const grantPermissionModal = ref<boolean>(false);
 
 const selectedUserNames = ref<string[]>([]);
 const selectedUser = ref<User>();
-const keyword = ref("");
+const keyword = useRouteQuery<string>("keyword", "");
 
 const userStore = useUserStore();
 
@@ -57,8 +57,14 @@ const DELETEDUSER_NAME = "ghost";
 
 // Filters
 const { roles } = useFetchRole();
-const selectedRoleValue = ref();
-const selectedSortValue = ref();
+const page = useRouteQuery<number>("page", 1, {
+  transform: Number,
+});
+const size = useRouteQuery<number>("size", 20, {
+  transform: Number,
+});
+const selectedRoleValue = useRouteQuery<string | undefined>("role");
+const selectedSortValue = useRouteQuery<string | undefined>("sort");
 
 function handleClearFilters() {
   selectedRoleValue.value = undefined;
@@ -76,8 +82,6 @@ watch(
   }
 );
 
-const page = ref(1);
-const size = ref(20);
 const total = ref(0);
 
 const {