hongxilin
/
AIxiaocaishen
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页跳转优化

milestone-20250820-金币兑换Token
no99 2 days ago
parent
d23741ee48
commit
5190be38d6
1 changed files with 72 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 121
      src/views/homePage.vue

121
src/views/homePage.vue
View File

@ -375,9 +375,9 @@ const chartInteractionTimer = ref(null); // 图表交互检测定时器
// 获取当前活动页面的滚动容器
const getCurrentScrollContainer = () => {
if (activeTab.value === 'AIchat') {
if (activeTab.value === "AIchat") {
return tabContentAIchat.value;
} else if (activeTab.value === 'AiEmotion') {
} else if (activeTab.value === "AiEmotion") {
return tabContentAiEmotion.value;
}
return null;
@ -408,7 +408,12 @@ const throttledSmoothScrollToBottom = _.throttle(smoothScrollToBottom, 300, {
// AiEmotion页面自动滚动到底部的防抖函数
const debouncedAiEmotionScrollToBottom = _.debounce(() => {
if (activeTab.value === 'AiEmotion' && isAiEmotionAutoScrollEnabled.value && !isAiEmotionUserScrolling.value && !isChartInteracting.value) {
if (
activeTab.value === "AiEmotion" &&
isAiEmotionAutoScrollEnabled.value &&
!isAiEmotionUserScrolling.value &&
!isChartInteracting.value
) {
const container = tabContentAiEmotion.value;
if (container) {
container.scrollTop = container.scrollHeight - container.offsetHeight;
@ -420,21 +425,25 @@ const debouncedAiEmotionScrollToBottom = _.debounce(() => {
const startAiEmotionHeightObserver = () => {
// 先停止之前的监听器
stopAiEmotionHeightObserver();
isAiEmotionAutoScrollEnabled.value = true;
// 创建ResizeObserver监听页面内容变化
aiEmotionHeightObserver.value = new ResizeObserver((entries) => {
if (isAiEmotionAutoScrollEnabled.value && activeTab.value === 'AiEmotion' && !isChartInteracting.value) {
if (
isAiEmotionAutoScrollEnabled.value &&
activeTab.value === "AiEmotion" &&
!isChartInteracting.value
) {
debouncedAiEmotionScrollToBottom();
}
});
// 监听document.body的尺寸变化
if (document.body) {
aiEmotionHeightObserver.value.observe(document.body);
}
// 创建MutationObserver监听DOM结构变化
const mutationObserver = new MutationObserver((mutations) => {
let shouldScroll = false;
@ -455,12 +464,17 @@ const startAiEmotionHeightObserver = () => {
}
}
});
if (shouldScroll && isAiEmotionAutoScrollEnabled.value && activeTab.value === 'AiEmotion' && !isChartInteracting.value) {
if (
shouldScroll &&
isAiEmotionAutoScrollEnabled.value &&
activeTab.value === "AiEmotion" &&
!isChartInteracting.value
) {
debouncedAiEmotionScrollToBottom();
}
});
// 监听AiEmotion页面的主要内容区域的DOM变化
const aiEmotionContainer = tabContentAiEmotion.value;
if (aiEmotionContainer) {
@ -471,17 +485,19 @@ const startAiEmotionHeightObserver = () => {
characterData: true,
});
}
// 保存mutationObserver引用以便清理
aiEmotionHeightObserver.value.mutationObserver = mutationObserver;
// 为AiEmotion页面的滚动容器添加滚动事件监听器
if (aiEmotionContainer) {
aiEmotionContainer.addEventListener('scroll', handleAiEmotionUserScroll, { passive: true });
aiEmotionContainer.addEventListener("scroll", handleAiEmotionUserScroll, {
passive: true,
});
// 保存滚动事件监听器引用以便清理
aiEmotionHeightObserver.value.scrollListener = handleAiEmotionUserScroll;
}
console.log("AiEmotion页面高度监听器已启动");
};
@ -489,12 +505,12 @@ const startAiEmotionHeightObserver = () => {
const handleAiEmotionUserScroll = () => {
// 标记用户正在滚动
isAiEmotionUserScrolling.value = true;
// 清除之前的定时器
if (aiEmotionScrollTimer.value) {
clearTimeout(aiEmotionScrollTimer.value);
}
// 设置定时器，2秒后恢复自动滚动
// aiEmotionScrollTimer.value = setTimeout(() => {
// isAiEmotionUserScrolling.value = false;
@ -506,7 +522,7 @@ const handleAiEmotionUserScroll = () => {
const handleChartInteractionStart = () => {
console.log("图表交互开始，临时禁用自动滚动");
isChartInteracting.value = true;
// 清除之前的定时器
if (chartInteractionTimer.value) {
clearTimeout(chartInteractionTimer.value);
@ -518,7 +534,7 @@ const handleChartInteractionEnd = () => {
if (chartInteractionTimer.value) {
clearTimeout(chartInteractionTimer.value);
}
// 设置定时器，1秒后恢复自动滚动
chartInteractionTimer.value = setTimeout(() => {
isChartInteracting.value = false;
@ -532,7 +548,7 @@ window.handleChartInteractionEnd = handleChartInteractionEnd;
// 处理AiEmotion页面的滚动请求
const handleAiEmotionScrollToBottom = () => {
if (activeTab.value === 'AiEmotion') {
if (activeTab.value === "AiEmotion") {
const container = tabContentAiEmotion.value;
if (container) {
// 使用nextTick确保DOM已更新
@ -548,32 +564,38 @@ const handleAiEmotionScrollToBottom = () => {
const stopAiEmotionHeightObserver = () => {
isAiEmotionAutoScrollEnabled.value = false;
isAiEmotionUserScrolling.value = false;
// 清理滚动检测定时器
if (aiEmotionScrollTimer.value) {
clearTimeout(aiEmotionScrollTimer.value);
aiEmotionScrollTimer.value = null;
}
if (aiEmotionHeightObserver.value) {
// 清理ResizeObserver
aiEmotionHeightObserver.value.disconnect();
// 清理MutationObserver
if (aiEmotionHeightObserver.value.mutationObserver) {
aiEmotionHeightObserver.value.mutationObserver.disconnect();
aiEmotionHeightObserver.value.mutationObserver = null;
}
// 清理滚动事件监听器
if (aiEmotionHeightObserver.value.scrollListener && tabContentAiEmotion.value) {
tabContentAiEmotion.value.removeEventListener('scroll', aiEmotionHeightObserver.value.scrollListener);
if (
aiEmotionHeightObserver.value.scrollListener &&
tabContentAiEmotion.value
) {
tabContentAiEmotion.value.removeEventListener(
"scroll",
aiEmotionHeightObserver.value.scrollListener
);
aiEmotionHeightObserver.value.scrollListener = null;
}
aiEmotionHeightObserver.value = null;
}
console.log("AiEmotion页面高度监听器已停止");
};
@ -685,7 +707,7 @@ setTimeout(() => {
const heightListener = () => {
const tabContainer = getCurrentScrollContainer();
if (!tabContainer) return;
let befortop = 0;
const scrollHandler = () => {
@ -837,7 +859,8 @@ const touchmoveHandler = (e) => {
}
// 判断触摸目标是否在当前活动页面的可滚动区域内
const currentContainer = getCurrentScrollContainer();
const isScrollableArea = currentContainer && currentContainer.contains(e.target);
const isScrollableArea =
currentContainer && currentContainer.contains(e.target);
// 如果不在可滚动区域，则阻止滚动
if (!isScrollableArea) {
@ -905,12 +928,14 @@ const backToHome = () => {
if (env == "development" || env == "test") {
window.parent.location.href =
"http://121.89.234.155:8807/hljw/homepage?menu=999999991";
} else if (env == "product") {
window.parent.location.href =
"https://web.homilychart.com/product/hljw/homepage?menu=999999991";
} else if (env == "production") {
window.parent.location.href =
"https://web.homilychart.com/hljw/homepage?menu=999999991";
} else {
window.parent.postMessage(
{
type: "NAVIGATE_TO_HOMEPAGE",
menu: "999999991",
},
"*"
);
}
// window.parent.location.href = window.parent.document.referrer
}
@ -983,7 +1008,6 @@ const goChange = () => {
setTimeout(() => {
changeSuccessDialogVisible.value = false;
}, 3000);
};
// 8.18金币兑换Token end
@ -1031,17 +1055,17 @@ onUnmounted(() => {
}
// 清理AiEmotion页面的高度监听器
stopAiEmotionHeightObserver();
// 清理图表交互相关的定时器和全局函数
if (chartInteractionTimer.value) {
clearTimeout(chartInteractionTimer.value);
}
if (window.handleChartInteractionStart) {
delete window.handleChartInteractionStart;
}
if (window.handleChartInteractionEnd) {
delete window.handleChartInteractionEnd;
}
if (chartInteractionTimer.value) {
clearTimeout(chartInteractionTimer.value);
}
if (window.handleChartInteractionStart) {
delete window.handleChartInteractionStart;
}
if (window.handleChartInteractionEnd) {
delete window.handleChartInteractionEnd;
}
});
</script>
@ -1142,7 +1166,6 @@ onUnmounted(() => {
<div class="pc-count-number">{{ UserCount }}</div>
</div>
<div class="pc-clickGetCount">点击获取Token</div>
</div>
<div class="pc-backToHomeBtn" @click="backToHome()">
<img
@ -1174,7 +1197,7 @@ onUnmounted(() => {
@enableInput="enableInput"
/>
</div>
<!-- AiEmotion页面的独立滚动容器 -->
<div
v-show="activeTab === 'AiEmotion'"

Write Preview
Loading…
Cancel
Save