feat: unify monitor action workbenches

2026-07-19 08:11:34 +08:00
parent af71468e63
commit 49ae75937e
4 changed files with 223 additions and 33 deletions
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -220,6 +220,164 @@
  }
 }

+/*
+ * Global monitor action workbenches.
+ * Batch vehicle input and the mobile handoff now share the same Semi UI
+ * identity, summary, scrolling and footer hierarchy as the rest of the app.
+ */
+.v2-monitor-batch-sidesheet .v2-workspace-config-content,
+.v2-monitor-qr-sidesheet .v2-workspace-config-content {
+  padding: 12px;
+}
+
+.v2-monitor-batch-sidesheet .v2-batch-search-dialog {
+  display: grid;
+  width: 100%;
+  align-content: start;
+  gap: 10px;
+  border: 1px solid #dce5ef;
+  border-radius: 12px;
+  background: #fff;
+  padding: 14px;
+  box-shadow: 0 7px 22px rgba(31, 53, 80, .05);
+}
+
+.v2-monitor-batch-sidesheet .v2-batch-search-dialog > label {
+  margin: 0;
+  color: #4d627a;
+  font-size: 11px;
+  font-weight: 680;
+}
+
+.v2-monitor-batch-sidesheet .v2-batch-search-dialog .semi-input-textarea-wrapper {
+  min-height: min(420px, 52dvh);
+  border-color: #d4dfeb;
+  border-radius: 10px;
+  background: #fbfcfe;
+}
+
+.v2-monitor-batch-sidesheet .v2-batch-search-dialog .semi-input-textarea-wrapper-focus {
+  border-color: #4386df;
+  background: #fff;
+  box-shadow: 0 0 0 3px rgba(45, 116, 210, .09);
+}
+
+.v2-monitor-batch-sidesheet .v2-batch-search-dialog .semi-input-textarea {
+  min-height: min(418px, 52dvh);
+  padding: 13px 14px;
+  font-size: 14px;
+  line-height: 1.75;
+}
+
+.v2-monitor-batch-sidesheet .v2-batch-search-summary {
+  display: flex;
+  min-height: 34px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0;
+  border-radius: 8px;
+  background: #f4f8fe;
+  padding: 7px 9px;
+  color: #66788e;
+  font-size: 9px;
+}
+
+.v2-monitor-batch-sidesheet .v2-batch-search-summary strong {
+  color: #1268f3;
+  font-size: 12px;
+}
+
+.v2-monitor-qr-sidesheet .v2-monitor-qr-content {
+  min-height: 100%;
+  justify-content: flex-start;
+  overflow: hidden;
+  border: 1px solid #dce5ef;
+  border-radius: 12px;
+  background:
+    radial-gradient(circle at 50% 0%, rgba(18, 104, 243, .07), transparent 38%),
+    #fff;
+  padding: 15px;
+  box-shadow: 0 7px 22px rgba(31, 53, 80, .05);
+}
+
+.v2-monitor-qr-sidesheet .v2-monitor-qr-content > p {
+  max-width: 310px;
+  margin: 0 0 12px;
+  color: #66788e;
+  font-size: 10px;
+  line-height: 1.6;
+}
+
+.v2-monitor-qr-sidesheet .v2-monitor-qr-content > img {
+  width: min(240px, 64vw);
+  height: min(240px, 64vw);
+  border: 8px solid #fff;
+  border-radius: 14px;
+  box-shadow: 0 9px 28px rgba(27, 50, 78, .09);
+}
+
+.v2-monitor-qr-sidesheet .v2-monitor-qr-content > code {
+  max-width: 100%;
+  margin-top: 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #f7f9fc;
+  padding: 9px 11px;
+  color: #5c6d82;
+}
+
+.v2-monitor-qr-sidesheet .v2-monitor-qr-content > .v2-spinner {
+  margin: 96px;
+}
+
+@media (max-width: 680px) {
+  .v2-monitor-batch-sidesheet .v2-workspace-config-content,
+  .v2-monitor-qr-sidesheet .v2-workspace-config-content {
+    padding: 8px;
+  }
+
+  .v2-monitor-batch-sidesheet .v2-batch-search-dialog {
+    gap: 8px;
+    padding: 10px;
+  }
+
+  .v2-monitor-batch-sidesheet .v2-batch-search-dialog .semi-input-textarea-wrapper,
+  .v2-monitor-batch-sidesheet .v2-batch-search-dialog .semi-input-textarea {
+    min-height: min(300px, 35dvh);
+  }
+
+  .v2-monitor-batch-sidesheet .v2-batch-search-dialog .semi-input-textarea {
+    padding: 10px 11px;
+    font-size: 16px;
+  }
+
+  .v2-monitor-qr-sidesheet .v2-workspace-config-summary > span:nth-child(2) strong {
+    font-size: 10px;
+  }
+
+  .v2-monitor-qr-sidesheet .v2-monitor-qr-content {
+    padding: 10px;
+  }
+
+  .v2-monitor-qr-sidesheet .v2-monitor-qr-content > p {
+    margin-bottom: 8px;
+    font-size: 9px;
+  }
+
+  .v2-monitor-qr-sidesheet .v2-monitor-qr-content > img {
+    width: min(210px, 56vw);
+    height: min(210px, 56vw);
+    border-width: 6px;
+  }
+
+  .v2-monitor-qr-sidesheet .v2-monitor-qr-content > code {
+    margin-top: 8px;
+    padding-block: 7px;
+    font-size: 8px;
+  }
+}
+
 /*
 * Global short-landscape entry and navigation.
 * Keep every authentication action in the first viewport, preserve practical