feat: 添加显示作弊面板

src/Content.svelte

 <script>
   import Card from './components/card.svelte';
   import { SvelteToast, toast } from '@zerodevx/svelte-toast';
-  import { _category, _detailWindow, _env, _tagTrans, _detailPics, _config, _timer } from './stores';
+  import { _category, _cheatWindow, _cheatHint, _detailWindow, _env, _tagTrans, _detailPics, _config, _timer } from './stores';
   import { fade } from 'svelte/transition';
   import { debounceImmediate } from './utils';
   import MedalWrap from './components/MedalWrap.svelte';
@@ -395,6 +395,21 @@
   <MedalItemDetail pics={$_detailPics} />
 </MedalWrap>
 
+<!-- FIXME: 在 closeCallBack 中必须把 trigger 指向的变量手动 false 掉, 不然 bug-->
+<MedalWrap
+  id="cheat"
+  period={0}
+  trigger={$_cheatWindow}
+  contentTrigger={$_cheatHint}
+  closeCallBack={() => {
+    $_cheatWindow = false;
+  }}
+>
+  <div class="carousel w-full h-60">
+    {$_cheatHint}
+  </div>
+</MedalWrap>
+
 <!-- NOTE: 游戏卡片主渲染区 -->
 {#if List.length}
   <div class="cardContainer justify-evenly gap-4 my-3" transition:fade={{ delay: 0, duration: 300 }}>

src/components/MedalWrap.svelte

@@ -5,6 +5,12 @@
 
   import { fade } from 'svelte/transition';
 
+  /**Modal id*/
+  export let id = 'globalModal';
+
+  /**过渡渐变时间*/
+  export let period = 500;
+
   /**开关面板 trigger*/
   export let trigger;
   /**关闭面板回调函数*/
@@ -15,9 +21,9 @@
 </script>
 
 <!-- NOTE: 游戏详情预览模态框 -->
-<dialog id="globalModal" class="modal focus:outline-none">
+<dialog {id} 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 }}>
+    <div class="_customModal max-[1024px]:w-[98vw] max-[1024px]:max-w-[98vw]" transition:fade={{ delay: 0, duration: period }}>
       <!-- |-- NOTE: 按钮退出详情 -->
       <form method="dialog">
         <button

src/components/card.svelte

 <script>
   import { toast } from '@zerodevx/svelte-toast';
-  import { _env, _category, _detailPics, _detailWindow, _tagTrans, _config } from '../stores';
+  import { _env, _category, _detailPics, _detailWindow, _tagTrans, _config, _cheatHint, _cheatWindow } from '../stores';
+  import ICON_CE from '../assets/icon_CheatEngine.svg';
 
   /**父属性: 所有信息*/
   export let info;
@@ -67,7 +68,7 @@
 
           // 延迟切换到第一张
           location.replace(`#${$_detailPics[0]}0`);
-        }, 500);
+        }, 300);
       });
   }
 
@@ -88,6 +89,14 @@
         toast.push(`${id} ${title.substring(0, 5)}${title.length > 5 ? '...' : ''} 报错:\t[${err.toString()}]`);
       });
   }
+
+  // ------------
+
+  function getHint() {
+    console.log(info.hint);
+    $_cheatWindow = true;
+    $_cheatHint = info.hint;
+  }
 </script>
 
 <div class="card w-80 bg-primary text-primary-content shadow-xl overflow-hidden">
@@ -126,17 +135,37 @@
   </figure>
   <div class="card-body justify-between">
     <h2 class="card-title block text-lg">
-      <!-- NOTE: 游戏类别(title) -->
-      {#if $_config.card_showCateGoryTitle}
-        <div
-          class="badge badge-secondary m-auto cursor-pointer hover:badge-neutral"
-          style="height: inherit;line-height: inherit;"
-          on:click={p_searchCategory(category)}
-          on:keypress={() => {}}
+      <div class="inline-flex items-center justify-center translate-y-[-1px] rounded-box overflow-hidden align-middle">
+        <!-- NOTE: 游戏类别(title) -->
+        {#if $_config.card_showCateGoryTitle}
+          <span
+            class="
+              h-6 mt-0 badge badge-secondary rounded-l-box rounded-r-none
+              m-auto px-[6px] cursor-pointer hover:bg-neutral hover:text-neutral-content hover:badge-outline text-sm
+              inline-flex items-center justify-center"
+            on:click={p_searchCategory(category)}
+            on:keypress={() => {}}
+          >
+            {language ?? '示例'}
+          </span>
+        {/if}
+
+        <button
+          class="
+            w-6 h-6 mt-0 badge badge-accent rounded-r-box rounded-l-none
+            m-auto p-0 cursor-pointer translate-y-[0px] hover:bg-secondary
+            inline-flex items-center justify-center tooltip tooltip-left"
+          data-tip="作弊"
+          on:click={() => {
+            getHint();
+            // TODO: 作弊
+          }}
+          onclick="cheat.showModal()"
         >
-          {language ?? '示例'}
-        </div>
-      {/if}
+          <img class="w-4 h-4" src={ICON_CE} alt="icon_ce" />
+        </button>
+      </div>
+
       <!-- NOTE: 游戏名称 -->
       <a class="hover:link" href={folder} target="_blank">
         {#if title}
@@ -189,6 +218,6 @@
 
 <style>
   .card-body {
-    --padding-card: 1rem;
+    --padding-card: 0.8rem;
   }
 </style>

src/stores/index.js

@@ -69,4 +69,10 @@ export const _tagTrans = persistStore('_tagTrans', {});
 export const _detailWindow = writable(false);
 
 /** 刷新后消失: 详情图片显示窗口 */
-export const _detailPics = writable([]);
\ No newline at end of file
+export const _detailPics = writable([]);
+
+/** trigger: 作弊显示窗口 */
+export const _cheatWindow = writable(false);
+
+/** 刷新后消失: 作弊显示窗口 */
+export const _cheatHint = writable("");
\ No newline at end of file