feat: dialog 样式行为优化

src/App.vue

@@ -1,4 +1,5 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>
 
 <template>
   <router-view />

src/components/LoginDialog/index.vue

@@ -113,8 +113,8 @@ function onAfterLeave() {
 /* 动画样式（仅作用于弹框） */
 .dialog-zoom-enter-active,
 .dialog-zoom-leave-active {
-  transition: all 0.3s ease-in-out;
   transform-origin: center;
+  transition: all 0.3s ease-in-out;
 }
 .dialog-zoom-enter-from,
 .dialog-zoom-leave-to {
@@ -141,8 +141,8 @@ function onAfterLeave() {
   overflow: hidden;
   user-select: none;
   background-color: rgb(0 0 0 / 50%);
-  backdrop-filter: blur(3px);
   opacity: 1;
+  backdrop-filter: blur(3px);
   transition: opacity 0.3s;
 }
 .mask[hidden] {
@@ -189,9 +189,9 @@ function onAfterLeave() {
   height: 40px;
   padding: 4px;
   background: var(--login-dialog-logo-background);
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 10%));
   border-radius: 12px;
   box-shadow: 0 2px 12px 0 rgb(0 0 0 / 8%);
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 10%));
 }
 .left-section .logo-wrap .logo-text {
   font-size: 16px;

src/layouts/components/Aside/index.vue

@@ -329,12 +329,12 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
     0 10px 20px 0 rgb(0 0 0 / 10%),
     0 0 1px 0 rgb(0 0 0 / 15%);
   opacity: 0;
-  transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
 
   // 指定样式过渡
 
   // 向左偏移一个宽度
   transform: translateX(-100%);
+  transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
 
   /* 新增：未激活悬停时覆盖延迟 */
   &.no-delay {
@@ -358,10 +358,10 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
 
   // 直接在这里写悬停时的样式（与 aside-container-suspended 一致）
   opacity: 1;
-  transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
 
   // 过渡动画沿用原有设置
   transform: translateX(15px);
+  transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
 
   // 会话列表高度-悬停样式
   .conversations-wrap {

src/styles/element-plus.scss

@@ -1,15 +1,15 @@
 .el-form{
   .el-form-item{
     &:nth-last-child(1){
-      margin-bottom: 0px;
+      margin-bottom: 0;
     }
   }
 }
 
 // el 弹框不知道为啥宽度会变大
 .el-popup-parent--hidden {
-  overflow: hidden;
   width: 100% !important;
+  overflow: hidden;
 }
 
 
@@ -22,29 +22,73 @@
 
 // rounded-tooltip 提示框样式
 .rounded-tooltip {
-  border-radius: 10px !important;
   display: flex;
   align-items: center;
   height: fit-content;
+  border-radius: 10px !important;
 }
-
 .rounded-tooltip-enter-from {
-  transform: scale(0.9); /* 进入前：缩小隐藏 */
   opacity: 0;
+  transform: scale(0.9); /* 进入前：缩小隐藏 */
 }
 .rounded-tooltip-enter-active,
 .rounded-tooltip-leave-active {
   transition: transform 0.3s, opacity 0.3s; /* 缓入动画 */
 }
 .rounded-tooltip-enter-to {
-  transform: scale(1); /* 进入后：正常大小 */
   opacity: 1;
+  transform: scale(1); /* 进入后：正常大小 */
 }
 .rounded-tooltip-leave-from {
-  transform: scale(1); /* 离开前：正常大小 */
   opacity: 1;
+  transform: scale(1); /* 离开前：正常大小 */
 }
 .rounded-tooltip-leave-to {
-  transform: scale(0.9); /* 离开后：缩小隐藏 */
   opacity: 0;
+  transform: scale(0.9); /* 离开后：缩小隐藏 */
 }
+
+/* S Dialog 样式行为 */
+.dialog-fade-enter-active .el-dialog {
+  animation: dialog-open 0.2s cubic-bezier(0.33, 0.89, 0.25, 1.02);
+}
+.dialog-fade-leave-active {
+  animation: fade-out 0.2s linear;
+}
+.dialog-fade-leave-active .el-dialog {
+  animation: dialog-close 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+
+@keyframes dialog-open {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-close {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}
+
+// 遮罩层动画
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* E Dialog 样式行为 */

src/styles/var.scss

@@ -13,7 +13,7 @@
   --login-dialog-section-padding: 0px;
   --login-dialog-border-radius: 24px;
   --login-dialog-mode-toggle-color: #409eff;
-  --login-dialog-logo-background: #fff;
+  --login-dialog-logo-background: #ffffff;
   --login-dialog-logo-text-color: #191919;