mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-03 11:20:50 +08:00
feat(dashboard): add dashboard page with stats and splash screen
This commit is contained in:
40
src/components/common/SplashScreen.tsx
Normal file
40
src/components/common/SplashScreen.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
|
||||
import './SplashScreen.scss';
|
||||
|
||||
interface SplashScreenProps {
|
||||
onFinish: () => void;
|
||||
duration?: number;
|
||||
}
|
||||
|
||||
export function SplashScreen({ onFinish, duration = 1500 }: SplashScreenProps) {
|
||||
const [fadeOut, setFadeOut] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fadeTimer = setTimeout(() => {
|
||||
setFadeOut(true);
|
||||
}, duration - 400);
|
||||
|
||||
const finishTimer = setTimeout(() => {
|
||||
onFinish();
|
||||
}, duration);
|
||||
|
||||
return () => {
|
||||
clearTimeout(fadeTimer);
|
||||
clearTimeout(finishTimer);
|
||||
};
|
||||
}, [duration, onFinish]);
|
||||
|
||||
return (
|
||||
<div className={`splash-screen ${fadeOut ? 'fade-out' : ''}`}>
|
||||
<div className="splash-content">
|
||||
<img src={INLINE_LOGO_JPEG} alt="CPAMC" className="splash-logo" />
|
||||
<h1 className="splash-title">CLI Proxy API</h1>
|
||||
<p className="splash-subtitle">Management Center</p>
|
||||
<div className="splash-loader">
|
||||
<div className="splash-loader-bar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user