refactor: 重构搜索栏使用Vant组件并优化样式

components/m/home-components/SearchBar.vue

@@ -1,64 +1,45 @@
 <template>
   <div class="search-container">
-    <div class="search-input">
-      <span class="icon">🔍</span>
-      <input
-        v-model="searchValue"
-        type="text"
-        class="input"
-        placeholder="搜一搜"
-        @keyup.enter="onSearch"
-      />
-    </div>
-    <button class="search-btn" @click="onSearch">
-      <img src="~/assets/images/info.png" alt="info" />
-    </button>
+    <!-- <span class="icon">🔍</span> -->
+    <!-- <input v-model="searchValue" type="text" class="input" placeholder="搜一搜" @keyup.enter="onSearch" /> -->
+    <van-search
+      v-model="searchValue"
+      shape="round"
+      class="vant-input"
+      background="#fff"
+      placeholder="请输入搜索关键词"
+    />
   </div>
-  
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+  import { ref } from 'vue'
 
-const searchValue = ref('')
-function onSearch() {
-  console.log('Search for:', searchValue.value)
-}
+  const searchValue = ref('')
+  function onSearch() {
+    console.log('Search for:', searchValue.value)
+  }
 </script>
 
 <style scoped lang="scss">
-.search-container {
-  background-color: #fff;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.search-input {
-  display: flex;
-  align-items: center;
-  background: #efeff1;
-  border-radius: 32rpx;
-  padding: 0 22.11rpx;
-  flex: 1;
-}
-.search-input .icon { margin-right: 8px; }
-.search-input .input {
-  flex: 1;
-  height: 64rpx;
-  border: none;
-  outline: none;
-  background: transparent;
-}
-.search-btn {
-  margin-left: 19.44rpx;
-  width: 43.75rpx;
-  height: 43.75rpx;
-  background-color: #fff;
-  border: none;
-  padding: 0;
-}
-.search-btn img {
-  width: 100%;
-  height: 100%;
-}
+  .search-container {
+    background-color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+    .vant-input {
+      flex: 1;
+      padding: 0px !important;
+      /* 设置 Vant Search 内部输入高度 */
+      --van-search-input-height: 48px;
+      :deep(.van-search__content) {
+        min-height: 48px;
+      }
+      :deep(.van-field__control) {
+        height: 48px;
+        line-height: 48px;
+      }
+    }
+  }
 </style>