feat: record the user query conditions in the route query parameters (#5071)

#### 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 端的用户管理列表支持在地址栏记录筛选条件。
```
pull/5101/head^2
Ryan Wang 2023-12-21 14:52:12 +08:00 committed by GitHub
parent 240201305a
commit cdd5cb44bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 5 deletions

View File

@ -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 {