diff --git a/src/pages/long-answer/index.vue b/src/pages/long-answer/index.vue index c39a694..2347da2 100644 --- a/src/pages/long-answer/index.vue +++ b/src/pages/long-answer/index.vue @@ -6,9 +6,9 @@ - + - + @@ -40,20 +40,77 @@ let unsubscribe = null; /** ✅ scroll-into-view 控制 */ const scrollIntoViewId = ref(""); +/** 滚动控制状态 */ +const isNearBottom = ref(true); +const scrollViewHeight = ref(0); +const SCROLL_THRESHOLD = 150; // px + +/** 用户交互状态,用户滚动/触摸时临时禁用自动滚动 */ +const userInteracting = ref(false); +let interactionTimer = null; + /** ✅ 防抖 */ let scrollTimer = null; -function scrollToBottom() { +const measureScrollViewHeight = () => { + try { + const sys = uni.getSystemInfoSync() || {}; + // 使用窗口高度作为 scroll-view 可视高度的近似,兼容小程序环境 + scrollViewHeight.value = sys.windowHeight || 0; + } catch (e) { } +} + +/** 生成展示用标题:去除前导 `#` 并截取前 6 字符(超过加省略号) */ +const computeTitle = (text = "") => { + const t = (text || "").replace(/^#+\s*/, ""); + return t.length > 8 ? t.substring(0, 8) + "..." : t; +} + +const onScroll = (e) => { + try { + const { scrollTop = 0, scrollHeight = 0 } = e.detail || {}; + // 标记为用户主动滚动,短时内不触发自动滚动 + userInteracting.value = true; + clearTimeout(interactionTimer); + interactionTimer = setTimeout(() => (userInteracting.value = false), 1200); + + // 更新距离底部的判断(使用 windowHeight 作为近似) + const distanceToBottom = scrollHeight - (scrollTop + (scrollViewHeight.value || uni.getSystemInfoSync().windowHeight || 0)); + isNearBottom.value = distanceToBottom <= SCROLL_THRESHOLD; + } catch (e) { } +} + +const onTouchStart = () => { + userInteracting.value = true; + clearTimeout(interactionTimer); +} + +const onTouchEnd = () => { + clearTimeout(interactionTimer); + interactionTimer = setTimeout(() => { + userInteracting.value = false; + }, 800); +} + +const scrollToBottom = () => { if (scrollTimer) return; scrollTimer = setTimeout(() => { // ❗关键:强制触发滚动(小程序必须这样) + // 如果用户正在交互,则跳过本次自动滚动 + if (userInteracting.value) { + scrollTimer = null; + return; + } + scrollIntoViewId.value = ""; nextTick(() => { // 再次 nextTick + 延迟,兼容 markdown 渲染延迟 setTimeout(() => { scrollIntoViewId.value = "bottom-anchor"; + // 测量高度以便后续滚动判断准确 + measureScrollViewHeight(); }, 50); }); @@ -68,34 +125,42 @@ onLoad(({ message = "", streamId = "" }) => { streamId, (text = "", finished = false) => { answerText.value = text || ""; - - if (answerText.value.length > 6) { - title.value = answerText.value.substring(0, 6) + "..."; - } + title.value = computeTitle(answerText.value); nextTick(() => { - scrollToBottom(); + // 仅在用户处于接近底部时自动滚动,避免每次流式更新都打断用户阅读 + if (finished) { + scrollToBottom(); + } else if (isNearBottom.value) { + scrollToBottom(); + } }); } ); } else { // ✅ 非流式 answerText.value = decodeURIComponent(message || ""); - - if (answerText.value.length > 6) { - title.value = answerText.value.substring(0, 6) + "..."; - } + title.value = computeTitle(answerText.value); nextTick(() => { + // 初始非流式情况仍保持自动滚动 scrollToBottom(); }); } + + // 初次测量 scroll-view 高度 + nextTick(() => measureScrollViewHeight()); }); onUnload(() => { try { unsubscribe && unsubscribe(); } catch (e) { } + // 清理定时器,避免内存泄漏 + try { clearTimeout(scrollTimer); } catch (e) { } + try { clearTimeout(interactionTimer); } catch (e) { } + scrollTimer = null; + interactionTimer = null; });