обновил дизайн, добавил дашборд
This commit is contained in:
Zuev
288
analysis_results.md
Normal file
288
analysis_results.md
Normal file
@@ -0,0 +1,288 @@
|
||||
# Анализ структуры вкладок и предложения по UX/UI оптимизации системы Magistr
|
||||
|
||||
В данном документе представлен детальный анализ текущей структуры интерфейса административной панели (SPA) и настроек системы Magistr. Выявлены пересекающиеся области функционала, сформулированы предложения по их объединению, переносу в настройки или удалению, а также предложены новые функциональные модули и технические решения для оптимизации UX/UI и производительности.
|
||||
|
||||
---
|
||||
|
||||
## 1. Анализ текущей структуры и доступности вкладок
|
||||
|
||||
На данный момент в основном SPA-интерфейсе администратора (`/admin/`) зарегистрировано **13 вкладок**, а в дополнительном SPA настроек (`/admin/settings/`) — **2 вкладки**.
|
||||
|
||||
В зависимости от роли пользователя, сайдбар фильтруется следующим образом:
|
||||
|
||||
| Вкладка (ID) | Описание | Доступность по ролям |
|
||||
| :--- | :--- | :--- |
|
||||
| `users` | CRUD пользователей и архивирование | `ADMIN` |
|
||||
| `groups` | CRUD групп, подгрупп и назначений календарей | `ADMIN` |
|
||||
| `edu-forms` | Справочник форм обучения | `ADMIN` |
|
||||
| `profiles` | Управление профилями обучения специальностей | `ADMIN` |
|
||||
| `equipments` | Каталог оборудования | `ADMIN`, `EDUCATION_OFFICE` |
|
||||
| `classrooms` | Список аудиторий с привязкой оборудования | `ADMIN`, `EDUCATION_OFFICE` |
|
||||
| `subjects` | CRUD всех дисциплин и привязка преподавателей | `ADMIN` |
|
||||
| `department-workspace` | Рабочая область кафедры (дисциплины, импорт, нагрузка) | `ADMIN`, `DEPARTMENT` |
|
||||
| `schedule-view` | Просмотр расписаний (read-only) | `ADMIN`, `EDUCATION_OFFICE`, `DEPARTMENT`, `SCHEDULE_VIEWER` |
|
||||
| `schedule` | Конструктор правил динамического расписания | `ADMIN`, `EDUCATION_OFFICE` |
|
||||
| `academic-calendar` | Календарные графики и Excel-редактор сетки | `ADMIN`, `EDUCATION_OFFICE` |
|
||||
| `auditorium-workload` | Матрицы и таблицы загруженности | `ADMIN`, `EDUCATION_OFFICE` |
|
||||
| `database` | Управление тенантами (БД клиентов) | `ADMIN` |
|
||||
| **Settings** (SPA) | Общие настройки, Управление временными слотами | `ADMIN`, `EDUCATION_OFFICE` (ссылка в подвале) |
|
||||
|
||||
---
|
||||
|
||||
## 2. Пересечения функционала и проблемные зоны
|
||||
|
||||
### 2.1. Избыточное дробление академической структуры
|
||||
Для описания структуры обучения сейчас используются четыре отдельные вкладки:
|
||||
1. `departments-data` (Создание кафедры/специальности)
|
||||
2. `profiles` (Профили обучения специальностей)
|
||||
3. `edu-forms` (Формы обучения)
|
||||
4. `groups` (В блоке создания группы выбираются форма, кафедра, специальность и профиль)
|
||||
|
||||
**В чём проблема:**
|
||||
* **Разрыв контекста:** Чтобы завести новую специальность с профилями, администратору сначала нужно пойти во вкладку `departments-data`, создать специальность, затем перейти во вкладку `profiles`, выбрать в селекте эту специальность и добавить профили.
|
||||
* **Перегрузка меню:** 13 вкладок в сайдбаре для роли `ADMIN` — это слишком много. Пользователю трудно ориентироваться визуально.
|
||||
|
||||
### 2.2. Дублирование и раздвоение управления дисциплинами
|
||||
Управление дисциплинами разнесено между вкладками `subjects` (для администратора) и `department-workspace` (для кафедры).
|
||||
|
||||
**В чём проблема:**
|
||||
* Администратор во вкладке `subjects` видит плоскую таблицу всех дисциплин всех кафедр, но не имеет удобных инструментов фильтрации по кафедре.
|
||||
* Форма создания новой дисциплины во вкладке `subjects` требует ввода **числового ID кафедры вручную** (поле `new-subject-department` типа `number`). Это критическая UX-ошибка: администратор не должен помнить числовые ID БД наизусть.
|
||||
* Привязка преподавателей к дисциплинам (`teacher_subjects`) находится на вкладке `subjects`. При этом сама нагрузка преподавателей и список преподавателей кафедры отображаются на вкладке `department-workspace`. Логичнее было бы видеть, какие дисциплины ведёт преподаватель, непосредственно при работе с его нагрузкой или в едином справочнике преподавателей/кафедры.
|
||||
|
||||
### 2.3. Низкая частота использования справочника оборудования (`equipments`)
|
||||
Оборудование существует только как подчиненная сущность для аудиторий (чтобы указать, что в аудитории 101 есть 20 ПК и 1 проектор).
|
||||
|
||||
**В чём проблема:**
|
||||
* Выделение целой вкладки под простой список («Проектор», «ПК») не оправдано. Список оборудования меняется раз в несколько лет.
|
||||
* При этом привязка оборудования к аудиториям происходит на вкладке `classrooms`.
|
||||
|
||||
### 2.4. Перегруженность вкладки групп (`groups`)
|
||||
На вкладке групп на одном экране выводятся сразу три тяжелые формы и три таблицы:
|
||||
1. Создание/редактирование групп + таблица групп.
|
||||
2. Создание подгрупп для лабораторных + таблица подгрупп.
|
||||
3. Назначение календарного графика группе + таблица назначений.
|
||||
|
||||
**В чём проблема:**
|
||||
* Экран перегружен элементами управления.
|
||||
* Для работы с подгруппами или назначениями графиков конкретной группы пользователю приходится выбирать эту группу из длинного выпадающего списка в отдельной форме, вместо того чтобы выполнять действия в контексте строки этой группы в таблице.
|
||||
|
||||
### 2.5. Нахождение системной вкладки «База данных» в общем меню расписания
|
||||
Вкладка `database` отвечает за управление тенантами (добавление новых вузов-клиентов, создание для них БД и запуск Flyway миграций).
|
||||
|
||||
**В чём проблема:**
|
||||
* Это технический функционал уровня Super-Admin / DevOps. Он не имеет отношения к ежедневному планированию расписания. Нахождение его в одном ряду с расписанием и группами нарушает логику интерфейса.
|
||||
|
||||
---
|
||||
|
||||
## 3. Рекомендации по оптимизации структуры (Что убрать, объединить и перенести)
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
subgraph Было (13 вкладок в меню ADMIN)
|
||||
direction TB
|
||||
T1[database]
|
||||
T2[edu-forms]
|
||||
T3[departments-data]
|
||||
T4[profiles]
|
||||
T5[equipments]
|
||||
T6[classrooms]
|
||||
T7[groups]
|
||||
T8[users]
|
||||
T9[subjects]
|
||||
T10[department-workspace]
|
||||
T11[schedule]
|
||||
T12[schedule-view]
|
||||
T13[academic-calendar]
|
||||
T14[auditorium-workload]
|
||||
end
|
||||
|
||||
subgraph Стало (Сгруппированное меню + настройки)
|
||||
direction TB
|
||||
subgraph Основное меню SPA (Группы вкладок)
|
||||
direction TB
|
||||
DASH[1. Дашборд / Главная]
|
||||
|
||||
subgraph Модуль: Расписание
|
||||
SCH_ED[2. Конструктор расписания]
|
||||
SCH_VI[3. Просмотр расписаний]
|
||||
CAL[4. Календарный график]
|
||||
WORK[5. Загруженность]
|
||||
end
|
||||
|
||||
subgraph Модуль: Структура
|
||||
UNIV[6. Структура вуза<br/>Кафедры, Специальности, Профили]
|
||||
GRP[7. Группы и подгруппы]
|
||||
SUBJ[8. Дисциплины]
|
||||
end
|
||||
|
||||
subgraph Модуль: Ресурсы
|
||||
CLASS[9. Аудиторный фонд<br/>Аудитории + Оборудование]
|
||||
end
|
||||
|
||||
USR[10. Пользователи]
|
||||
end
|
||||
|
||||
subgraph SPA Настройки (Настройки системы)
|
||||
direction TB
|
||||
SET_GEN[Общие настройки]
|
||||
SET_TIME[Временные слоты сетка]
|
||||
SET_FORM[Формы обучения из edu-forms]
|
||||
SET_DB[Базы данных / Тенанты из database]
|
||||
end
|
||||
end
|
||||
|
||||
T1 -->|Перенести| SET_DB
|
||||
T2 -->|Перенести| SET_FORM
|
||||
T3 -->|Объединить| UNIV
|
||||
T4 -->|Объединить| UNIV
|
||||
T5 -->|Объединить| CLASS
|
||||
T6 -->|Объединить| CLASS
|
||||
T7 -->|Оптимизировать| GRP
|
||||
T8 -->|Оставить| USR
|
||||
T9 -->|Оптимизировать| SUBJ
|
||||
T10 -->|Сохранить для роли Кафедра| SUBJ
|
||||
T11 -->|Оставить| SCH_ED
|
||||
T12 -->|Оставить| SCH_VI
|
||||
T13 -->|Оставить| CAL
|
||||
T14 -->|Оставить| WORK
|
||||
```
|
||||
|
||||
### 3.1. Перенос в настройки (`/admin/settings/`)
|
||||
1. **База данных (`database`)**: Перенести в SPA настроек в раздел «Управление тенантами». Доступ должен быть только у роли `ADMIN`.
|
||||
2. **Формы обучения (`edu-forms`)**: Перенести в настройки. Данный справочник заполняется один раз и не требует оперативного доступа из главного меню.
|
||||
|
||||
### 3.2. Объединение вкладок
|
||||
1. **Объединить Кафедры, Специальности и Профили** в одну вкладку **«Структура вуза»** (`university-structure`):
|
||||
* Интерфейс делится на две вкладки внутри страницы: **«Кафедры»** и **«Специальности»**.
|
||||
* Управление профилями должно происходить прямо внутри списка специальностей. Например, в строке специальности в таблице добавляется кнопка «Профили», открывающая список профилей этой специальности в раскрывающейся строке (accordion) или модальном окне.
|
||||
2. **Объединить Аудитории (`classrooms`) и Оборудование (`equipments`)** в одну вкладку **«Аудиторный фонд»**:
|
||||
* Основной экран показывает список аудиторий.
|
||||
* Рядом располагается кнопка «Управление каталогом оборудования», которая открывает модальное окно с простым списком (добавить/удалить тип оборудования). Это избавит от необходимости держать под это отдельную вкладку в сайдбаре.
|
||||
|
||||
### 3.3. Реорганизация вкладки групп (`groups`)
|
||||
* **Оставить на вкладке только список групп** с возможностью фильтрации по курсу, кафедре и форме обучения.
|
||||
* **Вынести подгруппы и назначения календарей из глобальных форм:**
|
||||
* В строке таблицы для каждой группы добавить действия:
|
||||
* `[Подгруппы]` — открывает компактное модальное окно для быстрого создания/редактирования подгрупп (лабораторных) именно для этой группы.
|
||||
* `[Календарь]` — открывает модальное окно назначения календарного учебного графика на учебные годы для этой группы.
|
||||
* Это уберет лишние тяжелые формы с главной страницы и исключит необходимость выбора группы из селектов вручную.
|
||||
|
||||
### 3.4. Оптимизация Дисциплин (`subjects`) и Кабинета кафедры
|
||||
* **Исправить форму добавления дисциплины:** Заменить ручной числовой ввод ID кафедры (`new-subject-department`) на стандартный выпадающий список (выбор из загруженных кафедр).
|
||||
* **Связать привязку преподавателей с дисциплинами:** Вместо двух разрозненных таблиц на вкладке `subjects` («Все дисциплины» и «Привязки преподавателей»), объединить их:
|
||||
* В строке дисциплины выводить список привязанных преподавателей (в виде чипов/badge).
|
||||
* По клику на кнопку «Преподаватели» в строке дисциплины открывать модальное окно привязки/отвязки преподавателей для этой конкретной дисциплины.
|
||||
|
||||
---
|
||||
|
||||
## 4. Что необходимо добавить (Новый функционал)
|
||||
|
||||
### 4.1. Главная страница / Дашборд (`dashboard`)
|
||||
При входе в систему администратор и сотрудники учебного отдела должны видеть не сырые таблицы пользователей или расписания, а высокоуровневую аналитическую панель:
|
||||
* **Информационные карточки (Метрики):**
|
||||
* Всего активных групп / студентов.
|
||||
* Количество задействованных преподавателей.
|
||||
* Процент занятости аудиторного фонда на текущий день.
|
||||
* Количество запланированных пар на сегодня.
|
||||
* **Мониторинг расписания в реальном времени:**
|
||||
* Список идущих прямо сейчас пар (текущий временной слот).
|
||||
* Ближайшие свободные аудитории.
|
||||
* **Быстрый переход:** Кнопки быстрого создания правила расписания, добавления переноса/замены.
|
||||
|
||||
### 4.2. Центр предупреждений и конфликтов (Red Zone)
|
||||
В соответствии с планируемой бизнес-логикой (раздел 5 `docs/BUSINESS_LOGIC.md`), система должна автоматически валидировать расписание и предупреждать о коллизиях.
|
||||
Необходима отдельная вкладка или виджет на дашборде **«Конфликты расписания»**:
|
||||
* **Критические ошибки (Блокирующие генерацию):**
|
||||
* *Накладки преподавателей:* Преподаватель назначен в один и тот же временной слот в разные аудитории / к разным группам (кроме потоковых лекций).
|
||||
* *Накладки аудиторий:* Две разные пары стоят в одной аудитории в один слот.
|
||||
* **Предупреждения (Мягкие проверки):**
|
||||
* *Превышение вместимости:* Численность группы (или сумма подгрупп при совмещенных занятиях) превышает физическую вместимость аудитории.
|
||||
* *Недостаток оборудования:* Дисциплина (например, лабораторная по химии) требует определенного оборудования, которого нет в назначенной аудитории.
|
||||
* *Превышение нагрузки:* Преподаватель превысил недельный лимит часов.
|
||||
|
||||
---
|
||||
|
||||
## 5. Концепция новой структуры меню (Сайдбара)
|
||||
|
||||
Для уменьшения визуального шума сайдбар предлагается сделать **двухуровневым** (сворачиваемые группы) или четко разделить визуальными разделителями:
|
||||
|
||||
```
|
||||
[ Логотип Magistr ]
|
||||
---------------------------
|
||||
👤 Кабинет кафедры <-- (Показывается только для роли DEPARTMENT)
|
||||
📈 Дашборд <-- (Новый главный экран для ADMIN / EDU_OFFICE)
|
||||
|
||||
📁 РАСПИСАНИЕ
|
||||
🗓 Конструктор правил
|
||||
🗓 Точечные изменения <-- (Выделенный функционал оверрайдов/переносов)
|
||||
📅 Календарный график
|
||||
📊 Загруженность
|
||||
🔍 Просмотр расписаний
|
||||
|
||||
🗂 СУБЪЕКТЫ И РЕСУРСЫ
|
||||
🏫 Аудиторный фонд <-- (Объединенные Аудитории + Оборудование)
|
||||
🎓 Группы обучения <-- (Группы + модалки подгрупп/календарей)
|
||||
🏛 Структура вуза <-- (Кафедры + Специальности + Профили)
|
||||
📚 Дисциплины <-- (Дисциплины + модалки преподавателей)
|
||||
|
||||
⚙️ СИСТЕМА
|
||||
👥 Пользователи
|
||||
⚙️ Настройки <-- (Переход в настройки SPA: слоты, БД, формы обучения)
|
||||
---------------------------
|
||||
[ Профиль / Выход ]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Идеи по оптимизации фронтенда и взаимодействия с API
|
||||
|
||||
### 6.1. Кэширование справочников на клиенте
|
||||
На данный момент при переключении почти каждой вкладки заново запрашиваются списки кафедр, специальностей, учебных годов и т.д.
|
||||
* **Решение:** Реализовать простой кэш-менеджер во фронтенд-клиенте (`api.js` или отдельный `cache.js`):
|
||||
```javascript
|
||||
const cache = new Map();
|
||||
export async function getCachedData(key, fetchPromise) {
|
||||
if (!cache.has(key)) {
|
||||
cache.set(key, await fetchPromise);
|
||||
}
|
||||
return cache.get(key);
|
||||
}
|
||||
export function clearCache(key) {
|
||||
if (key) cache.delete(key);
|
||||
else cache.clear();
|
||||
}
|
||||
```
|
||||
Это позволит избежать десятков дублирующих запросов при переключении между вкладками `groups`, `subjects`, `schedule`.
|
||||
|
||||
### 6.2. Ленивая инициализация вкладок (Lazy Loading)
|
||||
Сейчас в `main.js` импортируются все JS-модули вкладок одновременно при загрузке страницы:
|
||||
```javascript
|
||||
import { initUsers } from './views/users.js';
|
||||
import { initGroups } from './views/groups.js';
|
||||
// ...еще 10 импортов
|
||||
```
|
||||
* **Решение:** Перейти на динамический импорт модулей инициализации при переходе на конкретную вкладку:
|
||||
```javascript
|
||||
async function switchTab(tab) {
|
||||
// ...
|
||||
const viewModule = await import(`./views/${tab}.js`);
|
||||
viewModule.init();
|
||||
// ...
|
||||
}
|
||||
```
|
||||
Это уменьшит размер начального JS-бандла и ускорит первую загрузку страницы.
|
||||
|
||||
### 6.3. Единый реестр кастомных выпадающих списков
|
||||
В проекте реализованы кастомные селекты (выпадающие списки с поддержкой поиска и чекбоксов). При динамической подгрузке HTML-шаблонов часто требуется их повторная инициализация.
|
||||
* **Решение:** Создать глобальный шину событий (Event Bus) или MutationObserver, который автоматически подхватывает элементы с классами `.custom-select` или атрибутами `data-select` и инициализирует их без вызова ручного кода `initAllCustomDropdowns()` в каждом отдельном скрипте представления.
|
||||
|
||||
---
|
||||
|
||||
## Резюме
|
||||
|
||||
Предложенные изменения позволят:
|
||||
1. Сократить количество пунктов основного меню с **13** до **8-9** логически сгруппированных разделов.
|
||||
2. Исключить ручной ввод ID (заменив на селекты) и разгрузить перегруженные интерфейсы (выносом подгрупп и назначений в контекстные модальные окна групп).
|
||||
3. Повысить отзывчивость интерфейса за счет клиентского кэширования справочников и ленивой загрузки JS-модулей.
|
||||
4. Добавить полноценный Дашборд и Центр предупреждений о конфликтах, что выведет аналитические возможности системы на уровень премиум-класса.
|
||||
Reference in New Issue
Block a user