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"
      ref="supportButtonEl"
      class="draggable-support-button"
      :class="{ 'is-dragging': supportDragging, 'is-picker-open': supportPickerOpen }"
      :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>

    <SupportMessengerPicker
      v-model:open="supportPickerOpen"
      :entries="supportMessengerEntries"
      :anchor-el="pickerAnchorEl"
      @select="openMessengerEntry"
    />

    <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 { useSupportMessenger } from '@/composables/useSupportMessenger'
import { loadSupportMessengerFromSettings } from '@/utils/supportMessenger'
import SupportMessengerPicker from '@/components/SupportMessengerPicker.vue'
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 {
  supportPickerOpen,
  supportPickerAnchor,
  supportMessengerEntries,
  messengerMeta,
  hasMessengerLink: showSupportButton,
  openMessengerEntry,
  openSupportMessenger,
} = useSupportMessenger()

const supportButtonEl = ref<HTMLElement | null>(null)
const pickerAnchorEl = computed(() => supportPickerAnchor.value ?? supportButtonEl.value)

const supportIcon = computed(() => messengerMeta.value.icon)

const supportAccentColor = computed(() =>
  (messengerMeta.value.accent !== '#334155'
    ? messengerMeta.value.accent
    : 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,
  defaultBottomGap: 12,
  defaultRightOffset: 16,
})

function handleSupportPointerUp(event: PointerEvent) {
  const clicked = supportPointerUp(event)
  if (!clicked) return
  event.stopPropagation()
  void openSupportMessenger(supportButtonEl.value)
}

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);
}

#support-button.is-picker-open .support-button-inner {
  transform: scale(0.94);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

/* در دسکتاپ، دکمه پشتیبانی کنار سایدبار و پایین صفحه قرار می‌گیرد (مانند khaneghi_user) */
html.app-layout--desktop {
  #support-button {
    bottom: 12px;
    right: calc(var(--app-desktop-sidebar-width, 260px) + 20px);
  }
}
</style>