From 5e45e039b35478381a10d380322fd8557db79169 Mon Sep 17 00:00:00 2001
From: KirisameVanilla <118162831+KirisameVanilla@users.noreply.github.com>
Date: Tue, 9 Sep 2025 15:18:36 +0800
Subject: [PATCH] fix: sb

---
 src/components/SearchBar.vue |  44 +++++++--
 src/views/DictPage.vue       | 169 ++++-------------------------------
 2 files changed, 56 insertions(+), 157 deletions(-)

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 2c43cc9..41a42ca 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -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
diff --git a/src/views/DictPage.vue b/src/views/DictPage.vue
index a95ebd6..613fd76 100644
--- a/src/views/DictPage.vue
+++ b/src/views/DictPage.vue
@@ -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>
\ No newline at end of file