st-comp 0.0.263 → 0.0.267

package/packages/VarietyAiHelper/index.vue

@@ -1,11 +1,12 @@
 <script setup>
 import dayjs from "dayjs";
 import { ElMessage } from "element-plus";
-import { getUserData } from "st-func";
+import { getUserData, getToken } from "st-func";
 import { inject, ref, nextTick, watch, reactive, onMounted } from "vue";
-import { sendToBaiLianAppStreaming } from "../../public/aiTools";
-import { UserFilled, Service, Promotion } from "@element-plus/icons-vue";
+import { sendToBaiLianWorkflowStreaming } from "../../public/aiTools";
+import { UserFilled, Service, Promotion, Refresh, SuccessFilled } from "@element-plus/icons-vue";
 
+// ==================== 基础配置 ====================
 const stConfig = inject("stConfig");
 const userData = reactive(getUserData());
 const visible = ref(false);
@@ -13,41 +14,42 @@ const emit = defineEmits(["callBack"]);
 const props = defineProps({
   defaultMessage: {
     type: String,
-    default: "你好呀！我是你的品种池AI助手，会根据您的自然语言去进行品种的条件查询\n\n示例: \n帮我查A股科创板下品种转价差上证50并且总市值大于1千万, 最近一次红箱的开盘价大于前5根K线的最高价, 并按照总市值升序进行排序",
+    default:
+      "你好呀！我是你的品种池AI助手，会根据您的自然语言去进行品种的条件查询\n\n示例: \n帮我查A股科创板下品种转价差上证50并且总市值大于1千万, 最近一次红箱的开盘价大于前5根K线的最高价, 并按照总市值升序进行排序",
   },
 });
 
-// 自定义标签数据
-const tagMap = ref();
+// ==================== 响应式数据 ====================
+const isSending = ref(false); // 是否正在发送消息
+const isThinking = ref(false); // AI是否正在思考（首包到达前）
+const nodeProgressList = ref([]); // 工作流节点执行进度列表
+const showFinalResult = ref(false); // 是否展示最终结果
 
-// loading状态
-const isSending = ref(false);
-const isThinking = ref(false);
-
-// 消息队列
+// ==================== 消息队列 ====================
 const messageListRef = ref(null);
 const messageList = ref([
   {
-    role: "assistant", // AI-assistant, 用户-user
+    role: "assistant",
     content: props.defaultMessage,
     userContent: null,
-    showFeedback: false, // 是否展示反馈按钮(默认信息不用展示)
-    hasFeedback: false, // 是否已进行过反馈
-    createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"), // 消息发起时间
-    resTime: 0, // 响应总耗时
-    firstPackageTime: 0, // 首包响应耗时
+    showFeedback: false,
+    hasFeedback: false,
+    createTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+    resTime: 0,
+    firstPackageTime: 0,
   },
 ]);
 
-// 用户输入
-const userInput = ref("");
+const userInput = ref(""); // 用户输入内容
 
-// 反馈弹窗
+// ==================== 反馈弹窗 ====================
 const feedbackDialogVisible = ref(false);
 const feedbackContent = ref("");
-const feedbackMessageIndex = ref({}); // 当前点击要反馈的message的索引
+const feedbackMessageIndex = ref({});
 
