feat: 长文本在详情页面中的消息流式输出

src/pages/long-answer/index.vue

@@ -1,32 +1,104 @@
 <template>
-  <view class="bg-F5F7FA flex flex-col h-screen overflow-hidden">
-    <TopNavBar :title="title" backgroundColor="transparent" />
-    <view class="flex-full overflow-hidden scroll-y p-12 border-box">
-      <ChatMarkdown :text="answerText" />
+  <view class="flex flex-col bg-liner h-screen overflow-hidden">
+    <!-- ✅ 顶部固定导航 -->
+    <view class="flex-shrink-0">
+      <TopNavBar :title="title" background="transparent" />
     </view>
+
+    <!-- ✅ 滚动区域 -->
+    <scroll-view class="flex-full overflow-hidden" scroll-y :scroll-into-view="scrollIntoViewId" scroll-with-animation>
+      <view class="pt-12 px-12 pb-24 border-box">
+         <!-- ✅ 答案内容，支持markdown -->
+        <ChatMarkdown :text="answerText" />
+
+        <!-- ✅ 底部锚点（必须存在） -->
+        <view id="bottom-anchor"></view>
+      </view>
+    </scroll-view>
   </view>
 </template>
+
 <script setup>
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import ChatMarkdown from "../index/components/chat/ChatMarkdown/index.vue";
-import { defineProps, ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { defineProps, ref, nextTick } from "vue";
+import { onLoad, onUnload } from "@dcloudio/uni-app";
+import StreamManager from "@/utils/StreamManager.js";
 
 const props = defineProps({
   answerText: {
     type: String,
     default: "",
-  }
+  },
 });
 
 const answerText = ref(props.answerText || "");
 const title = ref("");
 
-onLoad(({ message = "" }) => {
-  answerText.value = decodeURIComponent(message);
-  if (answerText.value.length > 6) {
-    title.value = answerText.value.substring(0, 6) + "...";
+let unsubscribe = null;
+
+/** ✅ scroll-into-view 控制 */
+const scrollIntoViewId = ref("");
+
+/** ✅ 防抖 */
+let scrollTimer = null;
+
+function scrollToBottom() {
+  if (scrollTimer) return;
+
+  scrollTimer = setTimeout(() => {
+    // ❗关键：强制触发滚动（小程序必须这样）
+    scrollIntoViewId.value = "";
+
+    nextTick(() => {
+      // 再次 nextTick + 延迟，兼容 markdown 渲染延迟
+      setTimeout(() => {
+        scrollIntoViewId.value = "bottom-anchor";
+      }, 50);
+    });
+
+    scrollTimer = null;
+  }, 100);
+}
+
+onLoad(({ message = "", streamId = "" }) => {
+  if (streamId) {
+    // ✅ 流式数据
+    unsubscribe = StreamManager.subscribe(
+      streamId,
+      (text = "", finished = false) => {
+        answerText.value = text || "";
+
+        if (answerText.value.length > 6) {
+          title.value = answerText.value.substring(0, 6) + "...";
+        }
+
+        nextTick(() => {
+          scrollToBottom();
+        });
+      }
+    );
+  } else {
+    // ✅ 非流式
+    answerText.value = decodeURIComponent(message || "");
+
+    if (answerText.value.length > 6) {
+      title.value = answerText.value.substring(0, 6) + "...";
+    }
+
+    nextTick(() => {
+      scrollToBottom();
+    });
   }
 });
 
-</script>
+onUnload(() => {
+  try {
+    unsubscribe && unsubscribe();
+  } catch (e) { }
+});
+</script>
+
+<style scoped>
+
+</style>