refactor(admin): 模型定价 - 重排规格价格编辑并精简视频匹配条件
This commit is contained in:
ddCat committed
1 parent
6f2f0eb490
commit
0d4d6870b5
9 files changed
+538
-216
No files matched your search
+358
-62
@@ -9263,11 +9263,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
.admin-price-tier-list-shell {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.admin-price-tier-list {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.admin-price-tier-list-footer {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.admin-price-tier-card {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 8%, var(--admin-card-border));
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--foreground) 2%, var(--admin-layer-1));
|
||||
background: var(--admin-layer-1);
|
||||
box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 4%, transparent);
|
||||
}
|
||||
|
||||
.admin-price-tier-card-header {
|
||||
@@ -9275,86 +9295,274 @@
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 9%, transparent);
|
||||
gap: 10px;
|
||||
background: color-mix(in srgb, var(--foreground) 1.5%, var(--admin-layer-1));
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.admin-price-tier-card-heading,
|
||||
.admin-price-tier-card-actions,
|
||||
.admin-price-tier-cost-header,
|
||||
.admin-price-tier-cost-title {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-price-tier-card-heading {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.admin-price-tier-card-index {
|
||||
display: grid;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
flex: 0 0 auto;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--workspace-accent) 10%, var(--admin-layer-2));
|
||||
color: color-mix(in srgb, var(--workspace-accent) 76%, var(--admin-text-primary));
|
||||
font-size: 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.admin-price-tier-card-heading-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-price-tier-card-title {
|
||||
color: var(--admin-text-primary);
|
||||
font-size: 13px;
|
||||
font-weight: 650;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.admin-price-tier-card-summary {
|
||||
overflow: hidden;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 10px;
|
||||
line-height: 1.35;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-price-tier-card-actions {
|
||||
flex: 0 0 auto;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.admin-price-tier-card-actions > .ant-btn {
|
||||
padding-inline: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.admin-price-tier-card-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
|
||||
gap: 12px 16px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.admin-price-tier-block {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-price-tier-block-title {
|
||||
margin-bottom: 10px;
|
||||
color: color-mix(in srgb, var(--foreground) 48%, transparent);
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.admin-price-tier-block-title > span {
|
||||
margin-right: 5px;
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
.admin-price-tier-match-grid {
|
||||
grid-column: 1 / -1;
|
||||
.admin-price-tier-mode-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: color-mix(in srgb, var(--foreground) 0.8%, transparent);
|
||||
padding: 9px 12px;
|
||||
}
|
||||
|
||||
.admin-price-tier-upstream {
|
||||
grid-column: span 2;
|
||||
.admin-price-tier-mode-row .admin-price-tier-panel-heading {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.admin-price-tier-billing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
gap: 12px;
|
||||
.admin-price-tier-mode-row .admin-price-tier-panel-heading > div {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px 8px;
|
||||
}
|
||||
|
||||
.admin-price-tier-token-grid {
|
||||
grid-column: 1 / -1;
|
||||
.admin-price-tier-mode-row .admin-price-tier-panel-heading p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.admin-price-tier-token-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
.admin-price-tier-mode-control {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-price-tier-billing-mode .ant-segmented {
|
||||
border: 1px solid var(--admin-card-border);
|
||||
.admin-price-tier-mode-control .ant-segmented {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
background: var(--admin-layer-2);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.admin-price-tier-billing-mode .ant-segmented-item {
|
||||
min-height: 28px;
|
||||
border-radius: 5px;
|
||||
.admin-price-tier-workspace {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
align-items: start;
|
||||
gap: 12px;
|
||||
padding: 10px 12px 12px;
|
||||
}
|
||||
|
||||
.admin-price-tier-billing-mode .ant-segmented-item-label {
|
||||
min-height: 28px;
|
||||
padding-inline: 12px;
|
||||
line-height: 28px;
|
||||
.admin-price-tier-workspace.is-advanced {
|
||||
grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.6fr);
|
||||
}
|
||||
|
||||
.admin-price-tier-billing-mode .ant-segmented-item-selected {
|
||||
background: var(--admin-layer-1);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 14%, transparent);
|
||||
.admin-price-tier-workspace.is-default {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.admin-price-tier-unit-price .ant-input-number {
|
||||
.admin-price-tier-panel {
|
||||
min-width: 0;
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--foreground) 1.8%, var(--admin-layer-2));
|
||||
padding: 11px 12px 12px;
|
||||
}
|
||||
|
||||
.admin-price-tier-panel-heading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.admin-price-tier-panel-heading > div,
|
||||
.admin-price-tier-cost-heading {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px 9px;
|
||||
}
|
||||
|
||||
.admin-price-tier-panel-heading h3,
|
||||
.admin-price-tier-cost-title {
|
||||
margin: 0;
|
||||
color: var(--admin-text-primary);
|
||||
font-size: 12px;
|
||||
font-weight: 650;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.admin-price-tier-panel-heading p,
|
||||
.admin-price-tier-cost-heading p {
|
||||
margin: 0;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.admin-price-tier-match-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
align-items: start;
|
||||
gap: 8px 10px;
|
||||
}
|
||||
|
||||
.admin-price-tier-upstream {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.admin-price-tier-billing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(190px, 0.85fr);
|
||||
align-items: start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.admin-price-tier-token-grid {
|
||||
display: grid;
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.admin-price-tier-cost-panel {
|
||||
min-width: 0;
|
||||
margin-top: 10px;
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--foreground) 2.2%, transparent);
|
||||
padding: 9px 10px 10px;
|
||||
}
|
||||
|
||||
.admin-price-tier-cost-header {
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.admin-price-tier-cost-heading {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-price-tier-cost-title {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.admin-price-tier-cost-badge {
|
||||
border: 1px solid color-mix(in srgb, var(--workspace-accent) 24%, transparent);
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--workspace-accent) 8%, transparent);
|
||||
padding: 2px 7px;
|
||||
color: color-mix(in srgb, var(--workspace-accent) 72%, var(--admin-text-primary));
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.admin-price-tier-cost-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
align-items: start;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.admin-price-tier-cost-token-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.admin-price-tier-cost-switch {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.admin-price-tier-alert {
|
||||
margin: 0 16px 16px;
|
||||
}
|
||||
|
||||
.admin-price-tier-helper {
|
||||
display: flex;
|
||||
max-width: none;
|
||||
align-items: baseline;
|
||||
flex-wrap: wrap;
|
||||
gap: 2px 8px;
|
||||
margin-top: 8px;
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--workspace-accent) 3.5%, transparent);
|
||||
padding: 6px 8px;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.admin-price-tier-helper strong {
|
||||
color: var(--admin-text-secondary);
|
||||
flex: 0 0 auto;
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.admin-price-tier-helper span {
|
||||
min-width: 240px;
|
||||
flex: 1 1 520px;
|
||||
}
|
||||
|
||||
.admin-price-tier-unit-price .ant-input-number,
|
||||
.admin-price-tier-cost-grid .ant-input-number {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
@@ -9366,20 +9574,50 @@
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
gap: 7px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--foreground) 3%, transparent);
|
||||
padding: 3px 6px 3px 8px;
|
||||
}
|
||||
|
||||
.admin-price-tier-toggle span {
|
||||
overflow-wrap: anywhere;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.admin-model-editor-add-tier.ant-btn {
|
||||
min-height: 38px;
|
||||
border-color: color-mix(in srgb, var(--workspace-accent) 28%, var(--admin-card-border));
|
||||
background: color-mix(in srgb, var(--workspace-accent) 4%, transparent);
|
||||
}
|
||||
|
||||
.admin-price-tier-billing-mode .ant-segmented {
|
||||
border: 0;
|
||||
background: var(--admin-layer-2);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.admin-price-tier-mode-control .ant-segmented-item,
|
||||
.admin-price-tier-billing-mode .ant-segmented-item {
|
||||
min-height: 28px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.admin-price-tier-mode-control .ant-segmented-item-label,
|
||||
.admin-price-tier-billing-mode .ant-segmented-item-label {
|
||||
min-height: 28px;
|
||||
padding-inline: 12px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.admin-price-tier-mode-control .ant-segmented-item-selected,
|
||||
.admin-price-tier-billing-mode .ant-segmented-item-selected {
|
||||
background: var(--admin-layer-1);
|
||||
box-shadow: 0 1px 2px color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
}
|
||||
|
||||
.admin-model-editor-footer-actions {
|
||||
@@ -9441,14 +9679,19 @@
|
||||
:root:not(.dark) .admin-model-editor-drawer .admin-capability-reference-card,
|
||||
:root:not(.dark) .admin-model-editor-drawer .admin-capability-protocol-card,
|
||||
:root:not(.dark) .admin-price-tier-toggle,
|
||||
:root:not(.dark) .admin-price-tier-mode-control .ant-segmented,
|
||||
:root:not(.dark) .admin-price-tier-billing-mode .ant-segmented {
|
||||
border-color: rgba(17, 17, 17, 0.18);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
:root:not(.dark) .admin-price-tier-card {
|
||||
border-color: rgba(17, 17, 17, 0.18);
|
||||
background: #f7f7f7;
|
||||
border-color: rgba(17, 17, 17, 0.1);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
:root:not(.dark) .admin-price-tier-panel {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
:root:not(.dark) .admin-model-editor-drawer .admin-capability-reference-card,
|
||||
@@ -9492,10 +9735,12 @@
|
||||
box-shadow: 0 6px 20px rgb(17 17 17 / 0.08);
|
||||
}
|
||||
|
||||
:root:not(.dark) .admin-price-tier-mode-control .ant-segmented-item-selected,
|
||||
:root:not(.dark) .admin-price-tier-billing-mode .ant-segmented-item-selected {
|
||||
background: #ececec;
|
||||
box-shadow: inset 0 0 0 1px rgb(17 17 17 / 0.12);
|
||||
box-shadow: 0 1px 2px rgb(17 17 17 / 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.admin-model-editor-modal .ant-modal-container {
|
||||
height: calc(100dvh - 24px);
|
||||
@@ -9513,6 +9758,23 @@
|
||||
.admin-model-editor-modal .admin-capability-protocol-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.admin-price-tier-card-header {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.admin-price-tier-card-actions {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.admin-price-tier-mode-row {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 7px;
|
||||
padding: 9px 10px;
|
||||
}
|
||||
.admin-price-tier-workspace {
|
||||
padding: 10px;
|
||||
}
|
||||
.admin-price-tier-upstream {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
@@ -9520,14 +9782,15 @@
|
||||
.admin-model-protocol-grid,
|
||||
.admin-price-tier-billing-grid,
|
||||
.admin-price-tier-match-grid,
|
||||
.admin-price-tier-token-grid {
|
||||
.admin-price-tier-token-grid,
|
||||
.admin-price-tier-cost-token-grid {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 899px) {
|
||||
.admin-model-editor-section,
|
||||
.admin-price-tier-card-body {
|
||||
.admin-price-tier-workspace.is-advanced {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
@@ -10840,7 +11103,6 @@ html[data-magicui-theme-vt="active"] .admin-shell * {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
.admin-banner-icon-picker-option.is-active {
|
||||
border-color: color-mix(in srgb, var(--foreground) 22%, transparent);
|
||||
background: var(--control-selected-bg);
|
||||
@@ -10943,3 +11205,37 @@ html[data-magicui-theme-vt="active"] .admin-shell * {
|
||||
.admin-banner-type-card[data-banner-type="warning"] .admin-banner-type-card-preview {
|
||||
background: var(--notice-banner-surface-warning);
|
||||
}
|
||||
|
||||
/* 模型定价编辑器：弹窗内只保留一个滚动区域。 */
|
||||
.admin-model-editor-modal .ant-modal-body {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-model-editor-modal .admin-model-editor-form {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-model-editor-modal .admin-model-editor-form > .ant-tabs {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-model-editor-modal .admin-model-editor-form > .ant-tabs > .ant-tabs-body-holder {
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
|
||||
.admin-model-editor-modal .admin-model-editor-form > .ant-tabs > .ant-tabs-body-holder > .ant-tabs-content,
|
||||
.admin-model-editor-modal .admin-model-editor-form > .ant-tabs > .ant-tabs-body-holder > .ant-tabs-content > .ant-tabs-tabpane {
|
||||
min-height: 100%;
|
||||
}
|
||||
Reference in new issue
Block a user