-// 辅助函数：判断是否可JSON序列化
+// ==================== 工具函数 ====================
+
+// 判断字符串是否可解析为 JSON 对象
 const isJSONSerializable = (str) => {
   if (typeof str !== "string") return false;
   try {
@@ -57,25 +59,23 @@ const isJSONSerializable = (str) => {
     return false;
   }
 };
-// 辅助函数：解析并格式化JSON内容
+
+// 将 JSON 字符串解析为展示数据（parsedConditions + 其他参数）
 const formatJSONContent = (content) => {
   if (!isJSONSerializable(content)) return null;
   try {
     const jsonData = JSON.parse(content);
     const { parsedConditions, ...webParams } = jsonData;
-    return {
-      parsedConditions: parsedConditions,
-      webParams,
-    };
+    return { parsedConditions, webParams };
   } catch {
     return null;
   }
 };
-// 辅助函数：渲染JSON内容为HTML
+
+// 将解析后的数据渲染为 HTML 字符串
 const renderJSONContent = (jsonData) => {
   if (!jsonData) return "";
   let html = "";
-  // 渲染 parsedConditions
   if (jsonData.parsedConditions?.length) {
     html += '<div class="parsed-conditions">';
     jsonData.parsedConditions.forEach((text) => {
@@ -83,20 +83,17 @@ const renderJSONContent = (jsonData) => {
     });
     html += "</div>";
   }
-  // 渲染 webParams
-  // html += '<div class="web-params">';
-  // html += `<div>${JSON.stringify(jsonData.webParams)}</div>`;
-  // html += "</div>";
   return html;
 };
 
-// 反馈弹窗相关函数处理
+// ==================== 反馈处理 ====================
+
+// 处理用户反馈操作（满意 / 不满意 / 默认记录）
 const handleFeedbackAction = async (action, messageIndex) => {
   switch (action) {
-    // 窗口: 提交(满意)
     case "satisfied": {
       const message = messageList.value[messageIndex];
-      const params = {
+      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", {
         userName: userData.username,
         userContent: message.userContent,
         aiContent: message.content,
@@ -104,25 +101,21 @@ const handleFeedbackAction = async (action, messageIndex) => {
         createTime: message.createTime,
         resTime: message.resTime,
         firstPackageTime: message.firstPackageTime,
-
-        isSolved: 1, // 是否解决
-        logOrigin: 1, // 日志来源
-      };
-      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", params);
+        isSolved: 1,
+        logOrigin: 1,
+      });
       ElMessage.success("感谢您的评价！");
       messageList.value[messageIndex].hasFeedback = true;
       break;
     }
-    // 窗口: 打开
     case "open": {
       feedbackMessageIndex.value = messageIndex;
       feedbackDialogVisible.value = true;
       break;
     }
-    // 窗口: 提交(不满意)
     case "unsatisfied": {
       const message = messageList.value[messageIndex];
-      const params = {
+      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", {
         userName: userData.username,
         userContent: message.userContent,
         userSuggestion: feedbackContent.value,
@@ -131,20 +124,17 @@ const handleFeedbackAction = async (action, messageIndex) => {
         resTime: message.resTime,
         createTime: message.createTime,
         firstPackageTime: message.firstPackageTime,
-
-        isSolved: 0, // 是否解决
-        logOrigin: 1, // 日志来源
-      };
-      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", params);
+        isSolved: 0,
+        logOrigin: 1,
+      });
       ElMessage.success("感谢您的反馈！我们将持续跟踪并进行优化");
       feedbackDialogVisible.value = false;
       messageList.value[messageIndex].hasFeedback = true;
       break;
     }
-    // 自动提交记录跟踪日志
     case "default": {
       const message = messageList.value[messageIndex];
-      const params = {
+      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", {
         userName: userData.username,
         userContent: message.userContent,
         userSuggestion: feedbackContent.value,
@@ -153,21 +143,28 @@ const handleFeedbackAction = async (action, messageIndex) => {
         resTime: message.resTime,
         createTime: message.createTime,
         firstPackageTime: message.firstPackageTime,
-
-        isSolved: 1, // 是否解决
-        logOrigin: 1, // 日志来源
-      };
-      await stConfig.request.post("/alarm/deliversign/addVarietyAiHelperLog", params);
+        isSolved: 1,
+        logOrigin: 1,
+      });
     }
   }
 };
-// 发送消息
+
+// ==================== 消息发送 ====================
+
+// ==================== 消息发送 ====================
+
+// 发送消息到工作流
 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,
