sync search input from URL query

goplus · Oct 25, 2024 · 233e960 · 233e960
1 parent 28a68ce
commit 233e960
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 3 deletions.
diff --git a/spx-gui/src/components/community/CommunityNavbar.vue b/spx-gui/src/components/community/CommunityNavbar.vue
@@ -28,11 +28,13 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { getStringParam } from '@/utils/route'
 import { UIMenu, UITextInput, UIIcon } from '@/components/ui'
 import NavbarWrapper from '@/components/navbar/NavbarWrapper.vue'
 import NavbarDropdown from '../navbar/NavbarDropdown.vue'
 import NavbarNewProjectItem from '@/components/navbar/NavbarNewProjectItem.vue'
 import NavbarOpenProjectItem from '@/components/navbar/NavbarOpenProjectItem.vue'
+import { searchKeywordQueryParamName } from '@/pages/community/search.vue'
 import { getSearchRoute } from '@/router'
 
 const router = useRouter()
@@ -49,6 +51,20 @@ watch(
     if (oldIsSearch && !isSearch) searchInput.value = ''
   }
 )
+
+// Sync search input from query
+watch(
+  () => router.currentRoute.value,
+  (r) => {
+    if (r.meta.isSearch) {
+      const keywordInQuery = getStringParam(router, searchKeywordQueryParamName)
+      if (keywordInQuery != null && keywordInQuery !== searchInput.value) {
+        searchInput.value = keywordInQuery
+      }
+    }
+  },
+  { immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>

diff --git a/spx-gui/src/pages/community/search.vue b/spx-gui/src/pages/community/search.vue
@@ -56,6 +56,11 @@
   </CenteredWrapper>
 </template>
 
+<script lang="ts">
+// `?q=123`
+export const searchKeywordQueryParamName = 'q'
+</script>
+
 <script setup lang="ts">
 import { computed } from 'vue'
 import {
@@ -77,7 +82,7 @@ usePageTitle({
   zh: '项目搜索结果'
 })
 
-const keyword = useRouteQueryParamStr('q', '')
+const keyword = useRouteQueryParamStr(searchKeywordQueryParamName, '')
 
 const isDesktopLarge = useResponsive('desktop-large')
 const numInRow = computed(() => (isDesktopLarge.value ? 5 : 4))

diff --git a/spx-gui/src/router.ts b/spx-gui/src/router.ts
@@ -1,5 +1,6 @@
 import type { App } from 'vue'
 import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import { searchKeywordQueryParamName } from '@/pages/community/search.vue'
 import type { ExploreOrder } from './apis/project'
 import { useUserStore } from './stores/user'
 
@@ -24,7 +25,9 @@ export function getProjectShareRoute(owner: string, name: string) {
 }
 
 export function getSearchRoute(keyword: string = '') {
-  return keyword !== '' ? `/search?q=${encodeURIComponent(keyword)}` : '/search'
+  return keyword !== ''
+    ? `/search?${searchKeywordQueryParamName}=${encodeURIComponent(keyword)}`
+    : '/search'
 }
 
 export function getExploreRoute(order?: ExploreOrder) {

diff --git a/spx-gui/src/utils/route.ts b/spx-gui/src/utils/route.ts
@@ -3,7 +3,7 @@ import { useRouter, type Router } from 'vue-router'
 
 type KVS = Partial<Record<string, string | null>>
 
-function getStringParam(router: Router, key: string): string | null {
+export function getStringParam(router: Router, key: string): string | null {
   const value = router.currentRoute.value.query[key]
   if (value == null) return null
   if (Array.isArray(value)) return value[0]