From 45f8577ed44112b8e5351fab30127636804031c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=8B=E6=9D=B0?= Date: Fri, 20 Jun 2025 14:19:55 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E5=85=A5=E7=AD=89=E5=BE=85=E6=8F=90?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AiEmotion.vue | 55 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue index cba25f2..dd53b74 100644 --- a/src/views/AiEmotion.vue +++ b/src/views/AiEmotion.vue @@ -24,6 +24,14 @@ + +
+
+
+
AI小财神正在分析中,请稍候...
+
+
+
@@ -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; +} + \ No newline at end of file