From 8be98ccbb3734f0748202745ebf56204ee0164f8 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Thu, 12 Jun 2025 10:08:46 +0800
Subject: [PATCH] refactor(Routes): enhance page transition animations and
 improve Navbar styling; conditionally render user name in MainSidebar

---
 src/renderer/src/Routes.tsx                          | 12 +++++++-----
 src/renderer/src/components/app/Navbar.tsx           |  2 +-
 .../src/pages/home/MainSidebar/MainSidebar.tsx       |  3 ++-
 .../src/pages/settings/ProviderSettings/index.tsx    |  2 +-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/renderer/src/Routes.tsx b/src/renderer/src/Routes.tsx
index 62319e0c60..71b1c163ec 100644
--- a/src/renderer/src/Routes.tsx
+++ b/src/renderer/src/Routes.tsx
@@ -89,18 +89,20 @@ const PageContainer = styled(motion.div)`
   width: 100%;
   height: 100%;
   z-index: 10;
+  will-change: transform;
+  backface-visibility: hidden;
 `
 
 const pageTransition = {
   type: 'tween',
-  duration: 0.15,
-  ease: 'easeInOut'
+  duration: 0.2,
+  ease: [0.4, 0.0, 0.2, 1]
 }
 
 const pageVariants = {
-  initial: { y: '100%' },
-  animate: { y: 0 },
-  exit: { y: '100%' }
+  initial: { translateY: '100%' },
+  animate: { translateY: '0%' },
+  exit: { translateY: '100%' }
 }
 
 export default RouteContainer
diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx
index fa165a7505..74af3a2b3a 100644
--- a/src/renderer/src/components/app/Navbar.tsx
+++ b/src/renderer/src/components/app/Navbar.tsx
@@ -60,7 +60,7 @@ const CloseIcon = () => {
       type="text"
       onClick={() => navigate('/')}
       className="nodrag"
-      style={{ marginRight: 2 }}
+      style={{ marginRight: 2, marginLeft: 5 }}
       icon={<CircleArrowLeft size={20} color="var(--color-icon)" style={{ marginTop: 2 }} />}
     />
   )
diff --git a/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx b/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx
index e7fbedcb77..780826261d 100644
--- a/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx
+++ b/src/renderer/src/pages/home/MainSidebar/MainSidebar.tsx
@@ -210,7 +210,7 @@ const MainSidebar: FC = () => {
           ) : (
             <AvatarImg src={avatar || UserAvatar} draggable={false} className="nodrag" />
           )}
-          <UserMenuText>{userName}</UserMenuText>
+          {userName && <UserMenuText>{userName}</UserMenuText>}
         </UserMenuLeft>
         <Tooltip title={t('settings.title')} mouseEnterDelay={0.8} placement="right">
           <Icon theme={theme} onClick={() => navigate('/settings/provider')} className="settings-icon">
@@ -289,6 +289,7 @@ const AvatarImg = styled(Avatar)`
 const UserMenuText = styled.div`
   font-size: 14px;
   font-weight: 500;
+  margin-right: 3px;
 `
 
 const Icon = styled.div<{ theme: string }>`
diff --git a/src/renderer/src/pages/settings/ProviderSettings/index.tsx b/src/renderer/src/pages/settings/ProviderSettings/index.tsx
index 928f491523..33f2d32d35 100644
--- a/src/renderer/src/pages/settings/ProviderSettings/index.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/index.tsx
@@ -243,7 +243,7 @@ const ProvidersList: FC = () => {
   })
 
   useEffect(() => {
-    setTimeout(() => setReady(true), 250)
+    setTimeout(() => setReady(true), 200)
   }, [])
 
   if (!ready) {