feat: 分类搜索 & Tag 搜索 in 侧边栏 & 导航栏.

README.md

@@ -70,15 +70,15 @@ npm run build:prod
   - [x] Tag
   - [x] Category
   - [x] Title
-  - [ ] TODO: 导航栏 Drawer -> 分类搜索 & Tag 搜索
-  - [ ] TODO: 侧边栏 Drawer -> 分类搜索 & Tag 搜索
+  - [x] 导航栏 Drawer -> 分类搜索 & Tag 搜索
+  - [x] 侧边栏 Drawer -> 分类搜索 & Tag 搜索
   - [ ] TODO: 回退上一级搜索
 - [x] 主题切换
   - [x] 基础切换
   - [x] localstorage 记忆
 - [ ] Toast 系统
   - [x] 基本 Toast
-  - [ ] TODO: 图片加载错误: 显示名字 & 序号...
+  - [x] 图片加载错误: 寻找 info.json 的图片并加载第一个, 顺表 log 显示详情
 
 ## Bugs
 

src/App.svelte

 <script>
   import { onMount } from 'svelte';
-  import { _theme, _env } from './stores';
+  import { _theme, _env, _category, _tagTrans } from './stores';
   import { SvelteToast, toast } from '@zerodevx/svelte-toast';
   import Content from './Content.svelte';
 
@@ -11,6 +11,9 @@
    */
   window.toast = toast;
 
