fix: 优化左侧和右侧认证面板动画效果

packages/@core/base/design/src/css/ui.css

@@ -1,5 +1,5 @@
 .side-content {
-  animation-duration: 0.2s;
+  animation-duration: 0.3s;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -37,7 +37,7 @@
 @keyframes slide-down {
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(50px);
   }
 
   to {
@@ -49,7 +49,7 @@
 @keyframes slide-left {
   from {
     opacity: 0;
-    transform: translateX(-10px);
+    transform: translateX(-50px);
   }
 
   to {
@@ -61,7 +61,7 @@
 @keyframes slide-right {
   from {
     opacity: 0;
-    transform: translateX(-10px);
+    transform: translateX(50px);
   }
 
   to {
@@ -73,7 +73,7 @@
 @keyframes slide-up {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(-50px);
   }
 
   to {

packages/effects/layouts/src/authentication/authentication.vue

@@ -50,7 +50,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
     <AuthenticationFormView
       v-if="authPanelLeft"
       class="min-h-full w-2/5 flex-1"
-      transition-name="slide-left"
+      data-side="left"
     >
       <template v-if="copyright" #copyright>
         <slot name="copyright">
@@ -86,7 +86,14 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
         class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]"
       >
         <div class="login-background absolute left-0 top-0 size-full"></div>
-        <div class="flex-col-center -enter-x mr-20 h-full">
+        <div
+          :key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
+          class="flex-col-center mr-20 h-full"
+          :class="{
+            'enter-x': authPanelLeft,
+            '-enter-x': authPanelRight,
+          }"
+        >
           <template v-if="sloganImage">
             <img
               :alt="appName"
@@ -110,6 +117,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
       <div class="login-background absolute left-0 top-0 size-full"></div>
       <AuthenticationFormView
         class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
+        data-side="bottom"
       >
         <template v-if="copyright" #copyright>
           <slot name="copyright">
@@ -125,7 +133,8 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
     <!-- 右侧认证面板 -->
     <AuthenticationFormView
       v-if="authPanelRight"
-      class="min-h-full w-[34%] flex-1"
+      class="min-h-full w-2/5 flex-1"
+      data-side="right"
     >
       <template v-if="copyright" #copyright>
         <slot name="copyright">

packages/effects/layouts/src/authentication/form.vue

@@ -2,6 +2,10 @@
 defineOptions({
   name: 'AuthenticationFormView',
 });
+
+defineProps<{
+  dataSide?: 'bottom' | 'left' | 'right' | 'top';
+}>();
 </script>
 
 <template>
@@ -16,7 +20,8 @@ defineOptions({
           <component
             :is="Component"
             :key="route.fullPath"
-            class="enter-x mt-6 w-full sm:mx-auto md:max-w-md"
+            class="side-content mt-6 w-full sm:mx-auto md:max-w-md"
+            :data-side="dataSide"
           />
         </KeepAlive>
       </Transition>