bai/curriculum-project-hub
1
0
Fork 1
forked from EduCraft/curriculum-project-hub
Code Pull Requests Activity

refactor(admin-web): polish Chinese UI and bits-ui controls

Browse Source 
Map roles to Chinese labels, remove ADR/spec wording from the surface, and replace native selects/checkboxes/modals with bits-ui Select, Checkbox, Switch, Dialog, Label, and Collapsible.
This commit is contained in:
ChickenPige0n
2026-07-11 12:46:54 +08:00
parent 552c1c353e
commit 0968545b5a
17 changed files with 586 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hub/admin-web/src/routes/app.css
+154 -5
View File
@@ -324,6 +324,79 @@
resize: vertical;
}
.saas-select-trigger {
display: inline-flex;
width: 100%;
align-items: center;
border-radius: 0.5rem;
border: 1px solid var(--color-surface-200);
background: var(--color-surface-50);
color: var(--color-surface-900);
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
cursor: pointer;
text-align: left;
}
.saas-select-trigger:focus-visible,
.saas-select-trigger[data-state='open'] {
border-color: var(--color-primary-400);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 20%, transparent);
}
.saas-select-trigger:disabled,
.saas-select-trigger[data-disabled] {
cursor: not-allowed;
opacity: 0.55;
}
.saas-select-trigger [data-placeholder] {
color: var(--color-surface-400);
}
.saas-select-content {
z-index: 70;
max-height: min(18rem, var(--bits-select-content-available-height, 18rem));
width: var(--bits-select-anchor-width);
min-width: var(--bits-select-anchor-width);
overflow: hidden;
border-radius: 0.5rem;
border: 1px solid var(--color-surface-200);
background: var(--color-surface-50);
box-shadow: 0 10px 30px rgb(15 23 42 / 0.12);
outline: none;
}
.saas-select-item {
display: flex;
align-items: center;
border-radius: 0.375rem;
padding: 0.4rem 0.6rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: var(--color-surface-800);
cursor: pointer;
outline: none;
user-select: none;
}
.saas-select-item[data-highlighted] {
background: color-mix(in oklab, var(--color-primary-500) 12%, transparent);
}
.saas-select-item[data-selected] {
color: var(--color-primary-800);
font-weight: 500;
}
.saas-select-item[data-disabled] {
cursor: not-allowed;
opacity: 0.45;
}
.saas-btn-primary,
.saas-btn-secondary,
.saas-btn-ghost,
@@ -386,26 +459,102 @@
background: var(--color-error-200);
}
.saas-checkbox {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.1rem;
height: 1.1rem;
flex-shrink: 0;
border-radius: 0.3rem;
border: 1px solid var(--color-surface-300);
background: var(--color-surface-50);
color: white;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.saas-checkbox[data-state='checked'] {
background: var(--color-primary-600);
border-color: var(--color-primary-600);
}
.saas-checkbox:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 20%, transparent);
}
.saas-checkbox[data-disabled] {
cursor: not-allowed;
opacity: 0.5;
}
.saas-switch {
position: relative;
display: inline-flex;
width: 2.5rem;
height: 1.4rem;
flex-shrink: 0;
align-items: center;
border-radius: 9999px;
background: var(--color-surface-300);
padding: 0.125rem;
cursor: pointer;
transition: background 0.15s;
}
.saas-switch[data-state='checked'] {
background: var(--color-primary-600);
}
.saas-switch:focus-visible {
outline: none;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 20%, transparent);
}
.saas-switch[data-disabled] {
cursor: not-allowed;
opacity: 0.5;
}
.saas-switch-thumb {
display: block;
width: 1.05rem;
height: 1.05rem;
border-radius: 9999px;
background: white;
box-shadow: 0 1px 2px rgb(15 23 42 / 0.18);
transition: transform 0.15s;
transform: translateX(0);
}
.saas-switch[data-state='checked'] .saas-switch-thumb,
.saas-switch-thumb[data-state='checked'] {
transform: translateX(1.05rem);
}
.saas-modal-backdrop {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
background: rgb(2 6 23 / 0.4);
padding: 1rem;
backdrop-filter: blur(2px);
}
.saas-modal {
width: 100%;
position: fixed;
left: 50%;
top: 50%;
z-index: 51;
width: calc(100% - 2rem);
max-width: 28rem;
transform: translate(-50%, -50%);
border-radius: 1rem;
border: 1px solid var(--color-surface-200);
background: var(--color-surface-50);
padding: 1.5rem;
box-shadow: 0 20px 40px rgb(15 23 42 / 0.16);
outline: none;
}
.saas-status-panel {