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

feat(workbench): refine operational interface

Browse Source
This commit is contained in:
jiang
2026-07-14 16:22:21 +08:00
parent ed60a13f12
commit 2b768c2c06
25 changed files with 512 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+213 -7
View File
@@ -7,8 +7,8 @@
background: #eaf1f8;
--canvas-map: #eaf1f8;
--canvas-map-grid: rgba(37, 99, 235, 0.06);
--canvas-panel: rgba(255, 255, 255, 0.76);
--canvas-panel-strong: rgba(255, 255, 255, 0.92);
--canvas-panel: rgba(255, 255, 255, 0.94);
--canvas-panel-strong: rgba(255, 255, 255, 0.98);
--action-blue: #2563eb;
--action-blue-hover: #1d4ed8;
--action-blue-soft: #dbeafe;
@@ -20,6 +20,30 @@
--shadow-control: 0 14px 34px rgba(15, 23, 42, 0.18);
--shadow-panel: 0 24px 70px rgba(30, 64, 115, 0.2);
--shadow-focus: 0 30px 90px rgba(15, 23, 42, 0.26);
--glass-air: rgba(255, 255, 255, 0.84);
--glass-navigation: rgba(255, 255, 255, 0.9);
--glass-panel: rgba(255, 255, 255, 0.9);
--glass-readable: rgba(255, 255, 255, 0.94);
--glass-control: rgba(255, 255, 255, 0.92);
--glass-menu: rgba(255, 255, 255, 0.94);
--glass-focus: rgba(255, 255, 255, 0.94);
--surface-solid: rgba(255, 255, 255, 0.98);
--glass-edge: rgba(255, 255, 255, 0.58);
--glass-edge-strong: rgba(255, 255, 255, 0.76);
--glass-divider: rgba(100, 116, 139, 0.16);
--glass-highlight: rgba(255, 255, 255, 0.46);
--glass-info: rgba(239, 246, 255, 0.78);
--glass-normal: rgba(240, 253, 250, 0.78);
--glass-warning: rgba(255, 247, 237, 0.82);
--glass-danger: rgba(254, 242, 242, 0.86);
--glass-agent: rgba(245, 243, 255, 0.82);
--scrim-soft: rgba(15, 23, 42, 0.2);
--scrim-focus: rgba(15, 23, 42, 0.48);
--blur-air: 16px;
--blur-navigation: 24px;
--blur-control: 16px;
--blur-panel: 20px;
--blur-focus: 24px;
--background: 210 40% 98%;
--foreground: 222 47% 11%;
--card: 0 0% 100%;
@@ -84,14 +108,196 @@ input:focus-visible {
}
.command-panel {
border: 1px solid var(--border-soft);
background: var(--canvas-panel);
box-shadow: var(--shadow-panel);
backdrop-filter: blur(20px);
background: var(--glass-panel);
box-shadow:
inset 0 1px 0 var(--glass-edge),
var(--shadow-panel);
backdrop-filter: blur(var(--blur-panel)) saturate(1.08);
-webkit-backdrop-filter: blur(var(--blur-panel)) saturate(1.08);
}
.glass-navigation,
.glass-panel,
.glass-readable,
.glass-control,
.glass-menu,
.glass-focus,
.glass-info,
.glass-normal,
.glass-warning,
.glass-danger,
.glass-agent {
border-color: transparent;
background-clip: padding-box;
}
.glass-navigation {
background-color: var(--glass-navigation);
box-shadow:
inset 0 1px 0 var(--glass-edge),
0 8px 28px rgba(15, 23, 42, 0.1);
backdrop-filter: blur(var(--blur-navigation)) saturate(1.08);
-webkit-backdrop-filter: blur(var(--blur-navigation)) saturate(1.08);
}
.glass-panel {
background-color: var(--glass-panel);
box-shadow:
inset 0 1px 0 var(--glass-edge),
0 24px 70px rgba(30, 64, 115, 0.18);
backdrop-filter: blur(var(--blur-panel)) saturate(1.08);
-webkit-backdrop-filter: blur(var(--blur-panel)) saturate(1.08);
}
.glass-readable {
background-color: var(--glass-readable);
box-shadow:
inset 0 1px 0 var(--glass-edge-strong),
0 24px 70px rgba(30, 64, 115, 0.2);
backdrop-filter: blur(var(--blur-panel)) saturate(1.06);
-webkit-backdrop-filter: blur(var(--blur-panel)) saturate(1.06);
}
.glass-control {
background-color: var(--glass-control);
box-shadow:
inset 0 1px 0 var(--glass-edge-strong),
var(--shadow-control);
backdrop-filter: blur(var(--blur-control)) saturate(1.08);
-webkit-backdrop-filter: blur(var(--blur-control)) saturate(1.08);
}
.glass-menu {
background-color: var(--glass-menu);
box-shadow:
inset 0 1px 0 var(--glass-edge-strong),
0 18px 48px rgba(15, 23, 42, 0.16);
backdrop-filter: blur(var(--blur-panel)) saturate(1.04);
-webkit-backdrop-filter: blur(var(--blur-panel)) saturate(1.04);
}
.glass-focus {
background-color: var(--glass-focus);
box-shadow:
inset 0 1px 0 var(--glass-edge-strong),
var(--shadow-focus);
backdrop-filter: blur(var(--blur-focus)) saturate(1.06);
-webkit-backdrop-filter: blur(var(--blur-focus)) saturate(1.06);
}
.glass-info {
background-color: var(--glass-info);
box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.42);
}
.glass-normal {
background-color: var(--glass-normal);
box-shadow: inset 0 1px 0 rgba(94, 234, 212, 0.4);
}
.glass-warning {
background-color: var(--glass-warning);
box-shadow: inset 0 1px 0 rgba(253, 186, 116, 0.46);
}
.glass-danger {
background-color: var(--glass-danger);
box-shadow: inset 0 1px 0 rgba(252, 165, 165, 0.48);
}
.glass-agent {
background-color: var(--glass-agent);
box-shadow: inset 0 1px 0 rgba(196, 181, 253, 0.42);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass-navigation,
.glass-panel,
.glass-readable,
.glass-control,
.glass-menu,
.glass-focus,
.command-panel {
background-color: rgba(255, 255, 255, 0.96);
}
.glass-info {
background-color: #eff6ff;
}
.glass-normal {
background-color: #f0fdfa;
}
.glass-warning {
background-color: #fff7ed;
}
.glass-danger {
background-color: #fef2f2;
}
.glass-agent {
background-color: #f5f3ff;
}
}
@media (prefers-reduced-transparency: reduce) {
.glass-navigation,
.glass-panel,
.glass-readable,
.glass-control,
.glass-menu,
.glass-focus,
.command-panel {
background-color: var(--surface-solid);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.glass-info {
background-color: #eff6ff;
}
.glass-normal {
background-color: #f0fdfa;
}
.glass-warning {
background-color: #fff7ed;
}
.glass-danger {
background-color: #fef2f2;
}
.glass-agent {
background-color: #f5f3ff;
}
}
@media (pointer: coarse) {
.glass-navigation,
.glass-panel,
.glass-readable,
.glass-control,
.glass-menu,
.glass-focus,
.command-panel {
background-color: rgba(255, 255, 255, 0.96);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.glass-control,
.glass-menu,
.glass-focus {
background-color: var(--surface-solid);
}
}
.agent-panel-band {
background: rgba(255, 255, 255, 0.96);
background: var(--glass-menu);
}
.agent-panel-conversation {