fix: sb
This commit is contained in:
parent
556c371eef
commit
5e45e039b3
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<section class="flex justify-center items-center bg-white h-[88px]">
|
||||
<div class="relative w-[804px]">
|
||||
<div class="relative w-[804px]" :class="{ 'focused': isInputFocused }">
|
||||
<select
|
||||
v-model="selectedLang"
|
||||
class="top-1/2 left-0 z-10 absolute bg-blue-700 px-8 py-3 border-none rounded-full outline-none text-white -translate-y-1/2 appearance-none cursor-pointer"
|
||||
class="top-1/2 left-0 z-10 absolute px-8 py-3 border-none rounded-full outline-none text-white transition-colors -translate-y-1/2 duration-200 appearance-none cursor-pointer"
|
||||
:style="{ backgroundColor: isInputFocused ? '#3b82f6' : '#1d4ed8' }"
|
||||
>
|
||||
<option value="jp">日语</option>
|
||||
<option value="fr">法语</option>
|
||||
|
|
@ -12,15 +13,19 @@
|
|||
v-model="searchQuery"
|
||||
@keyup.enter="handleSearch"
|
||||
@input="handleInputChange"
|
||||
@focus="showSuggestions = true"
|
||||
@focus="handleInputFocus"
|
||||
@blur="handleInputBlur"
|
||||
type="text"
|
||||
placeholder="请输入单词"
|
||||
class="pr-[70px] pl-[207px] border-[5px] border-blue-700 focus:border-blue-500 rounded-full outline-none w-full h-[56px] text-xl"
|
||||
class="pr-[70px] pl-[160px] border-[5px] border-blue-700 focus:border-blue-500 rounded-full outline-none w-full h-[56px] text-xl transition-colors duration-200"
|
||||
/>
|
||||
<button
|
||||
@click="handleSearch"
|
||||
class="top-1/2 right-0 absolute bg-[length:60%] bg-[url('/images/search.png')] bg-blue-700 hover:bg-blue-600 bg-no-repeat bg-center rounded-full w-[56px] h-[56px] -translate-y-1/2"
|
||||
@mouseenter="handleButtonMouseEnter"
|
||||
@mouseleave="handleButtonMouseLeave"
|
||||
ref="searchButton"
|
||||
class="top-1/2 right-0 absolute bg-[length:60%] bg-[url('/images/search.png')] bg-no-repeat bg-center rounded-full w-[56px] h-[56px] transition-colors -translate-y-1/2 duration-200"
|
||||
:style="{ backgroundColor: buttonBgColor }"
|
||||
/>
|
||||
|
||||
<!-- 搜索推荐下拉框 -->
|
||||
|
|
@ -42,7 +47,7 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { searchSuggest } from '../api/dict'
|
||||
|
||||
|
|
@ -51,9 +56,19 @@ const searchQuery = ref('')
|
|||
const selectedLang = ref('jp')
|
||||
const suggestions = ref<string[]>([])
|
||||
const showSuggestions = ref(false)
|
||||
const isInputFocused = ref(false)
|
||||
const isButtonHovered = ref(false)
|
||||
const debounceTimer = ref<number | null>(null)
|
||||
const isLoading = ref(false)
|
||||
|
||||
// 计算按钮背景色
|
||||
const buttonBgColor = computed(() => {
|
||||
if (isButtonHovered.value) {
|
||||
return isInputFocused.value ? '#60a5fa' : '#2563eb' // hover时的颜色
|
||||
}
|
||||
return isInputFocused.value ? '#3b82f6' : '#1d4ed8' // 默认颜色
|
||||
})
|
||||
|
||||
// 防抖函数
|
||||
const debounce = (fn: Function, delay: number) => {
|
||||
return (...args: any[]) => {
|
||||
|
|
@ -102,14 +117,31 @@ const handleInputChange = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 处理输入框获得焦点
|
||||
const handleInputFocus = () => {
|
||||
isInputFocused.value = true
|
||||
showSuggestions.value = true
|
||||
}
|
||||
|
||||
// 处理输入框失去焦点
|
||||
const handleInputBlur = () => {
|
||||
isInputFocused.value = false
|
||||
// 延迟隐藏建议列表，让点击事件有时间执行
|
||||
setTimeout(() => {
|
||||
showSuggestions.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
// 处理按钮鼠标进入
|
||||
const handleButtonMouseEnter = () => {
|
||||
isButtonHovered.value = true
|
||||
}
|
||||
|
||||
// 处理按钮鼠标离开
|
||||
const handleButtonMouseLeave = () => {
|
||||
isButtonHovered.value = false
|
||||
}
|
||||
|
||||
// 选择建议
|
||||
const selectSuggestion = (suggestion: string) => {
|
||||
searchQuery.value = suggestion
|
||||
|
|
|
|||
|
|
@ -2,63 +2,8 @@
|
|||
<div>
|
||||
<AppHeader active="dict" />
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<section class="bg-white py-12">
|
||||
<div class="mx-auto px-4 max-w-[1030px]">
|
||||
<div class="mb-8 text-center">
|
||||
<h1 class="mb-4 font-deserta text-blue-700 text-4xl">多语言词典查询</h1>
|
||||
<p class="font-inter text-gray-600">输入单词，获取详细释义和例句</p>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-[600px]">
|
||||
<div class="relative flex gap-4">
|
||||
<div class="relative flex-1">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
@keyup.enter="handleSearch"
|
||||
@input="handleInputChange"
|
||||
@focus="showSuggestions = true"
|
||||
@blur="handleInputBlur"
|
||||
type="text"
|
||||
placeholder="请输入单词..."
|
||||
class="px-6 border-2 border-blue-700 focus:border-blue-500 rounded-full outline-none w-full h-[60px] text-xl"
|
||||
/>
|
||||
|
||||
<!-- 搜索推荐下拉框 -->
|
||||
<div
|
||||
v-if="showSuggestions && suggestions.length > 0"
|
||||
class="top-full left-0 z-20 absolute bg-white shadow-lg mt-1 border border-gray-200 rounded-lg w-full max-h-60 overflow-y-auto"
|
||||
>
|
||||
<div
|
||||
v-for="(suggestion, index) in suggestions"
|
||||
:key="index"
|
||||
@mousedown="selectSuggestion(suggestion)"
|
||||
class="hover:bg-gray-100 px-4 py-2 text-left cursor-pointer"
|
||||
>
|
||||
{{ suggestion }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="handleSearch"
|
||||
:disabled="loading || !searchQuery.trim()"
|
||||
class="bg-blue-700 hover:bg-blue-600 disabled:opacity-50 rounded-full w-[120px] h-[60px] font-inter text-white disabled:cursor-not-allowed"
|
||||
>
|
||||
{{ loading ? '搜索中...' : '搜索' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-4">
|
||||
<select v-model="selectedLang" class="px-4 py-2 border border-gray-300 rounded">
|
||||
<option value="jp">日语</option>
|
||||
<option value="fr">法语</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<SearchBar />
|
||||
|
||||
<!-- 搜索结果 -->
|
||||
<section class="bg-gray-50 py-12 min-h-[400px]">
|
||||
<div class="mx-auto px-4 max-w-[1030px]">
|
||||
|
|
@ -122,103 +67,22 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import AppHeader from '../components/AppHeader.vue'
|
||||
import AppFooter from '../components/AppFooter.vue'
|
||||
import { searchWord, searchSuggest, type WordDefinition } from '../api/dict'
|
||||
import SearchBar from '../components/SearchBar.vue'
|
||||
import { searchWord, type WordDefinition } from '../api/dict'
|
||||
|
||||
const route = useRoute()
|
||||
const searchQuery = ref('')
|
||||
const selectedLang = ref('jp')
|
||||
const searchResult = ref<WordDefinition | null>(null)
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const hasSearched = ref(false)
|
||||
const suggestions = ref<string[]>([])
|
||||
const showSuggestions = ref(false)
|
||||
const debounceTimer = ref<number | null>(null)
|
||||
|
||||
// 防抖函数
|
||||
const debounce = (fn: Function, delay: number) => {
|
||||
return (...args: any[]) => {
|
||||
if (debounceTimer.value) {
|
||||
clearTimeout(debounceTimer.value)
|
||||
}
|
||||
debounceTimer.value = window.setTimeout(() => {
|
||||
fn(...args)
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
|
||||
// 获取搜索建议
|
||||
const fetchSuggestions = async (query: string) => {
|
||||
if (!query || query.length < 1) {
|
||||
suggestions.value = []
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await searchSuggest({
|
||||
query: query.trim(),
|
||||
language: selectedLang.value
|
||||
})
|
||||
suggestions.value = response.list || []
|
||||
} catch (error) {
|
||||
console.error('获取搜索建议失败:', error)
|
||||
suggestions.value = []
|
||||
}
|
||||
}
|
||||
|
||||
// 防抖的搜索建议函数
|
||||
const debouncedFetchSuggestions = debounce(fetchSuggestions, 300)
|
||||
|
||||
// 处理输入变化
|
||||
const handleInputChange = () => {
|
||||
if (searchQuery.value.trim()) {
|
||||
debouncedFetchSuggestions(searchQuery.value)
|
||||
showSuggestions.value = true
|
||||
} else {
|
||||
suggestions.value = []
|
||||
showSuggestions.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 处理输入框失去焦点
|
||||
const handleInputBlur = () => {
|
||||
// 延迟隐藏建议列表，让点击事件有时间执行
|
||||
setTimeout(() => {
|
||||
showSuggestions.value = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
// 选择建议
|
||||
const selectSuggestion = (suggestion: string) => {
|
||||
searchQuery.value = suggestion
|
||||
showSuggestions.value = false
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
// 从路由参数初始化搜索
|
||||
onMounted(() => {
|
||||
const q = route.query.q as string
|
||||
const lang = route.query.lang as string
|
||||
|
||||
if (q) {
|
||||
searchQuery.value = q
|
||||
}
|
||||
if (lang) {
|
||||
selectedLang.value = lang
|
||||
}
|
||||
|
||||
// 如果有查询参数，自动执行搜索
|
||||
if (q) {
|
||||
handleSearch()
|
||||
}
|
||||
})
|
||||
|
||||
const handleSearch = async () => {
|
||||
if (!searchQuery.value.trim()) return
|
||||
// 从路由参数执行搜索
|
||||
const handleSearch = async (query: string, lang: string) => {
|
||||
if (!query.trim()) return
|
||||
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
|
|
@ -226,8 +90,8 @@ const handleSearch = async () => {
|
|||
|
||||
try {
|
||||
const result = await searchWord({
|
||||
lang_pref: selectedLang.value,
|
||||
query_word: searchQuery.value.trim()
|
||||
lang_pref: lang,
|
||||
query_word: query.trim()
|
||||
})
|
||||
searchResult.value = result
|
||||
} catch (err: any) {
|
||||
|
|
@ -239,10 +103,13 @@ const handleSearch = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 监听语言变化，重新获取建议
|
||||
watch(selectedLang, () => {
|
||||
if (searchQuery.value.trim()) {
|
||||
debouncedFetchSuggestions(searchQuery.value)
|
||||
// 监听路由变化以响应搜索
|
||||
watch(() => route.query, (newQuery) => {
|
||||
const q = newQuery.q as string
|
||||
const lang = newQuery.lang as string || 'jp'
|
||||
|
||||
if (q) {
|
||||
handleSearch(q, lang)
|
||||
}
|
||||
})
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
Loading…
Reference in New Issue