feat: search by title (incomplete)

src/App.svelte

@@ -77,7 +77,7 @@
       text: '搜索',
       hint: '搜索相关的游戏',
       click: () => {
-        console.log('TODO: 搜索.');
+        content.p_SearchText = searchTextArea.value;
       }
     },
     {
@@ -113,6 +113,9 @@
     const has_darkreader = document.querySelector('.darkreader');
     if (has_darkreader) toast.push('检测到 dark reader, 建议关闭当前网站的 darkreader, 可点击导航栏的主题更改相应的主题', { initial: 0 });
   });
+
+  let content;
+  let searchTextArea;
 </script>
 
 <!-- ----------------------------------------------- DOM ----------------------------------------------- -->
@@ -142,6 +145,7 @@
       </div>
       <div class="flex-none hidden lg:block">
         <ul class="menu menu-horizontal">
+          <input type="text" class="input-bordered" bind:this = {searchTextArea} />
           <!-- DEBUG: 正常情况下隐藏吧 -->
           {#if process.env.APP_ENV == 'dev'}
             <li><button class="p-3" on:click={() => toast.push('Hello world!')}>TEST TOAST</button></li>
@@ -191,7 +195,9 @@
       </div>
     </div>
     <!-- NOTE: 内容单独提出来到另外的 svelte sfc -->
-    <Content />
+    <Content
+    bind:this = {content}
+    />
   </div>
   <div class="drawer-side z-[40]">
     <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay" />

src/Content.svelte

@@ -2,6 +2,18 @@
   import Card from './components/card.svelte';
   import { SvelteToast, toast } from '@zerodevx/svelte-toast';
   import { _category, _env, _tagTrans } from './stores';
+  
+  export let p_searchText = "";
+
+  let previousSearchText;
+
+  setInterval(()=>{
+    if (p_searchText != "" && previousSearchText !== p_searchText) {
+      previousSearchText = p_searchText;
+      searchTitle(p_searchText);
+    }
+    previousSearchText = previousSearchText;
+  },100);
 
   // -----------------------------
   // 各种请求封装头 & 请求函数
@@ -46,6 +58,17 @@
     };
   };
 
+  /**请求封装头 -> 搜索对应 title (函数形式)
+   * @param {string} text 需要检索的文字
+   * @return {object} 请求封装对象
+   */
+  const searchTextRequest = text => {
+    return {
+      url: `${$_env}/query.php?action=get&search=${encodeURIComponent(text)}`,
+      params: { method: 'GET' }
+    };
+  };
+
   /**创建请求 fetch 函数
    * @param {object} param0 参数对象
    * @param {function} callback 回调函数
@@ -113,6 +136,17 @@
     });
   }
 
+  /**根据 title 搜索游戏
+   * @param title 名称
+   */
+  function searchTitle(title) {
+    if (process.env.APP_ENV === 'dev') console.log(title);
+    createFetch(searchTitleRequest(title), data => {
+      if (process.env.APP_ENV === 'dev') console.log(data);
+      showList(data);
+    });
+  }
+
   /**获取封面图
    * @param folder 文件夹路径
    */