思考过程加入动图；

src/views/AIchat.vue

@@ -690,7 +690,8 @@ async function showThinkingProcess(stockName = null) {
     class: 'ing',
     type: 'ing',
     flag: true,
-    content: '正在思考......'
+    content: '正在思考......',
+    gif: '/src/assets/img/gif/思考.gif'
   });
   chatStore.messages.push(thinkingMessage1);
   await new Promise(resolve => setTimeout(resolve, 1500));
@@ -702,7 +703,8 @@ async function showThinkingProcess(stockName = null) {
     class: 'ing',
     type: 'ing',
     flag: true,
-    content: '正在解析关键数据......'
+    content: '正在解析关键数据......',
+    gif: '/src/assets/img/gif/解析.gif'
   });
   chatStore.messages.push(thinkingMessage2);
   
@@ -721,7 +723,8 @@ async function showThinkingProcess(stockName = null) {
     class: 'ing',
     type: 'ing',
     flag: true,
-    content: `正在生成${stockName}全景作战报告......`
+    content: `正在生成${stockName}全景作战报告......`,
+    gif: '/src/assets/img/gif/生成.gif'
   });
   chatStore.messages.push(thinkingMessage3);
   await new Promise(resolve => setTimeout(resolve, 1500));
@@ -733,7 +736,8 @@ async function showThinkingProcess(stockName = null) {
     class: 'ing',
     type: 'ing',
     flag: true,
-    content: '报告已生成！'
+    content: '报告已生成！',
+    gif: '/src/assets/img/gif/生成.gif'
   });
   chatStore.messages.push(thinkingMessage4);
   await new Promise(resolve => setTimeout(resolve, 1500));
@@ -761,7 +765,8 @@ async function continueThinkingProcess(thinkingMessageRef, stockName) {
     class: 'ing',
     type: 'ing',
     flag: true,
-    content: `正在生成${stockName}全景作战报告......`
+    content: `正在生成${stockName}全景作战报告......`,
+    gif: '/src/assets/img/gif/生成.gif'
   });
   chatStore.messages.push(thinkingMessage3);
   await new Promise(resolve => setTimeout(resolve, 1500));
@@ -4209,19 +4214,22 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
-      <div v-else-if="msg.type == 'ing'">
-        <div v-if="msg.flag">
-          <span>{{ msg.content }}</span>
-          <span class="loading-dots">
-            <span class="dot">.</span>
-            <span class="dot">.</span>
-            <span class="dot">.</span>
-            <span class="dot">.</span>
-            <span class="dot">.</span>
-            <span class="dot">.</span>
-          </span>
+      <div v-else-if="msg.type == 'ing'" class="ai-message-container">
+        <img v-if="msg.gif" :src="msg.gif" alt="思考过程" class="thinking-gif" />
+        <div class="ai-message-content">
+          <div v-if="msg.flag">
+            <span>{{ msg.content }}</span>
+            <span class="loading-dots">
+              <span class="dot">.</span>
+              <span class="dot">.</span>
+              <span class="dot">.</span>
+              <span class="dot">.</span>
+              <span class="dot">.</span>
+              <span class="dot">.</span>
+            </span>
+          </div>
+          <div v-else v-html="msg.content"></div>
         </div>
-        <div v-else v-html="msg.content"></div>
       </div>
       <div v-else-if="msg.type == 'title1'" style="display: flex; width: 100%">
         <div class="mainTitle">
@@ -4459,7 +4467,6 @@ p {
   max-width: 80%;
   margin: 10px 0px;
   padding: 15px 20px;
-
   position: relative;
 }
 
