增加实时搜索

This commit is contained in:
JenniferW 2025-09-03 17:03:50 +08:00
parent 64b9ce0559
commit 46613a9f3c
1 changed files with 68 additions and 2 deletions

View File

@ -26,7 +26,17 @@
@keydown="handleKeydown" @keydown="handleKeydown"
@click="handleInputClick" @click="handleInputClick"
@mouseup="handleInputMouseUp" @mouseup="handleInputMouseUp"
/> >
<!-- 输入框内添加话筒图标 -->
<template #append>
<el-icon
class="voice-icon"
@click.stop="showVoicePopup = true"
>
<Microphone />
</el-icon>
</template>
</el-input>
</div> </div>
<!-- 下拉建议框 --> <!-- 下拉建议框 -->
@ -357,6 +367,23 @@
</el-button> </el-button>
</template> </template>
</el-dialog> </el-dialog>
<!-- 语音输入弹窗 -->
<el-dialog
v-model="showVoicePopup"
title="语音输入"
width="400px"
:show-close="true"
>
<div class="voice-popup-content">
正式环境中提供语音输入检索功能demo中仅做示意
</div>
<template #footer>
<el-button type="primary" @click="showVoicePopup = false">
我知道了
</el-button>
</template>
</el-dialog>
</div> </div>
</div> </div>
</div> </div>
@ -373,7 +400,7 @@ import {
fieldValueMap, fieldValueMap,
} from "@/data/step2MockData"; } from "@/data/step2MockData";
import { ElMessage, ElEmpty, ElDialog } from "element-plus"; import { ElMessage, ElEmpty, ElDialog } from "element-plus";
import { Search, Edit, RefreshLeft } from "@element-plus/icons-vue"; import { Search, Edit, RefreshLeft, Microphone } from "@element-plus/icons-vue";
// propsemit // propsemit
const props = defineProps({ const props = defineProps({
@ -408,6 +435,9 @@ const activeSuggestionIndex = ref(-1);
const possibleFields = ref([]); const possibleFields = ref([]);
const activePossibleFieldIndex = ref(-1); const activePossibleFieldIndex = ref(-1);
//
const showVoicePopup = ref(false);
// //
const parsedConditions = ref([]); const parsedConditions = ref([]);
// //
@ -619,6 +649,8 @@ const handleSemicolon = (e) => {
setTimeout(() => { setTimeout(() => {
// //
handleInput(currentInput.value); handleInput(currentInput.value);
//
triggerRealTimeSearch();
}, 0); }, 0);
}; };
@ -948,6 +980,8 @@ const selectPossibleField = (field) => {
// //
setTimeout(() => { setTimeout(() => {
handleInput(currentInput.value); handleInput(currentInput.value);
//
triggerRealTimeSearch();
}, 0); }, 0);
// //
@ -1042,6 +1076,8 @@ const selectSuggestion = (item) => {
// //
setTimeout(() => { setTimeout(() => {
handleInput(currentInput.value); handleInput(currentInput.value);
//
triggerRealTimeSearch();
}, 0); }, 0);
// //
@ -1199,6 +1235,16 @@ const handleSearch = () => {
possibleFields.value = []; possibleFields.value = [];
}; };
//
const triggerRealTimeSearch = () => {
//
if (currentInput.value.trim()) {
parsedConditions.value = parseConditions(currentInput.value);
applyPreciseFilter();
showResults.value = true;
}
};
// //
const applyPreciseFilter = () => { const applyPreciseFilter = () => {
// //
@ -1943,6 +1989,18 @@ function handleConfirm() {
font-size: 16px; font-size: 16px;
} }
//
:deep(.voice-icon) {
cursor: pointer;
color: #666;
margin-right: 8px;
transition: color 0.2s;
&:hover {
color: #2156f3;
}
}
.search-button { .search-button {
white-space: nowrap; white-space: nowrap;
} }
@ -2180,6 +2238,14 @@ function handleConfirm() {
padding-right: 10px; padding-right: 10px;
} }
/* 语音弹窗内容样式 */
.voice-popup-content {
font-size: 16px;
text-align: center;
padding: 30px 0;
line-height: 1.6;
}
.new-tag-img { .new-tag-img {
width: 35px; width: 35px;
height: 35px; height: 35px;