You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
2.1 KiB
66 lines
2.1 KiB
<template>
|
|
<div class="prompt-highlight">
|
|
<div class="ph-toolbar">
|
|
<t-input v-model="keyword" placeholder="在提示词中搜索高亮" clearable size="small" style="width: 240px;">
|
|
<template #prefix-icon><SearchIcon /></template>
|
|
</t-input>
|
|
<span v-if="keyword" class="ph-count">{{ matchCount }} 处匹配</span>
|
|
</div>
|
|
<div class="ph-body" v-html="highlighted"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { SearchIcon } from 'tdesign-icons-vue-next'
|
|
|
|
const props = defineProps<{ text: string }>()
|
|
|
|
const keyword = ref('')
|
|
|
|
/** 匹配数量（基于原始文本，忽略大小写） */
|
|
const matchCount = computed(() => {
|
|
if (!keyword.value.trim() || !props.text) return 0
|
|
const regex = new RegExp(escapeRegex(keyword.value.trim()), 'gi')
|
|
return (props.text.match(regex) || []).length
|
|
})
|
|
|
|
/** 高亮后的 HTML（原始文本转义 + 关键词包裹 mark，防止 XSS） */
|
|
const highlighted = computed(() => {
|
|
const escaped = escapeHtml(props.text || '')
|
|
if (!keyword.value.trim()) return escaped
|
|
const kw = escapeHtml(keyword.value.trim())
|
|
const regex = new RegExp(`(${escapeRegex(kw)})`, 'gi')
|
|
return escaped.replace(regex, '<mark class="ph-mark">$1</mark>')
|
|
})
|
|
|
|
function escapeHtml(s: string): string {
|
|
return s
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
}
|
|
|
|
function escapeRegex(s: string): string {
|
|
return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.prompt-highlight { display: flex; flex-direction: column; gap: 8px; }
|
|
.ph-toolbar { display: flex; align-items: center; gap: 10px; }
|
|
.ph-count { font-size: 12px; color: var(--td-text-color-secondary); }
|
|
.ph-body {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
background: var(--td-bg-color-secondarycontainer, #f7f7f7);
|
|
padding: 12px;
|
|
border-radius: 6px;
|
|
max-height: 480px;
|
|
overflow: auto;
|
|
}
|
|
:deep(.ph-mark) { background: var(--td-warning-color-1, #fff3e0); color: var(--td-text-color-primary); padding: 0 1px; }
|
|
</style>
|