feat: 重构 Modal & 新增 Loading 图片拉取.

src/Content.svelte

@@ -4,6 +4,8 @@
   import { _category, _detailWindow, _env, _tagTrans, _detailPics, _config, _timer } from './stores';
   import { fade } from 'svelte/transition';
   import { debounceImmediate } from './utils';
+  import MedalWrap from './components/MedalWrap.svelte';
+  import MedalItemDetail from './components/MedalItemDetail.svelte';
 
   /**开发模式下 console.log debug 函数
    * @param str
@@ -381,55 +383,17 @@
 <!-- Open the modal using ID.showModal() method -->
 <!-- <button class="btn" onclick="globalModal.showModal()">open modal</button> -->
 
-<!-- NOTE: 游戏详情预览模态框 -->
-<dialog id="globalModal" class="modal focus:outline-none">
-  {#if $_detailWindow}
-    <div class="globalModal max-[1024px]:w-[98vw] max-[1024px]:max-w-[98vw]" transition:fade={{ delay: 0, duration: 500 }}>
-      <!-- |-- NOTE: 按钮退出详情 -->
-      <form method="dialog">
-        <button
-          on:click={() => {
-            $_detailWindow = false;
-            history.pushState('', '', window.location.origin);
-          }}
-          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>
-    <!-- |-- NOTE: 边框退出详情 -->
-    <form method="dialog" class="modal-backdrop">
-      <button
-        on:click={() => {
-          $_detailWindow = false;
-          history.pushState('', '', window.location.origin);
-        }}
-      />
-    </form>
-  {/if}
-</dialog>
+<!-- FIXME: 在 closeCallBack 中必须把 trigger 指向的变量手动 false 掉, 不然 bug-->
+<MedalWrap
+  trigger={$_detailWindow}
+  contentTrigger={$_detailPics.length}
+  closeCallBack={() => {
+    history.pushState('', '', window.location.origin);
+    $_detailWindow = false;
+  }}
+>
+  <MedalItemDetail pics={$_detailPics} />
+</MedalWrap>
 
 <!-- NOTE: 游戏卡片主渲染区 -->
 {#if List.length}
@@ -455,22 +419,6 @@
 {/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;
-    }
-  }
-
   .cardContainer {
     display: grid;
     grid-template-columns: repeat(auto-fill, 20rem);

src/components/AwaitImage.svelte

+<script>
+  import { fade } from 'svelte/transition';
+
+  export let imageUrl = ''; // 用于接收图片URL
+  let isLoading = true; // 控制加载中状态
+
+  function handleImageLoad() {
+    isLoading = false; // 图片加载完成后，隐藏加载中状态
+  }
+
+  const image = new Image();
+  image.src = imageUrl;
+  image.onload = handleImageLoad;
+</script>
+
+{#if isLoading}
+  <!-- 显示加载中状态 -->
+  <div class="w-full flex justify-center items-center" transition:fade={{ delay: 0, duration: 300 }}>
+    <span class="loading loading-infinity loading-lg" />
+  </div>
+{:else}
+  <!-- 显示加载完成后的图片 -->
+  <img src={imageUrl} alt={imageUrl} on:load={handleImageLoad} transition:fade={{ delay: 500, duration: 300 }} />
+{/if}

src/components/MedalItemDetail.svelte

+<script>
+  import AwaitImage from './AwaitImage.svelte';
+
+  export let pics = [];
+</script>
+
+<div class="carousel w-full" style="height: calc(80vh - 4rem - 3rem - 0.5rem);">
+  {#each pics 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 pics as pic, index}
+    <a href={'#' + pic + index} class="w-16 h-16 btn btn-xs flex flex-col">
+      <div class="w-10 h-10 flex items-center">
+        <AwaitImage imageUrl={pic} />
+      </div>
+      <div>{index}</div>
+    </a>
+  {/each}
+</div>

src/components/MedalWrap.svelte

+<script>
+  /**
+   * 我的世界
+   */
+
+  import { fade } from 'svelte/transition';
+
+  /**开关面板 trigger*/
+  export let trigger;
+  /**关闭面板回调函数*/
+  export let closeCallBack = () => {};
+
+  /**内部加载 trigger*/
+  export let contentTrigger;
+</script>
+
+<!-- NOTE: 游戏详情预览模态框 -->
+<dialog id="globalModal" class="modal focus:outline-none">
+  {#if trigger}
+    <div class="globalModal max-[1024px]:w-[98vw] max-[1024px]:max-w-[98vw]" transition:fade={{ delay: 0, duration: 500 }}>
+      <!-- |-- NOTE: 按钮退出详情 -->
+      <form method="dialog">
+        <button
+          on:click={() => {
+            trigger = false;
+            closeCallBack();
+          }}
+          class="btn btn-sm round-box btn-ghost absolute right-2 top-2"
+        >
+          ✕
+        </button>
+      </form>
+      <!-- |-- NOTE: Transition -->
+      {#if contentTrigger}
+        <slot />
+      {:else}
+        <!-- |-- NOTE: loading -->
+        <div class="h-full w-full flex justify-center items-center">
+          <span class="loading loading-infinity loading-lg" />
+        </div>
+      {/if}
+    </div>
+    <!-- |-- NOTE: 边框退出详情 -->
+    <form method="dialog" class="modal-backdrop">
+      <button
+        on:click={() => {
+          trigger = false;
+          closeCallBack();
+        }}
+      />
+    </form>
+  {/if}
+</dialog>
+
+<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>