feat(mobile): add onboarding tour for voting page

- Add OnboardingTour component with step-by-step guidance
- Add useOnboarding composable for state management
- Reset onboarding on logout for re-viewing
- 4 steps: welcome, award selection, program voting, progress

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
empty
2026-02-03 23:09:02 +08:00
parent eee34916b0
commit 65b153e5df
4 changed files with 511 additions and 3 deletions

View File

@@ -0,0 +1,64 @@
import { ref, computed } from 'vue';
export interface TourStep {
target?: string;
title?: string;
content: string;
position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
}
const STORAGE_KEY = 'gala_onboarding_completed';
// Shared state across components
const isCompleted = ref(localStorage.getItem(STORAGE_KEY) === 'true');
const showTour = ref(false);
const currentStep = ref(0);
export function useOnboarding() {
const shouldShowTour = computed(() => !isCompleted.value);
function start() {
if (isCompleted.value) return;
currentStep.value = 0;
showTour.value = true;
}
function next() {
currentStep.value++;
}
function prev() {
if (currentStep.value > 0) {
currentStep.value--;
}
}
function skip() {
complete();
}
function complete() {
showTour.value = false;
isCompleted.value = true;
localStorage.setItem(STORAGE_KEY, 'true');
}
function reset() {
localStorage.removeItem(STORAGE_KEY);
isCompleted.value = false;
currentStep.value = 0;
}
return {
isCompleted,
showTour,
currentStep,
shouldShowTour,
start,
next,
prev,
skip,
complete,
reset,
};
}