From d60808923f2df97c847f1809fdb66adcfbfb43f5 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Mon, 8 Jun 2026 02:08:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=A0=86=E5=8F=A0?=
 =?UTF-8?q?=E5=9D=97=E5=9C=A8=E6=8A=98=E5=8F=A0=E7=8A=B6=E6=80=81=E4=B8=8B?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E9=AC=BC=E7=95=9C=E4=B8=8E=E5=AE=B9=E5=99=A8?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E4=B8=8D=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因（双重修复）：
1. 容器高度计算改为精确目标高度公式 overhead + contentTarget，替代受CSS过渡
   影响的实时高度测量，消除 JS测量↔CSS过渡 的循环反馈
2. 给容器添加260ms CSS过渡（与块内容max-height过渡同duration/easing），
   用CSS统一负责所有动画，替代之前逐帧rAF追踪的视觉不同步
3. scrollListener中检测到scrollHeight变化时强制延长suppressUserIntentUntil
   至400ms，防止stick-to-bottom spring的自动追底被误判为用户滚动而中断

配套清理：移除调试日志代码和临时/api/debug/stacked-log端点
---
 server/app.py                                 |   4 +
 static/src/components/chat/ChatArea.vue       |  25 ++++-
 static/src/components/chat/StackedBlocks.vue  | 106 +++++++++++++-----
 .../styles/components/chat/_chat-area.scss    |  15 +++
 4 files changed, 118 insertions(+), 32 deletions(-)

diff --git a/server/app.py b/server/app.py
index 71e68a5..f723ee6 100644
--- a/server/app.py
+++ b/server/app.py
@@ -1,5 +1,9 @@
 """统一入口：复用 app_legacy，便于逐步替换/收敛。"""
 import argparse
