feat(ai-call):优化AI对话组件初始化逻辑

- 添加组件准备就绪状态标识
- 确保组件挂载完成后再执行自动滚动
-重置对话时正确处理组件状态
- 避免未初始化完成时的滚动操作
This commit is contained in:
陈昱达
2025-11-06 17:20:26 +08:00
parent c9c34501ce
commit 5d81f72f5f
2 changed files with 31 additions and 12 deletions

View File

@@ -1,12 +1,12 @@
<template> <template>
<div id="app"> <div id="app" style="width: 100vw">
<keep-alive :include="['case']"> <keep-alive :include="['case']">
<router-view /> <router-view />
12312 12312
</keep-alive> </keep-alive>
<!-- 添加AI Call组件 --> <!-- 添加AI Call组件 -->
<AICall <AICall
:dialogVisible="showAICall" :dialogVisible="showAICall"
@close="onCloseAICall" @close="onCloseAICall"
@restore="onRestoreAICall" @restore="onRestoreAICall"
/> />
@@ -16,7 +16,7 @@
<script> <script>
import { mapGetters, mapState } from 'vuex'; import { mapGetters, mapState } from 'vuex';
import AICall from '@/views/portal/case/AICall.vue'; import AICall from '@/views/portal/case/AICall.vue';
export default{ export default{
name: 'App', name: 'App',
components: { components: {
@@ -31,12 +31,12 @@
// 通过Vuex关闭AI Call组件 // 通过Vuex关闭AI Call组件
this.$store.dispatch('app/setShowAICall', false); this.$store.dispatch('app/setShowAICall', false);
}, },
onRestoreAICall() { onRestoreAICall() {
// 通过Vuex显示AI Call组件 // 通过Vuex显示AI Call组件
this.$store.dispatch('app/setShowAICall', true); this.$store.dispatch('app/setShowAICall', true);
}, },
// 检查当前路由是否应该显示AI弹窗 // 检查当前路由是否应该显示AI弹窗
checkRouteForAICall() { checkRouteForAICall() {
const currentRoute = this.$route.name; const currentRoute = this.$route.name;
@@ -59,7 +59,7 @@
// if(this.userInfo && this.userInfo.name!=''){ // if(this.userInfo && this.userInfo.name!=''){
// this.$watermark.set(this.userInfo.name+this.userInfo.loginName); // this.$watermark.set(this.userInfo.name+this.userInfo.loginName);
// } // }
// 初始化检查路由 // 初始化检查路由
this.checkRouteForAICall(); this.checkRouteForAICall();
}, },
@@ -87,4 +87,4 @@
border: 1px solid #e7e7e7 !important; border: 1px solid #e7e7e7 !important;
box-shadow: 0px 1px 5px 1px rgba(92,98,111,.3); box-shadow: 0px 1px 5px 1px rgba(92,98,111,.3);
} }
</style> </style>

View File

@@ -484,9 +484,17 @@ export default {
} }
], ],
suggestions:[], suggestions:[],
isAutoScroll: true // 是否自动滚动 isAutoScroll: true, // 是否自动滚动
// 添加一个标志位,用于标识组件是否已经初始化完成
isComponentReady: false
} }
}, },
mounted() {
// 组件挂载完成后,标记为已准备就绪
this.$nextTick(() => {
this.isComponentReady = true;
});
},
watch: { watch: {
dialogVisible: { dialogVisible: {
handler(newVal) { handler(newVal) {
@@ -533,9 +541,12 @@ export default {
}, },
messageList: { messageList: {
handler() { handler() {
this.$nextTick(() => { // 只有在组件准备就绪后才执行滚动操作
this.scrollToBottom(); if (this.isComponentReady) {
}); this.$nextTick(() => {
this.scrollToBottom();
});
}
}, },
deep: true deep: true
} }
@@ -605,6 +616,9 @@ closeMinimizedWindow() {
},500) },500)
}, },
startNewConversation() { startNewConversation() {
// 重置对话时,先标记组件为未准备就绪状态
this.isComponentReady = false;
this.messageList = [ this.messageList = [
{ {
isBot: true, isBot: true,
@@ -616,6 +630,11 @@ closeMinimizedWindow() {
]; ];
this.AIContent = ''; this.AIContent = '';
this.isLoading = false; this.isLoading = false;
// 在下一个 tick 中重新标记为准备就绪
this.$nextTick(() => {
this.isComponentReady = true;
});
}, },
// 处理滚动事件 // 处理滚动事件