首页会话弹窗过度样式添加

src/layouts/default/sider/bottomSider2.vue

@@ -3,102 +3,104 @@
     <div class="trigger-button">
       <div class="icon" @click="openMenu"></div>
     </div>
-    <div v-if="dialogVisible" class="dialog-overlay">
-      <!-- 左侧折叠区域 -->
-      <div class="left-side" :class="{ collapsed: isFold }" id="leftSide">
-        <div
-          class="addBtn"
-          :style="{
-            backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/add.svg' : ''})`,
-            backgroundColor: isFold ? '' : '#2cb6ff',
-            width: isFold ? '20px' : 'auto',
-          }"
-        >
-          <span
-            class="btn-text-bg"
+    <transition name="fade">
+      <div v-if="dialogVisible" class="dialog-overlay">
+        <!-- 左侧折叠区域 -->
+        <div class="left-side" :class="{ collapsed: isFold }" id="leftSide">
+          <div
+            class="addBtn"
             :style="{
-              backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/addB.svg' : ''})`,
+              backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/add.svg' : ''})`,
+              backgroundColor: isFold ? '' : '#2cb6ff',
+              width: isFold ? '20px' : 'auto',
             }"
-          ></span>
-          <span v-if="!isFold" class="btn-text" @click="addNew">添加新对话</span>
-        </div>
-        <div class="divider0"></div>
-        <div
-          v-if="isFold"
-          class="historyBtn"
-          :style="{ backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/history.svg' : '/src/assets/images/vent/home/history.svg'})` }"
-          @click="addNew"
-        ></div>
-        <div v-else class="historyBtn1">
-          <span
-            class="btn-text-bg"
-            :style="{
-              backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/history.svg' : ''})`,
-            }"
-          ></span>
-          <span v-if="!isFold" class="btn-text">历史对话</span>
-          <a-list style="width: 100px" :split="false">
-            <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
-              >历史数据1</a-list-item
-            >
-            <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
-              >历史数据12</a-list-item
-            >
-            <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
-              >历史数据123</a-list-item
-            >
-          </a-list>
+          >
+            <span
+              class="btn-text-bg"
+              :style="{
+                backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/addB.svg' : ''})`,
+              }"
+            ></span>
+            <span v-if="!isFold" class="btn-text" @click="addNew">添加新对话</span>
+          </div>
+          <div class="divider0"></div>
+          <div
+            v-if="isFold"
+            class="historyBtn"
+            :style="{ backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/history.svg' : '/src/assets/images/vent/home/history.svg'})` }"
+            @click="addNew"
+          ></div>
+          <div v-else class="historyBtn1">
+            <span
+              class="btn-text-bg"
+              :style="{
+                backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/history.svg' : ''})`,
+              }"
+            ></span>
+            <span v-if="!isFold" class="btn-text">历史对话</span>
+            <a-list style="width: 100px" :split="false">
+              <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
+                >历史数据1</a-list-item
+              >
+              <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
+                >历史数据12</a-list-item
+              >
+              <a-list-item style="padding: 5px 0 0 30px; color: #5e7081; font-size: 12px; white-space: nowrap; text-overflow: ellipsis"
+                >历史数据123</a-list-item
+              >
+            </a-list>
+          </div>
+          <div
+            class="foldBtn"
+            :style="{ backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/Fold.svg' : '/src/assets/images/vent/home/unfold.svg'})` }"
+            @click="fold"
+          ></div>
         </div>
-        <div
-          class="foldBtn"
-          :style="{ backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/Fold.svg' : '/src/assets/images/vent/home/unfold.svg'})` }"
-          @click="fold"
-        ></div>
-      </div>
-      <!-- 右侧对话框 -->
-      <div class="right-side">
-        <div class="input-content">
-          <!-- 对话区域 -->
-          <div class="dialog-area">
-            <div v-for="message in sortedMessages" :key="message.id" :class="['message-item', message.type]">
-              <!-- 用户提问样式 -->
-              <div v-if="message.type === 'user'" class="ask-message">
-                <span>{{ message.content }}</span>
-              </div>
+        <!-- 右侧对话框 -->
+        <div class="right-side">
+          <div class="input-content">
+            <!-- 对话区域 -->
+            <div class="dialog-area">
+              <div v-for="message in sortedMessages" :key="message.id" :class="['message-item', message.type]">
+                <!-- 用户提问样式 -->
+                <div v-if="message.type === 'user'" class="ask-message">
+                  <span>{{ message.content }}</span>
+                </div>
 
-              <!-- 系统回答样式 -->
-              <div v-else class="system-message">
-                <div class="answerIcon"></div>
-                <div class="answer-message">
-                  <div>
-                    <span>{{ message.content }}</span>
+                <!-- 系统回答样式 -->
+                <div v-else class="system-message">
+                  <div class="answerIcon"></div>
+                  <div class="answer-message">
+                    <div>
+                      <span>{{ message.content }}</span>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-          <!-- 文本输入区域 -->
-          <div v-if="spinning" class="thinking-area">
-            <span style="color: #fff">思考中···</span>
-            <a-spin :spinning="spinning"></a-spin>
-          </div>
-          <div class="input-area">
-            <textarea v-model="inputText" placeholder="请输入你的问题"> </textarea>
-            <!-- 底部操作栏 -->
-            <div class="action-bar">
-              <!-- 文件上传按钮 -->
-              <label class="upload-btn">
-                <div class="send-file" />
-                <span class="divider"> | </span>
-                <div class="send-img" />
-              </label>
-              <!-- 发送按钮 -->
-              <div class="send-btn" @click="handleSend"></div>
+            <!-- 文本输入区域 -->
+            <div v-if="spinning" class="thinking-area">
+              <span style="color: #fff">思考中···</span>
+              <a-spin :spinning="spinning"></a-spin>
+            </div>
+            <div class="input-area">
+              <textarea v-model="inputText" placeholder="请输入你的问题"> </textarea>
+              <!-- 底部操作栏 -->
+              <div class="action-bar">
+                <!-- 文件上传按钮 -->
+                <label class="upload-btn">
+                  <div class="send-file" />
+                  <span class="divider"> | </span>
+                  <div class="send-img" />
+                </label>
+                <!-- 发送按钮 -->
+                <div class="send-btn" @click="handleSend"></div>
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
@@ -252,6 +254,31 @@ onMounted(() => {});
   box-shadow: 0 0 3px 3px #1074c1;
   background-color: #09172c;
 }
+
+/* 遮罩层淡入淡出 */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* 弹窗缩放动画 */
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.3s ease;
+}
+.scale-enter-from {
+  transform: scale(0.5) translate(-50%, -50%);
+  opacity: 0;
+}
+.scale-leave-to {
+  transform: scale(1.2) translate(-50%, -50%);
+  opacity: 0;
+}
+
 .left-side {
   background: #0c2842;
   transition: width 0.5s ease; /* 平滑过渡动画 */