refine Semi UI alert disposition

2026-07-18 17:27:08 +08:00
parent 29b9ce9594
commit 82d78926c6
5 changed files with 228 additions and 11 deletions
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -14185,6 +14185,192 @@
  }
 }

+/*
+ * Semi UI alert disposition: organize each event around the object, current
+ * state and the decision evidence before showing audit history and actions.
+ */
+.v2-alert-inspector-heading > .v2-workspace-panel-copy {
+  gap: 2px;
+}
+
+.v2-alert-inspector-heading > .v2-workspace-panel-copy > .semi-typography:last-child {
+  overflow: hidden;
+  max-width: 250px;
+  margin: 0;
+  color: #7c8b9d;
+  font-size: 10px;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v2-alert-focus-identity {
+  min-height: 80px;
+  background: linear-gradient(120deg, #f5f9ff 0%, #fff 64%, #fffaf7 100%);
+}
+
+.v2-alert-focus-current {
+  display: grid;
+  min-width: 84px;
+  flex: 0 0 auto;
+  justify-items: end;
+  gap: 5px;
+}
+
+.v2-alert-focus-current > .semi-tag {
+  min-width: 58px;
+  min-height: 24px;
+  justify-content: center;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.v2-alert-focus-facts {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  background: #fbfcfe;
+}
+
+.v2-alert-focus-facts > span {
+  min-height: 58px;
+  justify-content: center;
+  padding: 8px 11px;
+}
+
+.v2-alert-focus-facts > span + span {
+  border-left: 1px solid #e6ebf2;
+}
+
+.v2-alert-focus-facts .semi-tag {
+  width: max-content;
+  max-width: 100%;
+  min-height: 22px;
+  border-radius: 999px;
+  font-size: 9px;
+}
+
+.v2-alert-focus-card .v2-alert-evidence {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 7px;
+  padding: 10px;
+}
+
+.v2-alert-focus-card .v2-alert-evidence > .v2-alert-evidence-value.semi-card {
+  overflow: hidden;
+  border-color: #dde6f0;
+  border-radius: 9px;
+  box-shadow: none;
+}
+
+.v2-alert-focus-card .v2-alert-evidence > .v2-alert-evidence-value > .semi-card-body {
+  min-height: 76px;
+  padding: 9px 7px;
+}
+
+.v2-alert-focus-card .v2-alert-evidence > .v2-alert-evidence-value.is-trigger {
+  border-color: #efc7c2;
+  background: #fff8f7;
+}
+
+.v2-alert-focus-card .v2-alert-evidence > .v2-alert-evidence-value.is-delta {
+  border-color: #c8dbf7;
+  background: #f4f8ff;
+}
+
+.v2-alert-focus-card .v2-alert-evidence > .v2-alert-evidence-value.is-delta strong {
+  color: #1268f3;
+}
+
+.v2-alert-focus-rule {
+  display: flex;
+  min-height: 40px;
+  align-items: center;
+  gap: 8px;
+  border-top: 1px solid #e7edf4;
+  background: #fbfcfe;
+  padding: 7px 10px;
+}
+
+.v2-alert-focus-rule > .semi-tag {
+  min-width: 54px;
+  flex: 0 0 auto;
+  justify-content: center;
+  border-radius: 999px;
+  font-size: 9px;
+  font-weight: 700;
+}
+
+.v2-alert-focus-rule > span {
+  overflow: hidden;
+  color: #50647c;
+  font-size: 10px;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v2-alert-detail-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.v2-alert-detail-title > .semi-tag {
+  min-height: 22px;
+  justify-content: center;
+  border-radius: 999px;
+  font-size: 9px;
+  font-weight: 700;
+}
+
+@media (max-width: 680px) {
+  .v2-alert-inspector.is-sheet .v2-alert-focus-identity {
+    min-height: 72px;
+    padding: 10px 12px;
+  }
+
+  .v2-alert-focus-identity strong {
+    font-size: 17px;
+  }
+
+  .v2-alert-focus-facts > span {
+    min-height: 54px;
+    padding: 7px 9px;
+  }
+
+  .v2-alert-focus-facts small {
+    font-size: 9px;
+  }
+
+  .v2-alert-focus-facts strong {
+    font-size: 11px;
+  }
+
+  .v2-alert-focus-card .v2-alert-evidence {
+    gap: 5px;
+    padding: 8px;
+  }
+
+  .v2-alert-focus-card .v2-alert-evidence > .v2-alert-evidence-value > .semi-card-body {
+    min-height: 72px;
+    padding: 7px 5px;
+  }
+
+  .v2-alert-focus-card .v2-alert-evidence small {
+    font-size: 9px;
+  }
+
+  .v2-alert-focus-card .v2-alert-evidence strong {
+    font-size: 12px;
+    line-height: 1.35;
+  }
+
+  .v2-alert-focus-rule {
+    min-height: 38px;
+    padding: 6px 8px;
+  }
+}
+
 /*
 * Semi UI account identity and menu permissions: one shared hierarchy from
 * account context to editable groups and the resulting customer workspace.