feat: search mostly done.

src/App.svelte

@@ -46,6 +46,15 @@
 
   /**导航栏注入对象*/
   const injectText = [
+    {
+      id: 'search',
+      text: '搜索',
+      hint: '搜索相关的游戏',
+      click: () => {
+        console.log('启动搜索按钮:\t', searchInputDom.value);
+        content.searchTitle(searchInputDom.value);
+      }
+    },
     {
       id: 'readme',
       text: '使用说明',
@@ -64,22 +73,6 @@
         window.open(`${$_env}/save_export/`);
       }
     },
-    // {
-    //   id: 'switch',
-    //   text: '中日切换',
-    //   hint: '切换游戏名称中日文',
-    //   click: () => {
-    //     console.log('TODO: 中日切换.');
-    //   }
-    // },
-    {
-      id: 'search',
-      text: '搜索',
-      hint: '搜索相关的游戏',
-      click: () => {
-        content.p_SearchText = searchTextArea.value;
-      }
-    },
     {
       id: 'cheat',
       text: '作弊',
@@ -90,6 +83,29 @@
     }
   ];
 
+  /**search input DOM元素*/
+  let searchInputDom;
+
+  /**执行搜索
+   * @param event 事件对象
+   */
+  function searchInput(event) {
+    const searchMsg = event.target.value;
+
+    if (!searchMsg) {
+      toast.push('没搜索东西捏~');
+      return;
+    }
+
+    console.log('搜索:\t', searchMsg);
+
+    // debounce(() => {
+    content.searchTitle(searchMsg);
+    // }, 1000);
+  }
+
+  // -----------------------------
+
   // FIXME: 环境变量 -> 处理生产模式和开发模式的文件网络路径问题
   console.log('环境变量:\t', process.env.APP_ENV);
   switch (process.env.APP_ENV) {
@@ -104,6 +120,8 @@
       break;
   }
 
+  // -----------------------------
+
   onMount(() => {
     // 1. 读取 localstorage
     // -- 1.1. 读取 theme
@@ -134,23 +152,54 @@
           </svg>
         </label>
       </div>
-      <div
-        class="flex-1 px-2 mx-2"
-        on:click={() => {
-          location.reload();
-        }}
-        on:keypress={() => {}}
-      >
-        <span class="px-2 rounded-box cursor-pointer hover:bg-neutral hover:text-neutral-content">在线RPG分部·里</span>
+      <div class="flex-1 px-2 mx-2">
+        <!-- NOTE: LOGO -->
+        <span
+          on:click={() => {
+            location.reload();
+          }}
+          on:keypress={() => {}}
+          class="px-2 mr-1 rounded-box cursor-pointer hover:bg-neutral hover:text-neutral-content">在线RPG分部·里</span
+        >
+
+        <!-- NOTE: 刷新默认数据 -->
+        <div
+          class="rounded-full btn border-none
+          bg-primary text-primary-content hover:bg-neutral hover:text-neutral-content"
+          on:click={content.searchDefault}
+          on:keypress={() => {}}
+        >
+          <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M6.19306266,7 L10,7 L10,9 L3,9 L3,2 L5,2 L5,5.27034886 C6.72510698,3.18251178 9.19576641,2 12,2 C17.5228475,2 22,6.4771525 22,12 C20,12 22,12 20,12 C20,7.581722 16.418278,4 12,4 C9.60637619,4 7.55353989,5.07869636 6.19306266,7 Z M17.8069373,17 L14,17 L14,15 L21,15 L21,22 L19,22 L19,18.7296511 C17.274893,20.8174882 14.8042336,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,12 4,12 4,12 C4,16.418278 7.581722,20 12,20 C14.3936238,20 16.4464601,18.9213036 17.8069373,17 Z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
       </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>
-          {/if}
-          <!-- Navbar menu content here -->
+          <div class="h-10 flex items-center">
+            <!-- NOTE: 输入搜索框 -->
+            <svg
+              class="pointer-events-none absolute z-10 my-3.5 ml-4 stroke-current opacity-60 text-base-content"
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+            </svg>
+            <input
+              type="text"
+              class="input-bordered rounded-box bg-primary text-primary-content h-full w-60 pl-10 pr-4 focus:outline-none"
+              on:change={searchInput}
+              bind:this={searchInputDom}
+            />
+          </div>
+
+          <!-- NOTE: 功能区遍历 -->
           {#each injectText as Item}
             <li>
               <div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
@@ -158,6 +207,15 @@
               </div>
             </li>
           {/each}
+
+          <!-- DEBUG: 正常情况下隐藏吧 -->
+          {#if process.env.APP_ENV == 'dev'}
+            <li>
+              <button class="p-3" on:click={() => toast.push('Hello world!')}>TEST TOAST</button>
+            </li>
+          {/if}
+
+          <!-- NOTE: 主题 -->
           <li>
             <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
             <div class="dropdown dropdown-left p-0">
@@ -195,9 +253,7 @@
       </div>
     </div>
     <!-- NOTE: 内容单独提出来到另外的 svelte sfc -->
-    <Content
-    bind:this = {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,18 +2,6 @@
   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);
 
   // -----------------------------
   // 各种请求封装头 & 请求函数
@@ -115,7 +103,7 @@
   }
 
   /**根据 TAG 搜索游戏
-   * @param tag TAG
+   * @param {string} tag TAG
    */
   function searchTag(tag) {
     if (process.env.APP_ENV === 'dev') console.log(tag, encodeURIComponent(tag));
@@ -126,7 +114,7 @@
   }
 
   /**根据 category 搜索游戏
-   * @param category category
+   * @param {string} category category
    */
   function searchCategory(category) {
     if (process.env.APP_ENV === 'dev') console.log(category);
@@ -136,12 +124,35 @@
     });
   }
 
+  /**@var {string} 上次搜索内容*/
+  let lastSearch;
   /**根据 title 搜索游戏
-   * @param title 名称
+   * @param {string} title 名称
+   */
+  export function searchTitle(title) {
+    if (title === lastSearch) {
+      toast.push('重复搜索捏~');
+      return;
+    }
+    lastSearch = title;
+    if (process.env.APP_ENV === 'dev') console.log('执行搜索:\t', title);
+    createFetch(searchTextRequest(title), data => {
+      if (!data.length) {
+        toast.push('没有搜索到东西捏~');
+        return;
+      }
+      if (process.env.APP_ENV === 'dev') console.log(data);
+      showList(data);
+    });
+  }
+  window.searchTitle = searchTitle;
+
+  /**
+   * 默认搜索 -> 暂时是全部搜索
+   * TODO: 全局内容 30分钟 一次缓存在 localstorage 里
    */
-  function searchTitle(title) {
-    if (process.env.APP_ENV === 'dev') console.log(title);
-    createFetch(searchTitleRequest(title), data => {
+  export function searchDefault() {
+    createFetch(getContentsRequest, data => {
       if (process.env.APP_ENV === 'dev') console.log(data);
       showList(data);
     });
@@ -183,10 +194,7 @@
   }
 
   // 初始化请求 -> 拉取全部条目
-  createFetch(getContentsRequest, data => {
-    if (process.env.APP_ENV === 'dev') console.log(data);
-    showList(data);
-  });
+  searchDefault();
 </script>
 
 <!-- ----------------------------------------------- DOM ----------------------------------------------- -->