qihuaiflow/frontend/src/App.tsx

import React, { useState, useEffect, Suspense } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import type { User } from '@/types';
import { AuthContext, AuthContextType } from '@/contexts/AuthContext';
import { authAPI } from '@/api';

// Layouts（保留为即时加载，构成应用外壳）
import FrontLayout from '@/components/layout/FrontLayout';
import AdminLayout from '@/components/layout/AdminLayout';

// 路由级代码分割：每个页面独立打包成 chunk，首屏只加载外壳与公共依赖，
// 访问具体页面时才按需加载对应 chunk，显著加快首屏渲染与路由切换速度。
const LandingPage = React.lazy(() => import('@/pages/front/LandingPage'));
const LoginPage = React.lazy(() => import('@/pages/front/LoginPage'));
const ChatPage = React.lazy(() => import('@/pages/front/ChatPage'));
const KnowledgePage = React.lazy(() => import('@/pages/front/KnowledgePage'));
const MarketPage = React.lazy(() => import('@/pages/front/MarketPage'));
const TokenDashboardPage = React.lazy(() => import('@/pages/front/TokenDashboardPage'));
const PricingPage = React.lazy(() => import('@/pages/front/PricingPage'));
const ProfilePage = React.lazy(() => import('@/pages/front/ProfilePage'));
const NotificationPage = React.lazy(() => import('@/pages/front/NotificationPage'));
const AssetsPage = React.lazy(() => import('@/pages/front/AssetsPage'));
const NovelPreviewPage = React.lazy(() => import('@/pages/front/NovelPreviewPage'));
const EvolutionDashboard = React.lazy(() => import('@/pages/front/EvolutionDashboard'));

const AdminDashboard = React.lazy(() => import('@/pages/admin/Dashboard'));
const AdminUsers = React.lazy(() => import('@/pages/admin/Users'));
const AdminModels = React.lazy(() => import('@/pages/admin/Models'));
const AdminSiteSettings = React.lazy(() => import('@/pages/admin/SiteSettings'));
const AdminSmsConfig = React.lazy(() => import('@/pages/admin/SmsConfig'));
const AdminPayment = React.lazy(() => import('@/pages/admin/Payment'));
const AdminServices = React.lazy(() => import('@/pages/admin/Services'));
const AdminMembership = React.lazy(() => import('@/pages/admin/Membership'));
const AdminAds = React.lazy(() => import('@/pages/admin/Ads'));
const AdminMarket = React.lazy(() => import('@/pages/admin/Market'));
const AdminLogs = React.lazy(() => import('@/pages/admin/Logs'));
const AdminSkills = React.lazy(() => import('@/pages/admin/Skills'));
const AdminAgents = React.lazy(() => import('@/pages/admin/Agents'));
const AdminCodeExec = React.lazy(() => import('@/pages/admin/CodeExec'));
const DistributionBuilder = React.lazy(() => import('@/pages/admin/DistributionBuilder'));
const ImBots = React.lazy(() => import('@/pages/admin/ImBots'));
const PrivacySettings = React.lazy(() => import('@/pages/admin/PrivacySettings'));
const Promotion = React.lazy(() => import('@/pages/admin/Promotion'));
const Achievement = React.lazy(() => import('@/pages/admin/Achievement'));
const Tenant = React.lazy(() => import('@/pages/admin/Tenant'));
const Billing = React.lazy(() => import('@/pages/admin/Billing'));
const Analytics = React.lazy(() => import('@/pages/admin/Analytics'));
const Observability = React.lazy(() => import('@/pages/admin/Observability'));
const AdminKnowledge = React.lazy(() => import('@/pages/admin/Knowledge'));
const AdminWorkflow = React.lazy(() => import('@/pages/admin/Workflow'));
const AdminStorage = React.lazy(() => import('@/pages/admin/Storage'));
const AdminDeveloper = React.lazy(() => import('@/pages/admin/Developer'));
const AdminDeveloperTools = React.lazy(() => import('@/pages/admin/DeveloperTools'));
const AdminAutomation = React.lazy(() => import('@/pages/admin/Automation'));
const AdminMcp = React.lazy(() => import('@/pages/admin/Mcp'));
const AdminApps = React.lazy(() => import('@/pages/admin/Apps'));
const AssetCenter = React.lazy(() => import('@/pages/admin/AssetCenter'));
const UserPortal = React.lazy(() => import('@/pages/UserPortal'));
const WechatBot = React.lazy(() => import('@/pages/front/WechatBot'));
const ImBotHub = React.lazy(() => import('@/pages/front/ImBotHub'));
const AppServices = React.lazy(() => import('@/pages/front/AppServices'));

