376 lines
8.9 KiB
Vue
376 lines
8.9 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { computed, ref, watch } from 'vue'
|
|||
|
|
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
|
|||
|
|
import {
|
|||
|
|
PWA_GUIDE_STEP_LABELS,
|
|||
|
|
PWA_INSTALL_GUIDE,
|
|||
|
|
type PwaPlatform,
|
|||
|
|
} from '@/modules/pwa/pwaInstallGuideSteps'
|
|||
|
|
import { getDefaultPwaPlatform } from '@/modules/pwa/pwaInstall'
|
|||
|
|
import PwaInstallStepIllustration from '@/components/pwa/PwaInstallStepIllustration.vue'
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
open: boolean
|
|||
|
|
platform?: PwaPlatform
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
'update:open': [value: boolean]
|
|||
|
|
complete: []
|
|||
|
|
close: []
|
|||
|
|
}>()
|
|||
|
|
|
|||
|
|
const activePlatform = ref<PwaPlatform>(props.platform ?? getDefaultPwaPlatform())
|
|||
|
|
const stepIndex = ref(0)
|
|||
|
|
|
|||
|
|
const guide = computed(() => PWA_INSTALL_GUIDE[activePlatform.value])
|
|||
|
|
const currentStep = computed(() => guide.value.steps[stepIndex.value])
|
|||
|
|
const totalSteps = computed(() => guide.value.steps.length)
|
|||
|
|
const isFirstStep = computed(() => stepIndex.value === 0)
|
|||
|
|
const isLastStep = computed(() => stepIndex.value === totalSteps.value - 1)
|
|||
|
|
const stepLabel = computed(() => PWA_GUIDE_STEP_LABELS[stepIndex.value] ?? String(stepIndex.value + 1))
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.open,
|
|||
|
|
(visible) => {
|
|||
|
|
if (!visible) return
|
|||
|
|
activePlatform.value = props.platform ?? getDefaultPwaPlatform()
|
|||
|
|
stepIndex.value = 0
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.platform,
|
|||
|
|
(value) => {
|
|||
|
|
if (value) activePlatform.value = value
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
function close() {
|
|||
|
|
emit('update:open', false)
|
|||
|
|
emit('close')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function selectPlatform(next: PwaPlatform) {
|
|||
|
|
if (activePlatform.value === next) return
|
|||
|
|
activePlatform.value = next
|
|||
|
|
stepIndex.value = 0
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function goNext() {
|
|||
|
|
if (isLastStep.value) {
|
|||
|
|
emit('complete')
|
|||
|
|
close()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
stepIndex.value += 1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function goPrev() {
|
|||
|
|
if (isFirstStep.value) return
|
|||
|
|
stepIndex.value -= 1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function completeGuide() {
|
|||
|
|
emit('complete')
|
|||
|
|
close()
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<Teleport to="body">
|
|||
|
|
<div
|
|||
|
|
v-if="open"
|
|||
|
|
class="pwa-install-guide"
|
|||
|
|
role="dialog"
|
|||
|
|
aria-modal="true"
|
|||
|
|
aria-labelledby="pwa-install-guide-title"
|
|||
|
|
@click.self="close"
|
|||
|
|
>
|
|||
|
|
<div class="pwa-install-guide__card">
|
|||
|
|
<div class="pwa-install-guide__tabs">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="pwa-install-guide__tab"
|
|||
|
|
:class="{ 'pwa-install-guide__tab--active': activePlatform === 'ios' }"
|
|||
|
|
@click="selectPlatform('ios')"
|
|||
|
|
>
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|||
|
|
<rect x="7" y="2" width="10" height="20" rx="2.5" stroke="currentColor" stroke-width="1.5" />
|
|||
|
|
<circle cx="12" cy="18.5" r="1" fill="currentColor" />
|
|||
|
|
</svg>
|
|||
|
|
<span>آیفون</span>
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="pwa-install-guide__tab"
|
|||
|
|
:class="{ 'pwa-install-guide__tab--active': activePlatform === 'android' }"
|
|||
|
|
@click="selectPlatform('android')"
|
|||
|
|
>
|
|||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|||
|
|
<path d="M12 4v12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|||
|
|
<path d="M8.5 8.5 12 5l3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|||
|
|
<path d="M6 16h12v3a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-3Z" stroke="currentColor" stroke-width="1.5" />
|
|||
|
|
</svg>
|
|||
|
|
<span>اندروید</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pwa-install-guide__header">
|
|||
|
|
<span class="pwa-install-guide__progress">
|
|||
|
|
مرحله {{ stepLabel }} از {{ PWA_GUIDE_STEP_LABELS.length }}
|
|||
|
|
</span>
|
|||
|
|
<h2 id="pwa-install-guide-title" class="pwa-install-guide__title">
|
|||
|
|
{{ guide.title }}
|
|||
|
|
</h2>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pwa-install-guide__content">
|
|||
|
|
<span class="pwa-install-guide__badge">{{ stepLabel }}</span>
|
|||
|
|
|
|||
|
|
<PwaInstallStepIllustration :type="currentStep.illustration" />
|
|||
|
|
|
|||
|
|
<p class="pwa-install-guide__text">{{ currentStep.text }}</p>
|
|||
|
|
<p v-if="currentStep.hint" class="pwa-install-guide__hint">{{ currentStep.hint }}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="pwa-install-guide__nav">
|
|||
|
|
<template v-if="isLastStep">
|
|||
|
|
<BasicButton class="pwa-install-guide__primary" type="primary" @click="completeGuide">
|
|||
|
|
متوجه شدم
|
|||
|
|
</BasicButton>
|
|||
|
|
</template>
|
|||
|
|
<template v-else>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="pwa-install-guide__nav-btn"
|
|||
|
|
:disabled="isFirstStep"
|
|||
|
|
aria-label="مرحله قبل"
|
|||
|
|
@click="goPrev"
|
|||
|
|
>
|
|||
|
|
‹
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="pwa-install-guide__dots" aria-hidden="true">
|
|||
|
|
<span
|
|||
|
|
v-for="(_, index) in totalSteps"
|
|||
|
|
:key="index"
|
|||
|
|
class="pwa-install-guide__dot"
|
|||
|
|
:class="{ 'pwa-install-guide__dot--active': index === stepIndex }"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
class="pwa-install-guide__nav-btn"
|
|||
|
|
aria-label="مرحله بعد"
|
|||
|
|
@click="goNext"
|
|||
|
|
>
|
|||
|
|
›
|
|||
|
|
</button>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<template v-if="!isLastStep">
|
|||
|
|
<BasicButton class="pwa-install-guide__primary" type="primary" @click="goNext">
|
|||
|
|
بعدی
|
|||
|
|
<span class="pwa-install-guide__primary-chevron">›</span>
|
|||
|
|
</BasicButton>
|
|||
|
|
|
|||
|
|
<button type="button" class="pwa-install-guide__close" @click="close">
|
|||
|
|
بستن
|
|||
|
|
</button>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Teleport>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.pwa-install-guide {
|
|||
|
|
position: fixed;
|
|||
|
|
inset: 0;
|
|||
|
|
z-index: var(--app-z-modal, 5500);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 16px;
|
|||
|
|
background: rgba(15, 23, 42, 0.45);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__card {
|
|||
|
|
width: min(100%, 360px);
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 24px;
|
|||
|
|
padding: 14px 16px 18px;
|
|||
|
|
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__tabs {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: 1fr 1fr;
|
|||
|
|
gap: 4px;
|
|||
|
|
padding: 4px;
|
|||
|
|
border-radius: 14px;
|
|||
|
|
background: #f1f5f9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__tab {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 10px 8px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #64748b;
|
|||
|
|
background: transparent;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
|
|||
|
|
|
|||
|
|
&--active {
|
|||
|
|
color: #0f172a;
|
|||
|
|
background: #fff;
|
|||
|
|
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin: 14px 2px 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__progress {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #94a3b8;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__title {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: #0f172a;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__content {
|
|||
|
|
position: relative;
|
|||
|
|
border: 1px solid #e2e8f0;
|
|||
|
|
border-radius: 18px;
|
|||
|
|
background: #f8fafc;
|
|||
|
|
padding: 14px 14px 16px;
|
|||
|
|
min-height: 280px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__badge {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 12px;
|
|||
|
|
right: 12px;
|
|||
|
|
width: 28px;
|
|||
|
|
height: 28px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background: #2563eb;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 13px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__text {
|
|||
|
|
margin: 10px 0 0;
|
|||
|
|
font-size: 13px;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
color: #334155;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__hint {
|
|||
|
|
margin: 8px 0 0;
|
|||
|
|
font-size: 11px;
|
|||
|
|
line-height: 1.7;
|
|||
|
|
color: #64748b;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__nav {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin: 14px 0 12px;
|
|||
|
|
|
|||
|
|
.pwa-install-guide__primary {
|
|||
|
|
width: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__nav-btn {
|
|||
|
|
width: 34px;
|
|||
|
|
height: 34px;
|
|||
|
|
border: 1px solid #e2e8f0;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background: #fff;
|
|||
|
|
color: #334155;
|
|||
|
|
font-size: 20px;
|
|||
|
|
line-height: 1;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
&:disabled {
|
|||
|
|
opacity: 0.35;
|
|||
|
|
cursor: not-allowed;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__dots {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__dot {
|
|||
|
|
width: 7px;
|
|||
|
|
height: 7px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background: #cbd5e1;
|
|||
|
|
transition: width 0.15s ease, background 0.15s ease;
|
|||
|
|
|
|||
|
|
&--active {
|
|||
|
|
width: 22px;
|
|||
|
|
background: #2563eb;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__primary {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 44px;
|
|||
|
|
border-radius: 14px !important;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__primary-chevron {
|
|||
|
|
margin-right: 4px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pwa-install-guide__close {
|
|||
|
|
display: block;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
border: none;
|
|||
|
|
background: transparent;
|
|||
|
|
color: #64748b;
|
|||
|
|
font-size: 13px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
</style>
|