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 :theme="antTheme ?? undefined" direction="rtl">
      <transition mode="out-in" name="fade">

        <div v-if="!showSplash">
          <router-view v-slot="{ Component, route }">
            <transition :name="(route.meta.transition as string | undefined) || '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]">

          </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>
    <a v-if="config.config?.name === 'garoosi'" href="https://ble.ir/garoosigallery" target="_blank"
       id="support-button">
      <div class="bg-green-100 text-green-800  flex gap-2 p-2 rounded-lg mr-2">
        <span>پشتیبانی</span>
        <div  class="w-5">
          <img src="/src/assets/img/support.png" alt=""/>
        </div>
      </div>
    </a>
  </div>
  <div
    v-if="!showSplash"
    class="app-credit-footer flex bg-white justify-center text-[9px]"
  >
    <a
      href="https://montzar.ir"
      target="_blank"
      rel="noopener noreferrer"
      class="flex items-center gap-1 text-inherit no-underline"
    >
      <div class="flex justify-center py-1 items-center">
        <div>توسعه و طراحی توسط</div>
        <img src="/logo-montzar.png" alt="" class="h-3" />
      </div>
    </a>
  </div>
</template>

<script lang="ts" setup>
import pkg from '../package.json'
import {useRegisterSW} from 'virtual:pwa-register/vue'
import {computed, h, onMounted, ref} from 'vue'
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 {DotLottieVue} from '@lottiefiles/dotlottie-vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import {useConfigStore} from "@/store/configStore";
import {ConfigProvider as AConfigProvider} from 'ant-design-vue'
import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";

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

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">
/* ارتفاع نوار اعتبار + safe-area؛ منوی پایین با bottom: var(--app-credit-footer-offset) بالاتر از این نوار می‌نشیند */
:root {
  --app-credit-bar-inner: 28px;
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-credit-footer-offset: calc(var(--app-credit-bar-inner) + var(--app-safe-bottom));
  --app-nav-height: 80px;
  --app-bottom-chrome-height: calc(var(--app-nav-height) + var(--app-credit-footer-offset));
  --app-add-card-height: 88px;
}

.app-credit-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 426px;
  margin-left: auto;
  margin-right: auto;
  z-index: 1000000;
  min-height: var(--app-credit-bar-inner);
  padding-bottom: var(--app-safe-bottom);
  box-sizing: content-box;
  background: #fff;
  box-shadow: 0 -2px 4px -2px #0000001a;
}

.updateButton .van-dialog__confirm .van-button__text {
  color: @App-primary-color !important;
  font-weight: 600;
  font-size: 15px;
}

#support-button {
  position: fixed;
  bottom: calc(80px + var(--app-credit-footer-offset, 28px) + 12px);
  right: 20px;
  width: 70px;
  height: 70px;
  //border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  //box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 9999;
}

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