feat: 长文本组件的页面滚动问题

src/pages/long-answer/index.vue

@@ -6,9 +6,9 @@
     </view>
 
     <!-- ✅ 滚动区域 -->
-    <scroll-view class="flex-full overflow-hidden" scroll-y :scroll-into-view="scrollIntoViewId" scroll-with-animation>
+    <scroll-view class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-view="scrollIntoViewId" scroll-with-animation @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
       <view class="pt-12 px-12 pb-24 border-box">
-         <!-- ✅ 答案内容，支持markdown -->
+         <!-- ✅ 内容，支持markdown -->
         <ChatMarkdown :text="answerText" />
 
         <!-- ✅ 底部锚点（必须存在） -->
@@ -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;
 });
 </script>