boursecu_user/src/App.vue

<template>
  <div class="desktopConfig w-full right-0 left-0 absolute">
    <div v-if="popVisible" class="top-0 bottom-0 wrap-fix bg-primary z-100 opacity-60">
      <div class="absolute right-0 left-0 bottom-10vh flex flex-col items-center">
        <div>
          <BasicButton>درباره ما</BasicButton>
        </div>
        <div></div>
        <div></div>
      </div>
    </div>
    <AConfigProvider
        v-if=" antTheme"
        :theme="antTheme"
        direction="rtl"
    >
      <transition mode="out-in" name="fade">

        <div v-if="!showSplash">
          <router-view v-slot="{ Component, route }">
            <!-- Use any custom transition and  to `fade` -->
            <transition :name="route.meta.transition || 'fade'">

              <div>
                <component :is="Component"/>
              </div>
            </transition>
          </router-view>

        </div>
        <div v-else class="flex bottom-0 wrap-fix top-0 bg-white z-1000000000000 justify-center">
          <div class="top-0 wrap-fix h-1/3 w-screen flex">
            <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover"/>
            <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
          </div>
          <div class="wrap-fix bottom-0 h-1/3 w-screen">
            <img
                :src="img_bottomGradiant"
                alt=""
                class="absolute z-10 w-screen h-full object-cover"
            />
            <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
          </div>
          <div class="self-center splash_appear_fade_in">
            <img :src="config?.config?.avatar" class="h-[20vh]">

            <!--          <img :src="logoFull" class="h-[20vh]">-->
            <!--          <img :src="logo" alt="" class="z-100 bg-primary rounded-full w-full aspect-square self-center h-40" />-->

          </div>
          <div class="fixed w-full bottom-5 home_appear_fade_in_up">
            <div class="text-center text-xs">نسخه: {{ pkg.version }}</div>
          </div>
          <div class="absolute bottom-10">
            <a-spin :indicator="indicator" size="small"/>
          </div>
        </div>
      </transition>

    </AConfigProvider>


    <van-dialog
        v-model:show="versionDialog"
        class="updateButton"
        confirm-button-text="به روزرسانی کنید"
        show-confirm-button
        @confirm="update()"
    >
      <div class="flex flex-col items-center p-2">
        <DotLottieVue
            class="w-full aspect-square"
            autoplay
            loop
            src="https://lottie.host/cb620e8e-c64a-42e8-a6b5-8844146e5999/nmft7oBO8q.json"
        />
        <div class="home_appear_fade_in_up mt-2">نسخه جدید منتشر شد!</div>
      </div>
    </van-dialog>
  </div>
</template>

<script lang="ts" setup>
import {colors} from './themeConfig'
import pkg from '../package.json'
import {useRegisterSW} from 'virtual:pwa-register/vue'
import {computed, h, onMounted, ref} from 'vue'
import {update} from 'lodash'
import img_topGradiant from '@/views/login/assets/img/gr_top_white.svg'
import img_pattern from '@/views/login/assets/img/pattern.svg'
import {LoadingOutlined} from '@ant-design/icons-vue'

import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg'
import logoFull from '@/assets/img/logo_full_.png'
import {DotLottieVue} from '@lottiefiles/dotlottie-vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import {getConfig} from "@/api/config";
import {useConfigStore} from "@/store/configStore";
import { ConfigProvider as AConfigProvider } from 'ant-design-vue'

const {offlineReady, needRefresh, updateServiceWorker} = useRegisterSW()
const config = useConfigStore()
const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '24px'
  },
  spin: true
})
const showSplash = ref(true)

const antTheme = computed(() => {
  if (!config.config?.color) return null

  return {
    token: {
      colorPrimary: "#ff0000",
      colorLink: config.config.color,
      colorLinkActive: config.config.color,
      colorLinkHover: config.config.color,
    },
  }
})
onMounted(async () => {
  await config.getConfigData()
  console.log(config.config.color)
  checkVersion()
  setTimeout(() => {
    showSplash.value = false
  }, 2000)
})

const versionDialog = ref<boolean>(false)

function checkVersion() {
  const version = localStorage.getItem('version')
  // if (true) {
  if (!version) {
    update()
  }
  if (version != pkg.version) {
    versionDialog.value = true
  }
}

function update() {
  localStorage.setItem('version', pkg.version)
  updateServiceWorker()
  window.location.reload()
}

</script>

<style lang="less">
.updateButton .van-dialog__confirm .van-button__text {
  color: @App-primary-color !important;
  font-weight: 600;
  font-size: 15px;
}

@media screen and (min-width: 426px) {
  .desktopConfig {
    width: 426px;
    position: relative !important;
  }
}
</style>