refactor(ui): polish semi mileage workspace

vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.tsx

@@ -199,7 +199,7 @@ function SourceStrategy({ value, onChange }: { value: MileageSourceOption[]; onC
       title={`当前优先：${primarySource?.label ?? '未配置'}`}
       onClick={() => setOpen((current) => !current)}
     >
-      <span>数据源策略</span><em>{primarySource?.protocol ?? '未配置'} 优先</em><b>{enabled.length}/3</b>
+      <span>数据源</span><em>{primarySource?.protocol ?? '未配置'} 优先</em><b>{enabled.length}/3</b>
     </Button>
     <WorkspaceSideSheet
       className="v2-mileage-source-sidesheet"

vehicle-data-platform/apps/web/src/v2/styles/workspace.css

@@ -23942,6 +23942,195 @@
   }
 }
 
+/*
+ * Mileage matrix polish.
+ * The filter row keeps complete dates visible, the summary reads as one
+ * restrained Semi metric rail and the matrix remains the dominant workspace
+ * on both desktop and mobile.
+ */
+@media (min-width: 1101px) {
+  .v2-mileage-query-panel .v2-mileage-filter {
+    grid-template-columns:
+      minmax(250px, 1.1fr)
+      minmax(270px, .96fr)
+      auto
+      minmax(208px, .78fr)
+      minmax(326px, 1.18fr);
+  }
+
+  .v2-mileage-date-range .semi-datepicker-input {
+    min-width: 270px;
+  }
+}
+
+@media (min-width: 681px) {
+  .v2-mileage-page {
+    gap: 10px;
+    padding: 14px 18px 16px;
+    background: #f4f7fa;
+  }
+
+  .v2-mileage-discovery-shell,
+  .v2-mileage-results.semi-card {
+    border-color: #dce5ef;
+    border-radius: 14px;
+    box-shadow: 0 8px 26px rgba(31, 52, 78, .055);
+  }
+
+  .v2-mileage-discovery-shell > .v2-mileage-command-bar {
+    border-radius: 14px 14px 0 0;
+  }
+
+  .v2-mileage-command-bar .v2-workspace-command-copy > .semi-typography:first-child {
+    color: #263a51;
+    font-size: 15px;
+    letter-spacing: -.01em;
+  }
+
+  .v2-mileage-query-panel .v2-mileage-filter {
+    min-height: 66px;
+    padding: 9px 12px 10px;
+  }
+
+  .v2-mileage-summary .v2-workspace-metric-list > span {
+    min-height: 58px;
+    padding-inline: 13px;
+  }
+
+  .v2-mileage-summary .v2-workspace-metric-list > span.is-primary {
+    background: #f4f8ff;
+    box-shadow: inset 0 2px #6d9ee9;
+  }
+
+  .v2-mileage-summary .v2-workspace-metric-list > span.is-primary.is-success {
+    background: #f4faf7;
+    box-shadow: inset 0 2px #63b88f;
+  }
+
+  .v2-mileage-summary .v2-workspace-metric-list > span > strong {
+    font-size: clamp(18px, 1.5vw, 23px);
+    font-weight: 750;
+    letter-spacing: -.02em;
+  }
+
+  .v2-mileage-results > .semi-card-body > .v2-workspace-panel-header {
+    min-height: 50px;
+    padding-inline: 15px 12px;
+  }
+
+  .v2-mileage-matrix-guide {
+    min-height: 34px;
+    padding-inline: 15px;
+  }
+
+  .v2-mileage-table .semi-table-thead > .semi-table-row > .semi-table-row-head {
+    height: 44px;
+    background: #f5f8fb;
+    color: #52667d;
+    font-weight: 680;
+  }
+
+  .v2-mileage-table .semi-table-tbody > .semi-table-row:nth-child(even) > .semi-table-row-cell:not(.is-total) {
+    background-color: #fbfcfe;
+  }
+
+  .v2-mileage-table .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
+    background-color: #f2f7fd;
+  }
+
+  .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-total {
+    background-color: #f3f7fc;
+  }
+
+  .v2-mileage-table .semi-table-row-cell.is-period {
+    color: #0d5fc7;
+    font-size: 14px;
+  }
+}
+
+@media (max-width: 700px) {
+  .v2-mileage-page {
+    gap: 7px;
+    background: #f1f5f9;
+    padding: 8px 8px calc(82px + env(safe-area-inset-bottom));
+  }
+
+  .v2-mileage-mobile-discovery > .v2-mobile-filter-toggle.semi-card,
+  .v2-mileage-summary.v2-workspace-metric-rail.is-queue.semi-card,
+  .v2-mileage-results.semi-card {
+    border-color: #d9e3ee;
+    border-radius: 12px;
+    box-shadow: 0 6px 20px rgba(31, 52, 78, .055);
+  }
+
+  .v2-mileage-summary .v2-workspace-metric-list > span {
+    min-height: 54px;
+    padding: 7px 10px;
+  }
+
+  .v2-mileage-summary .v2-workspace-metric-list > span.is-primary {
+    background: #f4f8ff;
+    box-shadow: inset 2px 0 #5d97eb;
+  }
+
+  .v2-mileage-summary .v2-workspace-metric-list > span.is-primary.is-success {
+    background: #f4faf7;
+    box-shadow: inset 2px 0 #55b384;
+  }
+
+  .v2-mileage-summary .v2-workspace-metric-list > span > strong {
+    font-size: 19px;
+    letter-spacing: -.02em;
+  }
+
+  .v2-mileage-matrix-guide {
+    min-height: 46px;
+    padding: 5px 7px;
+  }
+
+  .v2-mileage-matrix-guide > .v2-mileage-matrix-guide-mobile {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 2px 5px;
+  }
+
+  .v2-mileage-matrix-guide-mobile > .is-mobile-hint {
+    min-height: 18px;
+    grid-column: 1 / -1;
+    font-size: 8.5px;
+  }
+
+  .v2-mileage-matrix-guide-mobile > span {
+    gap: 3px;
+    font-size: 8px;
+  }
+
+  .v2-mileage-matrix-guide .semi-tag {
+    min-width: 28px;
+    height: 18px;
+    padding-inline: 4px;
+    font-size: 7px;
+  }
+
+  .v2-mileage-table-wrap {
+    overscroll-behavior: contain;
+    scroll-snap-type: x proximity;
+    touch-action: pan-x pan-y;
+  }
+
+  .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-date {
+    scroll-snap-align: start;
+  }
+
+  .v2-mileage-table :is(.semi-table-row-head,.semi-table-row-cell).is-total {
+    background-color: #f3f7fc;
+  }
+
+  .v2-mileage-table .semi-table-row-cell.is-period {
+    color: #0d5fc7;
+    font-weight: 780;
+  }
+}
+
 /*
  * The source diagnostic now follows the same Semi UI metric hierarchy as
  * monitor, history and mileage workspaces. The first two facts remain visible