feat: enhance credential management with cards, settings, and quota controls
- Display credentials in responsive cards with quota progress bars - Add request statistics and detailed health and cooldown information - Consolidate nine credential settings into a dialog with partial updates - Reuse Codex quota reset logic and confirmation across pages - Move notes above card actions and hide the healthy status indicator - Add translations and regression coverage
This commit is contained in:
lzt404 committed
1 parent
bc8b34f9f1
commit
fe83731b94
24 files changed
+1973
-209
No files matched your search
@@ -0,0 +1,52 @@
|
||||
.credential-settings-dialog {
|
||||
width: min(760px, calc(100vw - 32px));
|
||||
max-height: min(900px, calc(100dvh - 40px));
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 16px;
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 24px 80px #0004;
|
||||
}
|
||||
.credential-settings-dialog::backdrop { background: #0b122080; backdrop-filter: blur(3px); }
|
||||
.credential-settings-dialog form { display: flex; flex-direction: column; max-height: min(898px, calc(100dvh - 42px)); min-height: 0; }
|
||||
.credential-settings-heading, .credential-settings-footer { flex-shrink: 0; }
|
||||
.credential-settings-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border-color); }
|
||||
.credential-settings-heading > div { min-width: 0; }
|
||||
.credential-settings-heading h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 18px; }
|
||||
.credential-settings-heading p { margin: 6px 0 0; color: var(--text-tertiary); font-size: 12px; overflow-wrap: anywhere; }
|
||||
.credential-settings-body { overflow-y: auto; min-height: 0; padding: 22px 24px; overscroll-behavior: contain; }
|
||||
.credential-settings-body fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
|
||||
.credential-settings-section + .credential-settings-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); }
|
||||
.credential-settings-section h3 { margin: 0 0 15px; font-size: 14px; }
|
||||
.credential-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
|
||||
.credential-settings-field { display: grid; align-content: start; gap: 7px; min-width: 0; font-size: 13px; }
|
||||
.credential-settings-field + .credential-settings-field { margin-top: 16px; }
|
||||
.credential-settings-grid .credential-settings-field { margin: 0; }
|
||||
.credential-settings-dialog code { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 400; color: var(--text-tertiary); margin-left: 5px; }
|
||||
.credential-settings-dialog small { display: block; color: var(--text-tertiary); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
|
||||
.credential-settings-dialog input:not([type=checkbox]), .credential-settings-dialog select, .credential-settings-dialog textarea {
|
||||
box-sizing: border-box; width: 100%; min-width: 0; padding: 9px 11px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-primary); color: var(--text-primary); font: inherit; line-height: 1.5;
|
||||
}
|
||||
.credential-settings-dialog textarea { resize: vertical; }
|
||||
.credential-settings-dialog textarea.credential-settings-json { font-family: ui-monospace, monospace; font-size: 12px; }
|
||||
.credential-settings-dialog :is(input, textarea, select, summary):focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
|
||||
.credential-settings-catalog { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 12px; }
|
||||
.credential-settings-catalog summary { cursor: pointer; color: var(--text-secondary); }
|
||||
.credential-settings-catalog[open] summary { margin-bottom: 12px; }
|
||||
.credential-settings-models { display: grid; gap: 8px; max-height: 210px; overflow-y: auto; margin-top: 12px; }
|
||||
.credential-settings-models label { display: flex; align-items: flex-start; gap: 8px; overflow-wrap: anywhere; }
|
||||
.credential-settings-models input { accent-color: var(--primary-color); margin-top: 3px; }
|
||||
.credential-settings-models span { min-width: 0; }
|
||||
.credential-settings-footer { padding: 16px 24px; border-top: 1px solid var(--border-color); }
|
||||
.credential-settings-actions { display: flex; gap: 10px; justify-content: flex-end; }
|
||||
.credential-settings-error { color: var(--failure-badge-text); margin: 0 0 12px; font-size: 12px; overflow-wrap: anywhere; max-height: 90px; overflow-y: auto; }
|
||||
.credential-settings-warning { color: var(--amber-text); }
|
||||
.credential-settings-discard { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; font-size: 12px; }
|
||||
.credential-settings-discard span { flex: 1 1 100%; }
|
||||
.credential-settings-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 150px; }
|
||||
@media (max-width: 560px) {
|
||||
.credential-settings-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
.credential-settings-heading, .credential-settings-body, .credential-settings-footer { padding: 16px; }
|
||||
}
|
||||
Reference in new issue
Block a user