Vue

<script setup lang='ts'>

</script>

<template>

</template>

<style lang='scss' scoped>

</style>

import { onMounted, ref } from 'vue'

const imageArray = ref<string[]>([])

onMounted(async () => {
  for (const background of backgroundImages) {
    const backgroundURL = await getBackground(background.index)
    imageArray.value.push(backgroundURL)
  }
})

import Message from '@/components/alert/Message'
import BackgroundImageSkeleton from '@/components/skeleton/settings-panel/BackgroundImageSkeleton.vue'

/**
 * @param {string} messageEN - Message in English
 * @param {string} messageCN - Message in Chinese
 * @param {type} type - Type of the message, can be one of `warn`, `success`, `error`, or `info`
 * @param {number} duration - Display duration of the message, optional, default is 3 seconds
 */
export default (
  messageEN: string,
  messageCN: string,
  type: MessageType,
  duration?: number
) => {}

import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
import { storeToRefs } from 'pinia'

const { showKUNGalgameBackground, showKUNGalgameCustomBackground } =
  storeToRefs(useKUNGalgameSettingsStore())

import {
  getBackgroundURL,
  restoreBackground,
} from '@/hooks/useBackgroundPicture'

<li
    v-for="kun in backgroundImages"
    :key="kun.index"
    v-tooltip="{ message: kun.message, position: 'bottom' }"
>
    <img
        v-if="kun"
        :src="imageArray[kun.index - 1]"
        @click="handleChangeImage(kun.index)"
    />

    <BackgroundImageSkeleton v-if="!imageArray[kun.index - 1]" />
</li>

/* Background settings */
.kungalgame-background-container {
  margin: 0;
  padding: 0;

  /* Font for the title of the background container */
  span {
    height: 30px;
  }
}

.bg-settings {
  margin: 10px 0;
}

display: flex;
justify-content: center;
align-items: center;

import { useRoute } from 'vue-router'
const routeName = computed(() => route.name as string)

watch(
  () => pageWidth.value,
  () => {
    if (pageNameArray.includes(routeName.value)) {
      showKUNGalgamePageWidth.value[routeName.value] = pageWidth.value
    }
  }
)

watch(() => value, callback(), { configuration })

watch(value, callback(), { configuration })

$tm('key')

import { useI18n } from 'vue-i18n'
const { locale } = useI18n({ useScope: 'global' })

import i18n from '@/language/i18n'
18n.global.tm(`router.${title}`)

import Loli from './components/Loli.vue'
import Mode from './components/Mode.vue'
import SwitchLanguage from './components/SwitchLanguage.vue'
import PageWidth from './components/PageWidth.vue'
import Font from './components/Font.vue'
import Background from './components/Background.vue'

const emits = defineEmits<{
  close: [showKUNGalgamePanel: boolean]
}>()

const handelCloseSettingsPanel = () => {
  emits('close', false)
}

const props = defineProps<{
  isMobile?: boolean
}>()

<template>
  <!-- #default is shorthand for v-slot, route is the route, Component is a v-node -->
    <RouterView #default="{ route, Component }">
      <Transition
        :enter-active-class="`animate__animated ${route.meta.transition}`"
      >
        <!-- ATTENTION! You must include a key here; otherwise
          , Vue Router won't recognize page updates for the same page
          , causing the page not to refresh -->
        <Component :is="Component" :key="route.fullPath"></Component>
      </Transition>
    </RouterView>
</template>

<template>
    <RouterLink :to="{ path: kun.router }">
      {{ $tm(`header.${kun.name}`) }}
    </RouterLink>
</template>

<template>
  <Transition name="order" mode="out-in">
  </Transition>
</template>

<style lang="scss" scoped>
.order-enter-active,
.order-leave-active {
  transition: all 0.25s ease-out;
}

.order-enter-from {
  opacity: 0;
  transform: translateY(-30px);
}

.order-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

<template>
    <Transition
      enter-active-class="animate__animated animate__fadeInUp animate__faster"
      leave-active-class="animate__animated animate__fadeOutDown animate__faster"
    >
    </Transition>
</template>

<template>
  <TransitionGroup name="item" tag="div">
    <div class="item" v-if="isShowPageWidth">
      <PageWidth />
    </div>

    <div class="item" v-else-if="!isShowPageWidth">
      <Font />
    </div>
  </TransitionGroup>
</template>

<style lang="scss" scoped>
.item-move,
.item-enter-active,
.item-leave-active {
  transition: all 0.5s ease;
}

.item-enter-from,
.item-leave-to {
  opacity: 0;
  transform: translateY(77px);
}

.item-leave-active {
  position: absolute;
}
</style>

<template>
  <KeepAlive :exclude="['PageWidth', 'Font']">
    <KUNGalgameSettingsPanel
      v-if="showKUNGalgamePanel"
      @close="showKUNGalgamePanel = false"
    />
  </KeepAlive>
<template>

<template>
  <Teleport to="body" :disabled="showAlert">
    <Transition name="alert">
      <div v-if="showAlert" class="mask">
      </div>
    </Transition>
  </Teleport>
</template>