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,33 +19,46 @@ import {
 } from 'lucide-vue-next'
 
 const router = useRouter()
+const route = useRoute()
 const store = useConnectionsStore()
-const tabsStore = useTerminalTabsStore()
+const tabsStore = useTerminalTabsStore()
-
-const showForm = ref(false)
-const editingConn = ref<Connection | null>(null)
-const searchQuery = ref('')
-
-const filteredConnections = computed(() => {
-  const keyword = searchQuery.value.trim().toLowerCase()
-
-  if (!keyword) {
-    return store.connections
-  }
-
-  return store.connections.filter((conn) => {
-    const fields = [
-      conn.name,
-      conn.host,
-      conn.username,
-      String(conn.port),
-    ]
-
-    return fields.some((field) => field.toLowerCase().includes(keyword))
-  })
-})
 
-onMounted(() => store.fetchConnections())
+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 q = keyword.value.trim().toLowerCase()
+
+  if (!q) {
+    return store.connections
+  }
+
+  return store.connections.filter((conn) => {
+    const fields = [
+      conn.name,
+      conn.host,
+      conn.username,
+      String(conn.port),
+    ]
+
+    return fields.some((field) => field.toLowerCase().includes(q))
+  })
+})
+
+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
@@ -85,8 +98,9 @@ function openSftp(conn: Connection) {
   router.push(`/sftp/${conn.id}`)
 }
 
-function clearSearch() {
+function clearSearch() {
-  searchQuery.value = ''
+  searchQuery.value = ''
+  updateSearchParam('')
 }
 </script>