feat: 连接列表搜索高亮匹配文字

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

- 连接名称、主机名、用户名、端口中的匹配文本会高亮为青色
- 使用 v-html 渲染高亮内容
- 转义正则特殊字符避免注入风险
This commit is contained in:
liumangmang
2026-03-20 15:53:22 +08:00
parent 1020d78b91
commit a9cfef37c2

View File

@@ -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">