@@ -4467,9 +4474,10 @@ p {
 .user-message-container {
   display: flex;
   align-items: flex-start;
-  margin: 10px 0;
+  margin: 10px 0px;
   justify-content: flex-end;
   gap: 10px;
+  align-items: center;
 }
 
 .user-message-speaker {
@@ -4507,7 +4515,9 @@ p {
   font-weight: bold;
   border-radius: 10px;
   margin: 0;
-  /* border-bottom-right-radius: 5px; */
+  width: fit-content;
+  display: flex;
+  align-items: center;
 }
 
 .message-bubble.ai {
@@ -4524,7 +4534,9 @@ p {
   border-radius: 10px;
   margin-left: 20px;
   margin-right: auto;
-  /* border-bottom-left-radius: 5px; */
+  display: flex;
+  align-items: center;
+  width: fit-content;
 }
 
 .message-bubble.ai.title1 {
@@ -4734,4 +4746,41 @@ p {
   height: 80%;
   width: 90%;
 }
+
+/* AI消息容器样式 */
+.ai-message-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-right: auto;
+  max-width: 80%;
+}
+
+/* 思考过程动图样式 */
+.thinking-gif {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  margin-top: 5px;
+  border-radius: 8px;
+  animation: float 2s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+/* AI消息内容样式 */
+.ai-message-content {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  width: fit-content;
+  overflow: visible;
+}
 </style>

src/views/AiEmotion.vue

@@ -27,8 +27,14 @@
           </div>
         </div>
         <!-- AI返回结果 -->
-        <div v-if="message.sender === 'ai'" class="message-bubble ai-message">
-          {{ message.text }}
+        <div v-if="message.sender === 'ai'" class="ai-message-container">
+          <!-- 思考过程动图 -->
+          <!-- <img v-if="message.gif" :src="message.gif" class="thinking-gif" alt="思考动图" /> -->
+          <div class="message-bubble ai-message">
+            <!-- 思考过程动图 -->
+            <img v-if="message.gif" :src="message.gif" class="thinking-gif" alt="思考动图" />
+            {{ message.text }}
+          </div>
         </div>
       </div>
     </div>
@@ -970,13 +976,21 @@ function startImageRotation() {
 // 显示思考过程
 async function showThinkingProcess(stockName = null) {
   // 第一步：正在思考
-  const thinkingMessage1 = reactive({ sender: 'ai', text: '正在思考......' });
+  const thinkingMessage1 = reactive({ 
+    sender: 'ai', 
+    text: 'AI情绪大模型正在思考......',
+    gif: '/src/assets/img/gif/思考.gif'
+  });
   messages.value.push(thinkingMessage1);
   await new Promise(resolve => setTimeout(resolve, 1500));
   messages.value.pop();
   
   // 第二步：正在解析关键数据（持续显示直到获取到股票名称）
-  const thinkingMessage2 = reactive({ sender: 'ai', text: '正在解析关键数据......' });
+  const thinkingMessage2 = reactive({ 
+    sender: 'ai', 
+    text: 'AI情绪大模型正在解析关键数据......',
+    gif: '/src/assets/img/gif/解析.gif'
+  });
   messages.value.push(thinkingMessage2);
   
   // 如果没有股票名称，保持第二步显示
@@ -989,7 +1003,11 @@ async function showThinkingProcess(stockName = null) {
   messages.value.pop();
   
   // 第三步：生成具体股票的量子四维矩阵图
-  const thinkingMessage3 = reactive({ sender: 'ai', text: `正在生成${stockName}量子四维矩阵图......` });
+  const thinkingMessage3 = reactive({ 
+    sender: 'ai', 
+    text: `AI情绪大模型正在生成${stockName}量子四维矩阵图......`,
+    gif: '/src/assets/img/gif/生成.gif'
+  });
   messages.value.push(thinkingMessage3);
   await new Promise(resolve => setTimeout(resolve, 1500));
   messages.value.pop();
@@ -1017,7 +1035,11 @@ async function continueThinkingProcess(thinkingMessageRef, stockName) {
   }
   
   // 第三步：生成具体股票的量子四维矩阵图
-  const thinkingMessage3 = reactive({ sender: 'ai', text: `正在生成${stockName}量子四维矩阵图......` });
+  const thinkingMessage3 = reactive({ 
+    sender: 'ai', 
+    text: `正在生成${stockName}量子四维矩阵图......`,
+    gif: '/src/assets/img/gif/生成.gif'
+  });
   messages.value.push(thinkingMessage3);
   
   // 返回第三步消息的引用，以便后续处理
@@ -2678,7 +2700,7 @@ const emit = defineEmits(['updateMessage', 'sendMessage', 'ensureAIchat']);
 /* 用户消息容器样式 */
 .user-message-container {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   margin-left: auto;
   gap: 10px;
 }
@@ -2716,7 +2738,7 @@ const emit = defineEmits(['updateMessage', 'sendMessage', 'ensureAIchat']);
   color: #6d22f8;
   background: white;
   font-weight: bold;
-  padding: 20px 20px;
+  padding: 15px 20px;
   border-radius: 15px;
   max-width: 60%;
   text-align: left;
@@ -2725,18 +2747,48 @@ const emit = defineEmits(['updateMessage', 'sendMessage', 'ensureAIchat']);
   /* 将用户消息推到右边 */
 }
 
+/* AI消息容器样式 */
+.ai-message-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-right: auto;
+  max-width: 80%;
+}
+
+/* 思考过程动图样式 */
+.thinking-gif {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  margin-top: 5px;
+  border-radius: 8px;
+  animation: float 2s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
 .ai-message {
   background-color: #f1f1f1;
   color: #333;
   font-weight: bold;
-  padding: 10px 15px;
+  padding: 20px 30px;
   border-radius: 15px;
-  max-width: 60%;
   text-align: left;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
   margin-right: auto;
   /* 将AI消息保持在左边 */
-  padding: 20px 20px;
+  white-space: nowrap;
+  width: fit-content;
+  overflow: visible;
+  align-items: center;
+  display: flex;
 }
 
 .input-container {