feat: BackgroundImageSkeleton

.vscode/settings.json

@@ -106,6 +106,7 @@
     "Vite",
     "VNDB",
     "vueup",
+    "waifu",
     "Wataridori",
     "weixin",
     "Wenders",

src/components/setting-panel/KUNGalgameSettingPanel.vue

@@ -1,28 +1,20 @@
 <!-- Settings panel component, displaying the entire forum's settings panel -->
 <script setup lang="ts">
-// Import icon font
 import { Icon } from '@iconify/vue'
-// Import mascot component
+
 import Loli from './components/Loli.vue'
-// Import mode switch component
 import Mode from './components/Mode.vue'
-// Import language switch component
 import SwitchLanguage from './components/SwitchLanguage.vue'
-// Page width adjustment component
 import PageWidth from './components/PageWidth.vue'
-// Font settings component
 import Font from './components/Font.vue'
-// Import background settings component
 import Background from './components/Background.vue'
-// Import settings store
+
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
 import { storeToRefs } from 'pinia'
 
-// Use the settings store
 const settingsStore = useKUNGalgameSettingsStore()
 const { isShowPageWidth } = storeToRefs(settingsStore)
 
-// Define emits to close the settings panel
 const emits = defineEmits<{
   close: [showKUNGalgamePanel: boolean]
 }>()

src/components/setting-panel/components/Background.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-// Import Vue functions
 import { onMounted, ref } from 'vue'
+import Message from '@/components/alert/Message'
+import BackgroundImageSkeleton from '@/components/skeleton/settings-panel/BackgroundImageSkeleton.vue'
 
-// Import the settings panel store
 import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
 import { storeToRefs } from 'pinia'
 
-// Global message component (top)
-import Message from '@/components/alert/Message'
-
 import { backgroundImages } from './background'
 import { getBackgroundURL } from '@/hooks/useBackgroundPicture'
 import { restoreBackground } from '@/hooks/useBackgroundPicture'
@@ -41,6 +38,8 @@ const handleCustomBackground = () => {
   }
 }
 
+const handleHoverBackgroundImage = () => {}
+
 onMounted(async () => {
   for (const background of backgroundImages) {
     const backgroundURL = await getBackground(background.index)
@@ -59,10 +58,13 @@ onMounted(async () => {
         <ul class="kungalgame-restore-bg">
           <li v-for="kun in backgroundImages" :key="kun.index">
             <img
+              v-if="kun"
               :src="imageArray[kun.index - 1]"
-              :alt="kun.alt"
               @click="handleChangeImage(kun.index)"
+              @hover="handleHoverBackgroundImage"
             />
+
+            <BackgroundImageSkeleton v-if="!imageArray[kun.index - 1]" />
           </li>
         </ul>
       </li>
@@ -150,6 +152,7 @@ onMounted(async () => {
     img {
       cursor: pointer;
       width: 70px;
+      position: relative;
 
       /* Image hover effect */
       &:hover {
@@ -158,6 +161,10 @@ onMounted(async () => {
         z-index: 7;
       }
     }
+
+    .image-detail {
+      position: absolute;
+    }
   }
 }
 .kungalgamer-bg {

src/components/setting-panel/components/background.ts

@@ -11,12 +11,12 @@
   https://s3.bmp.ovh/imgs/2023/05/30/7aa57120cc6977a1.png
   */
 
-interface background {
+interface Background {
   index: number
   alt: string
 }
 
-export const backgroundImages: background[] = [
+export const backgroundImages: Background[] = [
   {
     index: 1,
     alt: 'Akai Hitomi ni Utsuru Sekai 紅い瞳に映るセカイ 红瞳映入的世界',

src/components/skeleton/settings-panel/BackgroundImageSkeleton.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="skeleton">
+    <ul>
+      <li></li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.skeleton {
+  position: absolute;
+  width: 70px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  background-color: var(--kungalgame-trans-white-5);
+  width: 100%;
+  height: 100%;
+
+  li {
+    background-image: linear-gradient(
+      90deg,
+      var(--kungalgame-trans-blue-2) 25%,
+      var(--kungalgame-pink-0) 37%,
+      var(--kungalgame-trans-blue-2) 63%
+    );
+    width: 100%;
+    height: 100%;
+    list-style: none;
+    background-size: 400% 100%;
+    background-position: 100% 50%;
+    animation: skeleton 1.7s ease infinite;
+  }
+}
+
+@keyframes skeleton {
+  0% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0 50%;
+  }
+}
+</style>