feat: 连接列表搜索高亮匹配文字
高亮匹配的搜索关键词(名称、主机、用户名、端口)。 - 连接名称、主机名、用户名、端口中的匹配文本会高亮为青色 - 使用 v-html 渲染高亮内容 - 转义正则特殊字符避免注入风险
This commit is contained in:
@@ -101,6 +101,16 @@ function openSftp(conn: Connection) {
|
|||||||
function clearSearch() {
|
function clearSearch() {
|
||||||
searchQuery.value = ''
|
searchQuery.value = ''
|
||||||
updateSearchParam('')
|
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>
|
</script>
|
||||||
|
|
||||||
@@ -175,8 +185,8 @@ function clearSearch() {
|
|||||||
<Server class="w-5 h-5 text-cyan-400" aria-hidden="true" />
|
<Server class="w-5 h-5 text-cyan-400" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="font-medium text-slate-100">{{ conn.name }}</h3>
|
<h3 class="font-medium text-slate-100" v-html="highlightMatch(conn.name)"></h3>
|
||||||
<p class="text-sm text-slate-400">{{ conn.username }}@{{ conn.host }}:{{ conn.port }}</p>
|
<p class="text-sm text-slate-400" v-html="highlightMatch(`${conn.username}@${conn.host}:${conn.port}`)"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-1">
|
<div class="flex items-center gap-1">
|
||||||
|
|||||||
Reference in New Issue
Block a user