feat: add tour store for guided walkthrough state

This commit is contained in:
Your Name
2026-02-20 09:36:26 +02:00
parent 78026c8bf0
commit a3c0d43f67

74
src/stores/tour.ts Normal file
View File

@@ -0,0 +1,74 @@
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export interface TourStep {
target: string
title: string
content: string
placement?: 'top' | 'bottom' | 'left' | 'right'
}
export interface TourDefinition {
id: string
route: string
steps: TourStep[]
}
export const useTourStore = defineStore('tour', () => {
const activeTourId = ref<string | null>(null)
const currentStepIndex = ref(0)
const activeTour = ref<TourDefinition | null>(null)
const isActive = computed(() => activeTourId.value !== null)
const currentStep = computed(() => {
if (!activeTour.value) return null
return activeTour.value.steps[currentStepIndex.value] || null
})
const totalSteps = computed(() => activeTour.value?.steps.length || 0)
const isFirstStep = computed(() => currentStepIndex.value === 0)
const isLastStep = computed(() => currentStepIndex.value >= totalSteps.value - 1)
function start(tour: TourDefinition) {
activeTourId.value = tour.id
activeTour.value = tour
currentStepIndex.value = 0
}
function next() {
if (!isLastStep.value) {
currentStepIndex.value++
} else {
stop()
}
}
function back() {
if (!isFirstStep.value) {
currentStepIndex.value--
}
}
function stop() {
activeTourId.value = null
activeTour.value = null
currentStepIndex.value = 0
}
return {
activeTourId,
currentStepIndex,
activeTour,
isActive,
currentStep,
totalSteps,
isFirstStep,
isLastStep,
start,
next,
back,
stop,
}
})