feat: 为连接列表添加搜索

在连接列表页加入前端即时搜索，支持按名称、主机、用户名和端口过滤连接。补充分离的无结果状态与清空操作，提升连接较多时的查找效率。

frontend/src/views/ConnectionsView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useConnectionsStore } from '../stores/connections'
 import { useTerminalTabsStore } from '../stores/terminalTabs'
@@ -14,6 +14,8 @@ import {
   Trash2,
   Key,
   Lock,
+  Search,
+  X,
 } from 'lucide-vue-next'
 
 const router = useRouter()
@@ -22,6 +24,26 @@ 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())
 
@@ -62,6 +84,10 @@ function openTerminal(conn: Connection) {
 function openSftp(conn: Connection) {
   router.push(`/sftp/${conn.id}`)
 }
+
+function clearSearch() {
+  searchQuery.value = ''
+}
 </script>
 
 <template>
@@ -78,6 +104,25 @@ function openSftp(conn: Connection) {
       </button>
     </div>
 
+    <div class="relative mb-6">
+      <Search class="w-4 h-4 text-slate-500 absolute left-3 top-1/2 -translate-y-1/2" aria-hidden="true" />
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="搜索名称、主机、用户名或端口"
+        class="w-full rounded-xl border border-slate-700 bg-slate-800/70 py-3 pl-10 pr-11 text-slate-100 placeholder:text-slate-500 focus:border-cyan-500 focus:outline-none focus:ring-2 focus:ring-cyan-500/20"
+        aria-label="搜索连接"
+      />
+      <button
+        v-if="searchQuery"
+        @click="clearSearch"
+        class="absolute right-3 top-1/2 -translate-y-1/2 rounded-md p-1 text-slate-400 hover:bg-slate-700 hover:text-slate-100 transition-colors duration-200 cursor-pointer"
+        aria-label="清空搜索"
+      >
+        <X class="w-4 h-4" aria-hidden="true" />
+      </button>
+    </div>
+
     <div v-if="store.connections.length === 0" class="text-center py-16 bg-slate-800/50 rounded-xl border border-slate-700">
       <Server class="w-16 h-16 text-slate-500 mx-auto mb-4" aria-hidden="true" />
       <p class="text-slate-400 mb-4">暂无连接</p>
@@ -89,9 +134,24 @@ function openSftp(conn: Connection) {
       </button>
     </div>
 
+    <div
+      v-else-if="filteredConnections.length === 0"
+      class="text-center py-16 bg-slate-800/50 rounded-xl border border-slate-700"
+    >
+      <Search class="w-16 h-16 text-slate-500 mx-auto mb-4" aria-hidden="true" />
+      <p class="text-slate-300 mb-2">未找到匹配的连接</p>
+      <p class="text-sm text-slate-500 mb-4">试试搜索名称、主机、用户名或端口</p>
+      <button
+        @click="clearSearch"
+        class="px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-slate-200 transition-colors duration-200 cursor-pointer"
+      >
+        清空搜索
+      </button>
+    </div>
+
     <div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
       <div
-        v-for="conn in store.connections"
+        v-for="conn in filteredConnections"
         :key="conn.id"
         class="bg-slate-800 rounded-xl border border-slate-700 p-4 hover:border-slate-600 transition-colors duration-200"
       >