From 1020d78b91d636c3a6e5ab6a94f7e3d007f6ff3a Mon Sep 17 00:00:00 2001
From: liumangmang <a362165265@qq.com>
Date: Fri, 20 Mar 2026 15:50:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=90=9C=E7=B4=A2=E8=AF=8D=E5=90=8C?=
 =?UTF-8?q?=E6=AD=A5=E5=88=B0=20URL=20=E6=9F=A5=E8=AF=A2=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

-连接列表页 ()
  - 监听 URL 查询参数变化，初始化搜索框
  - 搜索InputChange 时更新 URL
  - 清空搜索时移除 URL 查询参数
---
 frontend/src/views/ConnectionsView.vue | 72 +++++++++++++++-----------
 1 file changed, 43 insertions(+), 29 deletions(-)

diff --git a/frontend/src/views/ConnectionsView.vue b/frontend/src/views/ConnectionsView.vue
index 7ebdb3d..b79b120 100644
--- a/frontend/src/views/ConnectionsView.vue
+++ b/frontend/src/views/ConnectionsView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { computed, ref, onMounted, watch } from 'vue'
+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 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))
-  })
-})
+const tabsStore = useTerminalTabsStore()
 
-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() {
-  searchQuery.value = ''
+function clearSearch() {
+  searchQuery.value = ''
+  updateSearchParam('')
 }
 </script>