428 lines
11 KiB
Vue
428 lines
11 KiB
Vue
<template>
|
|
<!-- Splash outside .desktopConfig so the 426px mobile frame cannot clip it -->
|
|
<div
|
|
v-if="showSplash"
|
|
class="app-splash-screen flex justify-center"
|
|
:style="{ backgroundColor: getProjectSplashBackground() }"
|
|
>
|
|
<div class="self-center splash_appear_fade_in">
|
|
<img
|
|
:src="getProjectSplashLogo(config?.config?.avatar)"
|
|
class="w-[min(72vw,280px)] h-auto object-contain"
|
|
alt=""
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<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-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"
|
|
ref="supportButtonEl"
|
|
class="fixed z-[5100] cursor-grab select-none rounded-full"
|
|
:class="{
|
|
'cursor-grabbing': supportDragging,
|
|
'z-[var(--app-z-support-fab-open,5615)]': supportPickerOpen,
|
|
}"
|
|
:style="supportButtonStyle"
|
|
title="پشتیبانی"
|
|
@pointerdown="onSupportPointerDown"
|
|
@pointermove="onSupportPointerMove"
|
|
@pointerup="handleSupportPointerUp"
|
|
@pointercancel="onSupportPointerCancel"
|
|
>
|
|
<div
|
|
class="inline-flex items-center gap-2 rounded-full bg-white border border-solid border-gray-200 shadow-[0_6px_20px_rgba(15,23,42,0.14)] px-3.5 py-[9px] text-slate-800 text-[13px] font-600 leading-none transition-all duration-200"
|
|
:class="{
|
|
'shadow-[0_10px_28px_rgba(15,23,42,0.22)]': supportDragging,
|
|
'scale-[0.94] shadow-[0_4px_14px_rgba(15,23,42,0.12)]': supportPickerOpen && !supportDragging,
|
|
}"
|
|
>
|
|
<BasicIcon
|
|
:icon="supportIcon"
|
|
size="18"
|
|
:color="supportAccentColor"
|
|
class="shrink-0"
|
|
/>
|
|
<span class="whitespace-nowrap">پشتیبانی</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>
|
|
|
|
<SupportMessengerPicker
|
|
v-model:open="supportPickerOpen"
|
|
:entries="supportMessengerEntries"
|
|
:anchor-el="pickerAnchorEl"
|
|
@select="openMessengerEntry"
|
|
/>
|
|
|
|
<VersionUpdateModal />
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import {computed, defineAsyncComponent, onMounted, ref, watch} from 'vue'
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|
import {useConfigStore} from "@/store/configStore";
|
|
import {getProjectFontFamily, getProjectSplashBackground, getProjectSplashLogo, getProjectBrandRed, getProjectPrimaryColor, 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 { useSupportMessenger } from '@/composables/useSupportMessenger'
|
|
import { loadSupportMessengerFromSettings } from '@/utils/supportMessenger'
|
|
import { useDraggableFloatingButton } from '@/utils/useDraggableFloatingButton'
|
|
import AppCreditLink from '@/components/AppCreditLink.vue'
|
|
import SupportMessengerPicker from '@/components/SupportMessengerPicker.vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { recoverMobileViewportAfterAuth } from '@/layouts/composables/useMobileScrollReset'
|
|
|
|
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
|
|
})
|
|
|
|
const config = useConfigStore()
|
|
const showSplash = ref(true)
|
|
const popVisible = ref(false)
|
|
|
|
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(() => {
|
|
const accent = messengerMeta.value.accent
|
|
if (accent !== '#334155') return accent
|
|
return config.config?.color || accent
|
|
})
|
|
|
|
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() {
|
|
void openSupportMessenger(supportButtonEl.value)
|
|
}
|
|
|
|
function handleSupportPointerUp(event: PointerEvent) {
|
|
const clicked = supportPointerUp(event)
|
|
if (!clicked) return
|
|
event.stopPropagation()
|
|
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) {
|
|
const splashBg = getProjectSplashBackground()
|
|
document.documentElement.style.backgroundColor = splashBg
|
|
document.body.style.backgroundColor = splashBg
|
|
return
|
|
}
|
|
resetAppSurfaceBackground()
|
|
void import('@/utils/safeAreaInsets').then(({ syncSafeAreaInsets }) => {
|
|
syncSafeAreaInsets()
|
|
})
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
watch(
|
|
() => route.name,
|
|
(toName, fromName) => {
|
|
if (isDesktop.value) return
|
|
if (fromName === 'login' || toName === 'home') {
|
|
recoverMobileViewportAfterAuth()
|
|
}
|
|
},
|
|
{ flush: 'post' },
|
|
)
|
|
|
|
</script>
|
|
|
|
<style lang="less">
|
|
/* ارتفاع نوار اعتبار + safe-area؛ منوی پایین با bottom: var(--app-credit-footer-offset) بالاتر از این نوار مینشیند */
|
|
:root {
|
|
--app-credit-bar-inner: 28px;
|
|
/* constant برای iOS قدیمی؛ env باید مستقیم هم در مصرفکنندهها تکرار شود */
|
|
--app-safe-top: 0px;
|
|
--app-safe-top: constant(safe-area-inset-top);
|
|
--app-safe-top: env(safe-area-inset-top, 0px);
|
|
--app-safe-bottom: 0px;
|
|
--app-safe-bottom: constant(safe-area-inset-bottom);
|
|
--app-safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
--app-home-header-offset: calc(4.25rem + var(--app-safe-top));
|
|
--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;
|
|
/* زیر لایه دراپداون اینت (99999) تا تقویم/سلکت داخل مدال روی آن باز شود */
|
|
--app-z-modal: 5500;
|
|
--app-z-support-picker: 5600;
|
|
--app-z-support-fab-open: 5615;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* toast اعلانهای اپ باید بالای نوار اعتبار باشد */
|
|
.ant-notification .app-notif-toast,
|
|
.app-notif-toast {
|
|
z-index: 1000001 !important;
|
|
}
|
|
|
|
.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: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
padding: 4px 4px;
|
|
color: #9ca3af;
|
|
font-size: 11px;
|
|
line-height: 1.35;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
|
|
.app-credit-link__text {
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.app-credit-link__logo {
|
|
height: 15px;
|
|
max-width: 68px;
|
|
flex-shrink: 0;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
&--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.55);
|
|
|
|
.app-credit-link__logo {
|
|
filter: brightness(1.2);
|
|
opacity: 0.85;
|
|
}
|
|
|
|
&:hover {
|
|
color: rgba(255, 255, 255, 0.85);
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
/* جای draggable از fabStyle میآید */
|
|
}
|
|
|
|
@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>
|