迁移发货记录页面

apps/frontend-react/src/styles/main.css

@@ -729,6 +729,65 @@ select {
   color: #6b7280;
 }
 
+.total-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 32px;
+  padding: 0 12px;
+  border-radius: 6px;
+  background: #eef6ff;
+  color: #1677ff;
+  font-weight: 700;
+}
+
+.cloud-records-filter {
+  display: grid;
+  grid-template-columns: minmax(180px, 0.28fr) minmax(220px, 0.36fr) minmax(360px, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+}
+
+.table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.table-toolbar span {
+  color: #6b7280;
+  font-size: 13px;
+}
+
+.status-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.record-preview {
+  display: grid;
+  place-items: center;
+  min-height: 260px;
+  padding: 12px;
+  background: #f8fafc;
+  border: 1px solid #edf0f5;
+  border-radius: 6px;
+}
+
+.record-preview .ant-image,
+.record-preview img {
+  max-width: 100%;
+}
+
+.record-preview img {
+  height: auto;
+  border: 1px solid #edf0f5;
+  background: #ffffff;
+}
+
 @media (max-width: 900px) {
   .admin-sider {
     position: fixed !important;
@@ -771,6 +830,14 @@ select {
   .platform-active-summary .ant-card-body {
     display: grid;
   }
+
+  .cloud-records-filter {
+    grid-template-columns: 1fr;
+  }
+
+  .table-toolbar {
+    display: grid;
+  }
 }
 
 @media (max-width: 720px) {