feat(webui): 阶段管道的工具格改为滚动展示最新一条调用

「工具」是循环格:一轮里可能调几十次工具/输出通道。此前每一次都追加成
chip,这一格被撑成一长条,反而看不出「现在在调什么」。改为固定一行的
滚动视口——只留最新一条,右侧给出本轮累计次数;新调用到来时旧条向上
滚出、新条滑入(morph 就地改文本不会重放 CSS 动画,故摘类 + 强制 reflow
+ 重加类)。并给 chip 名称加 .rt-chip-t 承接省略号,窄框不再硬切半截。

配套 TestStagePipelineToolCellShowsLatestOnly 钉住该口径。
This commit is contained in:
JianFeeeee
2026-09-14 20:07:29 +08:00
parent f3fa0e8f5b
commit bc32fbbc98
3 changed files with 135 additions and 17 deletions

View File

@ -2767,6 +2767,44 @@
gap: 4px;
min-height: 23px;
}
/* 「工具」格的滚动视口:固定一行高,只露最新一条。
工具调用一轮内可能几十次,全部追加会把这一格撑成长条,反而看不出
「现在在调什么」;这里让旧条向上滚出视口,留下最新那条。 */
.rt-pipe-scroll {
flex-wrap: nowrap;
height: 23px;
min-height: 23px;
overflow: hidden;
align-items: center;
}
/* 名称可缩、计数不可缩:窄框里先截断工具名,累计次数始终看得见。 */
.rt-pipe-scroll .rt-chip {
flex: 0 1 auto;
min-width: 0;
max-width: none;
}
/* rtFlashLatestTool 每来一条新调用就重加一次,重置动画时间轴。 */
.rt-chip-enter {
animation: rt-chip-scroll-in 0.3s var(--ease-out);
}
@keyframes rt-chip-scroll-in {
from {
transform: translateY(115%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.rt-scroll-count {
flex: 0 0 auto;
margin-left: auto;
font-style: normal;
font-size: 10.5px;
opacity: 0.6;
font-variant-numeric: tabular-nums;
}
/* 拓扑光点:沿 animateMotion 给的路径跑;不吃鼠标事件,跑完由 JS 摘掉。 */
.rt-spark {
pointer-events: none;
@ -2923,6 +2961,14 @@
border: 1px solid var(--border-color);
color: var(--text-secondary);
}
.rt-chip-t {
/* font-weight 继承,不因为换成 <b> 而变粗;省略号靠它生效 */
font-weight: inherit;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rt-chip-tool {
border-color: rgba(136, 192, 208, 0.42);
color: var(--frost-300);