3 Commits

Author SHA1 Message Date
8ea6546f04 feat: 版本号提交 2026-04-19 00:13:41 +08:00
f70920a25c feat: 调整 2026-04-17 17:07:05 +08:00
d666dce813 feat: 长文本组件的页面滚动问题 2026-04-17 14:39:55 +08:00
3 changed files with 110 additions and 18 deletions

View File

@@ -124,7 +124,8 @@ const lookDetailAction = () => {
} catch (e) {} } catch (e) {}
}); });
uni.navigateTo({ url: `/pages/long-answer/index?streamId=${encodeURIComponent(streamId)}` }); // 传递 finished 参数,完成状态下不自动滚到底部
uni.navigateTo({ url: `/pages/long-answer/index?streamId=${encodeURIComponent(streamId)}&finished=${props.finish ? '1' : '0'}` });
} }
</script> </script>

View File

@@ -6,9 +6,9 @@
</view> </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"> <view class="pt-12 px-12 pb-24 border-box">
<!-- 答案内容支持markdown --> <!-- 内容支持markdown -->
<ChatMarkdown :text="answerText" /> <ChatMarkdown :text="answerText" />
<!-- 底部锚点必须存在 --> <!-- 底部锚点必须存在 -->
@@ -40,20 +40,91 @@ let unsubscribe = null;
/** ✅ scroll-into-view 控制 */ /** ✅ scroll-into-view 控制 */
const scrollIntoViewId = ref(""); const scrollIntoViewId = ref("");
/** 滚动控制状态 */
const isNearBottom = ref(true);
const scrollViewHeight = ref(0);
const SCROLL_THRESHOLD = 150; // px
/** 用户交互状态,用户滚动/触摸时临时禁用自动滚动 */
const userInteracting = ref(false);
let interactionTimer = null;
/** 是否已完成(从 URL 参数判断),完成状态下不初始初自动滚到底部 */
let isFinishedOnInit = false;
/** ✅ 防抖 */ /** ✅ 防抖 */
let scrollTimer = null; let scrollTimer = null;
function scrollToBottom() { const measureScrollViewHeight = () => {
try {
// 使用 uni.createSelectorQuery 获取 scroll-view 的准确高度
uni.createSelectorQuery()
.select(".chat-scroll")
.boundingClientRect((rect) => {
if (rect && rect.height) {
scrollViewHeight.value = rect.height;
}
})
.exec();
} 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 || {};
// 计算距离底部的距离(使用准确的 scroll-view 高度)
const viewHeight = scrollViewHeight.value;
const distanceToBottom = scrollHeight - scrollTop - viewHeight;
// 判断是否在底部附近(允许 SCROLL_THRESHOLD 的误差范围)
// 注意:只更新 isNearBottom不在滚动时强制改变 userInteracting
const atBottom = distanceToBottom <= SCROLL_THRESHOLD;
isNearBottom.value = atBottom;
} catch (e) { }
}
const onTouchStart = () => {
// 触摸开始时,立即标记为用户交互状态
userInteracting.value = true;
clearTimeout(interactionTimer);
}
const onTouchEnd = () => {
// 触摸结束后延迟一段时间再取消交互状态
// 这样即使用户快速滚动,也不会被中途打断
clearTimeout(interactionTimer);
interactionTimer = setTimeout(() => {
userInteracting.value = false;
}, 600);
}
const scrollToBottom = () => {
if (scrollTimer) return; if (scrollTimer) return;
if (isFinishedOnInit) return;
scrollTimer = setTimeout(() => { scrollTimer = setTimeout(() => {
// ❗关键:强制触发滚动(小程序必须这样) // ❗关键:强制触发滚动(小程序必须这样)
// 如果用户正在交互,则跳过本次自动滚动
if (userInteracting.value) {
scrollTimer = null;
return;
}
scrollIntoViewId.value = ""; scrollIntoViewId.value = "";
nextTick(() => { nextTick(() => {
// 再次 nextTick + 延迟,兼容 markdown 渲染延迟 // 再次 nextTick + 延迟,兼容 markdown 渲染延迟
setTimeout(() => { setTimeout(() => {
scrollIntoViewId.value = "bottom-anchor"; scrollIntoViewId.value = "bottom-anchor";
// 测量高度以便后续滚动判断准确
measureScrollViewHeight();
}, 50); }, 50);
}); });
@@ -61,32 +132,47 @@ function scrollToBottom() {
}, 100); }, 100);
} }
onLoad(({ message = "", streamId = "" }) => { onLoad(({ message = "", streamId = "", finished = "0" }) => {
// 记录初始完成状态
isFinishedOnInit = finished === "1";
console.log("LongAnswer onLoad with params:", { message, streamId, finished });
// 初次测量 scroll-view 高度
nextTick(() => {
measureScrollViewHeight();
});
if (streamId) { if (streamId) {
// ✅ 流式数据 // ✅ 流式数据
unsubscribe = StreamManager.subscribe( unsubscribe = StreamManager.subscribe(
streamId, streamId,
(text = "", finished = false) => { (text = "", finished = false) => {
answerText.value = text || ""; answerText.value = text || "";
title.value = computeTitle(answerText.value);
if (answerText.value.length > 6) {
title.value = answerText.value.substring(0, 6) + "...";
}
nextTick(() => { nextTick(() => {
scrollToBottom(); // 每次接收数据都重新测量高度content size 可能变化,比如加载图)
measureScrollViewHeight();
// 流式完成时强制滚动到底部
if (finished) {
scrollToBottom();
}
// 流式中的数据更新:只有在用户未交互且接近底部时才自动滚动
else if (!userInteracting.value && isNearBottom.value) {
scrollToBottom();
}
}); });
} }
); );
} else { } else {
// ✅ 非流式 // ✅ 非流式
answerText.value = decodeURIComponent(message || ""); answerText.value = decodeURIComponent(message || "");
title.value = computeTitle(answerText.value);
if (answerText.value.length > 6) {
title.value = answerText.value.substring(0, 6) + "...";
}
nextTick(() => { nextTick(() => {
// 只有在初始化为非完成状态时才自动滚到底部
scrollToBottom(); scrollToBottom();
}); });
} }
@@ -96,6 +182,11 @@ onUnload(() => {
try { try {
unsubscribe && unsubscribe(); unsubscribe && unsubscribe();
} catch (e) { } } catch (e) { }
// 清理定时器,避免内存泄漏
try { clearTimeout(scrollTimer); } catch (e) { }
try { clearTimeout(interactionTimer); } catch (e) { }
scrollTimer = null;
interactionTimer = null;
}); });
</script> </script>

View File

@@ -4,15 +4,15 @@ import { devUrl, wssDevUrl } from "./baseUrl";
import { getServiceUrl } from "../api/GetServiceUrlApi"; import { getServiceUrl } from "../api/GetServiceUrlApi";
/// 版本号, 每次发版本前增加 /// 版本号, 每次发版本前增加
const versionValue = "1.0.4"; const versionValue = "1.1.1";
/// 是否是测试版本, 测试版本为true 发布版本为false /// 是否是测试版本, 测试版本为true 发布版本为false
const developVersion = true; const developVersion = false;
// 获取服务地址 // 获取服务地址
const getEvnUrl = async () => { const getEvnUrl = async () => {
/// 智念客户端不需要获取环境地址 /// 不需要获取环境地址
if (isZhiNian || developVersion) { if (developVersion) {
const appStore = useAppStore(); const appStore = useAppStore();
appStore.setServerConfig({ appStore.setServerConfig({
baseUrl: devUrl, // 服务器基础地址 baseUrl: devUrl, // 服务器基础地址