@@ -176,7 +173,7 @@ const sendMessage = async () => {
   userInput.value = "";
   await scrollToBottom();
 
-  // 创建AI消息占位符，记录对应的用户输入
+  // 添加 AI 占位消息
   messageList.value.push({
     role: "assistant",
     content: "",
@@ -194,23 +191,23 @@ const sendMessage = async () => {
 
   let fullResponse = "";
   let resTime = new Date().getTime();
+  let firstNodeReceived = false; // 标记是否已收到首个节点推送
+
   try {
-    const appId = "9e54d112acfe4531bd1fc4fee8827fef";
+    const appId = "1977602b357e4dab9d0b74899d5323b3";
     const apiKey = "sk-d995eb26a4334bdeb2ccb4cbfaf51de8";
-    await sendToBaiLianAppStreaming({
+    await sendToBaiLianWorkflowStreaming({
+      mode: import.meta.env.MODE,
       appId,
       apiKey,
+      token: getToken(),
       value: content,
       callback: (type, data) => {
-        // 百炼应用错误
+        // 工作流返回错误
         if (type === "error") {
           isThinking.value = false;
           isSending.value = false;
-
-          // 移除占位的AI消息
           messageList.value.pop();
-
-          // 添加错误提示消息
           messageList.value.push({
             role: "assistant",
             userContent: content,
@@ -225,51 +222,57 @@ const sendMessage = async () => {
           scrollToBottom();
           return;
         }
-        // 流式输出(正常)
-        else if (type === "message") {
-          fullResponse += data;
-          // 直接更新最后一条AI消息
+
+        // 节点执行进度更新
+        if (type === "node") {
+          // 首个节点推送时记录首包响应时间
+          if (!firstNodeReceived) {
+            firstNodeReceived = true;
+            const lastMessage = messageList.value[messageList.value.length - 1];
+            if (lastMessage && lastMessage.role === "assistant" && lastMessage.firstPackageTime === 0) {
+              lastMessage.firstPackageTime = new Date().getTime() - resTime;
+            }
+          }
+
+          const existing = nodeProgressList.value.find((n) => n.name === data.name);
+          if (existing) {
+            existing.status = data.status;
+          } else {
+            nodeProgressList.value.push({ name: data.name, status: data.status });
+          }
+          scrollToBottom();
+          return;
+        }
+
+        // 最终结果（工作流结束时一次性推送）
+        if (type === "message") {
+          fullResponse = data;
           const lastMessage = messageList.value[messageList.value.length - 1];
           if (lastMessage && lastMessage.role === "assistant") {
             lastMessage.content = fullResponse;
             scrollToBottom();
           }
-          // 记录首包响应耗时
-          if (lastMessage.firstPackageTime === 0) {
-            lastMessage.firstPackageTime = new Date().getTime() - resTime;
-          }
         }
-        // 流式输出(完毕)
-        else if (type === "finish") {
+
+        // 流式结束，展示反馈按钮并触发回调
+        if (type === "finish") {
           isThinking.value = false;
           isSending.value = false;
+          showFinalResult.value = true;
           const lastMessage = messageList.value[messageList.value.length - 1];
 
-          // 显示反馈按钮
           if (lastMessage && lastMessage.role === "assistant") {
             lastMessage.showFeedback = true;
             lastMessage.resTime = new Date().getTime() - resTime;
             handleFeedbackAction("default", messageList.value.length - 1);
           }
 
-          // 触发回调
-          console.log(fullResponse);
+          // 解析最终结果并回调父组件
           try {
             const jsonResponse = JSON.parse(fullResponse);
-            // 切割处理: parsedConditions, 这个字段仅做AI提炼展示使用
             if (jsonResponse.parsedConditions) {
               delete jsonResponse.parsedConditions;
             }
-            // 切割处理: customTagNames, 这个字段需要被转换成customTag
-            if (jsonResponse.customTagNames?.length) {
-              const customTag = jsonResponse.customTagNames.reduce((result, item) => {
-                const id = tagMap.value[item];
-                if (id) result.push(id);
-                return result;
-              }, []);
-              delete jsonResponse.customTagNames;
-              jsonResponse.customTag = customTag;
-            }
             emit("callBack", jsonResponse);
           } catch (error) {
             emit("callBack", fullResponse);
@@ -278,10 +281,9 @@ const sendMessage = async () => {
       },
     });
   } catch (error) {
+    // 网络异常处理
     ElMessage.error(`AI响应异常: ${error}`);
-    // 移除占位的AI消息
     messageList.value.pop();
-    // 添加错误提示消息
     messageList.value.push({
       role: "assistant",
       userContent: content,
@@ -299,53 +301,38 @@ const sendMessage = async () => {
   }
 };
 
-// 辅助函数: Ctrl+Enter 换行，Enter 发送
+// ==================== 键盘事件 ====================
+
+// Enter 发送，Ctrl+Enter 换行
 const handleKeydown = (event) => {
   if (event.key === "Enter") {
     if (event.ctrlKey) {
-      // Ctrl + Enter: 插入换行符
       event.preventDefault();
       const textarea = event.target;
       const start = textarea.selectionStart;
       const end = textarea.selectionEnd;
       userInput.value = userInput.value.substring(0, start) + "\n" + userInput.value.substring(end);
-      // 将光标移动到新插入的换行符之后
       nextTick(() => {
         textarea.selectionStart = textarea.selectionEnd = start + 1;
       });
     } else {
-      // 单独的 Enter: 发送消息
       event.preventDefault();
       sendMessage();
     }
   }
 };
-// 辅助函数: 滚动到底部
+
+// ==================== 滚动 & 初始化 ====================
+
+// 自动滚动到消息列表底部
 const scrollToBottom = async () => {
   await nextTick();
   if (messageListRef.value) {
     messageListRef.value.scrollTop = messageListRef.value.scrollHeight;
   }
 };
-// 获取全部标签
-const getTotalTagMap = async () => {
-  const res = await Promise.all([stConfig.request.post("/alarm/deliversign/findTagsByUserId"), stConfig.request.post("/alarm/deliversign/findSystemTagsByTagName")]);
-  tagMap.value = res.reduce((result, item) => {
-    return {
-      ...result,
-      ...item.body?.reduce((cR, cI) => {
-        return {
-          ...cR,
-          [cI.tagName]: cI.id,
-        };
-      }, {}),
-    };
-  }, {});
-};
-onMounted(() => {
-  getTotalTagMap();
-});
-// 监视消息队列 => 自动滚动
+
+// 监听消息队列变化，自动滚动
 watch(
   () => messageList.value,
   () => {
@@ -353,13 +340,16 @@ watch(
   },
   { deep: true },
 );
-// 监视不满意的反馈详情窗口 => 关闭自动清空数据
+
+// 关闭反馈弹窗时清空内容
 watch(
   () => feedbackDialogVisible.value,
   (newValue) => {
     if (!newValue) feedbackContent.value = "";
   },
 );
+
+// 暴露 open 方法供父组件调用
 defineExpose({
   open: () => {
     visible.value = true;
@@ -371,6 +361,7 @@ defineExpose({
 </script>
 
 <template>
+  <!-- ==================== 主对话框 ==================== -->
   <el-dialog
     class="ai-dialog"
     v-model="visible"
@@ -383,6 +374,7 @@ defineExpose({
     :modal-penetrable="true"
   >
     <div class="ai-dialog-body">
+      <!-- 消息列表 -->
       <div
         ref="messageListRef"
         class="message-list"
@@ -393,30 +385,72 @@ defineExpose({
           :class="message.role"
           class="message-item"
         >
-          <template v-if="message.content">
-            <!-- 消息头像 -->
+          <!-- 有内容 或 是最后一条AI消息且有节点进度时，渲染消息气泡 -->
+          <template v-if="message.content || (index === messageList.length - 1 && message.role === 'assistant' && nodeProgressList.length > 0)">
+            <!-- 头像 -->
             <div class="avatar">
               <el-avatar
                 :size="32"
                 :icon="message.role === 'user' ? UserFilled : Service"
               />
             </div>
+
             <div class="message-content">
-              <!-- 判断是否为可JSON序列化的数据 -->
+              <!-- 节点执行进度（仅最新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"
+                  class="node-progress-item"
+                >
+                  <span class="node-status-icon">
+                    <el-icon
+                      v-if="node.status === 'success'"
+                      class="node-icon done"
+                      ><SuccessFilled
+                    /></el-icon>
+                    <el-icon
+                      v-else
+                      class="node-icon running"
+                      ><Refresh
+                    /></el-icon>
+                  </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>
+              </div>
+
+              <!-- JSON 结果渲染 -->
               <div
                 v-if="isJSONSerializable(message.content)"
                 class="message-json"
                 v-html="renderJSONContent(formatJSONContent(message.content))"
               ></div>
-              <!-- 普通文本展示 -->
+              <!-- 普通文本 -->
               <div
-                v-else
+                v-else-if="message.content"
                 class="message-text"
               >
                 {{ message.content }}
               </div>
+
+              <!-- 消息时间 -->
               <div class="message-createTime">{{ message.createTime }}</div>
-              <!-- 反馈按钮(仅AI侧展示) -->
+
+              <!-- 反馈按钮（仅AI消息） -->
               <template v-if="message.role === 'assistant'">
                 <template v-if="message.showFeedback && !message.hasFeedback">
                   <div class="message-createTime">请问对本轮查询结果是否满意?</div>
@@ -445,9 +479,9 @@ defineExpose({
           </template>
         </div>
 
-        <!-- AI首包响应思考Loading -->
+        <!-- 首包响应前的思考动画 -->
         <div
-          v-if="isThinking && !messageList[messageList.length - 1]?.content"
+          v-if="isThinking && nodeProgressList.length === 0 && !messageList[messageList.length - 1]?.content"
           class="message-item assistant"
         >
           <div class="avatar">
@@ -466,6 +500,7 @@ defineExpose({
         </div>
       </div>
 
+      <!-- 输入区域 -->
       <div class="input-area">
         <el-input
           class="message-input"
@@ -495,7 +530,7 @@ defineExpose({
     </div>
   </el-dialog>
 
-  <!-- 窗口: 反馈意见 -->
+  <!-- ==================== 反馈弹窗 ==================== -->
   <el-dialog
     v-model="feedbackDialogVisible"
     title="📝 反馈意见"
@@ -531,10 +566,14 @@ defineExpose({
     flex-direction: column;
     height: 480px;
     background: transparent;
+
+    // ========== 消息列表 ==========
     .message-list {
       flex: 1;
       overflow-y: auto;
       padding: 20px 24px;
+
+      // 滚动条
       &::-webkit-scrollbar {
         width: 6px;
       }
@@ -545,16 +584,17 @@ defineExpose({
       &::-webkit-scrollbar-thumb {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         border-radius: 3px;
-
         &:hover {
           background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
         }
       }
-      // 消息公共样式
+
+      // 单条消息
       .message-item {
         display: flex;
         animation: fadeInUp 0.3s ease-out;
         margin-bottom: 20px;
+
         .avatar {
           flex-shrink: 0;
           :deep(.el-avatar) {
@@ -566,10 +606,62 @@ defineExpose({
             }
           }
         }
+
         .message-content {
           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;
@@ -578,15 +670,19 @@ defineExpose({
             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;
@@ -618,24 +714,24 @@ defineExpose({
                 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;
@@ -645,7 +741,8 @@ defineExpose({
           }
         }
       }
-      // 用户消息
+
+      // 用户消息靠右
       .user {
         flex-direction: row-reverse;
         .avatar {
@@ -664,7 +761,8 @@ defineExpose({
           }
         }
       }
-      // AI消息
+
+      // AI消息靠左
       .assistant {
         .avatar {
           margin-right: 12px;
@@ -681,6 +779,8 @@ defineExpose({
             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 {
@@ -696,9 +796,12 @@ defineExpose({
         }
       }
     }
+
+    // ========== 输入区域 ==========
     .input-area {
       padding: 16px 24px 24px;
       backdrop-filter: blur(10px);
+
       .message-input {
         :deep(.el-textarea__inner) {
           border-radius: 16px;
@@ -712,15 +815,18 @@ defineExpose({
           }
         }
       }
+
       .input-actions {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-top: 12px;
+
         .input-hint {
           font-size: 11px;
           color: var(--el-color-info);
         }
+
         .send-btn {
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           border: none;
@@ -739,6 +845,8 @@ defineExpose({
     }
   }
 }
+
+// ========== 思考动画（三个跳动点） ==========
 .typing-indicator {
   display: flex;
   gap: 4px;
@@ -754,7 +862,6 @@ defineExpose({
     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;
     }
@@ -763,6 +870,8 @@ defineExpose({
     }
   }
 }
+
+// ========== 反馈弹窗 ==========
 .feedback-dialog-content {
   text-align: center;
   padding: 12px 0;
@@ -772,7 +881,6 @@ defineExpose({
     margin-bottom: 16px;
     animation: shake 0.5s ease-in-out;
   }
-
   .feedback-tip {
     font-size: 14px;
     color: #666;
@@ -784,13 +892,14 @@ defineExpose({
     border-radius: 12px;
     border: 1px solid rgba(102, 126, 234, 0.2);
     font-size: 14px;
-
     &:focus {
       border-color: #667eea;
       box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
     }
   }
 }
+
+// ========== 动画关键帧 ==========
 @keyframes fadeInUp {
   from {
     opacity: 0;
@@ -801,6 +910,7 @@ defineExpose({
     transform: translateY(0);
   }
 }
+
 @keyframes typing {
   0%,
   60%,
@@ -813,6 +923,7 @@ defineExpose({
     opacity: 1;
   }
 }
+
 @keyframes shake {
   0%,
   100% {
@@ -825,4 +936,10 @@ defineExpose({
     transform: translateX(5px);
   }
 }
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>