OrgTJWater/next-tjwater-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: polish intelligent answer interactions

Browse Source
This commit is contained in:
jiang
2026-10-29 18:39:50 +08:00
parent 9474788db6
commit 1ee21d1c7f
26 changed files with 1762 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+40 -9
View File
@@ -2279,12 +2279,22 @@ details[open] > summary > .disclosure-accordion-indicator {
}
.answer-ui-root { --surface-reading: #ffffff; --surface-control: #f1f5f9; --surface-border: #e2e8f0; --ink: #0f172a; --ink-muted: #64748b; }
.answer-content-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--surface-divider); }
.answer-content-nav > span { min-width: 0; line-height: 1.6; }
.answer-ui-root :is(.answer-ui-metric, .answer-ui-chart, .answer-ui-evidence, .answer-ui-location, .answer-ui-form, [data-answer-table]) { scroll-margin-block: 12px; }
.answer-ui-root :is(.answer-ui-metric, .answer-ui-chart, .answer-ui-evidence, .answer-ui-location, .answer-ui-form, [data-answer-table]):focus-visible { outline: 2px solid var(--action-blue); outline-offset: 2px; }
.answer-ui-root .answer-ui-stack { gap: 14px; }
.answer-ui-root .answer-ui-stack-compact { gap: 10px; }
.answer-ui-metric { min-width: 0; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; box-shadow: none; }
.answer-ui-root[data-answer-density="compact"] :is(.answer-task-layout, .answer-task-layout-simple, .answer-task-overview, .answer-task-analysis, .answer-task-support) { gap: 12px; }
.answer-ui-root .answer-ui-stack[data-answer-density="compact"] { gap: 10px; }
.answer-ui-root .answer-ui-stack[data-answer-density="comfortable"] { gap: 16px; }
.answer-ui-root[data-answer-density="comfortable"] :is(.answer-task-layout, .answer-task-layout-simple, .answer-task-overview, .answer-task-analysis, .answer-task-support) { gap: 20px; }
.answer-ui-root [data-answer-result] { scroll-margin-block: 12px; }
.answer-ui-root [data-answer-result]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.answer-ui-metric { min-width: 0; border-color: var(--surface-border); background: var(--surface-reading); box-shadow: none; }
.answer-ui-metric-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 4px; row-gap: 4px; }
.answer-ui-metric-label { grid-column: 1; grid-row: 1; min-width: 0; }
.answer-ui-metric-value { grid-column: 1 / -1; grid-row: 2; }
.answer-ui-metric-value { grid-column: 1 / -1; grid-row: 2; color: var(--ink); }
.answer-ui-metric-source { grid-column: 1 / -1; grid-row: 3; }
.answer-ui-metric-ask { display: contents; }
.answer-ui-metric-ask > button { grid-column: 2; grid-row: 1; }
@@ -2294,7 +2304,7 @@ details[open] > summary > .disclosure-accordion-indicator {
gap: 0;
border: 1px solid var(--surface-border);
border-radius: 12px;
background: var(--surface-control);
background: var(--surface-reading);
}
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) > .answer-ui-metric {
border: 0;
@@ -2309,7 +2319,7 @@ details[open] > summary > .disclosure-accordion-indicator {
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) > .answer-ui-metric:nth-child(2) { border-top: 0; }
.answer-ui-stack-comparison:has(> .answer-ui-metric):not(:has(> :not(.answer-ui-metric))) > .answer-ui-metric:nth-child(even) { border-left: 1px solid var(--surface-border); }
}
.answer-ui-chart { min-width: 0; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; box-shadow: 0 1px 2px rgb(15 23 42 / 0.03); }
.answer-ui-chart { min-width: 0; border-color: var(--surface-border); background: var(--surface-reading); box-shadow: none; }
.answer-ui-root .answer-ui-chart-series button[aria-pressed] { box-shadow: none; font-weight: 400; }
.answer-ui-root .answer-ui-chart-series button[aria-pressed="true"] {
border-color: var(--surface-border);
@@ -2317,11 +2327,11 @@ details[open] > summary > .disclosure-accordion-indicator {
color: var(--ink);
}
.answer-ui-root .answer-ui-chart-series button[aria-pressed="false"] { color: var(--ink-muted); }
.answer-ui-evidence { min-width: 0; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; }
.answer-ui-evidence-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #f1f5f9; color: #64748b; }
.answer-ui-location { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 12px; }
.answer-ui-form { padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.answer-ui-form :is(input, textarea) { background: #ffffff; }
.answer-ui-evidence { min-width: 0; border: 1px solid var(--surface-border); border-radius: var(--radius); background: var(--surface-reading); }
.answer-ui-evidence-icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--surface-control); color: var(--ink-muted); }
.answer-ui-location { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-color: var(--surface-border); background: var(--surface-reading); box-shadow: none; }
.answer-ui-form { min-width: 0; padding: 0; border-color: var(--surface-border); background: var(--surface-reading); box-shadow: none; }
.answer-ui-form :is(input, textarea) { background: var(--surface-reading); }
.answer-ui-table { scrollbar-gutter: stable; }
/* Shared report reading surfaces, independent of the map's material. */
@@ -2434,3 +2444,24 @@ body:has(:is(.agent-history-dialog, .agent-topic-dialog)[data-state="open"]) [da
padding-bottom: env(safe-area-inset-bottom);
}
}
/* One answer becomes a working surface when its actual content warrants it. */
.answer-task-layout, .answer-task-layout-simple { display: grid; min-width: 0; gap: 16px; }
.answer-task-overview { grid-column: 1 / -1; min-width: 0; }
.answer-task-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; border-top: 1px solid var(--surface-divider); padding-top: 12px; font-size: 12px; font-weight: 500; }
.answer-task-heading > span + span { font-size: 11px; font-weight: 400; color: var(--ink-muted); }
.answer-task-support-section { min-width: 0; border-top: 1px solid var(--surface-divider); }
.answer-task-layout-simple .answer-task-support-section { border: 0; }
.answer-task-layout-simple .answer-task-support-content { padding-top: 0; }
.answer-task-support:empty { display: none; }
.answer-ui-metric-actions { grid-column: 2; grid-row: 1; align-self: start; }
.answer-chart-range-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
.answer-chart-range-summary > :last-child { grid-column: 1 / -1; }
.answer-selection-tray { margin-top: 16px; }
.answer-selection-tray summary::marker { color: var(--ink-muted); }
@container (min-width: 800px) {
.answer-task-layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 0.62fr); align-items: start; gap: 18px 24px; }
.answer-task-layout .answer-task-heading { border-top: 0; padding-top: 0; }
.answer-task-layout .answer-task-support { padding-left: 20px; border-left: 1px solid var(--surface-divider); }
.answer-task-layout .answer-task-support-section:first-child { border-top: 0; }
}