st-comp 0.0.267 → 0.0.269

package/packages/VarietyAiHelper/index.vue

@@ -2,8 +2,8 @@
 import dayjs from "dayjs";
 import { ElMessage } from "element-plus";
 import { getUserData, getToken } from "st-func";
-import { inject, ref, nextTick, watch, reactive, onMounted } from "vue";
-import { sendToBaiLianWorkflowStreaming } from "../../public/aiTools";
+import { inject, ref, nextTick, watch, reactive, computed } from "vue";
+import { sendToNodeVarietyAiHelper } from "../../public/aiTools";
 import { UserFilled, Service, Promotion, Refresh, SuccessFilled } from "@element-plus/icons-vue";
 
 // ==================== 基础配置 ====================
@@ -20,12 +20,10 @@ const props = defineProps({
 });
 
 // ==================== 响应式数据 ====================
-const isSending = ref(false); // 是否正在发送消息
-const isThinking = ref(false); // AI是否正在思考（首包到达前）
-const nodeProgressList = ref([]); // 工作流节点执行进度列表
-const showFinalResult = ref(false); // 是否展示最终结果
-
-// ==================== 消息队列 ====================
+const isSending = ref(false);
+const isThinking = ref(false);
+const nodeProgressList = ref([]);
+const showFinalResult = ref(false);
 const messageListRef = ref(null);
 const messageList = ref([
   {
@@ -40,16 +38,21 @@ const messageList = ref([
   },
 ]);
 
-const userInput = ref(""); // 用户输入内容
-
-// ==================== 反馈弹窗 ====================
+const userInput = ref("");
 const feedbackDialogVisible = ref(false);
 const feedbackContent = ref("");
 const feedbackMessageIndex = ref({});
 
-// ==================== 工具函数 ====================
+// ==================== 计算属性 ====================
+const completedCount = computed(() => nodeProgressList.value.filter((n) => n.status === "success").length);
+const totalCount = computed(() => nodeProgressList.value.length);
+const progressPercent = computed(() => (totalCount.value ? (completedCount.value / totalCount.value) * 100 : 0));
+const currentStepName = computed(() => {
+  const running = nodeProgressList.value.find((n) => n.status === "executing");
+  return running ? running.name : "处理中";
+});
 
-// 判断字符串是否可解析为 JSON 对象
+// ==================== 工具函数 ====================
 const isJSONSerializable = (str) => {
   if (typeof str !== "string") return false;
   try {
@@ -60,7 +63,6 @@ const isJSONSerializable = (str) => {
   }
 };
 
-// 将 JSON 字符串解析为展示数据（parsedConditions + 其他参数）
 const formatJSONContent = (content) => {
   if (!isJSONSerializable(content)) return null;
   try {
@@ -72,7 +74,6 @@ const formatJSONContent = (content) => {
   }
 };
 
-// 将解析后的数据渲染为 HTML 字符串
 const renderJSONContent = (jsonData) => {
   if (!jsonData) return "";
   let html = "";
@@ -87,8 +88,6 @@ const renderJSONContent = (jsonData) => {
 };
 
 // ==================== 反馈处理 ====================
-
-// 处理用户反馈操作（满意 / 不满意 / 默认记录）
 const handleFeedbackAction = async (action, messageIndex) => {
   switch (action) {
     case "satisfied": {
@@ -151,20 +150,14 @@ const handleFeedbackAction = async (action, messageIndex) => {
 };
 
 // ==================== 消息发送 ====================
-
-// ==================== 消息发送 ====================
-
-// 发送消息到工作流
 const sendMessage = async () => {
   const content = userInput.value.trim();
   if (!content) return ElMessage.warning("请输入消息内容");
   if (isSending.value) return;
 
-  // 重置状态
   nodeProgressList.value = [];
   showFinalResult.value = false;
 
-  // 添加用户消息
   messageList.value.push({
     role: "user",
     content: content,
@@ -173,7 +166,6 @@ const sendMessage = async () => {
   userInput.value = "";
   await scrollToBottom();
 
-  // 添加 AI 占位消息
   messageList.value.push({
     role: "assistant",
     content: "",
@@ -191,19 +183,14 @@ const sendMessage = async () => {
 
   let fullResponse = "";
   let resTime = new Date().getTime();
-  let firstNodeReceived = false; // 标记是否已收到首个节点推送
+  let firstNodeReceived = false;
 
   try {
-    const appId = "1977602b357e4dab9d0b74899d5323b3";
-    const apiKey = "sk-d995eb26a4334bdeb2ccb4cbfaf51de8";
-    await sendToBaiLianWorkflowStreaming({
-      mode: import.meta.env.MODE,
-      appId,
-      apiKey,
+    await sendToNodeVarietyAiHelper({
+      baseUrl: stConfig.env.VITE_BASE_URL,
       token: getToken(),
       value: content,
       callback: (type, data) => {
-        // 工作流返回错误
         if (type === "error") {
           isThinking.value = false;
           isSending.value = false;
@@ -223,11 +210,10 @@ const sendMessage = async () => {
           return;
         }
 
-        // 节点执行进度更新
         if (type === "node") {
-          // 首个节点推送时记录首包响应时间
           if (!firstNodeReceived) {
             firstNodeReceived = true;
+            isThinking.value = false;
             const lastMessage = messageList.value[messageList.value.length - 1];
             if (lastMessage && lastMessage.role === "assistant" && lastMessage.firstPackageTime === 0) {
               lastMessage.firstPackageTime = new Date().getTime() - resTime;
@@ -244,7 +230,6 @@ const sendMessage = async () => {
           return;
         }
 
-        // 最终结果（工作流结束时一次性推送）
         if (type === "message") {
           fullResponse = data;
           const lastMessage = messageList.value[messageList.value.length - 1];
@@ -254,9 +239,7 @@ const sendMessage = async () => {
           }
         }
 
-        // 流式结束，展示反馈按钮并触发回调
         if (type === "finish") {
-          isThinking.value = false;
           isSending.value = false;
           showFinalResult.value = true;
           const lastMessage = messageList.value[messageList.value.length - 1];
@@ -267,7 +250,6 @@ const sendMessage = async () => {
             handleFeedbackAction("default", messageList.value.length - 1);
           }
 
-          // 解析最终结果并回调父组件
           try {
             const jsonResponse = JSON.parse(fullResponse);
             if (jsonResponse.parsedConditions) {
@@ -281,7 +263,6 @@ const sendMessage = async () => {
       },
     });
   } catch (error) {
-    // 网络异常处理
     ElMessage.error(`AI响应异常: ${error}`);
     messageList.value.pop();
     messageList.value.push({
@@ -302,8 +283,6 @@ const sendMessage = async () => {
 };
 
 // ==================== 键盘事件 ====================
-
-// Enter 发送，Ctrl+Enter 换行
 const handleKeydown = (event) => {
   if (event.key === "Enter") {
     if (event.ctrlKey) {
@@ -323,8 +302,6 @@ const handleKeydown = (event) => {
 };
 
 // ==================== 滚动 & 初始化 ====================
-
-// 自动滚动到消息列表底部
 const scrollToBottom = async () => {
   await nextTick();
   if (messageListRef.value) {
@@ -332,7 +309,6 @@ const scrollToBottom = async () => {
   }
 };
 
-// 监听消息队列变化，自动滚动
 watch(
   () => messageList.value,
   () => {
@@ -341,7 +317,6 @@ watch(
   { deep: true },
 );
 
-// 关闭反馈弹窗时清空内容
 watch(
   () => feedbackDialogVisible.value,
   (newValue) => {
@@ -349,7 +324,6 @@ watch(
   },
 );
 
-// 暴露 open 方法供父组件调用
 defineExpose({
   open: () => {
     visible.value = true;
@@ -361,7 +335,6 @@ defineExpose({
 </script>
 
 <template>
-  <!-- ==================== 主对话框 ==================== -->
   <el-dialog
     class="ai-dialog"
     v-model="visible"
@@ -374,7 +347,6 @@ defineExpose({
     :modal-penetrable="true"
   >
     <div class="ai-dialog-body">
-      <!-- 消息列表 -->
       <div
         ref="messageListRef"
         class="message-list"
@@ -385,9 +357,7 @@ defineExpose({
           :class="message.role"
           class="message-item"
         >
-          <!-- 有内容 或 是最后一条AI消息且有节点进度时，渲染消息气泡 -->
           <template v-if="message.content || (index === messageList.length - 1 && message.role === 'assistant' && nodeProgressList.length > 0)">
-            <!-- 头像 -->
             <div class="avatar">
               <el-avatar
                 :size="32"
@@ -396,12 +366,10 @@ defineExpose({
             </div>
 
             <div class="message-content">
-              <!-- 节点执行进度（仅最新AI消息 & 未完成时展示） -->
               <div
                 v-if="index === messageList.length - 1 && message.role === 'assistant' && nodeProgressList.length > 0 && !showFinalResult"
                 class="node-progress"
               >
-                <!-- 已完成/执行中节点 -->
                 <div
                   v-for="node in nodeProgressList"
                   :key="node.name"
@@ -421,25 +389,24 @@ defineExpose({
                   </span>
                   <span class="node-name">{{ node.name }}</span>
                 </div>
-                <!-- 所有节点完成，等待下一步 -->
-                <div
-                  v-if="nodeProgressList.length > 0 && nodeProgressList.every((n) => n.status === 'success') && !showFinalResult"
-                  class="node-progress-item next-step"
-                >
-                  <span class="node-status-icon">
-                    <el-icon class="node-icon waiting"><Refresh /></el-icon>
-                  </span>
-                  <span class="node-name">正在执行下一步...</span>
+
+                <div class="progress-footer">
+                  <el-progress
+                    :percentage="progressPercent"
+                    :show-text="false"
+                    :stroke-width="4"
+                    color="#667eea"
+                  />
+                  <span class="progress-text">第 {{ completedCount }}/{{ totalCount }} 步 · {{ currentStepName }}</span>
                 </div>
               </div>
 
-              <!-- JSON 结果渲染 -->
               <div
                 v-if="isJSONSerializable(message.content)"
                 class="message-json"
                 v-html="renderJSONContent(formatJSONContent(message.content))"
               ></div>
-              <!-- 普通文本 -->
+
               <div
                 v-else-if="message.content"
                 class="message-text"
@@ -447,10 +414,8 @@ defineExpose({
                 {{ message.content }}
               </div>
 
-              <!-- 消息时间 -->
               <div class="message-createTime">{{ message.createTime }}</div>
 
-              <!-- 反馈按钮（仅AI消息） -->
               <template v-if="message.role === 'assistant'">
                 <template v-if="message.showFeedback && !message.hasFeedback">
                   <div class="message-createTime">请问对本轮查询结果是否满意?</div>
@@ -479,28 +444,14 @@ defineExpose({
           </template>
         </div>
 
-        <!-- 首包响应前的思考动画 -->
         <div
           v-if="isThinking && nodeProgressList.length === 0 && !messageList[messageList.length - 1]?.content"
-          class="message-item assistant"
+          class="thinking-placeholder"
         >
-          <div class="avatar">
-            <el-avatar
-              :size="32"
-              :icon="Service"
-            />
-          </div>
-          <div class="message-content">
-            <div class="typing-indicator">
-              <span></span>
-              <span></span>
-              <span></span>
-            </div>
-          </div>
+          🤔 正在分析您的需求...
         </div>
       </div>
 
-      <!-- 输入区域 -->
       <div class="input-area">
         <el-input
           class="message-input"
@@ -530,7 +481,6 @@ defineExpose({
     </div>
   </el-dialog>
 
-  <!-- ==================== 反馈弹窗 ==================== -->
   <el-dialog
     v-model="feedbackDialogVisible"
     title="📝 反馈意见"
@@ -567,13 +517,11 @@ defineExpose({
     height: 480px;
     background: transparent;
 
-    // ========== 消息列表 ==========
     .message-list {
       flex: 1;
       overflow-y: auto;
       padding: 20px 24px;
 
-      // 滚动条
       &::-webkit-scrollbar {
         width: 6px;
       }
@@ -589,12 +537,24 @@ defineExpose({
         }
       }
 
-      // 单条消息
       .message-item {
         display: flex;
         animation: fadeInUp 0.3s ease-out;
         margin-bottom: 20px;
 
+        &:nth-child(1) {
+          animation-delay: 0.05s;
+        }
+        &:nth-child(2) {
+          animation-delay: 0.1s;
+        }
+        &:nth-child(3) {
+          animation-delay: 0.15s;
+        }
+        &:nth-child(4) {
+          animation-delay: 0.2s;
+        }
+
         .avatar {
           flex-shrink: 0;
           :deep(.el-avatar) {
@@ -611,138 +571,9 @@ defineExpose({
           display: flex;
           flex-direction: column;
           max-width: 70%;
-
-          // 节点进度卡片
-          .node-progress {
-            padding: 12px 16px;
-            border-radius: 12px;
-            margin-bottom: 8px;
-            border: 1px solid rgba(102, 126, 234, 0.1);
-
-            .node-progress-item {
-              display: flex;
-              align-items: center;
-              gap: 8px;
-              padding: 4px 0;
-              font-size: 13px;
-              color: #6b7280;
-
-              .node-status-icon {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 18px;
-                flex-shrink: 0;
-              }
-
-              .node-icon {
-                font-size: 16px;
-                &.done {
-                  color: #22c55e;
-                } // 完成：绿色
-                &.running {
-                  color: #667eea;
-                  animation: spin 1.2s linear infinite;
-                } // 执行中：旋转
-                &.waiting {
-                  color: #d1d5db;
-                  animation: spin 1.2s linear infinite;
-                } // 等待中：灰色旋转
-              }
-
-              .node-name {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-              }
-            }
-
-            .next-step .node-name {
-              color: #9ca3af;
-            }
-          }
-
-          .message-json,
-          .message-text {
-            padding: 10px 16px;
-            font-size: 14px;
-            line-height: 1.5;
-            word-wrap: break-word;
-            white-space: pre-wrap;
-          }
-
-          .message-createTime {
-            font-size: 11px;
-            color: #9ca3af;
-            margin-top: 6px;
-          }
-
-          // 反馈按钮
-          .feedback-buttons {
-            display: flex;
-            gap: 12px;
-            margin-top: 12px;
-
-            .feedback-btn {
-              display: flex;
-              align-items: center;
-              gap: 6px;
-              padding: 4px 10px;
-              border: none;
-              border-radius: 20px;
-              font-size: 13px;
-              font-weight: 500;
-              cursor: pointer;
-              transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-              background: rgba(255, 255, 255, 0.9);
-              backdrop-filter: blur(10px);
-
-              .btn-emoji {
-                font-size: 16px;
-                transition: transform 0.2s ease;
-              }
-              .btn-text {
-                font-size: 13px;
-              }
-              &:hover {
-                transform: translateY(-2px);
-                .btn-emoji {
-                  transform: scale(1.1);
-                }
-              }
-              &:active {
-                transform: translateY(0);
-              }
-            }
-
-            .satisfied-btn {
-              background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
-              color: #1890ff;
-              border: 1px solid rgba(24, 144, 255, 0.2);
-              box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
-              &:hover {
-                background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
-                border-color: #1890ff;
-                box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
-              }
-            }
-
-            .unsatisfied-btn {
-              background: linear-gradient(135deg, #fff1f0 0%, #ffe7e5 100%);
-              color: #ff4d4f;
-              border: 1px solid rgba(255, 77, 79, 0.2);
-              box-shadow: 0 2px 8px rgba(255, 77, 79, 0.1);
-              &:hover {
-                background: linear-gradient(135deg, #ffe7e5 0%, #ffccc7 100%);
-                border-color: #ff4d4f;
-                box-shadow: 0 4px 12px rgba(255, 77, 79, 0.2);
-              }
-            }
-          }
         }
       }
 
-      // 用户消息靠右
       .user {
         flex-direction: row-reverse;
         .avatar {
@@ -762,42 +593,240 @@ defineExpose({
         }
       }
 
-      // AI消息靠左
       .assistant {
         .avatar {
           margin-right: 12px;
         }
         .message-content {
           align-items: flex-start;
-          .message-text {
-            border-radius: 18px 18px 18px 4px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-            border: 1px solid rgba(102, 126, 234, 0.2);
+        }
+      }
+    }
+
+    .node-progress {
+      background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
+      border: 1px solid rgba(102, 126, 234, 0.15);
+      border-radius: 16px;
+      padding: 12px 16px;
+      margin-bottom: 8px;
+      min-width: 200px;
+      animation: breathe 2s ease-in-out infinite;
+
+      .node-progress-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 6px 0;
+        position: relative;
+        animation: slideIn 0.3s ease-out;
+
+        &:not(:last-child)::after {
+          content: "";
+          position: absolute;
+          left: 9px;
+          top: 28px;
+          width: 2px;
+          height: calc(100% - 8px);
+          background: linear-gradient(to bottom, #c7d2fe, transparent);
+        }
+
+        .node-status-icon {
+          position: relative;
+          z-index: 1;
+          background: white;
+          border-radius: 50%;
+          width: 20px;
+          height: 20px;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        }
+
+        .node-icon {
+          font-size: 12px;
+          &.done {
+            color: #22c55e;
           }
-          .message-json {
-            width: 100%;
-            border-radius: 18px 18px 18px 4px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-            border: 1px solid rgba(102, 126, 234, 0.2);
-
-            // 解析条件高亮卡片
-            :deep(.parsed-conditions) {
-              margin-top: 10px;
-              .parsed-conditions-item {
-                text-align: center;
-                color: #f56c6c;
-                margin-bottom: 10px;
-                padding: 2px;
-                background-color: rgb(253, 226, 226);
-                border-radius: 4px;
-              }
-            }
+          &.running {
+            color: #667eea;
+            animation: spin 0.6s linear infinite;
+          }
+          &.waiting {
+            color: #d1d5db;
+            animation: spin 0.8s linear infinite;
+          }
+        }
+
+        .node-name {
+          font-size: 13px;
+          color: #6b7280;
+          line-height: 20px;
+        }
+
+        &:has(.running) .node-name {
+          font-weight: 500;
+          color: #667eea;
+        }
+      }
+
+      .progress-footer {
+        margin-top: 12px;
+        padding-top: 8px;
+        border-top: 1px solid rgba(102, 126, 234, 0.1);
+
+        :deep(.el-progress) {
+          margin-bottom: 6px;
+        }
+
+        .progress-text {
+          font-size: 11px;
+          color: #9ca3af;
+          display: block;
+          text-align: center;
+        }
+      }
+    }
+
+    .thinking-placeholder {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      background: rgba(102, 126, 234, 0.08);
+      border-radius: 18px;
+      font-size: 13px;
+      color: #667eea;
+      width: fit-content;
+
+      &::before {
+        content: "";
+        width: 14px;
+        height: 14px;
+        border: 2px solid #667eea;
+        border-top-color: transparent;
+        border-radius: 50%;
+        animation: spin 0.8s linear infinite;
+      }
+    }
+
+    .message-json,
+    .message-text {
+      padding: 12px 16px;
+      font-size: 14px;
+      line-height: 1.6;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+      border-radius: 18px 18px 18px 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+      border: 1px solid rgba(102, 126, 234, 0.2);
+      background: white;
+      transition: all 0.3s ease;
+    }
+
+    .message-text {
+      animation: messageAppear 0.3s ease-out;
+    }
+
+    .message-json {
+      width: 100%;
+      overflow: hidden;
+      animation: resultAppear 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
+
+      :deep(.parsed-conditions) {
+        margin: 0;
+        padding: 0;
+
+        .parsed-conditions-item {
+          text-align: center;
+          color: #f56c6c;
+          margin-bottom: 8px;
+          padding: 8px 12px;
+          background: linear-gradient(135deg, #fff5f5 0%, #ffebeb 100%);
+          border-radius: 12px;
+          font-weight: 500;
+          transition: all 0.2s ease;
+
+          &:hover {
+            transform: translateX(4px);
+            background: linear-gradient(135deg, #ffebeb 0%, #ffe0e0 100%);
+          }
+
+          &:last-child {
+            margin-bottom: 0;
           }
         }
       }
     }
 
-    // ========== 输入区域 ==========
+    .message-createTime {
+      font-size: 11px;
+      color: #9ca3af;
+      margin-top: 6px;
+    }
+
+    .feedback-buttons {
+      display: flex;
+      gap: 12px;
+      margin-top: 12px;
+
+      .feedback-btn {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 10px;
+        border: none;
+        border-radius: 20px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        background: rgba(255, 255, 255, 0.9);
+        backdrop-filter: blur(10px);
+
+        .btn-emoji {
+          font-size: 16px;
+          transition: transform 0.2s ease;
+        }
+        .btn-text {
+          font-size: 13px;
+        }
+        &:hover {
+          transform: translateY(-2px);
+          .btn-emoji {
+            transform: scale(1.1);
+          }
+        }
+        &:active {
+          transform: translateY(0);
+        }
+      }
+
+      .satisfied-btn {
+        background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
+        color: #1890ff;
+        border: 1px solid rgba(24, 144, 255, 0.2);
+        box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+        &:hover {
+          background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+          border-color: #1890ff;
+          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+        }
+      }
+
+      .unsatisfied-btn {
+        background: linear-gradient(135deg, #fff1f0 0%, #ffe7e5 100%);
+        color: #ff4d4f;
+        border: 1px solid rgba(255, 77, 79, 0.2);
+        box-shadow: 0 2px 8px rgba(255, 77, 79, 0.1);
+        &:hover {
+          background: linear-gradient(135deg, #ffe7e5 0%, #ffccc7 100%);
+          border-color: #ff4d4f;
+          box-shadow: 0 4px 12px rgba(255, 77, 79, 0.2);
+        }
+      }
+    }
+
     .input-area {
       padding: 16px 24px 24px;
       backdrop-filter: blur(10px);
@@ -846,32 +875,68 @@ defineExpose({
   }
 }
 
-// ========== 思考动画（三个跳动点） ==========
-.typing-indicator {
-  display: flex;
-  gap: 4px;
-  padding: 10px 16px;
-  background: white;
-  border-radius: 18px;
-  border: 1px solid rgba(102, 126, 234, 0.1);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-
-  span {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    animation: typing 1.4s infinite ease-in-out;
-    &:nth-child(1) {
-      animation-delay: -0.32s;
-    }
-    &:nth-child(2) {
-      animation-delay: -0.16s;
-    }
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes breathe {
+  0%,
+  100% {
+    border-color: rgba(102, 126, 234, 0.15);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.05);
+  }
+  50% {
+    border-color: rgba(102, 126, 234, 0.35);
+    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.12);
+  }
+}
+
+@keyframes messageAppear {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes resultAppear {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
   }
 }
 
-// ========== 反馈弹窗 ==========
 .feedback-dialog-content {
   text-align: center;
   padding: 12px 0;
@@ -899,31 +964,6 @@ defineExpose({
   }
 }
 
-// ========== 动画关键帧 ==========
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes typing {
-  0%,
-  60%,
-  100% {
-    transform: translateY(0);
-    opacity: 0.4;
-  }
-  30% {
-    transform: translateY(-8px);
-    opacity: 1;
-  }
-}
-
 @keyframes shake {
   0%,
   100% {
@@ -936,10 +976,4 @@ defineExpose({
     transform: translateX(5px);
   }
 }
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
 </style>