11/**
2- * HumanOS - 最小化版本
3- * 先确保首页正常显示,再逐步添加引导动画
2+ * HumanOS - 直接显示首页版本
3+ * 底层做好后,再加启动动画
44 */
55
6- import { useState , useEffect } from 'react'
76import { Routes , Route } from 'react-router-dom'
87import Layout from '@components/Layout'
98import Home from '@pages/Home'
@@ -13,68 +12,7 @@ import Dashboard from '@pages/Dashboard'
1312import About from '@pages/About'
1413import NotFound from '@pages/NotFound'
1514
16- // 简单的启动屏组件
17- function SimpleSplash ( { onComplete } : { onComplete : ( ) => void } ) {
18- const [ progress , setProgress ] = useState ( 0 )
19-
20- useEffect ( ( ) => {
21- // 2秒后自动进入首页
22- const timer = setTimeout ( ( ) => {
23- onComplete ( )
24- } , 2000 )
25- return ( ) => clearTimeout ( timer )
26- } , [ onComplete ] )
27-
28- return (
29- < div className = "fixed inset-0 bg-slate-950 flex flex-col items-center justify-center z-[100]" >
30- < div className = "text-center" >
31- { /* Logo 动画 */ }
32- < div className = "w-20 h-20 mx-auto mb-8 rounded-2xl bg-gradient-to-br from-violet-500 via-pink-500 to-orange-500 animate-pulse" />
33-
34- { /* 文字 */ }
35- < h1 className = "text-3xl font-bold text-gradient mb-4" > HumanOS</ h1 >
36- < p className = "text-white/50 text-sm" > 正在加载...</ p >
37- </ div >
38- </ div >
39- )
40- }
41-
4215export default function App ( ) {
43- const [ isLoading , setIsLoading ] = useState ( true )
44- const [ showSplash , setShowSplash ] = useState ( true )
45-
46- // 检查是否首次访问
47- useEffect ( ( ) => {
48- const hasVisited = localStorage . getItem ( 'human-os-visited' )
49- if ( hasVisited ) {
50- // 曾访问过,直接进入
51- setShowSplash ( false )
52- } else {
53- // 首次访问,标记已访问
54- localStorage . setItem ( 'human-os-visited' , 'true' )
55- }
56- } , [ ] )
57-
58- // 处理启动屏完成
59- const handleSplashComplete = ( ) => {
60- setShowSplash ( false )
61- }
62-
63- // 加载中
64- if ( isLoading ) {
65- return (
66- < div className = "fixed inset-0 bg-slate-950 flex items-center justify-center" >
67- < div className = "w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-pink-500 animate-pulse" />
68- </ div >
69- )
70- }
71-
72- // 启动屏阶段
73- if ( showSplash ) {
74- return < SimpleSplash onComplete = { handleSplashComplete } />
75- }
76-
77- // 正常显示应用
7816 return (
7917 < Layout >
8018 < Routes >
0 commit comments