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

feat(workbench): expand SCADA monitoring and investigation presentation

Browse Source
This commit is contained in:
jiang
2026-11-07 19:50:14 +08:00
parent 0801e161ec
commit ba71e2d529
133 changed files with 6754 additions and 1438 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles.css
+110 -19
View File
@@ -2296,13 +2296,13 @@ 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(even) { border-left: 1px solid var(--surface-border); }
}
.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"] {
.answer-ui-chart .answer-ui-chart-series button[aria-pressed] { box-shadow: none; font-weight: 400; }
.answer-ui-chart .answer-ui-chart-series button[aria-pressed="true"] {
border-color: var(--surface-border);
background: var(--surface-control);
color: var(--ink);
}
.answer-ui-root .answer-ui-chart-series button[aria-pressed="false"] { color: var(--ink-muted); }
.answer-ui-chart .answer-ui-chart-series button[aria-pressed="false"] { color: var(--ink-muted); }
.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; }
@@ -2445,6 +2445,27 @@ details[open] > summary > .disclosure-accordion-indicator {
height: min(720px, 80dvh);
max-width: 760px;
}
/* Layout only: keep the shared acrylic material and its shadows unclipped. */
[data-sonner-toaster].map-notice-stack {
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
[data-sonner-toaster].map-notice-stack[data-y-position="bottom"] {
flex-direction: column-reverse;
}
[data-sonner-toaster].map-notice-stack [data-sonner-toast][data-styled="false"] {
position: relative;
top: auto;
bottom: auto;
flex-shrink: 0;
height: auto;
--y: translateY(0);
}
[data-sonner-toaster].map-notice-stack [data-sonner-toast][data-visible="false"] {
display: none;
}
body:has(:is(.agent-history-dialog, .agent-topic-dialog)[data-state="open"]) [data-sonner-toaster] { z-index: 109; }
@media (prefers-reduced-motion: reduce) {
.agent-history-dialog,
@@ -2549,10 +2570,6 @@ body:has(:is(.agent-history-dialog, .agent-topic-dialog)[data-state="open"]) [da
.scada-fm-window:hover {
border-color: color-mix(in srgb, white 50%, var(--surface-border));
}
.scada-fm-window:focus-visible {
outline: 2px solid var(--action-focus-ring);
outline-offset: 3px;
}
.scada-fm-window[data-dragging="true"] {
cursor: grabbing;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 95%), inset 0 2px 12px rgb(68 86 112 / 9%), 0 1px 4px rgb(45 60 82 / 4%);
@@ -2585,18 +2602,17 @@ body:has(:is(.agent-history-dialog, .agent-topic-dialog)[data-state="open"]) [da
.scada-fm-needle {
z-index: 3;
background: var(--scada-timeline-needle);
box-shadow: 0 0 0 1px rgb(255 255 255 / 45%), 0 0 7px color-mix(in srgb, var(--scada-timeline-needle) 18%, transparent);
}
.scada-fm-needle::before {
content: "";
position: absolute;
top: -5px;
left: -3px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid var(--scada-timeline-needle);
clip-path: polygon(
0 0,
100% 0,
60% 6px,
60% calc(100% - 6px),
100% 100%,
0 100%,
40% calc(100% - 6px),
40% 6px
);
filter: drop-shadow(0 0 3px color-mix(in srgb, var(--scada-timeline-needle) 18%, transparent));
}
@supports not (backdrop-filter: blur(1px)) {
.scada-fm-window { background: var(--surface-reading, #f7f9fc); }
@@ -2604,3 +2620,78 @@ body:has(:is(.agent-history-dialog, .agent-topic-dialog)[data-state="open"]) [da
@media (prefers-reduced-motion: reduce) {
.scada-fm-window { transition: none; }
}
/* Corner light fades independently along each edge, avoiding circular contours. */
.scada-alert-atmosphere {
--scada-alert-rim: color-mix(in srgb, var(--action-danger) 42%, transparent);
--scada-alert-edge: color-mix(in srgb, var(--action-danger) 35%, transparent);
--scada-alert-light: color-mix(in srgb, var(--action-danger) 68%, transparent);
--scada-alert-depth: 28px;
--scada-alert-corner-width: clamp(72px, 12vw, 180px);
--scada-alert-corner-height: clamp(52px, 9vh, 100px);
position: fixed;
inset: 0;
z-index: 85;
overflow: hidden;
pointer-events: none;
}
.scada-alert-atmosphere[data-intensity="soft"] {
--scada-alert-rim: color-mix(in srgb, var(--action-danger) 25%, transparent);
--scada-alert-edge: color-mix(in srgb, var(--action-danger) 20%, transparent);
--scada-alert-light: color-mix(in srgb, var(--action-danger) 40%, transparent);
--scada-alert-depth: 16px;
}
.scada-alert-atmosphere[data-intensity="strong"] {
--scada-alert-rim: color-mix(in srgb, var(--action-danger) 60%, transparent);
--scada-alert-edge: color-mix(in srgb, var(--action-danger) 50%, transparent);
--scada-alert-light: color-mix(in srgb, var(--action-danger) 88%, transparent);
--scada-alert-depth: 40px;
}
.scada-alert-atmosphere-frame {
position: absolute;
inset: 0;
border: 1px solid var(--scada-alert-rim);
box-shadow: inset 0 0 var(--scada-alert-depth) 0 var(--scada-alert-edge);
}
.scada-alert-atmosphere-light {
position: absolute;
inset: 0;
background:
linear-gradient(to right, var(--scada-alert-light), transparent) top left / var(--scada-alert-corner-width) var(--scada-alert-corner-height) no-repeat,
linear-gradient(to left, var(--scada-alert-light), transparent) top right / var(--scada-alert-corner-width) var(--scada-alert-corner-height) no-repeat,
linear-gradient(to right, var(--scada-alert-light), transparent) bottom left / var(--scada-alert-corner-width) var(--scada-alert-corner-height) no-repeat,
linear-gradient(to left, var(--scada-alert-light), transparent) bottom right / var(--scada-alert-corner-width) var(--scada-alert-corner-height) no-repeat;
mask:
linear-gradient(to bottom, black, transparent) top / 100% var(--scada-alert-corner-height) no-repeat,
linear-gradient(to top, black, transparent) bottom / 100% var(--scada-alert-corner-height) no-repeat;
animation: scada-alert-breathe 4.8s ease-in-out infinite;
}
.scada-alert-atmosphere-notice {
position: absolute;
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto max-content;
bottom: max(9rem, calc(env(safe-area-inset-bottom) + 7rem));
left: 50%;
width: max-content;
min-width: min(23rem, calc(100% - 2rem));
max-width: calc(100% - 2rem);
translate: -50% 0;
pointer-events: auto;
}
.scada-alert-atmosphere-close { grid-column: 4; grid-row: 1; align-self: start; }
@media (max-width: 480px) {
.scada-alert-atmosphere-notice { grid-template-columns: 36px minmax(0, 1fr) max-content; }
.scada-alert-atmosphere-close { grid-column: 3; }
.scada-alert-atmosphere-action { grid-column: 2; grid-row: 2; justify-self: start; }
}
@keyframes scada-alert-breathe {
0%, 100% { opacity: 0.42; }
50% { opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
.scada-alert-atmosphere-light { animation: none; opacity: 0.4; }
}
@media (forced-colors: active) {
.scada-alert-atmosphere-frame { border-color: Highlight; box-shadow: none; }
.scada-alert-atmosphere-light { display: none; animation: none; }
}