From 112e22b68028ca2f3095ca40638c92816f295712 Mon Sep 17 00:00:00 2001
From: xun082 <2042204285@qq.com>
Date: Mon, 15 Jul 2024 17:46:30 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=9A=80=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2=20tab=20=E6=A0=8F=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/edit/layout.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/app/edit/layout.tsx b/src/app/edit/layout.tsx
index 8633247..7218c30 100644
--- a/src/app/edit/layout.tsx
+++ b/src/app/edit/layout.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { PanelGroup, Panel } from 'react-resizable-panels';
@@ -8,6 +8,7 @@ import { DndContext } from '@dnd-kit/core';
 import { FaFileAlt, FaSearch, FaPlug, FaCog, FaQuestionCircle } from 'react-icons/fa';
 import { PiOpenAiLogo } from 'react-icons/pi';
 import { editor } from 'monaco-editor';
+import { motion, useAnimation } from 'framer-motion';
 
 import ResizeHandle from '@/components/resize-handle';
 import { PATHS } from '@/utils';
@@ -56,6 +57,17 @@ const Page: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const pathname = usePathname();
   const { splitState } = useSplitStore();
 
+  const controls = useAnimation();
+
+  useEffect(() => {
+    controls.start({
+      y: 0,
+      opacity: 1,
+      scale: 1,
+      transition: { ease: 'easeInOut', duration: 1 },
+    });
+  }, [pathname, controls]);
+
   // const { editors } = useEditorStore();
   const { models, setModels } = useModelsStore();
 
@@ -141,7 +153,14 @@ const Page: React.FC<{ children: React.ReactNode }> = ({ children }) => {
         <DndContext onDragEnd={(e) => handleFileDrop(e)}>
           <PanelGroup direction="horizontal" className="flex-1">
             <Panel minSize={1} defaultSize={15} className="bg-gray-800">
-              {children}
+              <motion.div
+                key={pathname}
+                initial={{ y: 20, opacity: 0, scale: 0.95 }}
+                animate={controls}
+                transition={{ ease: 'easeInOut', duration: 1 }}
+              >
+                {children}
+              </motion.div>
             </Panel>
             <ResizeHandle className=" w-[3px] bg-white/25" />
             <Panel className="flex-1 bg-gray-700" minSize={1} defaultSize={50}>