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 {