加入等待提示

src/views/AiEmotion.vue

@@ -24,6 +24,14 @@
   <!-- 股票标签页 -->
   <StockTabs />
 
+  <!-- 加载提示 -->
+  <div v-if="isLoading" class="loading-container">
+    <div class="loading-content">
+      <div class="loading-spinner"></div>
+      <div class="loading-text">AI小财神正在分析中，请稍候...</div>
+    </div>
+  </div>
+
   <!-- 渲染整个页面 -->
   <div v-if="isPageLoaded" class="class01">
     <div class="class00">
@@ -187,6 +195,7 @@ const userInputDisplayRef = ref(null);//消息区域的引用
 // 响应式数据
 const messages = ref([]);
 const isPageLoaded = ref(false); // 控制页面是否显示
+const isLoading = ref(false); // 控制加载状态
 const isRotating = ref(false);//控制旋转
 const version1 = ref(2); // 版本号
 const conclusionData = ref(''); // 存储第二个工作流接口返回的结论数据
@@ -273,6 +282,7 @@ const parsedConclusion = computed(() => {
 watch(currentStock, (newStock) => {
   if (newStock && newStock.apiData) {
     isPageLoaded.value = true;
+    isLoading.value = false; // 数据加载完成，关闭加载状态
     // 停止当前播放的音频
     stopAudio();
     // 重置触发状态，允许新股票重新触发效果
@@ -704,6 +714,9 @@ async function handleSendMessage(input) {
   if (input.trim()) {
     const userMessage = reactive({ sender: 'user', text: input });
     messages.value.push(userMessage);
+    // 设置加载状态，隐藏图表页面
+    isLoading.value = true;
+    isPageLoaded.value = false;
     // 触发图片旋转
     isRotating.value = true;
 
@@ -2237,4 +2250,46 @@ defineExpose({
     padding-top: 10%;
   }
 }
+/* 加载提示样式 */
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60vh;
+  padding: 40px 20px;
+}
+
+.loading-content {
+  text-align: center;
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%);
+  border: 2px solid rgba(0, 212, 255, 0.4);
+  border-radius: 20px;
+  padding: 40px;
+  backdrop-filter: blur(15px);
+  box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
+}
+
+.loading-spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(0, 212, 255, 0.3);
+  border-top: 4px solid #00d4ff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 20px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.loading-text {
+  color: #00d4ff;
+  font-size: 18px;
+  font-weight: bold;
+  text-shadow: 0 2px 8px rgba(0, 212, 255, 0.5);
+  letter-spacing: 1px;
+}
+
 </style>