perf: add 'use-glob' prop to search input

This commit is contained in:
Lykin 2023-12-06 11:10:54 +08:00
parent 84b42e6461
commit 2f25b524cd
4 changed files with 22 additions and 12 deletions

View File

@ -18,6 +18,10 @@ const props = defineProps({
type: Boolean,
default: false,
},
useGlob: {
type: Boolean,
default: false,
},
})
const emit = defineEmits(['filterChanged', 'matchChanged'])
@ -82,7 +86,6 @@ defineExpose({
<template>
<n-input-group>
<slot name="prepend" />
<n-input
v-model:value="inputData.filter"
:placeholder="$t('interface.filter')"
@ -99,18 +102,24 @@ defineExpose({
{{ inputData.match }}
</n-tag>
</template>
{{ $t('interface.full_search_result', { pattern: inputData.match }) }}
{{
$t('interface.full_search_result', {
pattern: props.useGlob ? inputData.match : '*' + inputData.match + '*',
})
}}
</n-tooltip>
</template>
<template #suffix>
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="Help" />
</template>
<div class="text-block" style="max-width: 600px">
{{ $t('dialogue.filter.filter_pattern_tip') }}
</div>
</n-tooltip>
<template v-if="props.useGlob">
<n-tooltip trigger="hover">
<template #trigger>
<n-icon :component="Help" />
</template>
<div class="text-block" style="max-width: 600px">
{{ $t('dialogue.filter.filter_pattern_tip') }}
</div>
</n-tooltip>
</template>
</template>
</n-input>

View File

@ -217,6 +217,7 @@ onMounted(() => onReload())
:debounce-wait="1000"
:full-search-icon="Search"
small
use-glob
@filter-changed="onFilterInput"
@match-changed="onMatchInput">
<template #prepend>

View File

@ -91,7 +91,7 @@
"unpin_edit": "Cancel Pin",
"search": "Search",
"full_search": "Full Search",
"full_search_result": "The content has been matched as '*{pattern}*'",
"full_search_result": "The content has been matched as '{pattern}'",
"filter_field": "Filter Field",
"filter_value": "Filter Value",
"length": "Length",

View File

@ -91,7 +91,7 @@
"unpin_edit": "取消固定",
"search": "搜索",
"full_search": "全文匹配",
"full_search_result": "内容已匹配为 *{pattern}*",
"full_search_result": "内容已匹配为 {pattern}",
"filter_field": "筛选字段",
"filter_value": "筛选值",
"length": "长度",