From a9cfef37c24a7c2402b51fc4a7cdacf981fa3d83 Mon Sep 17 00:00:00 2001
From: liumangmang <a362165265@qq.com>
Date: Fri, 20 Mar 2026 15:53:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BF=9E=E6=8E=A5=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E9=AB=98=E4=BA=AE=E5=8C=B9=E9=85=8D=E6=96=87?=
 =?UTF-8?q?=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

高亮匹配的搜索关键词（名称、主机、用户名、端口）。

- 连接名称、主机名、用户名、端口中的匹配文本会高亮为青色
- 使用 v-html 渲染高亮内容
- 转义正则特殊字符避免注入风险
---
 frontend/src/views/ConnectionsView.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/ConnectionsView.vue b/frontend/src/views/ConnectionsView.vue
index b79b120..0db37ae 100644
--- a/frontend/src/views/ConnectionsView.vue
+++ b/frontend/src/views/ConnectionsView.vue
@@ -101,6 +101,16 @@ function openSftp(conn: Connection) {
 function clearSearch() {
   searchQuery.value = ''
   updateSearchParam('')
+}
+
+function highlightMatch(text: string): string {
+  const q = keyword.value.trim()
+  if (!q) return text
+  
+  const escaped = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const regex = new RegExp(escaped, 'gi')
+  
+  return text.replace(regex, (match) => `<span class="text-cyan-300 font-semibold">${match}</span>`)
 }
 </script>
 
@@ -175,8 +185,8 @@ function clearSearch() {
               <Server class="w-5 h-5 text-cyan-400" aria-hidden="true" />
             </div>
             <div>
-              <h3 class="font-medium text-slate-100">{{ conn.name }}</h3>
-              <p class="text-sm text-slate-400">{{ conn.username }}@{{ conn.host }}:{{ conn.port }}</p>
+              <h3 class="font-medium text-slate-100" v-html="highlightMatch(conn.name)"></h3>
+              <p class="text-sm text-slate-400" v-html="highlightMatch(`${conn.username}@${conn.host}:${conn.port}`)"></p>
             </div>
           </div>
           <div class="flex items-center gap-1">