feat: search TAG 01.

src/Content.svelte

@@ -4,10 +4,10 @@
   import { _env } from './stores';
 
   // -----------------------------
-  let List = [];
+  // 各种请求封装头
 
-  /**获取所有资料*/
-  const getContents = {
+  /**请求封装头 -> 获取所有资料*/
+  const getContentsRequest = {
     url: `${$_env}/query.php?action=get`,
     params: {
       method: 'GET',
@@ -18,6 +18,28 @@
     }
   };
 
+  /**请求封装头 -> 搜索对应 Tag
+   * @param tag TAG
+   */
+  const searchTagRequest = tag => {
+    return {
+      url: `${$_env}/query.php?action=get&tag=${encodeURIComponent(tag)}`,
+      params: {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json;charset=UTF-8',
+          'Access-Control-Allow-Origin': true
+        }
+      }
+    };
+  };
+
+  // -----------------------------
+  // 变量 & 函数工具
+
+  /**渲染数据列表*/
+  let List = [];
+
   /**创建 fetch 函数
    * @param {object} param0 参数对象
    * @param {function} callback 回调函数
@@ -46,14 +68,33 @@
       });
   }
 
-  createFetch(getContents, data => {
+  /**渲染 & 更新视图
+   * @param data JSON数据
+   */
+  function showList(data) {
+    // List = [...List, ...data];
+    List = [...data];
+  }
+
+  /**根据 TAG 搜索游戏
+   * @param tag TAG
+   */
+  function searchTag(tag) {
+    console.log(tag, encodeURIComponent(tag));
+    createFetch(searchTagRequest(tag), data => {
+      console.log(data);
+      showList(data);
+    });
+  }
+
+  // -----------------------------
+  // NOTE: 初始化执行 -> 考虑用 onMount
+
+  // 初始化请求 -> 拉取全部
+  createFetch(getContentsRequest, data => {
     console.log(data);
     showList(data);
   });
-
-  function showList(data) {
-    List = [...List, ...data];
-  }
 </script>
 
 <!-- ----------------------------------------------- DOM ----------------------------------------------- -->
@@ -63,13 +104,16 @@
     <Card
       title={item.cn_name}
       sub_title={item.jp_name}
-      cover={$_env + item.folder + '/rpg_info/1.jpg' ?? ''}
+      cover={$_env + '/' + item.folder.substring(2) + '/rpg_info/1.jpg' ?? ''}
       language={item.category}
       raw_tags={item.tags}
+      p_searchTag={searchTag}
     />
   {/each}
-  <Card raw_tags="|示例1|示例2|" />
-  <Card raw_tags="|示例1|示例2|" />
-  <Card raw_tags="|示例1|示例2|" />
-  <Card raw_tags="|示例1|示例2|" />
+
+  <!-- 示例卡片, 留着 -->
+  <!-- <Card raw_tags="|示例1|示例2|" /> -->
+  <!-- <Card raw_tags="|示例1|示例2|" /> -->
+  <!-- <Card raw_tags="|示例1|示例2|" /> -->
+  <!-- <Card raw_tags="|示例1|示例2|" /> -->
 </div>

src/components/card.svelte

 <script>
+  /**父属性: 主标题*/
   export let title;
+  /**父属性: 副标题*/
   export let sub_title;
+  /**父属性: 封面图片链接*/
   export let cover;
+  /**父属性: 语言分类*/
   export let language;
+  /**父属性: TAG文本*/
   export let raw_tags = '';
+
+  /**父方法: 搜索*/
+  export let p_searchTag;
+
   // ------------------------
-  // 处理原始 tags 文本
-  let tags = raw_tags.slice(1, raw_tags.length - 1).split('|');
+
+  /**处理后的TAG列表*/
+  let tags;
+  // NOTE: 这里记得要随着父属性响应式变化
+  $: {
+    tags = raw_tags.slice(1, raw_tags.length - 1).split('|');
+  }
 
   //
   let error = false;
@@ -45,7 +59,13 @@
         <!-- <div class="badge badge-outline">tag2</div> -->
       {:else}
         {#each tags as tag}
-          <div class="badge badge-outline">{tag}</div>
+          <div
+            class="badge badge-outline cursor-pointer hover:bg-neutral hover:text-neutral-content"
+            on:click={p_searchTag(tag)}
+            on:keypress={() => {}}
+          >
+            {tag}
+          </div>
         {/each}
       {/if}
     </div>