mirror of
https://github.com/QwenLM/qwen-code.git
synced 2026-08-16 20:24:50 +00:00
48e5d5d0d7
* feat(web-shell): polish stats table layout and todo panel UI - Use CSS grid for model usage table with fixed column widths - Add loading spinner for in_progress todo items - Add strikethrough for completed todo items - Introduce nested variant for PivotRow to show thoughts as output sub-item - Clarify i18n labels: stats.prompt -> Input Tokens, stats.output -> Output Tokens * fix(web-shell): address review suggestions for stats table and todo panel - Add prefers-reduced-motion media query for todo spinner (accessibility) - Right-align numeric columns in model usage table for magnitude comparison - Consolidate duplicate i18n keys (stats.prompt/output → stats.inputTokens/outputTokens) * fix(web-shell): address stats review feedback --------- Co-authored-by: ytahdn <ytahdn@gmail.com> Co-authored-by: 易良 <1204183885@qq.com>
182 lines
2.9 KiB
CSS
182 lines
2.9 KiB
CSS
.panel {
|
||
display: flex;
|
||
width: min(100%, var(--chat-regular-content-width, 1000px));
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
padding: 12px 16px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
color: var(--foreground);
|
||
background: var(--background);
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
line-height: 1.45;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.title {
|
||
margin-bottom: 8px;
|
||
color: var(--agent-blue-500);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.sectionTitle {
|
||
margin-top: 8px;
|
||
color: var(--foreground);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.spacer {
|
||
height: 8px;
|
||
}
|
||
|
||
/* ---------- Pivoted table (metric rows × model columns) ---------- */
|
||
|
||
.pivotRow {
|
||
display: flex;
|
||
align-items: baseline;
|
||
min-height: 20px;
|
||
}
|
||
|
||
.metricCell {
|
||
flex: 0 0 24ch;
|
||
min-width: 24ch;
|
||
color: var(--agent-blue-500);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.metricCellSection {
|
||
flex: 0 0 24ch;
|
||
min-width: 24ch;
|
||
color: var(--foreground);
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.metricCellSub {
|
||
flex: 0 0 24ch;
|
||
min-width: 24ch;
|
||
padding-left: 2ch;
|
||
color: var(--muted-foreground);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.modelCell {
|
||
flex: 1 1 20ch;
|
||
min-width: 16ch;
|
||
color: var(--foreground);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.modelCellHeader {
|
||
flex: 1 1 20ch;
|
||
min-width: 16ch;
|
||
color: var(--foreground);
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.divider {
|
||
height: 1px;
|
||
margin: 2px 0;
|
||
background: var(--border);
|
||
}
|
||
|
||
/* ---------- Summary rows (key-value) ---------- */
|
||
|
||
.kvRow {
|
||
display: grid;
|
||
width: 100%;
|
||
grid-template-columns: 24ch minmax(0, 1fr);
|
||
align-items: baseline;
|
||
}
|
||
|
||
.kvSubRow {
|
||
display: grid;
|
||
width: 100%;
|
||
grid-template-columns: 22ch minmax(0, 1fr);
|
||
align-items: baseline;
|
||
padding-left: 2ch;
|
||
}
|
||
|
||
.kvLabel {
|
||
color: var(--agent-blue-500);
|
||
}
|
||
|
||
.kvValue {
|
||
justify-self: end;
|
||
color: var(--foreground);
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ---------- Simple table rows (model usage & tool stats) ---------- */
|
||
|
||
.tableRow {
|
||
display: flex;
|
||
align-items: baseline;
|
||
min-height: 20px;
|
||
}
|
||
|
||
.modelUsageRow {
|
||
display: grid;
|
||
grid-template-columns:
|
||
minmax(14ch, 1.4fr)
|
||
repeat(3, minmax(9ch, 1fr));
|
||
column-gap: 16px;
|
||
}
|
||
|
||
.tableNameCol {
|
||
color: var(--foreground);
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.tableToolCol {
|
||
flex: 0 0 25ch;
|
||
min-width: 15ch;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.tableNumCol {
|
||
flex: 1 1 15ch;
|
||
min-width: 10ch;
|
||
color: var(--foreground);
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tableValueCol {
|
||
min-width: 9ch;
|
||
color: var(--foreground);
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* ---------- Semantic colors ---------- */
|
||
|
||
.success {
|
||
color: var(--success-color);
|
||
}
|
||
|
||
.error {
|
||
color: var(--error-color);
|
||
}
|
||
|
||
.secondary {
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
.warning {
|
||
color: var(--warning-color);
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.panel {
|
||
font-size: 12px;
|
||
}
|
||
}
|