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 z-1000000000000 justify-center"
          :style="{ backgroundColor: getProjectSplashBackground() }"
        >
          <template v-if="!isBoursecuProject()">
            <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>
          </template>
          <div class="self-center splash_appear_fade_in">
            <img
              :src="getProjectLoginLogo(config?.config?.avatar)"
              :class="hasCustomLoginLogoLayout()
                ? 'w-[80vw] max-w-[320px] h-auto object-contain'
                : 'h-[20vh] object-contain'"
            >

          </div>
          <div class="fixed w-full bottom-5 home_appear_fade_in_up">
            <div
              class="text-center text-xs"
              :class="isBoursecuProject() ? 'text-white' : ''"
            >
              نسخه: {{ pkg.version }}
            </div>
          </div>
          <div class="absolute bottom-10">
            <a-spin :indicator="splashIndicator" size="small"/>
          </div>
        </div>
      </transition>
    </AConfigProvider>
    <van-dialog
        v-model:show="versionDialog"
        class="updateButton"
        teleport="body"
        :z-index="5300"
        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
      v-if="showSupportButton && !showSplash"
      id="support-button"
      class="draggable-support-button"
      :class="{ 'is-dragging': supportDragging }"
      :style="supportButtonStyle"
      title="پشتیبانی"
      @pointerdown="onSupportPointerDown"
      @pointermove="onSupportPointerMove"
      @pointerup="handleSupportPointerUp"
      @pointercancel="onSupportPointerCancel"
    >
      <div class="support-button-inner" :style="{ '--support-accent': supportAccentColor }">
        <BasicIcon :icon="supportIcon" size="18" class="support-button-icon" />
        <span class="support-button-label">پشتیبانی</span>
      </div>
    </div>
  </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 {getProjectFontFamily, getProjectLoginLogo, getProjectSplashBackground, getProjectBrandRed, hasCustomLoginLogoLayout, isBoursecuProject} from "@/utils/config";
import {ConfigProvider as AConfigProvider} from 'ant-design-vue'
import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
import {
  buildSupportMessengerUrl,
  loadSupportMessengerFromSettings,
  supportMessengerSettings,
} from '@/utils/supportMessenger'
import {useDraggableFloatingButton} from '@/utils/useDraggableFloatingButton'

const {offlineReady, needRefresh, updateServiceWorker} = useRegisterSW()
const config = useConfigStore()
const splashIndicator = computed(() => h(LoadingOutlined, {
  style: {
    fontSize: '24px',
    color: isBoursecuProject() ? '#ffffff' : undefined,
  },
  spin: true
}))
const showSplash = ref(true)
const popVisible = ref(false)

const GAROOSI_SUPPORT_URL = 'https://ble.ir/garoosigallery'

const supportLink = computed(() => {
  if (config.config?.name === 'garoosi') {
    return GAROOSI_SUPPORT_URL
  }
  return buildSupportMessengerUrl(
    supportMessengerSettings.value.messenger,
    supportMessengerSettings.value.messengerId
  )
})

const showSupportButton = computed(() => !!supportLink.value)

const supportIcon = computed(() => {
  const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
  switch (messenger) {
    case 'whatsapp':
      return 'vuesax-linear:whatsapp'
    case 'telegram':
      return 'vuesax-linear:send-2'
    case 'bale':
      return 'vuesax-linear:messages-2'
    default:
      return 'vuesax-linear:messages-2'
  }
})

const supportAccentColor = computed(() => {
  const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
  switch (messenger) {
    case 'whatsapp':
      return '#22c55e'
    case 'telegram':
      return '#0ea5e9'
    case 'bale':
      return '#16a34a'
    case 'rubika':
      return '#7c3aed'
    case 'eitaa':
      return '#f59e0b'
    case 'soroush':
      return '#2563eb'
    default:
      return config.config?.color || '#334155'
  }
})

const {
  dragging: supportDragging,
  fabStyle: supportButtonStyle,
  handlePointerDown: onSupportPointerDown,
  handlePointerMove: onSupportPointerMove,
  handlePointerUp: supportPointerUp,
  handlePointerCancel: onSupportPointerCancel
} = useDraggableFloatingButton('khaneghi_support_button_position', {
  width: 118,
  height: 42,
  defaultBottomOffset: 120
})

function openSupportLink() {
  if (!supportLink.value) return
  window.open(supportLink.value, '_blank', 'noopener,noreferrer')
}

function handleSupportPointerUp(event: PointerEvent) {
  if (supportPointerUp(event)) {
    openSupportLink()
  }
}

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

  const brandRed = getProjectBrandRed()

  return {
    token: {
      colorPrimary: config.config.color,
      colorLink: config.config.color,
      colorLinkActive: config.config.color,
      colorLinkHover: config.config.color,
      fontFamily: getProjectFontFamily(),
      ...(brandRed ? {
        colorError: brandRed,
        colorErrorHover: brandRed,
        colorErrorActive: brandRed,
        colorErrorBg: '#f8ecec',
        colorErrorBorder: '#f0d8d8',
      } : {}),
    },
  }
})

onMounted(async () => {
  await config.getConfigData()
  await loadSupportMessengerFromSettings()
  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;
  /* بخشی از کارت کیف‌پول زیر نوار «افزودن کارت جدید» دیده می‌شود */
  --wallet-card-dock-overlap: 52px;
  --app-z-nav: 5000;
  --app-z-wallet-dock: 4490;
  --app-z-wallet-add-bar: 4510;
  --app-z-action-sheet: 5200;
  --app-z-dialog: 5300;
}

.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;
  z-index: 9999;
  cursor: grab;
  user-select: none;
  border-radius: 9999px;

  &.is-dragging {
    cursor: grabbing;
  }
}

.support-button-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 9999px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
  color: #1e293b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  direction: rtl;
  transition: box-shadow 0.2s ease, transform 0.2s ease;

  .support-button-icon {
    color: var(--support-accent, #334155);
    flex-shrink: 0;
  }

  .support-button-label {
    white-space: nowrap;
  }
}

#support-button:not(.is-dragging):hover .support-button-inner {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

#support-button.is-dragging .support-button-inner {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
}

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