diff --git a/src/components/Navbars/components/NavbarActions/index.js b/src/components/Navbars/components/NavbarActions/index.js index 9032c3fc..23378906 100644 --- a/src/components/Navbars/components/NavbarActions/index.js +++ b/src/components/Navbars/components/NavbarActions/index.js @@ -2,7 +2,7 @@ // Navbar 右侧功能区组件 import React, { memo } from 'react'; -import { HStack, Spinner, IconButton, Box } from '@chakra-ui/react'; +import { HStack, IconButton, Box } from '@chakra-ui/react'; import { HamburgerIcon } from '@chakra-ui/icons'; // import ThemeToggleButton from '../ThemeToggleButton'; // ❌ 已删除 - 不再支持深色模式切换 import LoginButton from '../LoginButton'; @@ -41,9 +41,15 @@ const NavbarActions = memo(({ }) => { return ( - {/* 显示加载状态 */} + {/* 权限校验中 - 显示占位骨架,不显示登录按钮或用户菜单 */} {isLoading ? ( - + ) : isAuthenticated && user ? ( // 已登录状态 - 用户菜单 + 功能菜单排列 diff --git a/src/routes/lazy-components.js b/src/routes/lazy-components.js index b9c31e9e..affeb28a 100644 --- a/src/routes/lazy-components.js +++ b/src/routes/lazy-components.js @@ -9,43 +9,44 @@ import React from 'react'; */ export const lazyComponents = { // Home 模块 - HomePage: React.lazy(() => import('../views/Home/HomePage')), - CenterDashboard: React.lazy(() => import('../views/Dashboard/Center')), - ProfilePage: React.lazy(() => import('../views/Profile')), - SettingsPage: React.lazy(() => import('../views/Settings/SettingsPage')), - Subscription: React.lazy(() => import('../views/Pages/Account/Subscription')), - PrivacyPolicy: React.lazy(() => import('../views/Pages/PrivacyPolicy')), - UserAgreement: React.lazy(() => import('../views/Pages/UserAgreement')), - WechatCallback: React.lazy(() => import('../views/Pages/WechatCallback')), + // 首页使用专用入口组件,内置骨架屏 fallback + HomePage: React.lazy(() => import('@views/Home')), + CenterDashboard: React.lazy(() => import('@views/Dashboard/Center')), + ProfilePage: React.lazy(() => import('@views/Profile')), + SettingsPage: React.lazy(() => import('@views/Settings/SettingsPage')), + Subscription: React.lazy(() => import('@views/Pages/Account/Subscription')), + PrivacyPolicy: React.lazy(() => import('@views/Pages/PrivacyPolicy')), + UserAgreement: React.lazy(() => import('@views/Pages/UserAgreement')), + WechatCallback: React.lazy(() => import('@views/Pages/WechatCallback')), // 社区/内容模块 - Community: React.lazy(() => import('../views/Community')), - ConceptCenter: React.lazy(() => import('../views/Concept')), - StockOverview: React.lazy(() => import('../views/StockOverview')), - LimitAnalyse: React.lazy(() => import('../views/LimitAnalyse')), + Community: React.lazy(() => import('@views/Community')), + ConceptCenter: React.lazy(() => import('@views/Concept')), + StockOverview: React.lazy(() => import('@views/StockOverview')), + LimitAnalyse: React.lazy(() => import('@views/LimitAnalyse')), // 交易模块 - TradingSimulation: React.lazy(() => import('../views/TradingSimulation')), + TradingSimulation: React.lazy(() => import('@views/TradingSimulation')), // 事件模块 - EventDetail: React.lazy(() => import('../views/EventDetail')), + EventDetail: React.lazy(() => import('@views/EventDetail')), // 公司相关模块 - CompanyIndex: React.lazy(() => import('../views/Company')), - ForecastReport: React.lazy(() => import('../views/Company/ForecastReport')), - FinancialPanorama: React.lazy(() => import('../views/Company/FinancialPanorama')), - MarketDataView: React.lazy(() => import('../views/Company/MarketDataView')), + CompanyIndex: React.lazy(() => import('@views/Company')), + ForecastReport: React.lazy(() => import('@views/Company/ForecastReport')), + FinancialPanorama: React.lazy(() => import('@views/Company/FinancialPanorama')), + MarketDataView: React.lazy(() => import('@views/Company/MarketDataView')), // Agent模块 - AgentChat: React.lazy(() => import('../views/AgentChat')), + AgentChat: React.lazy(() => import('@views/AgentChat')), // 价值论坛模块 - ValueForum: React.lazy(() => import('../views/ValueForum')), - ForumPostDetail: React.lazy(() => import('../views/ValueForum/PostDetail')), - PredictionTopicDetail: React.lazy(() => import('../views/ValueForum/PredictionTopicDetail')), + ValueForum: React.lazy(() => import('@views/ValueForum')), + ForumPostDetail: React.lazy(() => import('@views/ValueForum/PostDetail')), + PredictionTopicDetail: React.lazy(() => import('@views/ValueForum/PredictionTopicDetail')), // 数据浏览器模块 - DataBrowser: React.lazy(() => import('../views/DataBrowser')), + DataBrowser: React.lazy(() => import('@views/DataBrowser')), }; /** diff --git a/src/views/Home/components/HomePageSkeleton.tsx b/src/views/Home/components/HomePageSkeleton.tsx index cc90852a..a17b031a 100644 --- a/src/views/Home/components/HomePageSkeleton.tsx +++ b/src/views/Home/components/HomePageSkeleton.tsx @@ -1,8 +1,6 @@ /** * 首页骨架屏组件 - * 模拟首页的 6 个功能卡片布局,减少白屏感知时间 - * - * 使用 Chakra UI 的 Skeleton 组件 + * 匹配首页深色科技风格,减少白屏感知时间 * * @module views/Home/components/HomePageSkeleton */ @@ -15,8 +13,6 @@ import { Skeleton, SkeletonText, VStack, - HStack, - useColorModeValue, } from '@chakra-ui/react'; // ============================================================ @@ -24,163 +20,152 @@ import { // ============================================================ interface HomePageSkeletonProps { - /** 是否显示动画效果 */ - isAnimated?: boolean; /** 骨架屏速度(秒) */ speed?: number; } // ============================================================ -// 单个卡片骨架 +// 单个卡片骨架 - 深色风格 // ============================================================ -const FeatureCardSkeleton: React.FC<{ isFeatured?: boolean }> = ({ isFeatured = false }) => { - const bg = useColorModeValue('white', 'gray.800'); - const borderColor = useColorModeValue('gray.200', 'gray.700'); - +const FeatureCardSkeleton: React.FC<{ isFeatured?: boolean; speed?: number }> = ({ + isFeatured = false, + speed = 0.8, +}) => { return ( {/* 图标骨架 */} {/* 标题骨架 */} - + {/* 描述骨架 */} - - {/* 按钮骨架 */} - - - {/* Featured 徽章骨架 */} - {isFeatured && ( - - )} ); }; +// ============================================================ +// Hero 区域骨架 +// ============================================================ + +const HeroSkeleton: React.FC<{ speed?: number }> = ({ speed = 0.8 }) => { + return ( + + {/* 主标题骨架 */} + + + {/* 副标题骨架 */} + + + ); +}; + // ============================================================ // 主骨架组件 // ============================================================ export const HomePageSkeleton: React.FC = ({ - isAnimated = true, speed = 0.8, }) => { - const containerBg = useColorModeValue('gray.50', 'gray.900'); - return ( - - - {/* 顶部标题区域骨架 */} - - {/* 主标题 */} - + {/* 背景装饰 - 模拟光晕效果 */} + - {/* 副标题 */} - + + + {/* Hero 区域骨架 */} + - {/* CTA 按钮 */} - - - - - + {/* 功能卡片区域骨架 */} + + + {/* 特色功能卡片骨架 */} + + + - {/* 功能卡片网格骨架 */} - - {/* 第一张卡片 - Featured (新闻中心) */} - - - - - {/* 其余 5 张卡片 */} - {[1, 2, 3, 4, 5].map((index) => ( - - ))} - - - {/* 底部装饰元素骨架 */} - - {[1, 2, 3].map((index) => ( - - - - - ))} - + {/* 其他功能卡片骨架 */} + + {[1, 2, 3, 4, 5].map((index) => ( + + ))} + + + diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx new file mode 100644 index 00000000..5a241246 --- /dev/null +++ b/src/views/Home/index.tsx @@ -0,0 +1,26 @@ +/** + * 首页入口组件 + * 使用专用骨架屏作为 Suspense fallback,优化加载体验 + * + * @module views/Home + */ + +import React, { Suspense, lazy } from 'react'; +import { HomePageSkeleton } from './components/HomePageSkeleton'; + +// 懒加载实际首页组件 +const HomePage = lazy(() => import('./HomePage')); + +/** + * 首页入口 - 带骨架屏的懒加载包装 + * 使用深色风格骨架屏,与首页视觉风格一致 + */ +const HomePageEntry: React.FC = () => { + return ( + }> + + + ); +}; + +export default HomePageEntry;