Fine-tuning/frontend/src/App.tsx

import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'
import { Layout } from './components/layout/Layout'

const Dashboard = lazy(() => import('./pages/Dashboard').then(m => ({ default: m.Dashboard })))
const Models = lazy(() => import('./pages/Models').then(m => ({ default: m.Models })))
const Datasets = lazy(() => import('./pages/Datasets').then(m => ({ default: m.Datasets })))
const Training = lazy(() => import('./pages/Training').then(m => ({ default: m.Training })))
const Evaluation = lazy(() => import('./pages/Evaluation').then(m => ({ default: m.Evaluation })))
const Deployment = lazy(() => import('./pages/Deployment').then(m => ({ default: m.Deployment })))
const Inference = lazy(() => import('./pages/Inference').then(m => ({ default: m.Inference })))

function PageFallback() {
  return <div style={{ padding: 24, color: '#999' }}>加载中...</div>
}

export default function App() {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<Suspense fallback={<PageFallback />}><Dashboard /></Suspense>} />
        <Route path="/models" element={<Suspense fallback={<PageFallback />}><Models /></Suspense>} />
        <Route path="/datasets" element={<Suspense fallback={<PageFallback />}><Datasets /></Suspense>} />
        <Route path="/training" element={<Suspense fallback={<PageFallback />}><Training /></Suspense>} />
        <Route path="/evaluation" element={<Suspense fallback={<PageFallback />}><Evaluation /></Suspense>} />
        <Route path="/deployment" element={<Suspense fallback={<PageFallback />}><Deployment /></Suspense>} />
        <Route path="/inference" element={<Suspense fallback={<PageFallback />}><Inference /></Suspense>} />
      </Routes>
    </Layout>
  )
}