feat: завершить миграцию фронтенда на React (этапы 1-5)
Админка, настройки, логин, кабинеты преподавателя и студента полностью переведены на React 19 (модель strangler, docs/REACT_MIGRATION.md). - 15 вкладок админки: lazy-загрузка, общий error boundary, сервисный слой - Удалены legacy-views и переходный слой LegacyTabView (45 файлов) - Сборка esbuild (frontend/scripts/build-react.mjs) с бюджетами gzip на чанки - CSP-хэши, кэширование: chunk'и immutable, CSS/HTML no-cache (react-cache.conf) - Фиксы: lazy-импорт именованных экспортов (краш после авторизации), растяжение #admin-root/#settings-root на всю ширину, возврат subjects/lessonTypes из справочников (краш просмотра расписаний), отказ от заведомо широкого поиска расписания без выбранной цели, центрирование карточки логина - Тесты: 237/237 (npm run check), регрессионные на lazy-вкладки и ширину - Документация: REACT_MIGRATION.md, REACT_MIGRATION_RESULT.md, FRONTEND.md
This commit is contained in:
dipatrik10
@@ -11,6 +11,22 @@
|
||||
|
||||
.workload-filter-row {
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Заголовок карточки загруженности (вместо inline-стиля legacy-вьюхи) */
|
||||
.workload-card-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.workload-min-capacity {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.workload-date-field {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.workload-display-control {
|
||||
|
||||
@@ -4186,3 +4186,251 @@ tbody tr:hover {
|
||||
.project-dialog-field { display: grid; gap: 0.4rem; margin-top: 1rem; }
|
||||
.project-dialog-field textarea { width: 100%; resize: vertical; }
|
||||
.project-dialog-error { min-height: 1.3rem; margin-top: 0.35rem; color: var(--danger, #dc2626); font-size: 0.85rem; }
|
||||
|
||||
/* ===== Êëàññû ýòàïà 5 (âîëíà 1): çàìåíà inline-ñòèëåé ïåðåíåñ¸ííûõ âêëàäîê ===== */
|
||||
|
||||
/* Çàãîëîâîê êàðòî÷êè ñ äåéñòâèåì ñïðàâà (àóäèòîðèè) */
|
||||
.card-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.card-toolbar h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Ñòðîêè è ãðóïïû ôîðì */
|
||||
.form-row--spacing {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.form-row--bottom {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.form-group--wide {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.form-group--flush {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-group--submit {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-inline {
|
||||
height: fit-content;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ß÷åéêè òàáëèö */
|
||||
.th-actions {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.table-cell-actions {
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.badge--tight {
|
||||
margin: 0.1rem;
|
||||
}
|
||||
|
||||
.badge--lesson-type {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Ìîäàëüíûå îêíà ïåðåíåñ¸ííûõ âêëàäîê */
|
||||
.modal-content--medium {
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.modal-header-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.modal-subtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.modal-subcard {
|
||||
margin-bottom: 1.5rem;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.modal-subcard h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* Ñîñòîÿíèå çàãðóçêè lazy-âêëàäêè */
|
||||
.tab-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 2rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Äàøáîðä: ìåòðèêè è ìîíèòîðèíã */
|
||||
.dashboard-metric-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dashboard-metric-value {
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.dashboard-monitor-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.dashboard-monitor-table th,
|
||||
.dashboard-monitor-table td {
|
||||
text-align: left;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.dashboard-state-row {
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dashboard-state-row--wide {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.dashboard-free-hint {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.dashboard-free-busy {
|
||||
color: var(--error);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dashboard-free-badge {
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #10b981;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
/* Äàøáîðä: öåíòð ïðåäóïðåæäåíèé (Red Zone) */
|
||||
.red-zone-card {
|
||||
border-top: 4px solid var(--error, #ef4444);
|
||||
}
|
||||
|
||||
.red-zone-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.red-zone-title {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.red-zone-subtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.red-zone-conflicts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.dashboard-check-loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ===== Ýòàï 5 (âîëíà 2): êëàññû inline-ñòèëåé ïåðåíåñ¸ííûõ âêëàäîê ===== */
|
||||
|
||||
/* Øèðîêèå ìîäàëüíûå îêíà (ïîäãðóïïû, ïðîôèëè, êàëåíäàðíûå ãðàôèêè) */
|
||||
.modal-content--wide {
|
||||
max-width: 700px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.modal-content--xwide {
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.modal-content--full {
|
||||
max-width: 960px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
/* Ôîðìà ïðîôèëÿ íà âêëàäêå ñòðóêòóðû âóçà */
|
||||
.profile-form-spec {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.profile-form-name {
|
||||
flex: 1.5;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.profile-form-description {
|
||||
flex: 2;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
/* Ðÿä êíîïîê ôîðìû, âûðîâíåííûõ ïî íèæíåé êðîìêå */
|
||||
.form-actions-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
/* Âîëíà 3 (ýòàï 5): çàìåíà inline-ñòèëÿ èç legacy department-workspace.html */
|
||||
.schedule-section-label--flush {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -265,6 +265,20 @@
|
||||
margin: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
/* ===== Корневой контейнер ===== */
|
||||
|
||||
/* body — flex-контейнер, поэтому без явного растяжения корневой
|
||||
div сжимается до max-content контента: страницы с узким контентом
|
||||
(карточки, формы) не занимают всю ширину монитора, а дашборд
|
||||
«растягивался» только после загрузки данных. Растягиваем корень
|
||||
ровно на ширину окна (flex-basis 0), а не под контент: intrinsic-замер
|
||||
max-content раздувает вложенные flex-фильтры (например, панель
|
||||
загруженности аудиторий) до ~1 млн px горизонтального скролла. */
|
||||
#admin-root {
|
||||
flex: 1 1 0%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ===== Main ===== */
|
||||
.main {
|
||||
flex: 1;
|
||||
|
||||
Reference in New Issue
Block a user