Eliminate admin N+1 queries and lazy-load app routes

front/src/App.tsx

@@ -1,30 +1,29 @@
+import { Suspense, lazy } from 'react';
 import { BrowserRouter, Navigate, Route, Routes, useLocation } from 'react-router-dom';
-import { AnimatePresence, motion } from 'motion/react';
-import AdminDashboard from './admin/dashboard';
-import AdminFilesList from './admin/files-list';
-import AdminStoragePoliciesList from './admin/storage-policies-list';
-import AdminUsersList from './admin/users-list';
-import AdminLayout from './admin/AdminLayout';
-
-// 新增占位页面
-import AdminSettings from './admin/settings';
-import AdminFilesystem from './admin/filesystem';
-import AdminFileBlobs from './admin/fileblobs';
-import AdminShares from './admin/shares';
-import AdminTasks from './admin/tasks';
-import AdminOAuthApps from './admin/oauthapps';
-
-import Layout from './components/layout/Layout';
-import MobileLayout from './mobile-components/MobileLayout';
+import { AnimatePresence } from 'motion/react';
 import { useIsMobile } from './hooks/useIsMobile';
-import Login from './account/pages/LoginPage';
-import Overview from './workspace/pages/OverviewPage';
-import FilesPage from './workspace/pages/FilesPage';
-import RecycleBin from './workspace/pages/RecycleBinPage';
-import Shares from './sharing/pages/SharesPage';
-import FileShare from './sharing/pages/FileSharePage';
-import Tasks from './common/pages/TasksPage';
-import Transfer from './transfer/pages/TransferPage';
+
+const Layout = lazy(() => import('./components/layout/Layout'));
+const MobileLayout = lazy(() => import('./mobile-components/MobileLayout'));
+const Login = lazy(() => import('./account/pages/LoginPage'));
+const Overview = lazy(() => import('./workspace/pages/OverviewPage'));
+const FilesPage = lazy(() => import('./workspace/pages/FilesPage'));
+const RecycleBin = lazy(() => import('./workspace/pages/RecycleBinPage'));
+const Shares = lazy(() => import('./sharing/pages/SharesPage'));
+const FileShare = lazy(() => import('./sharing/pages/FileSharePage'));
+const Tasks = lazy(() => import('./common/pages/TasksPage'));
+const Transfer = lazy(() => import('./transfer/pages/TransferPage'));
+const AdminLayout = lazy(() => import('./admin/AdminLayout'));
+const AdminDashboard = lazy(() => import('./admin/dashboard'));
+const AdminSettings = lazy(() => import('./admin/settings'));
+const AdminFilesystem = lazy(() => import('./admin/filesystem'));
+const AdminStoragePoliciesList = lazy(() => import('./admin/storage-policies-list'));
+const AdminUsersList = lazy(() => import('./admin/users-list'));
+const AdminFilesList = lazy(() => import('./admin/files-list'));
+const AdminFileBlobs = lazy(() => import('./admin/fileblobs'));
+const AdminShares = lazy(() => import('./admin/shares'));
+const AdminTasks = lazy(() => import('./admin/tasks'));
+const AdminOAuthApps = lazy(() => import('./admin/oauthapps'));
 
 function AnimatedRoutes({ isMobile }: { isMobile: boolean }) {
   const location = useLocation();
@@ -32,40 +31,51 @@ function AnimatedRoutes({ isMobile }: { isMobile: boolean }) {
 
   return (
     <AnimatePresence mode="wait">
-      <Routes location={location}>
-        <Route path="/login" element={<Login />} />
-        <Route path="/share/:token" element={<FileShare />} />
-        <Route element={<AppLayout />}>
-          <Route path="/" element={<Navigate to="/overview" replace />} />
-          <Route path="/overview" element={<Overview />} />
-          <Route path="/files" element={<FilesPage />} />
-          <Route path="/tasks" element={<Tasks />} />
-          <Route path="/shares" element={<Shares />} />
-          <Route path="/recycle-bin" element={<RecycleBin />} />
-          <Route path="/transfer" element={<Transfer />} />
-          
-          {/* 管理台路由重构 */}
-          <Route path="/admin" element={isMobile ? <Navigate to="/overview" replace /> : <AdminLayout />}>
-            <Route index element={<Navigate to="dashboard" replace />} />
-            <Route path="dashboard" element={<AdminDashboard />} />
-            <Route path="settings" element={<AdminSettings />} />
-            <Route path="filesystem" element={<AdminFilesystem />} />
-            <Route path="storage-policies" element={<AdminStoragePoliciesList />} />
-            <Route path="users" element={<AdminUsersList />} />
-            <Route path="files" element={<AdminFilesList />} />
-            <Route path="file-blobs" element={<AdminFileBlobs />} />
-            <Route path="shares" element={<AdminShares />} />
-            <Route path="tasks" element={<AdminTasks />} />
-            <Route path="oauth-apps" element={<AdminOAuthApps />} />
-          </Route>
+      <Suspense fallback={<RouteLoadingFallback />}>
+        <Routes location={location}>
+          <Route path="/login" element={<Login />} />
+          <Route path="/share/:token" element={<FileShare />} />
+          <Route element={<AppLayout />}>
+            <Route path="/" element={<Navigate to="/overview" replace />} />
+            <Route path="/overview" element={<Overview />} />
+            <Route path="/files" element={<FilesPage />} />
+            <Route path="/tasks" element={<Tasks />} />
+            <Route path="/shares" element={<Shares />} />
+            <Route path="/recycle-bin" element={<RecycleBin />} />
+            <Route path="/transfer" element={<Transfer />} />
 
-          <Route path="*" element={<Navigate to="/overview" replace />} />
-        </Route>
-      </Routes>
+            <Route path="/admin" element={isMobile ? <Navigate to="/overview" replace /> : <AdminLayout />}>
+              <Route index element={<Navigate to="dashboard" replace />} />
+              <Route path="dashboard" element={<AdminDashboard />} />
+              <Route path="settings" element={<AdminSettings />} />
+              <Route path="filesystem" element={<AdminFilesystem />} />
+              <Route path="storage-policies" element={<AdminStoragePoliciesList />} />
+              <Route path="users" element={<AdminUsersList />} />
+              <Route path="files" element={<AdminFilesList />} />
+              <Route path="file-blobs" element={<AdminFileBlobs />} />
+              <Route path="shares" element={<AdminShares />} />
+              <Route path="tasks" element={<AdminTasks />} />
+              <Route path="oauth-apps" element={<AdminOAuthApps />} />
+            </Route>
+
+            <Route path="*" element={<Navigate to="/overview" replace />} />
+          </Route>
+        </Routes>
+      </Suspense>
     </AnimatePresence>
   );
 }
 
+function RouteLoadingFallback() {
+  return (
+    <div className="flex h-screen w-full items-center justify-center bg-aurora text-gray-900 dark:text-gray-100">
+      <div className="rounded-lg border border-white/20 bg-white/40 px-4 py-3 text-sm font-black uppercase tracking-[0.2em] shadow-lg backdrop-blur-xl dark:bg-black/30">
+        Loading...
+      </div>
+    </div>
+  );
+}
+
 export default function App() {
   const isMobile = useIsMobile();