feat: 点击 Cover 预览所有图片, 支持 pc 和 手机端.

README.md

@@ -60,7 +60,7 @@ npm run build:prod
   - [x] 请求 php
   - [x] 展示基础卡片
     - [x] 图片
-    - [ ] TODO: 点击 Cover 预览所有图片
+    - [x] 点击 Cover 预览所有图片
     - [ ] TODO: 懒加载
     - [x] 语言
   - [x] TAG

src/Content.svelte

 <script>
   import Card from './components/card.svelte';
   import { SvelteToast, toast } from '@zerodevx/svelte-toast';
-  import { _category, _detailWindow, _env, _tagTrans } from './stores';
+  import { _category, _detailWindow, _env, _tagTrans, _detailPics } from './stores';
   import { fade } from 'svelte/transition';
 
   // -----------------------------
@@ -226,6 +226,45 @@
 <!-- NOTE: svelte 绑定 window -> 关闭详情面板 -->
 <svelte:window on:keydown|capture={key_closePanels} />
 
+<!-- Open the modal using ID.showModal() method -->
+<!-- <button class="btn" onclick="globalModal.showModal()">open modal</button> -->
+
+{#if $_detailWindow}
+  <dialog id="globalModal" class="modal">
+    <div class="globalModal max-[1024px]:w-[98vw] max-[1024px]:max-w-[98vw]" transition:fade={{ delay: 200, duration: 1000 }}>
+      <form method="dialog">
+        <button class="btn btn-sm round-box btn-ghost absolute right-2 top-2">✕</button>
+      </form>
+      <!-- NOTE: Transition -->
+      {#if $_detailPics.length}
+        <div class="carousel w-full" style="height: calc(80vh - 4rem - 3rem - 0.5rem);">
+          {#each $_detailPics as pic, index}
+            <div id={pic + index} class="carousel-item w-full">
+              <img src={pic} class="w-full object-contain" alt={pic} />
+            </div>
+          {/each}
+        </div>
+        <div class="flex justify-center w-full gap-2 overflow-x-auto max-[1024px]:justify-start" style="height: 4rem;">
+          {#each $_detailPics as pic, index}
+            <a href={'#' + pic + index} class="btn btn-xs flex flex-col h-16">
+              <div><img src={pic} class="w-10" alt={pic} /></div>
+              <div>{index}</div>
+            </a>
+          {/each}
+        </div>
+      {:else}
+        <!-- NOTE: loading -->
+        <div class="h-full w-full flex justify-center items-center">
+          <span class="loading loading-infinity loading-lg" />
+        </div>
+      {/if}
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button>close</button>
+    </form>
+  </dialog>
+{/if}
+
 {#if List.length}
   <div class="cardContainer flex flex-wrap justify-evenly gap-4 my-3" transition:fade={{ delay: 0, duration: 300 }}>
     {#each List as item}
@@ -249,3 +288,21 @@
     <!-- <Card raw_tags="|示例1|示例2|" /> -->
   </div>
 {/if}
+
+<style>
+  /* NOTE: 对 Modal 的究极魔改, 很不容易. */
+  .globalModal {
+    @apply modal-box;
+    height: 80vh;
+    width: 70vw;
+    max-width: 70vw;
+  }
+
+  @media (max-width: 1024px) {
+    .globalModal {
+      height: 80vh;
+      width: 96vw;
+      max-width: 96vw;
+    }
+  }
+</style>

src/components/card.svelte

 <script>
   import { toast } from '@zerodevx/svelte-toast';
-  import { _tagTrans } from '../stores';
+  import { _detailPics, _detailWindow, _tagTrans } from '../stores';
 
   /**父属性: 主标题*/
   export let title;
@@ -40,7 +40,7 @@
   // 图片错误 trigger
   let _picError = false;
 
-  /**TODO: 显示所有缩略图*/
+  /**点击图片显示该游戏所有缩略图*/
   function getInfoPics() {
     console.log(folder);
 
@@ -49,6 +49,17 @@
       .then(data => {
         console.log(title, data);
         // window.open(folder + '/rpg_info/' + data[1]);
+
+        // NOTE: 这里同样用了点笨方法, 以后有机会改进再说吧, 优先级不高
+        // console.log(pics);
+        $_detailWindow = true;
+        $_detailPics = [];
+        setTimeout(() => {
+          $_detailPics = data.map(pic => folder + '/rpg_info/' + pic);
+
+          // 延迟切换到第一张
+          location.replace(`#${$_detailPics[0]}0`);
+        }, 500);
       });
   }
 
@@ -80,6 +91,7 @@
       style={_picError ? 'height: 240px; width: 320px;' : ''}
       on:error={picErrorHandler}
       on:click={getInfoPics}
+      onclick="globalModal.showModal()"
       on:keypress={() => {}}
     />
   </figure>

src/stores/index.js

@@ -33,10 +33,10 @@ function persistStore(key, startValue) {
 }
 
 // 变量 -------------------------------------
-/** 主题 */
+/** 永久持久化: 主题 */
 export const _theme = persistStore('_theme', "light");
 
-/** 环境变量 */
+/** 永久持久化: 环境变量 */
 export const _env = persistStore('_env', "");
 
 /** 定时持久化: 分类 */
@@ -46,4 +46,7 @@ export const _category = persistStore('_category', {});
 export const _tagTrans = persistStore('_tagTrans', {});
 
 /** trigger: 详情图片显示窗口 */
-export const _detailWindow = writable(false);
+export const _detailWindow = writable(false);
\ No newline at end of file
+
+/** 刷新后消失: 详情图片显示窗口 */
+export const _detailPics = writable([]);
\ No newline at end of file