GenarrativeAI/Genarrative
11
0
Fork 0
Code Issues 19 Pull Requests 12 Actions 2 Packages Projects 1 Releases Wiki Activity

工具调用折叠块样式：整行浅底块头 + 右对齐耗时

Browse Source 
- styles.css 工具调用区块重写：块头做成一整行浅底圆角条目（图标 / 汇总 / 结束时间 / 总用时 / 折角），只用现有 --platform-* 变量
- 展开态每行一条：行内不换行、超长命令 text-overflow: ellipsis，耗时 margin-left: auto 右对齐、tabular-nums 对齐数字
- 行二级明细改用 agent-tool-call-row-command / -output / -changes 样式，命令与输出沿用中性底 + 细边框
- 补 [hidden] 显式 display: none，避免折叠态被 display: grid 顶掉后仍占位
- 展开箭头只做 rotate 过渡，不引入布局跳动；failed 行用 --platform-button-danger-text
- 删除旧 agent-tool-call-* 卡片样式；输入盒 / 面板留白 / 顶栏相关规则未动
This commit is contained in:
董羽秦
2026-09-15 17:44:04 +08:00
parent 9f7aed0b2d
commit 89e842d077
1 changed files with 139 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/ai-game-creator-shell/src/styles.css
+139 -48
View File
@@ -11293,59 +11293,64 @@ button.design-workspace-tree__entry:hover,
}
/* ============================================================
工具调用卡片（2026-09）：Codex 风格可折叠卡片
工具调用折叠块（2026-09）：一回合一个块，Codex 风格
============================================================
契约见 `docs/technical/【技术方案】GameAgent对话工具调用卡片-2026-09-14.md`：
折叠态一行摘要（图标 / 标题 / 摘要 / 状态点 / 状态 / 折角），展开态看命令、文件明细与输出。
块头一行浅底圆角条目（图标 / 汇总 / 结束时间 / 总用时 / 折角），展开态每行一条工具，
行右侧是对齐的耗时，行可二级展开看命令、文件明细与输出。
折叠由 `<button aria-expanded>` + `hidden` 控制（不改消息气泡与列表滚动模型），
配色只用现有 `--platform-*` 变量。 */
/* 卡片不进气泡：它是消息流里跟在 assistant 消息之后的一个块，左右与消息对齐。 */
/* 块不进气泡：它是消息流里插在该回合 assistant 消息之前的一个块，左右与消息对齐。 */
.game-workbench-chat
.project-supervisor-surface.is-direct-codex
.project-supervisor-message-list
> .agent-tool-call {
> .agent-tool-call-group {
display: grid;
width: 100%;
min-width: 0;
margin-top: -4px;
margin-top: 10px;
margin-bottom: 2px;
}
.agent-tool-call {
.agent-tool-call-group {
display: grid;
width: 100%;
min-width: 0;
margin-top: 10px;
overflow: hidden;
border: 1px solid var(--platform-surface-border);
border-radius: 12px;
background: var(--platform-button-secondary-fill);
color: var(--platform-text-base);
}
.agent-tool-call-head {
/* 块头：点整行展开，浅底条目本身是块头。 */
.agent-tool-call-group-head {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
padding: 8px 10px;
min-height: 32px;
padding: 6px 10px;
border: 0;
border-radius: 12px;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: background-color 120ms ease;
}
.agent-tool-call-head:hover,
.agent-tool-call-head:focus-visible {
.agent-tool-call-group-head:hover,
.agent-tool-call-group-head:focus-visible {
background: var(--platform-button-ghost-fill);
color: var(--platform-text-strong);
outline: none;
}
.agent-tool-call-icon {
.agent-tool-call-group-icon {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -11353,68 +11358,139 @@ button.design-workspace-tree__entry:hover,
color: var(--platform-text-soft);
}
.agent-tool-call-title {
flex: 0 0 auto;
color: var(--platform-text-strong);
font-size: 12px;
font-weight: 600;
}
/* 摘要压在标题后面：窄面板下靠 ellipsis 收窄，不换行、不把状态挤出可视区。 */
.agent-tool-call-summary {
/* 汇总压在图标后面：窄面板下靠 ellipsis 收窄，不换行、不把时间与用时挤出可视区。 */
.agent-tool-call-group-summary {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
color: var(--platform-text-soft);
color: var(--platform-text-strong);
font-size: 12px;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.agent-tool-call-status {
.agent-tool-call-group-time,
.agent-tool-call-group-duration {
flex: 0 0 auto;
color: var(--platform-text-soft);
font-size: 11px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.agent-tool-call-running-dot {
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 50%;
background: var(--platform-accent);
}
.agent-tool-call-chevron {
.agent-tool-call-group-chevron {
flex: 0 0 auto;
color: var(--platform-text-soft);
transition: transform 120ms ease;
}
.agent-tool-call-head[aria-expanded='true'] .agent-tool-call-chevron {
.agent-tool-call-group-head[aria-expanded='true']
.agent-tool-call-group-chevron {
transform: rotate(180deg);
}
/* `failed` 用错误色语义变量：标题、状态文案与图标一起变，不新增色值。 */
.agent-tool-call[data-status='failed'] .agent-tool-call-title,
.agent-tool-call[data-status='failed'] .agent-tool-call-status,
.agent-tool-call[data-status='failed'] .agent-tool-call-icon {
color: var(--platform-button-danger-text);
/* `hidden` 必须压过下面的 `display: grid`，否则折叠态只是内容不可见却仍占位。 */
.agent-tool-call-group-body[hidden],
.agent-tool-call-row-detail[hidden] {
display: none;
}
.agent-tool-call[data-status='failed'] {
border-color: var(--platform-button-danger-border);
background: var(--platform-button-danger-fill);
.agent-tool-call-group-body {
display: grid;
gap: 2px;
padding: 0 6px 8px;
}
.agent-tool-call-body {
.agent-tool-call-group-rows {
display: grid;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.agent-tool-call-group-row {
min-width: 0;
}
/* 一行一条工具：单行不换行，超长命令靠 ellipsis 收窄，耗时右对齐。 */
.agent-tool-call-row-head {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
padding: 4px 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
font-size: 12px;
line-height: 1.45;
text-align: left;
cursor: pointer;
transition: background-color 120ms ease;
}
.agent-tool-call-row-head:hover,
.agent-tool-call-row-head:focus-visible {
background: var(--platform-button-ghost-fill);
color: var(--platform-text-strong);
outline: none;
}
.agent-tool-call-row-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: var(--platform-text-soft);
}
.agent-tool-call-row-text {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.agent-tool-call-row-status {
flex: 0 0 auto;
color: var(--platform-text-soft);
font-size: 11px;
}
/* 耗时贴右边缘：`margin-left: auto` 把「执行中 / 失败」与耗时分开，窄面板下也不会互相挤压。 */
.agent-tool-call-row-duration {
flex: 0 0 auto;
margin-left: auto;
color: var(--platform-text-soft);
font-size: 11px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.agent-tool-call-row-chevron {
flex: 0 0 auto;
color: var(--platform-text-soft);
transition: transform 120ms ease;
}
.agent-tool-call-row-head[aria-expanded='true'] .agent-tool-call-row-chevron {
transform: rotate(180deg);
}
.agent-tool-call-row-detail {
display: grid;
gap: 8px;
padding: 0 10px 10px;
padding: 6px 8px 8px;
}
.agent-tool-call-command,
.agent-tool-call-output {
.agent-tool-call-row-command,
.agent-tool-call-row-output {
margin: 0;
max-height: 220px;
padding: 8px 9px;
@@ -11429,7 +11505,7 @@ button.design-workspace-tree__entry:hover,
overflow-wrap: anywhere;
}
.agent-tool-call-changes {
.agent-tool-call-row-changes {
display: grid;
gap: 4px;
margin: 0;
@@ -11437,7 +11513,7 @@ button.design-workspace-tree__entry:hover,
list-style: none;
}
.agent-tool-call-changes li {
.agent-tool-call-row-changes li {
display: flex;
align-items: baseline;
gap: 6px;
@@ -11447,12 +11523,27 @@ button.design-workspace-tree__entry:hover,
overflow-wrap: anywhere;
}
.agent-tool-call-changes li small {
.agent-tool-call-row-changes li small {
flex: 0 0 auto;
color: var(--platform-text-soft);
font-size: 10px;
}
.agent-tool-call-group-foot {
margin: 0;
padding: 0 8px 2px;
color: var(--platform-text-soft);
font-size: 11px;
font-variant-numeric: tabular-nums;
}
/* `failed` 行用错误色语义变量：行文案、状态与图标一起变，不新增色值。 */
.agent-tool-call-group-row[data-status='failed'] .agent-tool-call-row-text,
.agent-tool-call-group-row[data-status='failed'] .agent-tool-call-row-status,
.agent-tool-call-group-row[data-status='failed'] .agent-tool-call-row-icon {
color: var(--platform-button-danger-text);
}
/* ============================================================
右侧对话面板：输入盒内文字与控件的对齐（2026-09）
============================================================