Константин Лебединский
31b51b7768
- СПРИНТЫ: remove inline instruction and sprint 4; link to РУКОВОДСТВО + images - Add docs/РУКОВОДСТВО_КАБИНЕТ_ТЕСТОВ.md (user-facing, with SVG refs) - ПРЕДЛОЖЕНИЕ_ДИЗАЙН: актуализация TestDetail/cabinet-theme vs legacy TestForm - PROJECT_STATUS, DEV_CONTOUR, шаги 05+README, migration, README: current block names and links Made-with: Cursor
159 lines
14 KiB
Markdown
159 lines
14 KiB
Markdown
# Предложение по редизайну страницы «Создание теста»
|
||
|
||
## Актуализация (кабинет `TestingWebApp`, 2026)
|
||
|
||
**Фактическая реализация** кабинета (React) — **не** отдельный `TestForm` из текста ниже, а страница **`frontend/src/pages/TestDetail.jsx`** (редактирование существующего теста) и глобальные стили **`frontend/src/styles/cabinet-theme.css`**.
|
||
|
||
| Блок в UI (как в интерфейсе) | Содержимое |
|
||
|------------------------------|------------|
|
||
| **О тесте** | Название, описание, порог зачёта |
|
||
| **Вопросы** | Панель ИИ «сетка», вопросы/варианты, **«Документ в вопросы»** (импорт) внизу секции |
|
||
| Панель в потоке + **фикс-футер** `≤640px` | «Сохранить черновик», «К списку» |
|
||
| **История** | Подзаголовки **Версии** / **Прохождения** |
|
||
| **Показ в каталоге** | **Видимость**; при включённом назначении — **Кому выдать** (поиск, «Выбрать всех», список) |
|
||
|
||
Сводка мобильных доработок и чек-листы: [СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md](СПРИНТЫ_МОБИЛЬНЫЙ_ДИЗАЙН.md). Памятка для пользователей без кода: [РУКОВОДСТВО_КАБИНЕТ_ТЕСТОВ.md](РУКОВОДСТВО_КАБИНЕТ_ТЕСТОВ.md).
|
||
|
||
**Ниже** — **исторический** вариант документа (Ant Design, `TestForm` / `TestCreate` из другой ветки/референса). Имеет смысл читать как **идеи** по группировке, пока **не** как текущий путь к файлам.
|
||
|
||
---
|
||
|
||
**Ветка (ист.):** `dev-new-design-page-createtest`
|
||
**Затронутые файлы (ист.):** `frontend/src/components/TestForm/index.tsx`, `frontend/src/pages/TestCreate/index.tsx` (через общий компонент), частично `frontend/src/api/llm.ts` (расширение сигнатуры `generate`).
|
||
**Бэкенд:** менять не обязательно — у нас уже есть `POST /api/llm/generate` (см. `backend/app/api/llm.py`); нужно лишь принять параметры `questions_count` и `answers_count`.
|
||
|
||
---
|
||
|
||
## 1. Цель
|
||
|
||
Сделать форму создания теста читаемее: разбить «полотно» на три смысловые группы и чётко отделить редактируемое содержимое от служебных команд. Заодно — дать пользователю возможность сгенерировать тест сразу нужной формы, не нащёлкивая «+ вопрос» / «+ вариант» вручную.
|
||
|
||
## 2. Текущее состояние (что есть)
|
||
|
||
`TestForm/index.tsx` сейчас визуально устроен так:
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ ← Назад Заголовок │
|
||
├─────────────────────────────────────────┤
|
||
│ Card «Основные настройки» │
|
||
│ • название │
|
||
│ • описание │
|
||
│ • порог зачёта │
|
||
│ • таймер │
|
||
│ • разрешить возврат │
|
||
├─────────────────────────────────────────┤
|
||
│ [Сгенерировать с AI] [Проверить тест] │ ← вне карточек, между мета и вопросами
|
||
├─────────────────────────────────────────┤
|
||
│ Card «Вопрос 1» │
|
||
│ ... │
|
||
│ Card «Вопрос N» │
|
||
│ [+ Добавить вопрос] │
|
||
├─────────────────────────────────────────┤
|
||
│ [Создать тест] [Отмена] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
Замечания:
|
||
- AI-кнопки висят «в воздухе» — не видно, к какой части формы они относятся.
|
||
- «Сгенерировать с AI» жёстко создаёт **7 вопросов** (см. `TestForm/index.tsx:123` — `llmApi.generate(title.trim(), 7)`), без выбора структуры.
|
||
- В fallback-сообщении ошибки упоминается «API ключ в настройках» (`TestForm/index.tsx:244`).
|
||
|
||
## 3. Что меняем
|
||
|
||
### 3.1. Три смысловых блока
|
||
|
||
| Блок | Содержит | Визуально |
|
||
|------|----------|-----------|
|
||
| **Метаинформация** | название, описание, порог, таймер, навигация назад | `Card title="Метаинформация"` |
|
||
| **Содержание** | кнопка «Сгенерировать с AI», список вопросов, «+ Добавить вопрос» | `Card title="Содержание"` (вложенные карточки вопросов остаются) |
|
||
| **Команды** | «Создать тест», «Отмена», «Проверить тест» | блок `Space` снизу страницы |
|
||
|
||
Кнопка **«Проверить тест»** логически — это команда над всем тестом, поэтому переезжает в нижнюю панель команд. Кнопка **«Сгенерировать с AI»** становится первым элементом блока «Содержание» — у неё там естественное место (она формирует именно содержание).
|
||
|
||
### 3.2. Wireframe после редизайна
|
||
|
||
```
|
||
┌─────────────────────────────────────────┐
|
||
│ ← Назад Создание теста │
|
||
├─────────────────────────────────────────┤
|
||
│ Card «Метаинформация» │
|
||
│ • название │
|
||
│ • описание │
|
||
│ • порог зачёта │
|
||
│ • таймер │
|
||
│ • разрешить возврат │
|
||
├─────────────────────────────────────────┤
|
||
│ Card «Содержание» │
|
||
│ ┌─ AI-генерация ────────────────────┐ │
|
||
│ │ тема: [_________________] │ │
|
||
│ │ вопросов: [7] вариантов: [3] │ │
|
||
│ │ [🤖 Сгенерировать] │ │
|
||
│ └──────────────────────────────────┘ │
|
||
│ │
|
||
│ Card «Вопрос 1» ... │
|
||
│ Card «Вопрос N» ... │
|
||
│ [+ Добавить вопрос] │
|
||
├─────────────────────────────────────────┤
|
||
│ [Создать тест] [Проверить тест] [Отмена] │
|
||
└─────────────────────────────────────────┘
|
||
```
|
||
|
||
### 3.3. Форма AI-генерации с тремя полями
|
||
|
||
Внутри блока «Содержание» — компактный мини-блок (не модалка) с тремя полями:
|
||
|
||
| Поле | Тип | По умолчанию | Лимиты |
|
||
|------|-----|--------------|--------|
|
||
| Тема | `Input` | значение `title` из метаинформации (auto-fill) | непустая |
|
||
| Количество вопросов | `InputNumber` | 7 | 1…30 |
|
||
| Количество вариантов на вопрос | `InputNumber` | 3 | 2…8 |
|
||
|
||
Кнопка **«Сгенерировать»** запускает текущий поток `handleGenerate` (модалка-превью → «Применить все вопросы»), но передаёт оба числа в API. Превью показывает то же, что и сейчас.
|
||
|
||
Поведение существующих кнопок «Улучшить» и «Дистракторы» внутри карточки вопроса **не меняется** — они и так локальные.
|
||
|
||
### 3.4. Уход от текста про API-ключи
|
||
|
||
Единственное место в форме, где упоминается ключ, — fallback-сообщение об ошибке:
|
||
|
||
```ts
|
||
// TestForm/index.tsx:244
|
||
setReviewText('Не удалось получить рекомендации. Проверьте API ключ в настройках.')
|
||
```
|
||
|
||
Заменяем на нейтральное:
|
||
|
||
```ts
|
||
setReviewText('Не удалось получить рекомендации. Попробуйте позже или обратитесь к администратору.')
|
||
```
|
||
|
||
Сама страница `Settings` остаётся как есть — это её прямое назначение, и её редактируют только администраторы.
|
||
|
||
## 4. План работ (чек-лист для исполнителя)
|
||
|
||
- [ ] **Backend** (опционально, если ещё не принимает параметры): расширить схему `LLMGenerateRequest` в `backend/app/schemas/llm.py` полями `questions_count: int = 7`, `answers_count: int = 3`; передать их в промпт сервиса `app/services/llm.py`.
|
||
- [ ] **API-клиент**: в `frontend/src/api/llm.ts` обновить сигнатуру `generate(topic, questionsCount, answersCount)`.
|
||
- [ ] **TestForm**: обернуть текущий блок «Основные настройки» в `Card title="Метаинформация"`.
|
||
- [ ] **TestForm**: создать новый `Card title="Содержание"`, в него поместить:
|
||
- мини-блок AI-генерации (3 поля + кнопка),
|
||
- текущий `Form.List` вопросов с кнопкой «+ Добавить вопрос».
|
||
- [ ] **TestForm**: убрать текущий ряд из двух AI-кнопок между мета и вопросами; «Проверить тест» перенести в нижнюю панель команд рядом с «Создать»/«Отмена».
|
||
- [ ] **TestForm**: добавить локальный стейт `aiQuestionsCount`, `aiAnswersCount`, инициализация: 7 / 3.
|
||
- [ ] **TestForm**: в `handleGenerate` передавать оба числа; при `Применить` создавать соответствующее число пустых ответов в каждом вопросе (если бэк прислал меньше — добить пустыми, если больше — обрезать).
|
||
- [ ] **TestForm**: заменить fallback-текст про API-ключ.
|
||
- [ ] Прогнать `docker compose up`, проверить вручную: создание с дефолтами, генерация на 5 вопросов × 4 ответа, проверка теста, отмена.
|
||
- [ ] Документ-шаг в `DOC/ШАГИ/ШАГ_<дата>_<NNN>.md` по факту выполнения.
|
||
|
||
## 5. Что **не** делаем в этой ветке
|
||
|
||
- Не трогаем форму редактирования (`TestEdit`) — формально использует тот же `TestForm`, но эффект редизайна нужно отдельно проверить с уже заполненными вопросами и опциями версионирования.
|
||
- Не меняем поведение `Form.List` валидации (минимум 7 вопросов / 3 варианта) — это отдельная история.
|
||
- Не вводим drag-and-drop переупорядочивание вопросов.
|
||
|
||
## 6. Открытые вопросы для согласования
|
||
|
||
1. Нужно ли визуально подсвечивать мини-блок генерации (фон, бордер), чтобы он отличался от карточек вопросов?
|
||
2. После применения сгенерированных вопросов — нужно ли скрывать мини-блок, чтобы он не путал?
|
||
3. Лимиты «1…30 вопросов / 2…8 вариантов» — устраивают или нужны другие?
|