mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-10 03:16:42 +08:00
feat(ai-call):优化AI对话组件初始化逻辑
- 添加组件准备就绪状态标识 - 确保组件挂载完成后再执行自动滚动 -重置对话时正确处理组件状态 - 避免未初始化完成时的滚动操作
This commit is contained in:
16
src/App.vue
16
src/App.vue
@@ -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>
|
||||||
|
|||||||
@@ -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;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
// 处理滚动事件
|
// 处理滚动事件
|
||||||
|
|||||||
Reference in New Issue
Block a user