feat: 连接列表搜索高亮匹配文字
高亮匹配的搜索关键词(名称、主机、用户名、端口)。 - 连接名称、主机名、用户名、端口中的匹配文本会高亮为青色 - 使用 v-html 渲染高亮内容 - 转义正则特殊字符避免注入风险
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user