vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 重构 App.js 使用声明式路由配置

Browse Source 
- 移除 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
2025-10-30 14:42:54 +08:00
parent b29c37149a
commit 4130498b8e
1 changed files with 8 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
src/App.js
View File

@@ -9,36 +9,14 @@
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 { Routes, Route, Navigate } from "react-router-dom";
// Chakra imports
import { Box, useColorMode } from '@chakra-ui/react';
// Core Components
import theme from "theme/theme.js";
// Loading Component
import PageLoader from "components/Loading/PageLoader";
// 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"));
// Routes
import AppRoutes from './routes';
// Redux
import { Provider as ReduxProvider } from 'react-redux';
@@ -46,11 +24,10 @@ import { store } from './store';
// Contexts
import { AuthProvider } from "contexts/AuthContext";
import { AuthModalProvider } from "contexts/AuthModalContext";
import { NotificationProvider, useNotification } from "contexts/NotificationContext";
// Components
import ProtectedRoute from "components/ProtectedRoute";
import ProtectedRouteRedirect from "components/ProtectedRouteRedirect";
import ErrorBoundary from "components/ErrorBoundary";
import AuthModalManager from "components/Auth/AuthModalManager";
import NotificationContainer from "components/NotificationContainer";
@@ -109,7 +86,6 @@ function ConnectionStatusBarWrapper() {
}
function AppContent() {
const { colorMode } = useColorMode();
const dispatch = useDispatch();
// 🎯 PostHog Redux 初始化
@@ -119,157 +95,16 @@ function AppContent() {
}, [dispatch]);
return (
<Box minH="100vh" bg={colorMode === 'dark' ? 'gray.800' : 'white'}>
<>
{/* Socket 连接状态条 */}
<ConnectionStatusBarWrapper />
{/* 路由切换时自动滚动到顶部 */}
<ScrollToTop />
<Routes>
{/* 带导航栏的主布局 - 所有需要导航栏的页面都在这里 */}
{/* MainLayout 内部有 Suspense，确保导航栏始终可见 */}
<Route element={<MainLayout />}>
{/* 首页路由 */}
<Route path="home/*" element={<HomeLayout />} />
{/* Community页面路由 - 需要登录 */}
<Route
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>
{/* 应用路由 - 从 routes/index.js 导入 */}
<AppRoutes />
</>
);
}