const pageFallback = <div className="loading-screen">加载中...</div>;

const App: React.FC = () => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  // 初始化：从localStorage恢复登录状态
  useEffect(() => {
    const token = localStorage.getItem('aiflow_token');
    const cachedUser = localStorage.getItem('aiflow_user');
    if (token && cachedUser) {
      try {
        setUser(JSON.parse(cachedUser));
      } catch {
        localStorage.removeItem('aiflow_token');
        localStorage.removeItem('aiflow_user');
      }
    }
    setLoading(false);
  }, []);

  const login = (u: User) => {
    setUser(u);
    localStorage.setItem('aiflow_user', JSON.stringify(u));
  };
  const logout = () => {
    setUser(null);
    localStorage.removeItem('aiflow_token');
    localStorage.removeItem('aiflow_user');
  };
  const isAdmin = user?.role === 'admin';

  if (loading) {
    return <div className="loading-screen">加载中...</div>;
  }

  return (
    <AuthContext.Provider value={{ user, login, logout, isAdmin }}>
      <Suspense fallback={pageFallback}>
        <Routes>
          {/* Login */}
          <Route path="/login" element={
            user ? (isAdmin ? <Navigate to="/admin" /> : <Navigate to="/chat" />) : <LoginPage />
          } />

          {/* Root - Landing for guests, redirect for authenticated users */}
          <Route path="/" element={
            user ? (isAdmin ? <Navigate to="/admin" /> : <Navigate to="/chat" />) : <LandingPage />
          } />

          {/* Front Routes (authenticated only) */}
          <Route path="/" element={<FrontLayout />}>
            <Route path="chat" element={<ChatPage />} />
            <Route path="chat/:id" element={<ChatPage />} />
            <Route path="knowledge" element={<KnowledgePage />} />
            <Route path="market" element={<MarketPage />} />
            <Route path="token" element={<TokenDashboardPage />} />
            <Route path="pricing" element={<PricingPage />} />
            <Route path="profile" element={<ProfilePage />} />
            <Route path="notifications" element={<NotificationPage />} />
            <Route path="assets" element={<AssetsPage />} />
            <Route path="assets/novel/:id" element={<NovelPreviewPage />} />
            <Route path="evolution" element={<EvolutionDashboard />} />
            <Route path="wechat-bot" element={<WechatBot />} />
            <Route path="im-bots" element={<ImBotHub />} />
            <Route path="app-services" element={<AppServices />} />
          </Route>

          {/* Admin Routes */}
          <Route path="/admin" element={<AdminLayout />}>
            <Route index element={<AdminDashboard />} />
            <Route path="users" element={<AdminUsers />} />
            <Route path="models" element={<AdminModels />} />
            <Route path="settings" element={<AdminSiteSettings />} />
            <Route path="sms" element={<AdminSmsConfig />} />
            <Route path="payment" element={<AdminPayment />} />
            <Route path="services" element={<AdminServices />} />
            <Route path="membership" element={<AdminMembership />} />
            <Route path="ads" element={<AdminAds />} />
            <Route path="market" element={<AdminMarket />} />
            <Route path="logs" element={<AdminLogs />} />
            <Route path="skills" element={<AdminSkills />} />
            <Route path="agents" element={<AdminAgents />} />
            <Route path="code-exec" element={<AdminCodeExec />} />
            <Route path="distributions" element={<DistributionBuilder />} />
            <Route path="im-bots" element={<ImBots />} />
            <Route path="privacy" element={<PrivacySettings />} />
            <Route path="promotion" element={<Promotion />} />
            <Route path="achievement" element={<Achievement />} />
            <Route path="tenant" element={<Tenant />} />
            <Route path="billing" element={<Billing />} />
            <Route path="analytics" element={<Analytics />} />
      <Route path="observability" element={<Observability />} />
            <Route path="knowledge" element={<AdminKnowledge />} />
            <Route path="workflow" element={<AdminWorkflow />} />
            <Route path="storage" element={<AdminStorage />} />
            <Route path="developer" element={<AdminDeveloper />} />
            <Route path="developer-tools" element={<AdminDeveloperTools />} />
            <Route path="automation" element={<AdminAutomation />} />
            <Route path="mcp" element={<AdminMcp />} />
            <Route path="apps" element={<AdminApps />} />
            <Route path="assets" element={<AssetCenter />} />
            <Route path="portal" element={<UserPortal />} />
          </Route>

          {/* 公开前台首页：不受登录态拦截，供后台「访问前台」直接打开 */}
          <Route path="/home" element={<LandingPage />} />
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </Suspense>
    </AuthContext.Provider>
  );
};

export default App;