|
@ -361,13 +361,24 @@ const showCount = () => { |
|
|
|
|
|
|
|
|
// 保证发送消息时,滚动屏在底部 |
|
|
// 保证发送消息时,滚动屏在底部 |
|
|
|
|
|
|
|
|
const tabContent = ref(null); |
|
|
|
|
|
|
|
|
const tabContentAIchat = ref(null); |
|
|
|
|
|
const tabContentAiEmotion = ref(null); |
|
|
const isScrolling = ref(false); //判断用户是否在滚动 |
|
|
const isScrolling = ref(false); //判断用户是否在滚动 |
|
|
|
|
|
|
|
|
|
|
|
// 获取当前活动页面的滚动容器 |
|
|
|
|
|
const getCurrentScrollContainer = () => { |
|
|
|
|
|
if (activeTab.value === 'AIchat') { |
|
|
|
|
|
return tabContentAIchat.value; |
|
|
|
|
|
} else if (activeTab.value === 'AiEmotion') { |
|
|
|
|
|
return tabContentAiEmotion.value; |
|
|
|
|
|
} |
|
|
|
|
|
return null; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
const smoothScrollToBottom = async () => { |
|
|
const smoothScrollToBottom = async () => { |
|
|
// console.log("调用滚动到底部的方法"); |
|
|
// console.log("调用滚动到底部的方法"); |
|
|
// await nextTick(); |
|
|
// await nextTick(); |
|
|
const container = tabContent.value; |
|
|
|
|
|
|
|
|
const container = getCurrentScrollContainer(); |
|
|
// console.log(container, 'container') |
|
|
// console.log(container, 'container') |
|
|
// console.log(isScrolling.value, 'isScrolling.value') |
|
|
// console.log(isScrolling.value, 'isScrolling.value') |
|
|
if (!container) return; |
|
|
if (!container) return; |
|
@ -403,7 +414,7 @@ watch( |
|
|
watch( |
|
|
watch( |
|
|
() => chatStore.dbqbClickRecord, |
|
|
() => chatStore.dbqbClickRecord, |
|
|
async (newValue, oldValue) => { |
|
|
async (newValue, oldValue) => { |
|
|
const container = tabContent.value; |
|
|
|
|
|
|
|
|
const container = getCurrentScrollContainer(); |
|
|
if (!container) return; |
|
|
if (!container) return; |
|
|
|
|
|
|
|
|
await nextTick(); // 确保在DOM更新后执行 |
|
|
await nextTick(); // 确保在DOM更新后执行 |
|
@ -484,7 +495,9 @@ setTimeout(() => { |
|
|
}, 800); |
|
|
}, 800); |
|
|
|
|
|
|
|
|
const heightListener = () => { |
|
|
const heightListener = () => { |
|
|
const tabContainer = tabContent.value; |
|
|
|
|
|
|
|
|
const tabContainer = getCurrentScrollContainer(); |
|
|
|
|
|
if (!tabContainer) return; |
|
|
|
|
|
|
|
|
let befortop = 0; |
|
|
let befortop = 0; |
|
|
|
|
|
|
|
|
const scrollHandler = () => { |
|
|
const scrollHandler = () => { |
|
@ -634,8 +647,9 @@ const touchmoveHandler = (e) => { |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
// 判断触摸目标是否在可滚动区域内 |
|
|
|
|
|
const isScrollableArea = e.target.closest(".tab-content"); |
|
|
|
|
|
|
|
|
// 判断触摸目标是否在当前活动页面的可滚动区域内 |
|
|
|
|
|
const currentContainer = getCurrentScrollContainer(); |
|
|
|
|
|
const isScrollableArea = currentContainer && currentContainer.contains(e.target); |
|
|
|
|
|
|
|
|
// 如果不在可滚动区域,则阻止滚动 |
|
|
// 如果不在可滚动区域,则阻止滚动 |
|
|
if (!isScrollableArea) { |
|
|
if (!isScrollableArea) { |
|
@ -859,14 +873,37 @@ onUnmounted(() => { |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</section> |
|
|
|
|
|
<!-- AIchat页面的独立滚动容器 --> |
|
|
|
|
|
<div |
|
|
|
|
|
v-show="activeTab === 'AIchat'" |
|
|
|
|
|
class="tab-content" |
|
|
|
|
|
:class="{ |
|
|
|
|
|
pcTabContent: !isMobile, |
|
|
|
|
|
}" |
|
|
|
|
|
ref="tabContentAIchat" |
|
|
|
|
|
> |
|
|
|
|
|
<component |
|
|
|
|
|
v-if="activeTab === 'AIchat'" |
|
|
|
|
|
:is="activeComponent" |
|
|
|
|
|
:messages="messages" |
|
|
|
|
|
@updateMessage="updateMessage" |
|
|
|
|
|
@sendMessage="sendMessage" |
|
|
|
|
|
@ensureAIchat="ensureAIchat" |
|
|
|
|
|
@enableInput="enableInput" |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- AiEmotion页面的独立滚动容器 --> |
|
|
<div |
|
|
<div |
|
|
|
|
|
v-show="activeTab === 'AiEmotion'" |
|
|
class="tab-content" |
|
|
class="tab-content" |
|
|
:class="{ |
|
|
:class="{ |
|
|
pcTabContent: !isMobile, |
|
|
pcTabContent: !isMobile, |
|
|
}" |
|
|
}" |
|
|
ref="tabContent" |
|
|
|
|
|
|
|
|
ref="tabContentAiEmotion" |
|
|
> |
|
|
> |
|
|
<component |
|
|
<component |
|
|
|
|
|
v-if="activeTab === 'AiEmotion'" |
|
|
:is="activeComponent" |
|
|
:is="activeComponent" |
|
|
:messages="messages" |
|
|
:messages="messages" |
|
|
@updateMessage="updateMessage" |
|
|
@updateMessage="updateMessage" |
|
|