修复导航栏claude版本不显示

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, lazy, Suspense } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Plus, Loader2, ArrowLeft } from "lucide-react";
 import { api, type Project, type Session, type ClaudeMdFile } from "@/lib/api";
@@ -10,12 +10,8 @@ import { ProjectList } from "@/components/ProjectList";
 import { SessionList } from "@/components/SessionList";
 import { RunningClaudeSessions } from "@/components/RunningClaudeSessions";
 import { Topbar } from "@/components/Topbar";
-import { MarkdownEditor } from "@/components/MarkdownEditor";
 import { ClaudeFileEditor } from "@/components/ClaudeFileEditor";
-import { Settings } from "@/components/Settings";
 import { CCAgents } from "@/components/CCAgents";
-import { UsageDashboard } from "@/components/UsageDashboard";
-import { MCPManager } from "@/components/MCPManager";
 import { NFOCredits } from "@/components/NFOCredits";
 import { ClaudeBinaryDialog } from "@/components/ClaudeBinaryDialog";
 import { Toast, ToastContainer } from "@/components/ui/toast";
@@ -32,6 +28,12 @@ import RelayStationManager from "@/components/RelayStationManager";
 import { CcrRouterManager } from "@/components/CcrRouterManager";
 import i18n from "@/lib/i18n";
 
+// Lazy load these components to match TabContent's dynamic imports
+const MarkdownEditor = lazy(() => import('@/components/MarkdownEditor').then(m => ({ default: m.MarkdownEditor })));
+const Settings = lazy(() => import('@/components/Settings').then(m => ({ default: m.Settings })));
+const UsageDashboard = lazy(() => import('@/components/UsageDashboard').then(m => ({ default: m.UsageDashboard })));
+const MCPManager = lazy(() => import('@/components/MCPManager').then(m => ({ default: m.MCPManager })));
+
 type View = 
   | "welcome" 
   | "projects" 
@@ -299,14 +301,18 @@ function AppContent() {
       case "editor":
         return (
           <div className="flex-1 overflow-hidden">
-            <MarkdownEditor onBack={() => handleViewChange("welcome")} />
+            <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin" /></div>}>
+              <MarkdownEditor onBack={() => handleViewChange("welcome")} />
+            </Suspense>
           </div>
         );
       
       case "settings":
         return (
           <div className="flex-1 flex flex-col" style={{ minHeight: 0 }}>
-            <Settings onBack={() => handleViewChange("welcome")} />
+            <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin" /></div>}>
+              <Settings onBack={() => handleViewChange("welcome")} />
+            </Suspense>
           </div>
         );
       
@@ -459,12 +465,16 @@ function AppContent() {
       
       case "usage-dashboard":
         return (
-          <UsageDashboard onBack={() => handleViewChange("welcome")} />
+          <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin" /></div>}>
+            <UsageDashboard onBack={() => handleViewChange("welcome")} />
+          </Suspense>
         );
       
       case "mcp":
         return (
-          <MCPManager onBack={() => handleViewChange("welcome")} />
+          <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="h-6 w-6 animate-spin" /></div>}>
+            <MCPManager onBack={() => handleViewChange("welcome")} />
+          </Suspense>
         );
       
       case "project-settings":