refactor: unify semi operational time ranges

2026-07-19 15:11:15 +08:00
parent 476069adc6
commit fb105a67c8
8 changed files with 407 additions and 66 deletions
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -23880,3 +23880,164 @@
    max-width: 300px;
  }
 }
+
+/*
+ * Shared Semi UI date-time range.
+ * History evidence, trajectory replay and alert handling now use one control
+ * family instead of browser-native date inputs with platform-specific chrome.
+ */
+.v2-workspace-date-time-range {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-content: end;
+  gap: 5px 8px;
+  margin: 0;
+  border: 0;
+  padding: 0;
+}
+
+.v2-workspace-date-time-range > legend {
+  grid-column: 1;
+  align-self: center;
+  margin: 0;
+  padding: 0;
+  color: #66778e;
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 20px;
+}
+
+.v2-workspace-date-time-picker.semi-datepicker {
+  width: 100%;
+  min-width: 0;
+  min-height: 40px;
+  grid-column: 1 / -1;
+}
+
+.v2-workspace-date-time-picker .semi-datepicker-input {
+  width: 100%;
+}
+
+.v2-workspace-date-time-picker > .semi-datepicker-input {
+  grid-column: 1 / -1;
+}
+
+.v2-workspace-date-time-picker .semi-input-wrapper {
+  min-width: 0;
+  min-height: 40px;
+  border-color: #d8e2ed;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.v2-workspace-date-time-picker .semi-input-wrapper:hover {
+  border-color: #b9c9dc;
+  background: #fff;
+}
+
+.v2-workspace-date-time-picker .semi-input-wrapper-focus {
+  border-color: #75a5ed;
+  background: #fff;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
+}
+
+.v2-workspace-date-time-picker .semi-input {
+  min-width: 0;
+  color: #2d4058;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+.v2-workspace-date-time-presets.semi-button-group {
+  display: flex;
+  height: 24px;
+  min-width: 0;
+  min-height: 24px;
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
+  gap: 3px;
+}
+
+.v2-workspace-date-time-presets > .semi-button {
+  height: 24px;
+  min-width: 0;
+  min-height: 24px;
+  flex: 0 0 auto;
+  border-radius: 6px;
+  padding-inline: 7px;
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.v2-workspace-date-time-presets > .semi-button.semi-button-solid {
+  box-shadow: none;
+}
+
+.v2-track-query > .v2-track-date-time-range {
+  margin: 8px 0;
+}
+
+.v2-track-date-time-range > legend {
+  font-size: 10px;
+}
+
+.v2-track-date-time-picker .semi-input-wrapper {
+  min-height: 38px;
+  background: #fbfcfe;
+}
+
+.v2-track-date-time-picker .semi-input {
+  padding-inline: 3px;
+  font-size: 11px;
+}
+
+.v2-track-date-time-presets > .semi-button {
+  padding-inline: 6px;
+  font-size: 9px;
+}
+
+.v2-alert-advanced-filter > .v2-alert-date-time-range,
+.v2-alert-mobile-filter-grid > .v2-alert-date-time-range {
+  width: 100%;
+}
+
+.v2-alert-advanced-filter > .v2-alert-date-time-range {
+  margin-top: 2px;
+}
+
+.v2-alert-mobile-filter-grid > .v2-alert-date-time-range {
+  grid-column: 1 / -1;
+}
+
+@media (max-width: 680px) {
+  .v2-workspace-date-time-picker.semi-datepicker,
+  .v2-workspace-date-time-picker .semi-datepicker-input,
+  .v2-workspace-date-time-picker .semi-input-wrapper {
+    width: 100%;
+    min-height: 44px;
+  }
+
+  .v2-workspace-date-time-presets.semi-button-group {
+    max-width: 100%;
+    overflow-x: auto;
+    justify-self: end;
+    scrollbar-width: none;
+  }
+
+  .v2-workspace-date-time-presets.semi-button-group::-webkit-scrollbar {
+    display: none;
+  }
+
+  .v2-workspace-date-time-presets > .semi-button {
+    height: 26px;
+    min-height: 26px;
+    padding-inline: 8px;
+  }
+
+  .v2-alert-mobile-filter-grid .v2-alert-date-time-picker .semi-input {
+    padding-inline: 3px;
+    font-size: 12px;
+  }
+}