feat: 已登陆状态加载个人中心

src/components/Atoms/PageLoadingSpinner.js

@@ -0,0 +1,56 @@
+// src/components/Atoms/PageLoadingSpinner.js
+// 页面加载状态组件 - 用于路由懒加载、数据加载等场景
+
+import React from 'react';
+import { Center, Spinner, Text, VStack } from '@chakra-ui/react';
+
+/**
+ * 页面加载状态组件
+ *
+ * @param {Object} props - 组件属性
+ * @param {string} [props.message='加载中...'] - 加载提示文本
+ * @param {string} [props.height='60vh'] - 容器高度
+ * @param {string} [props.spinnerSize='xl'] - Spinner 大小
+ * @param {string} [props.spinnerColor='blue.500'] - Spinner 颜色
+ * @param {boolean} [props.showText=true] - 是否显示文本提示
+ *
+ * @example
+ * // 基础使用
+ * <PageLoadingSpinner />
+ *
+ * @example
+ * // 自定义提示文本
+ * <PageLoadingSpinner message="加载个人中心..." />
+ *
+ * @example
+ * // 用作 Suspense fallback
+ * <Suspense fallback={<PageLoadingSpinner message="加载组件..." />}>
+ *   <LazyComponent />
+ * </Suspense>
+ */
+export default function PageLoadingSpinner({
+  message = '加载中...',
+  height = '60vh',
+  spinnerSize = 'xl',
+  spinnerColor = 'blue.500',
+  showText = true,
+}) {
+  return (
+    <Center h={height} role="status" aria-live="polite" aria-label={message}>
+      <VStack spacing={4}>
+        <Spinner
+          size={spinnerSize}
+          color={spinnerColor}
+          thickness="4px"
+          emptyColor="gray.200"
+          speed="0.65s"
+        />
+        {showText && (
+          <Text color="gray.500" fontSize="md">
+            {message}
+          </Text>
+        )}
+      </VStack>
+    </Center>
+  );
+}

src/routes/homeRoutes.js

@@ -14,10 +14,12 @@ import { PROTECTION_MODES } from './constants/protectionModes';
  * - 这些路由将通过 Outlet 渲染到父路由中
  */
 export const homeRoutes = [
-    // 首页 - /home
+    // 首页 - /home（智能路由：根据登录状态自动切换）
+    // 未登录 → 显示营销首页（HomePage）
+    // 已登录 → 显示个人中心（CenterDashboard）
     {
         path: '',
-        component: lazyComponents.HomePage,
+        component: lazyComponents.SmartHomePage,
         protection: PROTECTION_MODES.PUBLIC,
         meta: {
             title: '首页',
@@ -25,17 +27,6 @@ export const homeRoutes = [
         }
     },
 
-    // 个人中心 - /home/center
-    {
-        path: 'center',
-        component: lazyComponents.CenterDashboard,
-        protection: PROTECTION_MODES.MODAL,
-        meta: {
-            title: '个人中心',
-            description: '用户个人中心'
-        }
-    },
-
     // 个人资料 - /home/profile
     {
         path: 'profile',

src/routes/lazy-components.js

@@ -10,6 +10,7 @@ import React from 'react';
 export const lazyComponents = {
     // Home 模块
     HomePage: React.lazy(() => import('../views/Home/HomePage')),
+    SmartHomePage: React.lazy(() => import('../views/Home/SmartHomePage')), // 智能首页（根据登录状态切换）
     CenterDashboard: React.lazy(() => import('../views/Dashboard/Center')),
     ProfilePage: React.lazy(() => import('../views/Profile')),
     SettingsPage: React.lazy(() => import('../views/Settings/SettingsPage')),
@@ -53,6 +54,7 @@ export const lazyComponents = {
  */
 export const {
     HomePage,
+    SmartHomePage,
     CenterDashboard,
     ProfilePage,
     SettingsPage,

src/views/Home/SmartHomePage.js

@@ -0,0 +1,33 @@
+// src/views/Home/SmartHomePage.js
+// 智能首页包装器：根据登录状态自动切换显示内容
+
+import React, { Suspense } from 'react';
+import { useAuth } from '../../contexts/AuthContext';
+import PageLoadingSpinner from '../../components/Atoms/PageLoadingSpinner';
+
+// 🚀 两个页面都使用懒加载，优化初始包体积
+const HomePage = React.lazy(() => import('./HomePage'));
+const CenterDashboard = React.lazy(() => import('../Dashboard/Center'));
+
+/**
+ * 智能首页组件
+ *
+ * 功能：
+ * - 未登录用户 → 显示营销首页（HomePage）
+ * - 已登录用户 → 显示个人中心（CenterDashboard）
+ */
+export default function SmartHomePage() {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  // 等待认证状态加载完成
+  if (isLoading) {
+    return <PageLoadingSpinner message="加载中..." />;
+  }
+
+  // 🎯 统一使用 Suspense 包装，根据登录状态渲染不同组件
+  return (
+    <Suspense fallback={<PageLoadingSpinner  message='加载首页...'  />}>
+      {isAuthenticated ? <CenterDashboard /> : <HomePage />}
+    </Suspense>
+  );
+}