import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { App as AntdApp } from 'antd';
import store from './store';
import MainLayout from './components/layout/MainLayout';
// 使用懒加载优化性能
const Dashboard = lazy(() => import('./pages/dashboard/Dashboard'));
const Detail = lazy(() => import('./pages/detail/Detail'));
const RiskControl = lazy(() => import('./pages/risk-control/RiskControl'));
const Config = lazy(() => import('./pages/config/Config'));
const Watchlist = lazy(() => import('./pages/watchlist/Watchlist'));
const AdminConfig = lazy(() => import('./pages/admin/AdminConfig'));
import './App.css';

function App() {
  return (
    <AntdApp>
      <Provider store={store}>
        <Router>
          <MainLayout>
            <Suspense fallback={<div className="loading-container">加载中...</div>}>
              <Routes>
                <Route path="/" element={<Dashboard />} />
                <Route path="/watchlist" element={<Watchlist />} />
                <Route path="/detail/:code" element={<Detail />} />
                <Route path="/risk-control" element={<RiskControl />} />
                <Route path="/config" element={<Config />} />
                <Route path="/admin" element={<AdminConfig />} />
              </Routes>
            </Suspense>
          </MainLayout>
        </Router>
      </Provider>
    </AntdApp>
  );
}

export default App;
