From 00be6bcd56b6f0e8c5df339e4f389fda25f283ef Mon Sep 17 00:00:00 2001
From: hongxilin <17663930442@163.com>
Date: Tue, 18 Mar 2025 15:13:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=BB=91=E5=8A=A8=E8=8A=82=E6=B5=81=EF=BC=8C?=
=?UTF-8?q?=E9=98=B2=E6=AD=A2=E7=94=A8=E6=88=B7=E9=87=8D=E5=A4=8D=E6=8F=90?=
=?UTF-8?q?=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
README.md | 3 ++-
package-lock.json | 6 ++++--
package.json | 1 +
src/store/chat.js | 14 +++++++++++++-
src/views/AIchat.vue | 15 +++------------
src/views/homePage.vue | 29 +++++++++++++++++++++--------
6 files changed, 44 insertions(+), 24 deletions(-)
diff --git a/README.md b/README.md
index 8c5e9f9..40e1f82 100644
--- a/README.md
+++ b/README.md
@@ -15,4 +15,5 @@ npm install marked 解析markdown 解析文本样式
npm install katex 数学公式 解析数学公式样式
npm install @coze/api
npm install html-to-text
-npm install echarts
\ No newline at end of file
+npm install echarts
+npm install lodash 安装 lodash 组件,解决数据处理问题
diff --git a/package-lock.json b/package-lock.json
index 44d2139..93809a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
"howler": "^2.2.4",
"html-to-text": "^9.0.5",
"katex": "^0.16.21",
+ "lodash": "^4.17.21",
"marked": "^15.0.7",
"mitt": "^3.0.1",
"pinia": "^2.3.1",
@@ -4926,8 +4927,9 @@
},
"node_modules/lodash": {
"version": "4.17.21",
- "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
- "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+ "resolved": "https://mirrors.huaweicloud.com/repository/npm/lodash/-/lodash-4.17.21.tgz",
+ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+ "license": "MIT"
},
"node_modules/lodash-es": {
"version": "4.17.21",
diff --git a/package.json b/package.json
index faaf389..d59fb47 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
"howler": "^2.2.4",
"html-to-text": "^9.0.5",
"katex": "^0.16.21",
+ "lodash": "^4.17.21",
"marked": "^15.0.7",
"mitt": "^3.0.1",
"pinia": "^2.3.1",
diff --git a/src/store/chat.js b/src/store/chat.js
index c651088..1209909 100644
--- a/src/store/chat.js
+++ b/src/store/chat.js
@@ -2,8 +2,20 @@ import { defineStore } from 'pinia';
export const useChatStore = defineStore('chat', {
state: () => ({
- messages: []
+ messages: [],
+ isLoading: false // 新增加载状态
}),
+ actions: {
+ setLoading(status) {
+ this.isLoading = status
+ },
+ isLoadingT() {
+ this.isLoading = true;
+ },
+ isLoadingF() {
+ this.isLoading = false;
+ }
+ },
persist: {
enabled: true,
strategies: [
diff --git a/src/views/AIchat.vue b/src/views/AIchat.vue
index 8e85f44..57ca884 100644
--- a/src/views/AIchat.vue
+++ b/src/views/AIchat.vue
@@ -34,7 +34,7 @@ const showQuestions = (questions) => {
currentQuestions.value = questions;
// 触发自定义事件
emit("updateMessage", questions.title);
- emit("sendMessage");
+ // emit("sendMessage");
};
// 音频播放方法
@@ -78,9 +78,6 @@ const props = defineProps({
messages: Array,
});
-// 发送按键控制
-const isLoading = ref(false);
-
// 打字机效果
const typewriterContent = ref("")
const isTyping = ref(false)
@@ -116,7 +113,6 @@ watch(
if (newVal.length > 0) {
console.log("消息列表已更新，最新消息:", newVal[newVal.length - 1])
chatStore.messages.push(newVal[newVal.length - 1])
- isLoading.value = true;
console.log("消息列表已更新，最新消息:", chatMsg[chatMsg.length - 1]);
@@ -300,13 +296,10 @@ watch(
return match;
}
});
+ chatStore.setLoading(false);
});
}
}, 50); // 调整速度为50ms/字符
-
-
- // 发送请求
- isLoading.value = false;
}
catch (e) {
console.error('请求失败:', e);
@@ -314,11 +307,9 @@ watch(
sender: "ai",
content: "AI思考失败，请稍后再试... ",
});
+ chatStore.setLoading(false);
}
-
-
}
-
},
{ deep: true }
);
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index ae1ef1e..11c4dff 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -9,8 +9,10 @@ import { useAppBridge } from '../assets/js/useAppBridge.js'
import { useDataStore } from '@/store/dataList.js'
import { useChatStore } from '../store/chat'
import { useAudioStore } from '../store/audio'
+import _ from "lodash";
// import { useUserStore } from "../store/userPessionCode.js";
const { getQueryVariable } = useDataStore()
+
// 变量
// 音频管理
const audioStore = useAudioStore()
@@ -88,7 +90,7 @@ const message = ref("");
// 传输对象
const messages = ref([]);
// 信息加载状态
-const isLoading = ref(false);
+const isLoading = computed(() => { chatStore.isLoading });
// 添加用户消息
const updateMessage = (title) => {
@@ -100,7 +102,11 @@ const sendMessage = async () => {
ensureAIchat();
if (!message.value) return;
- if (isLoading.value) return;
+ if (chatStore.isLoading) return;
+ console.log(chatStore.isLoading, 'isLoading.value1111');
+ chatStore.setLoading(true);
+
+ console.log(chatStore.isLoading, 'isLoading.value2222');
// 发送消息时，设置 isLoading 为 true
messages.value = [
@@ -160,13 +166,14 @@ const smoothScrollToBottom = async () => {
}
+const throttledSmoothScrollToBottom = _.throttle(smoothScrollToBottom, 500, { trailing: false });
const handleScroll = function () {
const scrollContainer = tabContent.value
const scrollTop = scrollContainer.scrollTop
const scrollHeight = scrollContainer.scrollHeight
const offsetHeight = scrollContainer.offsetHeight
- console.log(scrollTop, scrollHeight, offsetHeight, "scrollTop, scrollHeight, offsetHeight");
+ // console.log(scrollTop, scrollHeight, offsetHeight, "scrollTop, scrollHeight, offsetHeight");
if (scrollTop + offsetHeight < scrollHeight) {
// 用户开始滚动并在最底部之上，取消保持在最底部的效果
isScrolling.value = true
@@ -174,14 +181,14 @@ const handleScroll = function () {
// 用户停止滚动并滚动到最底部，开启保持到最底部的效果
isScrolling.value = false
}
- console.log(isScrolling.value)
+ // console.log(isScrolling.value)
}
watch(
() => chatStore.messages,
() => {
- smoothScrollToBottom();
+ throttledSmoothScrollToBottom();
},
{ deep: true, immediate: true }
);
@@ -190,7 +197,7 @@ watch(
watch(
activeTab,
async (newVal) => {
- smoothScrollToBottom();
+ throttledSmoothScrollToBottom();
});
@@ -230,7 +237,7 @@ const fnGetToken = () => {
onMounted(async () => {
setHeight(document.getElementById("testId")); // 给父组件发送窗口高度
getUserCount();
- smoothScrollToBottom();
+ throttledSmoothScrollToBottom();
// 监听滚动事件，判断用户滚动状态
tabContent.value.addEventListener('scroll', handleScroll)
@@ -288,7 +295,13 @@ onMounted(async () => {
- 
+
+
+
+
+
+