+  /**Content.svelte DOM*/
+  let contentDom;
+
   /**主题*/
   const themes = [
     'light',
@@ -51,8 +54,7 @@
       text: '搜索',
       hint: '搜索相关的游戏',
       click: () => {
-        console.log('启动搜索按钮:\t', searchInputDom.value);
-        content.searchTitle(searchInputDom.value);
+        searchInput();
       }
     },
     {
@@ -85,14 +87,12 @@
 
   // -----------------------------
 
-  /**search input DOM元素*/
-  let searchInputDom;
+  /**search文本*/
+  let searchMsg;
   /**执行搜索
    * @param event 事件对象
    */
-  function searchInput(event) {
-    const searchMsg = event.target.value;
-
+  function searchInput() {
     if (!searchMsg) {
       toast.push('没搜索东西捏~');
       return;
@@ -101,7 +101,7 @@
     console.log('搜索:\t', searchMsg);
 
     // debounce(() => {
-    content.searchTitle(searchMsg);
+    contentDom.searchTitle(searchMsg);
     // }, 1000);
   }
 
@@ -139,14 +139,12 @@
     const has_darkreader = document.querySelector('.darkreader');
     if (has_darkreader) toast.push('检测到 dark reader, 建议关闭当前网站的 darkreader, 可点击导航栏的主题更改相应的主题', { initial: 0 });
   });
-
-  let content;
-  let searchTextArea;
 </script>
 
 <!-- ----------------------------------------------- DOM ----------------------------------------------- -->
 
 <!-- 导航栏 -->
+<!-- NOTE: 这行别删, DEBUG 侧边栏用 -->
 <!-- <div class="drawer lg:drawer-open"> -->
 <div class="drawer">
   <input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
@@ -174,7 +172,7 @@
         <div
           class="rounded-full btn-xs border-none cursor-pointer flex items-center justify-center
           bg-primary text-primary-content hover:bg-neutral hover:text-neutral-content"
-          on:click={content.searchDefault}
+          on:click={contentDom.searchDefault}
           on:keypress={() => {}}
         >
           <svg fill="currentColor" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
@@ -186,42 +184,96 @@
         </div>
       </div>
       <div class="flex-none hidden lg:block">
-        <ul class="menu menu-horizontal">
-          <div class="h-10 flex items-center">
-            <!-- NOTE: 输入搜索框 -->
-            <svg
-              class="pointer-events-none absolute z-10 my-3.5 ml-4 stroke-current opacity-80 text-primary-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>
-
+        <ul class="menu menu-horizontal items-center">
           <!-- NOTE: (导航栏) 功能区遍历 -->
           {#each injectText as Item}
-            <li>
-              <div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
-                <button on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
+            {#if Item.id == 'search'}
+              <!-- NOTE: 输入搜索框 -->
+              <div class="h-9 flex items-center relative">
+                <svg
+                  class="pointer-events-none absolute z-10 my-3.5 ml-4 stroke-current opacity-80 text-primary-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"
+                  bind:value={searchMsg}
+                  on:keydown={key => {
+                    // console.log(key);
+                    if (key.code == 'Enter') {
+                      searchInput();
+                    }
+                  }}
+                />
               </div>
-            </li>
-          {/each}
+              <li>
+                <div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
+                  <button on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
+                </div>
+              </li>
 
-          <!-- 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-bottom dropdown-left p-0">
+                  <!-- svelte-ignore a11y-label-has-associated-control -->
+                  <label tabindex="0" class="p-3">分类</label>
+                  <ul tabindex="0" class="dropdown-content z-[31] p-2 shadow bg-base-100 rounded-box w-48 max-h-[70vh] overflow-y-auto">
+                    <li>
+                      <details>
+                        <summary>语言</summary>
+                        <ul>
+                          {#each $_category as cate}
+                            <li>
+                              <button
+                                on:click={() => {
+                                  contentDom.searchCategory(cate.id);
+                                }}
+                                on:keypress={() => {}}
+                              >
+                                {cate.category_name}
+                              </button>
+                            </li>
+                          {/each}
+                        </ul>
+                      </details>
+                    </li>
+                    <li>
+                      <details>
+                        <summary>标签</summary>
+                        <ul>
+                          {#each $_tagTrans as tag}
+                            <li>
+                              <button
+                                on:click={() => {
+                                  contentDom.searchTag(tag.jp_tag_name);
+                                }}
+                                on:keypress={() => {}}
+                              >
+                                {tag.cn_tag_name ?? tag.jp_tag_name}
+                              </button>
+                            </li>
+                          {/each}
+                        </ul>
+                      </details>
+                    </li>
+                  </ul>
+                </div>
+              </li>
+            {:else}
+              <li>
+                <div class="p-3 tooltip tooltip-left" data-tip={Item.hint}>
+                  <button on:mouseenter={Item.hover} on:click={Item.click}>{Item.text}</button>
+                </div>
+              </li>
+            {/if}
+          {/each}
 
           <!-- NOTE: 主题 -->
           <li>
@@ -259,16 +311,96 @@
       </div>
     </div>
     <!-- NOTE: 内容单独提出来到另外的 svelte sfc -->
-    <Content bind:this={content} />
+    <Content bind:this={contentDom} />
   </div>
   <div class="drawer-side z-[40]">
     <label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay" />
     <ul class="menu p-4 w-60 min-h-full bg-base-200">
       <!-- NOTE: (侧边栏) 功能区遍历 -->
       {#each injectText as Item}
-        <li>
-          <button on:click={Item.click}>{Item.text}</button>
-        </li>
+        {#if Item.id == 'search'}
+          <!-- NOTE: 输入搜索框 -->
+          <div class="h-9 flex items-center relative">
+            <svg
+              class="pointer-events-none absolute z-10 my-3.5 ml-4 stroke-current opacity-80 text-primary-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-full pl-10 pr-4 focus:outline-none"
+              bind:value={searchMsg}
+              on:keydown={key => {
+                // console.log(key);
+                if (key.code == 'Enter') {
+                  searchInput();
+                }
+              }}
+            />
+          </div>
+          <button
+            class="h-9 btn btn-sm m-0 flex items-center justify-center border rounded-box"
+            on:mouseenter={Item.hover}
+            on:click={Item.click}>{Item.text}</button
+          >
+
+          <!-- NOTE: 分类搜索 -->
+          <li>
+            <details>
+              <summary>分类</summary>
+              <ul>
+                <li>
+                  <details>
+                    <summary>语言</summary>
+                    <ul>
+                      {#each $_category as cate}
+                        <li>
+                          <button
+                            on:click={() => {
+                              contentDom.searchCategory(cate.id);
+                            }}
+                            on:keypress={() => {}}
+                          >
+                            {cate.category_name}
+                          </button>
+                        </li>
+                      {/each}
+                    </ul>
+                  </details>
+                </li>
+                <li>
+                  <details>
+                    <summary>标签</summary>
+                    <ul>
+                      {#each $_tagTrans as tag}
+                        <li>
+                          <button
+                            on:click={() => {
+                              contentDom.searchTag(tag.jp_tag_name);
+                            }}
+                            on:keypress={() => {}}
+                          >
+                            {tag.cn_tag_name ?? tag.jp_tag_name}
+                          </button>
+                        </li>
+                      {/each}
+                    </ul>
+                  </details>
+                </li>
+              </ul>
+            </details>
+          </li>
+          <!-- <li><button on:click={Item.click}>{Item.text}</button></li> -->
+        {:else}
+          <li>
+            <button on:click={Item.click}>{Item.text}</button>
+          </li>
+        {/if}
       {/each}
 
       <!-- NOTE: 主题 -->

src/Content.svelte

@@ -122,7 +122,7 @@
   /**根据 TAG 搜索游戏
    * @param {string} tag TAG
    */
-  function searchTag(tag) {
+  export function searchTag(tag) {
     if (process.env.APP_ENV === 'dev') console.log(tag, encodeURIComponent(tag));
     createFetch(searchTagRequest(tag), data => {
       if (process.env.APP_ENV === 'dev') console.log(data);
@@ -133,7 +133,7 @@
   /**根据 category 搜索游戏
    * @param {string} category category
    */
-  function searchCategory(category) {
+  export function searchCategory(category) {
     if (process.env.APP_ENV === 'dev') console.log(category);
     createFetch(searchCategoryRequest(category), data => {
       if (process.env.APP_ENV === 'dev') console.log(data);