From 7d495aa772c7fefe1e7aa8bbd1b157cf8dbedabc Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Mon, 22 Dec 2025 22:27:32 +0800
Subject: [PATCH] feat(ui): add exit animation to FullScreenPanel dialogs

- Wrap FullScreenPanel content with AnimatePresence for exit animation
- Add exit={{ opacity: 0 }} to enable fade-out on close
- Use useRef + useEffect to preserve provider data during exit animation
- Follow React best practices by updating refs in useEffect instead of render

Affected components:
- EditProviderDialog
- UsageScriptModal
- AddProviderDialog
- McpFormModal
- ProxySettingsDialog
---
 src/App.tsx                               | 26 ++++++--
 src/components/common/FullScreenPanel.tsx | 81 ++++++++++++-----------
 2 files changed, 64 insertions(+), 43 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index fca3b8766..ca32be6e9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -65,6 +65,22 @@ function App() {
   const [envConflicts, setEnvConflicts] = useState<EnvConflict[]>([]);
   const [showEnvBanner, setShowEnvBanner] = useState(false);
 
+  // 保存最后一个有效的 provider，用于动画退出期间显示内容
+  const lastUsageProviderRef = useRef<Provider | null>(null);
+  const lastEditingProviderRef = useRef<Provider | null>(null);
+
+  useEffect(() => {
+    if (usageProvider) {
+      lastUsageProviderRef.current = usageProvider;
+    }
+  }, [usageProvider]);
+
+  useEffect(() => {
+    if (editingProvider) {
+      lastEditingProviderRef.current = editingProvider;
+    }
+  }, [editingProvider]);
+
   const promptPanelRef = useRef<any>(null);
   const mcpPanelRef = useRef<any>(null);
   const skillsPageRef = useRef<any>(null);
@@ -639,7 +655,7 @@ function App() {
 
       <EditProviderDialog
         open={Boolean(editingProvider)}
-        provider={editingProvider}
+        provider={lastEditingProviderRef.current}
         onOpenChange={(open) => {
           if (!open) {
             setEditingProvider(null);
@@ -650,14 +666,16 @@ function App() {
         isProxyTakeover={isProxyRunning && isCurrentAppTakeoverActive}
       />
 
-      {usageProvider && (
+      {lastUsageProviderRef.current && (
         <UsageScriptModal
-          provider={usageProvider}
+          provider={lastUsageProviderRef.current}
           appId={activeApp}
           isOpen={Boolean(usageProvider)}
           onClose={() => setUsageProvider(null)}
           onSave={(script) => {
-            void saveUsageScript(usageProvider, script);
+            if (usageProvider) {
+              void saveUsageScript(usageProvider, script);
+            }
           }}
         />
       )}
diff --git a/src/components/common/FullScreenPanel.tsx b/src/components/common/FullScreenPanel.tsx
index edf3a1555..19fb65a71 100644
--- a/src/components/common/FullScreenPanel.tsx
+++ b/src/components/common/FullScreenPanel.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { createPortal } from "react-dom";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { ArrowLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
@@ -33,49 +33,52 @@ export const FullScreenPanel: React.FC<FullScreenPanelProps> = ({
     };
   }, [isOpen]);
 
-  if (!isOpen) return null;
-
   return createPortal(
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 0.2 }}
-      className="fixed inset-0 z-[60] flex flex-col"
-      style={{ backgroundColor: "hsl(var(--background))" }}
-    >
-      {/* Header */}
-      <div
-        className="flex-shrink-0 py-3 border-b border-border-default"
-        style={{ backgroundColor: "hsl(var(--background))" }}
-      >
-        <div className="h-4 w-full" data-tauri-drag-region />
-        <div className="mx-auto max-w-[56rem] px-6 flex items-center gap-4">
-          <Button type="button" variant="outline" size="icon" onClick={onClose}>
-            <ArrowLeft className="h-4 w-4" />
-          </Button>
-          <h2 className="text-lg font-semibold text-foreground">{title}</h2>
-        </div>
-      </div>
-
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto scroll-overlay">
-        <div className="mx-auto max-w-[56rem] px-6 py-6 space-y-6 w-full">
-          {children}
-        </div>
-      </div>
-
-      {/* Footer */}
-      {footer && (
-        <div
-          className="flex-shrink-0 py-4 border-t border-border-default"
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          className="fixed inset-0 z-[60] flex flex-col"
           style={{ backgroundColor: "hsl(var(--background))" }}
         >
-          <div className="mx-auto max-w-[56rem] px-6 flex items-center justify-end gap-3">
-            {footer}
+          {/* Header */}
+          <div
+            className="flex-shrink-0 py-3 border-b border-border-default"
+            style={{ backgroundColor: "hsl(var(--background))" }}
+          >
+            <div className="h-4 w-full" data-tauri-drag-region />
+            <div className="mx-auto max-w-[56rem] px-6 flex items-center gap-4">
+              <Button type="button" variant="outline" size="icon" onClick={onClose}>
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+              <h2 className="text-lg font-semibold text-foreground">{title}</h2>
+            </div>
           </div>
-        </div>
+
+          {/* Content */}
+          <div className="flex-1 overflow-y-auto scroll-overlay">
+            <div className="mx-auto max-w-[56rem] px-6 py-6 space-y-6 w-full">
+              {children}
+            </div>
+          </div>
+
+          {/* Footer */}
+          {footer && (
+            <div
+              className="flex-shrink-0 py-4 border-t border-border-default"
+              style={{ backgroundColor: "hsl(var(--background))" }}
+            >
+              <div className="mx-auto max-w-[56rem] px-6 flex items-center justify-end gap-3">
+                {footer}
+              </div>
+            </div>
+          )}
+        </motion.div>
       )}
-    </motion.div>,
+    </AnimatePresence>,
     document.body,
   );
 };