From 474b2de048694a7071f29e8cd4094be82d8af412 Mon Sep 17 00:00:00 2001 From: no99 <17663930442@163.com> Date: Mon, 18 Aug 2025 20:45:16 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E8=8E=B7=E5=8F=96data=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E6=8D=A2=E6=88=90=E6=AD=A3=E5=BC=8Ftoken?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/homePage.vue | 326 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 321 insertions(+), 5 deletions(-) diff --git a/src/views/homePage.vue b/src/views/homePage.vue index 7731663..4f1bc42 100644 --- a/src/views/homePage.vue +++ b/src/views/homePage.vue @@ -364,6 +364,22 @@ const showCount = () => { const tabContent = ref(null); const isScrolling = ref(false); //判断用户是否在滚动 +// AiEmotion页面高度监听器相关变量 +const aiEmotionHeightObserver = ref(null); +const isAiEmotionAutoScrollEnabled = ref(false); +const isAiEmotionUserScrolling = ref(false); // 用户是否正在手动滚动 +const aiEmotionScrollTimer = ref(null); // 滚动检测定时器 + +// 获取当前活动页面的滚动容器 +const getCurrentScrollContainer = () => { + if (activeTab.value === "AIchat") { + return tabContentAIchat.value; + } else if (activeTab.value === "AiEmotion") { + return tabContentAiEmotion.value; + } + return null; +}; + const smoothScrollToBottom = async () => { // console.log("调用滚动到底部的方法"); // await nextTick(); @@ -387,6 +403,165 @@ const throttledSmoothScrollToBottom = _.throttle(smoothScrollToBottom, 300, { trailing: false, }); +// AiEmotion页面自动滚动到底部的防抖函数 +const debouncedAiEmotionScrollToBottom = _.debounce(() => { + if ( + activeTab.value === "AiEmotion" && + isAiEmotionAutoScrollEnabled.value && + !isAiEmotionUserScrolling.value + ) { + const container = tabContentAiEmotion.value; + if (container) { + container.scrollTop = container.scrollHeight - container.offsetHeight; + } + } +}, 150); + +// 启动AiEmotion页面高度监听器 +const startAiEmotionHeightObserver = () => { + // 先停止之前的监听器 + stopAiEmotionHeightObserver(); + + isAiEmotionAutoScrollEnabled.value = true; + + // 创建ResizeObserver监听页面内容变化 + aiEmotionHeightObserver.value = new ResizeObserver((entries) => { + if (isAiEmotionAutoScrollEnabled.value && activeTab.value === "AiEmotion") { + debouncedAiEmotionScrollToBottom(); + } + }); + + // 监听document.body的尺寸变化 + if (document.body) { + aiEmotionHeightObserver.value.observe(document.body); + } + + // 创建MutationObserver监听DOM结构变化 + const mutationObserver = new MutationObserver((mutations) => { + let shouldScroll = false; + mutations.forEach((mutation) => { + if (mutation.type === "childList" && mutation.addedNodes.length > 0) { + // 检查新增的节点是否包含实际内容 + const hasContent = Array.from(mutation.addedNodes).some((node) => { + if (node.nodeType === Node.ELEMENT_NODE) { + return node.offsetHeight > 0 || node.scrollHeight > 0; + } + return ( + node.nodeType === Node.TEXT_NODE && + node.textContent.trim().length > 0 + ); + }); + if (hasContent) { + shouldScroll = true; + } + } + }); + + if ( + shouldScroll && + isAiEmotionAutoScrollEnabled.value && + activeTab.value === "AiEmotion" + ) { + debouncedAiEmotionScrollToBottom(); + } + }); + + // 监听AiEmotion页面的主要内容区域的DOM变化 + const aiEmotionContainer = tabContentAiEmotion.value; + if (aiEmotionContainer) { + mutationObserver.observe(aiEmotionContainer, { + childList: true, + subtree: true, + attributes: false, + characterData: true, + }); + } + + // 保存mutationObserver引用以便清理 + aiEmotionHeightObserver.value.mutationObserver = mutationObserver; + + // 为AiEmotion页面的滚动容器添加滚动事件监听器 + if (aiEmotionContainer) { + aiEmotionContainer.addEventListener("scroll", handleAiEmotionUserScroll, { + passive: true, + }); + // 保存滚动事件监听器引用以便清理 + aiEmotionHeightObserver.value.scrollListener = handleAiEmotionUserScroll; + } + + console.log("AiEmotion页面高度监听器已启动"); +}; + +// AiEmotion页面用户滚动检测 +const handleAiEmotionUserScroll = () => { + // 标记用户正在滚动 + isAiEmotionUserScrolling.value = true; + + // 清除之前的定时器 + if (aiEmotionScrollTimer.value) { + clearTimeout(aiEmotionScrollTimer.value); + } + + // 设置定时器，2秒后恢复自动滚动 + // aiEmotionScrollTimer.value = setTimeout(() => { + // isAiEmotionUserScrolling.value = false; + // console.log("AiEmotion页面用户滚动检测：恢复自动滚动"); + // }, 2000); +}; + +// 处理AiEmotion页面的滚动请求 +const handleAiEmotionScrollToBottom = () => { + if (activeTab.value === "AiEmotion") { + const container = tabContentAiEmotion.value; + if (container) { + // 使用nextTick确保DOM已更新 + nextTick(() => { + container.scrollTop = container.scrollHeight - container.offsetHeight; + console.log("AiEmotion页面：执行容器滚动到底部"); + }); + } + } +}; + +// 停止AiEmotion页面高度监听器 +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 + ); + aiEmotionHeightObserver.value.scrollListener = null; + } + + aiEmotionHeightObserver.value = null; + } + + console.log("AiEmotion页面高度监听器已停止"); +}; + watch( () => chatStore.messages.length, () => { @@ -484,7 +659,9 @@ setTimeout(() => { }, 800); const heightListener = () => { - const tabContainer = tabContent.value; + const tabContainer = getCurrentScrollContainer(); + if (!tabContainer) return; + let befortop = 0; const scrollHandler = () => { @@ -634,8 +811,10 @@ const touchmoveHandler = (e) => { return; } } - // 判断触摸目标是否在可滚动区域内 - const isScrollableArea = e.target.closest(".tab-content"); + // 判断触摸目标是否在当前活动页面的可滚动区域内 + const currentContainer = getCurrentScrollContainer(); + const isScrollableArea = + currentContainer && currentContainer.contains(e.target); // 如果不在可滚动区域，则阻止滚动 if (!isScrollableArea) { @@ -733,9 +912,11 @@ const changeLevelList = ref([ const activeLevel = ref( changeLevelList.value[0] || { position: 10, calculatedPosition: 10 } ); -const gold = ref(0); +const gold = ref(100); const rechargeDialogVisible = ref(false); +const confirmDialogVisible = ref(false); +const changeSuccessDialogVisible = ref(false); const chooseLevel = (item) => { activeLevel.value = item; @@ -745,6 +926,8 @@ const changeToken = () => { if (gold.value < activeLevel.value.position) { rechargeDialogVisible.value = true; return; + } else { + confirmDialogVisible.value = true; } }; @@ -770,6 +953,16 @@ const goRecharge = () => { } }; +const goChange = () => { + confirmDialogVisible.value = false; + dialogVisible.value = false; + changeSuccessDialogVisible.value = true; + setTimeout(() => { + changeSuccessDialogVisible.value = false; + }, 3000); + +}; + // 8.18金币兑换Token end onMounted(async () => { @@ -912,7 +1105,7 @@ onUnmounted(() => {
{{ UserCount }}次
-
点击获取次数
+
点击获取Token
{ @sendMessage="sendMessage" @ensureAIchat="ensureAIchat" @enableInput="enableInput" + /> +
+ + +
+
@@ -1145,6 +1359,37 @@ onUnmounted(() => { + + +
兑换
+
+ 尊敬的用户您好！您确认要花费{{ activeLevel.position }}金币兑换{{ + activeLevel.calculatedPosition + }}Token吗？ +
+
+
确认
+
+ 取消 +
+
+ + + +
兑换成功
+
+ 尊敬的用户，恭喜您成功兑换：{{ activeLevel.calculatedPosition }}Token +
+ @@ -1898,4 +2143,75 @@ body { .rechargeDialogCancel:hover { background-color: #ecf2ff; } + +.confirmDialogTitle { + font-size: 1.7rem; + /* font-weight: bold; */ + color: #4e86fe; + display: flex; + justify-content: center; + align-items: center; + letter-spacing: 10px; +} +.confirmDialogContent { + padding: 20px; + font-size: 1.2rem; +} + +.confirmDialogBtnGroup { + display: flex; + font-size: 1.2rem; + padding: 0px 20px; + justify-content: space-between; +} + +.confirmDialogConfirm { + color: white; + background-color: #4e86fe; + padding: 10px 20px; + border-radius: 13px; + cursor: pointer; + width: 20%; + text-align: center; +} + +.confirmDialogConfirm:hover { + background-color: #3a73e6; +} + +.confirmDialogCancel { + border: 1px solid rgb(202, 202, 202); + padding: 10px 20px; + border-radius: 13px; + cursor: pointer; + width: 20%; + text-align: center; +} + +.confirmDialogCancel:hover { + background-color: #ecf2ff; +} + +.changeSuccessDialogTitle { + font-size: 1.7rem; + font-weight: bold; + color: #de93a3; + display: flex; + justify-content: center; + align-items: center; + letter-spacing: 10px; +} + +.changeSuccessDialogContent { + padding: 20px; + font-size: 1.2rem; + font-weight: bold; + text-align: center; +} + + + From 43f75cc761a34cf84e301b4f7f1f0574fc6b0429 Mon Sep 17 00:00:00 2001 From: no99 <17663930442@163.com> Date: Mon, 18 Aug 2025 20:45:28 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E6=8D=A2=E6=88=90=E6=AD=A3=E5=BC=8Ftoken?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/AIchat.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/AIchat.vue b/src/views/AIchat.vue index c68795b..3da2f90 100644 --- a/src/views/AIchat.vue +++ b/src/views/AIchat.vue @@ -1261,8 +1261,8 @@ watch( const env = import.meta.env.VITE_ENV; const result20 = await dataListAPI({ token: - "8Csj5VVX1UbIb4C3oxrnbZi0+fEeMx8pywnIlrmTm45Cb/EllzWACLto9J9+fCFsfdgBOvKvyY94FvqlvM0", - // "8nkj4QBV1RPIb4CzoRTnbZi0+fEeMx8pywnIlrmTxdwROKkuwWqAWu9orpkpeXVqL98DPfeonNYpHv+mucA", + // "8Csj5VVX1UbIb4C3oxrnbZi0+fEeMx8pywnIlrmTm45Cb/EllzWACLto9J9+fCFsfdgBOvKvyY94FvqlvM0", + "8nkj4QBV1RPIb4CzoRTnbZi0+fEeMx8pywnIlrmTxdwROKkuwWqAWu9orpkpeXVqL98DPfeonNYpHv+mucA", market: codeData.value.market, code: codeData.value.code, language: "cn", //t.value.suoxie, From 5efa942d52bbd647fe6b824c74a193224df66674 Mon Sep 17 00:00:00 2001 From: no99 <17663930442@163.com> Date: Mon, 18 Aug 2025 20:49:18 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=B8=8D=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/homePage.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/homePage.vue b/src/views/homePage.vue index 03e1960..bb56054 100644 --- a/src/views/homePage.vue +++ b/src/views/homePage.vue @@ -355,7 +355,7 @@ const dialogVisible = ref(false); const showCount = () => { console.log("显示剩余次数"); // 显示弹窗 - dialogVisible.value = true; + // dialogVisible.value = true; console.log("dialogVisible 的值:", dialogVisible.value); // 添加日志确认 };