feat: 访问 info.json 01.

src/Content.svelte

@@ -4,7 +4,7 @@
   import { _env } from './stores';
 
   // -----------------------------
-  // 各种请求封装头
+  // 各种请求封装头 & 请求函数
 
   /**请求封装头 -> 获取所有资料*/
   const getContentsRequest = {
@@ -34,13 +34,7 @@
     };
   };
 
-  // -----------------------------
-  // 变量 & 函数工具
-
-  /**渲染数据列表*/
-  let List = [];
-
-  /**创建 fetch 函数
+  /**创建请求 fetch 函数
    * @param {object} param0 参数对象
    * @param {function} callback 回调函数
    */
@@ -63,11 +57,16 @@
       .catch(error => {
         // 处理错误
         console.error('网络请求错误:', error);
-        我处理一下就行;
         toast.push('网络请求错误');
       });
   }
 
+  // -----------------------------
+  // 组件变量 & 函数工具
+
+  /**渲染数据列表*/
+  let List = [];
+
   /**渲染 & 更新视图
    * @param data JSON数据
    */
@@ -80,19 +79,39 @@
    * @param tag TAG
    */
   function searchTag(tag) {
-    console.log(tag, encodeURIComponent(tag));
+    if (process.env.APP_ENV === 'dev') console.log(tag, encodeURIComponent(tag));
     createFetch(searchTagRequest(tag), data => {
-      console.log(data);
+      if (process.env.APP_ENV === 'dev') console.log(data);
       showList(data);
     });
   }
 
+  /**获取封面图
+   * @param folder 文件夹路径
+   */
+  function getCover(folder) {
+    // const jsonLink = $_env + '/' + folder.substring(2) + '/rpg_info/info.json';
+    // createFetch({ url: jsonLink, params: { method: 'GET' } }, data => {
+    //   console.log(data);
+    // });
+
+    // FIXME: 隐患 -> 可能是 1.png 1.webpage 之类的...
+    return $_env + '/' + folder.substring(2) + '/rpg_info/1.jpg';
+  }
+
+  /**获取 info.json
+   * @param folder 文件夹路径
+   */
+  function getFolder(folder) {
+    return $_env + '/' + folder.substring(2) + '/rpg_info/';
+  }
+
   // -----------------------------
   // NOTE: 初始化执行 -> 考虑用 onMount
 
   // 初始化请求 -> 拉取全部
   createFetch(getContentsRequest, data => {
-    console.log(data);
+    if (process.env.APP_ENV === 'dev') console.log(data);
     showList(data);
   });
 </script>
@@ -104,7 +123,8 @@
     <Card
       title={item.cn_name}
       sub_title={item.jp_name}
-      cover={$_env + '/' + item.folder.substring(2) + '/rpg_info/1.jpg' ?? ''}
+      cover={getCover(item.folder)}
+      folder={getFolder(item.folder)}
       language={item.category}
       raw_tags={item.tags}
       p_searchTag={searchTag}

src/components/card.svelte

@@ -5,6 +5,8 @@
   export let sub_title;
   /**父属性: 封面图片链接*/
   export let cover;
+  /**父属性: 路径*/
+  export let folder;
   /**父属性: 语言分类*/
   export let language;
   /**父属性: TAG文本*/
@@ -22,8 +24,20 @@
     tags = raw_tags.slice(1, raw_tags.length - 1).split('|');
   }
 
-  //
-  let error = false;
+  // 图片错误 trigger
+  let _picError = false;
+
+  /**TODO: 显示所有缩略图*/
+  function getInfoPics() {
+    console.log(folder);
+
+    fetch(folder + '/info.json', { method: 'GET' })
+      .then(response => response.json())
+      .then(data => {
+        console.log(data);
+        // window.open(folder + data[1]);
+      });
+  }
 </script>
 
 <div class="card w-80 bg-primary text-primary-content shadow-xl">
@@ -32,11 +46,13 @@
     <img
       src={cover ?? '/favicon.ico'}
       alt={title ?? 'default alt'}
-      style={error ? 'height: 240px; width: 320px;' : ''}
+      style={_picError ? 'height: 240px; width: 320px;' : ''}
       on:error={() => {
         cover = '/favicon.ico';
-        error = true;
+        _picError = true;
       }}
+      on:click={getInfoPics}
+      on:keypress={() => {}}
     />
   </figure>
   <div class="card-body">
@@ -44,9 +60,9 @@
       <!-- NOTE: 游戏类别 -->
       <div class="badge badge-secondary m-auto" style="height: inherit;line-height: inherit;">{language ?? '示例'}</div>
       <!-- NOTE: 游戏名称 -->
-      {title ?? 'default title'}
+      {title ?? '无中文名称'}
     </h2>
-    <p>{sub_title ?? 'default sub_title'}</p>
+    <p>{sub_title ?? '无日文名称'}</p>
 
     <!-- NOTE: tags -->
     <!-- {#if raw_tags}