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>
This commit is contained in:
2026-02-21 18:15:53 +08:00
parent 428a22adf2
commit 371e1c069c
73 changed files with 9242 additions and 706 deletions

View File

@@ -0,0 +1,88 @@
# **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` 来计算滚动区域**。
这就导致了:
1. 滚动条以为到底了,其实并没有加上那 160px 的安全高度。
2. 导致“确认执行”按钮在滚动到最底部时,**物理位置刚好停在了白色实体的输入框(`.input-container-inner`)的后面**
3. 虽然外层渐变是透明且穿透的,但内部白色输入框有 `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 的空白区域。这样,**按钮就会稳稳地停留在悬浮输入框的上方**,再也不会被盖住了。