ghatreh_user/src/App.vue

<template>
  <div class="desktopConfig w-full right-0 left-0">
    <transition mode="out-in" name="fade">
      <AConfigProvider
        v-if="!showSplash"
        :theme="{
          token: {
            colorPrimary: colors.primary,
            colorLink: colors.primary,
            colorLinkActive: colors.primary,
            colorLinkHover: colors['primary-rgba']
          }
        }"
        direction="rtl"
      >
        <router-view v-slot="{ Component, route }">
          <transition :name="route.meta.transition || 'fade'">
            <component :is="Component" :key="route.fullPath" class="app-main" />
          </transition>
        </router-view>
      </AConfigProvider>

      <div v-else class="app-splash-screen flex items-center justify-center bg-white">
        <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>
        <div class="splash_appear_fade_in relative z-10">
          <img :src="logoFull" class="h-[20vh] max-h-[180px] w-auto object-contain" alt="" />
        </div>
        <div class="app-splash-screen__version home_appear_fade_in_up">
          <div class="text-center text-xs">نسخه: {{ displayVersion }}</div>
        </div>
        <div class="app-splash-screen__spinner">
          <a-spin :indicator="indicator" size="small" />
        </div>
      </div>
    </transition>

    <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>

    <VersionUpdateModal />
  </div>
</template>

<script lang="ts" setup>
import { colors } from './themeConfig'
import pkg from '../package.json'
import { getDisplayAppVersion } from '@/config/config-cache'
import { computed, defineAsyncComponent, 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 BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import {
  buildSupportMessengerUrl,
  loadSupportMessengerFromSettings,
  supportMessengerSettings,
} from '@/utils/supportMessenger'
import { useDraggableFloatingButton } from '@/utils/useDraggableFloatingButton'
import { useApplyDesktopLayoutClass } from '@/layouts/composables/useAppLayout'

import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg'
import logoFull from '@/assets/img/logo_full_.png'

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

const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '24px'
  },
  spin: true
})
const displayVersion = getDisplayAppVersion(pkg.version)
const showSplash = ref(true)

useApplyDesktopLayoutClass()

const supportLink = computed(() =>
  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 colors.primary || '#334155'
  }
})

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

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

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

onMounted(async () => {
  await loadSupportMessengerFromSettings()
  setTimeout(() => {
    showSplash.value = false
  }, 2000)
})

</script>

<style lang="less">
.updateButton .van-dialog__confirm .van-button__text {
  color: @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);
}
</style>