refactor: 重构 App.js 使用声明式路由配置
- 移除 140+ 行路由定义 JSX,改用 AppRoutes 组件 - 移除 10 个懒加载组件声明 (已迁移到 routes/lazy-components.js) - 移除 ProtectedRoute/ProtectedRouteRedirect 导入 (路由系统内部处理) - 简化 AppContent 组件,只保留核心逻辑 效果: - App.js 从 330 行减少到 165 行 (-50%) - 代码职责更清晰,易于维护 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
181
src/App.js
181
src/App.js
@@ -9,36 +9,14 @@
|
|||||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Visionware.
|
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Visionware.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Suspense, useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { ChakraProvider } from '@chakra-ui/react';
|
import { ChakraProvider } from '@chakra-ui/react';
|
||||||
import { Routes, Route, Navigate } from "react-router-dom";
|
|
||||||
|
|
||||||
// Chakra imports
|
|
||||||
import { Box, useColorMode } from '@chakra-ui/react';
|
|
||||||
|
|
||||||
// Core Components
|
// Core Components
|
||||||
import theme from "theme/theme.js";
|
import theme from "theme/theme.js";
|
||||||
|
|
||||||
// Loading Component
|
// Routes
|
||||||
import PageLoader from "components/Loading/PageLoader";
|
import AppRoutes from './routes';
|
||||||
|
|
||||||
// Layouts - 保持同步导入（需要立即加载）
|
|
||||||
import Auth from "layouts/Auth";
|
|
||||||
import HomeLayout from "layouts/Home";
|
|
||||||
import MainLayout from "layouts/MainLayout";
|
|
||||||
|
|
||||||
// ⚡ 使用 React.lazy() 实现路由懒加载
|
|
||||||
// 首屏不需要的组件按需加载，大幅减少初始 JS 包大小
|
|
||||||
const Community = React.lazy(() => import("views/Community"));
|
|
||||||
const LimitAnalyse = React.lazy(() => import("views/LimitAnalyse"));
|
|
||||||
const ForecastReport = React.lazy(() => import("views/Company/ForecastReport"));
|
|
||||||
const ConceptCenter = React.lazy(() => import("views/Concept"));
|
|
||||||
const FinancialPanorama = React.lazy(() => import("views/Company/FinancialPanorama"));
|
|
||||||
const CompanyIndex = React.lazy(() => import("views/Company"));
|
|
||||||
const MarketDataView = React.lazy(() => import("views/Company/MarketDataView"));
|
|
||||||
const StockOverview = React.lazy(() => import("views/StockOverview"));
|
|
||||||
const EventDetail = React.lazy(() => import("views/EventDetail"));
|
|
||||||
const TradingSimulation = React.lazy(() => import("views/TradingSimulation"));
|
|
||||||
|
|
||||||
// Redux
|
// Redux
|
||||||
import { Provider as ReduxProvider } from 'react-redux';
|
import { Provider as ReduxProvider } from 'react-redux';
|
||||||
@@ -46,11 +24,10 @@ import { store } from './store';
|
|||||||
|
|
||||||
// Contexts
|
// Contexts
|
||||||
import { AuthProvider } from "contexts/AuthContext";
|
import { AuthProvider } from "contexts/AuthContext";
|
||||||
|
import { AuthModalProvider } from "contexts/AuthModalContext";
|
||||||
import { NotificationProvider, useNotification } from "contexts/NotificationContext";
|
import { NotificationProvider, useNotification } from "contexts/NotificationContext";
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import ProtectedRoute from "components/ProtectedRoute";
|
|
||||||
import ProtectedRouteRedirect from "components/ProtectedRouteRedirect";
|
|
||||||
import ErrorBoundary from "components/ErrorBoundary";
|
import ErrorBoundary from "components/ErrorBoundary";
|
||||||
import AuthModalManager from "components/Auth/AuthModalManager";
|
import AuthModalManager from "components/Auth/AuthModalManager";
|
||||||
import NotificationContainer from "components/NotificationContainer";
|
import NotificationContainer from "components/NotificationContainer";
|
||||||
@@ -109,7 +86,6 @@ function ConnectionStatusBarWrapper() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function AppContent() {
|
function AppContent() {
|
||||||
const { colorMode } = useColorMode();
|
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
// 🎯 PostHog Redux 初始化
|
// 🎯 PostHog Redux 初始化
|
||||||
@@ -119,157 +95,16 @@ function AppContent() {
|
|||||||
}, [dispatch]);
|
}, [dispatch]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box minH="100vh" bg={colorMode === 'dark' ? 'gray.800' : 'white'}>
|
<>
|
||||||
{/* Socket 连接状态条 */}
|
{/* Socket 连接状态条 */}
|
||||||
<ConnectionStatusBarWrapper />
|
<ConnectionStatusBarWrapper />
|
||||||
|
|
||||||
{/* 路由切换时自动滚动到顶部 */}
|
{/* 路由切换时自动滚动到顶部 */}
|
||||||
<ScrollToTop />
|
<ScrollToTop />
|
||||||
<Routes>
|
|
||||||
{/* 带导航栏的主布局 - 所有需要导航栏的页面都在这里 */}
|
|
||||||
{/* MainLayout 内部有 Suspense，确保导航栏始终可见 */}
|
|
||||||
<Route element={<MainLayout />}>
|
|
||||||
{/* 首页路由 */}
|
|
||||||
<Route path="home/*" element={<HomeLayout />} />
|
|
||||||
|
|
||||||
{/* Community页面路由 - 需要登录 */}
|
{/* 应用路由 - 从 routes/index.js 导入 */}
|
||||||
<Route
|
<AppRoutes />
|
||||||
path="community"
|
</>
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<Community />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 概念中心路由 - 需要登录 */}
|
|
||||||
<Route
|
|
||||||
path="concepts"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<ConceptCenter />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Route
|
|
||||||
path="concept"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<ConceptCenter />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 股票概览页面路由 - 需要登录 */}
|
|
||||||
<Route
|
|
||||||
path="stocks"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<StockOverview />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Route
|
|
||||||
path="stock-overview"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<StockOverview />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Limit Analyse页面路由 - 需要登录 */}
|
|
||||||
<Route
|
|
||||||
path="limit-analyse"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<LimitAnalyse />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 模拟盘交易系统路由 - 需要登录 */}
|
|
||||||
<Route
|
|
||||||
path="trading-simulation"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<TradingSimulation />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 事件详情独立页面路由 - 需要登录（跳转模式） */}
|
|
||||||
<Route
|
|
||||||
path="event-detail/:eventId"
|
|
||||||
element={
|
|
||||||
<ProtectedRouteRedirect>
|
|
||||||
<EventDetail />
|
|
||||||
</ProtectedRouteRedirect>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 公司相关页面 */}
|
|
||||||
{/* 财报预测 - 需要登录（跳转模式） */}
|
|
||||||
<Route
|
|
||||||
path="forecast-report"
|
|
||||||
element={
|
|
||||||
<ProtectedRouteRedirect>
|
|
||||||
<ForecastReport />
|
|
||||||
</ProtectedRouteRedirect>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 财务全景 - 需要登录（弹窗模式） */}
|
|
||||||
<Route
|
|
||||||
path="Financial"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<FinancialPanorama />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 公司页面 - 需要登录（弹窗模式） */}
|
|
||||||
<Route
|
|
||||||
path="company"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<CompanyIndex />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 公司详情 - 需要登录（跳转模式） */}
|
|
||||||
<Route
|
|
||||||
path="company/:code"
|
|
||||||
element={
|
|
||||||
<ProtectedRouteRedirect>
|
|
||||||
<CompanyIndex />
|
|
||||||
</ProtectedRouteRedirect>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* 市场数据 - 需要登录（弹窗模式） */}
|
|
||||||
<Route
|
|
||||||
path="market-data"
|
|
||||||
element={
|
|
||||||
<ProtectedRoute>
|
|
||||||
<MarketDataView />
|
|
||||||
</ProtectedRoute>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
{/* 认证页面路由 - 不使用 MainLayout */}
|
|
||||||
<Route path="auth/*" element={<Auth />} />
|
|
||||||
|
|
||||||
{/* 默认重定向到首页 */}
|
|
||||||
<Route path="/" element={<Navigate to="/home" replace />} />
|
|
||||||
|
|
||||||
{/* 404 页面 */}
|
|
||||||
<Route path="*" element={<Navigate to="/home" replace />} />
|
|
||||||
</Routes>
|
|
||||||
</Box>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user