Перейти к основному содержимому

CALC-UI-2026-09-18

Цель: исправить понятность, группировку модулей, иерархию и расстояния в калькуляторе по запросу пользователя и двум скриншотам.

Исходная ветка: chore/architecture-migration-complete. Репозиторий: BelfProctor/dist.

Исходный status: изменены CONTRIBUTING.md, README.md, docs/implementation-handoff-report.md, docs/quality-gates-report.md, Calculator.tsx, CalculatorQuote.module.css, InstallationFieldset.module.css, ModulesFieldset.module.css, ModulesFieldset.tsx, CalculatorSection.module.css, tokens.css, navigation.spec.ts и шесть full-page-home snapshots; AGENTS.md untracked. Существующие правки не откатывать. Запрошено направление для пересечения с изменёнными файлами.

Сохраняем цены, формулы, допустимые конфигурации, clipboard/Telegram payload, маршруты и anchors. Изменения ограничены калькулятором.

  • Прочитать AGENTS.md, архитектуру, CONTRIBUTING, модель, данные и тесты.
  • Проверить исходное поведение и визуальную причину.
  • Получить направление для существующих правок: пользователь разрешил продолжать поверх текущих изменений.
  • Зафиксировать регрессию понятности и визуальной группировки.
  • Переработать блоки и пояснения, не меняя бизнес-правила.
  • Проверить все шесть viewport, клавиатуру и состояния.
  • Выполнить целевые проверки и полный quality gate.

Regression evidence: в браузере localhost:5174 у блока масштаба и модулей дополнительные 38 px между нижней границей legend и первым label, помимо padding legend 30 px. Модули отображаются строками без границ карточек. Их цены не содержат период/единицу расчёта. Между полем серверов и коммерческими условиями нет отдельного расстояния; семантика процента не раскрыта. Исходные 20 calculator unit tests PASS.

Команды: npm run test -- src/features/calculator — PASS (20 tests).

npx playwright test tests/e2e/calculator-ui.spec.ts --project=desktop-1440 — FAIL (3/3, ожидаемая регрессия: нет единицы цены, дополнительный gap 38 px, нет подписи разовой установки). Первый запуск заблокирован sandbox EPERM на локальном сервере; разрешённый повтор успешно запустил тесты. npm run quality после исправлений PASS; подробности финального прогона ниже.

Изменённые владельцы: calculator (форма, четыре fieldset и итоговая карточка), CalculatorSection (вводный текст и расстояние до формы). Добавлены рабочая запись и regression-файл; существующий тест строк модулей адаптирован к согласованному карточному представлению: цена под описанием, а не справа от него. Прежние исправления сохранены.

UI-дельта: отдельные выбираемые карточки модулей (две колонки при достаточной ширине, одна на телефоне), содержательные описания без необъяснённых сокращений, единица цены в каждой карточке, счётчик выбора и пустое состояние. Основные подписи 14–20 px, пояснения 14 px; карточки с padding 20 px, grid gap 12 px, группы с расстоянием 24–32 px. Убрано дополнительное поле padding 38 px под legend. Компьютеры сгруппированы с серверами и способом установки. Процент условий явно относится к подписке после скидки; установка разовая. Радиокнопки, checkbox, inputs, select и действия имеют видимый keyboard focus. Длинная итоговая сумма получает компактный размер. SEO/routes/anchors и pricing/model/payload не изменены.

Промежуточные проверки: format, lint, lint:css, typecheck, 58 unit tests, coverage, changed-line coverage, architecture, cycles, bundle, links, SEO и 24 a11y scenarios PASS. Source size limits PASS.

Первый полный quality прошёл все этапы до E2E, включая Lighthouse (mobile Performance 96–99, desktop 100; Accessibility/Best Practices/SEO 100). E2E: 186 PASS, 4 SKIP, 14 FAIL — шесть ожидаемых home visual diffs и восемь ошибок локаторов (select label включал option-текст; два small в новой карточке). Локаторы уточнены без ослабления assertions.

Визуальные actual/diff главной страницы вручную просмотрены во всех шести viewport, включая отдельные screenshots модулей и установки. Различия начинаются внутри калькулятора; ниже сместились секции из-за увеличения высоты карточек. Остальные страницы и navigation snapshots прошли без обновления. После проверки вручную скопированы ровно шесть actual в соответствующие home baselines; автоматического обновления нет, threshold 0.003 сохранён.

Целевой повтор: 55 PASS, 4 SKIP, 1 FAIL — планшет 768 выявил перекрытие крошечной области radio фиксированным header при автоматической прокрутке. Native inputs теперь покрывают всю карточку (а не 1 px), сохраняя opacity, семантику, состояния и outline. Подтверждающий тест планшета и финальный полный quality PASS.

Блокеров по разрешениям нет. «Правила вве» пользователь уточнил как «все правила». Commit/push/deploy не выполнялись.

Подтверждающий запуск планшета: npx playwright test tests/e2e/calculator-ui.spec.ts --project=tablet-768 — PASS (3/3). Финальный npm run quality — PASS (exit 0); лог: /private/tmp/belf-calculator-quality-final.log.

Финальные результаты: format:check, lint, lint:css, typecheck/build, unit tests (58), coverage, changed-line coverage, architecture, cycles, bundle, links, rendered SEO, a11y (24) и Lighthouse PASS. E2E — 200 PASS, 4 штатных SKIP (desktop-only проверка цены на мобильных/планшетных проектах), 0 FAIL. Все 18 новых сценариев калькулятора PASS. Viewport: 390, 430, 768, 1024, 1440, 1920. Проверены исходная конфигурация, выбор/снятие выбора с клавиатуры, переключение hosting/installation, скидка и условия, верхние пределы количества устройств/сотрудников без overflow. Source limits и git diff --check PASS.

Материально непроверенного в локальной задаче нет. Lighthouse — лабораторная проверка. Commit/push/deploy не выполнялись; изменения остаются локальными. Блокеров и незавершённых пунктов нет.

Итоговый Git status (исходные изменения пользователя сохранены):

 M CONTRIBUTING.md
 M README.md
 M docs/implementation-handoff-report.md
 M docs/quality-gates-report.md
 M src/features/calculator/Calculator.tsx
 M src/features/calculator/CalculatorForm.module.css
 M src/features/calculator/CalculatorForm.test.tsx
 M src/features/calculator/CalculatorQuote.module.css
 M src/features/calculator/CalculatorQuote.tsx
 M src/features/calculator/HostingFieldset.module.css
 M src/features/calculator/HostingFieldset.tsx
 M src/features/calculator/InstallationFieldset.module.css
 M src/features/calculator/InstallationFieldset.tsx
 M src/features/calculator/ModulesFieldset.module.css
 M src/features/calculator/ModulesFieldset.tsx
 M src/features/calculator/ScaleFieldset.module.css
 M src/features/calculator/ScaleFieldset.tsx
 M src/pages/home/sections/CalculatorSection/CalculatorSection.module.css
 M src/pages/home/sections/CalculatorSection/CalculatorSection.tsx
 M src/styles/tokens.css
 M tests/e2e/navigation.spec.ts
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-desktop-1440-desktop-1440-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-desktop-1920-desktop-1920-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-mobile-390-mobile-390-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-mobile-430-mobile-430-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-tablet-1024-tablet-1024-darwin.png
 M tests/e2e/navigation.spec.ts-snapshots/full-page-home-tablet-768-tablet-768-darwin.png
?? AGENTS.md
?? docs/tasks/
?? tests/e2e/calculator-ui.spec.ts