1.PC的AI聊天细节修改

src/layout/index.vue

@@ -20,12 +20,14 @@
     <div>
       <!-- 其他页面内容 -->
       <!-- 触发按钮，控制弹窗显示隐藏 -->
-      <div class="ai-hover" @click="showAI = !showAI">
+      <div class="ai-hover" @click="toggleAI">
         <span v-if="!showAI" style="font-size: 14px; font-weight: bold;">AI</span>
         <i v-else class="el-icon-close" style="font-size: 20px;"></i>
       </div>
       <!-- 聊天弹窗，通过 v-if 控制显隐 -->
-      <ChatPopup v-if="showAI" @close="showAI = false" />
+      <transition name="chat-popup">
+        <ChatPopup v-if="showAI" @close="showAI = false" />
+      </transition>
     </div>
 
   </div>
@@ -94,11 +96,12 @@ export default {
     },
     // 切换AI弹窗显示状态
     toggleAI() {
-      this.showAI = !this.showAI
-      // 如果需要在显示时执行原有逻辑，可以取消下面的注释
-      // if (this.showAI) {
-      //   this.initializeAI()
-      // }
+      // 使用明确的状态切换，避免与close事件冲突
+      if (this.showAI) {
+        this.showAI = false
+      } else {
+        this.showAI = true
+      }
     },
     // 原有AI初始化逻辑，保持注释状态
     async initializeAI() {
@@ -222,5 +225,41 @@ export default {
   color: #fff;
   cursor: pointer;
   z-index: 9999;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+}
+
+.ai-hover:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.4);
+}
+
+/* 聊天弹窗动画 - 优化版本，避免闪烁 */
+.chat-popup-enter-active {
+  transition: all 0.25s ease-out;
+}
+
+.chat-popup-leave-active {
+  transition: all 0.15s ease-in;
+}
+
+.chat-popup-enter-from {
+  opacity: 0;
+  transform: translateY(15px) scale(0.95);
+}
+
+.chat-popup-enter-to {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.chat-popup-leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.chat-popup-leave-to {
+  opacity: 0;
+  transform: translateY(15px) scale(0.95);
 }
 </style>