From 65c18358798d832e9328323cdab2a97d207b0e85 Mon Sep 17 00:00:00 2001
From: 666ghj <670939375@qq.com>
Date: Fri, 12 Dec 2025 00:00:48 +0800
Subject: [PATCH] Enhance Step2EnvSetup.vue with modal transition effects for
 improved user experience

- Wrapped the profile detail modal in a Transition component to add smooth entry and exit animations.
- Introduced CSS styles for modal transitions, enhancing visual appeal and user engagement when displaying profile details.
---
 frontend/src/components/Step2EnvSetup.vue | 35 ++++++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Step2EnvSetup.vue b/frontend/src/components/Step2EnvSetup.vue
index 3357a6c..6cc025c 100644
--- a/frontend/src/components/Step2EnvSetup.vue
+++ b/frontend/src/components/Step2EnvSetup.vue
@@ -499,9 +499,10 @@
     </div>
 
     <!-- Profile Detail Modal -->
-    <div v-if="selectedProfile" class="profile-modal-overlay" @click.self="selectedProfile = null">
-      <div class="profile-modal">
-        <div class="modal-header">
+    <Transition name="modal">
+      <div v-if="selectedProfile" class="profile-modal-overlay" @click.self="selectedProfile = null">
+        <div class="profile-modal">
+          <div class="modal-header">
           <div class="modal-header-info">
             <div class="modal-name-row">
               <span class="modal-realname">{{ selectedProfile.realname }}</span>
@@ -581,7 +582,8 @@
           </div>
         </div>
       </div>
-    </div>
+      </div>
+    </Transition>
 
     <!-- Bottom Info / Logs -->
     <div class="system-logs">
@@ -2368,5 +2370,30 @@ onUnmounted(() => {
 .hint-icon {
   font-size: 14px;
 }
+
+/* Modal Transition */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-active .profile-modal {
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.modal-leave-active .profile-modal {
+  transition: all 0.3s ease-in;
+}
+
+.modal-enter-from .profile-modal,
+.modal-leave-to .profile-modal {
+  transform: scale(0.95) translateY(10px);
+  opacity: 0;
+}
 </style>