119 lines
5.0 KiB
JavaScript
119 lines
5.0 KiB
JavaScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useAppStore } from '../store/useAppStore';
|
|
import { useI18n } from '../lib/useI18n';
|
|
|
|
export default function WelcomeModal() {
|
|
const { language, setLanguage, visualTheme, setVisualTheme } = useAppStore();
|
|
const { t } = useI18n();
|
|
const [step, setStep] = useState(1);
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
if (!language || !visualTheme) {
|
|
setIsVisible(true);
|
|
if (!language) {
|
|
setStep(1);
|
|
} else {
|
|
setStep(2);
|
|
}
|
|
}
|
|
}, [language, visualTheme]);
|
|
|
|
if (!mounted || !isVisible) return null;
|
|
|
|
const handleSelectLang = (lang) => {
|
|
setLanguage(lang);
|
|
setStep(2);
|
|
};
|
|
|
|
const handleSelectTheme = (theme) => {
|
|
setVisualTheme(theme);
|
|
// Apply theme to document element immediately for preview
|
|
document.documentElement.setAttribute('data-visual', theme);
|
|
};
|
|
|
|
const handleStart = () => {
|
|
if (!visualTheme) {
|
|
handleSelectTheme('warm');
|
|
}
|
|
setIsVisible(false);
|
|
if (!localStorage.getItem('author-onboarding-done')) {
|
|
useAppStore.getState().setStartTour(true);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="welcome-modal-overlay">
|
|
<div className={`welcome-modal-container ${step === 2 ? 'step-2' : ''}`}>
|
|
{/* Step 1: Language */}
|
|
{step === 1 && (
|
|
<div className="welcome-step fadeIn">
|
|
<h1 className="welcome-title">Welcome / 欢迎 / Добро пожаловать</h1>
|
|
<div className="welcome-lang-grid">
|
|
<button className="welcome-card" onClick={() => handleSelectLang('en')}>
|
|
<span className="welcome-icon">🇬🇧</span>
|
|
<span className="welcome-label">English</span>
|
|
</button>
|
|
<button className="welcome-card" onClick={() => handleSelectLang('zh')}>
|
|
<span className="welcome-icon">🇨🇳</span>
|
|
<span className="welcome-label">简体中文</span>
|
|
</button>
|
|
<button className="welcome-card" onClick={() => handleSelectLang('ru')}>
|
|
<span className="welcome-icon">🇷🇺</span>
|
|
<span className="welcome-label">Русский</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Step 2: Theme */}
|
|
{step === 2 && (
|
|
<div className="welcome-step fadeIn">
|
|
<h1 className="welcome-title" style={{ marginBottom: 8 }}>{t('welcome.title')}</h1>
|
|
<p className="welcome-subtitle" style={{ marginBottom: 32 }}>{t('welcome.subtitle')}</p>
|
|
|
|
<h3 className="welcome-section-title">{t('welcome.selectTheme')}</h3>
|
|
<div className="welcome-theme-grid">
|
|
<button
|
|
className={`welcome-card theme-card ${visualTheme === 'warm' ? 'active' : ''}`}
|
|
onClick={() => handleSelectTheme('warm')}
|
|
>
|
|
<div className="theme-preview warm-preview"></div>
|
|
<div className="theme-info">
|
|
<h4>{t('welcome.themeWarm.name')}</h4>
|
|
<p>{t('welcome.themeWarm.desc')}</p>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
className={`welcome-card theme-card ${visualTheme === 'modern' ? 'active' : ''}`}
|
|
onClick={() => handleSelectTheme('modern')}
|
|
>
|
|
<div className="theme-preview modern-preview"></div>
|
|
<div className="theme-info">
|
|
<h4>{t('welcome.themeModern.name')}</h4>
|
|
<p>{t('welcome.themeModern.desc')}</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="welcome-actions">
|
|
<button
|
|
className="btn btn-primary btn-large welcome-start-btn"
|
|
onClick={handleStart}
|
|
disabled={!visualTheme}
|
|
>
|
|
{t('welcome.startBtn')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|