JOJO/agent-Specialization
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(ui): 极简模式展开区追底改为stick-to-bottom逻辑

Browse Source
This commit is contained in:
JOJO 2026-07-11 20:27:07 +08:00
parent cc8d5817aa
commit 3585967b40
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
static/src/components/chat/MinimalBlocks.vue
View File

@ -216,7 +216,9 @@ const emit = defineEmits<{
const expandedGroups = ref(new Set<string>());
const thinkingRefs = new Map<string, HTMLElement>();
const stepsWrapperRefs = new Map<string, HTMLElement>();
const stepsWrapperScrollLocks = new Map<string, boolean>();
const summaryLoaders = new Map<string, Component>();
const STEPS_WRAPPER_BOTTOM_THRESHOLD = 20;
const TOOL_REEL_ITEM_HEIGHT = 26;
const TOOL_REEL_INTERVAL_MS = 1450;
const TOOL_REEL_ROLL_MS = 520;
@ -811,17 +813,35 @@ const getSummarySteps = (actions: Action[]) => {
}));
};
const isStepsWrapperNearBottom = (wrapper: HTMLElement) => {
const distance = wrapper.scrollHeight - wrapper.scrollTop - wrapper.clientHeight;
return distance <= STEPS_WRAPPER_BOTTOM_THRESHOLD;
};
const handleStepsWrapperScroll = (groupId: string, event: Event) => {
const wrapper = event.target as HTMLElement;
if (!wrapper) return;
const escaped = !isStepsWrapperNearBottom(wrapper);
stepsWrapperScrollLocks.set(groupId, escaped);
};
const registerStepsWrapper = (groupId: string, el: Element | null) => {
const prev = stepsWrapperRefs.get(groupId);
if (prev) {
prev.removeEventListener('scroll', handleStepsWrapperScroll as EventListener);
}
if (el instanceof HTMLElement) {
stepsWrapperRefs.set(groupId, el);
el.addEventListener('scroll', (event) => handleStepsWrapperScroll(groupId, event));
} else {
stepsWrapperRefs.delete(groupId);
stepsWrapperScrollLocks.delete(groupId);
}
};
const scrollStepsWrapperToBottom = (groupId: string) => {
const wrapper = stepsWrapperRefs.get(groupId);
if (wrapper) {
if (wrapper && !stepsWrapperScrollLocks.get(groupId)) {
wrapper.scrollTop = wrapper.scrollHeight;
}
};
@ -853,6 +873,8 @@ const toggleExpand = (groupId: string) => {
nextTick(() => {
const group = blockGroups.value.find((g) => g.id === groupId);
if (group && group.actions) {
// 展开时重置锁定：用户新展开的内容默认跟随到底部
stepsWrapperScrollLocks.set(groupId, false);
// 运行中展开时，将展开区滚动到底部
if (isSummaryRunning(group.actions, groupId)) {
scrollStepsWrapperToBottom(groupId);
@ -980,7 +1002,7 @@ watch(
() => props.actions,
() => {
syncToolReels();
// 对展开的 running 摘要组，自动将展开区滚动到底部
// 对展开的 running 摘要组，若用户未主动向上滚动，自动将展开区滚动到底部
nextTick(() => {
blockGroups.value.forEach((group) => {
if (
@ -1006,7 +1028,11 @@ watch(
onBeforeUnmount(() => {
Object.keys(toolReelStates).forEach(clearToolReelTimers);
stepsWrapperRefs.forEach((el) => {
el.removeEventListener('scroll', handleStepsWrapperScroll as EventListener);
});
stepsWrapperRefs.clear();
stepsWrapperScrollLocks.clear();
});
</script>