feat: 创建声明式路由配置系统'

src/routes/index.js

@@ -0,0 +1,101 @@
+// src/routes/index.js
+// 路由渲染器 - 根据配置自动生成 Routes
+
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import { Box, useColorMode } from '@chakra-ui/react';
+
+// 路由配置
+import { routeConfig, PROTECTION_MODES, getMainLayoutRoutes, getStandaloneRoutes } from './routeConfig';
+
+// 布局组件 (非懒加载)
+import Auth from '../layouts/Auth';
+import HomeLayout from '../layouts/Home';
+import MainLayout from '../layouts/MainLayout';
+
+// 保护路由组件
+import ProtectedRoute from '../components/ProtectedRoute';
+import ProtectedRouteRedirect from '../components/ProtectedRouteRedirect';
+
+/**
+ * 根据保护模式包装组件
+ */
+function wrapWithProtection(Component, protection) {
+    if (protection === PROTECTION_MODES.MODAL) {
+        return (
+            <ProtectedRoute>
+                <Component />
+            </ProtectedRoute>
+        );
+    }
+
+    if (protection === PROTECTION_MODES.REDIRECT) {
+        return (
+            <ProtectedRouteRedirect>
+                <Component />
+            </ProtectedRouteRedirect>
+        );
+    }
+
+    // PUBLIC - 无保护
+    return <Component />;
+}
+
+/**
+ * 渲染单个路由
+ */
+function renderRoute(routeItem, index) {
+    const { path, component, protection } = routeItem;
+
+    // 处理特殊组件(非懒加载)
+    let Component;
+    if (component === 'Auth') {
+        Component = Auth;
+    } else if (component === 'HomeLayout') {
+        Component = HomeLayout;
+    } else {
+        Component = component;
+    }
+
+    return (
+        <Route
+            key={`${path}-${index}`}
+            path={path}
+            element={wrapWithProtection(Component, protection)}
+        />
+    );
+}
+
+/**
+ * AppRoutes - 应用路由组件
+ * 替代 App.js 中的 Routes 部分
+ */
+export function AppRoutes() {
+    const { colorMode } = useColorMode();
+
+    // 分离路由
+    const mainLayoutRoutes = getMainLayoutRoutes();
+    const standaloneRoutes = getStandaloneRoutes();
+
+    return (
+        <Box minH="100vh" bg={colorMode === 'dark' ? 'gray.800' : 'white'}>
+            <Routes>
+                {/* 带导航栏的主布局 - 所有需要导航栏的页面都在这里 */}
+                <Route element={<MainLayout />}>
+                    {mainLayoutRoutes.map((route, index) => renderRoute(route, index))}
+                </Route>
+
+                {/* 不使用布局的路由 */}
+                {standaloneRoutes.map((route, index) => renderRoute(route, index))}
+
+                {/* 默认重定向到首页 */}
+                <Route path="/" element={<Navigate to="/home" replace />} />
+
+                {/* 404 页面 */}
+                <Route path="*" element={<Navigate to="/home" replace />} />
+            </Routes>
+        </Box>
+    );
+}
+
+export default AppRoutes;