diff --git a/src/assets/img/gif/思考.gif b/src/assets/img/gif/思考.gif new file mode 100644 index 0000000..b5f907f Binary files /dev/null and b/src/assets/img/gif/思考.gif differ diff --git a/src/assets/img/gif/生成.gif b/src/assets/img/gif/生成.gif new file mode 100644 index 0000000..502f0ea Binary files /dev/null and b/src/assets/img/gif/生成.gif differ diff --git a/src/assets/img/gif/解析.gif b/src/assets/img/gif/解析.gif new file mode 100644 index 0000000..aa3ef83 Binary files /dev/null and b/src/assets/img/gif/解析.gif differ diff --git a/src/views/AIchat.vue b/src/views/AIchat.vue index 63d9de4..7c94cf5 100644 --- a/src/views/AIchat.vue +++ b/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(() => { -
-
- {{ msg.content }} - - . - . - . - . - . - . - +
+ 思考过程 +
+
+ {{ msg.content }} + + . + . + . + . + . + . + +
+
-
@@ -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; +} diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue index b4354a2..e78dae7 100644 --- a/src/views/AiEmotion.vue +++ b/src/views/AiEmotion.vue @@ -27,8 +27,14 @@
-
- {{ message.text }} +
+ + +
+ + 思考动图 + {{ message.text }} +
@@ -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 {