Zuev/magistr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
da7c90fa6a83bcb669a070ba8e210fd9d81f7a3f
magistr/analysis_results.md

24 KiB
Raw Blame History

Анализ структуры вкладок и предложения по 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. Рекомендации по оптимизации структуры (Что убрать, объединить и перенести)

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): 
    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-модули вкладок одновременно при загрузке страницы:

import { initUsers } from './views/users.js';
import { initGroups } from './views/groups.js';
// ...еще 10 импортов
  • Решение: Перейти на динамический импорт модулей инициализации при переходе на конкретную вкладку: 
    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 View Git Blame Copy Permalink