st-comp 0.0.263 → 0.0.266

package/packages/VarietyAiHelper/index.vue

@@ -3,9 +3,10 @@ import dayjs from "dayjs";
 import { ElMessage } from "element-plus";
 import { getUserData } 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,43 @@ 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 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 +60,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 +84,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 +102,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 +125,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 +144,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 +174,7 @@ const sendMessage = async () => {
   userInput.value = "";
   await scrollToBottom();
 
-  // 创建AI消息占位符，记录对应的用户输入
+  // 添加 AI 占位消息
   messageList.value.push({
     role: "assistant",
     content: "",
@@ -194,23 +192,21 @@ 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({
       appId,
       apiKey,
       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,42 +221,58 @@ 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
+            // 将 customTagNames 转换为 customTag
             if (jsonResponse.customTagNames?.length) {
               const customTag = jsonResponse.customTagNames.reduce((result, item) => {
                 const id = tagMap.value[item];
@@ -278,10 +290,9 @@ const sendMessage = async () => {
       },
     });
   } catch (error) {
+    // 网络异常处理
     ElMessage.error(`AI响应异常: ${error}`);
-    // 移除占位的AI消息
     messageList.value.pop();
-    // 添加错误提示消息
     messageList.value.push({
       role: "assistant",
       userContent: content,
@@ -299,78 +310,83 @@ 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")]);
+  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,
-        };
+        return { ...cR, [cI.tagName]: cI.id };
       }, {}),
     };
   }, {});
 };
+
 onMounted(() => {
   getTotalTagMap();
 });
-// 监视消息队列 => 自动滚动
+
+// 监听消息队列变化，自动滚动
 watch(
   () => messageList.value,
-  () => {
-    scrollToBottom();
-  },
+  () => { scrollToBottom(); },
   { deep: true },
 );
-// 监视不满意的反馈详情窗口 => 关闭自动清空数据
+
+// 关闭反馈弹窗时清空内容
 watch(
   () => feedbackDialogVisible.value,
   (newValue) => {
     if (!newValue) feedbackContent.value = "";
   },
 );
+
+// 暴露 open 方法供父组件调用
 defineExpose({
   open: () => {
     visible.value = true;
-    nextTick(() => {
-      scrollToBottom();
-    });
+    nextTick(() => { scrollToBottom(); });
   },
 });
 </script>
 
 <template>
+  <!-- ==================== 主对话框 ==================== -->
   <el-dialog
     class="ai-dialog"
     v-model="visible"
@@ -383,55 +399,65 @@ defineExpose({
     :modal-penetrable="true"
   >
     <div class="ai-dialog-body">
-      <div
-        ref="messageListRef"
-        class="message-list"
-      >
+      <!-- 消息列表 -->
+      <div ref="messageListRef" class="message-list">
         <div
           v-for="(message, index) in messageList"
           :key="index"
           :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"
-              />
+              <el-avatar :size="32" :icon="message.role === 'user' ? UserFilled : Service" />
             </div>
+
             <div class="message-content">
-              <!-- 判断是否为可JSON序列化的数据 -->
-              <div
-                v-if="isJSONSerializable(message.content)"
-                class="message-json"
-                v-html="renderJSONContent(formatJSONContent(message.content))"
-              ></div>
-              <!-- 普通文本展示 -->
+              <!-- 节点执行进度（仅最新AI消息 & 未完成时展示） -->
               <div
-                v-else
-                class="message-text"
+                v-if="index === messageList.length - 1 && message.role === 'assistant' && nodeProgressList.length > 0 && !showFinalResult"
+                class="node-progress"
               >
-                {{ message.content }}
+                <!-- 已完成/执行中节点 -->
+                <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-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>
                   <div class="feedback-buttons">
-                    <button
-                      class="feedback-btn satisfied-btn"
-                      @click="handleFeedbackAction('satisfied', index)"
-                    >
+                    <button class="feedback-btn satisfied-btn" @click="handleFeedbackAction('satisfied', index)">
                       <span class="btn-emoji">👍</span>
                       <span class="btn-text">满意</span>
                     </button>
-                    <button
-                      class="feedback-btn unsatisfied-btn"
-                      @click="handleFeedbackAction('open', index)"
-                    >
+                    <button class="feedback-btn unsatisfied-btn" @click="handleFeedbackAction('open', index)">
                       <span class="btn-emoji">👎</span>
                       <span class="btn-text">不满意</span>
                     </button>
@@ -445,16 +471,13 @@ 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">
-            <el-avatar
-              :size="32"
-              :icon="Service"
-            />
+            <el-avatar :size="32" :icon="Service" />
           </div>
           <div class="message-content">
             <div class="typing-indicator">
@@ -466,6 +489,7 @@ defineExpose({
         </div>
       </div>
 
+      <!-- 输入区域 -->
       <div class="input-area">
         <el-input
           class="message-input"
@@ -480,14 +504,7 @@ defineExpose({
           <div class="input-hint">
             <span>Enter 发送 | Ctrl + Enter 换行</span>
           </div>
-          <el-button
-            class="send-btn"
-            type="primary"
-            :icon="Promotion"
-            :loading="isSending"
-            @click="sendMessage"
-            round
-          >
+          <el-button class="send-btn" type="primary" :icon="Promotion" :loading="isSending" @click="sendMessage" round>
             发送
           </el-button>
         </div>
@@ -495,30 +512,17 @@ defineExpose({
     </div>
   </el-dialog>
 
-  <!-- 窗口: 反馈意见 -->
-  <el-dialog
-    v-model="feedbackDialogVisible"
-    title="📝 反馈意见"
-    width="400px"
-  >
+  <!-- ==================== 反馈弹窗 ==================== -->
+  <el-dialog v-model="feedbackDialogVisible" title="📝 反馈意见" width="400px">
     <div class="feedback-dialog-content">
       <div class="feedback-emoji">😟</div>
       <p class="feedback-tip">很抱歉没能帮到您，请告诉我们哪里需要改进：</p>
-      <el-input
-        v-model="feedbackContent"
-        type="textarea"
-        :rows="4"
-        placeholder="[非必填]例如：回答不够准确、查询结果有误、界面体验不佳..."
-      />
+      <el-input v-model="feedbackContent" type="textarea" :rows="4" placeholder="[非必填]例如：回答不够准确、查询结果有误、界面体验不佳..." />
     </div>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="feedbackDialogVisible = false">取消</el-button>
-        <el-button
-          type="primary"
-          @click="handleFeedbackAction('unsatisfied', feedbackMessageIndex)"
-          >提交反馈</el-button
-        >
+        <el-button type="primary" @click="handleFeedbackAction('unsatisfied', feedbackMessageIndex)">提交反馈</el-button>
       </span>
     </template>
   </el-dialog>
@@ -531,45 +535,78 @@ defineExpose({
     flex-direction: column;
     height: 480px;
     background: transparent;
+
+    // ========== 消息列表 ==========
     .message-list {
       flex: 1;
       overflow-y: auto;
       padding: 20px 24px;
-      &::-webkit-scrollbar {
-        width: 6px;
-      }
-      &::-webkit-scrollbar-track {
-        background: rgba(0, 0, 0, 0.05);
-        border-radius: 3px;
-      }
+
+      // 滚动条
+      &::-webkit-scrollbar { width: 6px; }
+      &::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 3px; }
       &::-webkit-scrollbar-thumb {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         border-radius: 3px;
-
-        &:hover {
-          background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
-        }
+        &: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) {
             background: linear-gradient(135deg, #f0f2ff 0%, #e8ecff 100%);
             color: #667eea;
-            svg {
-              width: 18px;
-              height: 18px;
-            }
+            svg { width: 18px; height: 18px; }
           }
         }
+
         .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 +615,15 @@ defineExpose({
             word-wrap: break-word;
             white-space: pre-wrap;
           }
-          .message-createTime {
-            font-size: 11px;
-            color: #9ca3af;
-            margin-top: 6px;
-          }
+
+          .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;
@@ -601,57 +638,35 @@ defineExpose({
               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);
-              }
+              .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);
-              }
+              &: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);
-              }
+              &: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 {
-          margin-left: 12px;
-          margin-right: 0;
-        }
+        .avatar { margin-left: 12px; margin-right: 0; }
         .message-content {
           align-items: flex-end;
           .message-text {
@@ -659,16 +674,13 @@ defineExpose({
             border-radius: 18px 18px 4px 18px;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           }
-          .message-createTime {
-            text-align: right;
-          }
+          .message-createTime { text-align: right; }
         }
       }
-      // AI消息
+
+      // AI消息靠左
       .assistant {
-        .avatar {
-          margin-right: 12px;
-        }
+        .avatar { margin-right: 12px; }
         .message-content {
           align-items: flex-start;
           .message-text {
@@ -681,6 +693,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 +710,12 @@ defineExpose({
         }
       }
     }
+
+    // ========== 输入区域 ==========
     .input-area {
       padding: 16px 24px 24px;
       backdrop-filter: blur(10px);
+
       .message-input {
         :deep(.el-textarea__inner) {
           border-radius: 16px;
@@ -706,39 +723,33 @@ defineExpose({
           font-size: 14px;
           padding: 12px 16px;
           transition: all 0.3s ease;
-          &:focus {
-            border-color: #667eea;
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-          }
+          &:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
         }
       }
+
       .input-actions {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-top: 12px;
-        .input-hint {
-          font-size: 11px;
-          color: var(--el-color-info);
-        }
+
+        .input-hint { font-size: 11px; color: var(--el-color-info); }
+
         .send-btn {
           background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
           border: none;
           padding: 8px 20px;
           font-weight: 500;
           transition: all 0.3s ease;
-          &:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-          }
-          &:active {
-            transform: translateY(0);
-          }
+          &:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); }
+          &:active { transform: translateY(0); }
         }
       }
     }
   }
 }
+
+// ========== 思考动画（三个跳动点） ==========
 .typing-indicator {
   display: flex;
   gap: 4px;
@@ -754,75 +765,45 @@ 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;
-    }
-    &:nth-child(2) {
-      animation-delay: -0.16s;
-    }
+    &:nth-child(1) { animation-delay: -0.32s; }
+    &:nth-child(2) { animation-delay: -0.16s; }
   }
 }
+
+// ========== 反馈弹窗 ==========
 .feedback-dialog-content {
   text-align: center;
   padding: 12px 0;
 
-  .feedback-emoji {
-    font-size: 48px;
-    margin-bottom: 16px;
-    animation: shake 0.5s ease-in-out;
-  }
-
-  .feedback-tip {
-    font-size: 14px;
-    color: #666;
-    margin-bottom: 20px;
-    line-height: 1.6;
-  }
+  .feedback-emoji { font-size: 48px; margin-bottom: 16px; animation: shake 0.5s ease-in-out; }
+  .feedback-tip { font-size: 14px; color: #666; margin-bottom: 20px; line-height: 1.6; }
 
   :deep(.el-textarea__inner) {
     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);
-    }
+    &:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
   }
 }
+
+// ========== 动画关键帧 ==========
 @keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  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;
-  }
+  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
+  30% { transform: translateY(-8px); opacity: 1; }
 }
+
 @keyframes shake {
-  0%,
-  100% {
-    transform: translateX(0);
-  }
-  25% {
-    transform: translateX(-5px);
-  }
-  75% {
-    transform: translateX(5px);
-  }
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-5px); }
+  75% { transform: translateX(5px); }
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
 }
-</style>
+</style>