gongxue-base/apps/admin/src/App.tsx

import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { ConfigProvider, App as AntdApp, Spin } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import MainLayout from './layouts/MainLayout';
import PermissionRoute from './components/PermissionRoute';
import DefaultRoute from './components/DefaultRoute';
import AppMessageBridge from './ui/AppMessageBridge';

const LoginPage = lazy(() => import('./pages/Login'));
const DashboardPage = lazy(() => import('./pages/Dashboard'));
const StudentsPage = lazy(() => import('./pages/Students'));
const RoomsPage = lazy(() => import('./pages/Rooms'));
const OccupanciesPage = lazy(() => import('./pages/Occupancies'));
const ExpensesPage = lazy(() => import('./pages/Expenses'));
const BillsPage = lazy(() => import('./pages/Bills'));
const RoomVisualPage = lazy(() => import('./pages/RoomVisual'));
const OperationLogsPage = lazy(() => import('./pages/OperationLogs'));
const UsersPage = lazy(() => import('./pages/Users'));
const ClassroomsPage = lazy(() => import('./pages/Classrooms'));
const DepositsPage = lazy(() => import('./pages/Deposits'));
const TeachersPage = lazy(() => import('./pages/Teachers'));
const StudentProfilePage = lazy(() => import('./pages/StudentProfile'));
const ClassesPage = lazy(() => import('./pages/Classes'));
const ClassDetailPage = lazy(() => import('./pages/Classes/detail'));
const OrganizationsPage = lazy(() => import('./pages/Organizations'))
const ClassroomRentalsPage = lazy(() => import('./pages/ClassroomRentals'));
const ClassroomSchedulePage = lazy(() => import('./pages/ClassroomSchedule'));
const SchedulesPage = lazy(() => import('./pages/Schedules'));
const RolesPage = lazy(() => import('./pages/Roles'));
const PermissionsPage = lazy(() => import('./pages/Permissions'));
const AttendancePage = lazy(() => import('./pages/Attendance'));
const TeacherWorkspacePage = lazy(() => import('./pages/TeacherWorkspace'));
const NotificationsPage = lazy(() => import('./pages/Notifications'));
const IntegrationConfigPage = lazy(() => import('./pages/IntegrationConfig'));
const AiConfigPage = lazy(() => import('./pages/AiConfig'));

const PrivateRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const token = localStorage.getItem('token');
  return token ? <>{children}</> : <Navigate to="/login" />;
};

const App: React.FC = () => {
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#007AFF',
          borderRadius: 10,
          colorBgContainer: '#fff',
          fontFamily:
            "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif",
        },
      }}
    >
      <AntdApp>
        <AppMessageBridge />
        <BrowserRouter>
          <Suspense fallback={<div style={{ minHeight: '40vh', display: 'grid', placeItems: 'center' }}><Spin size="large" /></div>}>
          <Routes>
            <Route path="/login" element={<LoginPage />} />
            <Route
              path="/"
              element={
                <PrivateRoute>
                  <MainLayout />
                </PrivateRoute>
              }
            >
              <Route index element={<DefaultRoute />} />
              <Route
                path="dashboard"
                element={
                  <PermissionRoute permission="dashboard:view">
                    <DashboardPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="room-visual"
                element={
                  <PermissionRoute permission="room:view">
                    <RoomVisualPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="students"
                element={
                  <PermissionRoute permission="student:view">
                    <StudentsPage />
                  </PermissionRoute>
                }
              />

              <Route
                path="students/:id/profile"
                element={
                  <PermissionRoute permission="student:view">
                    <StudentProfilePage />
                  </PermissionRoute>
                }
              />
              <Route
                path="rooms"
                element={
                  <PermissionRoute permission="room:view">
                    <RoomsPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="occupancies"
                element={
                  <PermissionRoute permission="occupancy:view">
                    <OccupanciesPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="expenses"
                element={
                  <PermissionRoute permission="expense:view">
                    <ExpensesPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="deposits"
                element={
                  <PermissionRoute permission="deposit:view">
                    <DepositsPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="bills"
                element={
                  <PermissionRoute permission="bill:view">
                    <BillsPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="classes"
                element={
                  <PermissionRoute permission="class:view">
                    <ClassesPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="classes/:id"
                element={
                  <PermissionRoute permission="class:view">
                    <ClassDetailPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="operation-logs"
                element={
                  <PermissionRoute permission="log:view">
                    <OperationLogsPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="roles"
                element={
                  <PermissionRoute permission="role:view">
                    <RolesPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="permissions"
                element={
                  <PermissionRoute permission="role:view">
                    <PermissionsPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="users"
                element={
                  <PermissionRoute permission="user:view">
                    <UsersPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="teachers"
                element={
                  <PermissionRoute permission="teacher:view">
                    <TeachersPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="classrooms"
                element={
                  <PermissionRoute permission="classroom:view">
                    <ClassroomsPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="organizations"
                element={
                  <PermissionRoute permission="organization:view">
                    <OrganizationsPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="classroom-rentals"
                element={
                  <PermissionRoute permission="rental:view">
                    <ClassroomRentalsPage />
                  </PermissionRoute>
                }
              />
              <Route
                path="classroom-schedule"
                element={
                  <PermissionRoute permission="rental:view">
                    <ClassroomSchedulePage />
                  </PermissionRoute>
                }
              />

              <Route
                path="attendance"
                element={
                  <PermissionRoute permission="attendance:view">
                    <AttendancePage />
                  </PermissionRoute>
                }
              />

              <Route
                path="schedules"
                element={
                  <PermissionRoute permission="schedule:view">
                    <SchedulesPage />
                  </PermissionRoute>
                }
              />

              <Route
                path="teacher-workspace"
                element={
                  <PermissionRoute permission="teacher-workspace:view">
                    <TeacherWorkspacePage />
                  </PermissionRoute>
                }
              />

              <Route
                path="notifications"
                element={
                  <PermissionRoute permission="notification:view">
                    <NotificationsPage />
                  </PermissionRoute>
                }
              />


              <Route
                path="integration-config"
                element={
                  <PermissionRoute permission="integration:read">
                    <IntegrationConfigPage />
                  </PermissionRoute>
                }
              />

              <Route
                path="ai-config"
                element={
                  <PermissionRoute permission="ai:config:read">
                    <AiConfigPage />
                  </PermissionRoute>
                }
              />
            </Route>
          </Routes>
          </Suspense>
        </BrowserRouter>
      </AntdApp>
    </ConfigProvider>
  );
};

export default App;