feat(frontend): replace native confirms and enhance form controls

Add ConfirmDialog to replace window.confirm for delete actions
Enhance SwitchGroup with grid layout, descriptions, and disabled state
Update AdminView to use TagsSelect and SwitchGroup for better UX
This commit is contained in:
2026-05-06 21:14:47 +08:00
parent 5ef1f4ecc9
commit cc440ea949
10 changed files with 59827 additions and 121 deletions

View File

@@ -1318,6 +1318,11 @@ svg {
--btn-fg: #ffffff;
}
.link-button--danger {
--btn-bg: var(--danger);
--btn-fg: #ffffff;
}
.ui-button--ghost,
.plain-button,
.row-actions button,
@@ -2762,6 +2767,14 @@ button:disabled,
font-weight: 850;
}
.confirm-dialog__message {
margin: 0;
color: var(--ink-soft);
font-size: 15px;
font-weight: 750;
line-height: 1.5;
}
.checklist-list {
display: grid;
gap: 10px;
@@ -7534,6 +7547,12 @@ button:disabled,
align-items: center;
}
.switch-group__options--grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
align-items: stretch;
}
.switch-control {
position: relative;
display: inline-flex;
@@ -7553,7 +7572,29 @@ button:disabled,
gap: 6px;
}
.switch-group__options--grid .switch-control--stacked {
min-height: 52px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
justify-items: stretch;
gap: 10px;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
background: var(--surface);
}
.switch-control--disabled {
cursor: not-allowed;
opacity: 0.58;
}
.switch-control__copy {
min-width: 0;
}
.switch-control__label {
display: block;
color: var(--ink-soft);
font-size: 13px;
line-height: 1.2;
@@ -7561,6 +7602,21 @@ button:disabled,
overflow-wrap: anywhere;
}
.switch-control__description {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 12px;
font-weight: 650;
line-height: 1.3;
overflow-wrap: anywhere;
}
.switch-group__options--grid .switch-control__label,
.switch-group__options--grid .switch-control__description {
text-align: left;
}
.switch-control input {
position: absolute;
inline-size: 1px;