Files

HaHafeng 371e1c069c feat(ssa): Complete QPER architecture - Query, Planner, Execute, Reflection layers

Implement the full QPER intelligent analysis pipeline:

- Phase E+: Block-based standardization for all 7 R tools, DynamicReport renderer, Word export enhancement

- Phase Q: LLM intent parsing with dynamic Zod validation against real column names, ClarificationCard component, DataProfile is_id_like tagging

- Phase P: ConfigLoader with Zod schema validation and hot-reload API, DecisionTableService (4-dimension matching), FlowTemplateService with EPV protection, PlannedTrace audit output

- Phase R: ReflectionService with statistical slot injection, sensitivity analysis conflict rules, ConclusionReport with section reveal animation, conclusion caching API, graceful R error classification

End-to-end test: 40/40 passed across two complete analysis scenarios.

Co-authored-by: Cursor <cursoragent@cursor.com>

2026-02-21 18:15:53 +08:00

2.9 KiB

Raw Blame History

SSA-Pro UI 遮挡 Bug 终极修复方案

问题现象： 悬浮输入框物理遮挡了聊天区最底部的按钮，导致无法点击。

根本原因： Flexbox 布局下子元素的 padding-bottom 滚动塌陷。

解决方案： 引入物理占位垫片 (Scroll Spacer)。

到底哪里出了问题？（真凶浮出水面）

在您的 ssa-workspace.css 中，定义了：

CSS

.chat-messages-wrapper {

padding-bottom: 160px; /* 您期望用它把滚动条撑高 */

}

问题就在这里！ 当父容器（.chat-container）是 display: flex; flex-direction: column; 时，现代浏览器会忽略子元素底部的 margin-bottom 和 padding-bottom 来计算滚动区域。

这就导致了：

滚动条以为到底了，其实并没有加上那 160px 的安全高度。
导致“确认执行”按钮在滚动到最底部时，物理位置刚好停在了白色实体的输入框（.input-container-inner）的后面！
虽然外层渐变是透明且穿透的，但内部白色输入框有 pointer-events: auto，它实实在在地像一堵墙一样盖在了按钮上面，所以您怎么都点不到！

请前端开发人员执行以下两步修改：

第一步：修改 React 组件 (SSAChatPane.tsx)

找到您代码底部的 messagesEndRef 自动滚动锚点。我们给这个锚点加上一个特定的 className，让它充当“物理垫片”。

修改前：

      {/\* 自动滚动锚点 \*/}  
      \<div ref={messagesEndRef} /\>  
    \</div\>  
  \</div\>  
    
  {/\* 底部输入框... \*/}

修改后（直接替换为下面这行）：

      {/\* 自动滚动锚点与占位垫片 \- 解决底部输入框遮挡的终极方案 \*/}  
      \<div ref={messagesEndRef} className="scroll-spacer" /\>  
    \</div\>  
  \</div\>

第二步：修改样式表 (ssa-workspace.css)

清理掉之前失效的 padding 尝试，并为刚才的垫片添加高度样式。

修改前：

.chat-messages-wrapper {
width: 100%;
max-width: 768px;
display: flex;
flex-direction: column;
gap: 32px;
min-height: 100%;
padding-bottom: 160px; /* <--- 这个失效了，必须删掉 */
}

修改后（请仔细核对替换）：

.chat-messages-wrapper {
width: 100%;
max-width: 768px;
display: flex;
flex-direction: column;
gap: 32px;
min-height: 100%;
padding-bottom: 0px; /* 删掉原来的 160px */
}

/* 🆕 新增：强制撑开底部空间的物理垫片 */
.scroll-spacer {
height: 220px; /* 这个高度必须大于您悬浮输入框的最高高度 */
width: 100%;
flex-shrink: 0;
}

原理验证

修改完成后，当大模型输出“确认执行”卡片并自动滚动到底部时，.scroll-spacer 会在按钮下方强制撑开 220px 的空白区域。这样，按钮就会稳稳地停留在悬浮输入框的上方，再也不会被盖住了。

2.9 KiB Raw Blame History Unescape Escape