迁移平台配置页面

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

@@ -569,6 +569,166 @@ select {
   background: rgba(248, 250, 252, 0.72);
 }
 
+.platform-tabs {
+  min-width: 0;
+}
+
+.platform-panel-stack {
+  display: grid;
+  gap: 16px;
+  min-width: 0;
+}
+
+.platform-active-summary .ant-card-body {
+  display: flex;
+  justify-content: space-between;
+  gap: 18px;
+  align-items: center;
+}
+
+.platform-active-summary h3 {
+  margin: 4px 0 0 !important;
+}
+
+.platform-active-summary p {
+  margin: 8px 0 0;
+  color: #6b7280;
+}
+
+.summary-kicker {
+  color: #1677ff;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.metric-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.metric-grid.four {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.metric-grid.five {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+.metric-card .ant-card-body,
+.metric-card {
+  min-width: 0;
+}
+
+.metric-card .ant-card-body {
+  display: grid;
+  gap: 5px;
+}
+
+.metric-card span,
+.metric-card small {
+  color: #6b7280;
+}
+
+.metric-card strong {
+  color: #111827;
+  font-size: 24px;
+  line-height: 1.1;
+}
+
+.platform-section-gap {
+  margin-top: 14px;
+}
+
+.platform-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  align-items: end;
+}
+
+.field-switch {
+  min-height: 54px;
+  padding: 10px 12px;
+  border: 1px solid #edf0f5;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.field-switch span {
+  color: #4b5563;
+  font-weight: 600;
+}
+
+.platform-inline-row,
+.platform-shop-row,
+.platform-rule-head,
+.platform-delivery-row {
+  display: grid;
+  gap: 10px;
+  align-items: center;
+  min-width: 0;
+}
+
+.platform-inline-row {
+  grid-template-columns: auto minmax(120px, 0.8fr) minmax(180px, 1.2fr) auto;
+}
+
+.platform-shop-row {
+  grid-template-columns: auto auto minmax(120px, 0.9fr) minmax(140px, 1fr) minmax(220px, 1.5fr) auto auto;
+}
+
+.platform-rule-head {
+  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.8fr);
+}
+
+.platform-delivery-row {
+  grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) 110px auto;
+}
+
+.platform-split-layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.platform-side-card {
+  position: sticky;
+  top: 82px;
+}
+
+.platform-select-card {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #edf0f5;
+  border-radius: 6px;
+  background: #ffffff;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  text-align: left;
+}
+
+.platform-select-card.active,
+.platform-source-card.active {
+  border-color: #1677ff;
+  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.08);
+}
+
+.platform-select-card span {
+  display: grid;
+  gap: 4px;
+}
+
+.platform-select-card small {
+  color: #6b7280;
+}
+
 @media (max-width: 900px) {
   .admin-sider {
     position: fixed !important;
@@ -589,6 +749,28 @@ select {
   .page-header {
     display: grid;
   }
+
+  .metric-grid.four,
+  .metric-grid.five,
+  .platform-form-grid,
+  .platform-split-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .platform-side-card {
+    position: static;
+  }
+
+  .platform-inline-row,
+  .platform-shop-row,
+  .platform-rule-head,
+  .platform-delivery-row {
+    grid-template-columns: 1fr;
+  }
+
+  .platform-active-summary .ant-card-body {
+    display: grid;
+  }
 }
 
 @media (max-width: 720px) {