diff --git a/src/App.tsx b/src/App.tsx index c874da8..ebd10a5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,16 @@ import { useEffect, useMemo, useState, useRef } from "react"; import { useTranslation } from "react-i18next"; import { toast } from "sonner"; -import { Plus, Settings, ArrowLeft, Bot, Book, Wrench, Server, RefreshCw } from "lucide-react"; +import { + Plus, + Settings, + ArrowLeft, + Bot, + Book, + Wrench, + Server, + RefreshCw, +} from "lucide-react"; import type { Provider } from "@/types"; import type { EnvConflict } from "@/types/env"; import { useProvidersQuery } from "@/lib/query"; @@ -30,14 +39,13 @@ import { DeepLinkImportDialog } from "@/components/DeepLinkImportDialog"; import { AgentsPanel } from "@/components/agents/AgentsPanel"; import { Button } from "@/components/ui/button"; - -type View = 'providers' | 'settings' | 'prompts' | 'skills' | 'mcp' | 'agents'; +type View = "providers" | "settings" | "prompts" | "skills" | "mcp" | "agents"; function App() { const { t } = useTranslation(); const [activeApp, setActiveApp] = useState("claude"); - const [currentView, setCurrentView] = useState('providers'); + const [currentView, setCurrentView] = useState("providers"); const [isAddOpen, setIsAddOpen] = useState(false); const [editingProvider, setEditingProvider] = useState(null); @@ -238,38 +246,39 @@ function App() { const renderContent = () => { switch (currentView) { - case 'settings': + case "settings": return ( setCurrentView('providers')} + onOpenChange={() => setCurrentView("providers")} onImportSuccess={handleImportSuccess} /> ); - case 'prompts': + case "prompts": return ( setCurrentView('providers')} + onOpenChange={() => setCurrentView("providers")} appId={activeApp} /> ); - case 'skills': - return setCurrentView('providers')} />; - case 'mcp': + case "skills": + return ( + setCurrentView("providers")} + /> + ); + case "mcp": return ( setCurrentView('providers')} - /> - ); - case 'agents': - return ( - setCurrentView('providers')} + onOpenChange={() => setCurrentView("providers")} /> ); + case "agents": + return setCurrentView("providers")} />; default: return (
@@ -292,12 +301,15 @@ function App() { }; return ( -
+
{/* 全局拖拽区域（顶部 4px），避免上边框无法拖动 */}
{/* 环境变量警告横幅 */} {showEnvBanner && envConflicts.length > 0 && ( @@ -329,31 +341,32 @@ function App() {
-
+
- {currentView !== 'providers' ? ( + {currentView !== "providers" ? (

- {currentView === 'settings' && t("settings.title")} - {currentView === 'prompts' && t("prompts.title", { appName: t(`apps.${activeApp}`) })} - {currentView === 'skills' && t("skills.title")} - {currentView === 'mcp' && t("mcp.unifiedPanel.title")} - {currentView === 'agents' && "Agents"} + {currentView === "settings" && t("settings.title")} + {currentView === "prompts" && + t("prompts.title", { appName: t(`apps.${activeApp}`) })} + {currentView === "skills" && t("skills.title")} + {currentView === "mcp" && t("mcp.unifiedPanel.title")} + {currentView === "agents" && "Agents"}

) : ( @@ -369,19 +382,19 @@ function App() { - setCurrentView('settings')} /> + setCurrentView("settings")} /> )}
- {currentView === 'prompts' && ( + {currentView === "prompts" && ( )} - {currentView === 'mcp' && ( + {currentView === "mcp" && ( )} - {currentView === 'skills' && ( + {currentView === "skills" && ( <> -

- {title} -

-
+ return createPortal( +
+ {/* Header */} +
+ +

{title}

+
- {/* Content */} -
- {children} -
+ {/* Content */} +
+ {children} +
- {/* Footer */} - {footer && ( -
- {footer} -
- )} -
, - document.body - ); + {/* Footer */} + {footer && ( +
+ {footer} +
+ )} +
, + document.body, + ); }; diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx index 79e28e4..776e01a 100644 --- a/src/components/ui/dialog.tsx +++ b/src/components/ui/dialog.tsx @@ -45,46 +45,54 @@ const DialogContent = React.forwardRef< variant?: "default" | "fullscreen"; overlayClassName?: string; } ->(({ className, children, zIndex = "base", variant = "default", overlayClassName, ...props }, ref) => { - const zIndexMap = { - base: "z-40", - nested: "z-50", - alert: "z-[60]", - top: "z-[110]", - }; +>( + ( + { + className, + children, + zIndex = "base", + variant = "default", + overlayClassName, + ...props + }, + ref, + ) => { + const zIndexMap = { + base: "z-40", + nested: "z-50", + alert: "z-[60]", + top: "z-[110]", + }; - const variantClass = { - default: - "fixed left-1/2 top-1/2 flex flex-col w-full max-w-lg max-h-[90vh] translate-x-[-50%] translate-y-[-50%] border border-border-default bg-white dark:bg-gray-900 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", - fullscreen: - "fixed inset-0 flex flex-col w-screen h-screen translate-x-0 translate-y-0 bg-background text-foreground p-0 sm:rounded-none shadow-none", - }[variant]; + const variantClass = { + default: + "fixed left-1/2 top-1/2 flex flex-col w-full max-w-lg max-h-[90vh] translate-x-[-50%] translate-y-[-50%] border border-border-default bg-white dark:bg-gray-900 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", + fullscreen: + "fixed inset-0 flex flex-col w-screen h-screen translate-x-0 translate-y-0 bg-background text-foreground p-0 sm:rounded-none shadow-none", + }[variant]; - return ( - - - { - // 防止点击遮罩层关闭对话框 - e.preventDefault(); - }} - {...props} - > - {children} - - - 关闭 - - - - ); -}); + return ( + + + { + // 防止点击遮罩层关闭对话框 + e.preventDefault(); + }} + {...props} + > + {children} + + + 关闭 + + + + ); + }, +); DialogContent.displayName = DialogPrimitive.Content.displayName; const DialogHeader = ({