增加实时搜索

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"
@click="handleInputClick"
@mouseup="handleInputMouseUp"
/>
>
<!-- 输入框内添加话筒图标 -->
<template #append>
<el-icon
class="voice-icon"
@click.stop="showVoicePopup = true"
>
<Microphone />
</el-icon>
</template>
</el-input>
</div>
<!-- 下拉建议框 -->
@ -357,6 +367,23 @@
</el-button>
</template>
</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>
@ -373,7 +400,7 @@ import {
fieldValueMap,
} from "@/data/step2MockData";
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
const props = defineProps({
@ -408,6 +435,9 @@ const activeSuggestionIndex = ref(-1);
const possibleFields = ref([]);
const activePossibleFieldIndex = ref(-1);
//
const showVoicePopup = ref(false);
//
const parsedConditions = ref([]);
//
@ -619,6 +649,8 @@ const handleSemicolon = (e) => {
setTimeout(() => {
//
handleInput(currentInput.value);
//
triggerRealTimeSearch();
}, 0);
};
@ -948,6 +980,8 @@ const selectPossibleField = (field) => {
//
setTimeout(() => {
handleInput(currentInput.value);
//
triggerRealTimeSearch();
}, 0);
//
@ -1042,6 +1076,8 @@ const selectSuggestion = (item) => {
//
setTimeout(() => {
handleInput(currentInput.value);
//
triggerRealTimeSearch();
}, 0);
//
@ -1199,6 +1235,16 @@ const handleSearch = () => {
possibleFields.value = [];
};
//
const triggerRealTimeSearch = () => {
//
if (currentInput.value.trim()) {
parsedConditions.value = parseConditions(currentInput.value);
applyPreciseFilter();
showResults.value = true;
}
};
//
const applyPreciseFilter = () => {
//
@ -1943,6 +1989,18 @@ function handleConfirm() {
font-size: 16px;
}
//
:deep(.voice-icon) {
cursor: pointer;
color: #666;
margin-right: 8px;
transition: color 0.2s;
&:hover {
color: #2156f3;
}
}
.search-button {
white-space: nowrap;
}
@ -2180,6 +2238,14 @@ function handleConfirm() {
padding-right: 10px;
}
/* 语音弹窗内容样式 */
.voice-popup-content {
font-size: 16px;
text-align: center;
padding: 30px 0;
line-height: 1.6;
}
.new-tag-img {
width: 35px;
height: 35px;