diff --git a/apps/frontend/src/views/admin/fulfillment/kuaishou-cloud/AdminKuaishouCloudFulfillment.css b/apps/frontend/src/views/admin/fulfillment/kuaishou-cloud/AdminKuaishouCloudFulfillment.css index 06450e94..77cbadc0 100644 --- a/apps/frontend/src/views/admin/fulfillment/kuaishou-cloud/AdminKuaishouCloudFulfillment.css +++ b/apps/frontend/src/views/admin/fulfillment/kuaishou-cloud/AdminKuaishouCloudFulfillment.css @@ -285,6 +285,150 @@ border: 1px solid var(--border-default); } +.rule-editor { + display: grid; + gap: var(--space-3); +} + +.rule-editor-main { + display: grid; + grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); + gap: var(--space-3); + align-items: stretch; +} + +.rule-panel { + display: grid; + align-content: start; + gap: var(--space-4); + min-width: 0; + padding: var(--space-4); + border: 1px solid var(--border-default); + border-radius: var(--radius-md); + background: var(--bg-surface); +} + +.rule-panel--strategy { + background: var(--bg-subtle); +} + +.rule-panel-head { + display: flex; + justify-content: space-between; + gap: var(--space-3); + align-items: center; + min-width: 0; +} + +.rule-panel-head > span { + color: var(--text-secondary); + font-size: var(--text-xs); + line-height: 1.5; + text-align: right; +} + +.rule-panel-title { + display: flex; + align-items: center; + gap: var(--space-2); + min-width: 0; + color: var(--text-primary); +} + +.rule-panel-title strong { + font-size: var(--text-base); + font-weight: 700; +} + +.rule-step { + display: inline-grid; + place-items: center; + width: 30px; + height: 24px; + border-radius: var(--radius-sm); + background: var(--bg-subtle); + color: var(--text-secondary); + font-size: var(--text-xs); + font-weight: 700; +} + +.rule-panel--strategy .rule-step { + background: var(--bg-surface); +} + +.mapping-grid--core { + gap: var(--space-3) var(--space-4); +} + +.strategy-grid { + display: grid; + grid-template-columns: minmax(150px, 0.24fr) minmax(150px, 0.24fr) minmax(0, 1fr); + gap: var(--space-4); + align-items: end; +} + +.strategy-checks { + display: flex; + flex-wrap: wrap; + gap: var(--space-2) var(--space-4); + min-height: 32px; + align-items: center; +} + +.advanced-fields { + border: 1px dashed var(--border-default); + border-radius: var(--radius-md); + background: var(--bg-surface); +} + +.advanced-fields summary { + display: flex; + justify-content: space-between; + gap: var(--space-3); + align-items: center; + padding: var(--space-3) var(--space-4); + color: var(--text-primary); + cursor: pointer; + list-style: none; +} + +.advanced-fields summary::-webkit-details-marker { + display: none; +} + +.advanced-fields summary span { + font-weight: 700; +} + +.advanced-fields summary small { + color: var(--text-secondary); + font-size: var(--text-xs); + line-height: 1.5; + text-align: right; +} + +.advanced-fields summary::after { + content: '展开'; + flex: 0 0 auto; + min-width: 40px; + color: var(--color-primary); + font-size: var(--text-xs); + font-weight: 700; + text-align: right; +} + +.advanced-fields[open] summary { + border-bottom: 1px dashed var(--border-default); +} + +.advanced-fields[open] summary::after { + content: '收起'; +} + +.advanced-grid { + padding: var(--space-4); +} + .field-wide { grid-column: 1 / -1; } @@ -320,6 +464,7 @@ .binding-actions { display: flex; flex-wrap: wrap; + justify-content: flex-end; gap: var(--space-3); align-items: center; padding-top: var(--space-3); @@ -353,12 +498,26 @@ .overview-stats, .lookup-toolbar, + .rule-editor-main, + .strategy-grid, .mapping-editor, .mapping-grid, .mapping-extra { grid-template-columns: 1fr; } + .rule-panel-head, + .advanced-fields summary { + display: grid; + grid-template-columns: 1fr; + align-items: start; + } + + .rule-panel-head > span, + .advanced-fields summary small { + text-align: left; + } + .mapping-arrow { display: none; } diff --git a/apps/frontend/src/views/admin/fulfillment/kuaishou-cloud/components/AdminKuaishouCloudRuleCard.vue b/apps/frontend/src/views/admin/fulfillment/kuaishou-cloud/components/AdminKuaishouCloudRuleCard.vue index d5dc1caf..b16057e6 100644 --- a/apps/frontend/src/views/admin/fulfillment/kuaishou-cloud/components/AdminKuaishouCloudRuleCard.vue +++ b/apps/frontend/src/views/admin/fulfillment/kuaishou-cloud/components/AdminKuaishouCloudRuleCard.vue @@ -77,16 +77,164 @@ const emit = defineEmits<{ }} -