boursecu_user/src/App.vue

<template>
  <div class="desktopConfig w-full right-0 left-0">
    <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">
      <div v-if="showSplash" class="app-splash-screen flex justify-center" :style="{ backgroundColor: getProjectSplashBackground() }">
        <template v-if="!isBoursecuProject()">
          <div class="app-splash-screen__gradient app-splash-screen__gradient--top h-1/3 flex">
            <img :src="img_topGradiant" alt="" class="absolute z-10 w-full h-full object-cover"/>
            <img :src="img_pattern" alt="" class="absolute w-full h-full object-none"/>
          </div>
          <div class="app-splash-screen__gradient app-splash-screen__gradient--bottom h-1/3">
            <img
                :src="img_bottomGradiant"
                alt=""
                class="absolute z-10 w-full h-full object-cover"
            />
            <img :src="img_pattern" alt="" class="absolute w-full h-full object-none"/>
          </div>
        </template>
        <div class="self-center splash_appear_fade_in">
          <img
            :src="getProjectSplashLogo(config?.config?.avatar)"
            :class="isBoursecuProject()
              ? 'w-[min(72vw,280px)] h-auto object-contain'
              : hasCustomLoginLogoLayout()
                ? 'w-[80vw] max-w-[320px] h-auto object-contain'
                : 'h-[20vh] object-contain'"
            alt=""
          >
        </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>

      <div v-else class="app-main">
        <router-view v-slot="{ Component, route }">
          <component :is="Component" :key="route.fullPath" />
        </router-view>
      </div>
    </AConfigProvider>
    <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 && !isDesktop"
    class="app-credit-footer app-credit-footer--mobile"
  >
    <AppCreditLink variant="mobile" />
  </div>
  <div
    v-if="!showSplash && showDesktopFloatingCredit"
    class="app-credit-footer app-credit-footer--desktop-float"
  >
    <AppCreditLink variant="float" />
  </div>

  <VersionUpdateModal />
</template>

<script lang="ts" setup>
import pkg from '../package.json'
import {useRegisterSW} from 'virtual:pwa-register/vue'
import {computed, defineAsyncComponent, h, onMounted, ref, watch} 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 BasicButton from '@/components/BasicPacks/BasicButton.vue'
import {useConfigStore} from "@/store/configStore";
import {getProjectFontFamily, getProjectSplashBackground, getProjectSplashLogo, getProjectBrandRed, getProjectPrimaryColor, hasCustomLoginLogoLayout, isBoursecuProject, resetAppSurfaceBackground} from "@/utils/config";
import {ConfigProvider as AConfigProvider} from 'ant-design-vue'
import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
import { useApplyDesktopLayoutClass, useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
import {
  buildSupportMessengerUrl,
  loadSupportMessengerFromSettings,
  supportMessengerSettings,
} from '@/utils/supportMessenger'
import { useDraggableFloatingButton } from '@/utils/useDraggableFloatingButton'
import AppCreditLink from '@/components/AppCreditLink.vue'
import { useRoute } from 'vue-router'

const VersionUpdateModal = defineAsyncComponent(
  () => import('@/modules/version/VersionUpdateModal.vue')
)

useApplyDesktopLayoutClass()

const isDesktop = useDesktopBreakpoint()
const route = useRoute()
const showDesktopFloatingCredit = computed(() => {
  if (!isDesktop.value) return false
  return route.name === 'login' || !!route.meta.hideMenu
})

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_v2', {
  width: 118,
  height: 42,
  defaultBottomGap: 12,
  defaultRightOffset: 16
})

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

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

const antTheme = computed(() => {
  const primaryColor = getProjectPrimaryColor()
  if (!primaryColor) return null

  const brandRed = getProjectBrandRed()

  return {
    token: {
      colorPrimary: primaryColor,
      colorLink: primaryColor,
      colorLinkActive: primaryColor,
      colorLinkHover: primaryColor,
      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)
  setTimeout(() => {
    showSplash.value = false
  }, 2000)
})

watch(showSplash, (visible) => {
  if (!visible) {
    resetAppSurfaceBackground()
  }
})

</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-desktop-sidebar-width: 260px;
  --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-main {
  width: 100%;
  min-height: 100vh;
  opacity: 1 !important;
}

.desktopConfig {
  min-height: 100vh;
}

.app-credit-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000000;
  box-sizing: content-box;
}

.app-credit-footer--mobile {
  width: 100%;
  max-width: 426px;
  margin-left: auto;
  margin-right: auto;
  min-height: var(--app-credit-bar-inner);
  padding-bottom: var(--app-safe-bottom);
  background: #fff;
  box-shadow: 0 -2px 4px -2px #0000001a;
  display: flex;
  justify-content: center;
  font-size: 9px;
}

.app-credit-footer--desktop-float {
  left: auto;
  right: 20px;
  bottom: 16px;
  width: auto;
}

.app-credit-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;

  &:hover {
    opacity: 0.85;
  }

  &__text {
    font-weight: 500;
    white-space: nowrap;
  }

  &__logo {
    width: auto;
    object-fit: contain;
  }

  &--mobile {
    gap: 4px;
    padding: 4px 0;
    color: inherit;

    .app-credit-link__logo {
      height: 12px;
    }
  }

  &--sidebar {
    flex-direction: column;
    gap: 6px;
    padding: 4px;
    color: #9ca3af;
    font-size: 10px;

    .app-credit-link__logo {
      height: 15px;
      opacity: 0.85;
    }
  }

  &--float {
    gap: 6px;
    padding: 7px 14px;
    font-size: 10px;
    color: #6b7280;
    background: #fff;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);

    .app-credit-link__logo {
      height: 13px;
    }
  }
}

html.project-boursecu {
  .app-credit-link--sidebar {
    color: rgba(255, 255, 255, 0.5);

    .app-credit-link__logo {
      filter: brightness(1.15);
      opacity: 0.75;
    }
  }

  .app-credit-link--float {
    background: var(--App-brand-nav, #133050);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.65);
  }
}

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

#support-button {
  position: fixed;
  z-index: 5100;
  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) and (max-width: 767.98px) {
  .desktopConfig {
    width: 426px;
    position: relative !important;
  }
}

html.app-layout--desktop {
  #support-button {
    bottom: 12px;
    right: calc(var(--app-desktop-sidebar-width, 260px) + 20px);
  }
}
</style>