fix: 优化应用状态流转和添加背景组件错误处理

- 修复首次访问状态流转逻辑（intro -> splash -> ready）
- 添加 isInitialized 状态防止渲染时序问题
- 为 Background3D 和 ParticleBackground 添加 ErrorFallback 包装
- 确保背景组件错误时使用纯色降级显示
- 移除未使用的 skipToIntro 回调函数

问题修复：
- 修复首次访问后不显示引导页直接进入的问题
- 修复背景组件错误导致白屏问题
- 确保所有状态转换都有正确的 loading 状态

Author: badhope

src/App.tsx

@@ -16,15 +16,18 @@ function App() {
   const location = useLocation()
   const [appState, setAppState] = useState<'intro' | 'splash' | 'ready'>('intro')
   const [isFirstVisit, setIsFirstVisit] = useState<boolean | null>(null)
+  const [isInitialized, setIsInitialized] = useState(false)
 
   useEffect(() => {
     const hasVisited = localStorage.getItem('human-os-visited')
     if (hasVisited) {
       setIsFirstVisit(false)
-      setAppState('ready')
+      setAppState('splash')
     } else {
       setIsFirstVisit(true)
+      setAppState('intro')
     }
+    setIsInitialized(true)
   }, [])
 
   useEffect(() => {
@@ -37,20 +40,15 @@ function App() {
 
   const handleIntroComplete = useCallback(() => {
     localStorage.setItem('human-os-visited', 'true')
+    setIsFirstVisit(false)
     setAppState('splash')
   }, [])
 
   const handleSplashComplete = useCallback(() => {
     setAppState('ready')
   }, [])
 
-  const skipToIntro = useCallback(() => {
-    if (isFirstVisit === false) {
-      setAppState('ready')
-    }
-  }, [isFirstVisit])
-
-  if (isFirstVisit === null) {
+  if (!isInitialized || isFirstVisit === null) {
     return (
       <div className="fixed inset-0 bg-slate-950 flex items-center justify-center">
         <motion.div
@@ -72,7 +70,7 @@ function App() {
   return (
     <>
       <AnimatePresence mode="wait">
-        {appState === 'intro' && isFirstVisit && (
+        {appState === 'intro' && (
           <motion.div
             key="intro"
             initial={{ opacity: 1 }}

src/components/ErrorFallback.tsx

@@ -0,0 +1,40 @@
+import { useState, useEffect, ReactNode } from 'react'
+import { motion } from 'framer-motion'
+
+interface FallbackProps {
+  children: ReactNode
+  fallback: ReactNode
+  onError?: () => void
+}
+
+export default function ErrorFallback({ children, fallback, onError }: FallbackProps) {
+  const [hasError, setHasError] = useState(false)
+
+  useEffect(() => {
+    const handleError = (event: ErrorEvent) => {
+      console.error('Component Error:', event.error)
+      setHasError(true)
+      onError?.()
+    }
+
+    const handleRejection = (event: PromiseRejectionEvent) => {
+      console.error('Unhandled Promise Rejection:', event.reason)
+      setHasError(true)
+      onError?.()
+    }
+
+    window.addEventListener('error', handleError)
+    window.addEventListener('unhandledrejection', handleRejection)
+
+    return () => {
+      window.removeEventListener('error', handleError)
+      window.removeEventListener('unhandledrejection', handleRejection)
+    }
+  }, [onError])
+
+  if (hasError) {
+    return <>{fallback}</>
+  }
+
+  return <>{children}</>
+}

src/components/Layout.tsx

@@ -1,18 +1,31 @@
-import { ReactNode } from 'react'
+import { ReactNode, ComponentType } from 'react'
 import Navbar from './Navbar'
 import Footer from './Footer'
 import Background3D from './Background3D'
 import ParticleBackground from './ParticleBackground'
+import ErrorFallback from './ErrorFallback'
 
 interface LayoutProps {
   children: ReactNode
 }
 
+function Background3DWrapper() {
+  return <Background3D />
+}
+
+function ParticleBackgroundWrapper() {
+  return <ParticleBackground />
+}
+
 export default function Layout({ children }: LayoutProps) {
   return (
     <div className="relative min-h-screen bg-gradient-mesh overflow-hidden">
-      <Background3D />
-      <ParticleBackground />
+      <ErrorFallback fallback={<div className="fixed inset-0 bg-slate-950" />}>
+        <Background3DWrapper />
+      </ErrorFallback>
+      <ErrorFallback fallback={<div className="fixed inset-0 bg-slate-950/50" />}>
+        <ParticleBackgroundWrapper />
+      </ErrorFallback>
       <div className="relative z-10">
         <Navbar />
         <main className="min-h-[calc(100vh-64px-80px)]">