From 8d0564008ae4e58e941bc4f8c906ccb54d558e38 Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Fri, 26 Jun 2026 11:22:19 +0800
Subject: [PATCH] Improve account admin route state

---
 spx-gui/src/apps/xbuilder/pages/admin/app.vue |  9 +++++++
 .../src/apps/xbuilder/pages/admin/apps.vue    | 18 ++++++++-----
 .../apps/xbuilder/pages/admin/audit-logs.vue  | 24 ++++++++++-------
 .../src/apps/xbuilder/pages/admin/grant.vue   | 12 +++++++++
 .../src/apps/xbuilder/pages/admin/index.vue   |  3 +++
 .../src/apps/xbuilder/pages/admin/user.vue    |  9 +++++++
 .../src/apps/xbuilder/pages/admin/users.vue   | 26 ++++++++++++-------
 7 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/spx-gui/src/apps/xbuilder/pages/admin/app.vue b/spx-gui/src/apps/xbuilder/pages/admin/app.vue
index 243b3e040..d7eeee2fd 100644
--- a/spx-gui/src/apps/xbuilder/pages/admin/app.vue
+++ b/spx-gui/src/apps/xbuilder/pages/admin/app.vue
@@ -5,6 +5,7 @@ import { RouterLink } from 'vue-router'
 import { useMessageHandle } from '@/utils/exception'
 import { useI18n } from '@/utils/i18n'
 import { useQuery } from '@/utils/query'
+import { usePageTitle } from '@/utils/utils'
 import { useSignedInStateQuery } from '@/stores/user'
 import { UIButton, UIError, UILoading, UISwitch, UITextInput } from '@/components/ui'
 import CopyButton from '@/components/common/CopyButton.vue'
@@ -39,6 +40,14 @@ const appQuery = useQuery(
   }
 )
 const app = computed(() => appQuery.data.value)
+usePageTitle(() =>
+  app.value == null
+    ? { en: 'Account admin OAuth app', zh: '账号管理 OAuth 应用' }
+    : [
+        { en: app.value.displayName, zh: app.value.displayName },
+        { en: 'Account admin OAuth app', zh: '账号管理 OAuth 应用' }
+      ]
+)
 
 const displayName = ref('')
 const status = ref<accountAdminApis.AccountApp['status']>('active')
diff --git a/spx-gui/src/apps/xbuilder/pages/admin/apps.vue b/spx-gui/src/apps/xbuilder/pages/admin/apps.vue
index 23d37ecb3..4f8c232dc 100644
--- a/spx-gui/src/apps/xbuilder/pages/admin/apps.vue
+++ b/spx-gui/src/apps/xbuilder/pages/admin/apps.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 
 import { useMessageHandle } from '@/utils/exception'
 import { useQuery } from '@/utils/query'
+import { useRouteQueryParamInt, useRouteQueryParamStrEnum } from '@/utils/route'
+import { usePageTitle } from '@/utils/utils'
 import { useSignedInStateQuery } from '@/stores/user'
 import { UIButton, UIError, UILoading, UIPagination, UISelect, UISelectOption, UITextInput } from '@/components/ui'
 import * as accountAdminApis from '@/apis/admin/account'
@@ -16,13 +18,19 @@ import {
   parseLines
 } from './common'
 
+const SortOrder = {
+  Asc: 'asc',
+  Desc: 'desc'
+} as const
+
 const signedInStateQuery = useSignedInStateQuery()
 const router = useRouter()
 const canManageAccount = computed(() => signedInStateQuery.data.value?.user?.capabilities.canManageAccount === true)
 
 const pageSize = 20
