diff --git a/desktop/frontend-next/perf/stickyfold.mjs b/desktop/frontend-next/perf/stickyfold.mjs index 4c7727f0d0..8e07b49d1f 100644 --- a/desktop/frontend-next/perf/stickyfold.mjs +++ b/desktop/frontend-next/perf/stickyfold.mjs @@ -27,7 +27,14 @@ try { await page.locator("#scroller").evaluate((el) => { el.scrollTop = 0; }); const rest = await page.evaluate(() => Math.round(document.querySelector(".activity-group > summary").getBoundingClientRect().top - document.querySelector("#scroller").getBoundingClientRect().top)); assert.ok(rest >= 0, `${scheme}: at rest the header sits where it did`); - console.log(`${scheme}: header held at the top of the scroller, opaque`); + await page.locator(".activity-group > summary").click(); + const quiet = await page.evaluate(() => { + const group = getComputedStyle(document.querySelector(".activity-group")); + return { border: group.borderTopWidth, bg: group.backgroundColor }; + }); + assert.equal(quiet.border, "0px", `${scheme}: a folded group is a quiet line, not a bordered card`); + assert.equal(quiet.bg, "rgba(0, 0, 0, 0)", `${scheme}: a folded group paints no ground of its own`); + console.log(`${scheme}: header held at the top of the scroller, opaque; folded group is a quiet line`); await page.close(); } } finally { diff --git a/desktop/frontend-next/src/styles/studio.css b/desktop/frontend-next/src/styles/studio.css index 4ef5af0868..47a8ce8ff7 100644 --- a/desktop/frontend-next/src/styles/studio.css +++ b/desktop/frontend-next/src/styles/studio.css @@ -860,16 +860,13 @@ body { background: var(--page) !important; } color: var(--text); font-family: var(--ui); font-size: var(--read); font-weight: var(--w-reg); line-height: 1.72; letter-spacing: 0; -webkit-font-smoothing: antialiased; } -.activity-group { - margin: var(--sp-6) 0 0; border: 1px solid var(--hair); border-radius: 9px; - overflow: clip; -} +.activity-group { margin: var(--sp-4) 0 0; overflow: clip; } .activity-group > summary { - min-height: 38px; padding: 0 var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); - color: var(--muted); font-size: 11px; font-weight: 590; line-height: 1.5; + min-height: 28px; padding: 0; display: flex; align-items: center; gap: var(--sp-3); + color: var(--faint); font-size: 11px; font-weight: 500; line-height: 1.5; cursor: pointer; user-select: none; } -.activity-group > summary:hover { background: var(--overlay); color: var(--text); } +.activity-group > summary:hover { color: var(--muted); } .activity-group > summary .studio-icon { width: 12px; height: 12px; flex: none; } .activity-status-icon { color: var(--faint); } .activity-group[data-failed] .activity-status-icon { color: var(--err-ink); } @@ -891,19 +888,19 @@ body { background: var(--page) !important; } background: var(--net-wash); font: 650 11px/1.3 var(--ui); } -.activity-title { color: var(--text); font: 590 11px/1.5 var(--ui); } +.activity-title { color: inherit; font: 500 11px/1.5 var(--ui); } .activity-errors { color: var(--err-ink); font: 500 9.5px/1.5 var(--ui); } -.activity-count { margin-left: auto; color: var(--faint); font: 450 10px/1.5 var(--ui); } +.activity-count { margin-left: 0; color: var(--faint); font: 450 10px/1.5 var(--ui); } .activity-fold-icon { margin-left: 2px; color: var(--faint); transition: transform 140ms ease; } .activity-group[open] .activity-fold-icon { transform: rotate(180deg); } -.activity-group[open] > summary { position: sticky; top: 0; z-index: 1; background: var(--raised); border-bottom: 1px solid var(--hair); } +.activity-group[open] > summary { position: sticky; top: 0; z-index: 1; } .activity-group::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 150ms ease-out, opacity 110ms ease-out, content-visibility 150ms allow-discrete; } .activity-group[open]::details-content { block-size: auto; opacity: 1; } -.activity-body { padding: 4px 11px 2px; } +.activity-body { margin-left: 5px; padding: 2px 0 2px 12px; border-left: 1px solid var(--hair); } .activity-body .call { min-height: 38px; display: block; } .activity-body .call > .g { display: none; } .activity-body .call:not([data-k="me"]):not([data-k="say"]) > .c { @@ -3062,20 +3059,17 @@ body { font-size: 14px; line-height: 1.75; } .flow .call[data-k="say"] > .g .sym::after { color: var(--page); } .flow .call > .g .line { background: var(--border); } -.activity-group, .flow .call[data-call] > .c, .flow .ask { background: var(--raised) !important; border-color: var(--border) !important; } -.activity-group > summary:hover, .tool-disclosure > summary.hl:hover, .activity-body .tool-disclosure[open] > summary.hl, .reads-disclosure .peek button.row[data-on] { background: var(--overlay); } -.activity-group[open] > summary, .activity-body .call[data-call] > .c, .activity-call-input, .activity-call-result, .flow .tool-disclosure .dif { border-color: var(--hair) !important; } +.activity-group[open] > summary, .flow .tool-disclosure .dif-hd { background: var(--surface); } -.activity-title, .activity-body .hl .nm, .activity-call-input > header b, .activity-call-result b { color: var(--text); } diff --git a/release-notes/studio/unreleased.md b/release-notes/studio/unreleased.md index dea606c99f..e06e690ff4 100644 --- a/release-notes/studio/unreleased.md +++ b/release-notes/studio/unreleased.md @@ -13,3 +13,5 @@ - Studio 增强 Linux 两种安装包及全部 12 个发布产物的校验,GitHub Actions 验证安装后的通信、第二次启动、重装、正常退出和卸载。(#12906) - 展开很长的执行过程时,头部会吸在顶部,随时可以直接折叠,不用再往上翻。关联 #12931。 - A long expanded process group keeps its header at the top while you scroll, so it can be folded without scrolling back up. Fixes #12931. +- 对话里的「执行过程」不再是带边框的卡片,改成和「思考」一样的淡色一行,展开后只在左侧留一条细线,让回复和结论更突出。关联 #12953。 +- The activity group in a conversation is now a quiet line like the thinking row instead of a bordered card, with a thin rule at its left when open, so the reply and conclusion stand out. Fixes #12953.