feat: 正常推进进度 -> 拉取数据 & 基础卡片展示.

src/App.svelte

@@ -65,17 +65,25 @@
         else toast.push('域名不正确, 无法跳转到指定页面.');
       }
     },
+    // {
+    //   id: 'switch',
+    //   text: '中日切换',
+    //   hint: '切换游戏名称中日文',
+    //   click: () => {
+    //     console.log('TODO: 中日切换.');
+    //   }
+    // },
     {
-      id: 'switch',
-      text: '中日切换',
-      hint: '切换游戏名称中日文',
+      id: 'search',
+      text: '搜索',
+      hint: '搜索相关的游戏',
       click: () => {
-        console.log('TODO: 中日切换.');
+        console.log('TODO: 搜索.');
       }
     },
     {
       id: 'cheat',
-      text: '作弊命令',
+      text: '作弊',
       hint: '常用作弊命令',
       click: () => {
         console.log('TODO: 常用作弊命令.');

src/Content.svelte

-Content
+<script>
+  import Card from './components/card.svelte';
+  import { SvelteToast, toast } from '@zerodevx/svelte-toast';
+
+  // -----------------------------
+  let List = [];
+
+  /**获取所有资料*/
+  const getContents = {
+    url: '/api/query.php?action=get',
+    params: {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json;charset=UTF-8',
+        'Access-Control-Allow-Origin': true
+      }
+    }
+  };
+
+  /**创建 fetch 函数
+   * @param {object} param0 参数对象
+   * @param {function} callback 回调函数
+   */
+  function createFetch({ url, params, payload }, callback = () => {}) {
+    const msg = {
+      method: params.method,
+      headers: params.headers
+    };
+
+    if (params.method == 'POST') msg.body = payload;
+
+    fetch(url, msg)
+      .then(response => response.json())
+      .then(data => {
+        // console.log(data);
+
+        // 处理数据
+        callback(data);
+      })
+      .catch(error => {
+        // 处理错误
+        console.error('网络请求错误:', error);
+        我处理一下就行;
+        toast.push('网络请求错误');
+      });
+  }
+
+  createFetch(getContents, data => {
+    console.log(data);
+    showList(data);
+  });
+
+  function showList(data) {
+    List = [...List, ...data];
+  }
+</script>
+
+<!-- ----------------------------------------------- DOM ----------------------------------------------- -->
+
+<div class="cardContainer flex flex-wrap justify-evenly gap-4 my-3">
+  {#each List as item}
+    <Card
+      title={item.cn_name}
+      sub_title={item.jp_name}
+      cover={'/api' + item.folder + '/rpg_info/1.jpg' ?? ''}
+      language={item.category}
+      raw_tags={item.tags}
+    />
+  {/each}
+  <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;
+  export let raw_tags = '';
+  // ------------------------
+  // 处理原始 tags 文本
+  let tags = raw_tags.slice(1, raw_tags.length - 1).split('|');
+
+  //
+  let error = false;
+</script>
+
+<div class="card w-80 bg-primary text-primary-content shadow-xl">
+  <!-- NOTE: Cover -->
+  <figure>
+    <img
+      src={cover ?? '/favicon.ico'}
+      alt={title ?? 'default alt'}
+      style={error ? 'height: 240px; width: 320px;' : ''}
+      on:error={() => {
+        cover = '/favicon.ico';
+        error = true;
+      }}
+    />
+  </figure>
+  <div class="card-body">
+    <h2 class="card-title block">
+      <!-- NOTE: 游戏类别 -->
+      <div class="badge badge-secondary m-auto" style="height: inherit;line-height: inherit;">{language ?? '示例'}</div>
+      <!-- NOTE: 游戏名称 -->
+      {title ?? 'default title'}
+    </h2>
+    <p>{sub_title ?? 'default sub_title'}</p>
+
+    <!-- NOTE: tags -->
+    <!-- {#if raw_tags}
+      <p>{raw_tags}</p>
+      <p>{tags}</p>
+    {/if} -->
+    <div class="card-actions justify-end">
+      {#if !raw_tags || tags.length == 0}
+        <!-- <div class="badge badge-outline">tag1</div> -->
+        <!-- <div class="badge badge-outline">tag2</div> -->
+      {:else}
+        {#each tags as tag}
+          <div class="badge badge-outline">{tag}</div>
+        {/each}
+      {/if}
+    </div>
+  </div>
+</div>
+
+<style>
+  .card-body {
+    --padding-card: 1rem;
+  }
+</style>