-const page = ref(1)
-const sortOrder = ref<'asc' | 'desc'>('desc')
+const page = useRouteQueryParamInt('p', 1)
+const resetPage = (query: Partial<Record<string, string | null>>) => ({ ...query, p: null })
+const sortOrder = useRouteQueryParamStrEnum('order', SortOrder, SortOrder.Desc, resetPage)
 const showCreateForm = ref(false)
 
 const createForm = reactive({
@@ -48,9 +56,7 @@ const appsQuery = useQuery(
 
 const pageTotal = computed(() => Math.ceil((appsQuery.data.value?.total ?? 0) / pageSize))
 
-watch(sortOrder, () => {
-  page.value = 1
-})
+usePageTitle({ en: 'Account admin OAuth apps', zh: '账号管理 OAuth 应用' })
 
 const handleCreateApp = useMessageHandle(
   async () => {
diff --git a/spx-gui/src/apps/xbuilder/pages/admin/audit-logs.vue b/spx-gui/src/apps/xbuilder/pages/admin/audit-logs.vue
index c32f0fecd..d8bd96bb3 100644
--- a/spx-gui/src/apps/xbuilder/pages/admin/audit-logs.vue
+++ b/spx-gui/src/apps/xbuilder/pages/admin/audit-logs.vue
@@ -1,20 +1,24 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
 
 import { useQuery } from '@/utils/query'
+import { useRouteQueryParamInt, useRouteQueryParamStr, useRouteQueryParamStrEnum } from '@/utils/route'
+import { usePageTitle } from '@/utils/utils'
 import { UIButton, UIError, UILoading, UIPagination, UISelect, UISelectOption } from '@/components/ui'
 import * as auditApis from '@/apis/admin/audit'
 import { formatJSON, formatTime } from './common'
 
-const pageSize = 20
-const page = ref(1)
-const sortOrder = ref<'asc' | 'desc'>('desc')
-const createdAfter = ref('')
-const createdBefore = ref('')
+const SortOrder = {
+  Asc: 'asc',
+  Desc: 'desc'
+} as const
 
-watch([sortOrder, createdAfter, createdBefore], () => {
-  page.value = 1
-})
+const pageSize = 20
+const page = useRouteQueryParamInt('p', 1)
+const resetPage = (query: Partial<Record<string, string | null>>) => ({ ...query, p: null })
+const sortOrder = useRouteQueryParamStrEnum('order', SortOrder, SortOrder.Desc, resetPage)
+const createdAfter = useRouteQueryParamStr('from', '', resetPage)
+const createdBefore = useRouteQueryParamStr('to', '', resetPage)
 
 function clearFilters() {
   createdAfter.value = ''
@@ -44,6 +48,8 @@ const auditLogsQuery = useQuery(
 )
 
 const pageTotal = computed(() => Math.ceil((auditLogsQuery.data.value?.total ?? 0) / pageSize))
+
+usePageTitle({ en: 'Account admin audit logs', zh: '账号管理审计日志' })
 </script>
 
 <template>
diff --git a/spx-gui/src/apps/xbuilder/pages/admin/grant.vue b/spx-gui/src/apps/xbuilder/pages/admin/grant.vue
index 0b07a286b..f872fdf8a 100644
--- a/spx-gui/src/apps/xbuilder/pages/admin/grant.vue
+++ b/spx-gui/src/apps/xbuilder/pages/admin/grant.vue
@@ -6,6 +6,7 @@ import { RouterLink } from 'vue-router'
 import { useMessageHandle } from '@/utils/exception'
 import { useI18n } from '@/utils/i18n'
 import { useQuery } from '@/utils/query'
+import { usePageTitle } from '@/utils/utils'
 import { useSignedInStateQuery } from '@/stores/user'
 import {
   UIButton,
@@ -51,6 +52,17 @@ const grantQuery = useQuery(
 const grant = computed(() => grantQuery.data.value)
 const app = computed(() => grant.value?.app ?? null)
 const appFallbackText = computed(() => app.value?.displayName.trim().charAt(0).toUpperCase() || '?')
+usePageTitle(() =>
+  app.value == null || user.value == null
+    ? { en: 'Account admin app grant', zh: '账号管理应用授权' }
+    : [
+        {
+          en: `${user.value.displayName} -> ${app.value.displayName}`,
+          zh: `${user.value.displayName} -> ${app.value.displayName}`
+        },
+        { en: 'Account admin app grant', zh: '账号管理应用授权' }
+      ]
+)
 
 const tokensPageSize = 20
 const tokensPage = ref(1)
diff --git a/spx-gui/src/apps/xbuilder/pages/admin/index.vue b/spx-gui/src/apps/xbuilder/pages/admin/index.vue
index fc9bb5db9..8c2034d71 100644
--- a/spx-gui/src/apps/xbuilder/pages/admin/index.vue
+++ b/spx-gui/src/apps/xbuilder/pages/admin/index.vue
@@ -2,12 +2,15 @@
 import { computed } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 
+import { usePageTitle } from '@/utils/utils'
 import { useSignedInStateQuery } from '@/stores/user'
 import { UIError, UILoading, UIMenu, UIMenuGroup, UIMenuItem } from '@/components/ui'
 import CenteredWrapper from '@/components/common/CenteredWrapper.vue'
 import NavbarDropdown from '@/components/navbar/NavbarDropdown.vue'
 import NavbarWrapper from '@/components/navbar/NavbarWrapper.vue'
 
+usePageTitle({ en: 'Account admin', zh: '账号管理' })
+
 const route = useRoute()
 const router = useRouter()
 const signedInStateQuery = useSignedInStateQuery()
diff --git a/spx-gui/src/apps/xbuilder/pages/admin/user.vue b/spx-gui/src/apps/xbuilder/pages/admin/user.vue
index d5a31f2df..fa27b4772 100644
--- a/spx-gui/src/apps/xbuilder/pages/admin/user.vue
+++ b/spx-gui/src/apps/xbuilder/pages/admin/user.vue
@@ -30,6 +30,7 @@ import { RouterLink } from 'vue-router'
 import { useMessageHandle } from '@/utils/exception'
 import { useI18n } from '@/utils/i18n'
 import { useQuery } from '@/utils/query'
+import { usePageTitle } from '@/utils/utils'
 import { useSignedInStateQuery } from '@/stores/user'
 import {
   UIButton,
@@ -71,6 +72,14 @@ const userQuery = useQuery(
 )
 const user = computed(() => userQuery.data.value)
 const avatarFallbackText = computed(() => user.value?.displayName.trim().charAt(0).toUpperCase() || '?')
+usePageTitle(() =>
+  user.value == null
+    ? { en: 'Account admin user', zh: '账号管理用户' }
+    : [
+        { en: user.value.displayName, zh: user.value.displayName },
+        { en: 'Account admin user', zh: '账号管理用户' }
+      ]
+)
 
 const displayName = ref('')
 watch(
diff --git a/spx-gui/src/apps/xbuilder/pages/admin/users.vue b/spx-gui/src/apps/xbuilder/pages/admin/users.vue
index 3b73a33b8..84acb20ab 100644
--- a/spx-gui/src/apps/xbuilder/pages/admin/users.vue
+++ b/spx-gui/src/apps/xbuilder/pages/admin/users.vue
@@ -5,20 +5,28 @@ import { RouterLink, useRouter } from 'vue-router'
 
 import { useMessageHandle } from '@/utils/exception'
 import { useQuery } from '@/utils/query'
+import { useRouteQueryParamInt, useRouteQueryParamStr, useRouteQueryParamStrEnum } from '@/utils/route'
+import { usePageTitle } from '@/utils/utils'
 import { useSignedInStateQuery } from '@/stores/user'
 import { UIButton, UIError, UILoading, UIPagination, UISelect, UISelectOption, UITextInput } from '@/components/ui'
 import * as accountAdminApis from '@/apis/admin/account'
 import { formatTime } from './common'
 
+const SortOrder = {
+  Asc: 'asc',
+  Desc: 'desc'
+} as const
+
 const signedInStateQuery = useSignedInStateQuery()
 const router = useRouter()
 const canManageAccount = computed(() => signedInStateQuery.data.value?.user?.capabilities.canManageAccount === true)
 
 const pageSize = 20
-const page = ref(1)
-const sortOrder = ref<'asc' | 'desc'>('desc')
-const keywordInput = ref('')
-const keyword = ref('')
+const page = useRouteQueryParamInt('p', 1)
+const resetPage = (query: Partial<Record<string, string | null>>) => ({ ...query, p: null })
+const sortOrder = useRouteQueryParamStrEnum('order', SortOrder, SortOrder.Desc, resetPage)
+const keyword = useRouteQueryParamStr('q', '', resetPage)
+const keywordInput = ref(keyword.value)
 const showCreateForm = ref(false)
 
 const createForm = reactive({
@@ -54,21 +62,21 @@ const usersQuery = useQuery(
 
 const pageTotal = computed(() => Math.ceil((usersQuery.data.value?.total ?? 0) / pageSize))
 
-watch(sortOrder, () => {
-  page.value = 1
-})
-
 const updateKeyword = debounce(() => {
   const nextKeyword = keywordInput.value.trim()
   if (keyword.value === nextKeyword) return
   keyword.value = nextKeyword
-  page.value = 1
 }, 300)
 
+watch(keyword, (value) => {
+  if (keywordInput.value !== value) keywordInput.value = value
+})
 watch(keywordInput, updateKeyword)
 
 onUnmounted(() => updateKeyword.cancel())
 
+usePageTitle({ en: 'Account admin users', zh: '账号管理用户' })
+
 const handleCreateUser = useMessageHandle(
   async () => {
     const user = await accountAdminApis.createAccountUser({