fix: polish channel groups and add production deployment
This commit is contained in:
hectorzhao
+158
-82
@@ -6828,105 +6828,141 @@ h3 {
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.channel-group-grid {
|
||||
.channel-group-config-list {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.channel-group-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(210px, 1fr) auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.channel-group-card header {
|
||||
align-items: center;
|
||||
background: #e8f2ff;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.channel-group-card header > div,
|
||||
.channel-group-card header > span {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-group-card header strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.channel-group-card header > span {
|
||||
color: var(--color-text-muted);
|
||||
flex: 0 0 auto;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.channel-group-card__body {
|
||||
color: var(--color-text-muted);
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.channel-group-card__body p {
|
||||
line-height: 1.55;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.channel-group-card__body small {
|
||||
color: var(--color-selected);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.channel-group-card footer {
|
||||
align-items: center;
|
||||
background: var(--color-surface-subtle);
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
justify-content: flex-end;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
}
|
||||
|
||||
.channel-group-card footer button {
|
||||
.channel-group-config-item {
|
||||
align-items: center;
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: minmax(180px, 1.15fr) minmax(210px, 0.9fr) minmax(200px, 0.95fr) minmax(220px, 1.2fr) minmax(82px, auto);
|
||||
min-width: 0;
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.channel-group-config-item__identity {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-group-config-item__icon {
|
||||
align-items: center;
|
||||
background: #eef5ff;
|
||||
border: 1px solid #cfe2ff;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-selected);
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
height: 38px;
|
||||
justify-content: center;
|
||||
width: 38px;
|
||||
}
|
||||
|
||||
.channel-group-config-item__identity div {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-group-config-item__identity strong {
|
||||
color: var(--color-text-strong);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.channel-group-config-item__identity span:last-child,
|
||||
.channel-group-config-item__metrics span,
|
||||
.channel-group-config-item__policy span,
|
||||
.channel-group-config-item__channels span {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.channel-group-config-item__metrics {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-group-config-item__metrics div {
|
||||
border-left: 1px solid var(--color-border);
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
padding-left: var(--space-3);
|
||||
}
|
||||
|
||||
.channel-group-config-item__metrics strong {
|
||||
color: var(--color-text-strong);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.channel-group-config-item__policy {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-group-config-item__policy span {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
gap: var(--space-1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.channel-group-config-item__channels {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-group-config-item__channels span {
|
||||
background: var(--color-surface-subtle);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
max-width: 160px;
|
||||
overflow: hidden;
|
||||
padding: var(--space-1) var(--space-2);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.channel-group-config-item__actions {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
justify-content: flex-end;
|
||||
justify-self: end;
|
||||
min-width: 82px;
|
||||
}
|
||||
|
||||
.channel-group-config-item__actions button {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-selected);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
gap: var(--space-1);
|
||||
min-height: 32px;
|
||||
padding: 0 var(--space-3);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.channel-group-card footer button.is-danger {
|
||||
.channel-group-config-item__actions button.is-danger {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.channel-group-card footer button:hover {
|
||||
background: var(--color-accent-soft);
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
.channel-group-form-page {
|
||||
min-width: 1040px;
|
||||
}
|
||||
@@ -6950,6 +6986,7 @@ h3 {
|
||||
}
|
||||
|
||||
.channel-group-base-form > .ui-field,
|
||||
.channel-group-retry-limit,
|
||||
.channel-group-radio-row,
|
||||
.channel-group-switch-row {
|
||||
grid-column: 2;
|
||||
@@ -7010,11 +7047,14 @@ h3 {
|
||||
}
|
||||
|
||||
.channel-group-row-actions button {
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--color-selected);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
gap: var(--space-1);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -7022,6 +7062,23 @@ h3 {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.channel-group-retry-limit {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
grid-template-columns: 150px 150px minmax(220px, 1fr);
|
||||
}
|
||||
|
||||
.channel-group-retry-limit > span {
|
||||
color: var(--color-text-strong);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.channel-group-retry-limit small {
|
||||
align-self: center;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.channel-route-card-grid {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
@@ -7104,6 +7161,25 @@ h3 {
|
||||
.channel-route-modal {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.channel-route-modal__channel-select {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.channel-route-modal .ui-select__dropdown {
|
||||
max-height: min(360px, calc(100vh - 360px));
|
||||
}
|
||||
|
||||
.channel-route-modal .ui-select__dropdown button {
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
line-height: 1.45;
|
||||
min-height: 42px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.channel-route-modal__note {
|
||||
|
||||
Reference in New Issue
Block a user