From c1efd72d6dc00e3198996e64a943b9d6e37db9d1 Mon Sep 17 00:00:00 2001
From: liumangmang <a362165265@qq.com>
Date: Wed, 18 Mar 2026 23:59:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E8=BF=9E=E6=8E=A5=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=B7=BB=E5=8A=A0=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在连接列表页加入前端即时搜索，支持按名称、主机、用户名和端口过滤连接。补充分离的无结果状态与清空操作，提升连接较多时的查找效率。
---
 frontend/src/views/ConnectionsView.vue | 138 ++++++++++++++++++-------
 1 file changed, 99 insertions(+), 39 deletions(-)

diff --git a/frontend/src/views/ConnectionsView.vue b/frontend/src/views/ConnectionsView.vue
index b272727..7ebdb3d 100644
--- a/frontend/src/views/ConnectionsView.vue
+++ b/frontend/src/views/ConnectionsView.vue
@@ -1,27 +1,49 @@
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useConnectionsStore } from '../stores/connections'
-import { useTerminalTabsStore } from '../stores/terminalTabs'
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useConnectionsStore } from '../stores/connections'
+import { useTerminalTabsStore } from '../stores/terminalTabs'
 import type { Connection, ConnectionCreateRequest } from '../api/connections'
-import ConnectionForm from '../components/ConnectionForm.vue'
+import ConnectionForm from '../components/ConnectionForm.vue'
 import {
   Server,
   Plus,
   Terminal,
   FolderOpen,
-  Pencil,
-  Trash2,
-  Key,
-  Lock,
-} from 'lucide-vue-next'
+  Pencil,
+  Trash2,
+  Key,
+  Lock,
+  Search,
+  X,
+} from 'lucide-vue-next'
 
 const router = useRouter()
 const store = useConnectionsStore()
-const tabsStore = useTerminalTabsStore()
-
-const showForm = ref(false)
-const editingConn = ref<Connection | null>(null)
+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())
 
@@ -59,42 +81,80 @@ function openTerminal(conn: Connection) {
   router.push('/terminal')
 }
 
-function openSftp(conn: Connection) {
-  router.push(`/sftp/${conn.id}`)
-}
+function openSftp(conn: Connection) {
+  router.push(`/sftp/${conn.id}`)
+}
+
+function clearSearch() {
+  searchQuery.value = ''
+}
 </script>
 
 <template>
   <div class="p-6">
-    <div class="flex items-center justify-between mb-6">
-      <h2 class="text-xl font-semibold text-slate-100">连接列表</h2>
-      <button
-        @click="openCreate"
+    <div class="flex items-center justify-between mb-6">
+      <h2 class="text-xl font-semibold text-slate-100">连接列表</h2>
+      <button
+        @click="openCreate"
         class="flex items-center gap-2 px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white font-medium transition-colors duration-200 cursor-pointer"
         aria-label="添加连接"
       >
         <Plus class="w-5 h-5" 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" />
+        添加连接
+      </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>
       <button
         @click="openCreate"
         class="px-4 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white 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"
-        :key="conn.id"
-        class="bg-slate-800 rounded-xl border border-slate-700 p-4 hover:border-slate-600 transition-colors duration-200"
-      >
+      >
+        添加第一个连接
+      </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 filteredConnections"
+        :key="conn.id"
+        class="bg-slate-800 rounded-xl border border-slate-700 p-4 hover:border-slate-600 transition-colors duration-200"
+      >
         <div class="flex items-start justify-between mb-3">
           <div class="flex items-center gap-2">
             <div class="w-10 h-10 rounded-lg bg-slate-700 flex items-center justify-center">