unify Semi UI filter workspaces and pagination

2026-07-18 01:29:30 +08:00
parent 5c0a61f7bd
commit 6d63783630
11 changed files with 318 additions and 57 deletions
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -3674,3 +3674,152 @@
    min-height: 44px;
  }
 }
+
+/* Semi UI data workspace controls: one filter anatomy and one compact pager. */
+.v2-workspace-filter-panel.semi-card {
+  overflow: visible;
+  border-color: #dce5ef;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 6px 20px rgba(31, 47, 70, .05);
+}
+
+.v2-workspace-filter-panel > .semi-card-body {
+  overflow: visible;
+}
+
+.v2-workspace-filter-heading {
+  display: flex;
+  min-height: 44px;
+  align-items: center;
+  gap: 9px;
+  border-bottom: 1px solid #e6ebf2;
+  border-radius: 12px 12px 0 0;
+  background: linear-gradient(100deg, #f8fbff 0%, #f5f8fc 58%, #fbfcfe 100%);
+  padding: 7px 12px;
+}
+
+.v2-workspace-filter-icon {
+  display: inline-grid;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 8px;
+  background: #eaf2ff;
+  color: var(--v2-blue);
+  font-size: 14px;
+}
+
+.v2-workspace-filter-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.v2-workspace-filter-copy > .semi-typography:first-child {
+  flex: 0 0 auto;
+  color: #30445d;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.v2-workspace-filter-copy > .semi-typography:last-child {
+  min-width: 0;
+  overflow: hidden;
+  color: #7d8b9d;
+  font-size: 10px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.v2-workspace-filter-heading > .semi-tag {
+  min-height: 23px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  padding-inline: 8px;
+  font-size: 9px;
+  font-weight: 650;
+}
+
+.v2-table-pagination.semi-page {
+  min-width: 0;
+  color: #607086;
+}
+
+.v2-table-pagination.semi-page .semi-page-item {
+  width: 30px;
+  min-width: 30px;
+  height: 30px;
+  margin: 0 1px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  line-height: 30px;
+}
+
+.v2-table-pagination.semi-page .semi-page-item-small {
+  width: auto;
+  min-width: 56px;
+  border-color: #dce5f0;
+  background: #f7faff;
+  color: #52647a;
+  font-size: 10px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
+}
+
+.v2-table-pagination.semi-page .semi-page-prev:not(.semi-page-item-disabled):hover,
+.v2-table-pagination.semi-page .semi-page-next:not(.semi-page-item-disabled):hover {
+  border-color: #b9cee9;
+  background: #f2f7ff;
+  color: var(--v2-blue);
+}
+
+.v2-table-pagination.semi-page .semi-page-item-disabled {
+  background: #f8fafc;
+  color: #b1bbc8;
+}
+
+@media (max-width: 900px) {
+  .v2-workspace-filter-heading {
+    min-height: 42px;
+    padding-inline: 10px;
+  }
+
+  .v2-workspace-filter-copy > .semi-typography:last-child {
+    display: none;
+  }
+}
+
+@media (max-width: 680px) {
+  .v2-workspace-filter-heading {
+    display: none;
+  }
+
+  .v2-workspace-filter-panel.semi-card {
+    border-radius: 11px;
+  }
+
+  .v2-table-pagination-controls {
+    justify-content: space-between;
+  }
+
+  .v2-table-pagination.semi-page {
+    flex: 1 1 auto;
+    justify-content: flex-start;
+  }
+
+  .v2-table-pagination.semi-page .semi-page-item {
+    width: 36px;
+    min-width: 36px;
+    height: 36px;
+    line-height: 36px;
+  }
+
+  .v2-table-pagination.semi-page .semi-page-item-small {
+    width: auto;
+    min-width: 62px;
+  }
+}