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
This commit is contained in:
Jason
2025-12-22 22:27:32 +08:00
parent db8180aa31
commit 7d495aa772
2 changed files with 64 additions and 43 deletions
+22 -4
View File
@@ -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);
}
}}
/>
)}