feat(*): 创作与运维 - 新增图片尺寸预设和系统性能面板并优化图片组动画
This commit is contained in:
ddCat
@@ -10212,3 +10212,316 @@ html[data-magicui-theme-vt="active"] .admin-shell * {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 系统性能：高密度运维快照，仅作用于管理员性能页。 */
|
||||
.admin-system-performance {
|
||||
gap: 12px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.admin-performance-auto,
|
||||
.admin-performance-statusbar,
|
||||
.admin-performance-statusbar > div,
|
||||
.admin-performance-kpi-heading,
|
||||
.admin-performance-cache-note,
|
||||
.admin-performance-safety {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.admin-performance-auto {
|
||||
gap: 7px;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.admin-performance-alert {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 9px 11px;
|
||||
border: 1px solid color-mix(in srgb, var(--admin-status-error) 28%, var(--admin-divider));
|
||||
border-radius: 8px;
|
||||
background: color-mix(in srgb, var(--admin-status-error) 6%, var(--admin-layer-1));
|
||||
color: var(--admin-status-error);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.admin-performance-statusbar {
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 34px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--admin-divider);
|
||||
border-radius: 8px;
|
||||
background: var(--admin-layer-2);
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.admin-performance-statusbar > div {
|
||||
gap: 9px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-performance-kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--admin-card-border);
|
||||
border-radius: 10px;
|
||||
background: var(--admin-layer-1);
|
||||
box-shadow: var(--admin-card-shadow);
|
||||
}
|
||||
|
||||
.admin-performance-kpi {
|
||||
min-width: 0;
|
||||
padding: 12px 14px 11px;
|
||||
}
|
||||
|
||||
.admin-performance-kpi + .admin-performance-kpi {
|
||||
border-left: 1px solid var(--admin-divider);
|
||||
}
|
||||
|
||||
.admin-performance-kpi-heading {
|
||||
gap: 7px;
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
.admin-performance-kpi-heading > span {
|
||||
display: grid;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
place-items: center;
|
||||
border-radius: 6px;
|
||||
background: var(--admin-layer-2);
|
||||
color: var(--admin-chart-primary);
|
||||
}
|
||||
|
||||
.admin-performance-kpi p {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-performance-kpi-heading p {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-performance-kpi > strong {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: var(--admin-text-primary);
|
||||
font-size: 20px;
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.admin-performance-kpi > p {
|
||||
margin-top: 3px;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.admin-performance-kpi .ant-progress {
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.admin-performance-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
|
||||
align-items: start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-performance-side-stack {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-system-performance .admin-settings-section-summary {
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
.admin-system-performance .admin-settings-section-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.admin-performance-facts {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(112px, 0.72fr) minmax(0, 1.45fr);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.admin-performance-facts dt,
|
||||
.admin-performance-facts dd {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: 8px 14px;
|
||||
border-top: 1px solid var(--admin-row-border);
|
||||
font-size: 11px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.admin-performance-facts dt {
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
|
||||
.admin-performance-facts dd {
|
||||
color: var(--admin-text-secondary);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.admin-performance-submetrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
border-top: 1px solid var(--admin-divider);
|
||||
}
|
||||
|
||||
.admin-performance-submetrics > div {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
||||
.admin-performance-submetrics > div:nth-child(even) {
|
||||
border-left: 1px solid var(--admin-row-border);
|
||||
}
|
||||
|
||||
.admin-performance-submetrics > div:nth-child(n + 3) {
|
||||
border-top: 1px solid var(--admin-row-border);
|
||||
}
|
||||
|
||||
.admin-performance-submetrics span,
|
||||
.admin-performance-cache-groups small {
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.admin-performance-submetrics strong {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-performance-cache-groups {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.admin-performance-cache-groups > div {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
||||
align-items: baseline;
|
||||
gap: 5px;
|
||||
padding: 13px 14px;
|
||||
border-top: 1px solid var(--admin-row-border);
|
||||
}
|
||||
|
||||
.admin-performance-cache-groups > div + div {
|
||||
border-left: 1px solid var(--admin-row-border);
|
||||
}
|
||||
|
||||
.admin-performance-cache-groups span {
|
||||
overflow: hidden;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 11px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-performance-cache-groups strong {
|
||||
font-size: 16px;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.admin-performance-safety {
|
||||
flex-wrap: wrap;
|
||||
gap: 7px 12px;
|
||||
padding: 9px 14px;
|
||||
border-top: 1px solid var(--admin-divider);
|
||||
background: var(--admin-layer-2);
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.admin-performance-safety strong {
|
||||
color: var(--admin-status-success);
|
||||
}
|
||||
|
||||
.admin-performance-safety span::before {
|
||||
margin-right: 5px;
|
||||
color: var(--admin-status-success);
|
||||
content: "✓";
|
||||
}
|
||||
|
||||
.admin-performance-cache-note {
|
||||
gap: 6px;
|
||||
color: var(--admin-text-muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.admin-performance-confirm {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
color: var(--admin-text-secondary);
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.admin-performance-confirm p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.admin-performance-kpis,
|
||||
.admin-performance-cache-groups {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.admin-performance-kpi:nth-child(3),
|
||||
.admin-performance-kpi:nth-child(4),
|
||||
.admin-performance-cache-groups > div:nth-child(n + 3) {
|
||||
border-top: 1px solid var(--admin-divider);
|
||||
}
|
||||
|
||||
.admin-performance-kpi:nth-child(3),
|
||||
.admin-performance-cache-groups > div:nth-child(3) {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.admin-performance-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.admin-performance-statusbar {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-performance-kpis,
|
||||
.admin-performance-cache-groups {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-performance-kpi + .admin-performance-kpi,
|
||||
.admin-performance-cache-groups > div + div {
|
||||
border-top: 1px solid var(--admin-divider);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.admin-performance-facts {
|
||||
grid-template-columns: 100px minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user