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