feat(search): 优化搜索功能并调整搜索事件处理

- 将 Search 组件的 @change 事件改为 @search 事件
- 实现搜索框无值时清空 keyword 并重新加载列表的功能
- 优化 fetchTemplate 方法，使用 keyword 替代 searchValue.value

src/views/Home/components/Market/Index.vue

@@ -2,7 +2,7 @@
   <section class="market-container">
     <!-- 模板 -->
     <div class="market">
-      <search v-model:value="searchValue" @change="fetchTemplate"></search>
+      <search v-model:value="searchValue" @search="fetchTemplate"></search>
       <van-tabs
         v-model:active="active"
         style="margin-top: 15px"
@@ -44,7 +44,7 @@
   </section>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import MarketItem from '@/components/MarketItem/MarketItem.vue';
 import { getListScene, getSurveyTemplates } from '@/api/home';
 import Search from '@/components/Search/Index.vue';
@@ -59,6 +59,16 @@ const marketInfo = ref([]);
 const marketItem = ref();
 // 当前的搜索指
 const searchValue = ref('');
+let keyword = '';
+
+/**
+ * 如果这个搜索框没有值，默认清空 keyword, 然后重新加载列表
+ */
+watch(searchValue, (value) => {
+  !value && (keyword = '');
+  getMarketInfo(active.value);
+});
+
 const getTableList = async () => {
   const res = await getListScene();
   if (res.data.code === 0) {
@@ -75,6 +85,8 @@ const getMarketInfo = async (item: string | number, title?: string) => {
   if (data) {
     const params = {
       page: 1,
+      // 此字段无法脱离组件使用
+      keyword,
       per_page: 10,
       group_id: 0,
       is_public: 1,
@@ -97,8 +109,8 @@ const getMarketInfo = async (item: string | number, title?: string) => {
  * @param keyword 搜索关键词
  */
 function fetchTemplate() {
-  // const { templates } = fetchSearchResult(searchValue.value);
-  // searchResult.value = templates;
+  keyword = searchValue.value;
+  getMarketInfo(marketIndex.value);
 }
 </script>