mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-19 03:00:49 +08:00
feat(login): add auto-login splash UI and simplify app startup
This commit is contained in:
39
src/App.tsx
39
src/App.tsx
@@ -1,33 +1,21 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { HashRouter, Route, Routes } from 'react-router-dom';
|
||||
import { LoginPage } from '@/pages/LoginPage';
|
||||
import { NotificationContainer } from '@/components/common/NotificationContainer';
|
||||
import { ConfirmationModal } from '@/components/common/ConfirmationModal';
|
||||
import { SplashScreen } from '@/components/common/SplashScreen';
|
||||
import { MainLayout } from '@/components/layout/MainLayout';
|
||||
import { ProtectedRoute } from '@/router/ProtectedRoute';
|
||||
import { useAuthStore, useLanguageStore, useThemeStore } from '@/stores';
|
||||
|
||||
const SPLASH_DURATION = 1500;
|
||||
const SPLASH_FADE_DURATION = 400;
|
||||
import { useLanguageStore, useThemeStore } from '@/stores';
|
||||
|
||||
function App() {
|
||||
const initializeTheme = useThemeStore((state) => state.initializeTheme);
|
||||
const language = useLanguageStore((state) => state.language);
|
||||
const setLanguage = useLanguageStore((state) => state.setLanguage);
|
||||
const restoreSession = useAuthStore((state) => state.restoreSession);
|
||||
|
||||
const [splashReadyToFade, setSplashReadyToFade] = useState(false);
|
||||
const [showSplash, setShowSplash] = useState(true);
|
||||
const [authReady, setAuthReady] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const cleanupTheme = initializeTheme();
|
||||
void restoreSession().finally(() => {
|
||||
setAuthReady(true);
|
||||
});
|
||||
return cleanupTheme;
|
||||
}, [initializeTheme, restoreSession]);
|
||||
}, [initializeTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
setLanguage(language);
|
||||
@@ -38,27 +26,6 @@ function App() {
|
||||
document.documentElement.lang = language;
|
||||
}, [language]);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setSplashReadyToFade(true);
|
||||
}, SPLASH_DURATION - SPLASH_FADE_DURATION);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const handleSplashFinish = useCallback(() => {
|
||||
setShowSplash(false);
|
||||
}, []);
|
||||
|
||||
if (showSplash) {
|
||||
return (
|
||||
<SplashScreen
|
||||
fadeOut={splashReadyToFade && authReady}
|
||||
onFinish={handleSplashFinish}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<HashRouter>
|
||||
<NotificationContainer />
|
||||
|
||||
Reference in New Issue
Block a user