152 lines
4.4 KiB
React
152 lines
4.4 KiB
React
import { useEffect } from 'react';
|
|
import { BrowserRouter, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import { Background } from './components/layout';
|
|
import Loader from './components/Loader';
|
|
import LoginPage from './pages/LoginPage';
|
|
import OnboardingPage from './pages/OnboardingPage';
|
|
import DashboardPage from './pages/DashboardPage';
|
|
import useStore from './store/useStore';
|
|
|
|
/**
|
|
* 路由守卫组件
|
|
* 根据登录状态和注册完成状态进行路由重定向
|
|
* - requireAuth: 需要登录才能访问
|
|
* - requireOnboarding: 需要完成入站流程才能访问
|
|
*/
|
|
const ProtectedRoute = ({ children, requireAuth = false, requireOnboarding = false }) => {
|
|
const { isLoggedIn, registrationData } = useStore();
|
|
const navigate = useNavigate();
|
|
const hasToken = !!localStorage.getItem('access_token');
|
|
|
|
// 检查是否完成入站流程（有昵称和未来愿景即视为已完成）
|
|
const hasCompletedOnboarding = !!(registrationData.nickname && registrationData.future?.vision);
|
|
|
|
useEffect(() => {
|
|
if (requireAuth && (!isLoggedIn || !hasToken)) {
|
|
navigate('/', { replace: true });
|
|
} else if (requireOnboarding && !hasCompletedOnboarding) {
|
|
navigate('/onboarding', { replace: true });
|
|
}
|
|
}, [isLoggedIn, hasCompletedOnboarding, requireAuth, requireOnboarding, hasToken, navigate]);
|
|
|
|
if (requireAuth && (!isLoggedIn || !hasToken)) {
|
|
return <Loader text="正在验证身份..." />;
|
|
}
|
|
|
|
if (requireOnboarding && !hasCompletedOnboarding) {
|
|
return <Loader text="正在加载..." />;
|
|
}
|
|
|
|
return children;
|
|
};
|
|
|
|
/**
|
|
* 页面过渡动画包装器
|
|
*/
|
|
const PageTransition = ({ children }) => {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -20 }}
|
|
transition={{
|
|
duration: 0.4,
|
|
ease: [0.25, 0.46, 0.45, 0.94]
|
|
}}
|
|
className="w-full h-full"
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* 动画路由组件
|
|
*/
|
|
const AnimatedRoutes = () => {
|
|
const location = useLocation();
|
|
const { isLoggedIn, registrationData } = useStore();
|
|
const hasToken = !!localStorage.getItem('access_token');
|
|
|
|
// 检查是否完成入站流程（有昵称和未来愿景即视为已完成）
|
|
const hasCompletedOnboarding = !!(registrationData.nickname && registrationData.future?.vision);
|
|
|
|
return (
|
|
<AnimatePresence mode="wait">
|
|
<Routes location={location} key={location.pathname}>
|
|
{/* 登录页 */}
|
|
<Route
|
|
path="/"
|
|
element={
|
|
(isLoggedIn && hasToken) ? (
|
|
hasCompletedOnboarding ? (
|
|
<Navigate to="/dashboard" replace />
|
|
) : (
|
|
<Navigate to="/onboarding" replace />
|
|
)
|
|
) : (
|
|
<PageTransition>
|
|
<LoginPage />
|
|
</PageTransition>
|
|
)
|
|
}
|
|
/>
|
|
|
|
{/* 入站流程页 - 已完成入站的用户直接跳转到首页 */}
|
|
<Route
|
|
path="/onboarding"
|
|
element={
|
|
!isLoggedIn ? (
|
|
<Navigate to="/" replace />
|
|
) : hasCompletedOnboarding ? (
|
|
<Navigate to="/dashboard" replace />
|
|
) : (
|
|
<PageTransition>
|
|
<OnboardingPage />
|
|
</PageTransition>
|
|
)
|
|
}
|
|
/>
|
|
|
|
{/* 仪表盘页 */}
|
|
<Route
|
|
path="/dashboard"
|
|
element={
|
|
<ProtectedRoute requireAuth requireOnboarding>
|
|
<PageTransition>
|
|
<DashboardPage />
|
|
</PageTransition>
|
|
</ProtectedRoute>
|
|
}
|
|
/>
|
|
|
|
{/* 404 重定向 */}
|
|
<Route path="*" element={<Navigate to="/" replace />} />
|
|
</Routes>
|
|
</AnimatePresence>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* App 主组件
|
|
*/
|
|
function App() {
|
|
// 使用 Vite 的 BASE_URL 并移除末尾斜杠，确保 BrowserRouter basename 兼容
|
|
const basename = (import.meta.env.BASE_URL || '/').replace(/\/$/, '');
|
|
|
|
return (
|
|
<BrowserRouter basename={basename}>
|
|
{/* 动态背景 */}
|
|
<Background />
|
|
|
|
{/* 主容器 */}
|
|
<main className="relative z-10 h-screen flex flex-col items-center justify-center p-4 md:p-8 overflow-hidden">
|
|
<AnimatedRoutes />
|
|
</main>
|
|
</BrowserRouter>
|
|
);
|
|
}
|
|
|
|
export default App;
|