+import os
+import json
+from datetime import datetime
+from flask import request
 
 from .app_legacy import (
     app,
diff --git a/static/src/components/chat/ChatArea.vue b/static/src/components/chat/ChatArea.vue
index 895d187..0eea756 100644
--- a/static/src/components/chat/ChatArea.vue
+++ b/static/src/components/chat/ChatArea.vue
@@ -805,6 +805,7 @@ let lastUserWheelUpTs = 0;
 let lastProgrammaticHintTs = 0;
 let lastProgrammaticHintSource = '';
 let suppressUserIntentUntil = 0;
+let lastLayoutChangeTs = 0;
 let scrollListener: ((event: Event) => void) | null = null;
 let wheelListener: ((event: WheelEvent) => void) | null = null;
 let traceAttachLogged = false;
@@ -924,6 +925,21 @@ function attachBounceListener() {
     const trusted = (event as any).isTrusted === true;
     const closeToProgrammaticHint = now - lastProgrammaticHintTs <= 140;
     const likelyLayoutDriven = Math.abs(heightDelta) > 2;
+    // 记录最近一次布局驱动的滚动，用于在 CSS transition 结束 / runSync 收尾
+    // 后继续抑制一小段时间，防止 stick-to-bottom 的 spring 收尾被误判为用户手动滚动
+    if (Math.abs(heightDelta) > 1) {
+      lastLayoutChangeTs = now;
+    }
+    const recentlyLayoutDriven = now - lastLayoutChangeTs <= 500;
+    // ── 鬼畜根因修复 ──
+    // 当 scrollHeight 发生任何变化（即使只是 1-2px 的 sub-pixel 差异），说明即将或正在
+    // 发生由内容高度变化驱动的自动追底滚动（stick-to-bottom spring）。如果不延长抑制窗口，
+    // 该滚动事件的 delta 可能较小（<5px）且 heightDelta 不足以触发 likelyLayoutDriven，
+    // 导致被误判为用户手动滚动 → stopScroll() → spring 中断 → 再次追底 → 振荡鬼畜。
+    // 每次检测到高度变化时，将抑制窗口延长至 400ms，完整覆盖 spring 动画周期。
+    if (Math.abs(heightDelta) > 0.5) {
+      suppressUserIntentUntil = Math.max(suppressUserIntentUntil, now + 400);
+    }
     const manualUpByWheel = delta < -3 && now - lastUserWheelUpTs <= 240;
     const strongManualUp = delta < -18 && now > suppressUserIntentUntil && !closeToProgrammaticHint;
     const shouldTreatAsUserIntent =
@@ -931,7 +947,10 @@ function attachBounceListener() {
       Math.abs(delta) > 5 &&
       now > suppressUserIntentUntil &&
       (!closeToProgrammaticHint || strongManualUp) &&
-      (delta < 0 ? strongManualUp || manualUpByWheel || !likelyLayoutDriven : !likelyLayoutDriven);
+      (delta < 0
+        ? strongManualUp || manualUpByWheel || !likelyLayoutDriven
+        : !likelyLayoutDriven && !recentlyLayoutDriven);
+
     if (shouldTreatAsUserIntent) {
       // 用户手动滚动时，立即中断 stick 引擎中可能仍在运行的动画滚动
       stopScroll();
@@ -1079,7 +1098,9 @@ async function stickScrollToBottom(
   // 点击“滚动到底部”按钮时会触发 smooth 动画滚动；期间会产生 trusted scroll 事件，
   // 若不短暂抑制会被误判为“用户手动滚动”从而中断动画，表现为只滚动一点点。
   if (options.force || options.behavior === 'smooth') {
-    suppressUserIntentUntil = Date.now() + 900;
+    suppressUserIntentUntil = Date.now() + 1200;
+  } else {
+    suppressUserIntentUntil = Date.now() + 600;
   }
   return await scrollToBottom({
     animation: options.behavior === 'smooth' ? 'smooth' : 'auto',
diff --git a/static/src/components/chat/StackedBlocks.vue b/static/src/components/chat/StackedBlocks.vue
index 8912eb7..4202e7e 100644
--- a/static/src/components/chat/StackedBlocks.vue
+++ b/static/src/components/chat/StackedBlocks.vue
@@ -2,6 +2,7 @@
   <div
     class="stacked-shell"
     ref="shell"
+    :class="{ 'no-transition': disableTransitions }"
     :style="{
       height: `${shellHeight}px`,
       paddingTop: moreVisible ? `${moreHeight}px` : '0px'
@@ -199,12 +200,11 @@ const moreHeight = ref(0);
 const innerOffset = ref(0);
 const viewportHeight = ref(0);
 const contentHeights = ref<Record<string, number>>({});
-const ANIMATION_SYNC_MS = 360;
 const MORE_ANIMATION_MS = 300;
 const COLLAPSE_MAX_HEIGHT = 600;
 let syncRaf: number | null = null;
-let syncUntil = 0;
 const isMoreAnimating = ref(false);
+const disableTransitions = ref(false);
 
 const stackableActions = computed(() =>
   (props.actions || []).filter((item) => item && (item.type === 'thinking' || item.type === 'tool'))
@@ -268,7 +268,9 @@ const moreBaseHeight = () => {
   const moreEl = resolveEl(moreBlock.value);
   if (!moreEl) return 56;
   const label = moreEl.querySelector('.more-title') as HTMLElement | null;
-  return Math.max(48, Math.ceil(label?.getBoundingClientRect().height || 56));
+  const labelH = Math.ceil(label?.getBoundingClientRect().height || 0);
+  const result = Math.max(48, labelH || 56);
+  return result;
 };
 
 const setShellMetrics = () => {
@@ -282,34 +284,71 @@ const setShellMetrics = () => {
 
   children.forEach((el, idx) => {
     const action = stackableActions.value[idx];
+    if (!action) return;
     const key = blockKey(action, idx);
     const content = el.querySelector('.collapsible-content') as HTMLElement | null;
-    const contentHeight = content
+    const contentScrollH = content
       ? Math.min(Math.ceil(content.scrollHeight), COLLAPSE_MAX_HEIGHT)
       : 0;
-    nextContentHeights[key] = contentHeight;
+    nextContentHeights[key] = contentScrollH;
 
-    // 使用当前真实高度而非「展开/折叠」状态推导值，避免在折叠动画过程中出现高度骤减导致的闪烁
-    const liveHeight = Math.ceil(el.getBoundingClientRect().height || el.offsetHeight || 0);
-    heights.push(liveHeight);
+    // ── 精确目标高度 = overhead + (展开 ? contentScrollH : 0) ──
+    // overhead = 块总渲染高 - 内容渲染高，恒等于「头部+边框+padding+进度条」等
+    // 所有非折叠内容元素之和。该值不受 CSS 过渡影响——无论块处于展开/折叠/
+    // 过渡中的哪个状态，overhead 始终恒定，因此目标高度是确定性的。
+    // 容器设置目标值后由 CSS 过渡平滑动画（与块 max-height 过渡同 duration/easing），
+    // 实现容器边框与内容展开完美同步。
+    const totalRendered = Math.ceil(el.getBoundingClientRect().height || el.offsetHeight || 0);
+    const contentRendered = content
+      ? Math.ceil(content.getBoundingClientRect().height)
+      : 0;
+    const overhead = totalRendered - contentRendered;
+    const isBlockExpanded = isExpanded(action, idx);
+    const targetBlockHeight = overhead + (isBlockExpanded ? contentScrollH : 0);
+    heights.push(targetBlockHeight);
   });
 
-  contentHeights.value = nextContentHeights;
+  // ── 比较新旧值，仅在实际变化时写入 ref，阻断 ResizeObserver 反馈循环 ──
+  const prevContentHeights = contentHeights.value;
+  const prevKeys = Object.keys(prevContentHeights);
+  const nextKeys = Object.keys(nextContentHeights);
+  let contentChanged = prevKeys.length !== nextKeys.length;
+  if (!contentChanged) {
+    for (const k of nextKeys) {
+      if (nextContentHeights[k] !== prevContentHeights[k]) {
+        contentChanged = true;
+        break;
+      }
+    }
+  }
+  if (contentChanged) {
+    contentHeights.value = nextContentHeights;
+  }
 
   const sum = (arr: number[]) => (arr.length ? arr.reduce((a, b) => a + b, 0) : 0);
   const totalHeight = sum(heights);
   const hiddenHeight = sum(heights.slice(0, Math.max(0, heights.length - VISIBLE_LIMIT)));
   const windowHeight = sum(heights.slice(-VISIBLE_LIMIT));
 
-  moreHeight.value = moreVisible.value ? moreBaseHeight() : 0;
+  const newMoreHeight = moreVisible.value ? moreBaseHeight() : 0;
 
   const targetShell =
-    moreHeight.value + (showAll.value || !moreVisible.value ? totalHeight : windowHeight);
+    newMoreHeight + (showAll.value || !moreVisible.value ? totalHeight : windowHeight);
   const targetOffset = showAll.value || !moreVisible.value ? 0 : -hiddenHeight;
+  const targetViewport = Math.max(0, targetShell - newMoreHeight - 2);
 
-  shellHeight.value = targetShell;
-  innerOffset.value = targetOffset;
-  viewportHeight.value = Math.max(0, targetShell - moreHeight.value);
+  // 仅在实际变化时更新，防止无变化的重渲染再度触发 ResizeObserver
+  let changed = false;
+  if (moreHeight.value !== newMoreHeight) { moreHeight.value = newMoreHeight; changed = true; }
+  if (contentChanged) { contentHeights.value = nextContentHeights; changed = true; }
+  if (shellHeight.value !== targetShell) { shellHeight.value = targetShell; changed = true; }
+  if (innerOffset.value !== targetOffset) { innerOffset.value = targetOffset; changed = true; }
+  if (viewportHeight.value !== targetViewport) { viewportHeight.value = targetViewport; changed = true; }
+
+  // 若本轮所有值均未变化，短暂冷却 ResizeObserver 以打断反馈循环
+  if (!changed) {
+    suppressObserverUntil = performance.now() + 100;
+  }
 };
 
 const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
@@ -358,6 +397,7 @@ const animateMoreToggle = (nextShowAll: boolean) => {
   moreHeight.value = start.more;
 
   isMoreAnimating.value = true;
+  disableTransitions.value = true;
   const startedAt = performance.now();
 
   const step = () => {
@@ -374,6 +414,7 @@ const animateMoreToggle = (nextShowAll: boolean) => {
       requestAnimationFrame(step);
     } else {
       isMoreAnimating.value = false;
+      disableTransitions.value = false;
       shellHeight.value = target.shell;
       innerOffset.value = target.offset;
       viewportHeight.value = target.viewport;
@@ -391,25 +432,20 @@ const runSync = () => {
     cancelAnimationFrame(syncRaf);
     syncRaf = null;
   }
-  syncUntil = performance.now() + ANIMATION_SYNC_MS;
-  const step = () => {
-    setShellMetrics();
-    if (performance.now() < syncUntil) {
-      syncRaf = requestAnimationFrame(step);
-    } else {
-      syncRaf = null;
-    }
-  };
-  syncRaf = requestAnimationFrame(step);
+  // 目标高度是确定性的（overhead + contentTarget），单次调用设置目标值，
+  // 容器的 CSS 过渡自动处理平滑动画，无需逐帧 rAF 追踪
+  setShellMetrics();
 };
 
 let resizeObserver: ResizeObserver | null = null;
 let heightRaf: number | null = null;
+let suppressObserverUntil = 0;
 
 onMounted(() => {
-  const innerEl = resolveEl(inner.value);
+  const el = resolveEl(inner.value);
   setShellMetrics();
   resizeObserver = new ResizeObserver(() => {
+    if (performance.now() < suppressObserverUntil) return;
     if (heightRaf) {
       cancelAnimationFrame(heightRaf);
     }
@@ -417,8 +453,8 @@ onMounted(() => {
       setShellMetrics();
     });
   });
-  if (innerEl) {
-    resizeObserver.observe(innerEl);
+  if (el) {
+    resizeObserver.observe(el);
   }
 });
 
@@ -437,9 +473,19 @@ onBeforeUnmount(() => {
   }
 });
 
-watch([stackableActions, moreVisible], () => {
-  nextTick(() => runSync());
-});
+// 仅在 action 列表内容真正变化时触发 runSync，而非每次父组件重渲染传入新数组引用
+watch(
+  () => {
+    const acts = stackableActions.value;
+    // 指纹：长度 + 首尾 blockId + 最后一个 action 的 streaming 状态
+    const firstId = acts[0]?.blockId || acts[0]?.id || '';
+    const lastId = acts[acts.length - 1]?.blockId || acts[acts.length - 1]?.id || '';
+    return `${acts.length}|${firstId}|${lastId}|${moreVisible.value}`;
+  },
+  () => {
+    nextTick(() => runSync());
+  }
+);
 
 watch(
   () => (props.expandedBlocks ? props.expandedBlocks.size : 0),
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index 9f840b9..23b6063 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -792,17 +792,32 @@
   box-shadow: none;
   overflow: hidden;
   min-height: 0;
+  // 容器高度过渡，与块内 collapsible-content 的 max-height 过渡（260ms）同步
+  transition: height 260ms cubic-bezier(0.4, 0, 0.2, 1),
+              padding-top 260ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+// JS 动画（animateMoreToggle）期间禁用容器及子元素的 CSS 过渡，
+// 避免手动插值与 CSS 过渡冲突导致抖动
+.stacked-shell.no-transition,
+.stacked-shell.no-transition .stacked-viewport,
+.stacked-shell.no-transition .stacked-inner {
+  transition: none !important;
 }
 
 .stacked-inner {
   position: relative;
   width: 100%;
+  // 内部容器平移过渡，与块动画同步
+  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .stacked-viewport {
   overflow: hidden;
   position: relative;
   width: 100%;
+  // 视口高度过渡，与块动画同步
+  transition: height 260ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .stacked-item {