feat: 搜索词同步到 URL 查询参数

搜索词现在会同步到 URL 查询参数 ?q=xxx，刷新页面后保留搜索状态。

-连接列表页 ()
  - 监听 URL 查询参数变化，初始化搜索框
  - 搜索InputChange 时更新 URL
  - 清空搜索时移除 URL 查询参数

frontend/src/views/ConnectionsView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
+import { computed, ref, onMounted, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { useConnectionsStore } from '../stores/connections'
 import { useTerminalTabsStore } from '../stores/terminalTabs'
 import type { Connection, ConnectionCreateRequest } from '../api/connections'
@@ -19,6 +19,7 @@ import {
 } from 'lucide-vue-next'
 
 const router = useRouter()
+const route = useRoute()
 const store = useConnectionsStore()
 const tabsStore = useTerminalTabsStore()
 
@@ -26,10 +27,11 @@ const showForm = ref(false)
 const editingConn = ref<Connection | null>(null)
 const searchQuery = ref('')
 
+const keyword = computed(() => route.query.q as string || '')
 const filteredConnections = computed(() => {
-  const keyword = searchQuery.value.trim().toLowerCase()
+  const q = keyword.value.trim().toLowerCase()
 
-  if (!keyword) {
+  if (!q) {
     return store.connections
   }
 
@@ -41,11 +43,22 @@ const filteredConnections = computed(() => {
       String(conn.port),
     ]
 
-    return fields.some((field) => field.toLowerCase().includes(keyword))
+    return fields.some((field) => field.toLowerCase().includes(q))
   })
 })
 
-onMounted(() => store.fetchConnections())
+const updateSearchParam = (value: string) => {
+  router.push({ query: { ...route.query, q: value } })
+}
+
+onMounted(() => {
+  searchQuery.value = keyword.value
+  store.fetchConnections()
+})
+
+watch(searchQuery, (val) => {
+  updateSearchParam(val)
+})
 
 function openCreate() {
   editingConn.value = null
@@ -87,6 +100,7 @@ function openSftp(conn: Connection) {
 
 function clearSearch() {
   searchQuery.value = ''
+  updateSearchParam('')
 }
 </script>